From 2b4b357c328b450e35c40a37a7a89ccf5ead25f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ulises=20Manuel=20C=C3=A1rdenas?= <90291778+ulisesmac@users.noreply.github.com> Date: Tue, 4 Jul 2023 16:11:56 -0600 Subject: [PATCH] [#16378] Fix channel unread counter space * Makes `divider-label` styles more lenient * Small refactor to `list-items.channel` component * Fix styles for `channel-list-component` - Refactor `channel-list-component` - Add some missing `:style` keys in `status-im2.contexts.communities.overview.view` - Fix a warning related to using a `deref` in a `lazy-seq` * Changes icon keyword namespace from `:main-icons` to `:i` --- .../components/dividers/divider_label.cljs | 22 ++-- src/quo2/components/list_items/channel.cljs | 80 ++++++-------- .../contexts/communities/overview/view.cljs | 104 ++++++++---------- 3 files changed, 95 insertions(+), 111 deletions(-) diff --git a/src/quo2/components/dividers/divider_label.cljs b/src/quo2/components/dividers/divider_label.cljs index 694711136a..e84e936470 100644 --- a/src/quo2/components/dividers/divider_label.cljs +++ b/src/quo2/components/dividers/divider_label.cljs @@ -1,8 +1,8 @@ (ns quo2.components.dividers.divider-label - (:require [quo2.theme :as theme] - [quo2.components.icon :as icons] + (:require [quo2.components.icon :as icons] [quo2.components.markdown.text :as markdown.text] [quo2.foundations.colors :as colors] + [quo2.theme :as theme] [react-native.core :as rn])) (def chevron-icon-container-width 20) @@ -36,18 +36,18 @@ padding-top (if increase-padding-top? 16 8) text-and-icon-color (if dark? colors/neutral-40 colors/neutral-50) counter-text-color (if dark? colors/white colors/neutral-100)] - [rn/touchable-without-feedback - {:on-press on-press} + [rn/touchable-without-feedback {:on-press on-press} [rn/view {:accessible true :accessibility-label :divider-label - :style (merge {:border-top-width 1 - :border-top-color border-and-counter-bg-color - :padding-top padding-top - :padding-bottom padding-bottom - :padding-horizontal 16 - :align-items :center - :flex-direction :row} + :style (merge {:border-top-width 1 + :border-top-color border-and-counter-bg-color + :padding-top padding-top + :padding-bottom padding-bottom + :padding-left 16 + :padding-right 16 + :align-items :center + :flex-direction :row} container-style)} (when (= chevron-position :left) [rn/view diff --git a/src/quo2/components/list_items/channel.cljs b/src/quo2/components/list_items/channel.cljs index bf2521f8d5..fbead8ba93 100644 --- a/src/quo2/components/list_items/channel.cljs +++ b/src/quo2/components/list_items/channel.cljs @@ -1,12 +1,11 @@ (ns quo2.components.list-items.channel (:require [quo2.components.avatars.channel-avatar :as channel-avatar] + [quo2.components.common.unread-grey-dot.view :refer [unread-grey-dot]] [quo2.components.counter.counter :as quo2.counter] [quo2.components.icon :as quo2.icons] [quo2.components.markdown.text :as quo2.text] [quo2.foundations.colors :as colors] - [quo2.theme :as theme] - [react-native.core :as rn] - [quo2.components.common.unread-grey-dot.view :refer [unread-grey-dot]])) + [react-native.core :as rn])) (def ^:private custom-props [:name :locked? :mentions-count :unread-messages? @@ -21,22 +20,20 @@ name-text (:name props)] [rn/touchable-opacity standard-props [rn/view - {:style (merge {:height 48 - :display :flex - :border-radius 12 - :flex-direction :row - :justify-content :space-between - :align-items :center - :width "100%" - :padding-left 12 - :padding-right 12} - (when is-active-channel? - {:background-color (colors/theme-alpha channel-color 0.05 0.05)}))} + {:style (cond-> {:height 48 + :border-radius 12 + :flex-direction :row + :justify-content :space-between + :align-items :center + :width "100%" + :padding-left 12 + :padding-right 12} + is-active-channel? (assoc :background-color + (colors/theme-alpha channel-color 0.05 0.05)))} [rn/view - {:display :flex - :flex-direction :row - :justify-content :flex-start - :align-items :center + {:style {:flex-direction :row + :justify-content :flex-start + :align-items :center} :accessible true :accessibility-label :chat-name-text} [channel-avatar/channel-avatar @@ -45,30 +42,25 @@ :emoji-background-color (colors/theme-alpha channel-color 0.1 0.1) :emoji emoji}] [quo2.text/text - {:style (merge {:margin-left 12} - (when (and (not locked?) muted?) - {:color (if (theme/dark?) colors/neutral-60 colors/neutral-40)})) + {:style (cond-> {:margin-left 12} + (and (not locked?) muted?) + (assoc :color (colors/theme-colors colors/neutral-40 colors/neutral-60))) :weight :medium - :size :paragraph-1} (str "# " name-text)]] - [rn/view - {:style {:height 20 - :justify-content :center}} - (when (and (not locked?) - muted?) - [quo2.icons/icon :i/muted - {:size 20 - :color colors/neutral-40 - :container-style {:margin-right 1 - :margin-top 2}}]) - (when (and (not locked?) - (not muted?) - (pos? (int mentions-count))) - [rn/view - {:style {:margin-right 2 - :margin-top 2}} - [quo2.counter/counter {:override-bg-color channel-color} mentions-count]]) - (when (and (not locked?) - (not muted?) - (not (pos? (int mentions-count))) - unread-messages?) - [unread-grey-dot :unviewed-messages-public])]]])) + :size :paragraph-1} + (str "# " name-text)]] + (when-not locked? + [rn/view {:style {:height 20 :justify-content :center}} + (cond + muted? + [quo2.icons/icon :i/muted + {:size 20 + :color colors/neutral-40 + :container-style {:margin-right 1 :margin-top 2}}] + + (pos? (int mentions-count)) + [rn/view {:style {:margin-right 2 :margin-top 2}} + [quo2.counter/counter {:override-bg-color channel-color} + mentions-count]] + + unread-messages? + [unread-grey-dot :unviewed-messages-public])])]])) diff --git a/src/status_im2/contexts/communities/overview/view.cljs b/src/status_im2/contexts/communities/overview/view.cljs index d867ddc314..f67b43d774 100644 --- a/src/status_im2/contexts/communities/overview/view.cljs +++ b/src/status_im2/contexts/communities/overview/view.cljs @@ -9,15 +9,15 @@ [reagent.core :as reagent] [status-im2.common.home.actions.view :as actions] [status-im2.common.password-authentication.view :as password-authentication] - [status-im2.common.scroll-page.view :as scroll-page] [status-im2.common.scroll-page.style :as scroll-page.style] + [status-im2.common.scroll-page.view :as scroll-page] [status-im2.constants :as constants] + [status-im2.contexts.communities.actions.chat.view :as chat-actions] [status-im2.contexts.communities.actions.community-options.view :as options] [status-im2.contexts.communities.overview.style :as style] [status-im2.contexts.communities.overview.utils :as utils] [utils.i18n :as i18n] - [utils.re-frame :as rf] - [status-im2.contexts.communities.actions.chat.view :as chat-actions])) + [utils.re-frame :as rf])) (defn preview-user-list [user-list] @@ -48,6 +48,20 @@ [event] (oops/oget event "nativeEvent.layout.y")) +(defn- channel-chat-item + [community-id {chat-id :id muted? :muted? :as chat}] + (let [sheet-content [actions/chat-actions + (assoc chat :chat-type constants/community-chat-type) + false] + channel-sheet-data {:selected-item (fn [] [quo/channel-list-item chat]) + :content (fn [] sheet-content)}] + [rn/view {:key chat-id :style {:margin-top 4}} + [quo/channel-list-item + (assoc chat + :on-long-press #(rf/dispatch [:show-bottom-sheet channel-sheet-data]) + :muted? (or muted? + (rf/sub [:chat/check-channel-muted? community-id chat-id])))]])) + (defn channel-list-component [{:keys [on-category-layout community-id on-first-channel-height-changed]} channels-list] @@ -57,48 +71,28 @@ (int (Math/ceil (layout-y %)))) (into #{} (map (comp :name second) channels-list))) :style {:margin-top 20 :flex 1}} - (for [[category-id {:keys [chats name collapsed?]}] channels-list] - [rn/view - {:flex 1 - :key category-id - ;; on-layout fires only when the component re-renders, so - ;; in case the category hasn't changed, it will not be fired - :on-layout #(on-category-layout name (int (layout-y %)))} - (when-not (= constants/empty-category-id category-id) - [quo/divider-label - {:label name - :on-press #(collapse-category - community-id - category-id - collapsed?) - :chevron-icon (if collapsed? :main-icons/chevron-right :main-icons/chevron-down) - :padding-bottom (if collapsed? 7 0) - :chevron-position :left}]) - (when-not collapsed? - [rn/view - {:style {:margin-left 8 - :margin-top 10 - :margin-bottom 8}} - (for [{:keys [muted? id] :as chat} chats - :let [chat (assoc chat - :chat-type - constants/community-chat-type) - channel-muted? (or muted? - (rf/sub [:chat/check-channel-muted? - community-id id]))]] - [rn/view - {:key (:id chat) - :style {:margin-top 4}} - [quo/channel-list-item - (assoc chat - :muted? - channel-muted? - :on-long-press - (fn [] - (rf/dispatch [:show-bottom-sheet - {:content (fn [] [actions/chat-actions chat false]) - :selected-item (fn [] - [quo/channel-list-item chat])}])))]])])])]) + (doall + (for [[category-id {:keys [chats name collapsed?]}] channels-list] + [rn/view + {:style {:flex 1} + :key category-id + ;; on-layout fires only when the component re-renders, so + ;; in case the category hasn't changed, it will not be fired + :on-layout #(on-category-layout name (int (layout-y %)))} + (when-not (= constants/empty-category-id category-id) + [quo/divider-label + {:container-style {:padding-left 16 + :padding-right 20 + :padding-top 6 ; Because of border width of 1 + :padding-bottom 7} + :label name + :on-press #(collapse-category community-id category-id collapsed?) + :chevron-icon (if collapsed? :i/chevron-right :i/chevron-down) + :chevron-position :left}]) + (when-not collapsed? + (into [rn/view {:style {:padding-horizontal 8 :padding-bottom 8}}] + (map #(channel-chat-item community-id %)) + chats))]))]) (defn request-to-join-text [is-open?] @@ -208,7 +202,7 @@ (defn status-tag [pending? joined] (when (or pending? joined) - [rn/view {:position :absolute :top 12 :right 12} + [rn/view {:style {:position :absolute :top 12 :right 12}} [quo/status-tag {:status {:type (if joined :positive :pending)} :label (if joined @@ -317,9 +311,8 @@ (->> categories-heights (sort-by (comp - second)) (some (fn [[category height]] - (and - (>= scroll-height (+ height first-channel-height)) - category))))) + (and (>= scroll-height (+ height first-channel-height)) + category))))) (defn community-card-page-view [] @@ -327,11 +320,11 @@ first-channel-height (reagent/atom 0) scroll-height (reagent/atom 0)] (fn [id] - (let [{:keys [name images id] :as community} - (rf/sub [:communities/community id]) - pending? (rf/sub [:communities/my-pending-request-to-join id]) - cover {:uri (get-in images [:banner :uri])} - logo {:uri (get-in images [:thumbnail :uri])}] + (let [{:keys [name images id] + :as community} (rf/sub [:communities/community id]) + pending? (rf/sub [:communities/my-pending-request-to-join id]) + cover {:uri (get-in images [:banner :uri])} + logo {:uri (get-in images [:thumbnail :uri])}] [scroll-page/scroll-page {:cover-image cover :logo logo @@ -362,8 +355,7 @@ (defn overview [id] (let [id (or id (rf/sub [:get-screen-params :community-overview]))] - [rn/view - {:style style/community-overview-container} + [rn/view {:style style/community-overview-container} [community-card-page-view id] [floating-shell-button/floating-shell-button {:jump-to {:on-press #(rf/dispatch [:shell/navigate-to-jump-to])