Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[#18985] Polish group details view #19032

Merged
merged 1 commit into from
Mar 6, 2024
Merged

[#18985] Polish group details view #19032

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/legacy/status_im/contact/db.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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))]
Expand Down
4 changes: 2 additions & 2 deletions src/quo/components/community/channel_actions.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
1 change: 0 additions & 1 deletion src/quo/components/community/style.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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})
Expand Down
9 changes: 7 additions & 2 deletions src/quo/components/gradient/gradient_cover/style.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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})
flexsurfer marked this conversation as resolved.
Show resolved Hide resolved
2 changes: 1 addition & 1 deletion src/quo/components/navigation/page_nav/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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))
Expand Down
3 changes: 1 addition & 2 deletions src/quo/components/share/share_qr_code/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
7 changes: 3 additions & 4 deletions src/status_im/common/bottom_sheet/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 3 additions & 5 deletions src/status_im/contexts/chat/group_details/style.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
162 changes: 55 additions & 107 deletions src/status_im/contexts/chat/group_details/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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?
Expand Down Expand Up @@ -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 changes: 22 additions & 22 deletions src/status_im/contexts/chat/messenger/messages/list/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]}]
Expand Down
4 changes: 1 addition & 3 deletions src/status_im/contexts/communities/actions/share_community_channel/style.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,4 @@
(defn gradient-cover-wrapper
[width]
{:width (gradient-cover-size width)
:position :absolute
:border-radius 12
:z-index -1})
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok moved from here. But still curious why added in first place

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, i also want to know the answer, because it just worked I didn't give too much attention to it, it might work wrong for sure, so this gradient component is tricky for sure, so it should be under every child of its parent

:border-radius 12})
5 changes: 0 additions & 5 deletions src/status_im/contexts/preview/quo/gradient/gradient_cover.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]]]
Expand Down
1 change: 1 addition & 0 deletions src/status_im/contexts/preview/quo/preview.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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]
Expand Down
8 changes: 0 additions & 8 deletions src/status_im/contexts/wallet/common/screen_base/create_or_edit_account/style.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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})
Expand Down
8 changes: 0 additions & 8 deletions src/status_im/contexts/wallet/create_account/style.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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})
Expand Down
Loading