Skip to content

Commit d679572

Browse files
flexsurferflexsurfer
committed
[#18985] Polish group details view
1 parent bf1a734 commit d679572

File tree

14 files changed

+72
-110
lines changed

14 files changed

+72
-110
lines changed

‎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
@@ -124,10 +124,9 @@
124124
{:style (style/sheet-content theme padding-bottom-override insets shell? bottom-margin)
125125
:on-layout #(reset! sheet-height (.-nativeEvent.layout.height ^js %))}
126126
(when (and gradient-cover? customization-color)
127-
[rn/view {:style style/gradient-bg}
128-
[quo/gradient-cover
129-
{:customization-color customization-color
130-
:opacity 0.4}]])
127+
[quo/gradient-cover
128+
{:customization-color customization-color
129+
:opacity 0.4}])
131130
(when-not hide-handle?
132131
[quo/drawer-bar])
133132
[content]]]]]))))

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
[]
77
{:flex-direction :row
88
:justify-content :space-between
9-
:margin-vertical 20
9+
:margin-top 8
10+
:margin-bottom 20
1011
:padding-horizontal 20})
1112

1213
(defn action-container

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

+20-46
Original file line numberDiff line numberDiff line change
@@ -10,30 +10,8 @@
1010
[status-im.constants :as constants]
1111
[status-im.contexts.chat.group-details.style :as style]
1212
[utils.i18n :as i18n]
13-
[utils.re-frame :as rf]))
14-
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])
13+
[utils.re-frame :as rf]
14+
[react-native.safe-area :as safe-area]))
3715

3816
(defn count-container
3917
[amount accessibility-label]
@@ -145,35 +123,31 @@
145123

146124
(defn group-details
147125
[]
148-
(let [chat-id (rf/sub [:get-screen-params :group-chat-profile])
126+
(let [top (safe-area/get-top)
127+
chat-id (rf/sub [:get-screen-params :group-chat-profile])
149128
{:keys [admins chat-id chat-name color public?
150129
muted contacts]
151130
:as group} (rf/sub [:chats/chat-by-id chat-id])
152131
members (rf/sub [:contacts/group-members-sections chat-id])
153132
pinned-messages (rf/sub [:chats/pinned chat-id])
154133
current-pk (rf/sub [:multiaccount/public-key])
155134
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)}]]]
135+
[:<>
136+
[quo/page-nav
137+
{:type :no-title
138+
:background :photo
139+
:right-side [{:icon-name :i/options
140+
:on-press #(rf/dispatch [:show-bottom-sheet
141+
{:content (fn [] [actions/group-details-actions
142+
group])}])}]
143+
:icon-name :i/arrow-left
144+
:on-press #(rf/dispatch [:navigate-back])}]
145+
[quo/gradient-cover
146+
{:height 286
147+
:customization-color color}]
148+
[quo/page-top
149+
{:title chat-name
150+
:avatar {:customization-color color}}]
177151
[rn/view {:style (style/actions-view)}
178152
[rn/touchable-opacity
179153
{:style (style/action-container 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

+32-24
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
[status-im.common.resources :as resources]
1414
[status-im.contexts.preview.quo.common :as common]
1515
[status-im.contexts.preview.quo.style :as style]
16-
utils.number)
16+
utils.number
17+
[react-native.clipboard :as clipboard])
1718
(:require-macros status-im.contexts.preview.quo.preview))
1819

1920
(defn- label-view
@@ -339,29 +340,36 @@
339340
{:style (style/panel-basic)
340341
:shows-vertical-scroll-indicator false
341342
:content-container-style (when full-screen? {:flex 1})}
342-
[rn/pressable
343-
{:style (when full-screen? {:flex 1})
344-
:on-press rn/dismiss-keyboard!}
345-
(when descriptor
346-
[rn/view {:style style/customizer-container}
347-
[customizer state descriptor]])
348-
(if blur?
349-
[rn/view {:style (merge style/component-container component-container-style)}
350-
(into [blur-view
351-
{:theme theme
352-
:show-blur-background? show-blur-background?
353-
:height blur-height
354-
:style (merge {:width "100%"
355-
:flex-grow 1}
356-
(when-not show-blur-background?
357-
{:padding-horizontal 0
358-
:top 0})
359-
blur-container-style)
360-
:blur-view-props (merge {:blur-type theme}
361-
blur-view-props)}]
362-
children)]
363-
(into [rn/view {:style (merge style/component-container component-container-style)}]
364-
children))]]]))
343+
[:<>
344+
[rn/pressable
345+
{:style (when full-screen? {:flex 1})
346+
:on-press rn/dismiss-keyboard!}
347+
(when descriptor
348+
[rn/view {:style style/customizer-container}
349+
[customizer state descriptor]])
350+
(if blur?
351+
[rn/view {:style (merge style/component-container component-container-style)}
352+
(into [blur-view
353+
{:theme theme
354+
:show-blur-background? show-blur-background?
355+
:height blur-height
356+
:style (merge {:width "100%"
357+
:flex-grow 1}
358+
(when-not show-blur-background?
359+
{:padding-horizontal 0
360+
:top 0})
361+
blur-container-style)
362+
:blur-view-props (merge {:blur-type theme}
363+
blur-view-props)}]
364+
children)]
365+
(into [rn/view {:style (merge style/component-container component-container-style)}]
366+
children))]
367+
(let [state-str (with-out-str (cljs.pprint/pprint @state))]
368+
[rn/view {:style {:margin 50}}
369+
[quo/text {:style {:margin-bottom 10}} "State map (click on map to copy)"]
370+
[rn/pressable
371+
{:on-press #(clipboard/set-string state-str)}
372+
[quo/text state-str]]])]]]))
365373

366374
(defn preview-container
367375
[& args]

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

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

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

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
:on-press #(rf/dispatch [:navigate-back])}]
2929
[quo/gradient-cover
3030
{:customization-color account-color
31-
:container-style (style/gradient-cover-container margin-top)}]
31+
:container-style {:top (- margin-top)}}]
3232
(into
3333
[:<>
3434
[rn/view {:style style/account-avatar-container}

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

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474
:on-press #(rf/dispatch [:navigate-back])}]
7575
[quo/gradient-cover
7676
{:customization-color @account-color
77-
:container-style (style/gradient-cover-container top)}]
77+
:container-style {:top (- top)}}]
7878
[rn/view
7979
{:style style/account-avatar-container}
8080
[quo/account-avatar

0 commit comments

Comments
 (0)