From 901644e02336308585c0b063bad8ed1ec266dae1 Mon Sep 17 00:00:00 2001 From: Ibrahem Khalil Date: Thu, 26 Oct 2023 13:20:40 +0300 Subject: [PATCH] Make color selector take full 0device width to match Figma and add dynamic width (#17465) --- .../components/colors/color/constants.cljs | 3 ++ src/quo/components/colors/color/style.cljs | 44 ++++++++++++------- src/quo/components/colors/color/view.cljs | 6 ++- .../components/colors/color_picker/view.cljs | 24 +++++----- .../onboarding/create_profile/view.cljs | 22 +++++++--- 5 files changed, 65 insertions(+), 34 deletions(-) create mode 100644 src/quo/components/colors/color/constants.cljs diff --git a/src/quo/components/colors/color/constants.cljs b/src/quo/components/colors/color/constants.cljs new file mode 100644 index 0000000000..cd1f436db0 --- /dev/null +++ b/src/quo/components/colors/color/constants.cljs @@ -0,0 +1,3 @@ +(ns quo.components.colors.color.constants) + +(def ^:const IPHONE_11_PRO_VIEWPORT_WIDTH 375) diff --git a/src/quo/components/colors/color/style.cljs b/src/quo/components/colors/color/style.cljs index 1f79005491..66d88de55c 100644 --- a/src/quo/components/colors/color/style.cljs +++ b/src/quo/components/colors/color/style.cljs @@ -1,24 +1,38 @@ (ns quo.components.colors.color.style (:require + [quo.components.colors.color.constants :as constants] [quo.foundations.colors :as colors])) -(def color-button-common - {:width 48 - :height 48 - :border-width 4 - :border-radius 24 - :margin-horizontal 4 - :transform [{:rotate "45deg"}] - :border-color :transparent}) +(defn color-button-common + [window-width] + {:width 48 + :height 48 + :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. + (/ 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) + (+ 8)) ;Add same margin that's on Figma for 11 Pro, This value will increase + ;based on the device VW because of the division above. + :transform [{:rotate "45deg"}] + :border-color :transparent}) (defn color-button - [color selected?] - (merge color-button-common - (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)}))) + ([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}))))) (defn color-circle [color border?] diff --git a/src/quo/components/colors/color/view.cljs b/src/quo/components/colors/color/view.cljs index 0de44ec59f..51886c0520 100644 --- a/src/quo/components/colors/color/view.cljs +++ b/src/quo/components/colors/color/view.cljs @@ -19,7 +19,9 @@ selected? on-press blur? - theme] + theme + idx + window-width] :as props}] (let [border? (and (not blur?) (not selected?)) hex-color (if (= :feng-shui color) @@ -29,7 +31,7 @@ theme))] [rn/pressable - {:style (style/color-button hex-color selected?) + {:style (style/color-button hex-color selected? idx window-width) :accessibility-label :color-picker-item :on-press #(on-press color)} (if (and (= :feng-shui color) (not selected?)) diff --git a/src/quo/components/colors/color_picker/view.cljs b/src/quo/components/colors/color_picker/view.cljs index dda976d03d..8054a2830d 100644 --- a/src/quo/components/colors/color_picker/view.cljs +++ b/src/quo/components/colors/color_picker/view.cljs @@ -17,20 +17,22 @@ - `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]}] + [{:keys [default-selected window-width]}] (let [selected (reagent/atom default-selected)] (fn [{:keys [blur? on-change feng-shui? container-style]}] [rn/scroll-view {:horizontal true :shows-horizontal-scroll-indicator false :content-container-style container-style} - (doall (map (fn [color] - [color/view - {:selected? (= color @selected) - :on-press #(on-change-handler selected % on-change) - :blur? blur? - :key color - :color color}]) - ;; TODO: using :feng-shui? temporarily while b & w is being developed. - ;; https://github.com/status-im/status-mobile/discussions/16676 - (if feng-shui? (conj color-list :feng-shui) color-list)))]))) + (doall (map-indexed (fn [idx color] + [color/view + {:selected? (= color @selected) + :on-press #(on-change-handler selected % on-change) + :blur? blur? + :key color + :color color + :idx idx + :window-width window-width}]) + ;; TODO: using :feng-shui? temporarily while b & w is being developed. + ;; https://github.com/status-im/status-mobile/discussions/16676 + (if feng-shui? (conj color-list :feng-shui) color-list)))]))) diff --git a/src/status_im2/contexts/onboarding/create_profile/view.cljs b/src/status_im2/contexts/onboarding/create_profile/view.cljs index 1f52a0cd85..fcf097f744 100644 --- a/src/status_im2/contexts/onboarding/create_profile/view.cljs +++ b/src/status_im2/contexts/onboarding/create_profile/view.cljs @@ -2,6 +2,7 @@ (: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] @@ -33,6 +34,12 @@ (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] @@ -131,7 +138,8 @@ {:keys [keyboard-shown keyboard-height]} (hooks/use-keyboard) show-background? (show-button-background keyboard-height keyboard-shown - @content-scroll-y)] + @content-scroll-y) + {window-width :width} (rn/get-window)] [rn/view {:style style/page-container} [quo/page-nav {:margin-top navigation-bar-top @@ -194,11 +202,13 @@ {:size :paragraph-2 :weight :medium :style style/color-title} - (i18n/label :t/accent-colour)] - [quo/color-picker - {:blur? true - :default-selected :blue - :on-change on-change}]]]]] + (i18n/label :t/accent-colour)]]] + [quo/color-picker + {:blur? true + :default-selected :blue + :on-change on-change + :window-width window-width + :container-style {:padding-left (iphone-11-Pro-20-pixel-from-width window-width)}}]]] [rn/keyboard-avoiding-view {:style {:position :absolute