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))))
(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))]

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]]])
(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}

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

@ -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})

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

@ -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})

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

@ -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))

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

@ -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}

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

@ -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]]]]]))

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

@ -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

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

@ -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}]]))

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)
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]}]

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

@ -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})

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)}])
[(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]]]

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

@ -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]

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

@ -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})

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

@ -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})

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

@ -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

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
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