From 5fd0b27589af9599c89e72b6c6b4620df0a4440a Mon Sep 17 00:00:00 2001 From: flexsurfer Date: Wed, 6 Mar 2024 16:36:52 +0100 Subject: [PATCH] [#18985] Polish group details view (#19032) --- src/legacy/status_im/contact/db.cljs | 6 +- .../components/community/channel_actions.cljs | 4 +- src/quo/components/community/style.cljs | 1 - .../gradient/gradient_cover/style.cljs | 9 +- .../components/navigation/page_nav/view.cljs | 2 +- .../components/share/share_qr_code/view.cljs | 3 +- src/status_im/common/bottom_sheet/view.cljs | 7 +- .../contexts/chat/group_details/style.cljs | 8 +- .../contexts/chat/group_details/view.cljs | 162 ++++++------------ .../chat/messenger/messages/list/view.cljs | 44 ++--- .../share_community_channel/style.cljs | 4 +- .../preview/quo/gradient/gradient_cover.cljs | 5 - .../contexts/preview/quo/preview.cljs | 1 + .../create_or_edit_account/style.cljs | 8 - .../contexts/wallet/create_account/style.cljs | 8 - .../contexts/wallet/create_account/view.cljs | 2 +- .../wallet/sheets/account_options/view.cljs | 7 +- 17 files changed, 103 insertions(+), 178 deletions(-) diff --git a/src/legacy/status_im/contact/db.cljs b/src/legacy/status_im/contact/db.cljs index e026cbfcad..2cc0ca51a2 100644 --- a/src/legacy/status_im/contact/db.cljs +++ b/src/legacy/status_im/contact/db.cljs @@ -45,12 +45,12 @@ (query-fn (comp participant-set :public-key) (vals all-contacts)))) (defn get-all-contacts-in-group-chat - [members admins contacts {:keys [public-key preferred-name name] :as current-account}] + [members admins contacts {:keys [public-key preferred-name name display-name] :as current-account}] (let [current-contact (some-> current-account - (select-keys [:name :preferred-name :public-key :images]) + (select-keys [:name :preferred-name :public-key :images :compressed-key]) (set/rename-keys {:name :alias :preferred-name :name}) - (assoc :primary-name (or preferred-name name))) + (assoc :primary-name (or display-name preferred-name name))) all-contacts (cond-> contacts current-contact (assoc public-key current-contact))] diff --git a/src/quo/components/community/channel_actions.cljs b/src/quo/components/community/channel_actions.cljs index 3737097012..df58c60e88 100644 --- a/src/quo/components/community/channel_actions.cljs +++ b/src/quo/components/community/channel_actions.cljs @@ -20,8 +20,8 @@ [text/text {:size :paragraph-1 :weight :medium :number-of-lines 2} label]]]) (defn channel-actions - [{:keys [style actions]}] - [rn/view {:style (merge {:flex-direction :row :flex 1} style)} + [{:keys [container-style actions]}] + [rn/view {:style (assoc container-style :flex-direction :row)} (map-indexed (fn [index action] ^{:key index} diff --git a/src/quo/components/community/style.cljs b/src/quo/components/community/style.cljs index 8fd031ef86..ac8c2eb036 100644 --- a/src/quo/components/community/style.cljs +++ b/src/quo/components/community/style.cljs @@ -142,7 +142,6 @@ [color] {:padding 12 :height 102 - :flex 1 :border-radius 16 :background-color (colors/custom-color color 50 10) :justify-content :space-between}) diff --git a/src/quo/components/gradient/gradient_cover/style.cljs b/src/quo/components/gradient/gradient_cover/style.cljs index 3911127264..4e22eb48d1 100644 --- a/src/quo/components/gradient/gradient_cover/style.cljs +++ b/src/quo/components/gradient/gradient_cover/style.cljs @@ -2,5 +2,10 @@ (defn root-container [opacity height] - {:height (or height 252) - :opacity opacity}) + {:height (or height 252) + :opacity opacity + :position :absolute + :top 0 + :left 0 + :right 0 + :z-index -1}) diff --git a/src/quo/components/navigation/page_nav/view.cljs b/src/quo/components/navigation/page_nav/view.cljs index 64abd6445e..00802d221d 100644 --- a/src/quo/components/navigation/page_nav/view.cljs +++ b/src/quo/components/navigation/page_nav/view.cljs @@ -35,7 +35,7 @@ :on-press on-press :background (if behind-overlay? :blur - (button-properties/backgrounds background)) + (when (button-properties/backgrounds background) background)) :accessibility-label accessibility-label} icon-name])] children)) diff --git a/src/quo/components/share/share_qr_code/view.cljs b/src/quo/components/share/share_qr_code/view.cljs index f74961c2bb..66e50f1ebd 100644 --- a/src/quo/components/share/share_qr_code/view.cljs +++ b/src/quo/components/share/share_qr_code/view.cljs @@ -150,8 +150,7 @@ profile-picture emoji on-share-press address] :as props}] [:<> - [rn/view {:style style/gradient-bg} - [gradient-cover/view {:customization-color customization-color :height 463}]] + [gradient-cover/view {:customization-color customization-color :height 463}] [rn/view {:style style/content-container} [rn/view {:style style/share-qr-container} [rn/view {:style style/share-qr-inner-container} diff --git a/src/status_im/common/bottom_sheet/view.cljs b/src/status_im/common/bottom_sheet/view.cljs index e9063f5dab..4677b9a2d2 100644 --- a/src/status_im/common/bottom_sheet/view.cljs +++ b/src/status_im/common/bottom_sheet/view.cljs @@ -132,10 +132,9 @@ :shell? shell? :padding-bottom content-padding-bottom})} (when (and gradient-cover? customization-color) - [rn/view {:style style/gradient-bg} - [quo/gradient-cover - {:customization-color customization-color - :opacity 0.4}]]) + [quo/gradient-cover + {:customization-color customization-color + :opacity 0.4}]) (when-not hide-handle? [quo/drawer-bar]) [content]]]]])) diff --git a/src/status_im/contexts/chat/group_details/style.cljs b/src/status_im/contexts/chat/group_details/style.cljs index 6c460ace98..e930d15621 100644 --- a/src/status_im/contexts/chat/group_details/style.cljs +++ b/src/status_im/contexts/chat/group_details/style.cljs @@ -2,11 +2,9 @@ (:require [quo.foundations.colors :as colors])) -(defn actions-view - [] - {:flex-direction :row - :justify-content :space-between - :margin-vertical 20 +(def actions-view + {:margin-top 8 + :margin-bottom 20 :padding-horizontal 20}) (defn action-container diff --git a/src/status_im/contexts/chat/group_details/view.cljs b/src/status_im/contexts/chat/group_details/view.cljs index a33fd73343..27088acd71 100644 --- a/src/status_im/contexts/chat/group_details/view.cljs +++ b/src/status_im/contexts/chat/group_details/view.cljs @@ -12,53 +12,6 @@ [utils.i18n :as i18n] [utils.re-frame :as rf])) -(defn back-button - [] - [quo/button - {:type :grey - :size 32 - :icon-only? true - :container-style {:margin-left 20} - :accessibility-label :back-button - :on-press #(rf/dispatch [:navigate-back])} - :i/arrow-left]) - -(defn options-button - [group] - [quo/button - {:type :grey - :size 32 - :icon-only? true - :container-style {:margin-right 20} - :accessibility-label :options-button - :on-press #(rf/dispatch [:show-bottom-sheet - {:content (fn [] [actions/group-details-actions group])}])} - :i/options]) - -(defn count-container - [amount accessibility-label] - [rn/view - {:style (style/count-container) - :accessibility-label accessibility-label} - [quo/text - {:size :label - :weight :medium - :style {:text-align :center}} - amount]]) - -(defn contacts-section-header - [{:keys [title]}] - [rn/view - {:style {:padding-horizontal 20 - :border-top-width 1 - :border-top-color colors/neutral-20 - :padding-vertical 8 - :margin-top 8}} - [quo/text - {:size :paragraph-2 - :weight :medium - :style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}} title]]) - (defn group-chat-member-toggle [member? selected? public-key] (if-not member? @@ -143,79 +96,74 @@ :on-press show-profile-actions}}) item])) +(defn contacts-section-header + [{:keys [title]}] + [quo/divider-label {:tight? true} title]) + +(defn contacts-section-footer + [_] + [rn/view {:style {:height 8}}]) + (defn group-details [] (let [chat-id (rf/sub [:get-screen-params :group-chat-profile]) - {:keys [admins chat-id chat-name color public? - muted contacts] + {:keys [admins chat-id chat-name color muted contacts] :as group} (rf/sub [:chats/chat-by-id chat-id]) members (rf/sub [:contacts/group-members-sections chat-id]) pinned-messages (rf/sub [:chats/pinned chat-id]) current-pk (rf/sub [:multiaccount/public-key]) admin? (get admins current-pk)] - [rn/view - {:style {:flex 1 - :background-color (colors/theme-colors colors/white colors/neutral-95)}} - [quo/header - {:left-component [back-button] - :right-component [options-button group] - :background (colors/theme-colors colors/white colors/neutral-95)}] - [rn/view - {:style {:flex-direction :row - :margin-top 24 - :padding-horizontal 20}} - [quo/group-avatar - {:customization-color color - :size :size-32}] - [quo/text - {:weight :semi-bold - :size :heading-1 - :style {:margin-horizontal 8}} chat-name] - [rn/view {:style {:margin-top 8}} - [quo/icon (if public? :i/world :i/privacy) - {:size 20 :color (colors/theme-colors colors/neutral-50 colors/neutral-40)}]]] - [rn/view {:style (style/actions-view)} - [rn/touchable-opacity - {:style (style/action-container color) - :accessibility-label :pinned-messages - :on-press (fn [] - (rf/dispatch [:dismiss-keyboard]) - (rf/dispatch [:pin-message/show-pins-bottom-sheet chat-id]))} - [rn/view - {:style {:flex-direction :row - :justify-content :space-between}} - [quo/icon :i/pin {:size 20 :color (colors/theme-colors colors/neutral-100 colors/white)}] - [count-container (count pinned-messages) :pinned-count]] - [quo/text {:style {:margin-top 16} :size :paragraph-1 :weight :medium} - (i18n/label :t/pinned-messages)]] - [rn/touchable-opacity - {:style (style/action-container color) - :accessibility-label :toggle-mute - :on-press #(rf/dispatch [:chat.ui/mute chat-id (not muted) - (when-not muted constants/mute-till-unmuted)])} - [quo/icon (if muted :i/muted :i/activity-center) - {:size 20 :color (colors/theme-colors colors/neutral-100 colors/white)}] - [quo/text {:style {:margin-top 16} :size :paragraph-1 :weight :medium} - (i18n/label (if muted :unmute-group :mute-group))]] - [rn/touchable-opacity - {:style (style/action-container color) - :accessibility-label :manage-members - :on-press (fn [] - (rf/dispatch [:group/clear-added-participants]) - (rf/dispatch [:group/clear-removed-members]) - (rf/dispatch [:open-modal :group-add-manage-members chat-id]))} - [rn/view - {:style {:flex-direction :row - :justify-content :space-between}} - [quo/icon :i/add-user {:size 20 :color (colors/theme-colors colors/neutral-100 colors/white)}] - [count-container (count contacts) :members-count]] - [quo/text {:style {:margin-top 16} :size :paragraph-1 :weight :medium} - (i18n/label (if admin? :t/manage-members :t/add-members))]]] + [:<> + [quo/gradient-cover + {:height 286 + :customization-color color}] + [quo/page-nav + {:type :no-title + :background :photo + :right-side [{:icon-name :i/options + :on-press #(rf/dispatch [:show-bottom-sheet + {:content (fn [] [actions/group-details-actions + group])}])}] + :icon-name :i/arrow-left + :on-press #(rf/dispatch [:navigate-back])}] + + [quo/page-top + {:title chat-name + :avatar {:customization-color color}}] + [quo/channel-actions + {:container-style style/actions-view + :actions [{:accessibility-label :pinned-messages + :label (i18n/label :t/pinned-messages) + :color color + :icon :i/pin + :counter-value (count pinned-messages) + :on-press (fn [] + (rf/dispatch [:dismiss-keyboard]) + (rf/dispatch [:pin-message/show-pins-bottom-sheet + chat-id]))} + {:accessibility-label :toggle-mute + :color color + :icon (if muted :i/muted :i/activity-center) + :label (i18n/label (if muted :unmute-group :mute-group)) + :on-press #(rf/dispatch [:chat.ui/mute chat-id (not muted) + (when-not muted + constants/mute-till-unmuted)])} + {:accessibility-label :manage-members + :color color + :icon :i/add-user + :label (i18n/label (if admin? :t/manage-members :t/add-members)) + :counter-value (count contacts) + :on-press (fn [] + (rf/dispatch [:group/clear-added-participants]) + (rf/dispatch [:group/clear-removed-members]) + (rf/dispatch [:open-modal :group-add-manage-members + chat-id]))}]}] [rn/section-list {:key-fn :title :sticky-section-headers-enabled false :sections members :render-section-header-fn contacts-section-header + :render-section-footer-fn contacts-section-footer :render-data {:chat-id chat-id :admin? admin?} :render-fn contact-item-render}]])) diff --git a/src/status_im/contexts/chat/messenger/messages/list/view.cljs b/src/status_im/contexts/chat/messenger/messages/list/view.cljs index ae933665da..2a79b0f131 100644 --- a/src/status_im/contexts/chat/messenger/messages/list/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/list/view.cljs @@ -143,28 +143,28 @@ mute-chat-label (if community-channel? :t/mute-channel :t/mute-chat) unmute-chat-label (if community-channel? :t/unmute-channel :t/unmute-chat)] [quo/channel-actions - {:style {:margin-top 16} - :actions [{:accessibility-label :action-button-pinned - :big? true - :label (or latest-pin-text (i18n/label :t/no-pinned-messages)) - :color cover-bg-color - :icon :i/pin - :counter-value pins-count - :on-press (fn [] - (rf/dispatch [:pin-message/show-pins-bottom-sheet - chat-id]))} - {:accessibility-label :action-button-mute - :label (i18n/label (if muted - unmute-chat-label - mute-chat-label)) - :color cover-bg-color - :icon (if muted? :i/activity-center :i/muted) - :on-press (fn [] - (if muted? - (home.actions/unmute-chat-action chat-id) - (home.actions/mute-chat-action chat-id - chat-type - muted?)))}]}])) + {:container-style {:margin-top 16} + :actions [{:accessibility-label :action-button-pinned + :big? true + :label (or latest-pin-text (i18n/label :t/no-pinned-messages)) + :color cover-bg-color + :icon :i/pin + :counter-value pins-count + :on-press (fn [] + (rf/dispatch [:pin-message/show-pins-bottom-sheet + chat-id]))} + {:accessibility-label :action-button-mute + :label (i18n/label (if muted + unmute-chat-label + mute-chat-label)) + :color cover-bg-color + :icon (if muted? :i/activity-center :i/muted) + :on-press (fn [] + (if muted? + (home.actions/unmute-chat-action chat-id) + (home.actions/mute-chat-action chat-id + chat-type + muted?)))}]}])) (defn f-list-footer [{:keys [chat distance-from-list-top theme customization-color]}] diff --git a/src/status_im/contexts/communities/actions/share_community_channel/style.cljs b/src/status_im/contexts/communities/actions/share_community_channel/style.cljs index db71ed6f0d..b7c71cdafd 100644 --- a/src/status_im/contexts/communities/actions/share_community_channel/style.cljs +++ b/src/status_im/contexts/communities/actions/share_community_channel/style.cljs @@ -30,6 +30,4 @@ (defn gradient-cover-wrapper [width] {:width (gradient-cover-size width) - :position :absolute - :border-radius 12 - :z-index -1}) + :border-radius 12}) diff --git a/src/status_im/contexts/preview/quo/gradient/gradient_cover.cljs b/src/status_im/contexts/preview/quo/gradient/gradient_cover.cljs index 29a35a9bce..73c76c8c93 100644 --- a/src/status_im/contexts/preview/quo/gradient/gradient_cover.cljs +++ b/src/status_im/contexts/preview/quo/gradient/gradient_cover.cljs @@ -66,11 +66,6 @@ :source (resources/get-mock-image :dark-blur-bg)}]) [(if @blur? blur/view rn/view) {:style {:height 332 - :position :absolute - :top 0 - :left 0 - :right 0 - :bottom 0 :padding-vertical 40} :blur-type :dark} [quo/gradient-cover @state]]] diff --git a/src/status_im/contexts/preview/quo/preview.cljs b/src/status_im/contexts/preview/quo/preview.cljs index f522b1d1f7..0819b38e2e 100644 --- a/src/status_im/contexts/preview/quo/preview.cljs +++ b/src/status_im/contexts/preview/quo/preview.cljs @@ -1,6 +1,7 @@ (ns status-im.contexts.preview.quo.preview (:require [camel-snake-kebab.core :as camel-snake-kebab] + cljs.pprint [clojure.string :as string] [quo.core :as quo] [quo.foundations.colors :as colors] diff --git a/src/status_im/contexts/wallet/common/screen_base/create_or_edit_account/style.cljs b/src/status_im/contexts/wallet/common/screen_base/create_or_edit_account/style.cljs index 5b2630b86a..0eba9e3d0a 100644 --- a/src/status_im/contexts/wallet/common/screen_base/create_or_edit_account/style.cljs +++ b/src/status_im/contexts/wallet/common/screen_base/create_or_edit_account/style.cljs @@ -6,14 +6,6 @@ {:flex 1 :margin-top top}) -(defn gradient-cover-container - [top] - {:position :absolute - :top (- top) - :left 0 - :right 0 - :z-index -1}) - (def account-avatar-container {:padding-horizontal 20 :padding-top 12}) diff --git a/src/status_im/contexts/wallet/create_account/style.cljs b/src/status_im/contexts/wallet/create_account/style.cljs index 31d5fe948b..7c5d07075d 100644 --- a/src/status_im/contexts/wallet/create_account/style.cljs +++ b/src/status_im/contexts/wallet/create_account/style.cljs @@ -2,14 +2,6 @@ (:require [quo.foundations.colors :as colors])) -(defn gradient-cover-container - [top] - {:position :absolute - :top (- top) - :left 0 - :right 0 - :z-index -1}) - (def account-avatar-container {:padding-horizontal 20 :padding-top 12}) diff --git a/src/status_im/contexts/wallet/create_account/view.cljs b/src/status_im/contexts/wallet/create_account/view.cljs index f27b0912b4..53c6f106a5 100644 --- a/src/status_im/contexts/wallet/create_account/view.cljs +++ b/src/status_im/contexts/wallet/create_account/view.cljs @@ -78,7 +78,7 @@ :on-press #(rf/dispatch [:navigate-back])}] [quo/gradient-cover {:customization-color @account-color - :container-style (style/gradient-cover-container top)}] + :container-style {:top (- top)}}] [rn/view {:style style/account-avatar-container} [quo/account-avatar diff --git a/src/status_im/contexts/wallet/sheets/account_options/view.cljs b/src/status_im/contexts/wallet/sheets/account_options/view.cljs index 37f9403e42..e978d86b15 100644 --- a/src/status_im/contexts/wallet/sheets/account_options/view.cljs +++ b/src/status_im/contexts/wallet/sheets/account_options/view.cljs @@ -52,10 +52,9 @@ :overlay-color (quo.theme/theme-value colors/white-70-blur colors/neutral-95-opa-70-blur theme)}]) - [rn/view {:style style/gradient-container} - [quo/gradient-cover - {:customization-color color - :opacity 0.4}]] + [quo/gradient-cover + {:customization-color color + :opacity 0.4}] [quo/drawer-bar] [quo/drawer-top (cond-> {:title name