diff --git a/src/quo/components/list_items/user.cljs b/src/quo/components/list_items/user.cljs index 7e774abc7c..740af6ea4c 100644 --- a/src/quo/components/list_items/user.cljs +++ b/src/quo/components/list_items/user.cljs @@ -8,7 +8,7 @@ [quo.foundations.colors :as colors] [react-native.core :as rn])) -(def container-style +(def container {:margin-horizontal 8 :padding-vertical 8 :padding-horizontal 12 @@ -43,9 +43,9 @@ (defn user [{:keys [short-chat-key primary-name secondary-name photo-path online? contact? verified? untrustworthy? on-press on-long-press accessory customization-color theme - allow-multiple-presses? disabled?]}] + allow-multiple-presses? disabled? container-style]}] [rn/touchable-highlight - {:style container-style + {:style (merge container container-style) :underlay-color (colors/resolve-color customization-color theme 5) :allow-multiple-presses? allow-multiple-presses? :accessibility-label :user-list diff --git a/src/status_im/common/contact_list_item/view.cljs b/src/status_im/common/contact_list_item/view.cljs index 29581044d0..90b88c5589 100644 --- a/src/status_im/common/contact_list_item/view.cljs +++ b/src/status_im/common/contact_list_item/view.cljs @@ -6,7 +6,8 @@ (defn contact-list-item [{:keys [on-press on-long-press accessory allow-multiple-presses? disabled?]} - {:keys [primary-name secondary-name public-key compressed-key ens-verified added?]} + {:keys [primary-name secondary-name public-key compressed-key ens-verified added? + container-style]} theme] (let [photo-path (rf/sub [:chats/photo-path public-key]) online? (rf/sub [:visibility-status-updates/online? public-key]) @@ -25,4 +26,5 @@ :on-press on-press :on-long-press on-long-press :accessory accessory + :container-style container-style :disabled? disabled?}])) diff --git a/src/status_im/constants.cljs b/src/status_im/constants.cljs index 9c0c4f7da1..e6d6ee0fad 100644 --- a/src/status_im/constants.cljs +++ b/src/status_im/constants.cljs @@ -548,3 +548,5 @@ (def ^:const community-joined-notification-type "communityJoined") (def ^:const default-telemetry-server-url "https://telemetry.status.im") + +(def ^:const contact-item-height 56) diff --git a/src/status_im/contexts/communities/actions/channel_view_details/view.cljs b/src/status_im/contexts/communities/actions/channel_view_details/view.cljs index 9547aae8a6..d70078262e 100644 --- a/src/status_im/contexts/communities/actions/channel_view_details/view.cljs +++ b/src/status_im/contexts/communities/actions/channel_view_details/view.cljs @@ -6,32 +6,44 @@ [status-im.common.contact-list-item.view :as contact-list-item] [status-im.common.contact-list.view :as contact-list] [status-im.common.home.actions.view :as home.actions] + [status-im.constants :as constants] [status-im.contexts.communities.actions.channel-view-details.style :as style] [status-im.feature-flags :as ff] [utils.i18n :as i18n] [utils.re-frame :as rf])) (defn- contact-item - [public-key] - (let [show-profile-actions #(rf/dispatch - [:show-bottom-sheet - {:content (fn [] [home.actions/contact-actions - {:public-key public-key}])}]) - [primary-name secondary-name] (rf/sub [:contacts/contact-two-names-by-identity - public-key]) - {:keys [ens-verified added? compressed-key]} (rf/sub [:contacts/contact-by-address public-key]) - theme (quo.theme/use-theme)] + [public-key _ _ {:keys [theme]}] + (let [show-profile-actions (rn/use-callback + (fn [] + (rf/dispatch + [:show-bottom-sheet + {:content (fn [] [home.actions/contact-actions + {:public-key public-key}])}])) + [public-key]) + on-press (rn/use-callback + (fn [] + (rf/dispatch [:chat.ui/show-profile public-key])) + [public-key]) + [primary-name + secondary-name] (rf/sub [:contacts/contact-two-names-by-identity public-key]) + {:keys [ens-verified + added? + compressed-key]} (rf/sub [:contacts/contact-by-address public-key])] [contact-list-item/contact-list-item - {:on-press #(rf/dispatch [:chat.ui/show-profile public-key]) + {:on-press on-press :on-long-press show-profile-actions :accessory {:type :options :on-press show-profile-actions}} - {:primary-name primary-name - :secondary-name secondary-name - :compressed-key compressed-key - :public-key public-key - :ens-verified ens-verified - :added? added?} + {:primary-name primary-name + :secondary-name secondary-name + :compressed-key compressed-key + :public-key public-key + :ens-verified ens-verified + :added? added? + ;; We hardcode the height of the container to match exactly the height + ;; used in the `get-item-layout` function. + :container-style {:height constants/contact-item-height}} theme])) (defn- footer @@ -40,10 +52,12 @@ (defn- get-item-layout [_ index] - #js {:length 200 :offset (* 200 index) :index index}) + #js {:length constants/contact-item-height + :offset (* constants/contact-item-height index) + :index index}) (defn- members - [items] + [items theme] [rn/section-list {:key-fn :public-key :content-container-style {:padding-bottom 20} @@ -53,70 +67,70 @@ :sticky-section-headers-enabled false :render-section-header-fn contact-list/contacts-section-header :render-section-footer-fn footer + :render-data {:theme theme} :render-fn contact-item - :scroll-event-throttle 8}]) + :scroll-event-throttle 32}]) (defn view - [_args] - (fn [] - (let [{:keys [chat-id community-id]} (rf/sub [:get-screen-params - :screen/chat.view-channel-members-and-details]) - {:keys [description chat-name emoji muted chat-type color] - :as chat} (rf/sub [:chats/chat-by-id chat-id]) - pins-count (rf/sub [:chats/pin-messages-count chat-id]) - items (rf/sub [:communities/sorted-community-members-section-list - community-id chat-id]) - theme (quo.theme/use-theme)] - (rn/use-mount (fn [] - (rf/dispatch [:pin-message/load-pin-messages chat-id]))) - [:<> - (when (ff/enabled? ::ff/shell.jump-to) - [quo/floating-shell-button - {:jump-to {:on-press #(rf/dispatch [:shell/navigate-to-jump-to]) - :customization-color color - :label (i18n/label :t/jump-to)}} - style/floating-shell-button]) - [quo/gradient-cover {:customization-color color :opacity 0.4}] - [quo/page-nav - {:background :blur - :icon-name :i/arrow-left - :on-press #(rf/dispatch [:navigate-back]) - :right-side [{:icon-name :i/options - :on-press #(rf/dispatch [:show-bottom-sheet - {:content (fn [] [home.actions/chat-actions - chat - false - true])}])}]}] - [quo/text-combinations - {:container-style style/text-combinations - :title [quo/channel-name - {:channel-name chat-name - :unlocked? true}] - :theme theme - :emoji (when (not (string/blank? emoji)) (string/trim emoji)) - :customization-color color - :title-accessibility-label :welcome-title - :description description - :description-accessibility-label :welcome-sub-title}] - [rn/view {:style style/wrapper} - [rn/view - {:style style/channel-actions-wrapper} - [quo/channel-actions - {:actions - [{:big? true - :label (i18n/label :t/pinned-messages-2) - :customization-color color - :icon :i/pin - :counter-value pins-count - :on-press (fn [] - (rf/dispatch [:dismiss-keyboard]) - (rf/dispatch [:pin-message/show-pins-bottom-sheet - chat-id]))} - {:label (if muted (i18n/label :t/unmute-channel) (i18n/label :t/mute-channel)) - :customization-color color - :icon (if muted :i/muted :i/activity-center) - :on-press (fn [] - (if muted - (home.actions/unmute-chat-action chat-id) - (home.actions/mute-chat-action chat-id chat-type muted)))}]}]]] - [members items color]]))) + [] + (let [{:keys [chat-id community-id]} (rf/sub [:get-screen-params + :screen/chat.view-channel-members-and-details]) + {:keys [description chat-name emoji muted chat-type color] + :as chat} (rf/sub [:chats/chat-by-id chat-id]) + pins-count (rf/sub [:chats/pin-messages-count chat-id]) + items (rf/sub [:communities/sorted-community-members-section-list + community-id chat-id]) + theme (quo.theme/use-theme)] + (rn/use-mount (fn [] + (rf/dispatch [:pin-message/load-pin-messages chat-id]))) + [:<> + (when (ff/enabled? ::ff/shell.jump-to) + [quo/floating-shell-button + {:jump-to {:on-press #(rf/dispatch [:shell/navigate-to-jump-to]) + :customization-color color + :label (i18n/label :t/jump-to)}} + style/floating-shell-button]) + [quo/gradient-cover {:customization-color color :opacity 0.4}] + [quo/page-nav + {:background :blur + :icon-name :i/arrow-left + :on-press #(rf/dispatch [:navigate-back]) + :right-side [{:icon-name :i/options + :on-press #(rf/dispatch [:show-bottom-sheet + {:content (fn [] [home.actions/chat-actions + chat + false + true])}])}]}] + [quo/text-combinations + {:container-style style/text-combinations + :title [quo/channel-name + {:channel-name chat-name + :unlocked? true}] + :theme theme + :emoji (when (not (string/blank? emoji)) (string/trim emoji)) + :customization-color color + :title-accessibility-label :welcome-title + :description description + :description-accessibility-label :welcome-sub-title}] + [rn/view {:style style/wrapper} + [rn/view + {:style style/channel-actions-wrapper} + [quo/channel-actions + {:actions + [{:big? true + :label (i18n/label :t/pinned-messages-2) + :customization-color color + :icon :i/pin + :counter-value pins-count + :on-press (fn [] + (rf/dispatch [:dismiss-keyboard]) + (rf/dispatch [:pin-message/show-pins-bottom-sheet + chat-id]))} + {:label (if muted (i18n/label :t/unmute-channel) (i18n/label :t/mute-channel)) + :customization-color color + :icon (if muted :i/muted :i/activity-center) + :on-press (fn [] + (if muted + (home.actions/unmute-chat-action chat-id) + (home.actions/mute-chat-action chat-id chat-type muted)))}]}]]] + [members items theme]]))