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

Implement dummy action drawers for community chats (#16227) 

Implements the skeleton for all community channel drawer actions. This commit is
not concerned with the actual implementation of the actions, since that would
grow the scope a bit too much.

Partially implements https://github.com/status-im/status-mobile/issues/16178

Notes: I also updated the actions drawer component to accept a text aligned to
the right (this will be necessary to display the number of pinned messages in
the action drawer). In the Design System, the text is always hidden, and that's
my best guess as to why we didn't implement it. I talked to designers, and they
won't update the Design System Drawer action component
https://www.figma.com/file/WQZcp6S0EnzxdTL4taoKDv/Design-System-for-Mobile?type=design&node-id=1931-31188&t=hOK17fADEXTlnXPY-0)
for now, but we agreed the reference in Figma > Communities for Mobile
https://www.figma.com/file/h9wo4GipgZURbqqr1vShFN/Communities-for-Mobile?type=design&node-id=5483-193285&t=vOTiuhxD87zhmK2T-0)
is good enough.
This commit is contained in:
Icaro Motta 2023-06-12 12:02:47 -03:00 committed by GitHub
parent a5c41612a0
commit 204c8996a3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 347 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/quo2/components/drawers/action_drawers/component_spec.cljs
View File

@ -50,8 +50,23 @@
:label "a sample label"
:right-icon :i/friend
:accessibility-label :first-element}]]])
(h/is-truthy (h/get-by-label-text "right-icon-for-action"))
(h/is-truthy (h/query-by-label-text "left-icon-for-action")))
(h/is-truthy (h/query-by-label-text :right-icon-for-action))
(h/is-truthy (h/query-by-label-text :left-icon-for-action)))
(h/test "renders right text besides icon when non-nil"
(h/render [action-drawer/action-drawer
[[{:icon :i/friend
:label "a sample label"
:right-text "20+"
:right-icon :i/friend}]]])
(h/is-truthy (h/query-by-label-text :right-text-for-action)))
(h/test "does not render right text when not present"
(h/render [action-drawer/action-drawer
[[{:icon :i/friend
:label "a sample label"
:right-icon :i/friend}]]])
(h/is-null (h/query-by-label-text :right-text-for-action)))
(h/test "renders a divider when the add-divider? prop is true"
(h/render [action-drawer/action-drawer

9
src/quo2/components/drawers/action_drawers/style.cljs
View File

@ -34,8 +34,17 @@
{:flex 1
:justify-content :center})
(def right-side-container
{:flex-direction :row
:align-items :center})
(def right-icon
{:height 20
:margin-top :auto
:margin-bottom :auto
:width 20})
(defn right-text
[override-theme]
{:color (colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)
:margin-right 12})

27
src/quo2/components/drawers/action_drawers/view.cljs
View File

@ -11,7 +11,7 @@
colors/danger-60
(colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)))
(defn divider
(defn- divider
[]
[rn/view
{:style (style/divider)
@ -29,6 +29,7 @@
label
sub-label
right-icon
right-text
danger?
disabled?
on-press
@ -70,14 +71,22 @@
:style {:color
(colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)}}
sub-label])]
(when right-icon
[rn/view
{:style style/right-icon
:accessible true
:accessibility-label :right-icon-for-action}
[icon/icon right-icon
{:color (get-icon-color danger? override-theme)
:size 20}]])]]]))
(when (or right-text right-icon)
[rn/view {:style style/right-side-container}
(when right-text
[text/text
{:accessibility-label :right-text-for-action
:size :paragraph-1
:style (style/right-text override-theme)}
right-text])
(when right-icon
[rn/view
{:style style/right-icon
:accessible true
:accessibility-label :right-icon-for-action}
[icon/icon right-icon
{:color (get-icon-color danger? override-theme)
:size 20}]])])]]]))
(defn action-drawer
[sections]

115
src/quo2/components/list_items/channel.cljs
View File

@ -8,58 +8,65 @@
[react-native.core :as rn]
[quo2.components.common.unread-grey-dot.view :refer [unread-grey-dot]]))
(def ^:private custom-props
[:name :locked? :mentions-count :unread-messages?
:muted? :is-active-channel? :emoji :channel-color])
(defn list-item
[{:keys [name locked? mentions-count unread-messages?
muted? is-active-channel? emoji channel-color on-press]
:or {channel-color colors/primary-50}}]
[rn/touchable-opacity {:on-press on-press}
[rn/view
{:style (merge {:height 48
:display :flex
:border-radius 12
:flex-direction :row
:justify-content :space-between
:align-items :center
:width "100%"
:padding-left 12
:padding-right 12}
(when is-active-channel?
{:background-color (colors/theme-alpha channel-color 0.05 0.05)}))}
[rn/view
{:display :flex
:flex-direction :row
:justify-content :flex-start
:align-items :center
:accessible true
:accessibility-label :chat-name-text}
[channel-avatar/channel-avatar
{:big? true
:locked? locked?
:emoji-background-color (colors/theme-alpha channel-color 0.1 0.1)
:emoji emoji}]
[quo2.text/text
{:style (merge {:margin-left 12}
(when (and (not locked?) muted?)
{:color (if (theme/dark?) colors/neutral-60 colors/neutral-40)}))
:weight :medium
:size :paragraph-1} (str "# " name)]]
[rn/view
{:style {:height 20
:justify-content :center}}
(when (and (not locked?)
muted?)
[quo2.icons/icon :i/muted
{:size 20
:no-color true}])
(when (and (not locked?)
(not muted?)
(pos? (int mentions-count)))
[rn/view
{:style {:margin-right 2
:margin-top 2}}
[quo2.counter/counter {:override-bg-color channel-color} mentions-count]])
(when (and (not locked?)
(not muted?)
(not (pos? (int mentions-count)))
unread-messages?)
[unread-grey-dot :unviewed-messages-public])]]])
[{:keys [locked? mentions-count unread-messages?
muted? is-active-channel? emoji channel-color]
:or {channel-color colors/primary-50}
:as props}]
(let [standard-props (apply dissoc props custom-props)
name-text (:name props)]
[rn/touchable-opacity standard-props
[rn/view
{:style (merge {:height 48
:display :flex
:border-radius 12
:flex-direction :row
:justify-content :space-between
:align-items :center
:width "100%"
:padding-left 12
:padding-right 12}
(when is-active-channel?
{:background-color (colors/theme-alpha channel-color 0.05 0.05)}))}
[rn/view
{:display :flex
:flex-direction :row
:justify-content :flex-start
:align-items :center
:accessible true
:accessibility-label :chat-name-text}
[channel-avatar/channel-avatar
{:big? true
:locked? locked?
:emoji-background-color (colors/theme-alpha channel-color 0.1 0.1)
:emoji emoji}]
[quo2.text/text
{:style (merge {:margin-left 12}
(when (and (not locked?) muted?)
{:color (if (theme/dark?) colors/neutral-60 colors/neutral-40)}))
:weight :medium
:size :paragraph-1} (str "# " name-text)]]
[rn/view
{:style {:height 20
:justify-content :center}}
(when (and (not locked?)
muted?)
[quo2.icons/icon :i/muted
{:size 20
:no-color true}])
(when (and (not locked?)
(not muted?)
(pos? (int mentions-count)))
[rn/view
{:style {:margin-right 2
:margin-top 2}}
[quo2.counter/counter {:override-bg-color channel-color} mentions-count]])
(when (and (not locked?)
(not muted?)
(not (pos? (int mentions-count)))
unread-messages?)
[unread-grey-dot :unviewed-messages-public])]]]))

20
src/status_im2/common/home/actions/view.cljs
View File

@ -1,12 +1,13 @@
(ns status-im2.common.home.actions.view
(:require [utils.i18n :as i18n]
(:require [clojure.string :as string]
[quo2.core :as quo]
[quo2.foundations.colors :as colors]
[status-im2.contexts.communities.actions.chat.view :as chat-actions]
[status-im2.common.confirmation-drawer.view :as confirmation-drawer]
[status-im2.constants :as constants]
[utils.re-frame :as rf]
[status-im2.contexts.contacts.drawers.nickname-drawer.view :as nickname-drawer]
[clojure.string :as string]
[quo2.foundations.colors :as colors]))
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
(defn- entry
[{:keys [icon label on-press danger? sub-label chevron? add-divider? accessibility-label]}]
@ -462,12 +463,15 @@
(remove-from-group-entry contact chat-id))])]]))
(defn chat-actions
[{:keys [chat-type] :as item} inside-chat?]
(case chat-type
[{:keys [chat-type] :as chat} inside-chat?]
(condp = chat-type
constants/one-to-one-chat-type
[one-to-one-actions item inside-chat?]
[one-to-one-actions chat inside-chat?]
constants/private-group-chat-type
[private-group-chat-actions item inside-chat?]))
[private-group-chat-actions chat inside-chat?]
constants/community-chat-type
[chat-actions/actions chat inside-chat?]
nil))
(defn group-details-actions
[{:keys [admins] :as group}]

4
src/status_im2/common/not_implemented.cljs
View File

@ -6,3 +6,7 @@
(when content
[rn/view {:border-color :red :border-width 1}
content]))
(defn alert
[]
(js/alert "Feature not implemented."))

19
src/status_im2/contexts/chat/messages/navigation/view.cljs
View File

@ -97,16 +97,15 @@
:size :paragraph-2
:style (style/header-online)}
(i18n/label :t/online)])]]]
(when (not= chat-type constants/community-chat-type)
[rn/touchable-opacity
{:active-opacity 1
:style (style/button-container {:margin-right 20})
:accessibility-label :options-button
:on-press (fn []
(rf/dispatch [:dismiss-keyboard])
(rf/dispatch [:show-bottom-sheet
{:content (fn [] [actions/chat-actions chat true])}]))}
[quo/icon :i/options {:size 20 :color (colors/theme-colors colors/black colors/white)}]])]
[rn/touchable-opacity
{:active-opacity 1
:style (style/button-container {:margin-right 20})
:accessibility-label :options-button
:on-press (fn []
(rf/dispatch [:dismiss-keyboard])
(rf/dispatch [:show-bottom-sheet
{:content (fn [] [actions/chat-actions chat true])}]))}
[quo/icon :i/options {:size 20 :color (colors/theme-colors colors/black colors/white)}]]]
[pin.banner/banner
{:chat-id chat-id

116
src/status_im2/contexts/communities/actions/chat/view.cljs Normal file
View File

@ -0,0 +1,116 @@
(ns status-im2.contexts.communities.actions.chat.view
(:require [quo2.core :as quo]
[status-im2.common.not-implemented :as not-implemented]
[utils.i18n :as i18n]))
(defn- action-view-members-and-details
[]
{:icon :i/members
:accessibility-label :chat-view-members-and-details
:label (i18n/label :t/view-channel-members-and-details)
:on-press not-implemented/alert})
(defn- action-token-requirements
[]
{:icon :i/token
:right-icon :i/chevron-right
:accessibility-label :chat-view-token-requirements
:on-press not-implemented/alert
:label (i18n/label :t/view-token-gating)})
(defn- action-mark-as-read
[]
{:icon :i/mark-as-read
:right-icon :i/chevron-right
:accessibility-label :chat-mark-as-read
:on-press not-implemented/alert
:label (i18n/label :t/mute-channel)})
(defn- action-toggle-muted
[]
{:icon :i/muted
:right-icon :i/chevron-right
:accessibility-label :chat-toggle-muted
:on-press not-implemented/alert
:label (i18n/label :t/mute-channel)})
(defn- action-notification-settings
[]
{:icon :i/notifications
:right-icon :i/chevron-right
:accessibility-label :chat-notification-settings
:on-press not-implemented/alert
:label (i18n/label :t/notification-settings)
:sub-label (i18n/label :t/only-mentions)})
(defn- action-pinned-messages
[]
{:icon :i/pin
:right-icon :i/chevron-right
:accessibility-label :chat-pinned-messages
:on-press not-implemented/alert
:label (i18n/label :t/pinned-messages)})
(defn- action-fetch-messages
[]
{:icon :i/download
:right-icon :i/chevron-right
:accessibility-label :chat-fetch-messages
:on-press not-implemented/alert
:label (i18n/label :t/fetch-messages)})
(defn- action-invite-people
[]
{:icon :i/add-user
:accessibility-label :chat-invite-people
:on-press not-implemented/alert
:label (i18n/label :t/invite-people-from-contacts)})
(defn- action-qr-code
[]
{:icon :i/qr-code
:accessibility-label :chat-show-qr-code
:on-press not-implemented/alert
:label (i18n/label :t/show-qr)})
(defn- action-share
[]
{:icon :i/share
:accessibility-label :chat-share
:on-press not-implemented/alert
:label (i18n/label :t/share-channel)})
(defn actions
[{:keys [locked?]} inside-chat?]
(cond
locked?
[quo/action-drawer
[[(action-invite-people)
(action-token-requirements)
(action-qr-code)
(action-share)]]]
(and (not inside-chat?) (not locked?))
[quo/action-drawer
[[(action-view-members-and-details)
(action-mark-as-read)
(action-toggle-muted)
(action-notification-settings)
(action-pinned-messages)
(action-invite-people)
(action-qr-code)
(action-share)]]]
(and inside-chat? (not locked?))
[quo/action-drawer
[[(action-view-members-and-details)
(action-token-requirements)
(action-mark-as-read)
(action-toggle-muted)
(action-notification-settings)
(action-fetch-messages)
(action-invite-people)
(action-qr-code)
(action-share)]]]
:else nil))

9
src/status_im2/contexts/communities/actions/community_options/component_spec.cljs
View File

@ -1,4 +1,3 @@
(ns status-im2.contexts.communities.actions.community-options.component-spec
(:require [re-frame.core :as re-frame]
[test-helpers.component :as h]
@ -24,7 +23,7 @@
(.toBeTruthy))
(-> (h/expect (h/get-by-translation-text :mute-community))
(.toBeTruthy))
(-> (h/expect (h/get-by-translation-text :community-notification-settings))
(-> (h/expect (h/get-by-translation-text :notification-settings))
(.toBeTruthy))
(-> (h/expect (h/get-by-translation-text :invite-people-from-contacts))
(.toBeTruthy))
@ -50,7 +49,7 @@
(.toBeTruthy))
(-> (h/expect (h/get-by-translation-text :mute-community))
(.toBeTruthy))
(-> (h/expect (h/get-by-translation-text :community-notification-settings))
(-> (h/expect (h/get-by-translation-text :notification-settings))
(.toBeTruthy))
(-> (h/expect (h/get-by-translation-text :invite-people-from-contacts))
(.toBeTruthy))
@ -73,7 +72,7 @@
(.toBeTruthy))
(-> (h/expect (h/get-by-translation-text :mute-community))
(.toBeTruthy))
(-> (h/expect (h/get-by-translation-text :community-notification-settings))
(-> (h/expect (h/get-by-translation-text :notification-settings))
(.toBeTruthy))
(-> (h/expect (h/get-by-translation-text :invite-people-from-contacts))
(.toBeTruthy))
@ -95,7 +94,7 @@
(.toBeTruthy))
(-> (h/expect (h/get-by-translation-text :mute-community))
(.toBeTruthy))
(-> (h/expect (h/get-by-translation-text :community-notification-settings))
(-> (h/expect (h/get-by-translation-text :notification-settings))
(.toBeTruthy))
(-> (h/expect (h/get-by-translation-text :invite-people-from-contacts))
(.toBeTruthy))

2
src/status_im2/contexts/communities/actions/community_options/view.cljs
View File

@ -56,7 +56,7 @@
[id]
{:icon :i/notifications
:accessibility-label :community-notification-settings
:label (i18n/label :t/community-notification-settings)
:label (i18n/label :t/notification-settings)
:on-press #(js/alert (str "implement action" id))
:right-icon :i/chevron-right})

85
src/status_im2/contexts/communities/overview/view.cljs
View File

@ -1,19 +1,20 @@
(ns status-im2.contexts.communities.overview.view
(:require [utils.i18n :as i18n]
[oops.core :as oops]
(:require [oops.core :as oops]
[quo2.components.navigation.floating-shell-button :as floating-shell-button]
[quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[react-native.blur :as blur]
[react-native.core :as rn]
[react-native.platform :as platform]
[reagent.core :as reagent]
[status-im2.constants :as constants]
[status-im2.common.scroll-page.view :as scroll-page]
[status-im2.contexts.communities.overview.style :as style]
[status-im2.contexts.communities.actions.community-options.view :as options]
[quo2.components.navigation.floating-shell-button :as floating-shell-button]
[status-im2.contexts.communities.overview.utils :as utils]
[status-im2.common.home.actions.view :as actions]
[status-im2.common.password-authentication.view :as password-authentication]
[status-im2.common.scroll-page.view :as scroll-page]
[status-im2.constants :as constants]
[status-im2.contexts.communities.actions.community-options.view :as options]
[status-im2.contexts.communities.overview.style :as style]
[status-im2.contexts.communities.overview.utils :as utils]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
(defn preview-user-list
@ -54,37 +55,41 @@
(int (Math/ceil (layout-y %))))
(into #{} (map (comp :name second) channels-list)))
:style {:margin-top 20 :flex 1}}
(map
(fn [[category-id {:keys [chats name collapsed?]}]]
[rn/view
{:flex 1
:key category-id
;; on-layout fires only when the component re-renders, so
;; in case the category hasn't changed, it will not be fired
:on-layout #(on-category-layout name (int (layout-y %)))}
(when-not (= constants/empty-category-id category-id)
[quo/divider-label
{:label name
:on-press #(collapse-category
community-id
category-id
collapsed?)
:chevron-icon (if collapsed? :main-icons/chevron-right :main-icons/chevron-down)
:padding-bottom (if collapsed? 7 0)
:chevron-position :left}])
(when-not collapsed?
[rn/view
{:margin-left 8
:margin-top 10
:margin-bottom 8}
(map (fn [channel]
[rn/view
{:key (:id channel)
:margin-top 4}
[quo/channel-list-item channel]])
chats)])])
channels-list)])
(for [[category-id {:keys [chats name collapsed?]}] channels-list]
[rn/view
{:flex 1
:key category-id
;; on-layout fires only when the component re-renders, so
;; in case the category hasn't changed, it will not be fired
:on-layout #(on-category-layout name (int (layout-y %)))}
(when-not (= constants/empty-category-id category-id)
[quo/divider-label
{:label name
:on-press #(collapse-category
community-id
category-id
collapsed?)
:chevron-icon (if collapsed? :main-icons/chevron-right :main-icons/chevron-down)
:padding-bottom (if collapsed? 7 0)
:chevron-position :left}])
(when-not collapsed?
[rn/view
{:style {:margin-left 8
:margin-top 10
:margin-bottom 8}}
(for [chat chats
:let [chat (assoc chat :chat-type constants/community-chat-type)]]
[rn/view
{:key (:id chat)
:style {:margin-top 4}}
[quo/channel-list-item
(assoc chat
:on-long-press
(fn []
(rf/dispatch [:show-bottom-sheet
{:content (fn [] [actions/chat-actions chat false])
:selected-item (fn []
[quo/channel-list-item chat])}])))]])])])])
(defn request-to-join-text
[is-open?]

81
src/status_im2/contexts/quo_preview/drawers/action_drawers.cljs
View File

@ -15,44 +15,59 @@
:type :boolean}
{:label "Show red options?"
:key :show-red-options?
:type :boolean}])
:type :boolean}
{:label "Override theme"
:key :override-theme
:type :select
:options [{:key :dark :value "Dark"}
{:key :light :value "Light"}
{:key nil :value "System"}]}])
(def options-with-consequences
[{:icon :i/delete
:danger? true
:label "Clear history"
:add-divider? true
:on-press #(js/alert "clear history")}])
(defn options-with-consequences
[override-theme]
[{:icon :i/delete
:danger? true
:label "Clear history"
:override-theme override-theme
:add-divider? true
:on-press #(js/alert "clear history")}])
(defn render-action-sheet
[state]
[rn/view
{:height 300
:background-color (colors/theme-colors colors/white colors/neutral-95)}
[quo/action-drawer
(cond->
[[{:icon :i/friend
:label "View channel members and details"
:on-press #(js/alert "View channel members and details")}
{:icon :i/communities
:label "Mark as read"
:disabled? (:mark-as-read-disabled? @state)
:on-press #(js/alert "Mark as read")}
{:icon :i/muted
:label (if (:muted? @state) "Unmute channel" "Mute channel")
:on-press #(js/alert (if (:muted? @state) "Unmute channel" "Mute channel"))
:right-icon :i/chevron-right
:sub-label (when (:muted? @state) "Muted for 15 min")}
{:icon :i/scan
:on-press #(js/alert "Fetch messages")
:right-icon :i/chevron-right
:label "Fetch messages"}
{:icon :i/add-user
:on-press #(js/alert "Share link to the channel")
:label "Share link to the channel"}]]
(let [override-theme (:override-theme @state)]
[rn/view
{:height 300
:background-color (colors/theme-colors colors/white colors/neutral-95)}
[quo/action-drawer
(cond->
[[{:icon :i/friend
:label "View channel members and details"
:override-theme override-theme
:on-press #(js/alert "View channel members and details")}
{:icon :i/communities
:label "Mark as read"
:override-theme override-theme
:disabled? (:mark-as-read-disabled? @state)
:on-press #(js/alert "Mark as read")}
{:icon :i/muted
:label (if (:muted? @state) "Unmute channel" "Mute channel")
:override-theme override-theme
:on-press #(js/alert (if (:muted? @state) "Unmute channel" "Mute channel"))
:right-icon :i/chevron-right
:sub-label (when (:muted? @state) "Muted for 15 min")}
{:icon :i/scan
:on-press #(js/alert "Fetch messages")
:override-theme override-theme
:right-icon :i/chevron-right
:right-text "3"
:label "Fetch messages"}
{:icon :i/add-user
:override-theme override-theme
:on-press #(js/alert "Share link to the channel")
:label "Share link to the channel"}]]
(:show-red-options? @state)
(conj options-with-consequences))]])
(:show-red-options? @state)
(conj (options-with-consequences override-theme)))]]))
(defn cool-preview
[]

4
translations/en.json
View File

@ -1041,7 +1041,7 @@
"remote-notifications-subtitle": "Enable google push notifications",
"show-notifications": "Show notifications",
"notification-settings": "Notifications",
"community-notification-settings": "Notification settings",
"notification-settings": "Notification settings",
"notifications-servers": "Notification servers",
"notifications-preferences": "Notification preferences",
"notifications-switch": "Show notifications",
@ -1254,6 +1254,7 @@
"settings": "Settings",
"share": "Share",
"shared": "Shared",
"share-channel": "Share channel",
"share-address": "Share address",
"share-chat": "Share chat",
"share-contact-code": "Share my chat key",
@ -1447,6 +1448,7 @@
"view-gitcoin": "View in Gitcoin",
"view-members": "View members",
"view-profile": "View profile",
"view-channel-members-and-details": "View channel member and details",
"view-details": "View Details",
"view-signing": "View signing phrase",
"view-superrare": "View in SuperRare",