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 {:target :react-native
:output-dir "app" :output-dir "app"
:init-fn status-im.core/init :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 :dev {:devtools {:after-load status-im.reloader/reload
:build-notify status-im.reloader/build-notify :build-notify status-im.reloader/build-notify
:preloads [re-frisk-remote.preload]} :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 (ns quo2.components.notifications.activity-logs
(:require [quo.react-native :as rn] (:require [quo.react-native :as rn]
[quo2.foundations.colors :as colors] [quo2.components.buttons.button :as button]
[quo2.components.tags.status-tags :as status-tags] [quo2.components.icon :as icon]
[quo2.components.buttons.button :as quo2.button]
[quo2.components.markdown.text :as text] [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 [_] (defn- activity-icon
(fn [{:keys [title [icon]
button-1 [rn/view {:height 32
button-2 :width 32
icon :border-radius 100
unread :margin-top 10
status :border-width 1
message :border-color colors/white-opa-5
timestamp]}] :flex-direction :column
[rn/view {:flex-direction :row :align-items :center
:flex 1 :justify-content :center}
:border-radius 16 [icon/icon icon {:color colors/white}]])
:padding-top 8
:padding-horizontal 12 (defn- activity-unread-dot
:padding-bottom 12 []
:background-color (when unread [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)} colors/primary-50-opa-10)}
[rn/view {:height 32 [activity-icon icon]
:width 32 [rn/view {:flex-direction :column
:border-radius 100 :padding-left 8
:margin-top 8 :flex 1}
:background-color colors/neutral-80-opa-60 [rn/view {:flex 1
:flex-direction :column :flex-wrap :wrap
:align-items :center :align-items :center
:justify-content :center} :flex-direction :row}
[quo2.icons/icon icon {:color colors/white}]] [rn/view {:flex 1
[rn/view {:flex-direction :column :flex-direction :row
:padding-left 8 :align-items :center}
:flex 1} [activity-title title]
[rn/view {:flex 1 [activity-timestamp timestamp]]
:flex-wrap :wrap} (when unread?
[rn/view {:flex-direction :row} [activity-unread-dot])]
[text/text {:weight :semi-bold (when context
:style {:color colors/white} [activity-context context])
:size :paragraph-1} (when message
title] [activity-message message])
[rn/view {:margin-left 8 (cond
:margin-top 5} (some? status)
[text/text {:size :label [activity-status status]
:style {:text-transform :none
:color colors/neutral-40}} timestamp]]]] (or button-1 button-2)
(when message [activity-buttons button-1 button-2])]])
[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)])])]]))

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

@ -31,11 +31,13 @@
(defn group-avatar-tag [_ _] (defn group-avatar-tag [_ _]
(fn [label opts] (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] [group-avatar/group-avatar opts]
[text/text {:weight :medium [text/text {:weight :medium
:size :paragraph-2} :size :paragraph-2
:style (:text-style opts)}
(str " " label)]])) (str " " label)]]))
(defn public-key-tag [_ _] (defn public-key-tag [_ _]

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

@ -12,7 +12,7 @@
(def small-container-style (def small-container-style
(merge default-container-style (merge default-container-style
{:padding-horizontal 7 {:padding-horizontal 8
:padding-vertical 3})) :padding-vertical 3}))
(def large-container-style (def large-container-style

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

@ -1,87 +1,164 @@
(ns quo2.screens.notifications.activity-logs (ns quo2.screens.notifications.activity-logs
(:require [reagent.core :as reagent] (:require [quo.previews.preview :as preview]
[quo.react-native :as rn] [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.foundations.colors :as colors]
[quo2.screens.tags.status-tags :as status-tags] [quo2.screens.tags.status-tags :as status-tags]
[quo2.components.notifications.activity-logs :as activity-logs])) [reagent.core :as reagent]))
(def descriptor [{:label "Unread:" (def descriptor [{:label "Unread?"
:key :unread :key :unread?
:type :boolean} :type :boolean}
{:label "Icon" {:label "Icon"
:key :icon :key :icon
:type :select :type :select
:options [{:key :placeholder :options [{:key :placeholder
:value :placeholder}]} :value :placeholder}]}
{:label "Title" {:label "Title"
:key :title :key :title
:type :text} :type :text}
{:label :message {:label "Context"
:key :message :key :context
:type :text} :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" {:label "Timestamp"
:key :timestamp :key :timestamp
:type :text} :type :text}
{:label "Button 1 type" {:label "Button 1 type"
:key :button-1-type :key :button-1-type
:type :select :type :select
:options [{:value "Danger" :options [{:value "Danger"
:key :danger} :key :danger}
{:value "Primary" {:value "Primary"
:key :primary} :key :primary}
{:value "Success" {:value "Success"
:key :success}]} :key :success}]}
{:label "Button 1 label" {:label "Button 1 label"
:key :button-1-label :key :button-1-label
:type :text} :type :text}
{:label "Button 2 type" {:label "Button 2 type"
:key :button-2-type :key :button-2-type
:type :select :type :select
:options [{:value "Danger" :options [{:value "Danger"
:key :danger} :key :danger}
{:value "Primary" {:value "Primary"
:key :primary} :key :primary}
{:value "Success" {:value "Success"
:key :success}]} :key :success}]}
{:label "Button 2 label" {:label "Button 2 label"
:key :button-2-label :key :button-2-label
:type :text} :type :text}
status-tags/status-tags-options]) 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 [] (defn preview []
(let [state (reagent/atom {:title "Activity Title" (let [state (reagent/atom {:button-1-label "Decline"
:timestamp "Yesterday ∙ 10:41" :button-1-type :danger
:message "Hello Alisher! Do you remember me from the web 3.0 conference in Porto?" :button-2-label "Accept"
:icon :placeholder})] :button-2-type :primary
:context :complex-user-action
:icon :placeholder
:message :with-title
:timestamp "Today 00:00"
:title "Activity Title"
:unread? true})]
(fn [] (fn []
(let [{:keys [button-1-type (let [{:keys [button-1-type
button-1-label button-1-label
button-2-type button-2-type
button-2-label]} @state button-2-label]} @state
props (cond-> @state props (cond-> @state
(and (seq button-1-label) (and (seq button-1-label)
button-1-type) button-1-type)
(assoc :button-1 {:label button-1-label (assoc :button-1 {:label button-1-label
:type button-1-type}) :type button-1-type})
(and (seq button-2-label) (and (seq button-2-label)
button-2-type) button-2-type)
(assoc :button-2 {:label button-2-label (assoc :button-2 {:label button-2-label
:type button-2-type}))] :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 [rn/view {:margin-bottom 50
:padding 16} :padding 16}
[rn/view {:flex 1} [rn/view {:flex 1}
[preview/customizer state descriptor]] [preview/customizer state descriptor]]
[rn/view {:padding-vertical 60 [rn/view {:background-color colors/neutral-95-opa-80
:background-color colors/neutral-95-opa-80
:flex-direction :row :flex-direction :row
:justify-content :center} :justify-content :center
[activity-logs/activity-logs props]]])))) :padding-vertical 60}
[activity-logs/activity-log props]]]))))
(defn preview-activity-logs [] (defn preview-activity-logs []
[rn/view {:flex 1} [rn/view {:flex 1}
[rn/flat-list {:flex 1 [rn/flat-list {:flex 1
:keyboardShouldPersistTaps :always
:header [preview] :header [preview]
:key-fn str}]]) :key-fn str
:keyboardShouldPersistTaps :always}]])