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

Handle account-card component pressed state bg color (#17234) 

Handle account-card component pressed state bg color
This commit is contained in:
mmilad75 2023-09-25 16:30:54 +03:30 committed by GitHub
parent 1dfab2b416
commit 3082605d1e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 150 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/quo2/components/buttons/button/view.cljs
View File

@ -29,10 +29,11 @@
only icon only icon
[button {:icon-only? true} :i/close-circle]" [button {:icon-only? true} :i/close-circle]"
[_ _] [_ _]
(let [pressed? (reagent/atom false)] (let [pressed-state? (reagent/atom false)]
(fn (fn
[{:keys [on-press on-long-press disabled? type background size icon-left icon-right icon-top [{:keys [on-press on-long-press disabled? type background size icon-left icon-right icon-top
customization-color theme accessibility-label icon-only? container-style inner-style] customization-color theme accessibility-label icon-only? container-style inner-style
pressed? on-press-in on-press-out]
:or {type :primary :or {type :primary
size 40 size 40
customization-color (cond (= type :primary) :blue customization-color (cond (= type :primary) :blue
@ -46,14 +47,18 @@
:background background :background background
:type type :type type
:theme theme :theme theme
:pressed? @pressed? :pressed? (if pressed? pressed? @pressed-state?)
:icon-only? icon-only?}) :icon-only? icon-only?})
icon-size (when (= 24 size) 12)] icon-size (when (= 24 size) 12)]
[rn/touchable-without-feedback [rn/touchable-without-feedback
{:disabled disabled? {:disabled disabled?
:accessibility-label accessibility-label :accessibility-label accessibility-label
:on-press-in #(reset! pressed? true) :on-press-in (fn []
:on-press-out #(reset! pressed? nil) (reset! pressed-state? true)
(when on-press-in (on-press-in)))
:on-press-out (fn []
(reset! pressed-state? nil)
(when on-press-out (on-press-out)))
:on-press on-press :on-press on-press
:on-long-press on-long-press} :on-long-press on-long-press}
[rn/view [rn/view
@ -76,7 +81,7 @@
[customization-colors/overlay [customization-colors/overlay
{:customization-color customization-color {:customization-color customization-color
:theme theme :theme theme
:pressed? @pressed?}]) :pressed? (if pressed? pressed? @pressed-state?)}])
(when (= background :photo) (when (= background :photo)
[blur/view [blur/view
{:blur-radius 20 {:blur-radius 20

19
src/quo2/components/wallet/account_card/style.cljs
View File

@ -9,7 +9,7 @@
colors/white)) colors/white))
(defn card (defn card
[customization-color watch-only? metrics? theme] [{:keys [customization-color watch-only? metrics? theme pressed?]}]
{:width 162 {:width 162
:height (if metrics? 88 68) :height (if metrics? 88 68)
:background-color (if watch-only? :background-color (if watch-only?
@ -21,7 +21,10 @@
:border-radius 16 :border-radius 16
:border-width 1 :border-width 1
:border-color (if watch-only? :border-color (if watch-only?
(colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme) (colors/theme-colors
(if pressed? colors/neutral-80-opa-10 colors/neutral-80-opa-5)
(if pressed? colors/white-opa-10 colors/white-opa-5)
theme)
colors/neutral-80-opa-10) colors/neutral-80-opa-10)
:padding-horizontal 12 :padding-horizontal 12
:padding-top 6 :padding-top 6
@ -67,10 +70,13 @@
:margin-horizontal 4}) :margin-horizontal 4})
(defn add-account-container (defn add-account-container
[theme metrics?] [{:keys [theme metrics? pressed?]}]
{:width 161 {:width 161
:height (if metrics? 88 68) :height (if metrics? 88 68)
:border-color (colors/theme-colors colors/neutral-20 colors/white-opa-5 theme) :border-color (colors/theme-colors
(if pressed? colors/neutral-40 colors/neutral-30)
(if pressed? colors/neutral-70 colors/neutral-80)
theme)
:border-width 1 :border-width 1
:border-style :dashed :border-style :dashed
:align-items :center :align-items :center
@ -84,7 +90,7 @@
:line-height 20}) :line-height 20})
(defn loader-view (defn loader-view
[width height watch-only? theme] [{:keys [width height watch-only? theme]}]
{:width width {:width width
:height height :height height
:background-color (if (and watch-only? (= :light theme)) colors/neutral-80-opa-5 colors/white-opa-10) :background-color (if (and watch-only? (= :light theme)) colors/neutral-80-opa-5 colors/white-opa-10)
@ -93,3 +99,6 @@
(def loader-container (def loader-container
{:flex-direction :row {:flex-direction :row
:align-items :center}) :align-items :center})
(def metrics-icon-container
{:margin-left 4})

142
src/quo2/components/wallet/account_card/view.cljs
View File

@ -5,8 +5,9 @@
[quo2.components.wallet.account-card.style :as style] [quo2.components.wallet.account-card.style :as style]
[quo2.components.buttons.button.view :as button] [quo2.components.buttons.button.view :as button]
[quo2.components.markdown.text :as text] [quo2.components.markdown.text :as text]
[utils.i18n :as i18n] [quo2.theme :as quo.theme]
[quo2.theme :as theme])) [reagent.core :as reagent]
[quo2.foundations.customization-colors :as customization-colors]))
(defn- loading-view (defn- loading-view
[{:keys [customization-color type theme metrics?]}] [{:keys [customization-color type theme metrics?]}]
@ -14,45 +15,77 @@
empty-type? (= :empty type)] empty-type? (= :empty type)]
[rn/view [rn/view
{:accessibility-label :loading {:accessibility-label :loading
:style (style/card customization-color watch-only? metrics? theme)} :style (style/card {:customization-color customization-color
:watch-only? watch-only?
:metrics? metrics?
:theme theme
:pressed? false})}
[rn/view {:style style/loader-container} [rn/view {:style style/loader-container}
[rn/view [rn/view
{:style (assoc (style/loader-view 16 {:style (assoc (style/loader-view {:width 16
16 :height 16
watch-only? :watch-only? watch-only?
theme) :theme theme})
:margin-right 8 :margin-right 8
:margin-top 2)}] :margin-top 2)}]
[rn/view {:style style/watch-only-container} [rn/view {:style style/watch-only-container}
[rn/view {:style (style/loader-view 57 8 watch-only? theme)}]
(when watch-only? [icon/icon :reveal {:color colors/neutral-50 :size 12}])]]
[rn/view [rn/view
{:style (assoc (style/loader-view {:style (style/loader-view {:width 57
(if empty-type? 56 80) :height 8
16 :watch-only? watch-only?
watch-only? :theme theme})}]
theme) (when watch-only? [icon/icon :i/reveal {:color colors/neutral-50 :size 12}])]]
[rn/view
{:style (assoc (style/loader-view {:width (if empty-type? 56 80)
:height 16
:watch-only? watch-only?
:theme theme})
:margin-top :margin-top
13)}] 13)}]
(when metrics? (when metrics?
[rn/view [rn/view
{:accessibility-label :metrics {:accessibility-label :metrics
:style (assoc (style/loader-view :style (assoc (style/loader-view {:width (if empty-type? 37 96)
(if empty-type? 37 96) :height 8
8 :watch-only? watch-only?
watch-only? :theme theme})
theme)
:margin-top :margin-top
10)}])])) 10)}])]))
(defn- metrics-percentage
[watch-only? theme account-percentage]
[text/text
{:weight :semi-bold
:size :paragraph-2
:accessibility-label :metrics
:style (style/metrics watch-only? theme)}
account-percentage])
(defn- metrics-info
[watch-only? theme account-amount]
[:<>
[rn/view (style/separator watch-only? theme)]
[text/text
{:weight :semi-bold
:size :paragraph-2
:style (style/metrics watch-only? theme)}
account-amount]
[rn/view {:style style/metrics-icon-container}
[icon/icon
:i/positive
{:color (colors/theme-colors (if watch-only? colors/neutral-50 colors/white-opa-70)
colors/white-opa-70
theme)
:size 16}]]])
(defn- user-account (defn- user-account
[{:keys [state name balance percentage-value loading? amount customization-color type emoji metrics? []
(let [pressed? (reagent/atom false)
on-press-in #(reset! pressed? true)
on-press-out #(reset! pressed? false)]
(fn [{:keys [name balance percentage-value loading? amount customization-color type emoji metrics?
theme on-press]}] theme on-press]}]
(let [watch-only? (= :watch-only type) (let [watch-only? (= :watch-only type)]
empty-type? (= :empty type)
account-amount (if (= :empty state) "€0.00" amount)
account-name (if (= :empty state) (i18n/label :t/Account 1) name)
account-percentage (if (= :empty state) "€0.00" percentage-value)]
(if loading? (if loading?
[loading-view [loading-view
{:customization-color customization-color {:customization-color customization-color
@ -60,8 +93,20 @@
:theme theme :theme theme
:metrics? metrics?}] :metrics? metrics?}]
[rn/pressable [rn/pressable
{:style (style/card customization-color watch-only? metrics? theme) {:on-press-in on-press-in
:on-press-out on-press-out
:style (style/card {:customization-color customization-color
:watch-only? watch-only?
:metrics? metrics?
:theme theme
:pressed? @pressed?})
:on-press on-press} :on-press on-press}
(when (and customization-color (not watch-only?))
[customization-colors/overlay
{:customization-color customization-color
:border-radius 16
:theme theme
:pressed? @pressed?}])
[rn/view {:style style/profile-container} [rn/view {:style style/profile-container}
[rn/view {:style {:padding-bottom 2 :margin-right 2}} [rn/view {:style {:padding-bottom 2 :margin-right 2}}
[text/text {:style style/emoji} emoji]] [text/text {:style style/emoji} emoji]]
@ -70,8 +115,8 @@
{:size :paragraph-2 {:size :paragraph-2
:weight :medium :weight :medium
:style (style/account-name watch-only? theme)} :style (style/account-name watch-only? theme)}
account-name] name]
(when watch-only? [icon/icon :reveal {:color colors/neutral-50 :size 12}])]] (when watch-only? [icon/icon :i/reveal {:color colors/neutral-50 :size 12}])]]
[text/text [text/text
{:size :heading-2 {:size :heading-2
:weight :semi-bold :weight :semi-bold
@ -79,38 +124,33 @@
balance] balance]
(when metrics? (when metrics?
[rn/view {:style style/metrics-container} [rn/view {:style style/metrics-container}
[text/text [metrics-percentage watch-only? theme percentage-value]
{:weight :semi-bold (when (not= :empty type)
:size :paragraph-2 [metrics-info watch-only? theme amount])])])))))
:accessibility-label :metrics
:style (style/metrics watch-only? theme)}
account-percentage]
(when (not empty-type?)
[:<>
[rn/view (style/separator watch-only? theme)]
[text/text
{:weight :semi-bold
:size :paragraph-2
:style (style/metrics watch-only? theme)} account-amount]
[rn/view {:style {:margin-left 4}}
[icon/icon :positive
{:color (colors/theme-colors (if watch-only? colors/neutral-50 colors/white-opa-70)
colors/white-opa-70
theme)
:size 16}]]])])])))
(defn- add-account-view (defn- add-account-view
[{:keys [on-press customization-color theme metrics?]}] []
[rn/view (style/add-account-container theme metrics?) (let [pressed? (reagent/atom false)]
(fn [{:keys [on-press customization-color theme metrics?]}]
[rn/pressable
{:on-press on-press
:on-press-in #(reset! pressed? true)
:on-press-out #(reset! pressed? false)
:style (style/add-account-container {:theme theme
:metrics? metrics?
:pressed? @pressed?})}
[button/button [button/button
{:type :primary {:type :primary
:size 24 :size 24
:icon true :icon true
:accessibility-label :add-account :accessibility-label :add-account
:on-press on-press :on-press on-press
:pressed? @pressed?
:on-press-in #(reset! pressed? true)
:on-press-out #(reset! pressed? false)
:customization-color customization-color :customization-color customization-color
:icon-only? true} :icon-only? true}
:i/add]]) :i/add]])))
(defn- view-internal (defn- view-internal
[{:keys [type] :as props}] [{:keys [type] :as props}]
@ -121,4 +161,4 @@
:empty [user-account props] :empty [user-account props]
nil)) nil))
(def view (theme/with-theme view-internal)) (def view (quo.theme/with-theme view-internal))

3
src/quo2/foundations/customization_colors.cljs
View File

@ -10,11 +10,12 @@
(colors/alpha colors/black (if pressed? 0 0.2))))) (colors/alpha colors/black (if pressed? 0 0.2)))))
(defn overlay (defn overlay
[{:keys [theme pressed? customization-color]}] [{:keys [theme pressed? customization-color border-radius]}]
[rn/view [rn/view
{:position :absolute {:position :absolute
:top 0 :top 0
:left 0 :left 0
:right 0 :right 0
:bottom 0 :bottom 0
:border-radius border-radius
:background-color (get-overlay-color theme pressed? customization-color)}]) :background-color (get-overlay-color theme pressed? customization-color)}])

4
src/status_im2/contexts/quo_preview/wallet/account_card.cljs
View File

@ -116,7 +116,5 @@
:justify-content :center :justify-content :center
:margin-left 8}} :margin-left 8}}
[icon/icon :i/check {:color colors/white :size 16}]]] [icon/icon :i/check {:color colors/white :size 16}]]]
[rn/view {:style {:flex 1}} [rn/view {:style {:align-items :center :margin-bottom 20}}
[preview/customizer state descriptor]]
[rn/view {:style {:align-items :center :margin-top 40}}
[quo/account-card @state]]])])) [quo/account-card @state]]])]))