Improve activity log component
Also makes hot reload optional with environment variable SHADOW_AUTOBUILD_ENABLED.
This commit is contained in:
parent
7cc3ea2af4
commit
8502834500
|
@ -40,6 +40,10 @@
|
|||
{:target :react-native
|
||||
:output-dir "app"
|
||||
:init-fn status-im.core/init
|
||||
;; When false, the Shadow-CLJS watcher won't automatically refresh
|
||||
;; the target files (a.k.a hot reload). When false, you can manually
|
||||
;; reload by calling `shadow.cljs.devtools.api/watch-compile-all!`.
|
||||
:devtools {:autobuild #shadow/env ["SHADOW_AUTOBUILD_ENABLED" :default true :as :bool]}
|
||||
:dev {:devtools {:after-load status-im.reloader/reload
|
||||
:build-notify status-im.reloader/build-notify
|
||||
:preloads [re-frisk-remote.preload]}
|
||||
|
|
|
@ -1,81 +1,156 @@
|
|||
(ns quo2.components.notifications.activity-logs
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.tags.status-tags :as status-tags]
|
||||
[quo2.components.buttons.button :as quo2.button]
|
||||
[quo2.components.buttons.button :as button]
|
||||
[quo2.components.icon :as icon]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.components.icon :as quo2.icons]))
|
||||
[quo2.components.tags.status-tags :as status-tags]
|
||||
[quo2.foundations.colors :as colors]))
|
||||
|
||||
(defn activity-logs [_]
|
||||
(fn [{:keys [title
|
||||
button-1
|
||||
button-2
|
||||
icon
|
||||
unread
|
||||
status
|
||||
message
|
||||
timestamp]}]
|
||||
[rn/view {:flex-direction :row
|
||||
:flex 1
|
||||
:border-radius 16
|
||||
:padding-top 8
|
||||
:padding-horizontal 12
|
||||
:padding-bottom 12
|
||||
:background-color (when unread
|
||||
(defn- activity-icon
|
||||
[icon]
|
||||
[rn/view {:height 32
|
||||
:width 32
|
||||
:border-radius 100
|
||||
:margin-top 10
|
||||
:border-width 1
|
||||
:border-color colors/white-opa-5
|
||||
:flex-direction :column
|
||||
:align-items :center
|
||||
:justify-content :center}
|
||||
[icon/icon icon {:color colors/white}]])
|
||||
|
||||
(defn- activity-unread-dot
|
||||
[]
|
||||
[rn/view {:margin-left :auto
|
||||
:margin-right 6
|
||||
:background-color colors/primary-50
|
||||
:width 8
|
||||
:height 8
|
||||
:border-radius 4}])
|
||||
|
||||
(defn- activity-context
|
||||
[context]
|
||||
(let [margin-top 4]
|
||||
(into [rn/view {:flex 1
|
||||
:flex-direction :row
|
||||
:align-items :center
|
||||
:flex-wrap :wrap
|
||||
:margin-top (+ 4 (- margin-top))}]
|
||||
(map-indexed (fn [index detail]
|
||||
^{:key index}
|
||||
[rn/view {:margin-right 4
|
||||
:margin-top margin-top}
|
||||
(if (string? detail)
|
||||
[text/text {:size :paragraph-2}
|
||||
detail]
|
||||
detail)])
|
||||
context))))
|
||||
|
||||
(defn- activity-message
|
||||
[{:keys [title body]}]
|
||||
[rn/view {:border-radius 12
|
||||
:margin-top 12
|
||||
:padding-horizontal 12
|
||||
:padding-vertical 8
|
||||
:background-color colors/white-opa-5
|
||||
:flex 1
|
||||
:flex-direction :column}
|
||||
(when title
|
||||
[text/text {:size :paragraph-2
|
||||
:style {:color colors/white-opa-40}}
|
||||
title])
|
||||
(if (string? body)
|
||||
[text/text {:style {:color colors/white}
|
||||
:size :paragraph-1}
|
||||
body]
|
||||
body)])
|
||||
|
||||
(defn- activity-buttons
|
||||
[button-1 button-2]
|
||||
(let [size 24
|
||||
common-style {:padding-top 3
|
||||
:padding-right 8
|
||||
:padding-bottom 4
|
||||
:padding-left 8}]
|
||||
[rn/view {:margin-top 12
|
||||
:flex 1
|
||||
:flex-direction :row
|
||||
:align-items :flex-start}
|
||||
(when button-1
|
||||
[button/button (-> button-1
|
||||
(assoc :size size)
|
||||
(assoc-in [:style :margin-right] 8)
|
||||
(update :style merge common-style))
|
||||
(:label button-1)])
|
||||
(when button-2
|
||||
[button/button (-> button-2
|
||||
(assoc :size size)
|
||||
(update :style merge common-style))
|
||||
(:label button-2)])]))
|
||||
|
||||
(defn- activity-status
|
||||
[status]
|
||||
[rn/view {:margin-top 12
|
||||
:align-items :flex-start
|
||||
:flex 1}
|
||||
[status-tags/status-tag {:size :small
|
||||
:status status}]])
|
||||
|
||||
(defn- activity-title
|
||||
[title]
|
||||
[text/text {:weight :semi-bold
|
||||
:style {:color colors/white}
|
||||
:size :paragraph-1}
|
||||
title])
|
||||
|
||||
(defn- activity-timestamp
|
||||
[timestamp]
|
||||
[rn/view {:margin-left 8}
|
||||
[text/text {:size :label
|
||||
:style {:text-transform :none
|
||||
:color colors/neutral-40}}
|
||||
timestamp]])
|
||||
|
||||
(defn activity-log
|
||||
[{:keys [button-1
|
||||
button-2
|
||||
icon
|
||||
message
|
||||
status
|
||||
context
|
||||
timestamp
|
||||
title
|
||||
unread?]}]
|
||||
[rn/view {:flex-direction :row
|
||||
:flex 1
|
||||
:border-radius 16
|
||||
:padding-top 8
|
||||
:padding-horizontal 12
|
||||
:padding-bottom 12
|
||||
:background-color (when unread?
|
||||
colors/primary-50-opa-10)}
|
||||
[rn/view {:height 32
|
||||
:width 32
|
||||
:border-radius 100
|
||||
:margin-top 8
|
||||
:background-color colors/neutral-80-opa-60
|
||||
:flex-direction :column
|
||||
:align-items :center
|
||||
:justify-content :center}
|
||||
[quo2.icons/icon icon {:color colors/white}]]
|
||||
[rn/view {:flex-direction :column
|
||||
:padding-left 8
|
||||
:flex 1}
|
||||
[rn/view {:flex 1
|
||||
:flex-wrap :wrap}
|
||||
[rn/view {:flex-direction :row}
|
||||
[text/text {:weight :semi-bold
|
||||
:style {:color colors/white}
|
||||
:size :paragraph-1}
|
||||
title]
|
||||
[rn/view {:margin-left 8
|
||||
:margin-top 5}
|
||||
[text/text {:size :label
|
||||
:style {:text-transform :none
|
||||
:color colors/neutral-40}} timestamp]]]]
|
||||
(when message
|
||||
[rn/view {:border-radius 12
|
||||
:margin-top 13
|
||||
:padding-horizontal 12
|
||||
:padding-vertical 8
|
||||
:background-color :red}
|
||||
[text/text {:style {:color colors/white}
|
||||
:size :paragraph-1}
|
||||
message]])
|
||||
(when status
|
||||
[rn/view {:padding-top 10
|
||||
:align-items :flex-start}
|
||||
[status-tags/status-tag {:size :small
|
||||
:override-theme :dark
|
||||
:status status}]])
|
||||
(when (or button-1 button-2)
|
||||
[rn/view {:padding-top 10
|
||||
:flex 1
|
||||
:flex-direction :row
|
||||
:align-items :flex-start}
|
||||
(when button-1
|
||||
[quo2.button/button
|
||||
(assoc button-1
|
||||
:override-them :dark
|
||||
:style {:margin-right 8})
|
||||
(:label button-1)])
|
||||
(when button-2
|
||||
[quo2.button/button
|
||||
(assoc button-2
|
||||
:override-theme
|
||||
:dark)
|
||||
(:label button-2)])])]]))
|
||||
[activity-icon icon]
|
||||
[rn/view {:flex-direction :column
|
||||
:padding-left 8
|
||||
:flex 1}
|
||||
[rn/view {:flex 1
|
||||
:flex-wrap :wrap
|
||||
:align-items :center
|
||||
:flex-direction :row}
|
||||
[rn/view {:flex 1
|
||||
:flex-direction :row
|
||||
:align-items :center}
|
||||
[activity-title title]
|
||||
[activity-timestamp timestamp]]
|
||||
(when unread?
|
||||
[activity-unread-dot])]
|
||||
(when context
|
||||
[activity-context context])
|
||||
(when message
|
||||
[activity-message message])
|
||||
(cond
|
||||
(some? status)
|
||||
[activity-status status]
|
||||
|
||||
(or button-1 button-2)
|
||||
[activity-buttons button-1 button-2])]])
|
||||
|
|
|
@ -31,11 +31,13 @@
|
|||
|
||||
(defn group-avatar-tag [_ _]
|
||||
(fn [label opts]
|
||||
[base-tag {:style {:padding-left 3}}
|
||||
[base-tag (-> opts
|
||||
(select-keys [:override-theme :style])
|
||||
(assoc-in [:style :padding-left] 3))
|
||||
[group-avatar/group-avatar opts]
|
||||
[text/text {:weight :medium
|
||||
:size :paragraph-2}
|
||||
|
||||
:size :paragraph-2
|
||||
:style (:text-style opts)}
|
||||
(str " " label)]]))
|
||||
|
||||
(defn public-key-tag [_ _]
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
(def small-container-style
|
||||
(merge default-container-style
|
||||
{:padding-horizontal 7
|
||||
{:padding-horizontal 8
|
||||
:padding-vertical 3}))
|
||||
|
||||
(def large-container-style
|
||||
|
|
|
@ -1,87 +1,164 @@
|
|||
(ns quo2.screens.notifications.activity-logs
|
||||
(:require [reagent.core :as reagent]
|
||||
(:require [quo.previews.preview :as preview]
|
||||
[quo.react-native :as rn]
|
||||
[quo.previews.preview :as preview]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.components.notifications.activity-logs :as activity-logs]
|
||||
[quo2.components.tags.context-tags :as context-tags]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.screens.tags.status-tags :as status-tags]
|
||||
[quo2.components.notifications.activity-logs :as activity-logs]))
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
(def descriptor [{:label "Unread:"
|
||||
:key :unread
|
||||
(def descriptor [{:label "Unread?"
|
||||
:key :unread?
|
||||
:type :boolean}
|
||||
{:label "Icon"
|
||||
:key :icon
|
||||
:type :select
|
||||
:options [{:key :placeholder
|
||||
{:label "Icon"
|
||||
:key :icon
|
||||
:type :select
|
||||
:options [{:key :placeholder
|
||||
:value :placeholder}]}
|
||||
{:label "Title"
|
||||
:key :title
|
||||
:type :text}
|
||||
{:label :message
|
||||
:key :message
|
||||
:type :text}
|
||||
{:label "Context"
|
||||
:key :context
|
||||
:type :select
|
||||
:options [{:key :basic-user-action
|
||||
:value "Basic user action"}
|
||||
{:key :complex-user-action
|
||||
:value "Complex user action"}]}
|
||||
{:label "Message"
|
||||
:key :message
|
||||
:type :select
|
||||
:options [{:value "Simple"
|
||||
:key :simple}
|
||||
{:value "With mention"
|
||||
:key :with-mention}
|
||||
{:value "With title"
|
||||
:key :with-title}]}
|
||||
{:label "Timestamp"
|
||||
:key :timestamp
|
||||
:type :text}
|
||||
{:label "Button 1 type"
|
||||
:key :button-1-type
|
||||
:type :select
|
||||
:key :timestamp
|
||||
:type :text}
|
||||
{:label "Button 1 type"
|
||||
:key :button-1-type
|
||||
:type :select
|
||||
:options [{:value "Danger"
|
||||
:key :danger}
|
||||
:key :danger}
|
||||
{:value "Primary"
|
||||
:key :primary}
|
||||
:key :primary}
|
||||
{:value "Success"
|
||||
:key :success}]}
|
||||
:key :success}]}
|
||||
{:label "Button 1 label"
|
||||
:key :button-1-label
|
||||
:type :text}
|
||||
{:label "Button 2 type"
|
||||
:key :button-2-type
|
||||
:type :select
|
||||
:key :button-1-label
|
||||
:type :text}
|
||||
{:label "Button 2 type"
|
||||
:key :button-2-type
|
||||
:type :select
|
||||
:options [{:value "Danger"
|
||||
:key :danger}
|
||||
:key :danger}
|
||||
{:value "Primary"
|
||||
:key :primary}
|
||||
:key :primary}
|
||||
{:value "Success"
|
||||
:key :success}]}
|
||||
:key :success}]}
|
||||
{:label "Button 2 label"
|
||||
:key :button-2-label
|
||||
:type :text}
|
||||
:key :button-2-label
|
||||
:type :text}
|
||||
status-tags/status-tags-options])
|
||||
|
||||
(def basic-user-action
|
||||
[[context-tags/group-avatar-tag "Name" {:color :purple
|
||||
:override-theme :dark
|
||||
:size :small
|
||||
:style {:background-color colors/white-opa-10}
|
||||
:text-style {:color colors/white}}]
|
||||
[rn/text {:style {:color colors/white}} "did something here."]])
|
||||
|
||||
(def complex-user-action
|
||||
(let [tag-props {:color :purple
|
||||
:override-theme :dark
|
||||
:size :small
|
||||
:style {:background-color colors/white-opa-10}
|
||||
:text-style {:color colors/white}}]
|
||||
[[context-tags/group-avatar-tag "250,000 SNT" tag-props]
|
||||
[rn/text {:style {:color colors/white}} "from"]
|
||||
[context-tags/group-avatar-tag "Mainnet" tag-props]
|
||||
[rn/text {:style {:color colors/white}} "to"]
|
||||
[context-tags/group-avatar-tag "Optimism" tag-props]
|
||||
[rn/text {:style {:color colors/white}} "on"]
|
||||
[context-tags/group-avatar-tag "My savings" tag-props]]))
|
||||
|
||||
(def message-with-mention
|
||||
(let [common-text-style {:style {:color colors/white}
|
||||
:size :paragraph-1}]
|
||||
{:body [rn/view {:flex 1
|
||||
:flex-direction :row}
|
||||
[text/text common-text-style "Hello"]
|
||||
[text/text {:style {:background-color colors/primary-50-opa-10
|
||||
:border-radius 6
|
||||
:color colors/primary-50
|
||||
:margin-horizontal 3
|
||||
:padding-horizontal 3
|
||||
:size :paragraph-1}}
|
||||
"@name"]
|
||||
[text/text common-text-style "! How are you feeling?"]]}))
|
||||
|
||||
(def message-with-title
|
||||
{:body "Your favorite color is Turquoise."
|
||||
:title "What's my favorite color?"})
|
||||
|
||||
(defn preview []
|
||||
(let [state (reagent/atom {:title "Activity Title"
|
||||
:timestamp "Yesterday ∙ 10:41"
|
||||
:message "Hello Alisher! Do you remember me from the web 3.0 conference in Porto?"
|
||||
:icon :placeholder})]
|
||||
(let [state (reagent/atom {:button-1-label "Decline"
|
||||
:button-1-type :danger
|
||||
:button-2-label "Accept"
|
||||
:button-2-type :primary
|
||||
:context :complex-user-action
|
||||
:icon :placeholder
|
||||
:message :with-title
|
||||
:timestamp "Today 00:00"
|
||||
:title "Activity Title"
|
||||
:unread? true})]
|
||||
(fn []
|
||||
(let [{:keys [button-1-type
|
||||
button-1-label
|
||||
button-2-type
|
||||
button-2-label]} @state
|
||||
props (cond-> @state
|
||||
(and (seq button-1-label)
|
||||
button-1-type)
|
||||
(assoc :button-1 {:label button-1-label
|
||||
:type button-1-type})
|
||||
props (cond-> @state
|
||||
(and (seq button-1-label)
|
||||
button-1-type)
|
||||
(assoc :button-1 {:label button-1-label
|
||||
:type button-1-type})
|
||||
|
||||
(and (seq button-2-label)
|
||||
button-2-type)
|
||||
(assoc :button-2 {:label button-2-label
|
||||
:type button-2-type}))]
|
||||
(and (seq button-2-label)
|
||||
button-2-type)
|
||||
(assoc :button-2 {:label button-2-label
|
||||
:type button-2-type})
|
||||
|
||||
(= (:message @state) :simple)
|
||||
(assoc :message {:body "The quick brown fox forgot to jump."})
|
||||
|
||||
(= (:message @state) :with-mention)
|
||||
(assoc :message message-with-mention)
|
||||
|
||||
(= (:message @state) :with-title)
|
||||
(assoc :message message-with-title)
|
||||
|
||||
(= (:context @state) :basic-user-action)
|
||||
(assoc :context basic-user-action)
|
||||
|
||||
(= (:context @state) :complex-user-action)
|
||||
(assoc :context complex-user-action))]
|
||||
[rn/view {:margin-bottom 50
|
||||
:padding 16}
|
||||
[rn/view {:flex 1}
|
||||
[preview/customizer state descriptor]]
|
||||
[rn/view {:padding-vertical 60
|
||||
:background-color colors/neutral-95-opa-80
|
||||
[rn/view {:background-color colors/neutral-95-opa-80
|
||||
:flex-direction :row
|
||||
:justify-content :center}
|
||||
[activity-logs/activity-logs props]]]))))
|
||||
:justify-content :center
|
||||
:padding-vertical 60}
|
||||
[activity-logs/activity-log props]]]))))
|
||||
|
||||
(defn preview-activity-logs []
|
||||
[rn/view {:flex 1}
|
||||
[rn/view {:flex 1}
|
||||
[rn/flat-list {:flex 1
|
||||
:keyboardShouldPersistTaps :always
|
||||
:header [preview]
|
||||
:key-fn str}]])
|
||||
:key-fn str
|
||||
:keyboardShouldPersistTaps :always}]])
|
||||
|
|
Loading…
Reference in New Issue