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

feat: add blur effect on scroll for buttons inside gallery view (#16319) 

Signed-off-by: Brian Sztamfater <brian@status.im>
This commit is contained in:
Brian Sztamfater 2023-06-26 10:19:54 -03:00 committed by GitHub
parent 36aefd0e5a
commit 437cfa9a77
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 142 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
src/quo2/components/buttons/button.cljs
View File

@ -4,7 +4,9 @@
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.theme :as theme] [quo2.theme :as theme]
[react-native.core :as rn] [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 (defn themes
[customization-color] [customization-color]
@ -66,6 +68,16 @@
:background-color {:default colors/neutral-80-opa-5 :background-color {:default colors/neutral-80-opa-5
:pressed colors/neutral-80-opa-10 :pressed colors/neutral-80-opa-10
:disabled colors/neutral-80-opa-5}} :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 :blur-bg-outline {:icon-color colors/neutral-100
:icon-secondary-color colors/neutral-80-opa-40 :icon-secondary-color colors/neutral-80-opa-40
:label-color colors/neutral-100 :label-color colors/neutral-100
@ -135,6 +147,16 @@
:background-color {:default colors/white-opa-5 :background-color {:default colors/white-opa-5
:pressed colors/white-opa-10 :pressed colors/white-opa-10
:disabled colors/white-opa-5}} :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 :blur-bg-outline {:icon-color colors/white
:icon-secondary-color colors/white-opa-40 :icon-secondary-color colors/white-opa-40
:label-color colors/white :label-color colors/white
@ -157,12 +179,11 @@
24 8))}) 24 8))})
(defn style-container (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 (merge {:height size
:align-items :center :align-items :center
:justify-content :center :justify-content :center
:flex-direction (if above :column :row) :flex-direction (if above :column :row)
:background-color background-color
:padding-horizontal (when-not (or icon before after) :padding-horizontal (when-not (or icon before after)
(case size (case size
56 16 56 16
@ -192,7 +213,11 @@
56 0 56 0
40 9 40 9
32 5 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) (shape-style-container type icon size)
(when width (when width
{:width width}) {:width width})
@ -224,18 +249,23 @@
(fn (fn
[{:keys [on-press disabled type size before after above icon-secondary-no-color [{:keys [on-press disabled type size before after above icon-secondary-no-color
width customization-color theme override-background-color pressed 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 :or {type :primary
size 40 size 40
customization-color :primary}} customization-color :primary
blur-active? true}}
children] 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) (get-in (themes customization-color)
[theme type]) [theme type])
state (cond disabled :disabled state (cond disabled :disabled
(or @pressed-in pressed) :pressed (or @pressed-in pressed) :pressed
:else :default) :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)] icon-secondary-color (or icon-secondary-color icon-color)]
[rn/touchable-without-feedback [rn/touchable-without-feedback
(merge {:test-ID test-ID (merge {:test-ID test-ID
@ -264,9 +294,17 @@
above above
width width
before before
after) after
blur-active?)
(when (= state :pressed) {:opacity 0.9}) (when (= state :pressed) {:opacity 0.9})
inner-style)} 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 (when above
[rn/view [rn/view
[quo2.icons/icon above [quo2.icons/icon above
@ -275,11 +313,16 @@
:size icon-size}]]) :size icon-size}]])
(when before (when before
[rn/view [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 [quo2.icons/icon before
{:container-style {:margin-left (if (= size 40) 12 8) {:color icon-secondary-color
:margin-right 4} :size icon-size}]])
:color icon-secondary-color
:size icon-size}]])
[rn/view [rn/view
(cond (cond
(or icon icon-no-color) (or icon icon-no-color)
@ -301,11 +344,16 @@
children)] children)]
(when after (when after
[rn/view [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 [quo2.icons/icon after
{:container-style {:margin-left 4 {:no-color icon-secondary-no-color
:margin-right (if (= size 40) 12 8)} :color icon-secondary-color
:no-color icon-secondary-no-color :size icon-size}]])]]]))))
:color icon-secondary-color
:size icon-size}]])]]]))))
(def button (theme/with-theme button-internal)) (def button (theme/with-theme button-internal))

42
src/quo2/components/buttons/style.cljs Normal file
View File

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

8
src/quo2/components/dropdowns/dropdown.cljs
View File

@ -7,8 +7,12 @@
[button/button [button/button
(merge (merge
opts opts
{:after (if selected :i/pullup :i/dropdown) {:after (if selected :i/chevron-top :i/chevron-down)
:icon-secondary-no-color true :icon-size 12
:icon-container-size 14
:icon-container-rounded? true
:override-after-margins {:left 7
:right 9}
:pressed selected :pressed selected
:on-press #(when on-change (on-change selected))}) :on-press #(when on-change (on-change selected))})
children])) children]))

4
src/quo2/foundations/colors.cljs
View File

@ -121,7 +121,11 @@
(def white-70-blur (alpha white 0.7)) (def white-70-blur (alpha white 0.7))
(def neutral-80-opa-1-blur (alpha "#192438" 0.1)) (def neutral-80-opa-1-blur (alpha "#192438" 0.1))
(def neutral-5-opa-70-blur (alpha neutral-5 0.7)) (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-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-90-opa-70-blur (alpha neutral-90 0.7))
(def neutral-95-opa-70-blur neutral-95-opa-70) (def neutral-95-opa-70-blur neutral-95-opa-70)
(def neutral-100-opa-70-blur neutral-100-opa-70) (def neutral-100-opa-70-blur neutral-100-opa-70)

3
src/status_im2/common/bottom_sheet_screen/view.cljs
View File

@ -46,7 +46,7 @@
(defn f-view (defn f-view
[content skip-background?] [content skip-background?]
(let [scroll-enabled (reagent/atom true) (let [scroll-enabled (reagent/atom true)
curr-scroll (atom 0) curr-scroll (reagent/atom 0)
{:keys [override-theme]} (rf/sub [:get-screen-params])] {:keys [override-theme]} (rf/sub [:get-screen-params])]
(fn [] (fn []
(let [insets (safe-area/get-insets) (let [insets (safe-area/get-insets)
@ -78,4 +78,5 @@
{:insets insets {:insets insets
:close close :close close
:scroll-enabled scroll-enabled :scroll-enabled scroll-enabled
:current-scroll curr-scroll
:on-scroll #(on-scroll % curr-scroll)}]]]])))) :on-scroll #(on-scroll % curr-scroll)}]]]]))))

32
src/status_im2/contexts/chat/photo_selector/view.cljs
View File

@ -16,6 +16,8 @@
[status-im2.contexts.chat.photo-selector.album-selector.view :as album-selector] [status-im2.contexts.chat.photo-selector.album-selector.view :as album-selector]
utils.collection)) utils.collection))
(def min-scroll-to-blur 5)
(defn show-toast (defn show-toast
[] []
(rf/dispatch [:toasts/upsert (rf/dispatch [:toasts/upsert
@ -49,14 +51,15 @@
(i18n/label :t/confirm-selection)]])) (i18n/label :t/confirm-selection)]]))
(defn clear-button (defn clear-button
[album? selected] [album? selected blur-active?]
(when (and (not album?) (seq @selected)) (when (and (not album?) (seq @selected))
[rn/view {:style style/clear-container} [rn/view {:style style/clear-container}
[quo/button [quo/button
{:type :grey {:type :blurred
:size 32 :size 32
:accessibility-label :clear :accessibility-label :clear
:on-press #(reset! selected [])} :on-press #(reset! selected [])
:blur-active? blur-active?}
(i18n/label :t/clear)]])) (i18n/label :t/clear)]]))
(defn remove-selected (defn remove-selected
@ -86,7 +89,7 @@
(inc (utils.collection/first-index #(= (:uri item) (:uri %)) @selected))]])])) (inc (utils.collection/first-index #(= (:uri item) (:uri %)) @selected))]])]))
(defn photo-selector (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/get-photos-for-selected-album])
(rf/dispatch [:photo-selector/camera-roll-get-albums]) (rf/dispatch [:photo-selector/camera-roll-get-albums])
(let [album? (reagent/atom false) (let [album? (reagent/atom false)
@ -98,12 +101,9 @@
end-cursor (rf/sub [:camera-roll/end-cursor]) end-cursor (rf/sub [:camera-roll/end-cursor])
loading? (rf/sub [:camera-roll/loading-more]) loading? (rf/sub [:camera-roll/loading-more])
has-next-page? (rf/sub [:camera-roll/has-next-page]) 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 {: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? (if @album?
[album-selector/album-selector sheet album? selected-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/camera-roll-loading-more true])
(rf/dispatch [:photo-selector/get-photos-for-selected-album (rf/dispatch [:photo-selector/get-photos-for-selected-album
end-cursor])))}] 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?]]]))))