status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Improve activity log component 

Also makes hot reload optional with environment variable
SHADOW_AUTOBUILD_ENABLED.
This commit is contained in:
Icaro Motta 2022-08-26 17:59:23 -03:00
parent 7cc3ea2af4
commit 8502834500
No known key found for this signature in database
GPG Key ID: 009557D9D014DF07
5 changed files with 288 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
shadow-cljs.edn
View File

@ -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]}

227
src/quo2/components/notifications/activity_logs.cljs
View File

@ -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])]])

8
src/quo2/components/tags/context_tags.cljs
View File

@ -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 [_ _]

2
src/quo2/components/tags/status_tags.cljs
View File

@ -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

177
src/quo2/screens/notifications/activity_logs.cljs
View File

@ -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}]])