status-im/status-react
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

New community header

Browse Source
This commit is contained in:
alwx
2023-11-20 09:51:47 +01:00
parent 86c5505c94
commit 811deb35ab
4 changed files with 117 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/status_im2/common/scroll_page/view.cljs
+2
View File
@@ -102,6 +102,7 @@
overlay-shown? sticky-header]}
children]
[:<>
;; TODO(alwx): that's the header itself
[:f> f-scroll-page-header
{:scroll-height @scroll-height
:height height
@@ -112,6 +113,7 @@
:collapsed? collapsed?
:page-nav-props page-nav-props
:overlay-shown? overlay-shown?}]
[rn/scroll-view
{:content-container-style {:flex-grow 1}
:content-inset-adjustment-behavior :never
src/status_im2/contexts/chat/messages/list/view.cljs
+3
View File
@@ -257,6 +257,7 @@
[{:keys [chat-id invitation-admin]}]
[rn/view
[chat.group/group-chat-footer chat-id invitation-admin]])
(defn footer-on-layout
[e messages-view-header-height]
(let [height (oops/oget e "nativeEvent.layout.height")
@@ -322,10 +323,12 @@
:key-fn list-key-fn
:ref list-ref
:bounces false
;; TODO(alwx): list-header indicates offsets
:header [:<>
[list-header insets (:able-to-send-message? context) theme]
(when (= (:chat-type chat) constants/private-group-chat-type)
[list-group-chat-header chat])]
;; TODO(alwx): list-footer is basically a header, yes
:footer [list-footer
{:theme theme
:chat chat
src/status_im2/contexts/chat/messages/view.cljs
+1
View File
@@ -67,6 +67,7 @@
:on-end-reached? on-end-reached?
:messages-list-on-layout-finished? messages-list-on-layout-finished?}]
;; TODO(alwx): this part is basically the top bar itself, shown only when scrolled
[messages.navigation/navigation-view
{:scroll-y scroll-y
:animate-topbar-name? animate-topbar-name?
src/status_im2/contexts/communities/overview/view.cljs
+111 -84
View File
@@ -37,8 +37,8 @@
(defn add-category-height
[categories-heights category height]
(swap! categories-heights
(fn [heights]
(assoc heights category height))))
(fn [heights]
(assoc heights category height))))
(defn collapse-category
[community-id category-id collapsed?]
@@ -51,22 +51,22 @@
(defn- channel-chat-item
[community-id community-color
{:keys [name emoji muted? id mentions-count unread-messages? on-press locked?] :as chat}]
(let [sheet-content [actions/chat-actions
(assoc chat
:chat-type constants/community-chat-type
:chat-id (str community-id id))
false]
notification (cond
muted? :mute
(> mentions-count 0) :mention
unread-messages? :notification
:else nil)
channel-options {:name name
:emoji emoji
:customization-color community-color
:mentions-count mentions-count
:locked? locked?
:notification notification}
(let [sheet-content [actions/chat-actions
(assoc chat
:chat-type constants/community-chat-type
:chat-id (str community-id id))
false]
notification (cond
muted? :mute
(> mentions-count 0) :mention
unread-messages? :notification
:else nil)
channel-options {:name name
:emoji emoji
:customization-color community-color
:mentions-count mentions-count
:locked? locked?
:notification notification}
channel-sheet-data {:selected-item (fn [] [quo/channel channel-options])
:content (fn [] sheet-content)}]
[rn/view {:key id}
@@ -80,33 +80,33 @@
channels-list]
[rn/view
{:on-layout #(on-first-channel-height-changed
(+ 38 (int (Math/ceil (layout-y %))))
(into #{} (map (comp :name second) channels-list)))
(+ 38 (int (Math/ceil (layout-y %))))
(into #{} (map (comp :name second) channels-list)))
:style {:margin-top 8 :flex 1}}
(for [[category-id {:keys [chats name collapsed?]}] channels-list]
[rn/view
{: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
{:on-press #(collapse-category community-id category-id collapsed?)
:chevron-icon (if collapsed? :i/chevron-right :i/chevron-down)
:chevron :left}
name])
(when-not collapsed?
[rn/view {:style {:padding-horizontal 8 :padding-bottom 8}}
(for [chat chats]
[rn/view
{: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
{:on-press #(collapse-category community-id category-id collapsed?)
:chevron-icon (if collapsed? :i/chevron-right :i/chevron-down)
:chevron :left}
name])
(when-not collapsed?
[rn/view {:style {:padding-horizontal 8 :padding-bottom 8}}
(for [chat chats]
^{:key (:id chat)}
[channel-chat-item community-id community-color chat])])])])
(defn get-access-type
[access]
(condp = access
constants/community-no-membership-access :open
constants/community-no-membership-access :open
constants/community-invitation-only-access :invite-only
constants/community-on-request-access :request-access
constants/community-on-request-access :request-access
:unknown-access))
(defn join-gated-community
@@ -122,15 +122,15 @@
[rn/touchable-without-feedback
{:on-press
#(rf/dispatch
[:show-bottom-sheet
{:content
(fn []
[quo/documentation-drawers
{:title (i18n/label :t/token-gated-communities)
:show-button? true
:button-label (i18n/label :t/read-more)
:button-icon :info}
[quo/text (i18n/label :t/token-gated-communities-info)]])}])}
[:show-bottom-sheet
{:content
(fn []
[quo/documentation-drawers
{:title (i18n/label :t/token-gated-communities)
:show-button? true
:button-label (i18n/label :t/read-more)
:button-icon :info}
[quo/text (i18n/label :t/token-gated-communities-info)]])}])}
[rn/view
[quo/icon :i/info {:no-color true}]]])
@@ -173,9 +173,9 @@
(defn join-community
[{:keys [joined color permissions token-permissions] :as community}
pending?]
(let [access-type (get-access-type (:access permissions))
(let [access-type (get-access-type (:access permissions))
unknown-access? (= access-type :unknown-access)
invite-only? (= access-type :invite-only)]
invite-only? (= access-type :invite-only)]
[:<>
(when-not (or joined pending? invite-only? unknown-access?)
(if (seq token-permissions)
@@ -211,18 +211,18 @@
:or {locked? false}
:as chat}]
(merge
chat
(when (and (not locked?) id)
{:on-press (when joined
chat
(when (and (not locked?) id)
{:on-press (when joined
(fn []
(rf/dispatch [:dismiss-keyboard])
(debounce/dispatch-and-chill [:chat/navigate-to-chat (str community-id id)]
(rf/dispatch [:dismiss-keyboard])
(debounce/dispatch-and-chill [:chat/navigate-to-chat (str community-id id)]
1000)))
:on-long-press #(rf/dispatch
[:show-bottom-sheet
{:content (fn []
[chat-actions/actions chat false])}])
:community-id community-id})))
:on-long-press #(rf/dispatch
[:show-bottom-sheet
{:content (fn []
[chat-actions/actions chat false])}])
:community-id community-id})))
(defn add-handlers-to-chats
[community-id joined chats]
@@ -246,10 +246,10 @@
scroll-page.style/picture-border-width
12))
:margin-bottom 12}
:avatar logo
:title title
:description description
:title-accessibility-label :community-title
:avatar logo
:title title
:description description
:title-accessibility-label :community-title
:description-accessibility-label :community-description}])
(defn community-content
@@ -300,8 +300,8 @@
[{:icon-name :i/options
:accessibility-label :community-options-for-community
:on-press #(rf/dispatch
[:show-bottom-sheet
{:content (fn [] [options/community-options-bottom-sheet id])}])}])
[:show-bottom-sheet
{:content (fn [] [options/community-options-bottom-sheet id])}])}])
(defn pick-first-category-by-height
[scroll-height first-channel-height categories-heights]
@@ -313,18 +313,18 @@
(defn community-scroll-page
[{:keys [joined]}]
(let [scroll-height (reagent/atom 0)
categories-heights (reagent/atom {})
(let [scroll-height (reagent/atom 0)
categories-heights (reagent/atom {})
first-channel-height (reagent/atom 0)
;; We track the initial value of joined
;; as we open the page to avoid switching
;; from not collapsed to collapsed if the
;; user is on this page
initial-joined? joined]
initial-joined? joined]
(fn [{:keys [id name images] :as community} pending?]
(let [cover {:uri (get-in images [:banner :uri])}
logo {:uri (get-in images [:thumbnail :uri])}
collapsed? (and initial-joined? (:joined community))
(let [cover {:uri (get-in images [:banner :uri])}
logo {:uri (get-in images [:thumbnail :uri])}
collapsed? (and initial-joined? (:joined community))
overlay-shown? (boolean (:sheets (rf/sub [:bottom-sheet])))]
[scroll-page/scroll-page
{:cover-image cover
@@ -336,21 +336,21 @@
:height 148
:overlay-shown? overlay-shown?
:background-color (colors/theme-colors colors/white colors/neutral-95)
:page-nav-props {:type :community
:right-side (page-nav-right-section-buttons id)
:community-name name
:community-logo logo}
:sticky-header [sticky-category-header
{:enabled (> @scroll-height @first-channel-height)
:label (pick-first-category-by-height
@scroll-height
@first-channel-height
@categories-heights)}]}
:page-nav-props {:type :community
:right-side (page-nav-right-section-buttons id)
:community-name name
:community-logo logo}
:sticky-header [sticky-category-header
{:enabled (> @scroll-height @first-channel-height)
:label (pick-first-category-by-height
@scroll-height
@first-channel-height
@categories-heights)}]}
[community-content
community
pending?
{:on-category-layout (partial add-category-height categories-heights)
:collapsed? collapsed?
{:on-category-layout (partial add-category-height categories-heights)
:collapsed? collapsed?
:on-first-channel-height-changed
;; Here we set the height of the component and we filter out the categories, as some
;; might have been removed.
@@ -362,12 +362,12 @@
[id]
(let [{:keys [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])]
[community-scroll-page community pending?]))
(defn overview
(defn overview-old
[id]
(let [id (or id (rf/sub [:get-screen-params :community-overview]))
(let [id (or id (rf/sub [:get-screen-params :community-overview]))
customization-color (rf/sub [:profile/customization-color])]
[rn/view {:style style/community-overview-container}
[community-card-page-view id]
@@ -377,3 +377,30 @@
:label (i18n/label :t/jump-to)}}
{:position :absolute
:bottom 34}]]))
(defn community-overview-view [{:keys [id community customization-color chats-by-category]}]
(let [categories-heights (reagent/atom {})
first-channel-height (reagent/atom 0)]
[rn/scroll-view
[channel-list-component
{:on-category-layout (partial add-category-height categories-heights)
:community-id id
:community-color (:color community)
:on-first-channel-height-changed (fn [height categories]
(swap! categories-heights select-keys categories)
(reset! first-channel-height height))}
(add-handlers-to-categorized-chats id chats-by-category)]]))
(defn overview
[id]
(let [id (or id (rf/sub [:get-screen-params :community-overview]))
customization-color (rf/sub [:profile/customization-color])
community (rf/sub [:communities/community id])
chats-by-category (rf/sub [:communities/categorized-channels id])]
[rn/view {:style style/community-overview-container}
[community-overview-view {:id id
:customization-color customization-color
:community community
:chats-by-category chats-by-category}]]))