Make color selector take full 0device width to match Figma and add dynamic width (#17465)
This commit is contained in:
Ibrahem Khalil
GitHub
parent
df256bf2b4
commit
901644e023
|
|
@ -0,0 +1,3 @@
|
|||
(ns quo.components.colors.color.constants)
|
||||
|
||||
(def ^:const IPHONE_11_PRO_VIEWPORT_WIDTH 375)
|
||||
|
|
@ -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
|
||||
(defn color-button-common
|
||||
[window-width]
|
||||
{:width 48
|
||||
:height 48
|
||||
:border-width 4
|
||||
:border-radius 24
|
||||
:margin-horizontal 4
|
||||
: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
|
||||
([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)})))
|
||||
:border-start-color (colors/alpha color 0.2)}
|
||||
(when (zero? idx)
|
||||
{:margin-left -4})))))
|
||||
|
||||
(defn color-circle
|
||||
[color border?]
|
||||
|
|
|
|||
|
|
@ -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?))
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
(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}])
|
||||
: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)))])))
|
||||
|
|
|
|||
|
|
@ -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)]
|
||||
(i18n/label :t/accent-colour)]]]
|
||||
[quo/color-picker
|
||||
{:blur? true
|
||||
: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
|
||||
{:style {:position :absolute
|
||||
|
|
|
|||
Loading…
Reference in New Issue