status-im
/
status-react
mirror of https://github.com/status-im/status-react.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
[button {:icon-only? true} :i/close-circle]"
[_ _]
(let [pressed? (reagent/atom false)]
(let [pressed-state? (reagent/atom false)]
(fn
[{: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
size 40
customization-color (cond (= type :primary) :blue
@ -46,14 +47,18 @@
:background background
:type type
:theme theme
:pressed? @pressed?
:pressed? (if pressed? pressed? @pressed-state?)
:icon-only? icon-only?})
icon-size (when (= 24 size) 12)]
[rn/touchable-without-feedback
{:disabled disabled?
:accessibility-label accessibility-label
:on-press-in #(reset! pressed? true)
:on-press-out #(reset! pressed? nil)
:on-press-in (fn []
(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-long-press on-long-press}
[rn/view
@ -76,7 +81,7 @@
[customization-colors/overlay
{:customization-color customization-color
:theme theme
:pressed? @pressed?}])
:pressed? (if pressed? pressed? @pressed-state?)}])
(when (= background :photo)
[blur/view
{:blur-radius 20

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

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

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

@ -5,8 +5,9 @@
[quo2.components.wallet.account-card.style :as style]
[quo2.components.buttons.button.view :as button]
[quo2.components.markdown.text :as text]
[utils.i18n :as i18n]
[quo2.theme :as theme]))
[quo2.theme :as quo.theme]
[reagent.core :as reagent]
[quo2.foundations.customization-colors :as customization-colors]))
(defn- loading-view
[{:keys [customization-color type theme metrics?]}]
@ -14,103 +15,142 @@
empty-type? (= :empty type)]
[rn/view
{: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 (assoc (style/loader-view 16
16
watch-only?
theme)
{:style (assoc (style/loader-view {:width 16
:height 16
:watch-only? watch-only?
:theme theme})
:margin-right 8
:margin-top 2)}]
[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
{:style (style/loader-view {:width 57
:height 8
:watch-only? watch-only?
:theme theme})}]
(when watch-only? [icon/icon :i/reveal {:color colors/neutral-50 :size 12}])]]
[rn/view
{:style (assoc (style/loader-view
(if empty-type? 56 80)
16
watch-only?
theme)
{:style (assoc (style/loader-view {:width (if empty-type? 56 80)
:height 16
:watch-only? watch-only?
:theme theme})
:margin-top
13)}]
(when metrics?
[rn/view
{:accessibility-label :metrics
:style (assoc (style/loader-view
(if empty-type? 37 96)
8
watch-only?
theme)
:style (assoc (style/loader-view {:width (if empty-type? 37 96)
:height 8
:watch-only? watch-only?
:theme theme})
:margin-top
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
[{:keys [state name balance percentage-value loading? amount customization-color type emoji metrics?
theme on-press]}]
(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?
[loading-view
{:customization-color customization-color
:type type
:theme theme
:metrics? metrics?}]
[rn/pressable
{:style (style/card customization-color watch-only? metrics? theme)
:on-press on-press}
[rn/view {:style style/profile-container}
[rn/view {:style {:padding-bottom 2 :margin-right 2}}
[text/text {:style style/emoji} emoji]]
[rn/view {:style style/watch-only-container}
[text/text
{:size :paragraph-2
:weight :medium
:style (style/account-name watch-only? theme)}
account-name]
(when watch-only? [icon/icon :reveal {:color colors/neutral-50 :size 12}])]]
[text/text
{:size :heading-2
:weight :semi-bold
:style (style/account-value watch-only? theme)}
balance]
(when metrics?
[rn/view {:style style/metrics-container}
[text/text
{:weight :semi-bold
:size :paragraph-2
:accessibility-label :metrics
:style (style/metrics watch-only? theme)}
account-percentage]
(when (not empty-type?)
[:<>
[rn/view (style/separator watch-only? theme)]
[]
(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]}]
(let [watch-only? (= :watch-only type)]
(if loading?
[loading-view
{:customization-color customization-color
:type type
:theme theme
:metrics? metrics?}]
[rn/pressable
{: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}
(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 {:padding-bottom 2 :margin-right 2}}
[text/text {:style style/emoji} emoji]]
[rn/view {:style style/watch-only-container}
[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}]]])])])))
{:size :paragraph-2
:weight :medium
:style (style/account-name watch-only? theme)}
name]
(when watch-only? [icon/icon :i/reveal {:color colors/neutral-50 :size 12}])]]
[text/text
{:size :heading-2
:weight :semi-bold
:style (style/account-value watch-only? theme)}
balance]
(when metrics?
[rn/view {:style style/metrics-container}
[metrics-percentage watch-only? theme percentage-value]
(when (not= :empty type)
[metrics-info watch-only? theme amount])])])))))
(defn- add-account-view
[{:keys [on-press customization-color theme metrics?]}]
[rn/view (style/add-account-container theme metrics?)
[button/button
{:type :primary
:size 24
:icon true
:accessibility-label :add-account
:on-press on-press
:customization-color customization-color
:icon-only? true}
:i/add]])
[]
(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
{:type :primary
:size 24
:icon true
:accessibility-label :add-account
:on-press on-press
:pressed? @pressed?
:on-press-in #(reset! pressed? true)
:on-press-out #(reset! pressed? false)
:customization-color customization-color
:icon-only? true}
:i/add]])))
(defn- view-internal
[{:keys [type] :as props}]
@ -121,4 +161,4 @@
:empty [user-account props]
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)))))
(defn overlay
[{:keys [theme pressed? customization-color]}]
[{:keys [theme pressed? customization-color border-radius]}]
[rn/view
{:position :absolute
:top 0
:left 0
:right 0
:bottom 0
:border-radius border-radius
: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
:margin-left 8}}
[icon/icon :i/check {:color colors/white :size 16}]]]
[rn/view {:style {:flex 1}}
[preview/customizer state descriptor]]
[rn/view {:style {:align-items :center :margin-top 40}}
[rn/view {:style {:align-items :center :margin-bottom 20}}
[quo/account-card @state]]])]))