From 437cfa9a77f405cb7cab53b231528b94d7948450 Mon Sep 17 00:00:00 2001 From: Brian Sztamfater Date: Mon, 26 Jun 2023 10:19:54 -0300 Subject: [PATCH] feat: add blur effect on scroll for buttons inside gallery view (#16319) Signed-off-by: Brian Sztamfater --- src/quo2/components/buttons/button.cljs | 84 +++++++++++++++---- src/quo2/components/buttons/style.cljs | 42 ++++++++++ src/quo2/components/dropdowns/dropdown.cljs | 8 +- src/quo2/foundations/colors.cljs | 4 + .../common/bottom_sheet_screen/view.cljs | 3 +- .../contexts/chat/photo_selector/view.cljs | 32 ++++--- 6 files changed, 142 insertions(+), 31 deletions(-) create mode 100644 src/quo2/components/buttons/style.cljs diff --git a/src/quo2/components/buttons/button.cljs b/src/quo2/components/buttons/button.cljs index 90adb98cc7..715f10b766 100644 --- a/src/quo2/components/buttons/button.cljs +++ b/src/quo2/components/buttons/button.cljs @@ -4,7 +4,9 @@ [quo2.foundations.colors :as colors] [quo2.theme :as theme] [react-native.core :as rn] - [reagent.core :as reagent])) + [react-native.blur :as blur] + [reagent.core :as reagent] + [quo2.components.buttons.style :as style])) (defn themes [customization-color] @@ -66,6 +68,16 @@ :background-color {:default colors/neutral-80-opa-5 :pressed colors/neutral-80-opa-10 :disabled colors/neutral-80-opa-5}} + :blurred {:icon-color colors/neutral-100 + :icon-secondary-color colors/neutral-100 + :icon-background-color {:default colors/neutral-20 + :blurred colors/neutral-80-opa-10} + :label-color colors/neutral-100 + :background-color {:default colors/neutral-10 + :pressed colors/neutral-10 + :disabled colors/neutral-10-opa-10-blur} + :blur-overlay-color colors/neutral-10-opa-40-blur + :blur-type :light} :blur-bg-outline {:icon-color colors/neutral-100 :icon-secondary-color colors/neutral-80-opa-40 :label-color colors/neutral-100 @@ -135,6 +147,16 @@ :background-color {:default colors/white-opa-5 :pressed colors/white-opa-10 :disabled colors/white-opa-5}} + :blurred {:icon-color colors/white + :icon-secondary-color colors/white + :icon-background-color {:default colors/neutral-80 + :blurred colors/white-opa-10} + :label-color colors/white + :background-color {:default colors/neutral-90 + :pressed colors/neutral-90 + :disabled colors/neutral-90-opa-10-blur} + :blur-overlay-color colors/neutral-80-opa-40 + :blur-type :dark} :blur-bg-outline {:icon-color colors/white :icon-secondary-color colors/white-opa-40 :label-color colors/white @@ -157,12 +179,11 @@ 24 8))}) (defn style-container - [type size disabled background-color border-color icon above width before after] + [type size disabled background-color border-color icon above width before after blur-active?] (merge {:height size :align-items :center :justify-content :center :flex-direction (if above :column :row) - :background-color background-color :padding-horizontal (when-not (or icon before after) (case size 56 16 @@ -192,7 +213,11 @@ 56 0 40 9 32 5 - 24 4))} + 24 4)) + :overflow :hidden} + (when (or (and (= type :blurred) (not blur-active?)) + (not= type :blurred)) + {:background-color background-color}) (shape-style-container type icon size) (when width {:width width}) @@ -224,18 +249,23 @@ (fn [{:keys [on-press disabled type size before after above icon-secondary-no-color width customization-color theme override-background-color pressed - on-long-press accessibility-label icon icon-no-color style inner-style test-ID] + on-long-press accessibility-label icon icon-no-color style inner-style test-ID + blur-active? override-before-margins override-after-margins icon-size icon-container-size + icon-container-rounded?] :or {type :primary size 40 - customization-color :primary}} + customization-color :primary + blur-active? true}} children] - (let [{:keys [icon-color icon-secondary-color background-color label-color border-color]} + (let [{:keys [icon-color icon-secondary-color background-color label-color border-color blur-type + blur-overlay-color icon-background-color]} (get-in (themes customization-color) [theme type]) state (cond disabled :disabled (or @pressed-in pressed) :pressed :else :default) - icon-size (when (= 24 size) 12) + blur-state (if blur-active? :blurred :default) + icon-size (or icon-size (when (= 24 size) 12)) icon-secondary-color (or icon-secondary-color icon-color)] [rn/touchable-without-feedback (merge {:test-ID test-ID @@ -264,9 +294,17 @@ above width before - after) + after + blur-active?) (when (= state :pressed) {:opacity 0.9}) inner-style)} + (when (and (= type :blurred) + blur-active?) + [blur/view + {:blur-radius 20 + :blur-type blur-type + :overlay-color blur-overlay-color + :style style/blur-view}]) (when above [rn/view [quo2.icons/icon above @@ -275,11 +313,16 @@ :size icon-size}]]) (when before [rn/view + {:style (style/before-icon-style + {:override-margins override-before-margins + :size size + :icon-container-size icon-container-size + :icon-background-color (get icon-background-color blur-state) + :icon-container-rounded? icon-container-rounded? + :icon-size icon-size})} [quo2.icons/icon before - {:container-style {:margin-left (if (= size 40) 12 8) - :margin-right 4} - :color icon-secondary-color - :size icon-size}]]) + {:color icon-secondary-color + :size icon-size}]]) [rn/view (cond (or icon icon-no-color) @@ -301,11 +344,16 @@ children)] (when after [rn/view + {:style (style/after-icon-style + {:override-margins override-after-margins + :size size + :icon-container-size icon-container-size + :icon-background-color (get icon-background-color blur-state) + :icon-container-rounded? icon-container-rounded? + :icon-size icon-size})} [quo2.icons/icon after - {:container-style {:margin-left 4 - :margin-right (if (= size 40) 12 8)} - :no-color icon-secondary-no-color - :color icon-secondary-color - :size icon-size}]])]]])))) + {:no-color icon-secondary-no-color + :color icon-secondary-color + :size icon-size}]])]]])))) (def button (theme/with-theme button-internal)) diff --git a/src/quo2/components/buttons/style.cljs b/src/quo2/components/buttons/style.cljs new file mode 100644 index 0000000000..ff9f486d72 --- /dev/null +++ b/src/quo2/components/buttons/style.cljs @@ -0,0 +1,42 @@ +(ns quo2.components.buttons.style) + +(def blur-view + {:position :absolute + :top 0 + :left 0 + :right 0 + :bottom 0}) + +(defn before-icon-style + [{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded? + icon-size]}] + (merge + {:margin-left (or (get override-margins :left) + (if (= size 40) 12 8)) + :margin-right (or (get override-margins :right) 4) + :align-items :center + :justify-content :center} + (when icon-container-size + {:width icon-container-size + :height icon-container-size}) + (when icon-background-color + {:background-color icon-background-color}) + (when icon-container-rounded? + {:border-radius (/ (or icon-container-size icon-size) 2)}))) + +(defn after-icon-style + [{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded? + icon-size]}] + (merge + {:margin-left (or (get override-margins :left) 4) + :margin-right (or (get override-margins :right) + (if (= size 40) 12 8)) + :align-items :center + :justify-content :center} + (when icon-container-size + {:width icon-container-size + :height icon-container-size}) + (when icon-background-color + {:background-color icon-background-color}) + (when icon-container-rounded? + {:border-radius (/ (or icon-container-size icon-size) 2)}))) diff --git a/src/quo2/components/dropdowns/dropdown.cljs b/src/quo2/components/dropdowns/dropdown.cljs index f3aca87f28..8b05b96ec2 100644 --- a/src/quo2/components/dropdowns/dropdown.cljs +++ b/src/quo2/components/dropdowns/dropdown.cljs @@ -7,8 +7,12 @@ [button/button (merge opts - {:after (if selected :i/pullup :i/dropdown) - :icon-secondary-no-color true + {:after (if selected :i/chevron-top :i/chevron-down) + :icon-size 12 + :icon-container-size 14 + :icon-container-rounded? true + :override-after-margins {:left 7 + :right 9} :pressed selected :on-press #(when on-change (on-change selected))}) children])) diff --git a/src/quo2/foundations/colors.cljs b/src/quo2/foundations/colors.cljs index b6a9162e7c..ec9e5a9568 100644 --- a/src/quo2/foundations/colors.cljs +++ b/src/quo2/foundations/colors.cljs @@ -121,7 +121,11 @@ (def white-70-blur (alpha white 0.7)) (def neutral-80-opa-1-blur (alpha "#192438" 0.1)) (def neutral-5-opa-70-blur (alpha neutral-5 0.7)) +(def neutral-10-opa-10-blur (alpha neutral-10 0.1)) +(def neutral-10-opa-40-blur (alpha neutral-10 0.4)) (def neutral-80-opa-80-blur (alpha "#192438" 0.8)) +(def neutral-90-opa-10-blur (alpha neutral-90 0.1)) +(def neutral-90-opa-40-blur (alpha neutral-90 0.4)) (def neutral-90-opa-70-blur (alpha neutral-90 0.7)) (def neutral-95-opa-70-blur neutral-95-opa-70) (def neutral-100-opa-70-blur neutral-100-opa-70) diff --git a/src/status_im2/common/bottom_sheet_screen/view.cljs b/src/status_im2/common/bottom_sheet_screen/view.cljs index f2dc57037a..db9a111616 100644 --- a/src/status_im2/common/bottom_sheet_screen/view.cljs +++ b/src/status_im2/common/bottom_sheet_screen/view.cljs @@ -46,7 +46,7 @@ (defn f-view [content skip-background?] (let [scroll-enabled (reagent/atom true) - curr-scroll (atom 0) + curr-scroll (reagent/atom 0) {:keys [override-theme]} (rf/sub [:get-screen-params])] (fn [] (let [insets (safe-area/get-insets) @@ -78,4 +78,5 @@ {:insets insets :close close :scroll-enabled scroll-enabled + :current-scroll curr-scroll :on-scroll #(on-scroll % curr-scroll)}]]]])))) diff --git a/src/status_im2/contexts/chat/photo_selector/view.cljs b/src/status_im2/contexts/chat/photo_selector/view.cljs index a61b6ac2b0..81bacba33e 100644 --- a/src/status_im2/contexts/chat/photo_selector/view.cljs +++ b/src/status_im2/contexts/chat/photo_selector/view.cljs @@ -16,6 +16,8 @@ [status-im2.contexts.chat.photo-selector.album-selector.view :as album-selector] utils.collection)) +(def min-scroll-to-blur 5) + (defn show-toast [] (rf/dispatch [:toasts/upsert @@ -49,14 +51,15 @@ (i18n/label :t/confirm-selection)]])) (defn clear-button - [album? selected] + [album? selected blur-active?] (when (and (not album?) (seq @selected)) [rn/view {:style style/clear-container} [quo/button - {:type :grey + {:type :blurred :size 32 :accessibility-label :clear - :on-press #(reset! selected [])} + :on-press #(reset! selected []) + :blur-active? blur-active?} (i18n/label :t/clear)]])) (defn remove-selected @@ -86,7 +89,7 @@ (inc (utils.collection/first-index #(= (:uri item) (:uri %)) @selected))]])])) (defn photo-selector - [{:keys [scroll-enabled on-scroll close] :as sheet}] + [{:keys [scroll-enabled on-scroll current-scroll close] :as sheet}] (rf/dispatch [:photo-selector/get-photos-for-selected-album]) (rf/dispatch [:photo-selector/camera-roll-get-albums]) (let [album? (reagent/atom false) @@ -98,12 +101,9 @@ end-cursor (rf/sub [:camera-roll/end-cursor]) loading? (rf/sub [:camera-roll/loading-more]) has-next-page? (rf/sub [:camera-roll/has-next-page]) - selected-album (or (rf/sub [:camera-roll/selected-album]) (i18n/label :t/recent))] + selected-album (or (rf/sub [:camera-roll/selected-album]) (i18n/label :t/recent)) + blur-active? (> @current-scroll min-scroll-to-blur)] [rn/view {:style {:flex 1 :margin-top -20}} - [rn/view {:style style/buttons-container} - [quo/dropdown {:type :grey :size 32 :on-change #(swap! album? not) :selected @album?} - selected-album] - [clear-button @album? selected-images]] (if @album? [album-selector/album-selector sheet album? selected-album] [:<> @@ -123,4 +123,16 @@ (rf/dispatch [:photo-selector/camera-roll-loading-more true]) (rf/dispatch [:photo-selector/get-photos-for-selected-album end-cursor])))}] - [confirm-button @selected-images sending-image close]])])))) + [confirm-button @selected-images sending-image close]]) + [rn/view {:style style/buttons-container} + [quo/dropdown + {:type :blurred + :size 32 + :on-change (fn [] + (swap! album? not) + (reset! current-scroll 0)) + :selected @album? + :blur-active? (and (not @album?) blur-active?) + :override-background-color (when-not @album? :transparent)} + selected-album] + [clear-button @album? selected-images blur-active?]]]))))