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 (ns quo2.components.dividers.divider-label
(:require [quo2.theme :as theme] (:require [quo2.components.icon :as icons]
[quo2.components.icon :as icons]
[quo2.components.markdown.text :as markdown.text] [quo2.components.markdown.text :as markdown.text]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.theme :as theme]
[react-native.core :as rn])) [react-native.core :as rn]))
(def chevron-icon-container-width 20) (def chevron-icon-container-width 20)
@ -36,18 +36,18 @@
padding-top (if increase-padding-top? 16 8) padding-top (if increase-padding-top? 16 8)
text-and-icon-color (if dark? colors/neutral-40 colors/neutral-50) text-and-icon-color (if dark? colors/neutral-40 colors/neutral-50)
counter-text-color (if dark? colors/white colors/neutral-100)] counter-text-color (if dark? colors/white colors/neutral-100)]
[rn/touchable-without-feedback [rn/touchable-without-feedback {:on-press on-press}
{:on-press on-press}
[rn/view [rn/view
{:accessible true {:accessible true
:accessibility-label :divider-label :accessibility-label :divider-label
:style (merge {:border-top-width 1 :style (merge {:border-top-width 1
:border-top-color border-and-counter-bg-color :border-top-color border-and-counter-bg-color
:padding-top padding-top :padding-top padding-top
:padding-bottom padding-bottom :padding-bottom padding-bottom
:padding-horizontal 16 :padding-left 16
:align-items :center :padding-right 16
:flex-direction :row} :align-items :center
:flex-direction :row}
container-style)} container-style)}
(when (= chevron-position :left) (when (= chevron-position :left)
[rn/view [rn/view

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

@ -1,12 +1,11 @@
(ns quo2.components.list-items.channel (ns quo2.components.list-items.channel
(:require [quo2.components.avatars.channel-avatar :as channel-avatar] (: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.counter.counter :as quo2.counter]
[quo2.components.icon :as quo2.icons] [quo2.components.icon :as quo2.icons]
[quo2.components.markdown.text :as quo2.text] [quo2.components.markdown.text :as quo2.text]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.theme :as theme] [react-native.core :as rn]))
[react-native.core :as rn]
[quo2.components.common.unread-grey-dot.view :refer [unread-grey-dot]]))
(def ^:private custom-props (def ^:private custom-props
[:name :locked? :mentions-count :unread-messages? [:name :locked? :mentions-count :unread-messages?
@ -21,22 +20,20 @@
name-text (:name props)] name-text (:name props)]
[rn/touchable-opacity standard-props [rn/touchable-opacity standard-props
[rn/view [rn/view
{:style (merge {:height 48 {:style (cond-> {:height 48
:display :flex :border-radius 12
:border-radius 12 :flex-direction :row
:flex-direction :row :justify-content :space-between
:justify-content :space-between :align-items :center
:align-items :center :width "100%"
:width "100%" :padding-left 12
:padding-left 12 :padding-right 12}
:padding-right 12} is-active-channel? (assoc :background-color
(when is-active-channel? (colors/theme-alpha channel-color 0.05 0.05)))}
{:background-color (colors/theme-alpha channel-color 0.05 0.05)}))}
[rn/view [rn/view
{:display :flex {:style {:flex-direction :row
:flex-direction :row :justify-content :flex-start
:justify-content :flex-start :align-items :center}
:align-items :center
:accessible true :accessible true
:accessibility-label :chat-name-text} :accessibility-label :chat-name-text}
[channel-avatar/channel-avatar [channel-avatar/channel-avatar
@ -45,30 +42,25 @@
:emoji-background-color (colors/theme-alpha channel-color 0.1 0.1) :emoji-background-color (colors/theme-alpha channel-color 0.1 0.1)
:emoji emoji}] :emoji emoji}]
[quo2.text/text [quo2.text/text
{:style (merge {:margin-left 12} {:style (cond-> {:margin-left 12}
(when (and (not locked?) muted?) (and (not locked?) muted?)
{:color (if (theme/dark?) colors/neutral-60 colors/neutral-40)})) (assoc :color (colors/theme-colors colors/neutral-40 colors/neutral-60)))
:weight :medium :weight :medium
:size :paragraph-1} (str "# " name-text)]] :size :paragraph-1}
[rn/view (str "# " name-text)]]
{:style {:height 20 (when-not locked?
:justify-content :center}} [rn/view {:style {:height 20 :justify-content :center}}
(when (and (not locked?) (cond
muted?) muted?
[quo2.icons/icon :i/muted [quo2.icons/icon :i/muted
{:size 20 {:size 20
:color colors/neutral-40 :color colors/neutral-40
:container-style {:margin-right 1 :container-style {:margin-right 1 :margin-top 2}}]
:margin-top 2}}])
(when (and (not locked?) (pos? (int mentions-count))
(not muted?) [rn/view {:style {:margin-right 2 :margin-top 2}}
(pos? (int mentions-count))) [quo2.counter/counter {:override-bg-color channel-color}
[rn/view mentions-count]]
{:style {:margin-right 2
:margin-top 2}} unread-messages?
[quo2.counter/counter {:override-bg-color channel-color} mentions-count]]) [unread-grey-dot :unviewed-messages-public])])]]))
(when (and (not locked?)
(not muted?)
(not (pos? (int 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] [reagent.core :as reagent]
[status-im2.common.home.actions.view :as actions] [status-im2.common.home.actions.view :as actions]
[status-im2.common.password-authentication.view :as password-authentication] [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.style :as scroll-page.style]
[status-im2.common.scroll-page.view :as scroll-page]
[status-im2.constants :as constants] [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.actions.community-options.view :as options]
[status-im2.contexts.communities.overview.style :as style] [status-im2.contexts.communities.overview.style :as style]
[status-im2.contexts.communities.overview.utils :as utils] [status-im2.contexts.communities.overview.utils :as utils]
[utils.i18n :as i18n] [utils.i18n :as i18n]
[utils.re-frame :as rf] [utils.re-frame :as rf]))
[status-im2.contexts.communities.actions.chat.view :as chat-actions]))
(defn preview-user-list (defn preview-user-list
[user-list] [user-list]
@ -48,6 +48,20 @@
[event] [event]
(oops/oget event "nativeEvent.layout.y")) (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 (defn channel-list-component
[{:keys [on-category-layout community-id on-first-channel-height-changed]} [{:keys [on-category-layout community-id on-first-channel-height-changed]}
channels-list] channels-list]
@ -57,48 +71,28 @@
(int (Math/ceil (layout-y %)))) (int (Math/ceil (layout-y %))))
(into #{} (map (comp :name second) channels-list))) (into #{} (map (comp :name second) channels-list)))
:style {:margin-top 20 :flex 1}} :style {:margin-top 20 :flex 1}}
(for [[category-id {:keys [chats name collapsed?]}] channels-list] (doall
[rn/view (for [[category-id {:keys [chats name collapsed?]}] channels-list]
{:flex 1 [rn/view
:key category-id {:style {:flex 1}
;; on-layout fires only when the component re-renders, so :key category-id
;; in case the category hasn't changed, it will not be fired ;; on-layout fires only when the component re-renders, so
:on-layout #(on-category-layout name (int (layout-y %)))} ;; in case the category hasn't changed, it will not be fired
(when-not (= constants/empty-category-id category-id) :on-layout #(on-category-layout name (int (layout-y %)))}
[quo/divider-label (when-not (= constants/empty-category-id category-id)
{:label name [quo/divider-label
:on-press #(collapse-category {:container-style {:padding-left 16
community-id :padding-right 20
category-id :padding-top 6 ; Because of border width of 1
collapsed?) :padding-bottom 7}
:chevron-icon (if collapsed? :main-icons/chevron-right :main-icons/chevron-down) :label name
:padding-bottom (if collapsed? 7 0) :on-press #(collapse-category community-id category-id collapsed?)
:chevron-position :left}]) :chevron-icon (if collapsed? :i/chevron-right :i/chevron-down)
(when-not collapsed? :chevron-position :left}])
[rn/view (when-not collapsed?
{:style {:margin-left 8 (into [rn/view {:style {:padding-horizontal 8 :padding-bottom 8}}]
:margin-top 10 (map #(channel-chat-item community-id %))
:margin-bottom 8}} chats))]))])
(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])}])))]])])])])
(defn request-to-join-text (defn request-to-join-text
[is-open?] [is-open?]
@ -208,7 +202,7 @@
(defn status-tag (defn status-tag
[pending? joined] [pending? joined]
(when (or 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 [quo/status-tag
{:status {:type (if joined :positive :pending)} {:status {:type (if joined :positive :pending)}
:label (if joined :label (if joined
@ -317,9 +311,8 @@
(->> categories-heights (->> categories-heights
(sort-by (comp - second)) (sort-by (comp - second))
(some (fn [[category height]] (some (fn [[category height]]
(and (and (>= scroll-height (+ height first-channel-height))
(>= scroll-height (+ height first-channel-height)) category)))))
category)))))
(defn community-card-page-view (defn community-card-page-view
[] []
@ -327,11 +320,11 @@
first-channel-height (reagent/atom 0) first-channel-height (reagent/atom 0)
scroll-height (reagent/atom 0)] scroll-height (reagent/atom 0)]
(fn [id] (fn [id]
(let [{:keys [name images id] :as community} (let [{:keys [name images id]
(rf/sub [:communities/community id]) :as community} (rf/sub [:communities/community id])
pending? (rf/sub [:communities/my-pending-request-to-join id]) pending? (rf/sub [:communities/my-pending-request-to-join id])
cover {:uri (get-in images [:banner :uri])} cover {:uri (get-in images [:banner :uri])}
logo {:uri (get-in images [:thumbnail :uri])}] logo {:uri (get-in images [:thumbnail :uri])}]
[scroll-page/scroll-page [scroll-page/scroll-page
{:cover-image cover {:cover-image cover
:logo logo :logo logo
@ -362,8 +355,7 @@
(defn overview (defn overview
[id] [id]
(let [id (or id (rf/sub [:get-screen-params :community-overview]))] (let [id (or id (rf/sub [:get-screen-params :community-overview]))]
[rn/view [rn/view {:style style/community-overview-container}
{:style style/community-overview-container}
[community-card-page-view id] [community-card-page-view id]
[floating-shell-button/floating-shell-button [floating-shell-button/floating-shell-button
{:jump-to {:on-press #(rf/dispatch [:shell/navigate-to-jump-to]) {:jump-to {:on-press #(rf/dispatch [:shell/navigate-to-jump-to])