status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.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 [:enum :default :multiuser :group :channel :community :token :network :multinetwork :account
:collectible :address :icon :audio]]] :collectible :address :icon :audio]]]
[:customization-color {:optional true} [:maybe :schema.common/customization-color]] [:customization-color {:optional true} [:maybe :schema.common/customization-color]]
[:container-style {:optional true} [:maybe :map]]
[:theme :schema.common/theme] [:theme :schema.common/theme]
[:blur? {:optional true} [:maybe :boolean]] [:blur? {:optional true} [:maybe :boolean]]
[:state {:optional true} [:maybe [:enum :selected :default]]]]) [:state {:optional true} [:maybe [:enum :selected :default]]]])
@ -38,6 +39,7 @@
(def ^:private ?channel (def ^:private ?channel
[:map [:map
[:community-name {:optional true} [:maybe :string]] [:community-name {:optional true} [:maybe :string]]
[:community-logo {:optional true} [:maybe :schema.common/image-source]]
[:channel-name {:optional true} [:maybe :string]]]) [:channel-name {:optional true} [:maybe :string]]])
(def ^:private ?community (def ^:private ?community

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

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

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

@ -12,6 +12,7 @@
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[quo.theme :as quo.theme] [quo.theme :as quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.fast-image :as fast-image]
[schema.core :as schema])) [schema.core :as schema]))
(defn- tag-skeleton (defn- tag-skeleton
@ -30,7 +31,7 @@
(let [text-size (if (= size 24) :paragraph-2 :paragraph-1) (let [text-size (if (= size 24) :paragraph-2 :paragraph-1)
icon-size (if (= size 24) 16 20)] icon-size (if (= size 24) 16 20)]
[rn/view {:style (style/tag-container size)} [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)} [rn/view {:style (style/tag-spacing size)}
[text/text [text/text
{:style (style/text theme) {:style (style/text theme)
@ -82,81 +83,81 @@
type :default type :default
state :default} state :default}
:as props}] :as props}]
[rn/view [rn/view {:style (merge {:align-items :flex-start} container-style)}
{:style (merge (style/container {:theme theme [rn/view
:type type {:style (style/container {:theme theme
:size size :type type
:state state :size size
:blur? blur? :state state
:customization-color customization-color}) :blur? blur?
container-style) :customization-color customization-color})
:accessibility-label :context-tag} :accessibility-label :context-tag}
(case type (case type
:default :default
[tag-skeleton {:theme theme :size size :text full-name} [tag-skeleton {:theme theme :size size :text full-name}
[user-avatar/user-avatar [user-avatar/user-avatar
{:full-name full-name {:full-name full-name
:profile-picture profile-picture :profile-picture profile-picture
:size (if (= size 24) :xxs 28) :size (if (= size 24) :xxs 28)
:status-indicator? false :status-indicator? false
:ring? false :ring? false
:customization-color customization-color}]] :customization-color customization-color}]]
:multiuser :multiuser
[preview-list/view {:type :user :size :size-20} [preview-list/view {:type :user :size :size-20}
users] users]
:multinetwork :multinetwork
[preview-list/view {:type :network :size :size-20} [preview-list/view {:type :network :size :size-20}
networks] networks]
:audio :audio
[tag-skeleton {:theme theme :text (str duration)} [tag-skeleton {:theme theme :text (str duration)}
[rn/view {:style (style/audio-tag-icon-container customization-color theme)} [rn/view {:style (style/audio-tag-icon-container customization-color theme)}
[icons/icon :i/play {:color style/audio-tag-icon-color :size 12}]]] [icons/icon :i/play {:color style/audio-tag-icon-color :size 12}]]]
:group :group
[tag-skeleton {:theme theme :size size :text group-name} [tag-skeleton {:theme theme :size size :text group-name}
[group-avatar/view [group-avatar/view
{:icon-name :i/members {:icon-name :i/members
:size (if (= size 24) :size-20 :size-28) :size (if (= size 24) :size-20 :size-28)
:customization-color (colors/custom-color customization-color 50)}]] :customization-color (colors/custom-color customization-color 50)}]]
(:channel :community) (:channel :community)
[communities-tag (assoc props :channel? (= type :channel))] [communities-tag (assoc props :channel? (= type :channel))]
:token :token
[tag-skeleton {:theme theme :size size :text (str amount " " token)} [tag-skeleton {:theme theme :size size :text (str amount " " token)}
[token/view [token/view
{:style (style/token-logo size) {:style (style/token-logo size)
:token token :token token
:size (if (= size 24) :size-20 :size-28)}]] :size (if (= size 24) :size-20 :size-28)}]]
:network :network
[tag-skeleton {:theme theme :size size :text network-name} [tag-skeleton {:theme theme :size size :text network-name}
[rn/image {:style (style/circle-logo size) :source network-logo}]] [rn/image {:style (style/circle-logo size) :source network-logo}]]
:collectible :collectible
[tag-skeleton [tag-skeleton
{:theme theme {:theme theme
:size size :size size
:text (str collectible-name " #" collectible-number)} :text (str collectible-name " #" collectible-number)}
[rn/image {:style (style/rounded-logo size) :source collectible}]] [rn/image {:style (style/rounded-logo size) :source collectible}]]
:account :account
[tag-skeleton {:theme theme :size size :text account-name} [tag-skeleton {:theme theme :size size :text account-name}
[account-avatar/view [account-avatar/view
{:customization-color customization-color {:customization-color customization-color
:emoji emoji :emoji emoji
:size (if (= size 24) 20 28)}]] :size (if (= size 24) 20 28)}]]
:address :address
[address-tag props] [address-tag props]
:icon :icon
[icon-tag props] [icon-tag props]
nil)]) nil)]])
(def view (def view
(quo.theme/with-theme (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 (ns status-im.contexts.chat.messenger.menus.pinned-messages.style
(:require (:require
[quo.foundations.colors :as colors]
[react-native.platform :as platform])) [react-native.platform :as platform]))
(defn heading (defn heading
@ -8,29 +7,8 @@
{:padding-horizontal 20 {:padding-horizontal 20
:margin-bottom (when-not community? 12)}) :margin-bottom (when-not community? 12)})
(defn heading-container (def community-tag-container
[] {:margin-horizontal 20 :margin-top 4 :margin-bottom 12})
{: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 no-pinned-messages-container (def no-pinned-messages-container
{:justify-content :center {:justify-content :center
@ -38,22 +16,5 @@
:margin 12 :margin 12
:margin-bottom (when platform/android? 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 (def list-footer
{:height (when platform/android? 12)}) {: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 (ns status-im.contexts.chat.messenger.menus.pinned-messages.view
(:require (:require
[quo.core :as quo] [quo.core :as quo]
[quo.foundations.colors :as colors]
[quo.theme] [quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.fast-image :as fast-image]
[react-native.gesture :as gesture] [react-native.gesture :as gesture]
[status-im.common.resources :as resources] [status-im.common.resources :as resources]
[status-im.contexts.chat.messenger.menus.pinned-messages.style :as style] [status-im.contexts.chat.messenger.menus.pinned-messages.style :as style]
@ -52,20 +50,13 @@
:style (style/heading community)} :style (style/heading community)}
(i18n/label :t/pinned-messages)] (i18n/label :t/pinned-messages)]
(when community (when community
[rn/view {:style (style/heading-container)} [quo/context-tag
[fast-image/fast-image {:type :channel
{:source (community-avatar community-images) :size 24
:style {:width 20 :container-style style/community-tag-container
:height 20 :community-logo (community-avatar community-images)
:border-radius 20}}] :community-name (:name community)
[rn/text {:style (style/heading-text)} (:name community)] :channel-name (:chat-name current-chat)}])]
[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))]])]
(if (pos? (count pinned)) (if (pos? (count pinned))
[rn/flat-list [rn/flat-list
{:data pinned {:data pinned