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

Quo2: Account list card blur (#17271) 

* Quo2: account list card blur
This commit is contained in:
Omar Basem 2023-09-15 07:43:48 +04:00 committed by GitHub
parent e2f837fcbc
commit 4d9ebdb9f9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 68 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/quo2/components/list_items/account_list_card/style.cljs
View File

@ -2,19 +2,23 @@
(:require [quo2.foundations.colors :as colors]))
(defn container
[state theme]
[{:keys [state blur? theme]}]
(let [light-bg (if (= state :default) colors/neutral-2_5 colors/neutral-5)
dark-bg (if (= state :default) colors/neutral-80-opa-40 colors/neutral-80-opa-60)
blur-bg (if (= state :default) colors/white-opa-5 colors/white-opa-10)
light-border (if (= state :default) colors/neutral-10 colors/neutral-20)
dark-border (if (= state :default) colors/neutral-80 colors/neutral-70)]
{:width 319
:height 48
{:height 48
:border-radius 12
:background-color (colors/theme-colors light-bg dark-bg theme)
:border-width 1
:background-color (if blur? blur-bg (colors/theme-colors light-bg dark-bg theme))
:border-width (if blur? 0 1)
:border-color (colors/theme-colors light-border dark-border theme)
:flex-direction :row
:align-items :center
:padding-horizontal 8
:padding-vertical 6
:justify-content :space-between}))
(def left-container
{:flex-direction :row
:align-items :center})

68
src/quo2/components/list_items/account_list_card/view.cljs
View File

@ -6,37 +6,45 @@
[quo2.foundations.colors :as colors]
[quo2.theme :as quo.theme]
[react-native.core :as rn]
[quo2.components.list-items.account-list-card.style :as style]))
[quo2.components.list-items.account-list-card.style :as style]
[reagent.core :as reagent]))
(defn- internal-view
[{:keys [theme account-props networks state action on-press]}]
[rn/view
{:style (style/container state theme)
:accessibility-label :container}
[rn/view
{:style {:flex-direction :row
:align-items :center}}
[account-avatar/view account-props]
[rn/view {:style {:margin-left 8}}
[text/text
{:weight :semi-bold
:size :paragraph-2}
(:name account-props)]
[text/text {:size :paragraph-2}
(map (fn [network]
^{:key (str network)}
[text/text
{:size :paragraph-2
:style {:color (get colors/networks network)}} (str (subs (name network) 0 3) ":")])
networks)
[text/text
{:size :paragraph-2
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
(:address account-props)]]]]
(when (= action :icon)
[rn/pressable {:on-press on-press}
[icon/icon :i/options
{:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
:accessibility-label :icon}]])])
[]
(let [state (reagent/atom :default)]
(fn [{:keys [action blur? account-props networks on-press on-options-press theme]}]
[rn/pressable
{:style (style/container {:state @state :blur? blur? :theme theme})
:on-press-in #(reset! state :pressed)
:on-press-out #(reset! state :default)
:on-press on-press
:accessibility-label :container}
[rn/view {:style style/left-container}
[account-avatar/view account-props]
[rn/view {:style {:margin-left 8}}
[text/text
{:weight :semi-bold
:size :paragraph-2}
(:name account-props)]
[text/text {:size :paragraph-2}
(map (fn [network]
^{:key (str network)}
[text/text
{:size :paragraph-2
:style {:color (get colors/networks network)}} (str (subs (name network) 0 3) ":")])
networks)
[text/text
{:size :paragraph-2
:style {:color (if blur?
colors/white-opa-40
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}}
(:address account-props)]]]]
(when (= action :icon)
[rn/pressable {:on-press on-options-press}
[icon/icon :i/options
{:color (if blur?
colors/white-opa-70
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme))
:accessibility-label :icon}]])])))
(def view (quo.theme/with-theme internal-view))

38
src/status_im2/contexts/quo_preview/list_items/account_list_card.cljs
View File

@ -4,27 +4,31 @@
[status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor
[{:key :state
:type :select
:options [{:key :default}
{:key :pressed}]}
{:key :action
[{:key :action
:type :select
:options [{:key :none}
{:key :icon}]}])
{:key :icon}]}
{:key :blur?
:type :boolean}])
(defn view
[]
(let [state (reagent/atom {:account-props {:customization-color :purple
:size 32
:emoji "🍑"
:type :default
:name "Trip to Vegas"
:address "0x0ah...78b"}
:networks [:ethereum :optimism]
:state :default
:action :none
:on-press (fn [] (js/alert "Button pressed"))})]
(let [state (reagent/atom {:account-props {:customization-color :purple
:size 32
:emoji "🍑"
:type :default
:name "Trip to Vegas"
:address "0x0ah...78b"}
:networks [:ethereum :optimism]
:action :none
:on-press (fn [] (js/alert "Item pressed"))
:on-options-press (fn [] (js/alert "Options pressed"))
:blur? false})]
(fn []
[preview/preview-container {:state state :descriptor descriptor}
[preview/preview-container
{:state state
:descriptor descriptor
:blur? (:blur? @state)
:show-blur-background? true
:blur-dark-only? true}
[quo/account-list-card @state]])))