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

Fix pinned messages context tag style (#19245) 

* fix: pinned messages context tag style

Signed-off-by: Cristian Lungu <lungucristian95@gmail.com>

* formatting

Signed-off-by: Cristian Lungu <lungucristian95@gmail.com>

---------

Signed-off-by: Cristian Lungu <lungucristian95@gmail.com>
This commit is contained in:
Lungu Cristian 2024-03-18 12:34:46 +02:00 committed by GitHub
parent 049822b5bb
commit 60d6a5c3cc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 77 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/quo/components/tags/context_tag/schema.cljs
View File

@ -8,6 +8,7 @@
[:enum :default :multiuser :group :channel :community :token :network :multinetwork :account
:collectible :address :icon :audio]]]
[:customization-color {:optional true} [:maybe :schema.common/customization-color]]
[:container-style {:optional true} [:maybe :map]]
[:theme :schema.common/theme]
[:blur? {:optional true} [:maybe :boolean]]
[:state {:optional true} [:maybe [:enum :selected :default]]]])
@ -38,6 +39,7 @@
(def ^:private ?channel
[:map
[:community-name {:optional true} [:maybe :string]]
[:community-logo {:optional true} [:maybe :schema.common/image-source]]
[:channel-name {:optional true} [:maybe :string]]])
(def ^:private ?community

1
src/quo/components/tags/context_tag/style.cljs
View File

@ -36,6 +36,7 @@
(colors/custom-color customization-color 60)
theme)]
(cond-> {:padding 2
:padding-right 8
:flex-direction :row
:align-items :center
:height size

129
src/quo/components/tags/context_tag/view.cljs
View File

@ -12,6 +12,7 @@
[quo.foundations.colors :as colors]
[quo.theme :as quo.theme]
[react-native.core :as rn]
[react-native.fast-image :as fast-image]
[schema.core :as schema]))
(defn- tag-skeleton
@ -30,7 +31,7 @@
(let [text-size (if (= size 24) :paragraph-2 :paragraph-1)
icon-size (if (= size 24) 16 20)]
[rn/view {:style (style/tag-container size)}
[rn/image {:style (style/circle-logo size) :source community-logo}]
[fast-image/fast-image {:style (style/circle-logo size) :source community-logo}]
[rn/view {:style (style/tag-spacing size)}
[text/text
{:style (style/text theme)
@ -82,81 +83,81 @@
type :default
state :default}
:as props}]
[rn/view
{:style (merge (style/container {:theme theme
:type type
:size size
:state state
:blur? blur?
:customization-color customization-color})
container-style)
:accessibility-label :context-tag}
(case type
:default
[tag-skeleton {:theme theme :size size :text full-name}
[user-avatar/user-avatar
{:full-name full-name
:profile-picture profile-picture
:size (if (= size 24) :xxs 28)
:status-indicator? false
:ring? false
:customization-color customization-color}]]
[rn/view {:style (merge {:align-items :flex-start} container-style)}
[rn/view
{:style (style/container {:theme theme
:type type
:size size
:state state
:blur? blur?
:customization-color customization-color})
:accessibility-label :context-tag}
(case type
:default
[tag-skeleton {:theme theme :size size :text full-name}
[user-avatar/user-avatar
{:full-name full-name
:profile-picture profile-picture
:size (if (= size 24) :xxs 28)
:status-indicator? false
:ring? false
:customization-color customization-color}]]
:multiuser
[preview-list/view {:type :user :size :size-20}
users]
:multiuser
[preview-list/view {:type :user :size :size-20}
users]
:multinetwork
[preview-list/view {:type :network :size :size-20}
networks]
:multinetwork
[preview-list/view {:type :network :size :size-20}
networks]
:audio
[tag-skeleton {:theme theme :text (str duration)}
[rn/view {:style (style/audio-tag-icon-container customization-color theme)}
[icons/icon :i/play {:color style/audio-tag-icon-color :size 12}]]]
:audio
[tag-skeleton {:theme theme :text (str duration)}
[rn/view {:style (style/audio-tag-icon-container customization-color theme)}
[icons/icon :i/play {:color style/audio-tag-icon-color :size 12}]]]
:group
[tag-skeleton {:theme theme :size size :text group-name}
[group-avatar/view
{:icon-name :i/members
:size (if (= size 24) :size-20 :size-28)
:customization-color (colors/custom-color customization-color 50)}]]
:group
[tag-skeleton {:theme theme :size size :text group-name}
[group-avatar/view
{:icon-name :i/members
:size (if (= size 24) :size-20 :size-28)
:customization-color (colors/custom-color customization-color 50)}]]
(:channel :community)
[communities-tag (assoc props :channel? (= type :channel))]
(:channel :community)
[communities-tag (assoc props :channel? (= type :channel))]
:token
[tag-skeleton {:theme theme :size size :text (str amount " " token)}
[token/view
{:style (style/token-logo size)
:token token
:size (if (= size 24) :size-20 :size-28)}]]
:token
[tag-skeleton {:theme theme :size size :text (str amount " " token)}
[token/view
{:style (style/token-logo size)
:token token
:size (if (= size 24) :size-20 :size-28)}]]
:network
[tag-skeleton {:theme theme :size size :text network-name}
[rn/image {:style (style/circle-logo size) :source network-logo}]]
:network
[tag-skeleton {:theme theme :size size :text network-name}
[rn/image {:style (style/circle-logo size) :source network-logo}]]
:collectible
[tag-skeleton
{:theme theme
:size size
:text (str collectible-name " #" collectible-number)}
[rn/image {:style (style/rounded-logo size) :source collectible}]]
:collectible
[tag-skeleton
{:theme theme
:size size
:text (str collectible-name " #" collectible-number)}
[rn/image {:style (style/rounded-logo size) :source collectible}]]
:account
[tag-skeleton {:theme theme :size size :text account-name}
[account-avatar/view
{:customization-color customization-color
:emoji emoji
:size (if (= size 24) 20 28)}]]
:account
[tag-skeleton {:theme theme :size size :text account-name}
[account-avatar/view
{:customization-color customization-color
:emoji emoji
:size (if (= size 24) 20 28)}]]
:address
[address-tag props]
:address
[address-tag props]
:icon
[icon-tag props]
:icon
[icon-tag props]
nil)])
nil)]])
(def view
(quo.theme/with-theme

43
src/status_im/contexts/chat/messenger/menus/pinned_messages/style.cljs
View File

@ -1,6 +1,5 @@
(ns status-im.contexts.chat.messenger.menus.pinned-messages.style
(:require
[quo.foundations.colors :as colors]
[react-native.platform :as platform]))
(defn heading
@ -8,29 +7,8 @@
{:padding-horizontal 20
:margin-bottom (when-not community? 12)})
(defn 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
:margin-bottom 16})
(defn heading-text
[]
{:margin-left 6
:margin-right 4
:color (colors/theme-colors colors/neutral-60 colors/neutral-20)})
(defn chat-name-text
[]
{:margin-left 4
:margin-right 8
:color (colors/theme-colors colors/neutral-60 colors/neutral-20)})
(def community-tag-container
{:margin-horizontal 20 :margin-top 4 :margin-bottom 12})
(def no-pinned-messages-container
{:justify-content :center
@ -38,22 +16,5 @@
:margin 12
:margin-bottom (when platform/android? 12)})
(def no-pinned-messages-icon
{:width 80
:height 80
:justify-content :center
:align-items :center
:border-width 1})
(def no-pinned-messages-content
{:margin-top 12})
(def no-pinned-messages-title
{:text-align :center})
(def no-pinned-messages-text
{:text-align :center
:margin-top 2})
(def list-footer
{:height (when platform/android? 12)})

23
src/status_im/contexts/chat/messenger/menus/pinned_messages/view.cljs
View File

@ -1,10 +1,8 @@
(ns status-im.contexts.chat.messenger.menus.pinned-messages.view
(:require
[quo.core :as quo]
[quo.foundations.colors :as colors]
[quo.theme]
[react-native.core :as rn]
[react-native.fast-image :as fast-image]
[react-native.gesture :as gesture]
[status-im.common.resources :as resources]
[status-im.contexts.chat.messenger.menus.pinned-messages.style :as style]
@ -52,20 +50,13 @@
:style (style/heading community)}
(i18n/label :t/pinned-messages)]
(when community
[rn/view {:style (style/heading-container)}
[fast-image/fast-image
{:source (community-avatar community-images)
:style {:width 20
:height 20
:border-radius 20}}]
[rn/text {:style (style/heading-text)} (:name community)]
[quo/icon
:i/chevron-right
{:color (colors/theme-colors colors/neutral-60 colors/neutral-30)
:size 12}]
[rn/text
{:style (style/chat-name-text)}
(str "# " (:chat-name current-chat))]])]
[quo/context-tag
{:type :channel
:size 24
:container-style style/community-tag-container
:community-logo (community-avatar community-images)
:community-name (:name community)
:channel-name (:chat-name current-chat)}])]
(if (pos? (count pinned))
[rn/flat-list
{:data pinned