From 6c2b437e62be2e816cbb70121e0362415a166b89 Mon Sep 17 00:00:00 2001 From: Ibrahem Khalil Date: Wed, 1 Nov 2023 15:18:53 +0200 Subject: [PATCH] Follow up to fix color picker on wallet (#17748) --- src/quo/components/colors/color/style.cljs | 24 +++++++-------- .../components/colors/color_picker/view.cljs | 5 ++-- .../onboarding/create_profile/view.cljs | 13 +++----- .../create_or_edit_account/view.cljs | 8 +++-- .../contexts/wallet/create_account/view.cljs | 30 ++++++++++--------- src/utils/responsiveness.cljs | 10 +++++++ 6 files changed, 49 insertions(+), 41 deletions(-) create mode 100644 src/utils/responsiveness.cljs diff --git a/src/quo/components/colors/color/style.cljs b/src/quo/components/colors/color/style.cljs index 66d88de55c..fab66aff01 100644 --- a/src/quo/components/colors/color/style.cljs +++ b/src/quo/components/colors/color/style.cljs @@ -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?] diff --git a/src/quo/components/colors/color_picker/view.cljs b/src/quo/components/colors/color_picker/view.cljs index 8054a2830d..9e396cadad 100644 --- a/src/quo/components/colors/color_picker/view.cljs +++ b/src/quo/components/colors/color_picker/view.cljs @@ -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 diff --git a/src/status_im2/contexts/onboarding/create_profile/view.cljs b/src/status_im2/contexts/onboarding/create_profile/view.cljs index fcf097f744..3227b114a6 100644 --- a/src/status_im2/contexts/onboarding/create_profile/view.cljs +++ b/src/status_im2/contexts/onboarding/create_profile/view.cljs @@ -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 diff --git a/src/status_im2/contexts/wallet/common/screen_base/create_or_edit_account/view.cljs b/src/status_im2/contexts/wallet/common/screen_base/create_or_edit_account/view.cljs index 03e98b5a08..525247a396 100644 --- a/src/status_im2/contexts/wallet/common/screen_base/create_or_edit_account/view.cljs +++ b/src/status_im2/contexts/wallet/common/screen_base/create_or_edit_account/view.cljs @@ -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 diff --git a/src/status_im2/contexts/wallet/create_account/view.cljs b/src/status_im2/contexts/wallet/create_account/view.cljs index 023e276575..3705b5e2a0 100644 --- a/src/status_im2/contexts/wallet/create_account/view.cljs +++ b/src/status_im2/contexts/wallet/create_account/view.cljs @@ -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 diff --git a/src/utils/responsiveness.cljs b/src/utils/responsiveness.cljs new file mode 100644 index 0000000000..671cbf465c --- /dev/null +++ b/src/utils/responsiveness.cljs @@ -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))))