Skip to content

Commit d8c110b

Browse files
J-Son89J-Son89
authored
feat: add title input component to quo2 (#15133)
1 parent ff3249c commit d8c110b

File tree

14 files changed

+257
-23
lines changed

14 files changed

+257
-23
lines changed

Diff for: ‎doc/new-guidelines.md

+14
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,20 @@ deref'ed atoms.
116116
{:background-color (colors/theme-colors colors/white colors/neutral-90)})
117117
```
118118

119+
### Custom Colors
120+
121+
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.
122+
123+
```clojure
124+
;; bad
125+
(defn community-card [{keys [custom-color]}]
126+
...)
127+
128+
;; good
129+
(defn community-card [{keys [customization-color]}]
130+
...)
131+
```
132+
119133
### Using TODOs comments
120134

121135
_TODO_ comments are used extensively in the codebase, but prefer to use them

Diff for: ‎src/quo2/components/input/style.cljs renamed to ‎src/quo2/components/inputs/input/style.cljs

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
(ns quo2.components.input.style
1+
(ns quo2.components.inputs.input.style
22
(:require [quo2.components.markdown.text :as text]
33
[quo2.foundations.colors :as colors]))
44

Diff for: ‎src/quo2/components/input/view.cljs renamed to ‎src/quo2/components/inputs/input/view.cljs

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
(ns quo2.components.input.view
1+
(ns quo2.components.inputs.input.view
22
(:require [oops.core :as oops]
33
[quo2.components.icon :as icon]
4-
[quo2.components.input.style :as style]
4+
[quo2.components.inputs.input.style :as style]
55
[quo2.components.markdown.text :as text]
66
[react-native.core :as rn]
77
[reagent.core :as reagent]))

Diff for: ‎src/quo2/components/inputs/title_input/component_spec.cljs

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
(ns quo2.components.inputs.title-input.component-spec
2+
(:require [quo2.components.inputs.title-input.view :as title-input]
3+
[test-helpers.component :as h]))
4+
5+
(h/describe "profile: title-input"
6+
(h/test "renders empty"
7+
(h/render [title-input/title-input
8+
{:value ""
9+
:on-change-text (h/mock-fn)}])
10+
(-> (js/expect (h/get-by-label-text :profile-title-input))
11+
(.toBeTruthy)))
12+
13+
(h/test "empty text renders with max length digits and 00"
14+
(h/render [title-input/title-input
15+
{:value ""
16+
:max-length 24
17+
:on-change-text (h/mock-fn)}])
18+
(-> (js/expect (h/get-by-text "00"))
19+
(.toBeTruthy))
20+
(-> (js/expect (h/get-by-text "/24"))
21+
(.toBeTruthy)))
22+
23+
(h/test "renders with max length digits and character count"
24+
(h/render [title-input/title-input
25+
{:default-value "abc"
26+
:max-length 24
27+
:on-change-text (h/mock-fn)} "abc"])
28+
(-> (js/expect (h/get-by-text "03"))
29+
(.toBeTruthy))
30+
(-> (js/expect (h/get-by-text "/24"))
31+
(.toBeTruthy)))
32+
33+
(h/test "text updates on change"
34+
(let [on-change-text (h/mock-fn)]
35+
(h/render [title-input/title-input
36+
{:value "mock text"
37+
:on-change-text on-change-text}])
38+
(h/fire-event :change-text (h/get-by-label-text :profile-title-input) "mock-text-new")
39+
(-> (js/expect on-change-text)
40+
(.toHaveBeenCalled)))))

Diff for: ‎src/quo2/components/inputs/title_input/style.cljs

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
(ns quo2.components.inputs.title-input.style
2+
(:require [quo2.foundations.colors :as colors]))
3+
4+
(defn get-focused-placeholder-color
5+
[blur?]
6+
(if blur?
7+
(colors/theme-colors colors/neutral-80-opa-20 (colors/alpha colors/white 0.2))
8+
(colors/theme-colors colors/neutral-30 colors/neutral-60)))
9+
10+
(defn get-placeholder-color
11+
[blur?]
12+
(if blur?
13+
(colors/theme-colors colors/neutral-80-opa-40 (colors/alpha colors/white 0.3))
14+
(colors/theme-colors colors/neutral-40 colors/neutral-50)))
15+
16+
(defn- get-disabled-color
17+
[blur?]
18+
(if blur?
19+
(colors/theme-colors colors/neutral-80-opa-40 (colors/alpha colors/white 0.3))
20+
(colors/theme-colors colors/neutral-40 colors/neutral-50)))
21+
22+
(defn- get-char-count-color
23+
[blur?]
24+
(if blur?
25+
(colors/theme-colors colors/neutral-80-opa-40 (colors/alpha colors/white 0.4))
26+
(colors/theme-colors colors/neutral-40 colors/neutral-50)))
27+
28+
(defn get-selection-color
29+
[customization-color blur?]
30+
(if blur?
31+
(colors/theme-colors colors/neutral-100 colors/white)
32+
(colors/custom-color customization-color (if colors/dark? 60 50))))
33+
34+
(def text-input-container {:flex 1})
35+
36+
(defn title-text
37+
[disabled? blur?]
38+
{:text-align-vertical :bottom
39+
:color (when disabled? (get-disabled-color blur?))})
40+
41+
(defn char-count
42+
[blur?]
43+
{:color (get-char-count-color blur?)})
44+
45+
(def container
46+
{:flex-direction :row
47+
:flex 1
48+
:justify-content :center
49+
:align-items :center})
50+
51+
(def counter-container
52+
{:padding-top 8})

Diff for: ‎src/quo2/components/inputs/title_input/view.cljs

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
(ns quo2.components.inputs.title-input.view
2+
(:require
3+
[quo2.components.inputs.title-input.style :as style]
4+
[quo2.components.markdown.text :as text]
5+
[reagent.core :as reagent]
6+
[react-native.core :as rn]))
7+
8+
(defn- pad-0
9+
[value]
10+
(if (<= (count value) 1)
11+
(str 0 value)
12+
value))
13+
14+
(defn title-input
15+
[{:keys [blur?
16+
on-change-text
17+
placeholder
18+
max-length
19+
default-value]
20+
:or {max-length 0
21+
default-value ""}}]
22+
(let [focused? (reagent/atom false)
23+
value (reagent/atom default-value)
24+
on-change (fn [v]
25+
(reset! value v)
26+
(when on-change-text
27+
(on-change-text v)))]
28+
(fn [{:keys [customization-color disabled?]}]
29+
[rn/view
30+
{:style style/container}
31+
[rn/view {:style style/text-input-container}
32+
[rn/text-input
33+
{:style
34+
(text/text-style
35+
{:size :heading-2
36+
:weight :semi-bold
37+
:style (style/title-text disabled? blur?)})
38+
:default-value default-value
39+
:accessibility-label :profile-title-input
40+
:on-focus #(swap! focused? (fn [] true))
41+
:on-blur #(swap! focused? (fn [] false))
42+
:input-mode :text
43+
:on-change-text on-change
44+
:editable (not disabled?)
45+
:max-length max-length
46+
:placeholder placeholder
47+
:selection-color (style/get-selection-color customization-color blur?)
48+
:placeholder-text-color (if @focused?
49+
(style/get-focused-placeholder-color blur?)
50+
(style/get-placeholder-color blur?))}]]
51+
[rn/view
52+
{:style style/counter-container}
53+
[text/text
54+
[text/text
55+
{:style (style/char-count blur?)
56+
:size :paragraph-2}
57+
(pad-0
58+
(str
59+
(count @value)))]
60+
[text/text
61+
{:style (style/char-count blur?)
62+
:size :paragraph-2}
63+
(str "/"
64+
(pad-0
65+
(str max-length)))]]]])))

Diff for: ‎src/quo2/components/settings/accounts/view.cljs

+5-5
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@
66
[react-native.core :as rn]))
77

88
(defn card-background
9-
[{:keys [custom-color]}]
9+
[{:keys [customization-color]}]
1010
[:<>
11-
[rn/view {:style (style/background-top custom-color)}]
11+
[rn/view {:style (style/background-top customization-color)}]
1212
[rn/view {:style (style/background-bottom)}]])
1313

1414
(defn avatar
@@ -28,12 +28,12 @@
2828
:i/more]])
2929

3030
(defn account
31-
[{:keys [account-name account-address avatar-icon custom-color on-press-menu]}]
31+
[{:keys [account-name account-address avatar-icon customization-color on-press-menu]}]
3232
[rn/view {:style style/card}
33-
[card-background {:custom-color custom-color}]
33+
[card-background {:customization-color customization-color}]
3434
[rn/view {:style style/card-top}
3535
[avatar
36-
{:color custom-color
36+
{:color customization-color
3737
:icon avatar-icon}]
3838
[menu-button {:on-press on-press-menu}]]
3939
[rn/view {:style style/card-bottom}

Diff for: ‎src/quo2/core.cljs

+4-2
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,8 @@
3030
quo2.components.icon
3131
quo2.components.info.info-message
3232
quo2.components.info.information-box
33-
quo2.components.input.view
33+
quo2.components.inputs.input.view
34+
quo2.components.inputs.title-input.view
3435
quo2.components.list-items.channel
3536
quo2.components.list-items.menu-item
3637
quo2.components.list-items.preview-list
@@ -142,7 +143,8 @@
142143
(def permission-context quo2.components.drawers.permission-context.view/view)
143144

144145
;;;; INPUTS
145-
(def input quo2.components.input.view/input)
146+
(def input quo2.components.inputs.input.view/input)
147+
(def title-input quo2.components.inputs.title-input.view/title-input)
146148

147149
;;;; LIST ITEMS
148150
(def channel-list-item quo2.components.list-items.channel/list-item)

Diff for: ‎src/quo2/core_spec.cljs

+1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
[quo2.components.drawers.drawer-buttons.component-spec]
1010
[quo2.components.drawers.permission-context.component-spec]
1111
[quo2.components.colors.color-picker.component-spec]
12+
[quo2.components.inputs.title-input.component-spec]
1213
[quo2.components.markdown.--tests--.text-component-spec]
1314
[quo2.components.onboarding.small-option-card.component-spec]
1415
[quo2.components.password.tips.component-spec]

Diff for: ‎src/status_im2/contexts/quo_preview/inputs/input.cljs

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
(ns status-im2.contexts.quo-preview.inputs.input
22
(:require
33
[clojure.string :as string]
4-
[quo2.components.input.view :as quo2]
4+
[quo2.core :as quo]
55
[quo2.foundations.colors :as colors]
66
[react-native.core :as rn]
77
[reagent.core :as reagent]
@@ -94,7 +94,7 @@
9494
:padding-vertical 60
9595
:background-color background-color}}
9696
[rn/view {:style {:width 300}}
97-
[quo2/input
97+
[quo/input
9898
(cond-> @state
9999
:always (assoc
100100
:on-clear #(swap! state assoc :value "")

Diff for: ‎src/status_im2/contexts/quo_preview/inputs/title_input.cljs

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
(ns status-im2.contexts.quo-preview.inputs.title-input
2+
(:require [quo2.foundations.colors :as colors]
3+
[react-native.core :as rn]
4+
[reagent.core :as reagent]
5+
[quo2.core :as quo]
6+
[status-im2.contexts.quo-preview.preview :as preview]))
7+
8+
(def descriptor
9+
[{:label "disabled?"
10+
:key :disabled?
11+
:type :boolean}
12+
{:label "blur?"
13+
:key :blur?
14+
:type :boolean}
15+
{:label "Cursor Color"
16+
:key :color
17+
:type :select
18+
:options (map (fn [{:keys [name]}] {:key name :value name}) (quo/picker-colors))}])
19+
20+
(defn cool-preview
21+
[]
22+
(let [state (reagent/atom {:color nil
23+
:blur? false
24+
:disabled? false})
25+
max-length 24
26+
on-change-text (fn [_v]
27+
(println (str "cool-preview -> on-change-text called " _v)))]
28+
(fn []
29+
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
30+
[rn/view {:padding-bottom 150}
31+
[rn/view {:flex 1}]
32+
[preview/customizer state descriptor]
33+
34+
[preview/blur-view
35+
{:show-blur-background? (:blur? @state)
36+
:style {:flex-direction :row
37+
:justify-content :center}}
38+
[quo/title-input
39+
{:max-length max-length
40+
:default-value ""
41+
:on-change-text on-change-text
42+
:disabled? (:disabled? @state)
43+
:customization-color (:color @state)
44+
:blur? (:blur? @state)
45+
:placeholder "type something here"}]]]])))
46+
47+
(defn preview-title-input
48+
[]
49+
[rn/view
50+
{:background-color (colors/theme-colors colors/white
51+
colors/neutral-90)
52+
:flex 1}
53+
[rn/flat-list
54+
{:flex 1
55+
:keyboard-should-persist-taps :always
56+
:header [cool-preview]
57+
:key-fn str}]])

Diff for: ‎src/status_im2/contexts/quo_preview/main.cljs

+5-1
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
[status-im2.contexts.quo-preview.foundations.shadows :as shadows]
3838
[status-im2.contexts.quo-preview.info.info-message :as info-message]
3939
[status-im2.contexts.quo-preview.info.information-box :as information-box]
40+
[status-im2.contexts.quo-preview.inputs.title-input :as title-input]
4041
[status-im2.contexts.quo-preview.list-items.channel :as channel]
4142
[status-im2.contexts.quo-preview.list-items.preview-lists :as preview-lists]
4243
[status-im2.contexts.quo-preview.markdown.text :as text]
@@ -168,7 +169,10 @@
168169
:component information-box/preview-information-box}]
169170
:inputs [{:name :input
170171
:insets {:top false}
171-
:component input/preview-input}]
172+
:component input/preview-input}
173+
{:name :title-input
174+
:insets {:top false}
175+
:component title-input/preview-title-input}]
172176
:list-items [{:name :channel
173177
:insets {:top false}
174178
:component channel/preview-channel}

Diff for: ‎src/status_im2/contexts/quo_preview/preview.cljs

+2-3
Original file line numberDiff line numberDiff line change
@@ -218,9 +218,8 @@
218218
(defn blur-view
219219
[{:keys [show-blur-background? image height blur-view-props style]} children]
220220
[rn/view
221-
{:style {:flex 1
222-
:padding-horizontal 16
223-
:padding-vertical 16}}
221+
{:style {:flex 1
222+
:padding-vertical 16}}
224223
(when show-blur-background?
225224
[rn/view
226225
{:style {:height (or height 100)

Diff for: ‎src/status_im2/contexts/quo_preview/settings/accounts.cljs

+7-7
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
(def descriptor
1010
[{:label "Custom color"
11-
:key :custom-color
11+
:key :customization-color
1212
:type :select
1313
:options (map (fn [[k _]]
1414
{:key k :value (string/capitalize (name k))})
@@ -22,12 +22,12 @@
2222

2323
(defn cool-preview
2424
[]
25-
(let [state (reagent/atom {:custom-color :blue
26-
:account-name "Booze for Dubai"
27-
:account-address "0x21a ... 49e"
28-
:avatar-icon :i/placeholder
29-
:on-press-menu (fn []
30-
(js/alert "Menu button pressed"))})]
25+
(let [state (reagent/atom {:customization-color :blue
26+
:account-name "Booze for Dubai"
27+
:account-address "0x21a ... 49e"
28+
:avatar-icon :i/placeholder
29+
:on-press-menu (fn []
30+
(js/alert "Menu button pressed"))})]
3131
(fn []
3232
[rn/view
3333
{:margin-bottom 50

0 commit comments

Comments
 (0)