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

138
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
(: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]]])

4
src/quo2/core.cljs
View File

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

17
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}
(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))])))

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

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

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

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

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

48
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
(: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}