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])) (:require [quo2.foundations.colors :as colors]))
(defn container (defn container
[state theme] [{:keys [state blur? theme]}]
(let [light-bg (if (= state :default) colors/neutral-2_5 colors/neutral-5) (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) 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) light-border (if (= state :default) colors/neutral-10 colors/neutral-20)
dark-border (if (= state :default) colors/neutral-80 colors/neutral-70)] dark-border (if (= state :default) colors/neutral-80 colors/neutral-70)]
{:width 319 {:height 48
:height 48
:border-radius 12 :border-radius 12
:background-color (colors/theme-colors light-bg dark-bg theme) :background-color (if blur? blur-bg (colors/theme-colors light-bg dark-bg theme))
:border-width 1 :border-width (if blur? 0 1)
:border-color (colors/theme-colors light-border dark-border theme) :border-color (colors/theme-colors light-border dark-border theme)
:flex-direction :row :flex-direction :row
:align-items :center :align-items :center
:padding-horizontal 8 :padding-horizontal 8
:padding-vertical 6 :padding-vertical 6
:justify-content :space-between})) :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.foundations.colors :as colors]
[quo2.theme :as quo.theme] [quo2.theme :as quo.theme]
[react-native.core :as rn] [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 (defn- internal-view
[{:keys [theme account-props networks state action on-press]}] []
[rn/view (let [state (reagent/atom :default)]
{:style (style/container state theme) (fn [{:keys [action blur? account-props networks on-press on-options-press theme]}]
:accessibility-label :container} [rn/pressable
[rn/view {:style (style/container {:state @state :blur? blur? :theme theme})
{:style {:flex-direction :row :on-press-in #(reset! state :pressed)
:align-items :center}} :on-press-out #(reset! state :default)
[account-avatar/view account-props] :on-press on-press
[rn/view {:style {:margin-left 8}} :accessibility-label :container}
[text/text [rn/view {:style style/left-container}
{:weight :semi-bold [account-avatar/view account-props]
:size :paragraph-2} [rn/view {:style {:margin-left 8}}
(:name account-props)] [text/text
[text/text {:size :paragraph-2} {:weight :semi-bold
(map (fn [network] :size :paragraph-2}
^{:key (str network)} (:name account-props)]
[text/text [text/text {:size :paragraph-2}
{:size :paragraph-2 (map (fn [network]
:style {:color (get colors/networks network)}} (str (subs (name network) 0 3) ":")]) ^{:key (str network)}
networks) [text/text
[text/text {:size :paragraph-2
{:size :paragraph-2 :style {:color (get colors/networks network)}} (str (subs (name network) 0 3) ":")])
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} networks)
(:address account-props)]]]] [text/text
(when (= action :icon) {:size :paragraph-2
[rn/pressable {:on-press on-press} :style {:color (if blur?
[icon/icon :i/options colors/white-opa-40
{:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme) (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}}
:accessibility-label :icon}]])]) (: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)) (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])) [status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:key :state [{:key :action
:type :select
:options [{:key :default}
{:key :pressed}]}
{:key :action
:type :select :type :select
:options [{:key :none} :options [{:key :none}
{:key :icon}]}]) {:key :icon}]}
{:key :blur?
:type :boolean}])
(defn view (defn view
[] []
(let [state (reagent/atom {:account-props {:customization-color :purple (let [state (reagent/atom {:account-props {:customization-color :purple
:size 32 :size 32
:emoji "🍑" :emoji "🍑"
:type :default :type :default
:name "Trip to Vegas" :name "Trip to Vegas"
:address "0x0ah...78b"} :address "0x0ah...78b"}
:networks [:ethereum :optimism] :networks [:ethereum :optimism]
:state :default :action :none
:action :none :on-press (fn [] (js/alert "Item pressed"))
:on-press (fn [] (js/alert "Button pressed"))})] :on-options-press (fn [] (js/alert "Options pressed"))
:blur? false})]
(fn [] (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]]))) [quo/account-list-card @state]])))