diff --git a/doc/new-guidelines.md b/doc/new-guidelines.md index d05058da7c3c..008005caf1a3 100644 --- a/doc/new-guidelines.md +++ b/doc/new-guidelines.md @@ -116,6 +116,20 @@ deref'ed atoms. {:background-color (colors/theme-colors colors/white colors/neutral-90)}) ``` +### Custom Colors + +The Status designs have a lot of customization of user and group colors with components and pages. For consistency it is best to use `customization-color` as the prop key on pages and components. This will help easily identify what pages and components in the application are using customized colors. + +```clojure +;; bad +(defn community-card [{keys [custom-color]}] + ...) + +;; good +(defn community-card [{keys [customization-color]}] + ...) +``` + ### Using TODOs comments _TODO_ comments are used extensively in the codebase, but prefer to use them diff --git a/src/quo2/components/input/style.cljs b/src/quo2/components/inputs/input/style.cljs similarity index 99% rename from src/quo2/components/input/style.cljs rename to src/quo2/components/inputs/input/style.cljs index 0df55f5a3595..3fc136a19c66 100644 --- a/src/quo2/components/input/style.cljs +++ b/src/quo2/components/inputs/input/style.cljs @@ -1,4 +1,4 @@ -(ns quo2.components.input.style +(ns quo2.components.inputs.input.style (:require [quo2.components.markdown.text :as text] [quo2.foundations.colors :as colors])) diff --git a/src/quo2/components/input/view.cljs b/src/quo2/components/inputs/input/view.cljs similarity index 98% rename from src/quo2/components/input/view.cljs rename to src/quo2/components/inputs/input/view.cljs index eb86dffefb14..15702ccf9760 100644 --- a/src/quo2/components/input/view.cljs +++ b/src/quo2/components/inputs/input/view.cljs @@ -1,7 +1,7 @@ -(ns quo2.components.input.view +(ns quo2.components.inputs.input.view (:require [oops.core :as oops] [quo2.components.icon :as icon] - [quo2.components.input.style :as style] + [quo2.components.inputs.input.style :as style] [quo2.components.markdown.text :as text] [react-native.core :as rn] [reagent.core :as reagent])) diff --git a/src/quo2/components/inputs/title_input/component_spec.cljs b/src/quo2/components/inputs/title_input/component_spec.cljs new file mode 100644 index 000000000000..22910b420af7 --- /dev/null +++ b/src/quo2/components/inputs/title_input/component_spec.cljs @@ -0,0 +1,40 @@ +(ns quo2.components.inputs.title-input.component-spec + (:require [quo2.components.inputs.title-input.view :as title-input] + [test-helpers.component :as h])) + +(h/describe "profile: title-input" + (h/test "renders empty" + (h/render [title-input/title-input + {:value "" + :on-change-text (h/mock-fn)}]) + (-> (js/expect (h/get-by-label-text :profile-title-input)) + (.toBeTruthy))) + + (h/test "empty text renders with max length digits and 00" + (h/render [title-input/title-input + {:value "" + :max-length 24 + :on-change-text (h/mock-fn)}]) + (-> (js/expect (h/get-by-text "00")) + (.toBeTruthy)) + (-> (js/expect (h/get-by-text "/24")) + (.toBeTruthy))) + + (h/test "renders with max length digits and character count" + (h/render [title-input/title-input + {:default-value "abc" + :max-length 24 + :on-change-text (h/mock-fn)} "abc"]) + (-> (js/expect (h/get-by-text "03")) + (.toBeTruthy)) + (-> (js/expect (h/get-by-text "/24")) + (.toBeTruthy))) + + (h/test "text updates on change" + (let [on-change-text (h/mock-fn)] + (h/render [title-input/title-input + {:value "mock text" + :on-change-text on-change-text}]) + (h/fire-event :change-text (h/get-by-label-text :profile-title-input) "mock-text-new") + (-> (js/expect on-change-text) + (.toHaveBeenCalled))))) diff --git a/src/quo2/components/inputs/title_input/style.cljs b/src/quo2/components/inputs/title_input/style.cljs new file mode 100644 index 000000000000..f8788334c5e8 --- /dev/null +++ b/src/quo2/components/inputs/title_input/style.cljs @@ -0,0 +1,52 @@ +(ns quo2.components.inputs.title-input.style + (:require [quo2.foundations.colors :as colors])) + +(defn get-focused-placeholder-color + [blur?] + (if blur? + (colors/theme-colors colors/neutral-80-opa-20 (colors/alpha colors/white 0.2)) + (colors/theme-colors colors/neutral-30 colors/neutral-60))) + +(defn get-placeholder-color + [blur?] + (if blur? + (colors/theme-colors colors/neutral-80-opa-40 (colors/alpha colors/white 0.3)) + (colors/theme-colors colors/neutral-40 colors/neutral-50))) + +(defn- get-disabled-color + [blur?] + (if blur? + (colors/theme-colors colors/neutral-80-opa-40 (colors/alpha colors/white 0.3)) + (colors/theme-colors colors/neutral-40 colors/neutral-50))) + +(defn- get-char-count-color + [blur?] + (if blur? + (colors/theme-colors colors/neutral-80-opa-40 (colors/alpha colors/white 0.4)) + (colors/theme-colors colors/neutral-40 colors/neutral-50))) + +(defn get-selection-color + [customization-color blur?] + (if blur? + (colors/theme-colors colors/neutral-100 colors/white) + (colors/custom-color customization-color (if colors/dark? 60 50)))) + +(def text-input-container {:flex 1}) + +(defn title-text + [disabled? blur?] + {:text-align-vertical :bottom + :color (when disabled? (get-disabled-color blur?))}) + +(defn char-count + [blur?] + {:color (get-char-count-color blur?)}) + +(def container + {:flex-direction :row + :flex 1 + :justify-content :center + :align-items :center}) + +(def counter-container + {:padding-top 8}) diff --git a/src/quo2/components/inputs/title_input/view.cljs b/src/quo2/components/inputs/title_input/view.cljs new file mode 100644 index 000000000000..763e0bc20be1 --- /dev/null +++ b/src/quo2/components/inputs/title_input/view.cljs @@ -0,0 +1,65 @@ +(ns quo2.components.inputs.title-input.view + (:require + [quo2.components.inputs.title-input.style :as style] + [quo2.components.markdown.text :as text] + [reagent.core :as reagent] + [react-native.core :as rn])) + +(defn- pad-0 + [value] + (if (<= (count value) 1) + (str 0 value) + value)) + +(defn title-input + [{:keys [blur? + on-change-text + placeholder + max-length + default-value] + :or {max-length 0 + default-value ""}}] + (let [focused? (reagent/atom false) + value (reagent/atom default-value) + on-change (fn [v] + (reset! value v) + (when on-change-text + (on-change-text v)))] + (fn [{:keys [customization-color disabled?]}] + [rn/view + {:style style/container} + [rn/view {:style style/text-input-container} + [rn/text-input + {:style + (text/text-style + {:size :heading-2 + :weight :semi-bold + :style (style/title-text disabled? blur?)}) + :default-value default-value + :accessibility-label :profile-title-input + :on-focus #(swap! focused? (fn [] true)) + :on-blur #(swap! focused? (fn [] false)) + :input-mode :text + :on-change-text on-change + :editable (not disabled?) + :max-length max-length + :placeholder placeholder + :selection-color (style/get-selection-color customization-color blur?) + :placeholder-text-color (if @focused? + (style/get-focused-placeholder-color blur?) + (style/get-placeholder-color blur?))}]] + [rn/view + {:style style/counter-container} + [text/text + [text/text + {:style (style/char-count blur?) + :size :paragraph-2} + (pad-0 + (str + (count @value)))] + [text/text + {:style (style/char-count blur?) + :size :paragraph-2} + (str "/" + (pad-0 + (str max-length)))]]]]))) diff --git a/src/quo2/components/settings/accounts/view.cljs b/src/quo2/components/settings/accounts/view.cljs index cf3ccb7cae1f..7289b66e2ce1 100644 --- a/src/quo2/components/settings/accounts/view.cljs +++ b/src/quo2/components/settings/accounts/view.cljs @@ -6,9 +6,9 @@ [react-native.core :as rn])) (defn card-background - [{:keys [custom-color]}] + [{:keys [customization-color]}] [:<> - [rn/view {:style (style/background-top custom-color)}] + [rn/view {:style (style/background-top customization-color)}] [rn/view {:style (style/background-bottom)}]]) (defn avatar @@ -28,12 +28,12 @@ :i/more]]) (defn account - [{:keys [account-name account-address avatar-icon custom-color on-press-menu]}] + [{:keys [account-name account-address avatar-icon customization-color on-press-menu]}] [rn/view {:style style/card} - [card-background {:custom-color custom-color}] + [card-background {:customization-color customization-color}] [rn/view {:style style/card-top} [avatar - {:color custom-color + {:color customization-color :icon avatar-icon}] [menu-button {:on-press on-press-menu}]] [rn/view {:style style/card-bottom} diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 6379a12feee8..a82b2eee0ef7 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -30,7 +30,8 @@ quo2.components.icon quo2.components.info.info-message quo2.components.info.information-box - quo2.components.input.view + quo2.components.inputs.input.view + quo2.components.inputs.title-input.view quo2.components.list-items.channel quo2.components.list-items.menu-item quo2.components.list-items.preview-list @@ -141,7 +142,8 @@ (def permission-context quo2.components.drawers.permission-context.view/view) ;;;; INPUTS -(def input quo2.components.input.view/input) +(def input quo2.components.inputs.input.view/input) +(def title-input quo2.components.inputs.title-input.view/title-input) ;;;; LIST ITEMS (def channel-list-item quo2.components.list-items.channel/list-item) diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index 24af045a4a1d..9ca6336d403d 100644 --- a/src/quo2/core_spec.cljs +++ b/src/quo2/core_spec.cljs @@ -9,6 +9,7 @@ [quo2.components.drawers.drawer-buttons.component-spec] [quo2.components.drawers.permission-context.component-spec] [quo2.components.colors.color-picker.component-spec] + [quo2.components.inputs.title-input.component-spec] [quo2.components.markdown.--tests--.text-component-spec] [quo2.components.onboarding.small-option-card.component-spec] [quo2.components.password.tips.component-spec] diff --git a/src/status_im2/contexts/quo_preview/inputs/input.cljs b/src/status_im2/contexts/quo_preview/inputs/input.cljs index aab416815a8e..36552bf0cf8d 100644 --- a/src/status_im2/contexts/quo_preview/inputs/input.cljs +++ b/src/status_im2/contexts/quo_preview/inputs/input.cljs @@ -1,7 +1,7 @@ (ns status-im2.contexts.quo-preview.inputs.input (:require [clojure.string :as string] - [quo2.components.input.view :as quo2] + [quo2.core :as quo] [quo2.foundations.colors :as colors] [react-native.core :as rn] [reagent.core :as reagent] @@ -94,7 +94,7 @@ :padding-vertical 60 :background-color background-color}} [rn/view {:style {:width 300}} - [quo2/input + [quo/input (cond-> @state :always (assoc :on-clear #(swap! state assoc :value "") diff --git a/src/status_im2/contexts/quo_preview/inputs/title_input.cljs b/src/status_im2/contexts/quo_preview/inputs/title_input.cljs new file mode 100644 index 000000000000..f0b32d8291b6 --- /dev/null +++ b/src/status_im2/contexts/quo_preview/inputs/title_input.cljs @@ -0,0 +1,58 @@ +(ns status-im2.contexts.quo-preview.inputs.title-input + (:require [quo2.foundations.colors :as colors] + [react-native.core :as rn] + [reagent.core :as reagent] + [quo2.core :as quo] + [react-native.blur :as blur] + [status-im2.contexts.quo-preview.preview :as preview])) + +(def descriptor + [{:label "disabled?" + :key :disabled? + :type :boolean} + {:label "blur?" + :key :blur? + :type :boolean} + {:label "Cursor Color" + :key :color + :type :select + :options (map (fn [{:keys [name]}] {:key name :value name}) (quo/picker-colors))}]) + +(defn cool-preview + [] + (let [state (reagent/atom {:color nil + :blur? false + :disabled? false}) + max-length 24 + on-change-text (fn [_v] + (println (str "cool-preview -> on-change-text called " _v)))] + (fn [] + [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [rn/view {:padding-bottom 150} + [rn/view {:flex 1}] + [preview/customizer state descriptor] + + [preview/blur-view + {:show-blur-background? (:blur? @state) + :style {:flex-direction :row + :justify-content :center}} + [quo/title-input + {:max-length max-length + :default-value "" + :on-change-text on-change-text + :disabled? (:disabled? @state) + :customization-color (:color @state) + :blur? (:blur? @state) + :placeholder "type something here"}]]]]))) + +(defn preview-title-input + [] + [rn/view + {:background-color (colors/theme-colors colors/white + colors/neutral-90) + :flex 1} + [rn/flat-list + {:flex 1 + :keyboard-should-persist-taps :always + :header [cool-preview] + :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 9b4493deae34..c43c14e775a2 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -37,6 +37,7 @@ [status-im2.contexts.quo-preview.foundations.shadows :as shadows] [status-im2.contexts.quo-preview.info.info-message :as info-message] [status-im2.contexts.quo-preview.info.information-box :as information-box] + [status-im2.contexts.quo-preview.inputs.title-input :as title-input] [status-im2.contexts.quo-preview.list-items.channel :as channel] [status-im2.contexts.quo-preview.list-items.preview-lists :as preview-lists] [status-im2.contexts.quo-preview.markdown.text :as text] @@ -168,7 +169,10 @@ :component information-box/preview-information-box}] :inputs [{:name :input :insets {:top false} - :component input/preview-input}] + :component input/preview-input} + {:name :title-input + :insets {:top false} + :component title-input/preview-title-input}] :list-items [{:name :channel :insets {:top false} :component channel/preview-channel} diff --git a/src/status_im2/contexts/quo_preview/settings/accounts.cljs b/src/status_im2/contexts/quo_preview/settings/accounts.cljs index e5cb19f7cec7..8bd6c6c49410 100644 --- a/src/status_im2/contexts/quo_preview/settings/accounts.cljs +++ b/src/status_im2/contexts/quo_preview/settings/accounts.cljs @@ -8,7 +8,7 @@ (def descriptor [{:label "Custom color" - :key :custom-color + :key :customization-color :type :select :options (map (fn [[k _]] {:key k :value (string/capitalize (name k))}) @@ -22,12 +22,12 @@ (defn cool-preview [] - (let [state (reagent/atom {:custom-color :blue - :account-name "Booze for Dubai" - :account-address "0x21a ... 49e" - :avatar-icon :i/placeholder - :on-press-menu (fn [] - (js/alert "Menu button pressed"))})] + (let [state (reagent/atom {:customization-color :blue + :account-name "Booze for Dubai" + :account-address "0x21a ... 49e" + :avatar-icon :i/placeholder + :on-press-menu (fn [] + (js/alert "Menu button pressed"))})] (fn [] [rn/view {:margin-bottom 50