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

chore: adjust quo2 counter component to use customization-color internally (#16799) 

* chore: refactor use of customization-color in quo2 counter

* chore: fix uses of counter to use custom colors in app
This commit is contained in:
Jamie Caprani 2023-08-03 13:57:39 +02:00 committed by GitHub
parent cccf5ed015
commit 98085cd9c9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 204 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/quo2/components/banners/banner/view.cljs
View File

@ -1,6 +1,6 @@
(ns quo2.components.banners.banner.view
(:require [quo2.components.banners.banner.style :as style]
[quo2.components.counter.counter :as counter]
[quo2.components.counter.counter.view :as counter]
[quo2.components.icon :as icons]
[quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors]
@ -27,4 +27,4 @@
[rn/view
{:accessibility-label :pins-count
:style style/counter}
[counter/counter {:type :secondary} pins-count]]]))
[counter/view {:type :secondary} pins-count]]]))

4
src/quo2/components/community/channel_actions.cljs
View File

@ -1,7 +1,7 @@
(ns quo2.components.community.channel-actions
(:require [react-native.core :as rn]
[quo2.components.icon :as icons]
[quo2.components.counter.counter :as counter]
[quo2.components.counter.counter.view :as counter]
[quo2.components.markdown.text :as text]
[quo2.components.community.style :as style]))
@ -15,7 +15,7 @@
[rn/view {:style style/channel-action-row}
[icons/icon icon]
(when counter-value
[counter/counter {:type :secondary} counter-value])]
[counter/view {:type :secondary} counter-value])]
[text/text {:size :paragraph-1 :weight :medium :number-of-lines 2} label]]])
(defn channel-actions

48
src/quo2/components/community/community_list_view.cljs
View File

@ -1,9 +1,9 @@
(ns quo2.components.community.community-list-view
(:require [quo2.components.community.community-view :as community-view]
[quo2.components.community.style :as style]
[quo2.components.counter.counter :as counter]
[quo2.components.counter.counter.view :as counter]
[quo2.components.icon :as icons]
[quo2.theme :as theme]
[quo2.theme :as quo.theme]
[quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors]
[quo2.components.community.icon :as community-icon]
@ -11,9 +11,11 @@
[react-native.core :as rn]))
(defn notification-view
[{:keys [muted?
[{:keys [theme
muted?
unread-messages?
unread-mentions-count]}]
unread-mentions-count
customization-color]}]
(cond
muted?
[icons/icon :i/muted
@ -23,15 +25,18 @@
:size 20
:color (colors/theme-colors
colors/neutral-50
colors/neutral-40)}]
colors/neutral-40
theme)}]
(pos? unread-mentions-count)
[counter/counter {:type :default} unread-mentions-count]
[counter/view
{:customization-color customization-color
:type :default} unread-mentions-count]
unread-messages?
[unread-grey-dot :unviewed-messages-public]))
(defn communities-list-view-item
[props
(defn- communities-list-view-item-internal
[{:keys [theme customization-color] :as props}
{:keys [name
locked?
status
@ -63,7 +68,8 @@
:style {:color (when muted
(colors/theme-colors
colors/neutral-40
colors/neutral-60))}}
colors/neutral-60
theme))}}
name]
[community-view/community-stats-column
{:type :list-view}]]
@ -72,12 +78,16 @@
{:locked? locked?
:tokens tokens}]
[notification-view
{:muted? muted
{:customization-color customization-color
:theme theme
:muted? muted
:unread-mentions-count unread-mentions-count
:unread-messages? unread-messages?}])]]]])
(defn communities-membership-list-item
[props
(def communities-list-view-item (quo.theme/with-theme communities-list-view-item-internal))
(defn- communities-membership-list-item-internal
[{:keys [theme customization-color] :as props}
bottom-sheet?
{:keys [name
muted
@ -91,7 +101,8 @@
[rn/touchable-highlight
(merge {:underlay-color (colors/theme-colors
colors/neutral-5
colors/neutral-95)
colors/neutral-95
theme)
:style {:border-radius 12
:margin-left 12}}
props)
@ -109,9 +120,10 @@
:weight :semi-bold
:size :paragraph-1
:style (when muted
{:color (if (theme/dark?)
{:color (colors/theme-colors
colors/neutral-40
colors/neutral-60
colors/neutral-40)})}
theme)})}
name]]
[rn/view
@ -123,6 +135,10 @@
{:locked? locked?
:tokens tokens}]
[notification-view
{:muted? muted
{:theme theme
:customization-color customization-color
:muted? muted
:unread-mentions-count unviewed-mentions-count
:unread-messages? (pos? unviewed-messages-count)}])]]])
(def communities-membership-list-item (quo.theme/with-theme communities-membership-list-item-internal))

67
src/quo2/components/counter/counter.cljs
View File

@ -1,67 +0,0 @@
(ns quo2.components.counter.counter
(:require
[quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors]
[quo2.theme :as theme]
[react-native.core :as rn]
[utils.number]))
(def themes
{:light {:default colors/primary-50
:secondary colors/neutral-80-opa-5
:grey colors/neutral-10
:outline colors/neutral-20}
:dark {:default colors/primary-60
:secondary colors/white-opa-5
:grey colors/neutral-70
:outline colors/neutral-70}})
(defn get-color
[k]
(get-in themes [(theme/get-theme) k]))
(defn counter
[{:keys [type override-text-color override-bg-color style accessibility-label max-value]
:or {max-value 99}}
value]
(let [type (or type :default)
text-color (or override-text-color
(if (or
(= (theme/get-theme) :dark)
(= type :default))
colors/white
colors/neutral-100))
value (utils.number/parse-int value)
label (if (> value max-value)
(str max-value "+")
(str value))
width (case (count label)
1 16
2 20
28)]
[rn/view
{:test-ID :counter-component
:accessible true
:accessibility-label accessibility-label
:style (cond-> (merge
{:align-items :center
:justify-content :center
:border-radius 6
:width width
:height 16}
style)
(= type :outline)
(merge {:border-width 1
:border-color (get-color type)})
(not= type :outline)
(assoc :background-color
(or override-bg-color
(get-color type)))
(> value max-value)
(assoc :padding-left 0.5))}
[text/text
{:weight :medium
:size :label
:style {:color text-color}} label]]))

14
src/quo2/components/counter/component_spec.cljs → src/quo2/components/counter/counter/component_spec.cljs
View File

@ -1,29 +1,29 @@
(ns quo2.components.counter.component-spec
(:require [quo2.components.counter.counter :as counter]
(ns quo2.components.counter.counter.component-spec
(:require [quo2.components.counter.counter.view :as counter]
[test-helpers.component :as h]))
(h/describe "counter component"
(h/test "default render of counter component"
(h/render [counter/counter {} nil])
(h/render [counter/view {} nil])
(-> (h/expect (h/get-by-test-id :counter-component))
(h/is-truthy)))
(h/test "renders counter with a string value"
(h/render [counter/counter {} "1"])
(h/render [counter/view {} "1"])
(-> (h/expect (h/get-by-text "1"))
(h/is-truthy)))
(h/test "renders counter with an integer value"
(h/render [counter/counter {} 1])
(h/render [counter/view {} 1])
(-> (h/expect (h/get-by-text "1"))
(h/is-truthy)))
(h/test "renders counter with max value 99+ by default"
(h/render [counter/counter {} 100])
(h/render [counter/view {} 100])
(-> (h/expect (h/get-by-text "99+"))
(h/is-truthy)))
(h/test "renders counter with custom max value when set to 150"
(h/render [counter/counter {:max-value 150} 151])
(h/render [counter/view {:max-value 150} 151])
(-> (h/expect (h/get-by-text "150+"))
(h/is-truthy))))

32
src/quo2/components/counter/counter/style.cljs Normal file
View File

@ -0,0 +1,32 @@
(ns quo2.components.counter.counter.style
(:require [quo2.foundations.colors :as colors]))
(defn get-color
[type customization-color theme]
(case type
:default (colors/custom-color customization-color 50)
:secondary (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
:grey (colors/theme-colors colors/neutral-10 colors/neutral-80 theme)
:outline (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
nil))
(defn container
[{:keys [type label container-style customization-color theme value max-value]}]
(let [width (case (count label)
1 16
2 20
28)]
(cond-> (merge
{:align-items :center
:justify-content :center
:border-radius 6
:width width
:height 16}
container-style)
(= type :outline)
(merge {:border-width 1
:border-color (get-color type customization-color theme)})
(not= type :outline)
(assoc :background-color (get-color type customization-color theme))
(> value max-value)
(assoc :padding-left 0.5))))

37
src/quo2/components/counter/counter/view.cljs Normal file
View File

@ -0,0 +1,37 @@
(ns quo2.components.counter.counter.view
(:require
[quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[utils.number]
[quo2.theme :as quo.theme]
[quo2.components.counter.counter.style :as style]))
(defn- view-internal
[{:keys [type customization-color theme container-style accessibility-label max-value]
:or {max-value 99 customization-color :blue theme :dark}}
value]
(let [type (or type :default)
value (utils.number/parse-int value)
label (if (> value max-value)
(str max-value "+")
(str value))]
[rn/view
{:test-ID :counter-component
:accessible true
:accessibility-label accessibility-label
:style (style/container
{:label label
:type type
:customization-color customization-color
:theme theme
:container-style container-style
:value value
:max-value max-value})}
[text/text
{:weight :medium
:size :label
:style (when (= type :default) {:color colors/white})}
label]]))
(def view (quo.theme/with-theme view-internal))

4
src/quo2/components/list_items/channel.cljs
View File

@ -1,7 +1,7 @@
(ns quo2.components.list-items.channel
(:require [quo2.components.avatars.channel-avatar.view :as channel-avatar]
[quo2.components.common.unread-grey-dot.view :as unread-grey-dot]
[quo2.components.counter.counter :as quo2.counter]
[quo2.components.counter.counter.view :as counter]
[quo2.components.icon :as quo2.icons]
[quo2.components.markdown.text :as quo2.text]
[quo2.foundations.colors :as colors]
@ -61,7 +61,7 @@
(pos? (int mentions-count))
[rn/view {:style {:margin-right 2 :margin-top 2}}
[quo2.counter/counter {:override-bg-color channel-color}
[counter/view {:customization-color channel-color}
mentions-count]]
unread-messages?

6
src/quo2/components/list_items/community/view.cljs
View File

@ -1,6 +1,6 @@
(ns quo2.components.list-items.community.view
(:require [quo2.components.community.community-view :as community-view]
[quo2.components.counter.counter :as counter]
[quo2.components.counter.counter.view :as counter]
[quo2.components.icon :as icons]
[quo2.components.list-items.community.style :as style]
[quo2.components.markdown.text :as text]
@ -54,9 +54,9 @@
:blur? blur?}]
(and (= type :engage) (= info :mention) (pos? unread-count))
[counter/counter
[counter/view
{:type :default
:override-bg-color customization-color}
:customization-color customization-color}
unread-count]
(and (= type :engage) (= info :notification))

9
src/quo2/components/navigation/bottom_nav_tab/view.cljs
View File

@ -1,5 +1,5 @@
(ns quo2.components.navigation.bottom-nav-tab.view
(:require [quo2.components.counter.counter :as counter]
(:require [quo2.components.counter.counter.view :as counter]
[quo2.components.icons.icons :as icons]
[quo2.components.navigation.bottom-nav-tab.styles :as styles]
[quo2.foundations.colors :as colors]
@ -79,10 +79,9 @@
:source (icons/icon-source (keyword (str icon 24)))}])
(when new-notifications?
(if (= notification-indicator :counter)
[counter/counter
{:override-text-color colors/white
:override-bg-color (colors/custom-color customization-color 60)
:style styles/notification-counter}
[counter/view
{:customization-color customization-color
:container-style styles/notification-counter}
counter-label]
[rn/view {:style (styles/notification-dot customization-color)}]))]]))

31
src/quo2/components/notifications/info_count.cljs
View File

@ -1,31 +0,0 @@
(ns quo2.components.notifications.info-count
(:require [quo2.foundations.colors :as colors]
[quo2.foundations.typography :as typography]
[react-native.core :as rn]))
(defn- counter-style
[customization-color overwritten-styles]
(merge {:width 16
:height 16
:position :absolute
:right 22
:border-radius 6
:justify-content :center
:align-items :center
:background-color (colors/custom-color-by-theme customization-color 50 60)}
overwritten-styles))
(defn info-count
([amount]
(info-count {} amount))
([{:keys [customization-color style]
:or {customization-color :blue}
:as props}
amount]
(when (pos? amount)
[rn/view (assoc props :style (counter-style customization-color style))
[rn/text
{:style (merge typography/font-medium
typography/label
{:color colors/white :text-align :center})}
amount]])))

6
src/quo2/core.cljs
View File

@ -26,7 +26,7 @@
quo2.components.community.community-view
quo2.components.community.icon
quo2.components.community.token-gating
quo2.components.counter.counter
quo2.components.counter.counter.view
quo2.components.counter.step.view
quo2.components.dividers.date
quo2.components.dividers.divider-label
@ -70,7 +70,6 @@
quo2.components.notifications.activity-log.view
quo2.components.notifications.activity-logs-photos.view
quo2.components.notifications.count-down-circle
quo2.components.notifications.info-count
quo2.components.notifications.notification-dot
quo2.components.notifications.notification.view
quo2.components.notifications.toast.view
@ -161,7 +160,7 @@
(def channel-actions quo2.components.community.channel-actions/channel-actions)
;;;; COUNTER
(def counter quo2.components.counter.counter/counter)
(def counter quo2.components.counter.counter.view/view)
(def step quo2.components.counter.step.view/step)
;;;; DIVIDERS
@ -231,7 +230,6 @@
;;;; NOTIFICATIONS
(def activity-log quo2.components.notifications.activity-log.view/view)
(def activity-logs-photos quo2.components.notifications.activity-logs-photos.view/view)
(def info-count quo2.components.notifications.info-count/info-count)
(def notification-dot quo2.components.notifications.notification-dot/notification-dot)
(def count-down-circle quo2.components.notifications.count-down-circle/circle-timer)
(def notification quo2.components.notifications.notification.view/notification)

2
src/quo2/core_spec.cljs
View File

@ -12,7 +12,7 @@
[quo2.components.calendar.calendar-year.component-spec]
[quo2.components.browser.browser-input.component-spec]
[quo2.components.colors.color-picker.component-spec]
[quo2.components.counter.component-spec]
[quo2.components.counter.counter.component-spec]
[quo2.components.counter.step.component-spec]
[quo2.components.dividers.divider-label-component-spec]
[quo2.components.dividers.strength-divider.component-spec]

8
src/status_im2/common/home/view.cljs
View File

@ -40,12 +40,14 @@
unread-type (case indicator
:unread-indicator/seen :grey
:unread-indicator/new :default
nil)]
nil)
customization-color (rf/sub [:profile/customization-color])]
(when (pos? unread-count)
[quo/counter
{:accessibility-label :activity-center-unread-count
{:customization-color customization-color
:accessibility-label :activity-center-unread-count
:type unread-type
:style (style/unread-indicator unread-count
:container-style (style/unread-indicator unread-count
constants/activity-center-max-unread-count)}
unread-count])))

10
src/status_im2/contexts/chat/home/chat_list_item/style.cljs
View File

@ -11,16 +11,6 @@
:flex-direction :row
:align-items :center})
(defn count-container
[]
{:width 8
:height 8
:border-radius 4
:position :absolute
:right 26
:top 16
:background-color (colors/theme-colors colors/neutral-40 colors/neutral-60)})
(defn timestamp
[muted?]
{:color (if muted?

8
src/status_im2/contexts/chat/home/chat_list_item/view.cljs
View File

@ -219,8 +219,8 @@
[icons/icon :i/muted {:color colors/neutral-40}]
(and group-chat unread-mentions?)
[quo/info-count
{:style {:position :relative :right 0}
[quo/counter
{:container-style {:position :relative :right 0}
:customization-color customization-color
:accessibility-label :new-message-counter}
unviewed-mentions-count]
@ -232,8 +232,8 @@
:accessibility-label :unviewed-messages-public}]
unread-messages?
[quo/info-count
{:style {:position :relative :right 0}
[quo/counter
{:container-style {:position :relative :right 0}
:customization-color customization-color
:accessibility-label :new-message-counter}
unviewed-messages-count])]))

10
src/status_im2/contexts/chat/home/contact_request/view.cljs
View File

@ -34,6 +34,7 @@
(defn contact-requests
[requests]
(let [customization-color (rf/sub [:profile/customization-color])]
[rn/touchable-opacity
{:active-opacity 1
:accessibility-label :open-activity-center-contact-requests
@ -44,7 +45,7 @@
:style style/contact-requests}
[rn/view {:style (style/contact-requests-icon)}
[quo/icon :i/pending-user {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}]]
[rn/view {:style {:margin-left 8}}
[rn/view {:style {:margin-left 8 :flex 1}}
[quo/text
{:size :paragraph-1
:weight :semi-bold
@ -54,5 +55,8 @@
{:size :paragraph-2
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}}
(requests-summary requests)]]
[quo/info-count {:accessibility-label :pending-contact-requests-count}
(count requests)]])
[quo/counter
{:container-style {:margin-right 2}
:customization-color customization-color
:accessibility-label :pending-contact-requests-count}
(count requests)]]))

4
src/status_im2/contexts/chat/photo_selector/style.cljs
View File

@ -71,8 +71,6 @@
:background-color (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40)})
(def image-count
{:width 24
:height 24
:border-radius 8
{:position :absolute
:top 8
:right 8})

9
src/status_im2/contexts/chat/photo_selector/view.cljs
View File

@ -6,7 +6,6 @@
[react-native.platform :as platform]
[utils.i18n :as i18n]
[utils.re-frame :as rf]
[quo2.components.notifications.info-count :as info-count]
[quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
@ -69,7 +68,8 @@
(defn render-image
[item index _ {:keys [window-width selected]}]
(let [item-selected? (some #(= (:uri item) (:uri %)) @selected)]
(let [customization-color (rf/sub [:profile/customization-color])
item-selected? (some #(= (:uri item) (:uri %)) @selected)]
[rn/touchable-opacity
{:on-press (fn []
(if item-selected?
@ -84,8 +84,9 @@
(when item-selected?
[:<>
[rn/view {:style (style/overlay window-width)}]
[info-count/info-count
{:style style/image-count
[quo/counter
{:container-style style/image-count
:customization-color customization-color
:accessibility-label (str "count-" index)}
(inc (utils.collection/first-index #(= (:uri item) (:uri %)) @selected))]])]))

4
src/status_im2/contexts/communities/home/view.cljs
View File

@ -20,9 +20,11 @@
(defn item-render
[{:keys [id] :as item}]
(let [unviewed-counts (rf/sub [:communities/unviewed-counts id])
customization-color (rf/sub [:profile/customization-color])
item (merge item unviewed-counts)]
[quo/communities-membership-list-item
{:style {:padding-horizontal 18}
{:customization-color customization-color
:style {:padding-horizontal 18}
:on-press #(debounce/dispatch-and-chill [:navigate-to :community-overview id] 500)
:on-long-press #(rf/dispatch
[:show-bottom-sheet

3
src/status_im2/contexts/communities/overview/view.cljs
View File

@ -1,6 +1,5 @@
(ns status-im2.contexts.communities.overview.view
(:require [oops.core :as oops]
[quo2.components.navigation.floating-shell-button :as floating-shell-button]
[quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.blur :as blur]
@ -363,7 +362,7 @@
customization-color (rf/sub [:profile/customization-color])]
[rn/view {:style style/community-overview-container}
[community-card-page-view id]
[floating-shell-button/floating-shell-button
[quo/floating-shell-button
{:jump-to {:on-press #(rf/dispatch [:shell/navigate-to-jump-to])
:customization-color customization-color
:label (i18n/label :t/jump-to)}}

15
src/status_im2/contexts/quo_preview/counter/counter.cljs
View File

@ -1,5 +1,5 @@
(ns status-im2.contexts.quo-preview.counter.counter
(:require [quo2.components.counter.counter :as quo2]
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
@ -14,12 +14,19 @@
{:key :secondary
:value "Secondary"}
{:key :grey
:value "Gray"}
:value "Grey"}
{:key :outline
:value "Outline"}]}
{:label "Value"
:key :value
:type :text}])
:type :text}
{:label "Customization color:"
:key :customization-color
:type :select
:options (map (fn [color]
(let [k (get color :name)]
{:key k :value k}))
(quo/picker-colors))}])
(defn cool-preview
[]
@ -31,7 +38,7 @@
[rn/view
{:padding-vertical 60
:align-items :center}
[quo2/counter @state (:value @state)]]]])))
[quo/counter @state (:value @state)]]]])))
(defn preview-counter
[]

12
src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs
View File

@ -96,15 +96,14 @@
nil))])
(defn notification-container
[{:keys [notification-indicator counter-label color-60]}]
[{:keys [notification-indicator counter-label customization-color]}]
[rn/view {:style style/notification-container}
(if (= notification-indicator :counter)
[quo/counter
{:outline false
:override-text-color colors/white
:override-bg-color color-60}
:customization-color customization-color}
counter-label]
[rn/view {:style (style/unread-dot color-60)}])])
[rn/view {:style (style/unread-dot customization-color)}])])
(defn bottom-container
[type {:keys [new-notifications?] :as content}]
@ -223,8 +222,7 @@
(let [card-ref (atom nil)]
(fn [{:keys [avatar-params title type customization-color
content banner id channel-id]}]
(let [color-50 (colors/custom-color customization-color 50)
color-60 (colors/custom-color customization-color 60)]
(let [color-50 (colors/custom-color customization-color 50)]
[rn/touchable-opacity
{:on-press #(calculate-card-position-and-open-screen
card-ref
@ -254,7 +252,7 @@
(subtitle type content)]
[bottom-container type
(merge {:color-50 color-50
:color-60 color-60}
:customization-color customization-color}
content)]]
(when avatar-params
[rn/view {:style style/avatar-container}