Style fixes for pinned messages (#18061)

* Style fixes for pinned messages

* Small code style update
This commit is contained in:
Alexander 2023-12-05 11:31:45 +01:00 committed by GitHub
parent fe20fa4e99
commit a4f1f23d3c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 46 additions and 32 deletions

View File

@ -1,11 +1,12 @@
(ns status-im2.contexts.chat.menus.pinned-messages.style (ns status-im2.contexts.chat.menus.pinned-messages.style
(:require (:require
[quo.foundations.colors :as colors])) [quo.foundations.colors :as colors]
[react-native.platform :as platform]))
(defn heading (defn heading
[community?] [community?]
{:margin-horizontal 20 {:padding-horizontal 20
:margin-bottom (when-not community? 24)}) :margin-bottom (when-not community? 12)})
(defn heading-container (defn heading-container
[] []
@ -31,23 +32,28 @@
:margin-right 8 :margin-right 8
:color (colors/theme-colors colors/neutral-60 colors/neutral-20)}) :color (colors/theme-colors colors/neutral-60 colors/neutral-20)})
(defn list-footer (def no-pinned-messages-container
[bottom-inset]
{:height bottom-inset})
(defn no-pinned-messages-container
[bottom-inset]
{:justify-content :center {:justify-content :center
:align-items :center :align-items :center
:margin-top 20 :margin 12
:margin-bottom bottom-inset}) :margin-bottom (when platform/android? 12)})
(def no-pinned-messages-icon (def no-pinned-messages-icon
{:width 120 {:width 80
:height 120 :height 80
:justify-content :center :justify-content :center
:align-items :center :align-items :center
:border-width 1}) :border-width 1})
(def no-pinned-messages-content
{:margin-top 12})
(def no-pinned-messages-title
{:text-align :center})
(def no-pinned-messages-text (def no-pinned-messages-text
{:margin-top 20}) {:text-align :center
:margin-top 2})
(def list-footer
{:height (when platform/android? 12)})

View File

@ -5,7 +5,6 @@
[react-native.core :as rn] [react-native.core :as rn]
[react-native.fast-image :as fast-image] [react-native.fast-image :as fast-image]
[react-native.gesture :as gesture] [react-native.gesture :as gesture]
[react-native.safe-area :as safe-area]
[status-im2.contexts.chat.menus.pinned-messages.style :as style] [status-im2.contexts.chat.menus.pinned-messages.style :as style]
[status-im2.contexts.chat.messages.content.view :as message] [status-im2.contexts.chat.messages.content.view :as message]
[utils.i18n :as i18n] [utils.i18n :as i18n]
@ -24,6 +23,25 @@
[message _ _ context] [message _ _ context]
[message/message message context (atom false)]) [message/message message context (atom false)])
(defn empty-pinned-messages-state
[{:keys [community?]}]
[rn/view {:style style/no-pinned-messages-container}
[rn/view {:style style/no-pinned-messages-icon}
[quo/icon :i/placeholder]]
[rn/view {:style style/no-pinned-messages-content}
[quo/text
{:size :paragraph-1
:weight :semi-bold
:style style/no-pinned-messages-title}
(i18n/label :t/no-pinned-messages)]
[quo/text
{:size :paragraph-2
:style style/no-pinned-messages-text}
(i18n/label
(if community?
:t/no-pinned-messages-community-desc
:t/no-pinned-messages-desc))]]])
(defn pinned-messages (defn pinned-messages
[chat-id] [chat-id]
(let [pinned (rf/sub [:chats/pinned-sorted-list chat-id]) (let [pinned (rf/sub [:chats/pinned-sorted-list chat-id])
@ -31,10 +49,10 @@
current-chat (rf/sub [:chat-by-id chat-id]) current-chat (rf/sub [:chat-by-id chat-id])
{:keys [community-id]} current-chat {:keys [community-id]} current-chat
community (rf/sub [:communities/community community-id]) community (rf/sub [:communities/community community-id])
bottom-inset (safe-area/get-bottom)
community-images (rf/sub [:community/images community-id])] community-images (rf/sub [:community/images community-id])]
[gesture/scroll-view [gesture/scroll-view
{:accessibility-label :pinned-messages-menu} {:accessibility-label :pinned-messages-menu
:bounces false}
[:<> [:<>
[quo/text [quo/text
{:size :heading-2 {:size :heading-2
@ -61,18 +79,8 @@
{:data pinned {:data pinned
:render-data render-data :render-data render-data
:render-fn message-render-fn :render-fn message-render-fn
:footer [rn/view {:style (style/list-footer bottom-inset)}] :footer [rn/view {:style style/list-footer}]
:key-fn list-key-fn :key-fn list-key-fn
:separator [quo/separator {:style {:margin-vertical 8}}]}] :separator [quo/separator {:style {:margin-vertical 8}}]}]
[rn/view {:style (style/no-pinned-messages-container bottom-inset)} [empty-pinned-messages-state
[rn/view {:style style/no-pinned-messages-icon} {:community? (boolean community)}])]))
[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))]])]))

View File

@ -2013,8 +2013,8 @@
"you-must-now-hold": "You must now hold:", "you-must-now-hold": "You must now hold:",
"you-must-always-hold": "You must always hold:", "you-must-always-hold": "You must always hold:",
"shell-placeholder-title": "Your apps will run here", "shell-placeholder-title": "Your apps will run here",
"no-pinned-messages-desc": "This chat doesn't have any pinned messages.", "no-pinned-messages-desc": "This chat doesnt have any\npinned messages.",
"no-pinned-messages-community-desc": "This channel doesn't have any pinned messages.", "no-pinned-messages-community-desc": "This channel doesnt have any\npinned messages.",
"shell-placeholder-subtitle": "Open tabs of your communities, messages,\nwallet account and browser windows", "shell-placeholder-subtitle": "Open tabs of your communities, messages,\nwallet account and browser windows",
"invite-friends-to-status": "Invite friends to Status", "invite-friends-to-status": "Invite friends to Status",
"share-invite-link": "Share an invite link", "share-invite-link": "Share an invite link",