Scrollable list of pinned messages (#15506)
* Scrollable list of pinned messages * e2e: fix accessibility id --------- Co-authored-by: pavloburykh <pavlo@status.im>
This commit is contained in:
Alexander
GitHub
parent
8f0a990e71
commit
006b11d508
|
|
@ -7,7 +7,7 @@
|
|||
[status-im.ui.screens.multiaccounts.key-storage.views :as key-storage]
|
||||
[status-im.ui.screens.multiaccounts.recover.views :as recover.views]
|
||||
[status-im2.common.bottom-sheet.view :as bottom-sheet]
|
||||
[status-im2.contexts.chat.messages.pin.list.view :as pin.list]
|
||||
[status-im2.contexts.chat.menus.pinned-messages.view :as pinned-messages-menu]
|
||||
[react-native.core :as rn]))
|
||||
|
||||
(defn bottom-sheet
|
||||
|
|
@ -50,7 +50,8 @@
|
|||
(merge key-storage/migrate-account-password)
|
||||
|
||||
(= view :pinned-messages-list)
|
||||
(merge {:content pin.list/pinned-messages-list}))]
|
||||
(merge {:content pinned-messages-menu/pinned-messages
|
||||
:bottom-safe-area-spacing? false}))]
|
||||
[:f>
|
||||
(fn []
|
||||
(rn/use-effect (fn []
|
||||
|
|
|
|||
|
|
@ -0,0 +1,44 @@
|
|||
(ns status-im2.contexts.chat.menus.pinned-messages.style
|
||||
(:require [quo2.foundations.colors :as colors]))
|
||||
|
||||
(def heading
|
||||
{:margin-horizontal 20})
|
||||
|
||||
(def heading-container
|
||||
{:flex-direction :row
|
||||
:background-color (colors/theme-colors colors/neutral-10 colors/neutral-80)
|
||||
:border-radius 20
|
||||
:align-items :center
|
||||
:align-self :flex-start
|
||||
:margin-horizontal 20
|
||||
:padding 4
|
||||
:margin-top 8})
|
||||
|
||||
(def heading-text
|
||||
{:margin-left 6
|
||||
:margin-right 4})
|
||||
|
||||
(def chat-name-text
|
||||
{:margin-left 4
|
||||
:margin-right 8})
|
||||
|
||||
(defn list-footer
|
||||
[bottom-inset]
|
||||
{:height bottom-inset})
|
||||
|
||||
(defn no-pinned-messages-container
|
||||
[bottom-inset]
|
||||
{:justify-content :center
|
||||
:align-items :center
|
||||
:margin-top 20
|
||||
:margin-bottom bottom-inset})
|
||||
|
||||
(def no-pinned-messages-icon
|
||||
{:width 120
|
||||
:height 120
|
||||
:justify-content :center
|
||||
:align-items :center
|
||||
:border-width 1})
|
||||
|
||||
(def no-pinned-messages-text
|
||||
{:margin-top 20})
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
(ns status-im2.contexts.chat.menus.pinned-messages.view
|
||||
(:require [quo2.core :as quo]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[react-native.safe-area :as safe-area]
|
||||
[status-im2.contexts.chat.messages.content.deleted.view :as content.deleted]
|
||||
[status-im2.contexts.chat.messages.content.view :as message]
|
||||
[status-im2.contexts.chat.menus.pinned-messages.style :as style]
|
||||
[utils.i18n :as i18n]
|
||||
[utils.re-frame :as rf]))
|
||||
|
||||
(def list-key-fn #(or (:message-id %) (:value %)))
|
||||
|
||||
(defn message-render-fn
|
||||
[{:keys [deleted? deleted-for-me?] :as message} _ _ context]
|
||||
;; TODO (flexsurfer) probably we don't want reactions here
|
||||
(if (or deleted? deleted-for-me?)
|
||||
[content.deleted/deleted-message message context]
|
||||
[message/message-with-reactions message context]))
|
||||
|
||||
(defn pinned-messages
|
||||
[chat-id]
|
||||
(let [pinned-messages (rf/sub [:chats/pinned-sorted-list chat-id])
|
||||
render-data (rf/sub [:chats/current-chat-message-list-view-context :in-pinned-view])
|
||||
current-chat (rf/sub [:chat-by-id chat-id])
|
||||
{:keys [community-id]} current-chat
|
||||
community (rf/sub [:communities/community community-id])]
|
||||
[safe-area/consumer
|
||||
(fn [insets]
|
||||
[:f>
|
||||
(fn []
|
||||
(let [{window-height :height} (rn/use-window-dimensions)
|
||||
bottom-inset (:bottom insets)]
|
||||
[rn/scroll-view
|
||||
{:style {:max-height (- window-height (:top insets))}
|
||||
:accessibility-label :pinned-messages-menu}
|
||||
[:<>
|
||||
[quo/text
|
||||
{:size :heading-1
|
||||
:weight :semi-bold
|
||||
:style style/heading}
|
||||
(i18n/label :t/pinned-messages)]
|
||||
(when community
|
||||
[rn/view
|
||||
{:style style/heading-container}
|
||||
[rn/text {:style style/heading-text} (:name community)]
|
||||
[quo/icon
|
||||
:i/chevron-right
|
||||
{:color (colors/theme-colors colors/neutral-50 colors/neutral-40)
|
||||
:size 12}]
|
||||
[rn/text
|
||||
{:style style/chat-name-text}
|
||||
(str "# " (:chat-name current-chat))]])]
|
||||
(if (pos? (count pinned-messages))
|
||||
[rn/flat-list
|
||||
{:data pinned-messages
|
||||
:render-data render-data
|
||||
:render-fn message-render-fn
|
||||
:footer [rn/view {:style (style/list-footer bottom-inset)}]
|
||||
:key-fn list-key-fn
|
||||
:separator quo/separator}]
|
||||
[rn/view {:style (style/no-pinned-messages-container bottom-inset)}
|
||||
[rn/view {:style style/no-pinned-messages-icon}
|
||||
[quo/icon :i/placeholder]]
|
||||
[quo/text
|
||||
{:weight :semi-bold
|
||||
:style style/no-pinned-messages-text}
|
||||
(i18n/label :t/no-pinned-messages)]
|
||||
[quo/text {:size :paragraph-2}
|
||||
(i18n/label
|
||||
(if community
|
||||
:t/no-pinned-messages-community-desc
|
||||
:t/no-pinned-messages-desc))]])]))])]))
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
(ns status-im2.contexts.chat.messages.pin.list.view
|
||||
(:require [quo2.core :as quo]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[status-im2.contexts.chat.messages.content.deleted.view :as content.deleted]
|
||||
[status-im2.contexts.chat.messages.content.view :as message]
|
||||
[utils.i18n :as i18n]
|
||||
[utils.re-frame :as rf]))
|
||||
|
||||
(def list-key-fn #(or (:message-id %) (:value %)))
|
||||
|
||||
(defn message-render-fn
|
||||
[{:keys [deleted? deleted-for-me?] :as message} _ _ context]
|
||||
;; TODO (flexsurfer) probably we don't want reactions here
|
||||
(if (or deleted? deleted-for-me?)
|
||||
[content.deleted/deleted-message message context]
|
||||
[message/message-with-reactions message context]))
|
||||
|
||||
(defn pinned-messages-list
|
||||
[chat-id]
|
||||
(let [pinned-messages (rf/sub [:chats/pinned-sorted-list chat-id])
|
||||
render-data (rf/sub [:chats/current-chat-message-list-view-context :in-pinned-view])
|
||||
current-chat (rf/sub [:chat-by-id chat-id])
|
||||
{:keys [community-id]} current-chat
|
||||
community (rf/sub [:communities/community community-id])]
|
||||
[rn/view {:accessibility-label :pinned-messages-list}
|
||||
;; TODO (flexsurfer) this should be a component in quo2
|
||||
;; https://github.com/status-im/status-mobile/issues/14529
|
||||
[:<>
|
||||
[quo/text
|
||||
{:size :heading-1
|
||||
:weight :semi-bold
|
||||
:style {:margin-horizontal 20}}
|
||||
(i18n/label :t/pinned-messages)]
|
||||
(when community
|
||||
[rn/view
|
||||
{:style {:flex-direction :row
|
||||
:background-color (colors/theme-colors colors/neutral-10 colors/neutral-80)
|
||||
:border-radius 20
|
||||
:align-items :center
|
||||
:align-self :flex-start
|
||||
:margin-horizontal 20
|
||||
:padding 4
|
||||
:margin-top 8}}
|
||||
[rn/text {:style {:margin-left 6 :margin-right 4}} (:name community)]
|
||||
[quo/icon
|
||||
:i/chevron-right
|
||||
{:color (colors/theme-colors colors/neutral-50 colors/neutral-40)
|
||||
:size 12}]
|
||||
[rn/text
|
||||
{:style {:margin-left 4
|
||||
:margin-right 8}}
|
||||
(str "# " (:chat-name current-chat))]])]
|
||||
(if (pos? (count pinned-messages))
|
||||
[rn/flat-list
|
||||
{:data pinned-messages
|
||||
:render-data render-data
|
||||
:render-fn message-render-fn
|
||||
:key-fn list-key-fn
|
||||
:separator quo/separator}]
|
||||
[rn/view
|
||||
{:style {:justify-content :center
|
||||
:align-items :center
|
||||
:margin-top 20}}
|
||||
[rn/view
|
||||
{:style {:width 120
|
||||
:height 120
|
||||
:justify-content :center
|
||||
:align-items :center
|
||||
:border-width 1}} [quo/icon :i/placeholder]]
|
||||
[quo/text
|
||||
{:weight :semi-bold
|
||||
:style {:margin-top 20}}
|
||||
(i18n/label :t/no-pinned-messages)]
|
||||
[quo/text {:size :paragraph-2}
|
||||
(i18n/label
|
||||
(if community :t/no-pinned-messages-community-desc :t/no-pinned-messages-desc))]])]))
|
||||
|
|
@ -637,7 +637,7 @@ class UnpinMessagePopUp(BaseElement):
|
|||
|
||||
class PinnedMessagesList(BaseElement):
|
||||
def __init__(self, driver):
|
||||
super().__init__(driver, xpath="//*[@content-desc='pinned-messages-list']")
|
||||
super().__init__(driver, xpath="//*[@content-desc='pinned-messages-menu']")
|
||||
|
||||
def get_pinned_messages_number(self):
|
||||
self.driver.info("Getting number of pinned messages inside pinned messages list element")
|
||||
|
|
|
|||
Loading…
Reference in New Issue