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

[#18985] Polish group details view (#19032)

This commit is contained in:
flexsurfer 2024-03-06 16:36:52 +01:00 committed by GitHub
parent 7d6b2ac87a
commit 5fd0b27589
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
17 changed files with 103 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/legacy/status_im/contact/db.cljs
View File

@ -45,12 +45,12 @@
(query-fn (comp participant-set :public-key) (vals all-contacts)))) (query-fn (comp participant-set :public-key) (vals all-contacts))))
(defn get-all-contacts-in-group-chat (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-> (let [current-contact (some->
current-account 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}) (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 all-contacts (cond-> contacts
current-contact current-contact
(assoc public-key current-contact))] (assoc public-key current-contact))]

4
src/quo/components/community/channel_actions.cljs
View File

@ -20,8 +20,8 @@
[text/text {:size :paragraph-1 :weight :medium :number-of-lines 2} label]]]) [text/text {:size :paragraph-1 :weight :medium :number-of-lines 2} label]]])
(defn channel-actions (defn channel-actions
[{:keys [style actions]}] [{:keys [container-style actions]}]
[rn/view {:style (merge {:flex-direction :row :flex 1} style)} [rn/view {:style (assoc container-style :flex-direction :row)}
(map-indexed (map-indexed
(fn [index action] (fn [index action]
^{:key index} ^{:key index}

1
src/quo/components/community/style.cljs
View File

@ -142,7 +142,6 @@
[color] [color]
{:padding 12 {:padding 12
:height 102 :height 102
:flex 1
:border-radius 16 :border-radius 16
:background-color (colors/custom-color color 50 10) :background-color (colors/custom-color color 50 10)
:justify-content :space-between}) :justify-content :space-between})

9
src/quo/components/gradient/gradient_cover/style.cljs
View File

@ -2,5 +2,10 @@
(defn root-container (defn root-container
[opacity height] [opacity height]
{:height (or height 252) {:height (or height 252)
:opacity opacity}) :opacity opacity
:position :absolute
:top 0
:left 0
:right 0
:z-index -1})

2
src/quo/components/navigation/page_nav/view.cljs
View File

@ -35,7 +35,7 @@
:on-press on-press :on-press on-press
:background (if behind-overlay? :background (if behind-overlay?
:blur :blur
(button-properties/backgrounds background)) (when (button-properties/backgrounds background) background))
:accessibility-label accessibility-label} :accessibility-label accessibility-label}
icon-name])] icon-name])]
children)) children))

3
src/quo/components/share/share_qr_code/view.cljs
View File

@ -150,8 +150,7 @@
profile-picture emoji on-share-press address] profile-picture emoji on-share-press address]
:as props}] :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/content-container}
[rn/view {:style style/share-qr-container} [rn/view {:style style/share-qr-container}
[rn/view {:style style/share-qr-inner-container} [rn/view {:style style/share-qr-inner-container}

7
src/status_im/common/bottom_sheet/view.cljs
View File

@ -132,10 +132,9 @@
:shell? shell? :shell? shell?
:padding-bottom content-padding-bottom})} :padding-bottom content-padding-bottom})}
(when (and gradient-cover? customization-color) (when (and gradient-cover? customization-color)
[rn/view {:style style/gradient-bg} [quo/gradient-cover
[quo/gradient-cover {:customization-color customization-color
{:customization-color customization-color :opacity 0.4}])
:opacity 0.4}]])
(when-not hide-handle? (when-not hide-handle?
[quo/drawer-bar]) [quo/drawer-bar])
[content]]]]])) [content]]]]]))

8
src/status_im/contexts/chat/group_details/style.cljs
View File

@ -2,11 +2,9 @@
(:require (:require
[quo.foundations.colors :as colors])) [quo.foundations.colors :as colors]))
(defn actions-view (def actions-view
[] {:margin-top 8
{:flex-direction :row :margin-bottom 20
:justify-content :space-between
:margin-vertical 20
:padding-horizontal 20}) :padding-horizontal 20})
(defn action-container (defn action-container

162
src/status_im/contexts/chat/group_details/view.cljs
View File

@ -12,53 +12,6 @@
[utils.i18n :as i18n] [utils.i18n :as i18n]
[utils.re-frame :as rf])) [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 (defn group-chat-member-toggle
[member? selected? public-key] [member? selected? public-key]
(if-not member? (if-not member?
@ -143,79 +96,74 @@
:on-press show-profile-actions}}) :on-press show-profile-actions}})
item])) 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 (defn group-details
[] []
(let [chat-id (rf/sub [:get-screen-params :group-chat-profile]) (let [chat-id (rf/sub [:get-screen-params :group-chat-profile])
{:keys [admins chat-id chat-name color public? {:keys [admins chat-id chat-name color muted contacts]
muted contacts]
:as group} (rf/sub [:chats/chat-by-id chat-id]) :as group} (rf/sub [:chats/chat-by-id chat-id])
members (rf/sub [:contacts/group-members-sections chat-id]) members (rf/sub [:contacts/group-members-sections chat-id])
pinned-messages (rf/sub [:chats/pinned chat-id]) pinned-messages (rf/sub [:chats/pinned chat-id])
current-pk (rf/sub [:multiaccount/public-key]) current-pk (rf/sub [:multiaccount/public-key])
admin? (get admins current-pk)] admin? (get admins current-pk)]
[rn/view [:<>
{:style {:flex 1 [quo/gradient-cover
:background-color (colors/theme-colors colors/white colors/neutral-95)}} {:height 286
[quo/header :customization-color color}]
{:left-component [back-button] [quo/page-nav
:right-component [options-button group] {:type :no-title
:background (colors/theme-colors colors/white colors/neutral-95)}] :background :photo
[rn/view :right-side [{:icon-name :i/options
{:style {:flex-direction :row :on-press #(rf/dispatch [:show-bottom-sheet
:margin-top 24 {:content (fn [] [actions/group-details-actions
:padding-horizontal 20}} group])}])}]
[quo/group-avatar :icon-name :i/arrow-left
{:customization-color color :on-press #(rf/dispatch [:navigate-back])}]
:size :size-32}]
[quo/text [quo/page-top
{:weight :semi-bold {:title chat-name
:size :heading-1 :avatar {:customization-color color}}]
:style {:margin-horizontal 8}} chat-name] [quo/channel-actions
[rn/view {:style {:margin-top 8}} {:container-style style/actions-view
[quo/icon (if public? :i/world :i/privacy) :actions [{:accessibility-label :pinned-messages
{:size 20 :color (colors/theme-colors colors/neutral-50 colors/neutral-40)}]]] :label (i18n/label :t/pinned-messages)
[rn/view {:style (style/actions-view)} :color color
[rn/touchable-opacity :icon :i/pin
{:style (style/action-container color) :counter-value (count pinned-messages)
:accessibility-label :pinned-messages :on-press (fn []
:on-press (fn [] (rf/dispatch [:dismiss-keyboard])
(rf/dispatch [:dismiss-keyboard]) (rf/dispatch [:pin-message/show-pins-bottom-sheet
(rf/dispatch [:pin-message/show-pins-bottom-sheet chat-id]))} chat-id]))}
[rn/view {:accessibility-label :toggle-mute
{:style {:flex-direction :row :color color
:justify-content :space-between}} :icon (if muted :i/muted :i/activity-center)
[quo/icon :i/pin {:size 20 :color (colors/theme-colors colors/neutral-100 colors/white)}] :label (i18n/label (if muted :unmute-group :mute-group))
[count-container (count pinned-messages) :pinned-count]] :on-press #(rf/dispatch [:chat.ui/mute chat-id (not muted)
[quo/text {:style {:margin-top 16} :size :paragraph-1 :weight :medium} (when-not muted
(i18n/label :t/pinned-messages)]] constants/mute-till-unmuted)])}
[rn/touchable-opacity {:accessibility-label :manage-members
{:style (style/action-container color) :color color
:accessibility-label :toggle-mute :icon :i/add-user
:on-press #(rf/dispatch [:chat.ui/mute chat-id (not muted) :label (i18n/label (if admin? :t/manage-members :t/add-members))
(when-not muted constants/mute-till-unmuted)])} :counter-value (count contacts)
[quo/icon (if muted :i/muted :i/activity-center) :on-press (fn []
{:size 20 :color (colors/theme-colors colors/neutral-100 colors/white)}] (rf/dispatch [:group/clear-added-participants])
[quo/text {:style {:margin-top 16} :size :paragraph-1 :weight :medium} (rf/dispatch [:group/clear-removed-members])
(i18n/label (if muted :unmute-group :mute-group))]] (rf/dispatch [:open-modal :group-add-manage-members
[rn/touchable-opacity chat-id]))}]}]
{: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))]]]
[rn/section-list [rn/section-list
{:key-fn :title {:key-fn :title
:sticky-section-headers-enabled false :sticky-section-headers-enabled false
:sections members :sections members
:render-section-header-fn contacts-section-header :render-section-header-fn contacts-section-header
:render-section-footer-fn contacts-section-footer
:render-data {:chat-id chat-id :render-data {:chat-id chat-id
:admin? admin?} :admin? admin?}
:render-fn contact-item-render}]])) :render-fn contact-item-render}]]))

44
src/status_im/contexts/chat/messenger/messages/list/view.cljs
View File

@ -143,28 +143,28 @@
mute-chat-label (if community-channel? :t/mute-channel :t/mute-chat) mute-chat-label (if community-channel? :t/mute-channel :t/mute-chat)
unmute-chat-label (if community-channel? :t/unmute-channel :t/unmute-chat)] unmute-chat-label (if community-channel? :t/unmute-channel :t/unmute-chat)]
[quo/channel-actions [quo/channel-actions
{:style {:margin-top 16} {:container-style {:margin-top 16}
:actions [{:accessibility-label :action-button-pinned :actions [{:accessibility-label :action-button-pinned
:big? true :big? true
:label (or latest-pin-text (i18n/label :t/no-pinned-messages)) :label (or latest-pin-text (i18n/label :t/no-pinned-messages))
:color cover-bg-color :color cover-bg-color
:icon :i/pin :icon :i/pin
:counter-value pins-count :counter-value pins-count
:on-press (fn [] :on-press (fn []
(rf/dispatch [:pin-message/show-pins-bottom-sheet (rf/dispatch [:pin-message/show-pins-bottom-sheet
chat-id]))} chat-id]))}
{:accessibility-label :action-button-mute {:accessibility-label :action-button-mute
:label (i18n/label (if muted :label (i18n/label (if muted
unmute-chat-label unmute-chat-label
mute-chat-label)) mute-chat-label))
:color cover-bg-color :color cover-bg-color
:icon (if muted? :i/activity-center :i/muted) :icon (if muted? :i/activity-center :i/muted)
:on-press (fn [] :on-press (fn []
(if muted? (if muted?
(home.actions/unmute-chat-action chat-id) (home.actions/unmute-chat-action chat-id)
(home.actions/mute-chat-action chat-id (home.actions/mute-chat-action chat-id
chat-type chat-type
muted?)))}]}])) muted?)))}]}]))
(defn f-list-footer (defn f-list-footer
[{:keys [chat distance-from-list-top theme customization-color]}] [{:keys [chat distance-from-list-top theme customization-color]}]

4
src/status_im/contexts/communities/actions/share_community_channel/style.cljs
View File

@ -30,6 +30,4 @@
(defn gradient-cover-wrapper (defn gradient-cover-wrapper
[width] [width]
{:width (gradient-cover-size width) {:width (gradient-cover-size width)
:position :absolute :border-radius 12})
:border-radius 12
:z-index -1})

5
src/status_im/contexts/preview/quo/gradient/gradient_cover.cljs
View File

@ -66,11 +66,6 @@
:source (resources/get-mock-image :dark-blur-bg)}]) :source (resources/get-mock-image :dark-blur-bg)}])
[(if @blur? blur/view rn/view) [(if @blur? blur/view rn/view)
{:style {:height 332 {:style {:height 332
:position :absolute
:top 0
:left 0
:right 0
:bottom 0
:padding-vertical 40} :padding-vertical 40}
:blur-type :dark} :blur-type :dark}
[quo/gradient-cover @state]]] [quo/gradient-cover @state]]]

1
src/status_im/contexts/preview/quo/preview.cljs
View File

@ -1,6 +1,7 @@
(ns status-im.contexts.preview.quo.preview (ns status-im.contexts.preview.quo.preview
(:require (:require
[camel-snake-kebab.core :as camel-snake-kebab] [camel-snake-kebab.core :as camel-snake-kebab]
cljs.pprint
[clojure.string :as string] [clojure.string :as string]
[quo.core :as quo] [quo.core :as quo]
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]

8
src/status_im/contexts/wallet/common/screen_base/create_or_edit_account/style.cljs
View File

@ -6,14 +6,6 @@
{:flex 1 {:flex 1
:margin-top top}) :margin-top top})
(defn gradient-cover-container
[top]
{:position :absolute
:top (- top)
:left 0
:right 0
:z-index -1})
(def account-avatar-container (def account-avatar-container
{:padding-horizontal 20 {:padding-horizontal 20
:padding-top 12}) :padding-top 12})

8
src/status_im/contexts/wallet/create_account/style.cljs
View File

@ -2,14 +2,6 @@
(:require (:require
[quo.foundations.colors :as colors])) [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 (def account-avatar-container
{:padding-horizontal 20 {:padding-horizontal 20
:padding-top 12}) :padding-top 12})

2
src/status_im/contexts/wallet/create_account/view.cljs
View File

@ -78,7 +78,7 @@
:on-press #(rf/dispatch [:navigate-back])}] :on-press #(rf/dispatch [:navigate-back])}]
[quo/gradient-cover [quo/gradient-cover
{:customization-color @account-color {:customization-color @account-color
:container-style (style/gradient-cover-container top)}] :container-style {:top (- top)}}]
[rn/view [rn/view
{:style style/account-avatar-container} {:style style/account-avatar-container}
[quo/account-avatar [quo/account-avatar

7
src/status_im/contexts/wallet/sheets/account_options/view.cljs
View File

@ -52,10 +52,9 @@
:overlay-color (quo.theme/theme-value colors/white-70-blur :overlay-color (quo.theme/theme-value colors/white-70-blur
colors/neutral-95-opa-70-blur colors/neutral-95-opa-70-blur
theme)}]) theme)}])
[rn/view {:style style/gradient-container} [quo/gradient-cover
[quo/gradient-cover {:customization-color color
{:customization-color color :opacity 0.4}]
:opacity 0.4}]]
[quo/drawer-bar] [quo/drawer-bar]
[quo/drawer-top [quo/drawer-top
(cond-> {:title name (cond-> {:title name