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
(: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?]

View File

@ -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?))

View File

@ -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)))])))

View File

@ -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