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: keypair blur (#17294) 

* quo2: keypair blur
This commit is contained in:
Omar Basem 2023-09-25 08:32:04 +04:00 committed by GitHub
parent 08689e568a
commit 1aadffd300
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 102 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ios/Podfile.lock
View File

@ -772,7 +772,15 @@ SPEC CHECKSUMS:
RNLanguages: 962e562af0d34ab1958d89bcfdb64fafc37c513e
RNPermissions: ad71dd4f767ec254f2cd57592fbee02afee75467
RNReactNativeHapticFeedback: 2566b468cc8d0e7bb2f84b23adc0f4614594d071
<<<<<<< HEAD
<<<<<<< HEAD
RNReanimated: 43adb0307a62c1ce9694f36f124ca3b51a15272a
=======
RNReanimated: 06a228c5a245ef7b5b03f0efc29d76ce4db9031c
>>>>>>> c50db2fd2 (lint)
=======
RNReanimated: d0db0ee059c33381bca787a2193c27e52750ccaf
>>>>>>> a52fda25e (lint)
RNShare: d82e10f6b7677f4b0048c23709bd04098d5aee6c
RNStaticSafeAreaInsets: 055ddbf5e476321720457cdaeec0ff2ba40ec1b8
RNSVG: 80584470ff1ffc7994923ea135a3e5ad825546b9

17
src/quo2/components/wallet/keypair/style.cljs
View File

@ -2,14 +2,19 @@
(:require [quo2.foundations.colors :as colors]))
(defn container
[selected? customization-color theme]
{:border-radius 20
[{:keys [blur? customization-color theme selected?]}]
{:flex 1
:border-radius 20
:border-width 1
:border-color (if selected?
(colors/theme-colors (colors/custom-color customization-color 50)
(colors/custom-color customization-color 60)
theme)
(colors/theme-colors colors/neutral-10 colors/neutral-80 theme))
(if blur?
colors/white
(colors/theme-colors (colors/custom-color customization-color 50)
(colors/custom-color customization-color 60)
theme))
(if blur?
colors/white-opa-5
(colors/theme-colors colors/neutral-10 colors/neutral-80 theme)))
:padding-bottom 8})
(def header-container

121
src/quo2/components/wallet/keypair/view.cljs
View File

@ -25,69 +25,78 @@
(if (= stored :on-device) (i18n/label :t/on-device) (i18n/label :t/on-keycard))))
(defn avatar
[type full-name customization-color]
(if (= type :default-keypair)
[user-avatar/user-avatar
{:full-name full-name
:ring? true
:size :small
:customization-color customization-color}]
[icon-avatar/icon-avatar
{:size :size/s-32
:icon :i/placeholder
:border? true}]))
[{:keys [type details customization-color]}]
(let [{:keys [full-name]} details]
(if (= type :default-keypair)
[user-avatar/user-avatar
{:full-name full-name
:ring? true
:size :small
:customization-color customization-color}]
[icon-avatar/icon-avatar
{:size :size-32
:icon :i/placeholder
:border? true}])))
(defn title-view
[full-name action selected? type customization-color on-options-press theme]
[rn/view
{:style style/title-container
:accessibility-label :title}
[text/text {:weight :semi-bold}
(if (= type :default-keypair) (keypair-string full-name) full-name)]
(if (= action :selector)
[selectors/radio
{:checked? selected?
:customization-color customization-color}]
[rn/pressable {:on-press on-options-press}
[icon/icon :i/options
{:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
:accessibility-label :options-button}]])])
[{:keys [details action selected? type blur? customization-color on-options-press theme]}]
(let [{:keys [full-name]} details]
[rn/view
{:style style/title-container
:accessibility-label :title}
[text/text {:weight :semi-bold}
(if (= type :default-keypair) (keypair-string full-name) full-name)]
(if (= action :selector)
[selectors/radio
{:checked? selected?
:blur? blur?
:customization-color customization-color}]
[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 :options-button}]])]))
(defn details-view
[address stored theme]
[rn/view
{:style {:flex-direction :row
:align-items :center}}
[text/text
{:size :paragraph-2
:accessibility-label :details
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
(details-string address stored)]
(when (= stored :on-keycard)
[rn/view {:style {:margin-left 4}}
[icon/icon :i/keycard-card
{:size 16
:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}]])])
[{:keys [details stored blur? theme]}]
(let [{:keys [address]} details]
[rn/view
{:style {:flex-direction :row
:align-items :center}}
[text/text
{:size :paragraph-2
:accessibility-label :details
:style {:color (if blur?
colors/white-opa-40
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}}
(details-string address stored)]
(when (= stored :on-keycard)
[rn/view {:style {:margin-left 4}}
[icon/icon :i/keycard-card
{:size 16
:color (if blur?
colors/white-opa-40
(colors/theme-colors colors/neutral-50 colors/neutral-40))}]])]))
(defn- view-internal
[]
(let [selected? (reagent/atom true)]
(fn [{:keys [theme accounts customization-color type details stored action on-options-press]}]
(let [{:keys [address full-name]} details]
[rn/pressable
{:style (style/container @selected? customization-color theme)
:on-press #(when (= action :selector) (reset! selected? (not @selected?)))}
[rn/view {:style style/header-container}
[avatar type full-name customization-color]
[rn/view
{:style {:margin-left 8
:flex 1}}
[title-view full-name action @selected? type customization-color on-options-press theme]
[details-view address stored theme]]]
[rn/flat-list
{:data accounts
:render-fn account-list-card/view
:separator [rn/view {:style {:height 8}}]
:style {:padding-horizontal 8}}]]))))
(fn [{:keys [accounts action] :as props}]
[rn/pressable
{:style (style/container (merge props {:selected? @selected?}))
:on-press #(when (= action :selector) (reset! selected? (not @selected?)))}
[rn/view {:style style/header-container}
[avatar props]
[rn/view
{:style {:margin-left 8
:flex 1}}
[title-view (assoc props :selected? @selected?)]
[details-view props]]]
[rn/flat-list
{:data accounts
:render-fn account-list-card/view
:separator [rn/view {:style {:height 8}}]
:style {:padding-horizontal 8}}]])))
(def view (quo.theme/with-theme view-internal))

25
src/status_im2/contexts/quo_preview/wallet/keypair.cljs
View File

@ -52,6 +52,10 @@
:state :default
:action :none}])
(defn get-accounts
[blur?]
(map (fn [account] (assoc account :blur? blur?)) accounts))
(def descriptor
[{:label "Stored:"
:key :stored
@ -74,7 +78,9 @@
:value "Default keypair"}
{:key :other
:value "Other"}]}
(preview/customization-color-option)])
(preview/customization-color-option)
{:key :blur?
:type :boolean}])
(def default-details
{:full-name "John Doe"
@ -84,16 +90,20 @@
(defn preview
[]
(let [state (reagent/atom {:accounts accounts
:customization-color :blue
(let [state (reagent/atom {:customization-color :blue
:type :default-keypair
:stored :on-device
:on-options-press #(js/alert "Options pressed")
:action :selector})]
:action :selector
:blur? false})]
(fn []
[preview/preview-container
{:state state
:descriptor descriptor}
{:state state
:descriptor descriptor
:blur? (:blur? @state)
:show-blur-background? true
:blur-dark-only? true
:blur-height 400}
[rn/view
{:style {:padding-vertical 30
:flex-direction :row
@ -101,4 +111,5 @@
[quo/keypair
(merge
@state
{:details (if (= (:type @state) :default-keypair) default-details other-details)})]]])))
{:details (if (= (:type @state) :default-keypair) default-details other-details)
:accounts (get-accounts (:blur? @state))})]]])))