Make color selector take full 0device width to match Figma and add dynamic width (#17465)

This commit is contained in:
Ibrahem Khalil 2023-10-26 13:20:40 +03:00 committed by GitHub
parent df256bf2b4
commit 901644e023
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 65 additions and 34 deletions

View File

@ -0,0 +1,3 @@
(ns quo.components.colors.color.constants)
(def ^:const IPHONE_11_PRO_VIEWPORT_WIDTH 375)

View File

@ -1,24 +1,38 @@
(ns quo.components.colors.color.style (ns quo.components.colors.color.style
(:require (:require
[quo.components.colors.color.constants :as constants]
[quo.foundations.colors :as colors])) [quo.foundations.colors :as colors]))
(def color-button-common (defn color-button-common
{:width 48 [window-width]
:height 48 {:width 48
:border-width 4 :height 48
:border-radius 24 :border-width 4
:margin-horizontal 4 :border-radius 24
:transform [{:rotate "45deg"}] :margin-right (-> window-width
:border-color :transparent}) (- 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 (defn color-button
[color selected?] ([color selected?]
(merge color-button-common (color-button color selected? nil nil))
(when selected? ([color selected? idx window-width]
{:border-top-color (colors/alpha color 0.4) (merge (color-button-common window-width)
:border-end-color (colors/alpha color 0.4) (when selected?
:border-bottom-color (colors/alpha color 0.2) {:border-top-color (colors/alpha color 0.4)
:border-start-color (colors/alpha color 0.2)}))) :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 (defn color-circle
[color border?] [color border?]

View File

@ -19,7 +19,9 @@
selected? selected?
on-press on-press
blur? blur?
theme] theme
idx
window-width]
:as props}] :as props}]
(let [border? (and (not blur?) (not selected?)) (let [border? (and (not blur?) (not selected?))
hex-color (if (= :feng-shui color) hex-color (if (= :feng-shui color)
@ -29,7 +31,7 @@
theme))] theme))]
[rn/pressable [rn/pressable
{:style (style/color-button hex-color selected?) {:style (style/color-button hex-color selected? idx window-width)
:accessibility-label :color-picker-item :accessibility-label :color-picker-item
:on-press #(on-press color)} :on-press #(on-press color)}
(if (and (= :feng-shui color) (not selected?)) (if (and (= :feng-shui color) (not selected?))

View File

@ -17,20 +17,22 @@
- `default-selected` Default selected color name. - `default-selected` Default selected color name.
- `on-change` Callback called when a color is selected `(fn [color-name])`. - `on-change` Callback called when a color is selected `(fn [color-name])`.
- `blur?` Boolean to enable blur background support.}" - `blur?` Boolean to enable blur background support.}"
[{:keys [default-selected]}] [{:keys [default-selected window-width]}]
(let [selected (reagent/atom default-selected)] (let [selected (reagent/atom default-selected)]
(fn [{:keys [blur? on-change feng-shui? container-style]}] (fn [{:keys [blur? on-change feng-shui? container-style]}]
[rn/scroll-view [rn/scroll-view
{:horizontal true {:horizontal true
:shows-horizontal-scroll-indicator false :shows-horizontal-scroll-indicator false
:content-container-style container-style} :content-container-style container-style}
(doall (map (fn [color] (doall (map-indexed (fn [idx color]
[color/view [color/view
{:selected? (= color @selected) {:selected? (= color @selected)
:on-press #(on-change-handler selected % on-change) :on-press #(on-change-handler selected % on-change)
:blur? blur? :blur? blur?
:key color :key color
:color color}]) :color color
;; TODO: using :feng-shui? temporarily while b & w is being developed. :idx idx
;; https://github.com/status-im/status-mobile/discussions/16676 :window-width window-width}])
(if feng-shui? (conj color-list :feng-shui) color-list)))]))) ;; 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)))])))

View File

@ -2,6 +2,7 @@
(:require (:require
[clojure.string :as string] [clojure.string :as string]
[oops.core :as oops] [oops.core :as oops]
[quo.components.colors.color.constants :as constants]
[quo.core :as quo] [quo.core :as quo]
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[react-native.blur :as blur] [react-native.blur :as blur]
@ -33,6 +34,12 @@
(defn length-not-valid [s] (< (count (string/trim (str s))) min-length)) (defn length-not-valid [s] (< (count (string/trim (str s))) min-length))
(def scroll-view-height (reagent/atom 0)) (def scroll-view-height (reagent/atom 0))
(def content-container-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 (defn validation-message
[s] [s]
@ -131,7 +138,8 @@
{:keys [keyboard-shown keyboard-height]} (hooks/use-keyboard) {:keys [keyboard-shown keyboard-height]} (hooks/use-keyboard)
show-background? (show-button-background keyboard-height show-background? (show-button-background keyboard-height
keyboard-shown keyboard-shown
@content-scroll-y)] @content-scroll-y)
{window-width :width} (rn/get-window)]
[rn/view {:style style/page-container} [rn/view {:style style/page-container}
[quo/page-nav [quo/page-nav
{:margin-top navigation-bar-top {:margin-top navigation-bar-top
@ -194,11 +202,13 @@
{:size :paragraph-2 {:size :paragraph-2
:weight :medium :weight :medium
:style style/color-title} :style style/color-title}
(i18n/label :t/accent-colour)] (i18n/label :t/accent-colour)]]]
[quo/color-picker [quo/color-picker
{:blur? true {:blur? true
:default-selected :blue :default-selected :blue
:on-change on-change}]]]]] :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 [rn/keyboard-avoiding-view
{:style {:position :absolute {:style {:position :absolute