Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Quo2: keypair blur #17294

Merged
merged 9 commits into from
Sep 25, 2023
Merged

Quo2: keypair blur #17294

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c8590af
account list card blur
OmarBasem Sep 13, 2023
49fdb2b
review
OmarBasem Sep 14, 2023
bfa5598
quo2: keypair blur
OmarBasem Sep 14, 2023
582f297
lint
OmarBasem Sep 15, 2023
acb0c49
lint
OmarBasem Sep 15, 2023
d622f0c
lint
OmarBasem Sep 15, 2023
fedd6f9
review
OmarBasem Sep 15, 2023
ce1c7e8
lint
OmarBasem Sep 25, 2023
d51b738
lint
OmarBasem Sep 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions ios/Podfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
17 changes: 11 additions & 6 deletions src/quo2/components/wallet/keypair/style.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
121 changes: 65 additions & 56 deletions src/quo2/components/wallet/keypair/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 18 additions & 7 deletions src/status_im2/contexts/quo_preview/wallet/keypair.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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"
Expand All @@ -84,21 +90,26 @@

(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
:justify-content :center}}
[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))})]]])))