diff --git a/src/quo2/components/counter/counter/style.cljs b/src/quo2/components/counter/counter/style.cljs index dfda5e1d3c..4751d1868f 100644 --- a/src/quo2/components/counter/counter/style.cljs +++ b/src/quo2/components/counter/counter/style.cljs @@ -12,19 +12,16 @@ (defn container [{:keys [type label container-style customization-color theme value max-value]}] - (let [label-length (count label) - width (case label-length - 1 16 - 2 20 - 28)] + (let [width (case (count label) + 1 16 + 2 20 + 28)] (cond-> (merge - {:align-items :center - :justify-content :center - :border-radius 6 - :width width - :margin-vertical 2 - :margin-horizontal (if (= label-length 1) 2 0) - :height 16} + {:align-items :center + :justify-content :center + :border-radius 6 + :width width + :height 16} container-style) (= type :outline) (merge {:border-width 1 diff --git a/src/quo2/components/list_items/channel/style.cljs b/src/quo2/components/list_items/channel/style.cljs index 637ac4a008..70dc3af36e 100644 --- a/src/quo2/components/list_items/channel/style.cljs +++ b/src/quo2/components/list_items/channel/style.cljs @@ -44,3 +44,7 @@ {:margin-horizontal 12 :color (get-label-color notification theme) :flex 1}) + +(defn counter + [mentions] + {:margin-horizontal (if (= (count (str mentions)) 1) 2 0)}) diff --git a/src/quo2/components/list_items/channel/view.cljs b/src/quo2/components/list_items/channel/view.cljs index 9669eb63bd..7bf2d64f65 100644 --- a/src/quo2/components/list_items/channel/view.cljs +++ b/src/quo2/components/list_items/channel/view.cljs @@ -51,7 +51,9 @@ (condp = notification :mute [quo2.icons/icon :i/muted {:color (style/mute-notification-icon-color theme)}] - :mention [counter/view {:customization-color customization-color} + :mention [counter/view + {:customization-color customization-color + :container-style (style/counter mentions-count)} mentions-count] :notification [quo2.icons/icon :i/notification {:color (style/mute-notification-icon-color theme) diff --git a/src/quo2/components/navigation/top_nav/view.cljs b/src/quo2/components/navigation/top_nav/view.cljs index 8062d61936..c8e97eaa39 100644 --- a/src/quo2/components/navigation/top_nav/view.cljs +++ b/src/quo2/components/navigation/top_nav/view.cljs @@ -4,9 +4,34 @@ [quo2.components.avatars.user-avatar.view :as user-avatar] [quo2.components.counter.counter.view :as counter] [quo2.components.navigation.top-nav.style :as style] + [react-native.hole-view :as hole-view] [quo2.theme :as quo.theme] [quo2.components.common.notification-dot.view :as notification-dot])) +(def notification-dot-hole + [{:x 37 + :y -2 + :width 9 + :height 9 + :borderRadius 4}]) + +(defn unread-counter-hole + [notification-count] + (let [x (case (count (str notification-count)) + (1 2) 33 + 29) + width (case (count (str notification-count)) + 1 16 + 2 20 + 28)] + (if (pos? (js/Number notification-count)) + [{:x x + :y -5 + :width width + :height 16 + :borderRadius 6}] + []))) + (defn- get-button-common-props [{:keys [jump-to? theme blur?]}] {:icon-only? true @@ -47,7 +72,7 @@ :notification-count notification-count :max-value max-unread-notifications :customization-color customization-color}] - nil)) + [:<>])) (defn- left-section [{:keys [avatar-props on-press customization-color]}] @@ -65,6 +90,8 @@ [{:keys [theme jump-to? blur? + notification + notification-count activity-center-on-press scan-on-press qr-code-on-press @@ -95,12 +122,18 @@ :on-press qr-code-on-press}) :i/qr-code] [rn/view - [button/button - (merge button-common-props - {:accessibility-label :open-activity-center-button - :on-press activity-center-on-press}) - :i/activity-center]] - [notification-highlight props]])) + [hole-view/hole-view + {:key (hash (str notification notification-count)) + :holes (case notification + (:seen :notification) notification-dot-hole + (:mention :mention-seen) (unread-counter-hole notification-count) + [])} + [button/button + (merge button-common-props + {:accessibility-label :open-activity-center-button + :on-press activity-center-on-press}) + :i/activity-center]] + [notification-highlight props]]])) (defn view-internal [{:keys [avatar-on-press avatar-props customization-color container-style] :as props}] diff --git a/src/status_im2/contexts/quo_preview/navigation/top_nav.cljs b/src/status_im2/contexts/quo_preview/navigation/top_nav.cljs index c61c7cc6d5..7087e52e93 100644 --- a/src/status_im2/contexts/quo_preview/navigation/top_nav.cljs +++ b/src/status_im2/contexts/quo_preview/navigation/top_nav.cljs @@ -10,12 +10,9 @@ (def descriptor [{:key :notification :type :select - :options [{:key :mention - :value "Mention"} - {:key :notification - :value "Notification"} - {:key :seen - :value "Seen"}]} + :options [{:key :mention} + {:key :notification} + {:key :seen}]} {:key :blur? :type :boolean} {:key :jump-to?