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

add account-selector component to sandbox (#13816) 

refactor to accomodate changes in colors ns

squashing everything

amending it

addressing feedback

using quo2/text component instead of rn/text

addressing feedback

fix namespaces

lint fix and removing unused resources

addressing design feedback

make lint happy

some animation progress in peaking accounts
This commit is contained in:
Siddarth Kumar 2022-09-20 19:21:13 +05:30 committed by GitHub
parent 8ba4f9ebae
commit f32781a8e9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 146 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/quo2/components/tabs/account_selector.cljs Normal file
View File

@ -0,0 +1,72 @@
(ns quo2.components.tabs.account-selector
(:require
[quo.theme :as theme]
[quo.react-native :as rn]
[quo2.foundations.colors :as colors]
[quo2.components.markdown.text :as quo2]))
(def themes
{:light {:default {:bg colors/neutral-10
:account-text colors/black
:label-text colors/neutral-50}
:transparent {:bg colors/neutral-80-opa-5
:account-text colors/black
:label-text colors/neutral-80-opa-40}}
:dark {:default {:bg colors/neutral-80-opa-80
:account-text colors/white
:label-text colors/neutral-40}
:transparent {:bg colors/white-opa-5
:account-text colors/white
:label-text colors/neutral-40}}})
(defn account-container-row [background-color]
{:padding-vertical 4
:flex-direction :row
:align-items :center
:background-color background-color
:border-radius 12})
(def account-emoji
{:height 16
:width 16})
(def account-emoji-container
{:background-color (colors/custom-color :purple 50)
:padding 8
:justify-content :center
:align-items :center
:border-radius 10
:margin-left 4
:margin-right 8})
(defn get-color-by-type [type key]
(get-in themes [(theme/get-theme) type key]))
(defn account-selector
"[account-selector opts]
opts
{:show-label? true/false ;; hide or show the label
:transparent? true/false ;; implement transparent background styles
:style style ;; any other styling can be passed
:label-text \"Label\" ;; content to show where the label should be shown
:account-text \"My Savings\" ;; content in place of account name
}"
[{:keys [show-label? account-text account-emoji transparent? label-text style]}]
(let [background-color (get-color-by-type (if transparent? :transparent :default) :bg)
account-text-color (get-color-by-type (if transparent? :transparent :default) :account-text)
label-text-color (get-color-by-type (if transparent? :transparent :default) :label-text)]
[rn/view {:style style}
(when show-label? [quo2/text {:weight :medium
:size :paragraph-2
:style {:color label-text-color
:margin-bottom 8}}
label-text])
[rn/view {:style (account-container-row background-color)}
[rn/view {:style account-emoji-container}
[quo2/text account-emoji]]
[quo2/text {:weight :medium
:size :paragraph-1
:style {:color account-text-color}}
account-text]]]))

6
src/quo2/screens/main.cljs
View File

@ -34,6 +34,7 @@
[quo2.screens.info.lowest-price :as lowest-price]
[quo2.screens.avatars.channel-avatar :as channel-avatar]
[quo2.screens.switcher.switcher-cards :as switcher-cards]
[quo2.screens.tabs.account-selector :as account-selector]
[re-frame.core :as re-frame]))
(def screens-categories
@ -93,7 +94,10 @@
:component segmented/preview-segmented}
{:name :tabs
:insets {:top false}
:component tabs/preview-tabs}]
:component tabs/preview-tabs}
{:name :account-selector
:insets {:top false}
:component account-selector/preview-this}]
:tags [{:name :context-tags
:insets {:top false}
:component context-tags/preview-context-tags}

69
src/quo2/screens/tabs/account_selector.cljs Normal file
View File

@ -0,0 +1,69 @@
(ns quo2.screens.tabs.account-selector
(:require [quo.react-native :as rn]
[quo.previews.preview :as preview]
[reagent.core :as reagent]
[quo2.foundations.colors :as colors]
[quo2.components.tabs.account-selector :as quo2]))
(def descriptor [{:label "Show Label?:"
:key :show-label?
:type :boolean}
{:label "Transparent Background?:"
:key :transparent?
:type :boolean}
{:label "Account Text"
:key :account-text
:type :text}
{:label "Label Text"
:key :label-text
:type :text}])
;; keeping this unused data structure in the code for now
;; will reference them when I introduce multiple account support
;; and allow passing lists of accounts instead of just 1 account
(def single-account
[{:account-text "My Savings"
:account-emoji "🍑"
:label-text "Label"}])
(def two-accounts
[{:account-text "My Savings"
:account-emoji "🍑"
:label-text "Label"}
{:account-text "My Current"
:account-emoji "🍎"
:label-text "Label 2"}])
(def many-accounts
[{:account-text "My Savings"
:account-emoji "🍑"
:label-text "Label"}
{:account-text "My Current"
:account-emoji "🍎"
:label-text "Label 2"}
{:account-text "My Reimbursment"
:account-emoji "🍟"
:label-text "Label 3"}])
(defn cool-preview []
(let [state (reagent/atom {:show-label? true
:transparent? false
:style {:width :100%}
:account-text "My Savings"
:account-emoji "🍑"
:label-text "Label"})]
(fn []
[rn/view {:margin-bottom 50
:padding 16}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60
:align-items :center}
[quo2/account-selector @state]]])))
(defn preview-this []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1}
[rn/flat-list {:flex 1
:keyboardShouldPersistTaps :always
:header [cool-preview]
:key-fn str}]])