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

Fix various Activity Log layout issues (#14405)

This commit is contained in:
Icaro Motta 2022-11-21 11:19:50 -03:00 committed by GitHub
parent 5492fb472f
commit e53f58d8c0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 214 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/quo2/components/notifications/activity_log/style.cljs Normal file
View File

@ -0,0 +1,76 @@
(ns quo2.components.notifications.activity-log.style
(:require [quo2.foundations.colors :as colors]))
(def container
{:flex-direction :row
:flex-grow 1
:align-items :flex-start
:padding-top 8
:padding-horizontal 12
:padding-bottom 12})
(def icon
{:height 32
:width 32
:border-radius 100
:margin-top 10
:border-width 1
:border-color colors/white-opa-5
:align-items :center
:justify-content :center})
(def message-title
{:color colors/white-opa-40
:margin-bottom 2})
(def message-body
{:color colors/white})
(def message-container
{:border-radius 12
:margin-top 12
:padding-horizontal 12
:padding-vertical 8
:background-color colors/white-opa-5})
(def buttons-container
{:margin-top 12
:flex-direction :row
:align-items :flex-start})
(def status
{:margin-top 12
:align-items :flex-start
:flex 1})
(defn title [replying?]
{:color colors/white
:flex-shrink 1
:max-width (when-not replying? "60%")})
(def timestamp
{:text-transform :none
:flex-grow 1
:margin-left 8
:color colors/neutral-40})
(def unread-dot
{:background-color colors/primary-50
:border-radius 4
:width 8
:height 8})
(def unread-dot-container
{:margin-left 8
:padding-horizontal 12
:padding-vertical 7})
(def context-container
{:flex-direction :row
:align-items :center
:justify-content :flex-start
:flex-wrap :wrap})
(def top-section-container
{:align-items :center
:flex-direction :row})

116
src/quo2/components/notifications/activity_logs.cljs → src/quo2/components/notifications/activity_log/view.cljs
View File

@ -1,10 +1,12 @@
(ns quo2.components.notifications.activity-logs (ns quo2.components.notifications.activity-log.view
(:require [quo.core :as quo] (:require [clojure.string :as string]
[quo.core :as quo]
[quo2.components.buttons.button :as button] [quo2.components.buttons.button :as button]
[quo2.components.icon :as icon] [quo2.components.icon :as icon]
[quo2.components.markdown.text :as text] [quo2.components.markdown.text :as text]
[quo2.components.tags.status-tags :as status-tags] [quo2.components.tags.status-tags :as status-tags]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.components.notifications.activity-log.style :as style]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im.i18n.i18n :as i18n])) [status-im.i18n.i18n :as i18n]))
@ -48,57 +50,39 @@
(defn- activity-icon (defn- activity-icon
[icon] [icon]
[rn/view {:height 32 [rn/view {:style style/icon}
:width 32
:border-radius 100
:margin-top 10
:border-width 1
:border-color colors/white-opa-5
:align-items :center
:justify-content :center}
[icon/icon icon {:color colors/white}]]) [icon/icon icon {:color colors/white}]])
(defn- activity-unread-dot
[]
[rn/view {:margin-left 14
:margin-right 6
:background-color colors/primary-50
:width 8
:height 8
:border-radius 4}])
(defn- activity-context (defn- activity-context
[context replying?] [context replying?]
(let [first-line-offset (if replying? 4 -2) (let [first-line-offset (if replying? 4 0)
gap-between-lines 4] gap-between-lines 4]
(into [rn/view {:flex-direction :row (into [rn/view {:style (assoc style/context-container :margin-top first-line-offset)}]
:align-items :center (mapcat (fn [detail]
:flex-wrap :wrap ^{:key (hash detail)}
:margin-top first-line-offset}]
(map-indexed (fn [index detail]
^{:key index}
[rn/view {:margin-right 4
:margin-top gap-between-lines}
(if (string? detail) (if (string? detail)
(map (fn [s]
[rn/view {:style {:margin-right 4
:margin-top 0}}
[text/text {:size :paragraph-2} [text/text {:size :paragraph-2}
detail] s]])
detail)]) (string/split detail #"\s+"))
[[rn/view {:margin-right 4
:margin-top gap-between-lines}
detail]]))
context)))) context))))
(defn- activity-message (defn- activity-message
[{:keys [title body]}] [{:keys [title body]}]
[rn/view {:border-radius 12 [rn/view {:style style/message-container}
:margin-top 12
:padding-horizontal 12
:padding-vertical 8
:background-color colors/white-opa-5}
(when title (when title
[text/text {:size :paragraph-2 [text/text {:size :paragraph-2
:style {:color colors/white-opa-40 :accessibility-label :activity-message-title
:margin-bottom 2}} :style style/message-title}
title]) title])
(if (string? body) (if (string? body)
[text/text {:style {:color colors/white} [text/text {:style style/message-body
:accessibility-label :activity-message-body
:size :paragraph-1} :size :paragraph-1}
body] body]
body)]) body)])
@ -110,9 +94,7 @@
{:padding-vertical 9 {:padding-vertical 9
:flex-grow 1 :flex-grow 1
:flex-basis 0})] :flex-basis 0})]
[rn/view {:margin-top 12 [rn/view style/buttons-container
:flex-direction :row
:align-items :flex-start}
(when button-1 (when button-1
[button/button (-> button-1 [button/button (-> button-1
(assoc :size size) (assoc :size size)
@ -127,9 +109,8 @@
(defn- activity-status (defn- activity-status
[status] [status]
[rn/view {:margin-top 12 [rn/view {:style style/status
:align-items :flex-start :accessibility-label :activity-status}
:flex 1}
[status-tags/status-tag {:size :small [status-tags/status-tag {:size :small
:label (:label status) :label (:label status)
:status status}]]) :status status}]])
@ -137,17 +118,23 @@
(defn- activity-title (defn- activity-title
[title replying?] [title replying?]
[text/text {:weight :semi-bold [text/text {:weight :semi-bold
:style {:color colors/white} :accessibility-label :activity-title
:style (style/title replying?)
:size (if replying? :heading-2 :paragraph-1)} :size (if replying? :heading-2 :paragraph-1)}
title]) title])
(defn- activity-timestamp (defn- activity-timestamp
[timestamp] [timestamp]
[rn/view {:margin-left 8}
[text/text {:size :label [text/text {:size :label
:style {:text-transform :none :accessibility-label :activity-timestamp
:color colors/neutral-40}} :style style/timestamp}
timestamp]]) timestamp])
(defn- activity-unread-dot
[]
[rn/view {:accessibility-label :activity-unread-indicator
:style style/unread-dot-container}
[rn/view {:style style/unread-dot}]])
(defn- footer (defn- footer
[_] [_]
@ -162,7 +149,7 @@
(or button-1 button-2) (or button-1 button-2)
[activity-buttons button-1 button-2 replying? reply-input])]))) [activity-buttons button-1 button-2 replying? reply-input])])))
(defn activity-log (defn view
[{:keys [icon [{:keys [icon
message message
context context
@ -171,32 +158,21 @@
replying? replying?
unread?] unread?]
:as props}] :as props}]
[rn/view {:flex-direction :row [rn/view {:accessibility-label :activity
:align-items :flex-start :style style/container}
:border-radius 16
:padding-top 8
:padding-horizontal (if replying? 20 12)
:padding-bottom 12
:background-color (when (and unread? (not replying?))
colors/primary-50-opa-10)}
(when-not replying? (when-not replying?
[activity-icon icon]) [activity-icon icon])
[rn/view {:padding-left (when-not replying? 8) [rn/view {:style {:padding-left (when-not replying? 8)
:flex-grow 1} :flex 1}}
[rn/view {:flex-grow 1 [rn/view
:align-items :center [rn/view {:style style/top-section-container}
:flex-direction :row} [activity-title title replying?]
[rn/view {:flex 1
:align-items :center
:flex-direction :row}
[rn/view {:flex-shrink 1}
[activity-title title replying?]]
(when-not replying? (when-not replying?
[activity-timestamp timestamp])] [activity-timestamp timestamp])
(when (and unread? (not replying?)) (when (and unread? (not replying?))
[activity-unread-dot])] [activity-unread-dot])]
(when context (when context
[activity-context context replying?]) [activity-context context replying?])]
(when message (when message
[activity-message message]) [activity-message message])
[footer props]]]) [footer props]]])

4
src/quo2/core.cljs
View File

@ -28,7 +28,7 @@
quo2.components.messages.gap quo2.components.messages.gap
quo2.components.messages.system-message quo2.components.messages.system-message
quo2.components.reactions.reaction quo2.components.reactions.reaction
quo2.components.notifications.activity-logs quo2.components.notifications.activity-log.view
quo2.components.notifications.info-count quo2.components.notifications.info-count
quo2.components.notifications.notification-dot quo2.components.notifications.notification-dot
quo2.components.tags.tags quo2.components.tags.tags
@ -96,6 +96,6 @@
(def preview-list quo2.components.list-items.preview-list/preview-list) (def preview-list quo2.components.list-items.preview-list/preview-list)
;;;; NOTIFICATIONS ;;;; NOTIFICATIONS
(def activity-log quo2.components.notifications.activity-logs/activity-log) (def activity-log quo2.components.notifications.activity-log.view/view)
(def info-count quo2.components.notifications.info-count/info-count) (def info-count quo2.components.notifications.info-count/info-count)
(def notification-dot quo2.components.notifications.notification-dot/notification-dot) (def notification-dot quo2.components.notifications.notification-dot/notification-dot)

5
src/status_im/ui/screens/activity_center/notification/contact_request/view.cljs
View File

@ -38,8 +38,7 @@
:text-style style/user-avatar-tag-text} :text-style style/user-avatar-tag-text}
(activity-center.utils/contact-name contact) (activity-center.utils/contact-name contact)
(multiaccounts/displayed-photo contact)] (multiaccounts/displayed-photo contact)]
[quo2/text {:style style/context-tag-text} (i18n/label :t/contact-request-sent)]
(i18n/label :t/contact-request-sent)]]
:message {:body (get-in message [:content :text])} :message {:body (get-in message [:content :text])}
:status (case (:contact-request-state message) :status (case (:contact-request-state message)
constants/contact-request-message-state-accepted constants/contact-request-message-state-accepted
@ -50,9 +49,11 @@
(case (:contact-request-state message) (case (:contact-request-state message)
constants/contact-request-state-mutual constants/contact-request-state-mutual
{:button-1 {:label (i18n/label :t/decline) {:button-1 {:label (i18n/label :t/decline)
:accessibility-label :decline-contact-request
:type :danger :type :danger
:on-press #(rf/dispatch [:contact-requests.ui/decline-request id])} :on-press #(rf/dispatch [:contact-requests.ui/decline-request id])}
:button-2 {:label (i18n/label :t/accept) :button-2 {:label (i18n/label :t/accept)
:accessibility-label :accept-contact-request
:type :positive :type :positive
:on-press #(rf/dispatch [:contact-requests.ui/accept-request id])}} :on-press #(rf/dispatch [:contact-requests.ui/accept-request id])}}
nil))]))) nil))])))

20
src/status_im/ui/screens/activity_center/notification/contact_verification/view.cljs
View File

@ -26,26 +26,25 @@
:text-style style/user-avatar-tag-text} :text-style style/user-avatar-tag-text}
(activity-center.utils/contact-name contact) (activity-center.utils/contact-name contact)
(multiaccounts/displayed-photo contact)] (multiaccounts/displayed-photo contact)]
[quo2/text {:style style/context-tag-text}
(if challenger? (if challenger?
(cond (or (= contact-verification-status constants/contact-verification-status-accepted) (when (or (= contact-verification-status constants/contact-verification-status-accepted)
(= contact-verification-status constants/contact-verification-status-trusted) (= contact-verification-status constants/contact-verification-status-trusted)
(= contact-verification-status constants/contact-verification-status-untrustworthy)) (= contact-verification-status constants/contact-verification-status-untrustworthy))
(str (str/lower-case (i18n/label :t/replied)) ":")) (str (str/lower-case (i18n/label :t/replied)) ":"))
(cond (or (= contact-verification-status constants/contact-verification-status-accepted) (when (or (= contact-verification-status constants/contact-verification-status-accepted)
(= contact-verification-status constants/contact-verification-status-pending) (= contact-verification-status constants/contact-verification-status-pending)
(= contact-verification-status constants/contact-verification-status-declined)) (= contact-verification-status constants/contact-verification-status-declined))
(str (i18n/label :t/identity-verification-request-sent) ":")))]])) (str (i18n/label :t/identity-verification-request-sent) ":")))]))
(defn- activity-message (defn- activity-message
[challenger? {:keys [contact-verification-status message reply-message]}] [challenger? {:keys [contact-verification-status message reply-message]}]
(if challenger? (if challenger?
(cond (or (= contact-verification-status constants/contact-verification-status-accepted) (when (or (= contact-verification-status constants/contact-verification-status-accepted)
(= contact-verification-status constants/contact-verification-status-trusted) (= contact-verification-status constants/contact-verification-status-trusted)
(= contact-verification-status constants/contact-verification-status-untrustworthy)) (= contact-verification-status constants/contact-verification-status-untrustworthy))
{:title (get-in message [:content :text]) {:title (get-in message [:content :text])
:body (get-in reply-message [:content :text])}) :body (get-in reply-message [:content :text])})
(cond (or (= contact-verification-status constants/contact-verification-status-accepted) (when (or (= contact-verification-status constants/contact-verification-status-accepted)
(= contact-verification-status constants/contact-verification-status-pending) (= contact-verification-status constants/contact-verification-status-pending)
(= contact-verification-status constants/contact-verification-status-declined)) (= contact-verification-status constants/contact-verification-status-declined))
{:body (get-in message [:content :text])}))) {:body (get-in message [:content :text])})))
@ -82,22 +81,27 @@
:message (activity-message challenger? notification) :message (activity-message challenger? notification)
:status (activity-status challenger? contact-verification-status)} :status (activity-status challenger? contact-verification-status)}
(if challenger? (if challenger?
(cond (= contact-verification-status constants/contact-verification-status-accepted) (when (= contact-verification-status constants/contact-verification-status-accepted)
{:button-1 {:label (i18n/label :t/untrustworthy) {:button-1 {:label (i18n/label :t/untrustworthy)
:accessibility-label :mark-contact-verification-as-untrustworthy
:type :danger :type :danger
:on-press #(rf/dispatch [:activity-center.contact-verification/mark-as-untrustworthy id])} :on-press #(rf/dispatch [:activity-center.contact-verification/mark-as-untrustworthy id])}
:button-2 {:label (i18n/label :t/accept) :button-2 {:label (i18n/label :t/accept)
:accessibility-label :mark-contact-verification-as-trusted
:type :positive :type :positive
:on-press #(rf/dispatch [:activity-center.contact-verification/mark-as-trusted id])}}) :on-press #(rf/dispatch [:activity-center.contact-verification/mark-as-trusted id])}})
(cond (= contact-verification-status constants/contact-verification-status-pending) (when (= contact-verification-status constants/contact-verification-status-pending)
{:button-1 {:label (i18n/label :t/decline) {:button-1 {:label (i18n/label :t/decline)
:accessibility-label :decline-contact-verification
:type :danger :type :danger
:on-press #(hide-bottom-sheet-and-dispatch [:activity-center.contact-verification/decline id])} :on-press #(hide-bottom-sheet-and-dispatch [:activity-center.contact-verification/decline id])}
:button-2 (if replying? :button-2 (if replying?
{:label (i18n/label :t/send-reply) {:label (i18n/label :t/send-reply)
:accessibility-label :reply-to-contact-verification
:type :primary :type :primary
:on-press #(hide-bottom-sheet-and-dispatch [:activity-center.contact-verification/reply id @reply])} :on-press #(hide-bottom-sheet-and-dispatch [:activity-center.contact-verification/reply id @reply])}
{:label (i18n/label :t/message-reply) {:label (i18n/label :t/message-reply)
:accessibility-label :send-reply-to-contact-verification
:type :primary :type :primary
:on-press #(rf/dispatch [:bottom-sheet/show-sheet :on-press #(rf/dispatch [:bottom-sheet/show-sheet
:activity-center.contact-verification/reply :activity-center.contact-verification/reply

5
src/status_im/ui/screens/activity_center/style.cljs
View File

@ -19,13 +19,10 @@
:padding-top (if (pos? top) (+ top 12) 12) :padding-top (if (pos? top) (+ top 12) 12)
:padding-bottom bottom}) :padding-bottom bottom})
(def notifications-container
{:flex-grow 1})
(defn notification-container (defn notification-container
[index] [index]
{:margin-top (if (zero? index) 0 4) {:margin-top (if (zero? index) 0 4)
:padding-horizontal screen-padding}) :padding-horizontal 8})
(def tabs (def tabs
{:padding-left screen-padding}) {:padding-left screen-padding})

3
src/status_im/ui/screens/activity_center/views.cljs
View File

@ -124,8 +124,7 @@
(react/effect! #(rf/dispatch [:activity-center.notifications/fetch-first-page])) (react/effect! #(rf/dispatch [:activity-center.notifications/fetch-first-page]))
[rn/view {:style (style/screen-container window-width top bottom)} [rn/view {:style (style/screen-container window-width top bottom)}
[header] [header]
[rn/flat-list {:content-container-style style/notifications-container [rn/flat-list {:data notifications
:data notifications
:empty-component [empty-tab] :empty-component [empty-tab]
:key-fn :id :key-fn :id
:on-end-reached #(rf/dispatch [:activity-center.notifications/fetch-next-page]) :on-end-reached #(rf/dispatch [:activity-center.notifications/fetch-next-page])

42
src/status_im2/contexts/quo_preview/notifications/activity_logs.cljs
View File

@ -1,12 +1,10 @@
(ns status-im2.contexts.quo-preview.notifications.activity-logs (ns status-im2.contexts.quo-preview.notifications.activity-logs
(:require [status-im2.contexts.quo-preview.preview :as preview] (:require [quo2.core :as quo2]
[react-native.core :as rn]
[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]
[status-im2.contexts.quo-preview.tags.status-tags :as status-tags] [react-native.core :as rn]
[reagent.core :as reagent])) [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]
[status-im2.contexts.quo-preview.tags.status-tags :as status-tags]))
(def descriptor [{:label "Unread?" (def descriptor [{:label "Unread?"
:key :unread? :key :unread?
@ -68,12 +66,14 @@
status-tags/status-tags-options]) status-tags/status-tags-options])
(def basic-user-action (def basic-user-action
[[context-tags/group-avatar-tag "Name" {:color :purple [[quo2/user-avatar-tag
{:color :purple
:override-theme :dark :override-theme :dark
:size :small :size :small
:style {:background-color colors/white-opa-10} :style {:background-color colors/white-opa-10}
:text-style {:color colors/white}}] :text-style {:color colors/white}}
[rn/text {:style {:color colors/white}} "did something here."]]) "Name"]
"did something here."])
(def complex-user-action (def complex-user-action
(let [tag-props {:color :purple (let [tag-props {:color :purple
@ -81,28 +81,28 @@
:size :small :size :small
:style {:background-color colors/white-opa-10} :style {:background-color colors/white-opa-10}
:text-style {:color colors/white}}] :text-style {:color colors/white}}]
[[context-tags/group-avatar-tag "250,000 SNT" tag-props] [[quo2/user-avatar-tag tag-props "Alice"]
[rn/text {:style {:color colors/white}} "from"] "from"
[context-tags/group-avatar-tag "Mainnet" tag-props] [quo2/user-avatar-tag tag-props "Mainnet"]
[rn/text {:style {:color colors/white}} "to"] "to"
[context-tags/group-avatar-tag "Optimism" tag-props] [quo2/user-avatar-tag tag-props "Optimism"]
[rn/text {:style {:color colors/white}} "on"] "on"
[context-tags/group-avatar-tag "My savings" tag-props]])) [quo2/user-avatar-tag tag-props "My savings"]]))
(def message-with-mention (def message-with-mention
(let [common-text-style {:style {:color colors/white} (let [common-text-style {:style {:color colors/white}
:size :paragraph-1}] :size :paragraph-1}]
{:body [rn/view {:flex 1 {:body [rn/view {:flex 1
:flex-direction :row} :flex-direction :row}
[text/text common-text-style "Hello"] [quo2/text common-text-style "Hello"]
[text/text {:style {:background-color colors/primary-50-opa-10 [quo2/text {:style {:background-color colors/primary-50-opa-10
:border-radius 6 :border-radius 6
:color colors/primary-50 :color colors/primary-50
:margin-horizontal 3 :margin-horizontal 3
:padding-horizontal 3 :padding-horizontal 3
:size :paragraph-1}} :size :paragraph-1}}
"@name"] "@name"]
[text/text common-text-style "! How are you feeling?"]]})) [quo2/text common-text-style "! How are you feeling?"]]}))
(def message-with-title (def message-with-title
{:body "Your favorite color is Turquoise." {:body "Your favorite color is Turquoise."
@ -161,7 +161,7 @@
:flex-direction :row :flex-direction :row
:justify-content :center :justify-content :center
:padding-vertical 60} :padding-vertical 60}
[activity-logs/activity-log props]]])))) [quo2/activity-log props]]]))))
(defn preview-activity-logs [] (defn preview-activity-logs []
[rn/view {:flex 1} [rn/view {:flex 1}