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
: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]
(merge {:height size
:align-items :center
@ -48,12 +67,12 @@
:before :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}}
children]
(let [state (cond disabled :disabled active :active :else :default)
{: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
:accessibility-label accessibility-label}
(when on-press

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

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

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

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

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

@ -40,7 +40,11 @@
:on-press #(do
(re-frame/dispatch [:mark-all-activity-center-notifications-as-read])
(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])))}
:main-icons2/notifications]
(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
(:require [quo.components.animated.pressable :as animation]
[quo.design-system.colors :as quo.colors]
[quo.react-native :as rn]
[quo2.components.buttons.button :as button]
[quo2.components.markdown.text :as text]
@ -13,7 +12,8 @@
[status-im.i18n.i18n :as i18n]
[status-im.multiaccounts.core :as multiaccounts]
[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
[{:keys [type]}]
@ -73,9 +73,10 @@
{:button-1 {:label (i18n/label :t/decline)
:type :danger
:on-press #(>evt [:contact-requests.ui/decline-request id])}
:button-2 {:label (i18n/label :t/accept)
:type :success
:on-press #(>evt [:contact-requests.ui/accept-request id])}}
:button-2 {:label (i18n/label :t/accept)
:type :success
:override-background-color colors/success-60
:on-press #(>evt [:contact-requests.ui/accept-request id])}}
nil))
(defn activity-pressable
@ -86,7 +87,9 @@
;; `:contact.ui/send-message-pressed` instead of
;; `:chat.ui/navigate-to-chat`, otherwise the chat screen looks completely
;; 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))
@ -109,13 +112,14 @@
[]
(let [unread-filter-enabled? (<sub [:activity-center/filter-status-unread-enabled?])]
;; TODO: Replace the button by a Filter Selector component once available for use.
[button/button {:icon true
:type (if unread-filter-enabled? :primary :outline)
:size 32
:on-press #(>evt [:activity-center.notifications/fetch-first-page
{:filter-status (if unread-filter-enabled?
:read
:unread)}])}
[button/button {:icon true
:type (if unread-filter-enabled? :primary :blur-bg-outline)
:size 32
:override-theme :dark
:on-press #(>evt [:activity-center.notifications/fetch-first-page
{:filter-status (if unread-filter-enabled?
:read
:unread)}])}
:main-icons2/unread]))
;; 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])]
[tabs/scrollable-tabs {:size 32
:blur? true
:override-theme :dark
:style {:padding-left 20}
:fade-end-percentage 0.79
:scroll-on-press? true
@ -170,20 +176,20 @@
(defn header
[]
(let [screen-padding 20]
;; TODO: Remove temporary (and old) background color when the screen and
;; header are properly blurred.
[rn/view {:background-color (:ui-background @quo.colors/theme)}
[button/button {:icon true
:type :grey
:size 32
:style {:margin-vertical 12
:margin-left screen-padding}
:on-press #(>evt [:navigate-back])}
[rn/view
[button/button {:icon true
:type :blur-bg
:size 32
:override-theme :dark
:style {:margin-vertical 12
:margin-left screen-padding}
:on-press #(>evt [:hide-popover])}
:main-icons2/close]
[text/text {:size :heading-1
:weight :semi-bold
:style {:padding-horizontal screen-padding
:padding-vertical 12}}
:padding-vertical 12
:color colors/white}}
(i18n/label :t/notifications)]
[rn/view {:flex-direction :row
:padding-vertical 12}
@ -201,12 +207,15 @@
{:component-did-mount #(>evt [:activity-center.notifications/fetch-first-page])
:reagent-render
(fn []
(let [notifications (<sub [:activity-center/filtered-notifications])]
[rn/flat-list {:content-container-style {:flex-grow 1}
:data notifications
:empty-component [empty-tab]
:header [header]
:key-fn :id
:on-end-reached #(>evt [:activity-center.notifications/fetch-next-page])
:render-fn render-notification
:sticky-header-indices [0]}]))}))
(let [notifications (<sub [:activity-center/filtered-notifications])
window-width (<sub [:dimensions/window-width])]
[safe-area/view {:style {:flex 1}}
[rn/view {:style {:width window-width
:flex 1}}
[header]
[rn/flat-list {:content-container-style {:flex-grow 1}
:data notifications
: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
(re-frame/dispatch [:mark-all-activity-center-notifications-as-read])
(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])))}
[icons/icon :main-icons/notification2 {:color (quo2.colors/theme-colors quo2.colors/neutral-100 quo2.colors/white)}]]
(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.frozen-card.view :as frozen-card]
[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
[bottom-anim-value alpha-value window-height]
@ -95,8 +96,10 @@
:reagent-render
(fn []
(when @current-popover
(let [{:keys [view style]} @current-popover]
[react/view {:position :absolute :top 0 :bottom 0 :left 0 :right 0}
(let [{:keys [view style disable-touchable-overlay? blur-view? blur-view-props]} @current-popover
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?
[react/animated-view
{:style {:flex 1 :background-color colors/black-persist :opacity alpha-value}}])
@ -106,10 +109,10 @@
:left 0
:right 0
:transform [{:translateY bottom-anim-value}]}}
[react/touchable-highlight
[overlay-component
{:style {:flex 1 :align-items :center :justify-content :center}
: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
:margin 32
:shadow-offset {:width 0 :height 2}
@ -117,64 +120,66 @@
:shadow-opacity 1
:shadow-color "rgba(0, 9, 26, 0.12)"}
style)
[react/touchable-opacity {:active-opacity 1}
(cond
(vector? view)
view
(cond
(vector? view)
view
(= :signing-phrase view)
[signing-phrase/signing-phrase]
(= :signing-phrase view)
[signing-phrase/signing-phrase]
(= :share-account view)
[request/share-address]
(= :share-account view)
[request/share-address]
(= :share-chat-key view)
[profile.user/share-chat-key]
(= :share-chat-key view)
[profile.user/share-chat-key]
(= :custom-seed-phrase view)
[multiaccounts.recover/custom-seed-phrase]
(= :custom-seed-phrase view)
[multiaccounts.recover/custom-seed-phrase]
(= :enable-biometric view)
[biometric/enable-biometric-popover]
(= :enable-biometric view)
[biometric/enable-biometric-popover]
(= :secure-with-biometric view)
[biometric/secure-with-biometric-popover]
(= :secure-with-biometric view)
[biometric/secure-with-biometric-popover]
(= :disable-password-saving view)
[biometric/disable-password-saving-popover]
(= :disable-password-saving view)
[biometric/disable-password-saving-popover]
(= :transaction-data view)
[signing/transaction-data]
(= :transaction-data view)
[signing/transaction-data]
(= :frozen-card view)
[frozen-card/frozen-card]
(= :frozen-card view)
[frozen-card/frozen-card]
(= :blocked-card view)
[keycard.views/blocked-card-popover]
(= :blocked-card view)
[keycard.views/blocked-card-popover]
(= :export-community view)
[communities/export-community]
(= :export-community view)
[communities/export-community]
(= :seed-key-uid-mismatch view)
[multiaccounts.key-storage/seed-key-uid-mismatch-popover]
(= :seed-key-uid-mismatch view)
[multiaccounts.key-storage/seed-key-uid-mismatch-popover]
(= :transfer-multiaccount-to-keycard-warning view)
[multiaccounts.key-storage/transfer-multiaccount-warning-popover]
(= :transfer-multiaccount-to-keycard-warning view)
[multiaccounts.key-storage/transfer-multiaccount-warning-popover]
(= :transfer-multiaccount-unknown-error view)
[multiaccounts.key-storage/unknown-error-popover]
(= :transfer-multiaccount-unknown-error view)
[multiaccounts.key-storage/unknown-error-popover]
(= :password-reset-popover view)
[reset-password.views/reset-password-popover]
(= :password-reset-popover view)
[reset-password.views/reset-password-popover]
(= :pin-limit view)
[pinned-message/pin-limit-popover]
(= :pin-limit view)
[pinned-message/pin-limit-popover]
(= :fees-warning view)
[signing-sheets/fees-warning]
(= :fees-warning view)
[signing-sheets/fees-warning]
:else
[view])]]]]])))})))
(= :activity-center view)
[activity-center/activity-center]
:else
[view])]]]])))})))
(views/defview popover []
(views/letsubs [popover [:popover/popover]