fix: icon size in system message add new :size/s-24 icon-avatar (#17108)
This commit is contained in:
parent
b393d4e037
commit
50a1e10136
|
@ -5,18 +5,22 @@
|
||||||
[react-native.core :as rn]))
|
[react-native.core :as rn]))
|
||||||
|
|
||||||
(def ^:private sizes
|
(def ^:private sizes
|
||||||
{:medium 32
|
{:size/s-48 {:component 48
|
||||||
:small 20})
|
:icon 20}
|
||||||
|
:size/s-32 {:component 32
|
||||||
|
:icon 20}
|
||||||
|
:size/s-24 {:component 24
|
||||||
|
:icon 16}
|
||||||
|
:size/s-20 {:component 20
|
||||||
|
:icon 12}})
|
||||||
|
|
||||||
(defn icon-avatar-internal
|
(defn icon-avatar-internal
|
||||||
[{:keys [size icon color opacity border? theme]
|
[{:keys [size icon color opacity border? theme]
|
||||||
:or {opacity 20}}]
|
:or {opacity 20
|
||||||
(let [component-size (size sizes)
|
size :size/s-32}}]
|
||||||
|
(let [{component-size :component icon-size :icon} (get sizes size)
|
||||||
circle-color (colors/custom-color color 50 opacity)
|
circle-color (colors/custom-color color 50 opacity)
|
||||||
icon-color (colors/custom-color-by-theme color 50 60)
|
icon-color (colors/custom-color-by-theme color 50 60)]
|
||||||
icon-size (case size
|
|
||||||
:medium 20
|
|
||||||
:small 12)]
|
|
||||||
[rn/view
|
[rn/view
|
||||||
{:style {:width component-size
|
{:style {:width component-size
|
||||||
:height component-size
|
:height component-size
|
||||||
|
|
|
@ -1,12 +1,12 @@
|
||||||
(ns quo2.components.messages.system-message
|
(ns quo2.components.messages.system-message
|
||||||
(:require [quo2.components.avatars.icon-avatar :as icon-avatar]
|
(:require [clojure.string :as string]
|
||||||
|
[quo2.components.avatars.icon-avatar :as icon-avatar]
|
||||||
[quo2.components.avatars.user-avatar.view :as user-avatar]
|
[quo2.components.avatars.user-avatar.view :as user-avatar]
|
||||||
[quo2.components.markdown.text :as text]
|
[quo2.components.markdown.text :as text]
|
||||||
[quo2.foundations.colors :as colors]
|
[quo2.foundations.colors :as colors]
|
||||||
[react-native.core :as rn]
|
|
||||||
[utils.i18n :as i18n]
|
|
||||||
[quo2.theme :as quo.theme]
|
[quo2.theme :as quo.theme]
|
||||||
[clojure.string :as string]))
|
[react-native.core :as rn]
|
||||||
|
[utils.i18n :as i18n]))
|
||||||
|
|
||||||
(defn text-color
|
(defn text-color
|
||||||
[theme]
|
[theme]
|
||||||
|
@ -21,7 +21,7 @@
|
||||||
[rn/view
|
[rn/view
|
||||||
{:margin-right 8}
|
{:margin-right 8}
|
||||||
[icon-avatar/icon-avatar
|
[icon-avatar/icon-avatar
|
||||||
{:size :medium
|
{:size :size/s-32
|
||||||
:icon icon
|
:icon icon
|
||||||
:color color
|
:color color
|
||||||
:opacity opacity}]])
|
:opacity opacity}]])
|
||||||
|
|
|
@ -1,18 +1,18 @@
|
||||||
(ns quo2.components.wallet.keypair.view
|
(ns quo2.components.wallet.keypair.view
|
||||||
(:require
|
(:require
|
||||||
|
[clojure.string :as string]
|
||||||
[quo2.components.avatars.icon-avatar :as icon-avatar]
|
[quo2.components.avatars.icon-avatar :as icon-avatar]
|
||||||
[quo2.components.avatars.user-avatar.view :as user-avatar]
|
[quo2.components.avatars.user-avatar.view :as user-avatar]
|
||||||
[quo2.components.icon :as icon]
|
[quo2.components.icon :as icon]
|
||||||
[quo2.components.list-items.account-list-card.view :as account-list-card]
|
[quo2.components.list-items.account-list-card.view :as account-list-card]
|
||||||
[quo2.components.markdown.text :as text]
|
[quo2.components.markdown.text :as text]
|
||||||
|
[quo2.components.selectors.selectors.view :as selectors]
|
||||||
|
[quo2.components.wallet.keypair.style :as style]
|
||||||
[quo2.foundations.colors :as colors]
|
[quo2.foundations.colors :as colors]
|
||||||
[quo2.theme :as quo.theme]
|
[quo2.theme :as quo.theme]
|
||||||
[react-native.core :as rn]
|
[react-native.core :as rn]
|
||||||
[quo2.components.selectors.selectors.view :as selectors]
|
|
||||||
[reagent.core :as reagent]
|
[reagent.core :as reagent]
|
||||||
[utils.i18n :as i18n]
|
[utils.i18n :as i18n]))
|
||||||
[quo2.components.wallet.keypair.style :as style]
|
|
||||||
[clojure.string :as string]))
|
|
||||||
|
|
||||||
(defn keypair-string
|
(defn keypair-string
|
||||||
[full-name]
|
[full-name]
|
||||||
|
@ -33,7 +33,7 @@
|
||||||
:size :small
|
:size :small
|
||||||
:customization-color customization-color}]
|
:customization-color customization-color}]
|
||||||
[icon-avatar/icon-avatar
|
[icon-avatar/icon-avatar
|
||||||
{:size :medium
|
{:size :size/s-32
|
||||||
:icon :i/placeholder
|
:icon :i/placeholder
|
||||||
:border? true}]))
|
:border? true}]))
|
||||||
|
|
||||||
|
|
|
@ -6,9 +6,10 @@
|
||||||
(def descriptor
|
(def descriptor
|
||||||
[{:key :size
|
[{:key :size
|
||||||
:type :select
|
:type :select
|
||||||
:options [{:key :small}
|
:options [{:key :size/s-20}
|
||||||
{:key :medium}
|
{:key :size/s-24}
|
||||||
{:key :big}]}
|
{:key :size/s-32}
|
||||||
|
{:key :size/s-48}]}
|
||||||
{:key :icon
|
{:key :icon
|
||||||
:type :select
|
:type :select
|
||||||
:options [{:key :i/placeholder20
|
:options [{:key :i/placeholder20
|
||||||
|
@ -19,7 +20,7 @@
|
||||||
|
|
||||||
(defn view
|
(defn view
|
||||||
[]
|
[]
|
||||||
(let [state (reagent/atom {:size :big
|
(let [state (reagent/atom {:size :size/s-48
|
||||||
:icon :i/placeholder20
|
:icon :i/placeholder20
|
||||||
:color :primary})]
|
:color :primary})]
|
||||||
(fn []
|
(fn []
|
||||||
|
|
Loading…
Reference in New Issue