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

[#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`
This commit is contained in:
Ulises Manuel Cárdenas 2023-07-04 16:11:56 -06:00 committed by GitHub
parent 19ca8e28a5
commit 2b4b357c32
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 95 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/quo2/components/dividers/divider_label.cljs
View File

@ -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

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

@ -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])])]]))

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

@ -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])