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

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

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?
(if blur?
colors/white
(colors/theme-colors (colors/custom-color customization-color 50) (colors/theme-colors (colors/custom-color customization-color 50)
(colors/custom-color customization-color 60) (colors/custom-color customization-color 60)
theme) theme))
(colors/theme-colors colors/neutral-10 colors/neutral-80 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

View File

@ -25,7 +25,8 @@
(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]}]
(let [{:keys [full-name]} details]
(if (= type :default-keypair) (if (= type :default-keypair)
[user-avatar/user-avatar [user-avatar/user-avatar
{:full-name full-name {:full-name full-name
@ -33,12 +34,13 @@
:size :small :size :small
:customization-color customization-color}] :customization-color customization-color}]
[icon-avatar/icon-avatar [icon-avatar/icon-avatar
{:size :size/s-32 {:size :size-32
:icon :i/placeholder :icon :i/placeholder
:border? true}])) :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]}]
(let [{:keys [full-name]} details]
[rn/view [rn/view
{:style style/title-container {:style style/title-container
:accessibility-label :title} :accessibility-label :title}
@ -47,47 +49,54 @@
(if (= action :selector) (if (= action :selector)
[selectors/radio [selectors/radio
{:checked? selected? {:checked? selected?
:blur? blur?
:customization-color customization-color}] :customization-color customization-color}]
[rn/pressable {:on-press on-options-press} [rn/pressable {:on-press on-options-press}
[icon/icon :i/options [icon/icon :i/options
{:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme) {:color (if blur?
:accessibility-label :options-button}]])]) 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]}]
(let [{:keys [address]} details]
[rn/view [rn/view
{:style {:flex-direction :row {:style {:flex-direction :row
:align-items :center}} :align-items :center}}
[text/text [text/text
{:size :paragraph-2 {:size :paragraph-2
:accessibility-label :details :accessibility-label :details
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}} :style {:color (if blur?
colors/white-opa-40
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}}
(details-string address stored)] (details-string address stored)]
(when (= stored :on-keycard) (when (= stored :on-keycard)
[rn/view {:style {:margin-left 4}} [rn/view {:style {:margin-left 4}}
[icon/icon :i/keycard-card [icon/icon :i/keycard-card
{:size 16 {:size 16
:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}]])]) :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 @selected? customization-color theme) {:style (style/container (merge props {:selected? @selected?}))
: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 type full-name customization-color] [avatar props]
[rn/view [rn/view
{:style {:margin-left 8 {:style {:margin-left 8
:flex 1}} :flex 1}}
[title-view full-name action @selected? type customization-color on-options-press theme] [title-view (assoc props :selected? @selected?)]
[details-view address stored theme]]] [details-view props]]]
[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))

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))})]]])))