status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.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

6
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
@ -129,6 +131,8 @@
(get-in props [:style :padding-left]))}} (get-in props [:style :padding-left]))}}
[tab/tab {:id id [tab/tab {:id id
:size size :size size
:override-theme override-theme
:blur? blur?
:active (= id @active-tab-id) :active (= id @active-tab-id)
:on-press (fn [id] :on-press (fn [id]
(reset! active-tab-id id) (reset! active-tab-id id)

7
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]
(let [text-style (params :text-style)]
[base-tag (assoc-in params [:style :padding-left] 3) [base-tag (assoc-in params [:style :padding-left] 3)
[rn/image {:style {:width 20 [rn/image {:style {:width 20
:border-radius 10 :border-radius 10
:background-color :white :background-color :white
:height 20} :height 20}
:source photo}] :source photo}]
[text/text {:weight :medium [text/text
(merge {:weight :medium
:size :paragraph-2} :size :paragraph-2}
(str " " name)]]) {: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)

37
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]}]
@ -75,6 +75,7 @@
: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
:override-background-color colors/success-60
:on-press #(>evt [:contact-requests.ui/accept-request id])}} :on-press #(>evt [:contact-requests.ui/accept-request id])}}
nil)) nil))
@ -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))
@ -110,8 +113,9 @@
(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
:override-theme :dark
:on-press #(>evt [:activity-center.notifications/fetch-first-page :on-press #(>evt [:activity-center.notifications/fetch-first-page
{:filter-status (if unread-filter-enabled? {:filter-status (if unread-filter-enabled?
:read :read
@ -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.
[rn/view {:background-color (:ui-background @quo.colors/theme)}
[button/button {:icon true [button/button {:icon true
:type :grey :type :blur-bg
:size 32 :size 32
:override-theme :dark
:style {:margin-vertical 12 :style {:margin-vertical 12
:margin-left screen-padding} :margin-left screen-padding}
:on-press #(>evt [:navigate-back])} :on-press #(>evt [:hide-popover])}
: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])
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} [rn/flat-list {:content-container-style {:flex-grow 1}
:data notifications :data notifications
:empty-component [empty-tab] :empty-component [empty-tab]
:header [header]
:key-fn :id :key-fn :id
:on-end-reached #(>evt [:activity-center.notifications/fetch-next-page]) :on-end-reached #(>evt [:activity-center.notifications/fetch-next-page])
:render-fn render-notification :render-fn render-notification}]]]))}))
:sticky-header-indices [0]}]))}))

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)

19
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,7 +120,6 @@
: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
@ -173,8 +175,11 @@
(= :fees-warning view) (= :fees-warning view)
[signing-sheets/fees-warning] [signing-sheets/fees-warning]
(= :activity-center view)
[activity-center/activity-center]
:else :else
[view])]]]]])))}))) [view])]]]])))})))
(views/defview popover [] (views/defview popover []
(views/letsubs [popover [:popover/popover] (views/letsubs [popover [:popover/popover]