From e53f58d8c0acad06ee5cae25a8450925c79e09bd Mon Sep 17 00:00:00 2001 From: Icaro Motta Date: Mon, 21 Nov 2022 11:19:50 -0300 Subject: [PATCH] Fix various Activity Log layout issues (#14405) --- .../notifications/activity_log/style.cljs | 76 ++++++++++ .../view.cljs} | 138 ++++++++---------- src/quo2/core.cljs | 4 +- .../notification/contact_request/view.cljs | 17 ++- .../contact_verification/view.cljs | 76 +++++----- .../ui/screens/activity_center/style.cljs | 5 +- .../ui/screens/activity_center/views.cljs | 11 +- .../notifications/activity_logs.cljs | 48 +++--- 8 files changed, 214 insertions(+), 161 deletions(-) create mode 100644 src/quo2/components/notifications/activity_log/style.cljs rename src/quo2/components/notifications/{activity_logs.cljs => activity_log/view.cljs} (55%) diff --git a/src/quo2/components/notifications/activity_log/style.cljs b/src/quo2/components/notifications/activity_log/style.cljs new file mode 100644 index 0000000000..6771823a53 --- /dev/null +++ b/src/quo2/components/notifications/activity_log/style.cljs @@ -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}) diff --git a/src/quo2/components/notifications/activity_logs.cljs b/src/quo2/components/notifications/activity_log/view.cljs similarity index 55% rename from src/quo2/components/notifications/activity_logs.cljs rename to src/quo2/components/notifications/activity_log/view.cljs index 31e376d899..572d9a66a1 100644 --- a/src/quo2/components/notifications/activity_logs.cljs +++ b/src/quo2/components/notifications/activity_log/view.cljs @@ -1,10 +1,12 @@ -(ns quo2.components.notifications.activity-logs - (:require [quo.core :as quo] +(ns quo2.components.notifications.activity-log.view + (:require [clojure.string :as string] + [quo.core :as quo] [quo2.components.buttons.button :as button] [quo2.components.icon :as icon] [quo2.components.markdown.text :as text] [quo2.components.tags.status-tags :as status-tags] [quo2.foundations.colors :as colors] + [quo2.components.notifications.activity-log.style :as style] [react-native.core :as rn] [reagent.core :as reagent] [status-im.i18n.i18n :as i18n])) @@ -48,58 +50,40 @@ (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 - :align-items :center - :justify-content :center} + [rn/view {:style style/icon} [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 [context replying?] - (let [first-line-offset (if replying? 4 -2) + (let [first-line-offset (if replying? 4 0) gap-between-lines 4] - (into [rn/view {:flex-direction :row - :align-items :center - :flex-wrap :wrap - :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) - [text/text {:size :paragraph-2} - detail] - detail)]) - context)))) + (into [rn/view {:style (assoc style/context-container :margin-top first-line-offset)}] + (mapcat (fn [detail] + ^{:key (hash detail)} + (if (string? detail) + (map (fn [s] + [rn/view {:style {:margin-right 4 + :margin-top 0}} + [text/text {:size :paragraph-2} + s]]) + (string/split detail #"\s+")) + [[rn/view {:margin-right 4 + :margin-top gap-between-lines} + 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} + [rn/view {:style style/message-container} (when title - [text/text {:size :paragraph-2 - :style {:color colors/white-opa-40 - :margin-bottom 2}} + [text/text {:size :paragraph-2 + :accessibility-label :activity-message-title + :style style/message-title} title]) (if (string? body) - [text/text {:style {:color colors/white} - :size :paragraph-1} + [text/text {:style style/message-body + :accessibility-label :activity-message-body + :size :paragraph-1} body] body)]) @@ -110,9 +94,7 @@ {:padding-vertical 9 :flex-grow 1 :flex-basis 0})] - [rn/view {:margin-top 12 - :flex-direction :row - :align-items :flex-start} + [rn/view style/buttons-container (when button-1 [button/button (-> button-1 (assoc :size size) @@ -127,27 +109,32 @@ (defn- activity-status [status] - [rn/view {:margin-top 12 - :align-items :flex-start - :flex 1} + [rn/view {:style style/status + :accessibility-label :activity-status} [status-tags/status-tag {:size :small :label (:label status) :status status}]]) (defn- activity-title [title replying?] - [text/text {:weight :semi-bold - :style {:color colors/white} - :size (if replying? :heading-2 :paragraph-1)} + [text/text {:weight :semi-bold + :accessibility-label :activity-title + :style (style/title replying?) + :size (if replying? :heading-2 :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]]) + [text/text {:size :label + :accessibility-label :activity-timestamp + :style style/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 [_] @@ -162,7 +149,7 @@ (or button-1 button-2) [activity-buttons button-1 button-2 replying? reply-input])]))) -(defn activity-log +(defn view [{:keys [icon message context @@ -171,32 +158,21 @@ replying? unread?] :as props}] - [rn/view {:flex-direction :row - :align-items :flex-start - :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)} + [rn/view {:accessibility-label :activity + :style style/container} (when-not replying? [activity-icon icon]) - [rn/view {:padding-left (when-not replying? 8) - :flex-grow 1} - [rn/view {:flex-grow 1 - :align-items :center - :flex-direction :row} - [rn/view {:flex 1 - :align-items :center - :flex-direction :row} - [rn/view {:flex-shrink 1} - [activity-title title replying?]] + [rn/view {:style {:padding-left (when-not replying? 8) + :flex 1}} + [rn/view + [rn/view {:style style/top-section-container} + [activity-title title replying?] (when-not replying? - [activity-timestamp timestamp])] - (when (and unread? (not replying?)) - [activity-unread-dot])] - (when context - [activity-context context replying?]) + [activity-timestamp timestamp]) + (when (and unread? (not replying?)) + [activity-unread-dot])] + (when context + [activity-context context replying?])] (when message [activity-message message]) [footer props]]]) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 22b8a65d76..06ccea963b 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -28,7 +28,7 @@ quo2.components.messages.gap quo2.components.messages.system-message quo2.components.reactions.reaction - quo2.components.notifications.activity-logs + quo2.components.notifications.activity-log.view quo2.components.notifications.info-count quo2.components.notifications.notification-dot quo2.components.tags.tags @@ -96,6 +96,6 @@ (def preview-list quo2.components.list-items.preview-list/preview-list) ;;;; 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 notification-dot quo2.components.notifications.notification-dot/notification-dot) diff --git a/src/status_im/ui/screens/activity_center/notification/contact_request/view.cljs b/src/status_im/ui/screens/activity_center/notification/contact_request/view.cljs index 2f3f307c7b..9ef81f601d 100644 --- a/src/status_im/ui/screens/activity_center/notification/contact_request/view.cljs +++ b/src/status_im/ui/screens/activity_center/notification/contact_request/view.cljs @@ -38,8 +38,7 @@ :text-style style/user-avatar-tag-text} (activity-center.utils/contact-name 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])} :status (case (:contact-request-state message) constants/contact-request-message-state-accepted @@ -49,10 +48,12 @@ nil)} (case (:contact-request-state message) constants/contact-request-state-mutual - {:button-1 {:label (i18n/label :t/decline) - :type :danger - :on-press #(rf/dispatch [:contact-requests.ui/decline-request id])} - :button-2 {:label (i18n/label :t/accept) - :type :positive - :on-press #(rf/dispatch [:contact-requests.ui/accept-request id])}} + {:button-1 {:label (i18n/label :t/decline) + :accessibility-label :decline-contact-request + :type :danger + :on-press #(rf/dispatch [:contact-requests.ui/decline-request id])} + :button-2 {:label (i18n/label :t/accept) + :accessibility-label :accept-contact-request + :type :positive + :on-press #(rf/dispatch [:contact-requests.ui/accept-request id])}} nil))]))) diff --git a/src/status_im/ui/screens/activity_center/notification/contact_verification/view.cljs b/src/status_im/ui/screens/activity_center/notification/contact_verification/view.cljs index cbb2099829..0fde48f817 100644 --- a/src/status_im/ui/screens/activity_center/notification/contact_verification/view.cljs +++ b/src/status_im/ui/screens/activity_center/notification/contact_verification/view.cljs @@ -26,29 +26,28 @@ :text-style style/user-avatar-tag-text} (activity-center.utils/contact-name contact) (multiaccounts/displayed-photo contact)] - [quo2/text {:style style/context-tag-text} - (if challenger? - (cond (or (= contact-verification-status constants/contact-verification-status-accepted) - (= contact-verification-status constants/contact-verification-status-trusted) - (= contact-verification-status constants/contact-verification-status-untrustworthy)) - (str (str/lower-case (i18n/label :t/replied)) ":")) - (cond (or (= contact-verification-status constants/contact-verification-status-accepted) - (= contact-verification-status constants/contact-verification-status-pending) - (= contact-verification-status constants/contact-verification-status-declined)) - (str (i18n/label :t/identity-verification-request-sent) ":")))]])) + (if challenger? + (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-untrustworthy)) + (str (str/lower-case (i18n/label :t/replied)) ":")) + (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-declined)) + (str (i18n/label :t/identity-verification-request-sent) ":")))])) (defn- activity-message [challenger? {:keys [contact-verification-status message reply-message]}] (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-untrustworthy)) - {:title (get-in message [:content :text]) - :body (get-in reply-message [:content :text])}) - (cond (or (= contact-verification-status constants/contact-verification-status-accepted) + {:title (get-in message [:content :text]) + :body (get-in reply-message [:content :text])}) + (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-declined)) - {:body (get-in message [:content :text])}))) + {:body (get-in message [:content :text])}))) (defn- activity-status [challenger? contact-verification-status] @@ -82,24 +81,29 @@ :message (activity-message challenger? notification) :status (activity-status challenger? contact-verification-status)} (if challenger? - (cond (= contact-verification-status constants/contact-verification-status-accepted) - {:button-1 {:label (i18n/label :t/untrustworthy) - :type :danger - :on-press #(rf/dispatch [:activity-center.contact-verification/mark-as-untrustworthy id])} - :button-2 {:label (i18n/label :t/accept) - :type :positive - :on-press #(rf/dispatch [:activity-center.contact-verification/mark-as-trusted id])}}) - (cond (= contact-verification-status constants/contact-verification-status-pending) - {:button-1 {:label (i18n/label :t/decline) - :type :danger - :on-press #(hide-bottom-sheet-and-dispatch [:activity-center.contact-verification/decline id])} - :button-2 (if replying? - {:label (i18n/label :t/send-reply) - :type :primary - :on-press #(hide-bottom-sheet-and-dispatch [:activity-center.contact-verification/reply id @reply])} - {:label (i18n/label :t/message-reply) - :type :primary - :on-press #(rf/dispatch [:bottom-sheet/show-sheet - :activity-center.contact-verification/reply - {:notification notification - :replying? true}])})})))]))))) + (when (= contact-verification-status constants/contact-verification-status-accepted) + {:button-1 {:label (i18n/label :t/untrustworthy) + :accessibility-label :mark-contact-verification-as-untrustworthy + :type :danger + :on-press #(rf/dispatch [:activity-center.contact-verification/mark-as-untrustworthy id])} + :button-2 {:label (i18n/label :t/accept) + :accessibility-label :mark-contact-verification-as-trusted + :type :positive + :on-press #(rf/dispatch [:activity-center.contact-verification/mark-as-trusted id])}}) + (when (= contact-verification-status constants/contact-verification-status-pending) + {:button-1 {:label (i18n/label :t/decline) + :accessibility-label :decline-contact-verification + :type :danger + :on-press #(hide-bottom-sheet-and-dispatch [:activity-center.contact-verification/decline id])} + :button-2 (if replying? + {:label (i18n/label :t/send-reply) + :accessibility-label :reply-to-contact-verification + :type :primary + :on-press #(hide-bottom-sheet-and-dispatch [:activity-center.contact-verification/reply id @reply])} + {:label (i18n/label :t/message-reply) + :accessibility-label :send-reply-to-contact-verification + :type :primary + :on-press #(rf/dispatch [:bottom-sheet/show-sheet + :activity-center.contact-verification/reply + {:notification notification + :replying? true}])})})))]))))) diff --git a/src/status_im/ui/screens/activity_center/style.cljs b/src/status_im/ui/screens/activity_center/style.cljs index 670b6302d0..4f688f1d81 100644 --- a/src/status_im/ui/screens/activity_center/style.cljs +++ b/src/status_im/ui/screens/activity_center/style.cljs @@ -19,13 +19,10 @@ :padding-top (if (pos? top) (+ top 12) 12) :padding-bottom bottom}) -(def notifications-container - {:flex-grow 1}) - (defn notification-container [index] {:margin-top (if (zero? index) 0 4) - :padding-horizontal screen-padding}) + :padding-horizontal 8}) (def tabs {:padding-left screen-padding}) diff --git a/src/status_im/ui/screens/activity_center/views.cljs b/src/status_im/ui/screens/activity_center/views.cljs index 7c98c5e109..300538626b 100644 --- a/src/status_im/ui/screens/activity_center/views.cljs +++ b/src/status_im/ui/screens/activity_center/views.cljs @@ -124,9 +124,8 @@ (react/effect! #(rf/dispatch [:activity-center.notifications/fetch-first-page])) [rn/view {:style (style/screen-container window-width top bottom)} [header] - [rn/flat-list {:content-container-style style/notifications-container - :data notifications - :empty-component [empty-tab] - :key-fn :id - :on-end-reached #(rf/dispatch [:activity-center.notifications/fetch-next-page]) - :render-fn render-notification}]]))]) + [rn/flat-list {:data notifications + :empty-component [empty-tab] + :key-fn :id + :on-end-reached #(rf/dispatch [:activity-center.notifications/fetch-next-page]) + :render-fn render-notification}]]))]) diff --git a/src/status_im2/contexts/quo_preview/notifications/activity_logs.cljs b/src/status_im2/contexts/quo_preview/notifications/activity_logs.cljs index 67e2e9d62d..ab7b57bbd1 100644 --- a/src/status_im2/contexts/quo_preview/notifications/activity_logs.cljs +++ b/src/status_im2/contexts/quo_preview/notifications/activity_logs.cljs @@ -1,12 +1,10 @@ (ns status-im2.contexts.quo-preview.notifications.activity-logs - (:require [status-im2.contexts.quo-preview.preview :as preview] - [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] + (:require [quo2.core :as quo2] [quo2.foundations.colors :as colors] - [status-im2.contexts.quo-preview.tags.status-tags :as status-tags] - [reagent.core :as reagent])) + [react-native.core :as rn] + [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?" :key :unread? @@ -68,12 +66,14 @@ 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."]]) + [[quo2/user-avatar-tag + {:color :purple + :override-theme :dark + :size :small + :style {:background-color colors/white-opa-10} + :text-style {:color colors/white}} + "Name"] + "did something here."]) (def complex-user-action (let [tag-props {:color :purple @@ -81,28 +81,28 @@ :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]])) + [[quo2/user-avatar-tag tag-props "Alice"] + "from" + [quo2/user-avatar-tag tag-props "Mainnet"] + "to" + [quo2/user-avatar-tag tag-props "Optimism"] + "on" + [quo2/user-avatar-tag tag-props "My savings"]])) (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 + [quo2/text common-text-style "Hello"] + [quo2/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?"]]})) + [quo2/text common-text-style "! How are you feeling?"]]})) (def message-with-title {:body "Your favorite color is Turquoise." @@ -161,7 +161,7 @@ :flex-direction :row :justify-content :center :padding-vertical 60} - [activity-logs/activity-log props]]])))) + [quo2/activity-log props]]])))) (defn preview-activity-logs [] [rn/view {:flex 1}