status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.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 RNLanguages: 962e562af0d34ab1958d89bcfdb64fafc37c513e
RNPermissions: ad71dd4f767ec254f2cd57592fbee02afee75467 RNPermissions: ad71dd4f767ec254f2cd57592fbee02afee75467
RNReactNativeHapticFeedback: 2566b468cc8d0e7bb2f84b23adc0f4614594d071 RNReactNativeHapticFeedback: 2566b468cc8d0e7bb2f84b23adc0f4614594d071
<<<<<<< HEAD
<<<<<<< HEAD
RNReanimated: 43adb0307a62c1ce9694f36f124ca3b51a15272a RNReanimated: 43adb0307a62c1ce9694f36f124ca3b51a15272a
=======
RNReanimated: 06a228c5a245ef7b5b03f0efc29d76ce4db9031c
>>>>>>> c50db2fd2 (lint)
=======
RNReanimated: d0db0ee059c33381bca787a2193c27e52750ccaf
>>>>>>> a52fda25e (lint)
RNShare: d82e10f6b7677f4b0048c23709bd04098d5aee6c RNShare: d82e10f6b7677f4b0048c23709bd04098d5aee6c
RNStaticSafeAreaInsets: 055ddbf5e476321720457cdaeec0ff2ba40ec1b8 RNStaticSafeAreaInsets: 055ddbf5e476321720457cdaeec0ff2ba40ec1b8
RNSVG: 80584470ff1ffc7994923ea135a3e5ad825546b9 RNSVG: 80584470ff1ffc7994923ea135a3e5ad825546b9

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

@ -2,14 +2,19 @@
(:require [quo2.foundations.colors :as colors])) (:require [quo2.foundations.colors :as colors]))
(defn container (defn container
[selected? customization-color theme] [{:keys [blur? customization-color theme selected?]}]
{:border-radius 20 {:flex 1
:border-radius 20
:border-width 1 :border-width 1
:border-color (if selected? :border-color (if selected?
(colors/theme-colors (colors/custom-color customization-color 50) (if blur?
(colors/custom-color customization-color 60) colors/white
theme) (colors/theme-colors (colors/custom-color customization-color 50)
(colors/theme-colors colors/neutral-10 colors/neutral-80 theme)) (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}) :padding-bottom 8})
(def header-container (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)))) (if (= stored :on-device) (i18n/label :t/on-device) (i18n/label :t/on-keycard))))
(defn avatar (defn avatar
[type full-name customization-color] [{:keys [type details customization-color]}]
(if (= type :default-keypair) (let [{:keys [full-name]} details]
[user-avatar/user-avatar (if (= type :default-keypair)
{:full-name full-name [user-avatar/user-avatar
:ring? true {:full-name full-name
:size :small :ring? true
:customization-color customization-color}] :size :small
[icon-avatar/icon-avatar :customization-color customization-color}]
{:size :size/s-32 [icon-avatar/icon-avatar
:icon :i/placeholder {:size :size-32
:border? true}])) :icon :i/placeholder
:border? true}])))
(defn title-view (defn title-view
[full-name action selected? type customization-color on-options-press theme] [{:keys [details action selected? type blur? customization-color on-options-press theme]}]
[rn/view (let [{:keys [full-name]} details]
{:style style/title-container [rn/view
:accessibility-label :title} {:style style/title-container
[text/text {:weight :semi-bold} :accessibility-label :title}
(if (= type :default-keypair) (keypair-string full-name) full-name)] [text/text {:weight :semi-bold}
(if (= action :selector) (if (= type :default-keypair) (keypair-string full-name) full-name)]
[selectors/radio (if (= action :selector)
{:checked? selected? [selectors/radio
:customization-color customization-color}] {:checked? selected?
[rn/pressable {:on-press on-options-press} :blur? blur?
[icon/icon :i/options :customization-color customization-color}]
{:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme) [rn/pressable {:on-press on-options-press}
:accessibility-label :options-button}]])]) [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 (defn details-view
[address stored theme] [{:keys [details stored blur? theme]}]
[rn/view (let [{:keys [address]} details]
{:style {:flex-direction :row [rn/view
:align-items :center}} {:style {:flex-direction :row
[text/text :align-items :center}}
{:size :paragraph-2 [text/text
:accessibility-label :details {:size :paragraph-2
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} :accessibility-label :details
(details-string address stored)] :style {:color (if blur?
(when (= stored :on-keycard) colors/white-opa-40
[rn/view {:style {:margin-left 4}} (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}}
[icon/icon :i/keycard-card (details-string address stored)]
{:size 16 (when (= stored :on-keycard)
:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}]])]) [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 (defn- view-internal
[] []
(let [selected? (reagent/atom true)] (let [selected? (reagent/atom true)]
(fn [{:keys [theme accounts customization-color type details stored action on-options-press]}] (fn [{:keys [accounts action] :as props}]
(let [{:keys [address full-name]} details] [rn/pressable
[rn/pressable {:style (style/container (merge props {:selected? @selected?}))
{:style (style/container @selected? customization-color theme) :on-press #(when (= action :selector) (reset! selected? (not @selected?)))}
:on-press #(when (= action :selector) (reset! selected? (not @selected?)))} [rn/view {:style style/header-container}
[rn/view {:style style/header-container} [avatar props]
[avatar type full-name customization-color] [rn/view
[rn/view {:style {:margin-left 8
{:style {:margin-left 8 :flex 1}}
:flex 1}} [title-view (assoc props :selected? @selected?)]
[title-view full-name action @selected? type customization-color on-options-press theme] [details-view props]]]
[details-view address stored theme]]] [rn/flat-list
[rn/flat-list {:data accounts
{:data accounts :render-fn account-list-card/view
:render-fn account-list-card/view :separator [rn/view {:style {:height 8}}]
:separator [rn/view {:style {:height 8}}] :style {:padding-horizontal 8}}]])))
:style {:padding-horizontal 8}}]]))))
(def view (quo.theme/with-theme view-internal)) (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 :state :default
:action :none}]) :action :none}])
(defn get-accounts
[blur?]
(map (fn [account] (assoc account :blur? blur?)) accounts))
(def descriptor (def descriptor
[{:label "Stored:" [{:label "Stored:"
:key :stored :key :stored
@ -74,7 +78,9 @@
:value "Default keypair"} :value "Default keypair"}
{:key :other {:key :other
:value "Other"}]} :value "Other"}]}
(preview/customization-color-option)]) (preview/customization-color-option)
{:key :blur?
:type :boolean}])
(def default-details (def default-details
{:full-name "John Doe" {:full-name "John Doe"
@ -84,16 +90,20 @@
(defn preview (defn preview
[] []
(let [state (reagent/atom {:accounts accounts (let [state (reagent/atom {:customization-color :blue
:customization-color :blue
:type :default-keypair :type :default-keypair
:stored :on-device :stored :on-device
:on-options-press #(js/alert "Options pressed") :on-options-press #(js/alert "Options pressed")
:action :selector})] :action :selector
:blur? false})]
(fn [] (fn []
[preview/preview-container [preview/preview-container
{:state state {:state state
:descriptor descriptor} :descriptor descriptor
:blur? (:blur? @state)
:show-blur-background? true
:blur-dark-only? true
:blur-height 400}
[rn/view [rn/view
{:style {:padding-vertical 30 {:style {:padding-vertical 30
:flex-direction :row :flex-direction :row
@ -101,4 +111,5 @@
[quo/keypair [quo/keypair
(merge (merge
@state @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))})]]])))