Skip to content

Commit 3ed1907

Browse files
flexsurferflexsurfer
committed
[#18985] Polish group details view
1 parent fcdd6c5 commit 3ed1907

File tree

16 files changed

+100
-175
lines changed

16 files changed

+100
-175
lines changed

‎src/quo/components/community/channel_actions.cljs

+2-2
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@
2020
[text/text {:size :paragraph-1 :weight :medium :number-of-lines 2} label]]])
2121

2222
(defn channel-actions
23-
[{:keys [style actions]}]
24-
[rn/view {:style (merge {:flex-direction :row :flex 1} style)}
23+
[{:keys [container-style actions]}]
24+
[rn/view {:style (assoc container-style :flex-direction :row)}
2525
(map-indexed
2626
(fn [index action]
2727
^{:key index}

‎src/quo/components/community/style.cljs

-1
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,6 @@
142142
[color]
143143
{:padding 12
144144
:height 102
145-
:flex 1
146145
:border-radius 16
147146
:background-color (colors/custom-color color 50 10)
148147
:justify-content :space-between})

‎src/quo/components/gradient/gradient_cover/style.cljs

+7-2
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,10 @@
22

33
(defn root-container
44
[opacity height]
5-
{:height (or height 252)
6-
:opacity opacity})
5+
{:height (or height 252)
6+
:opacity opacity
7+
:position :absolute
8+
:top 0
9+
:left 0
10+
:right 0
11+
:z-index -1})

‎src/quo/components/navigation/page_nav/view.cljs

+1-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
:on-press on-press
3636
:background (if behind-overlay?
3737
:blur
38-
(button-properties/backgrounds background))
38+
(when (button-properties/backgrounds background) background))
3939
:accessibility-label accessibility-label}
4040
icon-name])]
4141
children))

‎src/quo/components/share/share_qr_code/view.cljs

+1-2
Original file line numberDiff line numberDiff line change
@@ -150,8 +150,7 @@
150150
profile-picture emoji on-share-press address]
151151
:as props}]
152152
[:<>
153-
[rn/view {:style style/gradient-bg}
154-
[gradient-cover/view {:customization-color customization-color :height 463}]]
153+
[gradient-cover/view {:customization-color customization-color :height 463}]
155154
[rn/view {:style style/content-container}
156155
[rn/view {:style style/share-qr-container}
157156
[rn/view {:style style/share-qr-inner-container}

‎src/status_im/common/bottom_sheet/view.cljs

+3-4
Original file line numberDiff line numberDiff line change
@@ -132,10 +132,9 @@
132132
:shell? shell?
133133
:padding-bottom content-padding-bottom})}
134134
(when (and gradient-cover? customization-color)
135-
[rn/view {:style style/gradient-bg}
136-
[quo/gradient-cover
137-
{:customization-color customization-color
138-
:opacity 0.4}]])
135+
[quo/gradient-cover
136+
{:customization-color customization-color
137+
:opacity 0.4}])
139138
(when-not hide-handle?
140139
[quo/drawer-bar])
141140
[content]]]]]))

‎src/status_im/contexts/chat/group_details/style.cljs

+3-5
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,9 @@
22
(:require
33
[quo.foundations.colors :as colors]))
44

5-
(defn actions-view
6-
[]
7-
{:flex-direction :row
8-
:justify-content :space-between
9-
:margin-vertical 20
5+
(def actions-view
6+
{:margin-top 8
7+
:margin-bottom 20
108
:padding-horizontal 20})
119

1210
(defn action-container

‎src/status_im/contexts/chat/group_details/view.cljs

+55-107
Original file line numberDiff line numberDiff line change
@@ -12,53 +12,6 @@
1212
[utils.i18n :as i18n]
1313
[utils.re-frame :as rf]))
1414

15-
(defn back-button
16-
[]
17-
[quo/button
18-
{:type :grey
19-
:size 32
20-
:icon-only? true
21-
:container-style {:margin-left 20}
22-
:accessibility-label :back-button
23-
:on-press #(rf/dispatch [:navigate-back])}
24-
:i/arrow-left])
25-
26-
(defn options-button
27-
[group]
28-
[quo/button
29-
{:type :grey
30-
:size 32
31-
:icon-only? true
32-
:container-style {:margin-right 20}
33-
:accessibility-label :options-button
34-
:on-press #(rf/dispatch [:show-bottom-sheet
35-
{:content (fn [] [actions/group-details-actions group])}])}
36-
:i/options])
37-
38-
(defn count-container
39-
[amount accessibility-label]
40-
[rn/view
41-
{:style (style/count-container)
42-
:accessibility-label accessibility-label}
43-
[quo/text
44-
{:size :label
45-
:weight :medium
46-
:style {:text-align :center}}
47-
amount]])
48-
49-
(defn contacts-section-header
50-
[{:keys [title]}]
51-
[rn/view
52-
{:style {:padding-horizontal 20
53-
:border-top-width 1
54-
:border-top-color colors/neutral-20
55-
:padding-vertical 8
56-
:margin-top 8}}
57-
[quo/text
58-
{:size :paragraph-2
59-
:weight :medium
60-
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}} title]])
61-
6215
(defn group-chat-member-toggle
6316
[member? selected? public-key]
6417
(if-not member?
@@ -143,79 +96,74 @@
14396
:on-press show-profile-actions}})
14497
item]))
14598

99+
(defn contacts-section-header
100+
[{:keys [title]}]
101+
[quo/divider-label {:tight? true} title])
102+
103+
(defn contacts-section-footer
104+
[_]
105+
[rn/view {:style {:height 8}}])
106+
146107
(defn group-details
147108
[]
148109
(let [chat-id (rf/sub [:get-screen-params :group-chat-profile])
149-
{:keys [admins chat-id chat-name color public?
150-
muted contacts]
110+
{:keys [admins chat-id chat-name color muted contacts]
151111
:as group} (rf/sub [:chats/chat-by-id chat-id])
152112
members (rf/sub [:contacts/group-members-sections chat-id])
153113
pinned-messages (rf/sub [:chats/pinned chat-id])
154114
current-pk (rf/sub [:multiaccount/public-key])
155115
admin? (get admins current-pk)]
156-
[rn/view
157-
{:style {:flex 1
158-
:background-color (colors/theme-colors colors/white colors/neutral-95)}}
159-
[quo/header
160-
{:left-component [back-button]
161-
:right-component [options-button group]
162-
:background (colors/theme-colors colors/white colors/neutral-95)}]
163-
[rn/view
164-
{:style {:flex-direction :row
165-
:margin-top 24
166-
:padding-horizontal 20}}
167-
[quo/group-avatar
168-
{:customization-color color
169-
:size :size-32}]
170-
[quo/text
171-
{:weight :semi-bold
172-
:size :heading-1
173-
:style {:margin-horizontal 8}} chat-name]
174-
[rn/view {:style {:margin-top 8}}
175-
[quo/icon (if public? :i/world :i/privacy)
176-
{:size 20 :color (colors/theme-colors colors/neutral-50 colors/neutral-40)}]]]
177-
[rn/view {:style (style/actions-view)}
178-
[rn/touchable-opacity
179-
{:style (style/action-container color)
180-
:accessibility-label :pinned-messages
181-
:on-press (fn []
182-
(rf/dispatch [:dismiss-keyboard])
183-
(rf/dispatch [:pin-message/show-pins-bottom-sheet chat-id]))}
184-
[rn/view
185-
{:style {:flex-direction :row
186-
:justify-content :space-between}}
187-
[quo/icon :i/pin {:size 20 :color (colors/theme-colors colors/neutral-100 colors/white)}]
188-
[count-container (count pinned-messages) :pinned-count]]
189-
[quo/text {:style {:margin-top 16} :size :paragraph-1 :weight :medium}
190-
(i18n/label :t/pinned-messages)]]
191-
[rn/touchable-opacity
192-
{:style (style/action-container color)
193-
:accessibility-label :toggle-mute
194-
:on-press #(rf/dispatch [:chat.ui/mute chat-id (not muted)
195-
(when-not muted constants/mute-till-unmuted)])}
196-
[quo/icon (if muted :i/muted :i/activity-center)
197-
{:size 20 :color (colors/theme-colors colors/neutral-100 colors/white)}]
198-
[quo/text {:style {:margin-top 16} :size :paragraph-1 :weight :medium}
199-
(i18n/label (if muted :unmute-group :mute-group))]]
200-
[rn/touchable-opacity
201-
{:style (style/action-container color)
202-
:accessibility-label :manage-members
203-
:on-press (fn []
204-
(rf/dispatch [:group/clear-added-participants])
205-
(rf/dispatch [:group/clear-removed-members])
206-
(rf/dispatch [:open-modal :group-add-manage-members chat-id]))}
207-
[rn/view
208-
{:style {:flex-direction :row
209-
:justify-content :space-between}}
210-
[quo/icon :i/add-user {:size 20 :color (colors/theme-colors colors/neutral-100 colors/white)}]
211-
[count-container (count contacts) :members-count]]
212-
[quo/text {:style {:margin-top 16} :size :paragraph-1 :weight :medium}
213-
(i18n/label (if admin? :t/manage-members :t/add-members))]]]
116+
[:<>
117+
[quo/gradient-cover
118+
{:height 286
119+
:customization-color color}]
120+
[quo/page-nav
121+
{:type :no-title
122+
:background :photo
123+
:right-side [{:icon-name :i/options
124+
:on-press #(rf/dispatch [:show-bottom-sheet
125+
{:content (fn [] [actions/group-details-actions
126+
group])}])}]
127+
:icon-name :i/arrow-left
128+
:on-press #(rf/dispatch [:navigate-back])}]
129+
130+
[quo/page-top
131+
{:title chat-name
132+
:avatar {:customization-color color}}]
133+
[quo/channel-actions
134+
{:container-style style/actions-view
135+
:actions [{:accessibility-label :pinned-messages
136+
:label (i18n/label :t/pinned-messages)
137+
:color color
138+
:icon :i/pin
139+
:counter-value (count pinned-messages)
140+
:on-press (fn []
141+
(rf/dispatch [:dismiss-keyboard])
142+
(rf/dispatch [:pin-message/show-pins-bottom-sheet
143+
chat-id]))}
144+
{:accessibility-label :toggle-mute
145+
:color color
146+
:icon (if muted :i/muted :i/activity-center)
147+
:label (i18n/label (if muted :unmute-group :mute-group))
148+
:on-press #(rf/dispatch [:chat.ui/mute chat-id (not muted)
149+
(when-not muted
150+
constants/mute-till-unmuted)])}
151+
{:accessibility-label :manage-members
152+
:color color
153+
:icon :i/add-user
154+
:label (i18n/label (if admin? :t/manage-members :t/add-members))
155+
:counter-value (count contacts)
156+
:on-press (fn []
157+
(rf/dispatch [:group/clear-added-participants])
158+
(rf/dispatch [:group/clear-removed-members])
159+
(rf/dispatch [:open-modal :group-add-manage-members
160+
chat-id]))}]}]
214161
[rn/section-list
215162
{:key-fn :title
216163
:sticky-section-headers-enabled false
217164
:sections members
218165
:render-section-header-fn contacts-section-header
166+
:render-section-footer-fn contacts-section-footer
219167
:render-data {:chat-id chat-id
220168
:admin? admin?}
221169
:render-fn contact-item-render}]]))

‎src/status_im/contexts/chat/messenger/messages/list/view.cljs

+22-22
Original file line numberDiff line numberDiff line change
@@ -143,28 +143,28 @@
143143
mute-chat-label (if community-channel? :t/mute-channel :t/mute-chat)
144144
unmute-chat-label (if community-channel? :t/unmute-channel :t/unmute-chat)]
145145
[quo/channel-actions
146-
{:style {:margin-top 16}
147-
:actions [{:accessibility-label :action-button-pinned
148-
:big? true
149-
:label (or latest-pin-text (i18n/label :t/no-pinned-messages))
150-
:color cover-bg-color
151-
:icon :i/pin
152-
:counter-value pins-count
153-
:on-press (fn []
154-
(rf/dispatch [:pin-message/show-pins-bottom-sheet
155-
chat-id]))}
156-
{:accessibility-label :action-button-mute
157-
:label (i18n/label (if muted
158-
unmute-chat-label
159-
mute-chat-label))
160-
:color cover-bg-color
161-
:icon (if muted? :i/activity-center :i/muted)
162-
:on-press (fn []
163-
(if muted?
164-
(home.actions/unmute-chat-action chat-id)
165-
(home.actions/mute-chat-action chat-id
166-
chat-type
167-
muted?)))}]}]))
146+
{:container-style {:margin-top 16}
147+
:actions [{:accessibility-label :action-button-pinned
148+
:big? true
149+
:label (or latest-pin-text (i18n/label :t/no-pinned-messages))
150+
:color cover-bg-color
151+
:icon :i/pin
152+
:counter-value pins-count
153+
:on-press (fn []
154+
(rf/dispatch [:pin-message/show-pins-bottom-sheet
155+
chat-id]))}
156+
{:accessibility-label :action-button-mute
157+
:label (i18n/label (if muted
158+
unmute-chat-label
159+
mute-chat-label))
160+
:color cover-bg-color
161+
:icon (if muted? :i/activity-center :i/muted)
162+
:on-press (fn []
163+
(if muted?
164+
(home.actions/unmute-chat-action chat-id)
165+
(home.actions/mute-chat-action chat-id
166+
chat-type
167+
muted?)))}]}]))
168168

169169
(defn f-list-footer
170170
[{:keys [chat distance-from-list-top theme customization-color]}]

‎src/status_im/contexts/communities/actions/share_community_channel/style.cljs

+1-3
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,4 @@
3030
(defn gradient-cover-wrapper
3131
[width]
3232
{:width (gradient-cover-size width)
33-
:position :absolute
34-
:border-radius 12
35-
:z-index -1})
33+
:border-radius 12})

‎src/status_im/contexts/preview/quo/gradient/gradient_cover.cljs

-5
Original file line numberDiff line numberDiff line change
@@ -66,11 +66,6 @@
6666
:source (resources/get-mock-image :dark-blur-bg)}])
6767
[(if @blur? blur/view rn/view)
6868
{:style {:height 332
69-
:position :absolute
70-
:top 0
71-
:left 0
72-
:right 0
73-
:bottom 0
7469
:padding-vertical 40}
7570
:blur-type :dark}
7671
[quo/gradient-cover @state]]]

‎src/status_im/contexts/preview/quo/preview.cljs

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
(ns status-im.contexts.preview.quo.preview
22
(:require
33
[camel-snake-kebab.core :as camel-snake-kebab]
4+
cljs.pprint
45
[clojure.string :as string]
56
[quo.core :as quo]
67
[quo.foundations.colors :as colors]

‎src/status_im/contexts/wallet/common/screen_base/create_or_edit_account/style.cljs

-8
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,6 @@
66
{:flex 1
77
:margin-top top})
88

9-
(defn gradient-cover-container
10-
[top]
11-
{:position :absolute
12-
:top (- top)
13-
:left 0
14-
:right 0
15-
:z-index -1})
16-
179
(def account-avatar-container
1810
{:padding-horizontal 20
1911
:padding-top 12})

‎src/status_im/contexts/wallet/common/sheets/account_options/view.cljs

+3-4
Original file line numberDiff line numberDiff line change
@@ -52,10 +52,9 @@
5252
:overlay-color (quo.theme/theme-value colors/white-70-blur
5353
colors/neutral-95-opa-70-blur
5454
theme)}])
55-
[rn/view {:style style/gradient-container}
56-
[quo/gradient-cover
57-
{:customization-color color
58-
:opacity 0.4}]]
55+
[quo/gradient-cover
56+
{:customization-color color
57+
:opacity 0.4}]
5958
[quo/drawer-bar]
6059
[quo/drawer-top
6160
(cond-> {:title name

‎src/status_im/contexts/wallet/create_account/style.cljs

-8
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,6 @@
22
(:require
33
[quo.foundations.colors :as colors]))
44

5-
(defn gradient-cover-container
6-
[top]
7-
{:position :absolute
8-
:top (- top)
9-
:left 0
10-
:right 0
11-
:z-index -1})
12-
135
(def account-avatar-container
146
{:padding-horizontal 20
157
:padding-top 12})

0 commit comments

Comments
 (0)