status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix input padding & add blur and override-theme properties 

Add with-let formatting style
This commit is contained in:
Ulises Manuel Cárdenas 2023-03-16 12:59:34 -06:00 committed by GitHub
parent 74da82c61a
commit 0e36190516
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 166 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.zprintrc
View File

@ -30,6 +30,7 @@
"list-comp" :binding "list-comp" :binding
"defview" :arg1-body "defview" :arg1-body
"letsubs" :binding "letsubs" :binding
"with-let" "let"
"testing" :arg1-body "testing" :arg1-body
"deftest-sub" :arg1-body "deftest-sub" :arg1-body
"wait-for" :arg1-body "wait-for" :arg1-body

143
src/quo2/components/inputs/input/style.cljs
View File

@ -2,82 +2,63 @@
(:require [quo2.components.markdown.text :as text] (:require [quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors])) [quo2.foundations.colors :as colors]))
(def variants-colors (defn variants-colors
"Colors that keep the same across input's status change" [blur? override-theme]
{:light {:label colors/neutral-50 (if blur?
:icon colors/neutral-50 {:label (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 override-theme)
:cursor (colors/custom-color :blue 50) :icon (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 override-theme)
:button-border colors/neutral-30 :button-border (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 override-theme)
:clear-icon colors/neutral-40 :password-icon (colors/theme-colors colors/neutral-100 colors/white override-theme)
:password-icon colors/neutral-50} :clear-icon (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 override-theme)
:light-blur {:label colors/neutral-80-opa-40 :cursor (colors/theme-colors (colors/custom-color :blue 50)
:icon colors/neutral-80-opa-70 colors/white
:cursor (colors/custom-color :blue 50) override-theme)}
:button-border colors/neutral-80-opa-30 {:label (colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)
:password-icon colors/neutral-100 :icon (colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)
:clear-icon colors/neutral-80-opa-30} :button-border (colors/theme-colors colors/neutral-30 colors/neutral-70 override-theme)
:dark {:label colors/neutral-40 :clear-icon (colors/theme-colors colors/neutral-40 colors/neutral-60 override-theme)
:icon colors/neutral-40 :password-icon (colors/theme-colors colors/neutral-50 colors/white override-theme)
:cursor (colors/custom-color :blue 60) :cursor (colors/theme-colors (colors/custom-color :blue 50)
:button-border colors/neutral-70 (colors/custom-color :blue 60)
:password-icon colors/white override-theme)}))
:clear-icon colors/neutral-60}
:dark-blur {:label colors/white-opa-40
:icon colors/white-opa-70
:cursor colors/white
:button-border colors/white-opa-10
:password-icon colors/white
:clear-icon colors/white-opa-10}})
(def status-colors (defn status-colors
{:light {:default {:border-color colors/neutral-20 [status blur? override-theme]
:placeholder colors/neutral-40 (if blur?
:text colors/neutral-100} (case status
:focus {:border-color colors/neutral-40 :focus
:placeholder colors/neutral-30 {:border-color (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40 override-theme)
:text colors/neutral-100} :placeholder (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 override-theme)
:error {:border-color colors/danger-opa-40 :text (colors/theme-colors colors/neutral-100 colors/white override-theme)}
:placeholder colors/neutral-40 :error
:text colors/neutral-100} {:border-color (colors/theme-colors colors/danger-opa-40 colors/danger-opa-40 override-theme)
:disabled {:border-color colors/neutral-20 :placeholder (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 override-theme)
:placeholder colors/neutral-40 :text (colors/theme-colors colors/neutral-100 colors/white override-theme)}
:text colors/neutral-40}} :disabled
:light-blur {:default {:border-color colors/neutral-80-opa-10 {:border-color (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 override-theme)
:placeholder colors/neutral-80-opa-40 :placeholder (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-20 override-theme)
:text colors/neutral-100} :text (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-20 override-theme)}
:focus {:border-color colors/neutral-80-opa-20 ;; :default
:placeholder colors/neutral-80-opa-20 {:border-color (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 override-theme)
:text colors/neutral-100} :placeholder (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 override-theme)
:error {:border-color colors/danger-opa-40 :text (colors/theme-colors colors/neutral-100 colors/white override-theme)})
:placeholder colors/neutral-80-opa-40 (case status
:text colors/neutral-100} :focus
:disabled {:border-color colors/neutral-80-opa-10 {:border-color (colors/theme-colors colors/neutral-40 colors/neutral-60 override-theme)
:placeholder colors/neutral-80-opa-30 :placeholder (colors/theme-colors colors/neutral-30 colors/neutral-60 override-theme)
:text colors/neutral-80-opa-30}} :text (colors/theme-colors colors/neutral-100 colors/white override-theme)}
:dark {:default {:border-color colors/neutral-80 :error
:placeholder colors/neutral-50 {:border-color (colors/theme-colors colors/danger-opa-40 colors/danger-opa-40 override-theme)
:text colors/white} :placeholder (colors/theme-colors colors/neutral-40 colors/white-opa-40 override-theme)
:focus {:border-color colors/neutral-60 :text (colors/theme-colors colors/neutral-100 colors/white override-theme)}
:placeholder colors/neutral-60 :disabled
:text colors/white} {:border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 override-theme)
:error {:border-color colors/danger-opa-40 :placeholder (colors/theme-colors colors/neutral-40 colors/neutral-40 override-theme)
:placeholder colors/white-opa-40 :text (colors/theme-colors colors/neutral-40 colors/neutral-40 override-theme)}
:text colors/white} ;; :default
:disabled {:border-color colors/neutral-80 {:border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 override-theme)
:placeholder colors/neutral-40 :placeholder (colors/theme-colors colors/neutral-40 colors/neutral-50 override-theme)
:text colors/neutral-40}} :text (colors/theme-colors colors/neutral-100 colors/white override-theme)})))
:dark-blur {:default {:border-color colors/white-opa-10
:placeholder colors/white-opa-40
:text colors/white}
:focus {:border-color colors/white-opa-40
:placeholder colors/white-opa-20
:text colors/white}
:error {:border-color colors/danger-opa-40
:placeholder colors/white-opa-40
:text colors/white}
:disabled {:border-color colors/white-opa-10
:placeholder colors/white-opa-20
:text colors/white-opa-20}}})
(defn input-container (defn input-container
[colors-by-status small? disabled?] [colors-by-status small? disabled?]
@ -90,11 +71,10 @@
(defn left-icon-container (defn left-icon-container
[small?] [small?]
{:margin-left (if small? 0 4) {:margin-left (if small? 0 4)
:margin-right (if small? 4 8) :margin-top (if small? 5 9)
:margin-top (if small? 5 9) :height 20
:height 20 :width 20})
:width 20})
(defn icon (defn icon
[colors-by-variant] [colors-by-variant]
@ -106,7 +86,8 @@
(merge (text/text-style {:size :paragraph-1 :weight :regular}) (merge (text/text-style {:size :paragraph-1 :weight :regular})
{:flex 1 {:flex 1
:text-align-vertical :top :text-align-vertical :top
:padding-horizontal 0 :padding-right 0
:padding-left (if small? 4 8)
:padding-vertical (if small? 4 8) :padding-vertical (if small? 4 8)
:color (:text colors-by-status)} :color (:text colors-by-status)}
(when-not multiple-lines? (when-not multiple-lines?

77
src/quo2/components/inputs/input/view.cljs
View File

@ -24,31 +24,31 @@
count-text]]])) count-text]]]))
(defn- left-accessory (defn- left-accessory
[{:keys [variant-colors small icon-name]}] [{:keys [variant-colors small? icon-name]}]
[rn/view {:style (style/left-icon-container small)} [rn/view {:style (style/left-icon-container small?)}
[icon/icon icon-name (style/icon variant-colors)]]) [icon/icon icon-name (style/icon variant-colors)]])
(defn- right-accessory (defn- right-accessory
[{:keys [variant-colors small disabled on-press icon-style-fn icon-name]}] [{:keys [variant-colors small? disabled? on-press icon-style-fn icon-name]}]
[rn/touchable-opacity [rn/touchable-opacity
{:style (style/right-icon-touchable-area small) {:style (style/right-icon-touchable-area small?)
:disabled disabled :disabled disabled?
:on-press on-press} :on-press on-press}
[icon/icon icon-name (icon-style-fn variant-colors)]]) [icon/icon icon-name (icon-style-fn variant-colors)]])
(defn- right-button (defn- right-button
[{:keys [variant-colors colors-by-status small disabled on-press text]}] [{:keys [variant-colors colors-by-status small? disabled? on-press text]}]
[rn/touchable-opacity [rn/touchable-opacity
{:style (style/button variant-colors small) {:style (style/button variant-colors small?)
:disabled disabled :disabled disabled?
:on-press on-press} :on-press on-press}
[rn/text {:style (style/button-text colors-by-status)} [rn/text {:style (style/button-text colors-by-status)}
text]]) text]])
(def ^:private custom-props (def ^:private custom-props
"Custom properties that must be removed from properties map passed to InputText." "Custom properties that must be removed from properties map passed to InputText."
[:type :variant :error :right-icon :left-icon :disabled :small :button :label [:type :blur? :override-theme :error? :right-icon :left-icon :disabled? :small? :button
:char-limit :on-char-limit-reach :icon-name]) :label :char-limit :on-char-limit-reach :icon-name :multiline?])
(defn- base-input (defn- base-input
[{:keys [on-change-text on-char-limit-reach]}] [{:keys [on-change-text on-char-limit-reach]}]
@ -67,16 +67,15 @@
(reset! char-count amount-chars) (reset! char-count amount-chars)
(when (>= amount-chars char-limit) (when (>= amount-chars char-limit)
(on-char-limit-reach amount-chars))))] (on-char-limit-reach amount-chars))))]
(fn [{:keys [variant error right-icon left-icon disabled small button label char-limit (fn [{:keys [blur? override-theme error? right-icon left-icon disabled? small? button
multiline clearable] label char-limit multiline? clearable?]
:or {variant :light}
:as props}] :as props}]
(let [status-path (cond (let [status-kw (cond
disabled :disabled disabled? :disabled
error :error error? :error
:else @status) :else @status)
colors-by-status (get-in style/status-colors [variant status-path]) colors-by-status (style/status-colors status-kw blur? override-theme)
variant-colors (style/variants-colors variant) variant-colors (style/variants-colors blur? override-theme)
clean-props (apply dissoc props custom-props)] clean-props (apply dissoc props custom-props)]
[rn/view [rn/view
(when (or label char-limit) (when (or label char-limit)
@ -85,38 +84,39 @@
:label label :label label
:current-chars @char-count :current-chars @char-count
:char-limit char-limit}]) :char-limit char-limit}])
[rn/view {:style (style/input-container colors-by-status small disabled)} [rn/view {:style (style/input-container colors-by-status small? disabled?)}
(when-let [{:keys [icon-name]} left-icon] (when-let [{:keys [icon-name]} left-icon]
[left-accessory [left-accessory
{:variant-colors variant-colors {:variant-colors variant-colors
:small small :small? small?
:icon-name icon-name}]) :icon-name icon-name}])
[rn/text-input [rn/text-input
(cond-> {:style (style/input colors-by-status small @multiple-lines?) (cond-> {:style (style/input colors-by-status small? @multiple-lines?)
:placeholder-text-color (:placeholder colors-by-status) :placeholder-text-color (:placeholder colors-by-status)
:cursor-color (:cursor variant-colors) :cursor-color (:cursor variant-colors)
:editable (not disabled) :editable (not disabled?)
:on-focus on-focus :on-focus on-focus
:on-blur on-blur} :on-blur on-blur}
:always (merge clean-props) :always (merge clean-props)
multiline (assoc :on-content-size-change set-multiple-lines!) multiline? (assoc :multiline true
char-limit (assoc :on-change-text #(update-char-limit! char-limit %)))] :on-content-size-change set-multiple-lines!)
char-limit (assoc :on-change-text #(update-char-limit! % char-limit)))]
(when-let [{:keys [on-press icon-name style-fn]} right-icon] (when-let [{:keys [on-press icon-name style-fn]} right-icon]
[right-accessory [right-accessory
{:variant-colors variant-colors {:variant-colors variant-colors
:small small :small? small?
:disabled disabled :disabled? disabled?
:icon-style-fn style-fn :icon-style-fn style-fn
:icon-name icon-name :icon-name icon-name
:on-press (fn [] :on-press (fn []
(when clearable (reset! char-count 0)) (when clearable? (reset! char-count 0))
(on-press))}]) (on-press))}])
(when-let [{:keys [on-press text]} button] (when-let [{:keys [on-press text]} button]
[right-button [right-button
{:colors-by-status colors-by-status {:colors-by-status colors-by-status
:variant-colors variant-colors :variant-colors variant-colors
:small small :small? small?
:disabled disabled :disabled? disabled?
:on-press on-press :on-press on-press
:text text}])]])))) :text text}])]]))))
@ -136,13 +136,14 @@
(defn input (defn input
"This input supports the following properties: "This input supports the following properties:
- :type - Can be `:text`(default) or `:password`. - :type - Can be `:text`(default) or `:password`.
- :variant - :light(default), :light-blur, :dark or :dark-blur. - :blur? - Boolean to set the blur color variant.
- :small - Boolean to specify if this input is rendered in its small version. - :override-theme - Can be `light` or `:dark`.
- :multiline - Boolean to specify if this input support multiple lines. - :small? - Boolean to specify if this input is rendered in its small version.
- :multiline? - Boolean to specify if this input support multiple lines.
- :icon-name - The name of an icon to display at the left of the input. - :icon-name - The name of an icon to display at the left of the input.
- :error - Boolean to specify it this input marks an error. - :error? - Boolean to specify it this input marks an error.
- :disabled - Boolean to specify if this input is disabled or not. - :disabled? - Boolean to specify if this input is disabled or not.
- :clearable - Booolean to specify if this input has a clear button at the end. - :clearable? - Booolean to specify if this input has a clear button at the end.
- :on-clear - Function executed when the clear button is pressed. - :on-clear - Function executed when the clear button is pressed.
- :button - Map containing `:on-press` & `:text` keys, if provided renders a button - :button - Map containing `:on-press` & `:text` keys, if provided renders a button
- :label - A label for this input. - :label - A label for this input.
@ -155,12 +156,12 @@
- :on-change-text - :on-change-text
... ...
" "
[{:keys [type clearable on-clear on-change-text icon-name] [{:keys [type clearable? on-clear on-change-text icon-name]
:or {type :text} :or {type :text}
:as props}] :as props}]
(let [base-props (cond-> props (let [base-props (cond-> props
icon-name (assoc-in [:left-icon :icon-name] icon-name) icon-name (assoc-in [:left-icon :icon-name] icon-name)
clearable (assoc :right-icon clearable? (assoc :right-icon
{:style-fn style/clear-icon {:style-fn style/clear-icon
:icon-name :i/clear :icon-name :i/clear
:on-press #(when on-clear (on-clear))}) :on-press #(when on-clear (on-clear))})

71
src/status_im2/contexts/onboarding/common/intro/view.cljs
View File

@ -51,41 +51,38 @@
(defn view (defn view
[] []
(reagent/with-let (reagent/with-let [carousel-index (reagent/atom 0)
[carousel-index (reagent/atom 0) interval-id (js/setInterval #(swap! carousel-index set-index)
interval-id 1500)]
(js/setInterval [rn/view {:style style/page-container}
#(swap! carousel-index set-index) [carousel @carousel-index]
1500)] [rn/image
[rn/view {:style style/page-container} {:style style/page-image
[carousel @carousel-index] :source (get-in carousels [@carousel-index :image])}]
[rn/image [quo/drawer-buttons
{:style style/page-image {:top-card {:on-press (fn []
:source (get-in carousels [@carousel-index :image])}] (rf/dispatch [:navigate-to :new-to-status])
[quo/drawer-buttons (rf/dispatch [:hide-terms-of-services-opt-in-screen]))
{:top-card {:on-press (fn [] :heading (i18n/label :t/sign-in)
(rf/dispatch [:navigate-to :new-to-status]) :accessibility-label :already-use-status-button}
(rf/dispatch [:hide-terms-of-services-opt-in-screen])) :bottom-card {:on-press (fn []
:heading (i18n/label :t/sign-in) (rf/dispatch [:navigate-to :new-to-status])
:accessibility-label :already-use-status-button} (rf/dispatch [:hide-terms-of-services-opt-in-screen]))
:bottom-card {:on-press (fn [] :heading (i18n/label :t/new-to-status)
(rf/dispatch [:navigate-to :new-to-status]) :accessibility-label :new-to-status-button}}
(rf/dispatch [:hide-terms-of-services-opt-in-screen])) (i18n/label :t/you-already-use-status)
:heading (i18n/label :t/new-to-status)
:accessibility-label :new-to-status-button}}
(i18n/label :t/you-already-use-status)
[quo/text
{:style style/text-container}
[quo/text [quo/text
{:size :paragraph-2 {:style style/text-container}
:style style/plain-text [quo/text
:weight :semi-bold} {:size :paragraph-2
(i18n/label :t/by-continuing-you-accept)] :style style/plain-text
[quo/text :weight :semi-bold}
{:on-press #(rf/dispatch [:open-modal :privacy-policy]) (i18n/label :t/by-continuing-you-accept)]
:size :paragraph-2 [quo/text
:style style/highlighted-text {:on-press #(rf/dispatch [:open-modal :privacy-policy])
:weight :semi-bold} :size :paragraph-2
(i18n/label :t/terms-of-service)]]]] :style style/highlighted-text
(finally :weight :semi-bold}
(js/clearInterval interval-id)))) (i18n/label :t/terms-of-service)]]]]
(finally
(js/clearInterval interval-id))))

66
src/status_im2/contexts/quo_preview/inputs/input.cljs
View File

@ -1,11 +1,10 @@
(ns status-im2.contexts.quo-preview.inputs.input (ns status-im2.contexts.quo-preview.inputs.input
(:require (:require [clojure.string :as string]
[clojure.string :as string] [quo2.core :as quo]
[quo2.core :as quo] [quo2.foundations.colors :as colors]
[quo2.foundations.colors :as colors] [react-native.core :as rn]
[react-native.core :as rn] [reagent.core :as reagent]
[reagent.core :as reagent] [status-im2.contexts.quo-preview.preview :as preview]))
[status-im2.contexts.quo-preview.preview :as preview]))
(def descriptor (def descriptor
[{:label "Type:" [{:label "Type:"
@ -15,31 +14,30 @@
:value "Text"} :value "Text"}
{:key :password {:key :password
:value "Password"}]} :value "Password"}]}
{:label "Variant:" {:label "Blur:"
:key :variant :key :blur?
:type :boolean}
{:label "Override Theme:"
:key :override-theme
:type :select :type :select
:options [{:key :light :options [{:key :dark
:value "Light"}
{:key :dark
:value "Dark"} :value "Dark"}
{:key :light-blur {:key :light
:value "Light blur"} :value "Light"}]}
{:key :dark-blur
:value "Dark blur"}]}
{:label "Error:" {:label "Error:"
:key :error :key :error?
:type :boolean} :type :boolean}
{:label "Icon:" {:label "Icon:"
:key :icon-name :key :icon-name
:type :boolean} :type :boolean}
{:label "Disabled:" {:label "Disabled:"
:key :disabled :key :disabled?
:type :boolean} :type :boolean}
{:label "Clearable:" {:label "Clearable:"
:key :clearable :key :clearable?
:type :boolean} :type :boolean}
{:label "Small:" {:label "Small:"
:key :small :key :small?
:type :boolean} :type :boolean}
{:label "Multiline:" {:label "Multiline:"
:key :multiline :key :multiline
@ -66,7 +64,8 @@
(defn cool-preview (defn cool-preview
[] []
(let [state (reagent/atom {:type :text (let [state (reagent/atom {:type :text
:variant :light-blur :blur false
:override-theme nil
:placeholder "Type something" :placeholder "Type something"
:error false :error false
:icon-name false :icon-name false
@ -75,29 +74,24 @@
:on-char-limit-reach #(js/alert :on-char-limit-reach #(js/alert
(str "Char limit reached: " %))})] (str "Char limit reached: " %))})]
(fn [] (fn []
(let [background-color (case (:variant @state) (let [blank-label? (string/blank? (:label @state))
:dark-blur "rgb(39, 61, 81)" icon? (boolean (:icon-name @state))
:dark colors/neutral-95 button-props {:on-press #(js/alert "Button pressed!")
:light-blur "rgb(233,247,247)" :text "My button"}]
:white)
blank-label? (string/blank? (:label @state))
icon? (boolean (:icon-name @state))
button-props {:on-press #(js/alert "Button pressed!")
:text "My button"}]
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:style {:padding-bottom 150}} [rn/view {:style {:padding-bottom 150}}
[rn/view {:style {:flex 1}} [rn/view {:style {:flex 1}}
[preview/customizer state descriptor]] [preview/customizer state descriptor]]
[rn/view [preview/blur-view
{:style {:flex 1 {:style {:flex 1
:align-items :center :align-items :center
:padding-vertical 60 :margin-vertical 20}
:background-color background-color}} :show-blur-background? (:blur? @state)}
[rn/view {:style {:width 300}} [rn/view {:style {:width 300}}
[quo/input [quo/input
(cond-> @state (cond-> @state
:always (assoc :always (assoc
:on-clear #(swap! state assoc :value "") :on-clear? #(swap! state assoc :value "")
:on-change-text #(swap! state assoc :value %)) :on-change-text #(swap! state assoc :value %))
(:button @state) (assoc :button button-props) (:button @state) (assoc :button button-props)
blank-label? (dissoc :label) blank-label? (dissoc :label)