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

Feature/blur activity center background (#14165) 

* [feature][#14131] Blur view background for Activity Center

* [Improvements][#14134] Force Dark Mode on Activity Center

* [Rollback][#14131] Message Content in Activity Center

* [Fix][#14131] Touchable overlay preventing scroll

* [Fix][#14131] Sticky Header in Activity Center

* [Fix][#14131] Removed unused imports

* [Fix][#14131] Naming of components

* [Fix][#14131] Formatting of code
This commit is contained in:
Mohamed Javid 2022-10-18 16:56:40 +08:00 committed by GitHub
parent 00fbb0dee6
commit c6ac899b44
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 151 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/quo2/components/tabs/tab.cljs
View File

@ -24,6 +24,25 @@
:icon-color colors/neutral-40 :icon-color colors/neutral-40
:label {:style {:color colors/white}}}}}) :label {:style {:color colors/white}}}}})
(def themes-for-blur-background {:light {:default {:background-color colors/neutral-80-opa-5
:icon-color colors/neutral-80-opa-40
:label {:style {:color colors/neutral-100}}}
:active {:background-color colors/neutral-80-opa-60
:icon-color colors/white
:label {:style {:color colors/white}}}
:disabled {:background-color colors/neutral-80-opa-5
:icon-color colors/neutral-80-opa-40
:label {:style {:color colors/neutral-100}}}}
:dark {:default {:background-color colors/white-opa-5
:icon-color colors/white
:label {:style {:color colors/white}}}
:active {:background-color colors/white-opa-20
:icon-color colors/white
:label {:style {:color colors/white}}}
:disabled {:background-color colors/white-opa-5
:icon-color colors/neutral-40
:label {:style {:color colors/white}}}}})
(defn style-container [size disabled background-color] (defn style-container [size disabled background-color]
(merge {:height size (merge {:height size
:align-items :center :align-items :center
@ -48,12 +67,12 @@
:before :icon-keyword :before :icon-keyword
:after :icon-keyword}" :after :icon-keyword}"
[_ _] [_ _]
(fn [{:keys [id on-press disabled size before active accessibility-label] (fn [{:keys [id on-press disabled size before active accessibility-label blur? override-theme]
:or {size 32}} :or {size 32}}
children] children]
(let [state (cond disabled :disabled active :active :else :default) (let [state (cond disabled :disabled active :active :else :default)
{:keys [icon-color background-color label]} {:keys [icon-color background-color label]}
(get-in themes [(theme/get-theme) state])] (get-in (if blur? themes-for-blur-background themes) [(or override-theme (theme/get-theme)) state])]
[rn/touchable-without-feedback (merge {:disabled disabled [rn/touchable-without-feedback (merge {:disabled disabled
:accessibility-label accessibility-label} :accessibility-label accessibility-label}
(when on-press (when on-press

30
src/quo2/components/tabs/tabs.cljs
View File

@ -73,7 +73,9 @@
on-scroll on-scroll
scroll-event-throttle scroll-event-throttle
scroll-on-press? scroll-on-press?
size] size
blur?
override-theme]
:or {fade-end-percentage fade-end-percentage :or {fade-end-percentage fade-end-percentage
fade-end? false fade-end? false
scroll-event-throttle 64 scroll-event-throttle 64
@ -127,16 +129,18 @@
[rn/view {:style {:margin-right (if (= size default-tab-size) 12 8) [rn/view {:style {:margin-right (if (= size default-tab-size) 12 8)
:padding-right (when (= index (dec (count data))) :padding-right (when (= index (dec (count data)))
(get-in props [:style :padding-left]))}} (get-in props [:style :padding-left]))}}
[tab/tab {:id id [tab/tab {:id id
:size size :size size
:active (= id @active-tab-id) :override-theme override-theme
:on-press (fn [id] :blur? blur?
(reset! active-tab-id id) :active (= id @active-tab-id)
(when scroll-on-press? :on-press (fn [id]
(.scrollToIndex @flat-list-ref (reset! active-tab-id id)
#js {:animated true (when scroll-on-press?
:index index (.scrollToIndex @flat-list-ref
:viewPosition 0.5})) #js {:animated true
(when on-change :index index
(on-change id)))} :viewPosition 0.5}))
(when on-change
(on-change id)))}
label]])})]))))) label]])})])))))

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

@ -48,15 +48,18 @@
(trim-public-key public-key)]])) (trim-public-key public-key)]]))
(defn context-tag [params photo name] (defn context-tag [params photo name]
[base-tag (assoc-in params [:style :padding-left] 3) (let [text-style (params :text-style)]
[rn/image {:style {:width 20 [base-tag (assoc-in params [:style :padding-left] 3)
:border-radius 10 [rn/image {:style {:width 20
:background-color :white :border-radius 10
:height 20} :background-color :white
:source photo}] :height 20}
[text/text {:weight :medium :source photo}]
:size :paragraph-2} [text/text
(str " " name)]]) (merge {:weight :medium
:size :paragraph-2}
{:style text-style})
(str " " name)]]))
(defn user-avatar-tag [] (defn user-avatar-tag []
(fn [params username photo] (fn [params username photo]

6
src/status_im/ui/components/topnav.cljs
View File

@ -40,7 +40,11 @@
:on-press #(do :on-press #(do
(re-frame/dispatch [:mark-all-activity-center-notifications-as-read]) (re-frame/dispatch [:mark-all-activity-center-notifications-as-read])
(if config/new-activity-center-enabled? (if config/new-activity-center-enabled?
(re-frame/dispatch [:navigate-to :activity-center]) (re-frame/dispatch [:show-popover {:view :activity-center
:disable-touchable-overlay? true
:blur-view? true
:blur-view-props {:blur-amount 20
:blur-type :dark}}])
(re-frame/dispatch [:navigate-to :notifications-center])))} (re-frame/dispatch [:navigate-to :notifications-center])))}
:main-icons2/notifications] :main-icons2/notifications]
(when (pos? notif-count) (when (pos? notif-count)

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

@ -1,6 +1,5 @@
(ns status-im.ui.screens.activity-center.views (ns status-im.ui.screens.activity-center.views
(:require [quo.components.animated.pressable :as animation] (:require [quo.components.animated.pressable :as animation]
[quo.design-system.colors :as quo.colors]
[quo.react-native :as rn] [quo.react-native :as rn]
[quo2.components.buttons.button :as button] [quo2.components.buttons.button :as button]
[quo2.components.markdown.text :as text] [quo2.components.markdown.text :as text]
@ -13,7 +12,8 @@
[status-im.i18n.i18n :as i18n] [status-im.i18n.i18n :as i18n]
[status-im.multiaccounts.core :as multiaccounts] [status-im.multiaccounts.core :as multiaccounts]
[status-im.utils.datetime :as datetime] [status-im.utils.datetime :as datetime]
[status-im.utils.handlers :refer [<sub >evt]])) [status-im.utils.handlers :refer [<sub >evt]]
[quo.components.safe-area :as safe-area]))
(defn activity-title (defn activity-title
[{:keys [type]}] [{:keys [type]}]
@ -73,9 +73,10 @@
{:button-1 {:label (i18n/label :t/decline) {:button-1 {:label (i18n/label :t/decline)
:type :danger :type :danger
:on-press #(>evt [:contact-requests.ui/decline-request id])} :on-press #(>evt [:contact-requests.ui/decline-request id])}
:button-2 {:label (i18n/label :t/accept) :button-2 {:label (i18n/label :t/accept)
:type :success :type :success
:on-press #(>evt [:contact-requests.ui/accept-request id])}} :override-background-color colors/success-60
:on-press #(>evt [:contact-requests.ui/accept-request id])}}
nil)) nil))
(defn activity-pressable (defn activity-pressable
@ -86,7 +87,9 @@
;; `:contact.ui/send-message-pressed` instead of ;; `:contact.ui/send-message-pressed` instead of
;; `:chat.ui/navigate-to-chat`, otherwise the chat screen looks completely ;; `:chat.ui/navigate-to-chat`, otherwise the chat screen looks completely
;; broken if it has never been opened before for the accepted contact. ;; broken if it has never been opened before for the accepted contact.
[animation/pressable {:on-press #(>evt [:contact.ui/send-message-pressed {:public-key (:author notification)}])} [animation/pressable {:on-press (fn []
(>evt [:hide-popover])
(>evt [:contact.ui/send-message-pressed {:public-key (:author notification)}]))}
activity] activity]
activity)) activity))
@ -109,13 +112,14 @@
[] []
(let [unread-filter-enabled? (<sub [:activity-center/filter-status-unread-enabled?])] (let [unread-filter-enabled? (<sub [:activity-center/filter-status-unread-enabled?])]
;; TODO: Replace the button by a Filter Selector component once available for use. ;; TODO: Replace the button by a Filter Selector component once available for use.
[button/button {:icon true [button/button {:icon true
:type (if unread-filter-enabled? :primary :outline) :type (if unread-filter-enabled? :primary :blur-bg-outline)
:size 32 :size 32
:on-press #(>evt [:activity-center.notifications/fetch-first-page :override-theme :dark
{:filter-status (if unread-filter-enabled? :on-press #(>evt [:activity-center.notifications/fetch-first-page
:read {:filter-status (if unread-filter-enabled?
:unread)}])} :read
:unread)}])}
:main-icons2/unread])) :main-icons2/unread]))
;; TODO(2022-10-07): The empty state is still under design analysis, so we ;; TODO(2022-10-07): The empty state is still under design analysis, so we
@ -142,6 +146,8 @@
[] []
(let [filter-type (<sub [:activity-center/filter-type])] (let [filter-type (<sub [:activity-center/filter-type])]
[tabs/scrollable-tabs {:size 32 [tabs/scrollable-tabs {:size 32
:blur? true
:override-theme :dark
:style {:padding-left 20} :style {:padding-left 20}
:fade-end-percentage 0.79 :fade-end-percentage 0.79
:scroll-on-press? true :scroll-on-press? true
@ -170,20 +176,20 @@
(defn header (defn header
[] []
(let [screen-padding 20] (let [screen-padding 20]
;; TODO: Remove temporary (and old) background color when the screen and [rn/view
;; header are properly blurred. [button/button {:icon true
[rn/view {:background-color (:ui-background @quo.colors/theme)} :type :blur-bg
[button/button {:icon true :size 32
:type :grey :override-theme :dark
:size 32 :style {:margin-vertical 12
:style {:margin-vertical 12 :margin-left screen-padding}
:margin-left screen-padding} :on-press #(>evt [:hide-popover])}
:on-press #(>evt [:navigate-back])}
:main-icons2/close] :main-icons2/close]
[text/text {:size :heading-1 [text/text {:size :heading-1
:weight :semi-bold :weight :semi-bold
:style {:padding-horizontal screen-padding :style {:padding-horizontal screen-padding
:padding-vertical 12}} :padding-vertical 12
:color colors/white}}
(i18n/label :t/notifications)] (i18n/label :t/notifications)]
[rn/view {:flex-direction :row [rn/view {:flex-direction :row
:padding-vertical 12} :padding-vertical 12}
@ -201,12 +207,15 @@
{:component-did-mount #(>evt [:activity-center.notifications/fetch-first-page]) {:component-did-mount #(>evt [:activity-center.notifications/fetch-first-page])
:reagent-render :reagent-render
(fn [] (fn []
(let [notifications (<sub [:activity-center/filtered-notifications])] (let [notifications (<sub [:activity-center/filtered-notifications])
[rn/flat-list {:content-container-style {:flex-grow 1} window-width (<sub [:dimensions/window-width])]
:data notifications [safe-area/view {:style {:flex 1}}
:empty-component [empty-tab] [rn/view {:style {:width window-width
:header [header] :flex 1}}
:key-fn :id [header]
:on-end-reached #(>evt [:activity-center.notifications/fetch-next-page]) [rn/flat-list {:content-container-style {:flex-grow 1}
:render-fn render-notification :data notifications
:sticky-header-indices [0]}]))})) :empty-component [empty-tab]
:key-fn :id
:on-end-reached #(>evt [:activity-center.notifications/fetch-next-page])
:render-fn render-notification}]]]))}))

6
src/status_im/ui/screens/home/views.cljs
View File

@ -257,7 +257,11 @@
:on-press #(do :on-press #(do
(re-frame/dispatch [:mark-all-activity-center-notifications-as-read]) (re-frame/dispatch [:mark-all-activity-center-notifications-as-read])
(if config/new-activity-center-enabled? (if config/new-activity-center-enabled?
(re-frame/dispatch [:navigate-to :activity-center]) (re-frame/dispatch [:show-popover {:view :activity-center
:disable-touchable-overlay? true
:blur-view? true
:blur-view-props {:blur-amount 20
:blur-type :dark}}])
(re-frame/dispatch [:navigate-to :notifications-center])))} (re-frame/dispatch [:navigate-to :notifications-center])))}
[icons/icon :main-icons/notification2 {:color (quo2.colors/theme-colors quo2.colors/neutral-100 quo2.colors/white)}]] [icons/icon :main-icons/notification2 {:color (quo2.colors/theme-colors quo2.colors/neutral-100 quo2.colors/white)}]]
(when (pos? notif-count) (when (pos? notif-count)

95
src/status_im/ui/screens/popover/views.cljs
View File

@ -19,7 +19,8 @@
[status-im.ui.screens.keycard.views :as keycard.views] [status-im.ui.screens.keycard.views :as keycard.views]
[status-im.ui.screens.keycard.frozen-card.view :as frozen-card] [status-im.ui.screens.keycard.frozen-card.view :as frozen-card]
[status-im.ui.screens.chat.message.pinned-message :as pinned-message] [status-im.ui.screens.chat.message.pinned-message :as pinned-message]
[status-im.ui.screens.signing.sheets :as signing-sheets])) [status-im.ui.screens.signing.sheets :as signing-sheets]
[status-im.ui.screens.activity-center.views :as activity-center]))
(defn hide-panel-anim (defn hide-panel-anim
[bottom-anim-value alpha-value window-height] [bottom-anim-value alpha-value window-height]
@ -95,8 +96,10 @@
:reagent-render :reagent-render
(fn [] (fn []
(when @current-popover (when @current-popover
(let [{:keys [view style]} @current-popover] (let [{:keys [view style disable-touchable-overlay? blur-view? blur-view-props]} @current-popover
[react/view {:position :absolute :top 0 :bottom 0 :left 0 :right 0} component (if blur-view? react/blur-view react/view)
overlay-component (if disable-touchable-overlay? react/view react/touchable-highlight)]
[component (merge {:style {:position :absolute :top 0 :bottom 0 :left 0 :right 0}} blur-view-props)
(when platform/ios? (when platform/ios?
[react/animated-view [react/animated-view
{:style {:flex 1 :background-color colors/black-persist :opacity alpha-value}}]) {:style {:flex 1 :background-color colors/black-persist :opacity alpha-value}}])
@ -106,10 +109,10 @@
:left 0 :left 0
:right 0 :right 0
:transform [{:translateY bottom-anim-value}]}} :transform [{:translateY bottom-anim-value}]}}
[react/touchable-highlight [overlay-component
{:style {:flex 1 :align-items :center :justify-content :center} {:style {:flex 1 :align-items :center :justify-content :center}
:on-press request-close} :on-press request-close}
[react/view (merge {:background-color colors/white [react/view (merge {:background-color (if blur-view? :transparent colors/white)
:border-radius 16 :border-radius 16
:margin 32 :margin 32
:shadow-offset {:width 0 :height 2} :shadow-offset {:width 0 :height 2}
@ -117,64 +120,66 @@
:shadow-opacity 1 :shadow-opacity 1
:shadow-color "rgba(0, 9, 26, 0.12)"} :shadow-color "rgba(0, 9, 26, 0.12)"}
style) style)
[react/touchable-opacity {:active-opacity 1} (cond
(cond (vector? view)
(vector? view) view
view
(= :signing-phrase view) (= :signing-phrase view)
[signing-phrase/signing-phrase] [signing-phrase/signing-phrase]
(= :share-account view) (= :share-account view)
[request/share-address] [request/share-address]
(= :share-chat-key view) (= :share-chat-key view)
[profile.user/share-chat-key] [profile.user/share-chat-key]
(= :custom-seed-phrase view) (= :custom-seed-phrase view)
[multiaccounts.recover/custom-seed-phrase] [multiaccounts.recover/custom-seed-phrase]
(= :enable-biometric view) (= :enable-biometric view)
[biometric/enable-biometric-popover] [biometric/enable-biometric-popover]
(= :secure-with-biometric view) (= :secure-with-biometric view)
[biometric/secure-with-biometric-popover] [biometric/secure-with-biometric-popover]
(= :disable-password-saving view) (= :disable-password-saving view)
[biometric/disable-password-saving-popover] [biometric/disable-password-saving-popover]
(= :transaction-data view) (= :transaction-data view)
[signing/transaction-data] [signing/transaction-data]
(= :frozen-card view) (= :frozen-card view)
[frozen-card/frozen-card] [frozen-card/frozen-card]
(= :blocked-card view) (= :blocked-card view)
[keycard.views/blocked-card-popover] [keycard.views/blocked-card-popover]
(= :export-community view) (= :export-community view)
[communities/export-community] [communities/export-community]
(= :seed-key-uid-mismatch view) (= :seed-key-uid-mismatch view)
[multiaccounts.key-storage/seed-key-uid-mismatch-popover] [multiaccounts.key-storage/seed-key-uid-mismatch-popover]
(= :transfer-multiaccount-to-keycard-warning view) (= :transfer-multiaccount-to-keycard-warning view)
[multiaccounts.key-storage/transfer-multiaccount-warning-popover] [multiaccounts.key-storage/transfer-multiaccount-warning-popover]
(= :transfer-multiaccount-unknown-error view) (= :transfer-multiaccount-unknown-error view)
[multiaccounts.key-storage/unknown-error-popover] [multiaccounts.key-storage/unknown-error-popover]
(= :password-reset-popover view) (= :password-reset-popover view)
[reset-password.views/reset-password-popover] [reset-password.views/reset-password-popover]
(= :pin-limit view) (= :pin-limit view)
[pinned-message/pin-limit-popover] [pinned-message/pin-limit-popover]
(= :fees-warning view) (= :fees-warning view)
[signing-sheets/fees-warning] [signing-sheets/fees-warning]
:else (= :activity-center view)
[view])]]]]])))}))) [activity-center/activity-center]
:else
[view])]]]])))})))
(views/defview popover [] (views/defview popover []
(views/letsubs [popover [:popover/popover] (views/letsubs [popover [:popover/popover]