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

Follow up to fix color picker on wallet (#17748)

This commit is contained in:
Ibrahem Khalil 2023-11-01 15:18:53 +02:00 committed by GitHub
parent 94a3e266a9
commit 6c2b437e62
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 49 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/quo/components/colors/color/style.cljs
View File

@ -1,7 +1,7 @@
(ns quo.components.colors.color.style
(:require
[quo.components.colors.color.constants :as constants]
[quo.foundations.colors :as colors]))
[quo.foundations.colors :as colors]
[utils.responsiveness :as responsiveness]))
(defn color-button-common
[window-width]
@ -10,9 +10,9 @@
:border-width 4
:border-radius 24
:margin-right (-> window-width
(- constants/IPHONE_11_PRO_VIEWPORT_WIDTH) ;We want the design to be 100%
;identical to Figma on iPhone 11
;Pro, So we're using it's VW here.
(- responsiveness/IPHONE_11_PRO_VIEWPORT_WIDTH) ;We want the design to be 100%
;identical to Figma on iPhone 11
;Pro, So we're using it's VW here.
(/ 6) ;Dividing by an appropriate factor to get a reasonable value for each VW
;on other devices (This will yield 0 on iPhone 11 Pro, Which is what we
;want)
@ -25,14 +25,12 @@
([color selected?]
(color-button color selected? nil nil))
([color selected? idx window-width]
(merge (color-button-common window-width)
(when selected?
{:border-top-color (colors/alpha color 0.4)
:border-end-color (colors/alpha color 0.4)
:border-bottom-color (colors/alpha color 0.2)
:border-start-color (colors/alpha color 0.2)}
(when (zero? idx)
{:margin-left -4})))))
(cond-> (color-button-common window-width)
selected? (assoc :border-top-color (colors/alpha color 0.4)
:border-end-color (colors/alpha color 0.4)
:border-bottom-color (colors/alpha color 0.2)
:border-start-color (colors/alpha color 0.2))
(zero? idx) (assoc :margin-left -4))))
(defn color-circle
[color border?]

5
src/quo/components/colors/color_picker/view.cljs
View File

@ -17,8 +17,9 @@
- `default-selected` Default selected color name.
- `on-change` Callback called when a color is selected `(fn [color-name])`.
- `blur?` Boolean to enable blur background support.}"
[{:keys [default-selected window-width]}]
(let [selected (reagent/atom default-selected)]
[{:keys [default-selected]}]
(let [selected (reagent/atom default-selected)
{window-width :width} (rn/get-window)]
(fn [{:keys [blur? on-change feng-shui? container-style]}]
[rn/scroll-view
{:horizontal true

13
src/status_im2/contexts/onboarding/create_profile/view.cljs
View File

@ -2,7 +2,6 @@
(:require
[clojure.string :as string]
[oops.core :as oops]
[quo.components.colors.color.constants :as constants]
[quo.core :as quo]
[quo.foundations.colors :as colors]
[react-native.blur :as blur]
@ -15,7 +14,8 @@
[status-im2.contexts.onboarding.create-profile.style :as style]
[status-im2.contexts.onboarding.select-photo.method-menu.view :as method-menu]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
[utils.re-frame :as rf]
[utils.responsiveness :as responsiveness]))
;; NOTE - validation should match with Desktop
;; https://github.com/status-im/status-desktop/blob/2ba96803168461088346bf5030df750cb226df4c/ui/imports/utils/Constants.qml#L468
@ -34,12 +34,6 @@
(defn length-not-valid [s] (< (count (string/trim (str s))) min-length))
(def scroll-view-height (reagent/atom 0))
(def content-container-height (reagent/atom 0))
(defn iphone-11-Pro-20-pixel-from-width
[window-width]
;; Divide iPhone 11 Pro VW by the desired value
(let [calculate-ratio (/ constants/IPHONE_11_PRO_VIEWPORT_WIDTH 20)]
;; Divide window width by the ratio to get a dynamic value. Based on the VW width
(int (/ window-width calculate-ratio))))
(defn validation-message
[s]
@ -208,7 +202,8 @@
:default-selected :blue
:on-change on-change
:window-width window-width
:container-style {:padding-left (iphone-11-Pro-20-pixel-from-width window-width)}}]]]
:container-style {:padding-left (responsiveness/iphone-11-Pro-20-pixel-from-width
window-width)}}]]]
[rn/keyboard-avoiding-view
{:style {:position :absolute

8
src/status_im2/contexts/wallet/common/screen_base/create_or_edit_account/view.cljs
View File

@ -12,8 +12,9 @@
on-change-color
on-change-emoji section-label bottom-action? bottom-action-label bottom-action-props
custom-bottom-action]} & children]
(let [{:keys [top bottom]} (safe-area/get-insets)
margin-top (if (false? margin-top?) 0 top)]
(let [{:keys [top bottom]} (safe-area/get-insets)
margin-top (if (false? margin-top?) 0 top)
{window-width :width} (rn/get-window)]
[rn/keyboard-avoiding-view
{:style (style/root-container margin-top)
:keyboard-vertical-offset (- bottom)}
@ -58,7 +59,8 @@
[quo/color-picker
{:default-selected account-color
:on-change on-change-color
:container-style style/color-picker}]]
:container-style style/color-picker
:window-width window-width}]]
[quo/divider-line {:container-style style/divider-2}]
(when section-label
[quo/section-label

30
src/status_im2/contexts/wallet/create_account/view.cljs
View File

@ -9,7 +9,8 @@
[status-im2.contexts.wallet.common.utils :as utils]
[status-im2.contexts.wallet.create-account.style :as style]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
[utils.re-frame :as rf]
[utils.responsiveness :refer [iphone-11-Pro-20-pixel-from-width]]))
(def diamond-emoji "\uD83D\uDC8E")
@ -40,17 +41,18 @@
(defn- view-internal
[]
(let [top (safe-area/get-top)
bottom (safe-area/get-bottom)
account-color (reagent/atom :blue)
emoji (reagent/atom diamond-emoji)
number-of-accounts (count (rf/sub [:profile/wallet-accounts]))
account-name (reagent/atom (i18n/label :t/default-account-name
{:number (inc number-of-accounts)}))
derivation-path (reagent/atom (utils/get-derivation-path number-of-accounts))
{:keys [public-key]} (rf/sub [:profile/profile])
on-change-text #(reset! account-name %)
display-name (first (rf/sub [:contacts/contact-two-names-by-identity public-key]))]
(let [top (safe-area/get-top)
bottom (safe-area/get-bottom)
account-color (reagent/atom :blue)
emoji (reagent/atom diamond-emoji)
number-of-accounts (count (rf/sub [:profile/wallet-accounts]))
account-name (reagent/atom (i18n/label :t/default-account-name
{:number (inc number-of-accounts)}))
derivation-path (reagent/atom (utils/get-derivation-path number-of-accounts))
{:keys [public-key]} (rf/sub [:profile/profile])
on-change-text #(reset! account-name %)
display-name (first (rf/sub [:contacts/contact-two-names-by-identity public-key]))
{window-width :width} (rn/get-window)]
(fn [{:keys [theme]}]
[rn/view
{:style {:flex 1
@ -100,8 +102,8 @@
[quo/color-picker
{:default-selected @account-color
:on-change #(reset! account-color %)
:container-style {:padding-horizontal 12
:padding-vertical 12}}]]
:container-style {:padding-vertical 12
:padding-left (iphone-11-Pro-20-pixel-from-width window-width)}}]]
[quo/divider-line]
[quo/category
{:list-type :settings

10
src/utils/responsiveness.cljs Normal file
View File

@ -0,0 +1,10 @@
(ns utils.responsiveness)
(def ^:const IPHONE_11_PRO_VIEWPORT_WIDTH 375)
(defn iphone-11-Pro-20-pixel-from-width
[window-width]
;; Divide iPhone 11 Pro VW by the desired value
(let [calculate-ratio (/ IPHONE_11_PRO_VIEWPORT_WIDTH 20)]
;; Divide window width by the ratio to get a dynamic value. Based on the VW width
(int (/ window-width calculate-ratio))))