Add missing context tags variants & fix API (#16962)
Add icon-name to group avatar Add missing context-tags variants and fix the API to match figma Updates context-tag previous uses Update use of group-avatar api
This commit is contained in:
Ulises Manuel
GitHub
parent
6156bfc472
commit
255a3b9172
|
|
@ -1,6 +1,6 @@
|
|||
(ns quo2.components.avatars.group-avatar.view
|
||||
(:require [quo2.components.icon :as icon]
|
||||
[quo2.theme :as theme]
|
||||
[quo2.theme :as quo.theme]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[react-native.fast-image :as fast-image]
|
||||
|
|
@ -20,9 +20,11 @@
|
|||
|
||||
(defn- view-internal
|
||||
[_]
|
||||
(fn [{:keys [size theme customization-color picture]
|
||||
(fn [{:keys [size theme customization-color picture icon-name]
|
||||
:or {size :size/s-20
|
||||
customization-color :blue}}]
|
||||
customization-color :blue
|
||||
picture nil
|
||||
icon-name :i/group}}]
|
||||
(let [container-size (get-in sizes [size :container])
|
||||
icon-size (get-in sizes [size :icon])]
|
||||
[rn/view
|
||||
|
|
@ -34,8 +36,8 @@
|
|||
{:source picture
|
||||
:style {:width container-size
|
||||
:height container-size}}]
|
||||
[icon/icon :i/members
|
||||
[icon/icon icon-name
|
||||
{:size icon-size
|
||||
:color colors/white-opa-70}])])))
|
||||
|
||||
(def view (theme/with-theme view-internal))
|
||||
(def view (quo.theme/with-theme view-internal))
|
||||
|
|
|
|||
|
|
@ -14,6 +14,10 @@
|
|||
:status-indicator 12
|
||||
:status-indicator-border 2
|
||||
:font-size :paragraph-2}
|
||||
28 {:dimensions 28
|
||||
:status-indicator 0
|
||||
:status-indicator-border 0
|
||||
:font-size :paragraph-2}
|
||||
:xs {:dimensions 24
|
||||
:status-indicator 0
|
||||
:status-indicator-border 0
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
(ns quo2.components.markdown.list.view
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.components.counter.step.view :as step]
|
||||
[quo2.components.markdown.list.style :as style]
|
||||
(:require [quo2.components.counter.step.view :as step]
|
||||
[quo2.components.icon :as icon]
|
||||
[quo2.components.markdown.list.style :as style]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.components.tags.context-tag.view :as context-tag]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.theme :as theme]
|
||||
[quo2.components.tags.context-tag.view :as context-tag]))
|
||||
[react-native.core :as rn]))
|
||||
|
||||
(defn get-colors
|
||||
[theme blur?]
|
||||
|
|
@ -27,7 +27,11 @@
|
|||
:size :paragraph-2}
|
||||
description]
|
||||
[rn/view {:style {:margin-left 4}}
|
||||
[context-tag/context-tag {:blur? blur?} tag-picture tag-name]]
|
||||
[context-tag/view
|
||||
{:blur? blur?
|
||||
:size 24
|
||||
:profile-picture tag-picture
|
||||
:full-name tag-name}]]
|
||||
[text/text
|
||||
{:style {:margin-left 4}
|
||||
:accessibility-label :list-item-description-after-tag
|
||||
|
|
|
|||
|
|
@ -1,31 +1,11 @@
|
|||
(ns quo2.components.tags.context-tag.style
|
||||
(:require [quo2.foundations.colors :as colors]))
|
||||
|
||||
(defn base-tag
|
||||
[override-theme blur?]
|
||||
{:border-radius 100
|
||||
:padding-vertical 3
|
||||
:flex-direction :row
|
||||
:padding-right 8
|
||||
:padding-left 8
|
||||
:background-color (if blur?
|
||||
(colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 override-theme)
|
||||
(colors/theme-colors colors/neutral-10 colors/neutral-90 override-theme))})
|
||||
|
||||
(defn context-tag-icon-color
|
||||
[blur?]
|
||||
[theme blur?]
|
||||
(if blur?
|
||||
(colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40)
|
||||
(colors/theme-colors colors/neutral-50 colors/neutral-40)))
|
||||
|
||||
(def context-tag-text-container
|
||||
{:align-items :center
|
||||
:margin-left 4
|
||||
:flex-direction :row})
|
||||
|
||||
(def audio-tag-container
|
||||
{:padding-left 2
|
||||
:padding-vertical 2})
|
||||
(colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
|
||||
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))
|
||||
|
||||
(def audio-tag-icon-container
|
||||
{:width 20
|
||||
|
|
@ -37,21 +17,91 @@
|
|||
|
||||
(def audio-tag-icon-color colors/white)
|
||||
|
||||
(defn audio-tag-text-color
|
||||
[override-theme]
|
||||
(colors/theme-colors colors/neutral-100 colors/white override-theme))
|
||||
(defn container
|
||||
[{:keys [theme type size state blur? customization-color]}]
|
||||
(let [background-color (if blur?
|
||||
(colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
|
||||
(colors/theme-colors colors/neutral-10 colors/neutral-90 theme))
|
||||
border-radius (cond
|
||||
(not (#{:account :collectible} type)) 16
|
||||
(= size 24) 8
|
||||
:else 10)
|
||||
border-color (colors/theme-colors
|
||||
(colors/custom-color customization-color 50)
|
||||
(colors/custom-color customization-color 60)
|
||||
theme)]
|
||||
(cond-> {:padding 2
|
||||
:flex-direction :row
|
||||
:align-items :center
|
||||
:height size
|
||||
:background-color background-color
|
||||
:border-radius border-radius}
|
||||
(= state :selected) (assoc :height (+ size 2)
|
||||
:border-color border-color
|
||||
:border-width 1))))
|
||||
|
||||
(def community-tag
|
||||
{:padding-vertical 2
|
||||
:padding-left 2})
|
||||
|
||||
(def community-tag-text-container
|
||||
{:margin-left 4
|
||||
:flex 1
|
||||
(defn tag-container
|
||||
[size]
|
||||
{:margin-right (if (= size 24) 6 10)
|
||||
:flex-direction :row
|
||||
:align-items :center})
|
||||
|
||||
(defn community-tag-text
|
||||
[override-theme]
|
||||
{:margin-left 2
|
||||
:color (colors/theme-colors colors/neutral-100 colors/white override-theme)})
|
||||
(defn tag-spacing
|
||||
[size]
|
||||
{:margin-left (if (= size 24) 4 8)})
|
||||
|
||||
(defn text
|
||||
[theme]
|
||||
{:color (colors/theme-colors colors/neutral-100 colors/white theme)})
|
||||
|
||||
(defn circle-logo
|
||||
[size]
|
||||
(if (= size 24)
|
||||
{:width 20 :height 20 :border-radius 10}
|
||||
{:width 28 :height 28 :border-radius 14}))
|
||||
|
||||
(defn rounded-logo
|
||||
[size]
|
||||
(if (= size 24)
|
||||
{:width 20
|
||||
:height 20
|
||||
:border-radius 6}
|
||||
{:width 28
|
||||
:height 28
|
||||
:border-radius 8}))
|
||||
|
||||
(defn address
|
||||
[size]
|
||||
(if (= size 24)
|
||||
{:margin-horizontal 6
|
||||
:margin-vertical 1
|
||||
:flex-direction :row
|
||||
:align-items :center}
|
||||
{:margin-horizontal 10
|
||||
:margin-vertical 3
|
||||
:flex-direction :row
|
||||
:align-items :center}))
|
||||
|
||||
(defn icon
|
||||
[size]
|
||||
(if (= size 24)
|
||||
{:margin-horizontal 6
|
||||
:margin-vertical 1
|
||||
:flex-direction :row
|
||||
:align-items :center}
|
||||
{:margin-left 8
|
||||
:margin-right 10
|
||||
:margin-vertical 3
|
||||
:flex-direction :row
|
||||
:align-items :center}))
|
||||
|
||||
(defn icon-spacing
|
||||
[size]
|
||||
(if (= size 24)
|
||||
{:margin-left 4}
|
||||
{:margin-left 2}))
|
||||
|
||||
(def audio
|
||||
{:margin-right 6
|
||||
:flex-direction :row
|
||||
:align-items :center})
|
||||
|
|
|
|||
|
|
@ -1,106 +1,215 @@
|
|||
(ns quo2.components.tags.context-tag.view
|
||||
(:require [quo2.components.avatars.group-avatar.view :as group-avatar]
|
||||
[quo2.components.avatars.user-avatar.style :as user-avatar.style]
|
||||
(:require [quo2.components.avatars.account-avatar.view :as account-avatar]
|
||||
[quo2.components.avatars.group-avatar.view :as group-avatar]
|
||||
[quo2.components.avatars.user-avatar.view :as user-avatar]
|
||||
[quo2.components.icon :as icons]
|
||||
[quo2.components.list-items.preview-list.view :as preview-list]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.components.tags.context-tag.style :as style]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.theme :as quo.theme]
|
||||
[react-native.core :as rn]))
|
||||
|
||||
(defn trim-public-key
|
||||
[pk]
|
||||
(str (subs pk 0 6) "..." (subs pk (- (count pk) 3))))
|
||||
|
||||
(defn base-tag
|
||||
[{:keys [override-theme style blur?]} & children]
|
||||
(into
|
||||
[rn/view {:style (merge (style/base-tag override-theme blur?) style)}]
|
||||
children))
|
||||
|
||||
(defn group-avatar-tag
|
||||
[label opts]
|
||||
[base-tag
|
||||
(-> opts
|
||||
(select-keys [:override-theme :style :blur?])
|
||||
(assoc-in [:style :padding-left] 3)
|
||||
(assoc-in [:style :padding-vertical] 2))
|
||||
[group-avatar/view opts]
|
||||
(defn- tag-skeleton
|
||||
[{:keys [theme size text] :or {size 24}} logo-component]
|
||||
[rn/view {:style (style/tag-container size)}
|
||||
logo-component
|
||||
[rn/view {:style (style/tag-spacing size)}
|
||||
[text/text
|
||||
{:weight :medium
|
||||
:size :paragraph-2
|
||||
:style (:text-style opts)}
|
||||
(str " " label)]])
|
||||
{:style (style/text theme)
|
||||
:weight :medium
|
||||
:size (if (= size 24) :paragraph-2 :paragraph-1)}
|
||||
text]]])
|
||||
|
||||
(defn public-key-tag
|
||||
[params public-key]
|
||||
[base-tag params
|
||||
(defn- communities-tag
|
||||
[{:keys [theme size community-logo community-name blur? channel? channel-name]}]
|
||||
(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}]
|
||||
[rn/view {:style (style/tag-spacing size)}
|
||||
[text/text
|
||||
{:weight :monospace
|
||||
:size :paragraph-2}
|
||||
(trim-public-key public-key)]])
|
||||
|
||||
(defn context-tag
|
||||
[{:keys [text-style blur? no-avatar-placeholder? text-container-style ellipsize-text? ring?]
|
||||
:as props}
|
||||
photo
|
||||
name
|
||||
channel-name]
|
||||
(let [text-props {:weight :medium
|
||||
:size :paragraph-2
|
||||
:style (assoc text-style :justify-content :center)
|
||||
:number-of-lines 1
|
||||
:ellipsize-mode :tail}
|
||||
empty-photo? (nil? photo)
|
||||
avatar-size :xxs
|
||||
avatar-outer-size (get-in user-avatar.style/sizes [avatar-size :outer])]
|
||||
[base-tag (update-in props [:style :padding-left] #(or % 3))
|
||||
(if (and empty-photo? no-avatar-placeholder?)
|
||||
[rn/view {:style {:width avatar-outer-size}}]
|
||||
[user-avatar/user-avatar
|
||||
{:full-name name
|
||||
:profile-picture photo
|
||||
:size avatar-size
|
||||
:ring? ring?
|
||||
:status-indicator? false}])
|
||||
[rn/view {:style (or text-container-style style/context-tag-text-container)}
|
||||
(if ellipsize-text?
|
||||
[rn/view {:style {:flex 1}}
|
||||
[text/text text-props name]]
|
||||
[text/text text-props (str " " name)])
|
||||
(when channel-name
|
||||
{:style (style/text theme)
|
||||
:weight :medium
|
||||
:size text-size}
|
||||
community-name]]
|
||||
(when channel?
|
||||
[:<>
|
||||
[icons/icon
|
||||
:i/chevron-right
|
||||
{:color (style/context-tag-icon-color blur?)
|
||||
:size 16}]
|
||||
[text/text text-props (str "# " channel-name)]])]]))
|
||||
|
||||
(defn user-avatar-tag
|
||||
[params username photo]
|
||||
[context-tag params photo username])
|
||||
|
||||
(defn audio-tag
|
||||
[duration params]
|
||||
[base-tag (merge {:style style/audio-tag-container} params)
|
||||
[rn/view {:style style/audio-tag-icon-container}
|
||||
[icons/icon
|
||||
:i/play
|
||||
{:color style/audio-tag-icon-color
|
||||
:size 12}]]
|
||||
[icons/icon :i/chevron-right
|
||||
{:color (style/context-tag-icon-color theme blur?)
|
||||
:size icon-size}]
|
||||
[text/text
|
||||
{:weight :medium
|
||||
:size :paragraph-2
|
||||
:style {:margin-left 4
|
||||
:color (style/audio-tag-text-color (:override-theme params))}}
|
||||
duration]])
|
||||
{:style (style/text theme)
|
||||
:weight :medium
|
||||
:size text-size}
|
||||
(str "# " channel-name)]])]))
|
||||
|
||||
(defn community-tag
|
||||
[avatar community-name {:keys [override-theme] :as params}]
|
||||
[context-tag
|
||||
(merge {:style style/community-tag
|
||||
:text-style (style/community-tag-text override-theme)
|
||||
:text-container-style style/community-tag-text-container
|
||||
:ellipsize-text? true}
|
||||
params)
|
||||
avatar
|
||||
community-name])
|
||||
(defn- trim-public-key
|
||||
[pk]
|
||||
(str (subs pk 0 5) "..." (subs pk (- (count pk) 3))))
|
||||
|
||||
(defn- address-tag
|
||||
[{:keys [theme size address]}]
|
||||
[rn/view {:style (style/address size)}
|
||||
[text/text
|
||||
{:style (style/text theme)
|
||||
:weight :monospace ;; TODO: fix this style (issue #17009)
|
||||
:size (if (= size 24) :paragraph-2 :paragraph-1)}
|
||||
(trim-public-key address)]])
|
||||
|
||||
(defn- icon-tag
|
||||
[{:keys [theme size icon blur? context]}]
|
||||
[rn/view {:style (style/icon size)}
|
||||
[icons/icon icon
|
||||
{:color (style/context-tag-icon-color theme blur?)
|
||||
:size (if (= size 24) 12 20)}]
|
||||
[rn/view {:style (style/icon-spacing size)}
|
||||
[text/text
|
||||
{:style (style/text theme)
|
||||
:weight :medium
|
||||
:size (if (= size 24) :paragraph-2 :paragraph-1)}
|
||||
context]]])
|
||||
|
||||
(defn- view-internal
|
||||
[{:keys [theme type size state blur? customization-color profile-picture full-name users
|
||||
group-name token-logo amount token-name network-logo network-name networks
|
||||
account-name emoji collectible collectible-name collectible-number duration]
|
||||
:or {customization-color :blue
|
||||
type :default
|
||||
state :default}
|
||||
:as props}]
|
||||
[rn/view
|
||||
{:style (style/container {:theme theme
|
||||
:type type
|
||||
:size size
|
||||
:state state
|
||||
:blur? blur?
|
||||
:customization-color customization-color})}
|
||||
(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}]]
|
||||
|
||||
:multiuser
|
||||
[preview-list/view {:type :user :size 20}
|
||||
users]
|
||||
|
||||
:multinetwork
|
||||
[preview-list/view {:type :network :size 20}
|
||||
(map #(hash-map :profile-picture %) networks)]
|
||||
|
||||
:audio
|
||||
[tag-skeleton {:theme theme :text (str duration)}
|
||||
[rn/view {:style style/audio-tag-icon-container}
|
||||
[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/s-20 :size/s-28)
|
||||
:customization-color (colors/custom-color customization-color 50)}]]
|
||||
|
||||
(:channel :community)
|
||||
[communities-tag (assoc props :channel? (= type :channel))]
|
||||
|
||||
:token
|
||||
[tag-skeleton {:theme theme :size size :text (str amount " " token-name)}
|
||||
[rn/image {:style (style/circle-logo size) :source token-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}]]
|
||||
|
||||
: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]
|
||||
|
||||
:icon
|
||||
[icon-tag props]
|
||||
|
||||
nil)])
|
||||
|
||||
(def view
|
||||
"Properties:
|
||||
type, state, blur? & customization-color
|
||||
|
||||
Depending on the `type` selected, different properties are accepted:
|
||||
- `:default` or `nil`:
|
||||
- size
|
||||
- profile-picture
|
||||
- full-name
|
||||
|
||||
- `:multiuser`:
|
||||
- users (vector of {:profile-picture pic, :full-name \"a name\"})
|
||||
|
||||
- `:group`
|
||||
- size
|
||||
- group-name
|
||||
|
||||
- `:community`
|
||||
- size
|
||||
- community-logo (valid rn/image :source value)
|
||||
- community-name
|
||||
|
||||
- `:channel`
|
||||
- size
|
||||
- community-logo (valid rn/image :source value)
|
||||
- community-name
|
||||
- channel-name
|
||||
|
||||
- `:token`
|
||||
- size
|
||||
- token-logo (valid rn/image :source value)
|
||||
- amount
|
||||
- token-name
|
||||
|
||||
- `:network`
|
||||
- size
|
||||
- network-logo (valid rn/image :source value)
|
||||
- network-name
|
||||
|
||||
- `:multinetworks`
|
||||
- networks (vector of {:network-logo pic, :network-name \"a name\"})
|
||||
|
||||
- `:account`
|
||||
- size
|
||||
- account-name
|
||||
- emoji (string containing an emoji)
|
||||
|
||||
- `:collectible`
|
||||
- size
|
||||
- collectible (valid rn/image :source value)
|
||||
- collectible-name
|
||||
- collectible-number
|
||||
|
||||
- `:address`
|
||||
- size
|
||||
- address (string)
|
||||
|
||||
- `:icon`
|
||||
- size
|
||||
- icon
|
||||
- context (string)
|
||||
|
||||
- `:audio`
|
||||
- duration (string)
|
||||
"
|
||||
(quo.theme/with-theme view-internal))
|
||||
|
|
|
|||
|
|
@ -315,11 +315,8 @@
|
|||
(def permission-tag quo2.components.tags.permission-tag/tag)
|
||||
(def status-tag quo2.components.tags.status-tags/status-tag)
|
||||
(def token-tag quo2.components.tags.token-tag/tag)
|
||||
(def user-avatar-tag quo2.components.tags.context-tag.view/user-avatar-tag)
|
||||
(def context-tag quo2.components.tags.context-tag.view/context-tag)
|
||||
(def group-avatar-tag quo2.components.tags.context-tag.view/group-avatar-tag)
|
||||
(def audio-tag quo2.components.tags.context-tag.view/audio-tag)
|
||||
(def community-tag quo2.components.tags.context-tag.view/community-tag)
|
||||
|
||||
(def context-tag quo2.components.tags.context-tag.view/view)
|
||||
|
||||
;;;; Title
|
||||
(def title quo2.components.text-combinations.title.view/title)
|
||||
|
|
|
|||
|
|
@ -16,11 +16,11 @@
|
|||
[rn/view {:padding-horizontal 20}
|
||||
[quo/text {:size :heading-1 :weight :semi-bold}
|
||||
(i18n/label :t/enter-password)]
|
||||
[quo/user-avatar-tag
|
||||
{:size :small
|
||||
:style {:margin-top 8 :margin-bottom 20}}
|
||||
(multiaccounts/displayed-name account)
|
||||
(multiaccounts/displayed-photo account)]
|
||||
[rn/view {:style {:margin-top 8 :margin-bottom 20}}
|
||||
[quo/context-tag
|
||||
{:size 24
|
||||
:profile-picture (multiaccounts/displayed-photo account)
|
||||
:full-name (multiaccounts/displayed-name account)}]]
|
||||
[quo/input
|
||||
{:type :password
|
||||
:label (i18n/label :t/profile-password)
|
||||
|
|
|
|||
|
|
@ -12,6 +12,6 @@
|
|||
:align-items :center
|
||||
:justify-content :space-between})
|
||||
|
||||
(def context-tag
|
||||
(def community-tag
|
||||
{:margin-right :auto
|
||||
:margin-top 8})
|
||||
|
|
|
|||
|
|
@ -14,7 +14,10 @@
|
|||
:weight :semi-bold
|
||||
:size :heading-1}
|
||||
title]]
|
||||
[rn/view {:style style/community-tag}
|
||||
[quo/context-tag
|
||||
{:style style/context-tag}
|
||||
(:thumbnail images) name]
|
||||
{:type :community
|
||||
:size 24
|
||||
:community-logo (:thumbnail images)
|
||||
:community-name name}]]
|
||||
children]))
|
||||
|
|
|
|||
|
|
@ -37,11 +37,12 @@
|
|||
:weight :semi-bold
|
||||
:size :heading-1}
|
||||
(request-to-join-text open?)]]
|
||||
[rn/view {:style {:margin-right :auto :margin-top 8}}
|
||||
[quo/context-tag
|
||||
{:style
|
||||
{:margin-right :auto
|
||||
:margin-top 8}}
|
||||
(:thumbnail images) name]
|
||||
{:type :community
|
||||
:size 24
|
||||
:community-logo (:thumbnail images)
|
||||
:community-name name}]]
|
||||
[quo/text
|
||||
{:style {:margin-top 24}
|
||||
:accessibility-label :communities-rules-title
|
||||
|
|
|
|||
|
|
@ -19,15 +19,21 @@
|
|||
|
||||
(defn example-tags
|
||||
[blur?]
|
||||
[[quo/context-tag {:blur? [blur?]}
|
||||
(resources/get-mock-image :user-picture-male5)
|
||||
"alisher.eth"]
|
||||
[quo/context-tag {:blur? [blur?]}
|
||||
(resources/get-mock-image :user-picture-male4)
|
||||
"Pedro"]
|
||||
[quo/context-tag {:blur? [blur?]}
|
||||
(resources/get-mock-image :user-picture-female2)
|
||||
"Freya Odinson"]])
|
||||
[[quo/context-tag
|
||||
{:blur? blur?
|
||||
:size 24
|
||||
:profile-picture (resources/get-mock-image :user-picture-male5)
|
||||
:full-name "alisher.eth"}]
|
||||
[quo/context-tag
|
||||
{:blur? blur?
|
||||
:size 24
|
||||
:profile-picture (resources/get-mock-image :user-picture-male4)
|
||||
:full-name "Pedro"}]
|
||||
[quo/context-tag
|
||||
{:blur? blur?
|
||||
:size 24
|
||||
:profile-picture (resources/get-mock-image :user-picture-female2)
|
||||
:full-name "Freya Odinson"}]])
|
||||
|
||||
(defn view
|
||||
[]
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
(ns status-im2.contexts.quo-preview.notifications.activity-logs
|
||||
(:require [quo2.core :as quo2]
|
||||
(:require [quo2.core :as quo]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.theme :as quo.theme]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[status-im2.contexts.quo-preview.preview :as preview]
|
||||
|
|
@ -67,27 +68,20 @@
|
|||
status-tags/status-tags-options])
|
||||
|
||||
(def basic-user-action
|
||||
[[quo2/user-avatar-tag
|
||||
{:color :purple
|
||||
:override-theme :dark
|
||||
:size :small
|
||||
:style {:background-color colors/white-opa-10}
|
||||
:text-style {:color colors/white}}
|
||||
"Name"]
|
||||
[[quo/context-tag
|
||||
{:size 24
|
||||
:full-name "Name"
|
||||
:blur? true}]
|
||||
"did something here."])
|
||||
|
||||
(def complex-user-action
|
||||
(let [tag-props {:color :purple
|
||||
:size :small
|
||||
:style {:background-color colors/white-opa-10}
|
||||
:text-style {:color colors/white}}]
|
||||
[[quo2/user-avatar-tag tag-props "Alice"]
|
||||
[[quo/context-tag {:size 24 :full-name "Alice" :blur? true}]
|
||||
"from"
|
||||
[quo2/user-avatar-tag tag-props "Mainnet"]
|
||||
[quo/context-tag {:size 24 :full-name "Mainnet" :blur? true}]
|
||||
"to"
|
||||
[quo2/user-avatar-tag tag-props "Optimism"]
|
||||
[quo/context-tag {:size 24 :full-name "Optimism" :blur? true}]
|
||||
"on"
|
||||
[quo2/user-avatar-tag tag-props "My savings"]]))
|
||||
[quo/context-tag {:size 24 :full-name "My savings" :blur? true}]])
|
||||
|
||||
(def message-with-mention
|
||||
(let [common-text-style {:style {:color colors/white}
|
||||
|
|
@ -95,8 +89,8 @@
|
|||
{:body [rn/view
|
||||
{:flex 1
|
||||
:flex-direction :row}
|
||||
[quo2/text common-text-style "Hello"]
|
||||
[quo2/text
|
||||
[quo/text common-text-style "Hello"]
|
||||
[quo/text
|
||||
{:style {:background-color colors/primary-50-opa-10
|
||||
:border-radius 6
|
||||
:color colors/primary-50
|
||||
|
|
@ -104,7 +98,7 @@
|
|||
:padding-horizontal 3
|
||||
:size :paragraph-1}}
|
||||
"@name"]
|
||||
[quo2/text common-text-style "! How are you feeling?"]]}))
|
||||
[quo/text common-text-style "! How are you feeling?"]]}))
|
||||
|
||||
(def message-with-title
|
||||
{:body "Your favorite color is Turquoise."
|
||||
|
|
@ -176,12 +170,13 @@
|
|||
{:flex 1
|
||||
:padding 16}
|
||||
[preview/customizer state descriptor]]
|
||||
[quo.theme/provider {:theme :dark}
|
||||
[rn/view
|
||||
{:background-color colors/neutral-90
|
||||
:flex-direction :row
|
||||
:justify-content :center
|
||||
:padding-vertical 60}
|
||||
[quo2/activity-log props]]]))))
|
||||
[quo/activity-log props]]]]))))
|
||||
|
||||
(defn preview-activity-logs
|
||||
[]
|
||||
|
|
|
|||
|
|
@ -1,173 +1,240 @@
|
|||
(ns status-im2.contexts.quo-preview.tags.context-tags
|
||||
(:require [quo2.components.tags.context-tag.view :as quo2]
|
||||
(:require [quo2.core :as quo]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.multiaccounts.core :as multiaccounts]
|
||||
[status-im2.common.resources :as resources]
|
||||
[status-im2.contexts.quo-preview.preview :as preview]))
|
||||
|
||||
(def group-avatar-default-params
|
||||
{:size :small
|
||||
:color :purple})
|
||||
|
||||
(def example-pk
|
||||
"0x04fcf40c526b09ff9fb22f4a5dbd08490ef9b64af700870f8a0ba2133f4251d5607ed83cd9047b8c2796576bc83fa0de23a13a4dced07654b8ff137fe744047917")
|
||||
(def example-pk2
|
||||
"0x04c178513eb741e8c4e50326b22baefa7d60a2f4eb81e328c4bbe0b441f87b2a014a5907a419f5897fc3c0493a0ff9db689a1999d6ca7fdc63119dd1981d0c7ccf")
|
||||
(def example-photo
|
||||
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII")
|
||||
(def example-photo2
|
||||
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII=")
|
||||
|
||||
(def coinbase-community-image (resources/get-mock-image :coinbase))
|
||||
(def avatar-options
|
||||
[{:key nil
|
||||
:value "Default avatar"}
|
||||
{:key (resources/mock-images :user-picture-male5)
|
||||
:value "User pic male 5"}
|
||||
{:key (resources/mock-images :user-picture-male4)
|
||||
:value "User pic male 4"}
|
||||
{:key (resources/mock-images :user-picture-female2)
|
||||
:value "User pic female 2"}])
|
||||
|
||||
(def size-descriptor
|
||||
{:label "Size"
|
||||
:key :size
|
||||
:type :select
|
||||
:options [{:key 24}
|
||||
{:key 32}]})
|
||||
|
||||
(def main-descriptor
|
||||
[{:label "Type"
|
||||
:key :type
|
||||
:type :select
|
||||
:options [{:key :public-key
|
||||
:value "Public key"}
|
||||
{:key :avatar
|
||||
:value "Avatar"}
|
||||
{:key :group-avatar
|
||||
:value "Group avatar"}
|
||||
{:key :context-tag
|
||||
:value "Context tag"}
|
||||
{:key :audio
|
||||
:value "Audio"}
|
||||
{:key :community
|
||||
:value "Community"}]}
|
||||
{:label "Blur"
|
||||
:key :blur?
|
||||
:type :boolean}])
|
||||
|
||||
(def context-tag-descriptor
|
||||
[{:label "Show avatar"
|
||||
:key :show-avatar?
|
||||
:options [{:key :default}
|
||||
{:key :multiuser}
|
||||
{:key :group}
|
||||
{:key :channel}
|
||||
{:key :community}
|
||||
{:key :token}
|
||||
{:key :network}
|
||||
{:key :multinetwork}
|
||||
{:key :account}
|
||||
{:key :collectible}
|
||||
{:key :address}
|
||||
{:key :icon}
|
||||
{:key :audio}]}
|
||||
{:key :blur?
|
||||
:type :boolean}
|
||||
{:label "Label"
|
||||
:key :label
|
||||
{:key :state
|
||||
:type :select
|
||||
:options [{:key :default}
|
||||
{:key :selected}]}
|
||||
(preview/customization-color-option)])
|
||||
|
||||
(def default-descriptor
|
||||
[size-descriptor
|
||||
{:key :profile-picture
|
||||
:type :select
|
||||
:options avatar-options}
|
||||
{:key :full-name
|
||||
:type :text}])
|
||||
|
||||
(def multiuser-descriptor
|
||||
(let [users [(resources/mock-images :user-picture-male5)
|
||||
(resources/mock-images :user-picture-male4)
|
||||
nil
|
||||
(resources/mock-images :user-picture-female2)
|
||||
nil]]
|
||||
[{:label "users"
|
||||
:key :users
|
||||
:type :select
|
||||
:options (map (fn [idx]
|
||||
{:key (mapv (fn [picture idx-name]
|
||||
{:profile-picture picture
|
||||
:full-name (str (inc idx-name))})
|
||||
(take idx (cycle users))
|
||||
(range))
|
||||
:value (str idx)})
|
||||
(range 1 10))}]))
|
||||
|
||||
(def group-descriptor
|
||||
[size-descriptor
|
||||
{:label "Group"
|
||||
:key :group-name
|
||||
:type :text}])
|
||||
|
||||
(def channel-descriptor
|
||||
[size-descriptor
|
||||
{:label "Community name"
|
||||
:key :community-name
|
||||
:type :text}
|
||||
{:label "Channel name"
|
||||
:key :channel-name
|
||||
:type :text}])
|
||||
|
||||
(def community-descriptor
|
||||
[size-descriptor
|
||||
{:label "Community name"
|
||||
:key :community-name
|
||||
:type :text}])
|
||||
|
||||
(def token-descriptor
|
||||
[size-descriptor
|
||||
{:label "Amount"
|
||||
:key :amount
|
||||
:type :text}
|
||||
{:label "Avatar placeholder"
|
||||
:key :no-avatar-placeholder?
|
||||
:type :boolean}])
|
||||
{:label "Token name"
|
||||
:key :token-name
|
||||
:type :text}])
|
||||
|
||||
(def network-descriptor
|
||||
[size-descriptor
|
||||
{:label "Network name"
|
||||
:key :network-name
|
||||
:type :text}])
|
||||
|
||||
(def multinetwork-descriptor
|
||||
(let [networks (cycle [(resources/mock-images :monkey) (resources/mock-images :diamond)])]
|
||||
[{:label "Networks"
|
||||
:key :networks
|
||||
:type :select
|
||||
:options (map (fn [size]
|
||||
{:key (take size networks)
|
||||
:value (str size)})
|
||||
(range 1 10))}]))
|
||||
|
||||
(def account-descriptor
|
||||
[size-descriptor
|
||||
{:label "Account name"
|
||||
:key :account-name
|
||||
:type :text}
|
||||
{:label "Emoji"
|
||||
:key :emoji
|
||||
:type :select
|
||||
:options [{:key "🐷" :value "🐷"}
|
||||
{:key "🍇" :value "🍇"}
|
||||
{:key "🐱" :value "🐱"}]}])
|
||||
|
||||
(def collectible-descriptor
|
||||
[size-descriptor
|
||||
{:label "Collectible name"
|
||||
:key :collectible-name
|
||||
:type :text}
|
||||
{:label "Collectible number"
|
||||
:key :collectible-number
|
||||
:type :text}])
|
||||
|
||||
(def address-descriptor
|
||||
[size-descriptor])
|
||||
|
||||
(def icon-descriptor
|
||||
[size-descriptor
|
||||
{:label "Context"
|
||||
:key :context
|
||||
:type :text}
|
||||
{:label "Icon"
|
||||
:key :icon
|
||||
:type :select
|
||||
:options [{:key :i/placeholder :value "Placeholder"}
|
||||
{:key :i/add :value "Add"}
|
||||
{:key :i/alert :value "Alert"}]}])
|
||||
|
||||
(def audio-descriptor
|
||||
[{:label "Duration"
|
||||
:key :duration
|
||||
:type :text}])
|
||||
|
||||
(defn cool-preview
|
||||
[]
|
||||
(let [state (reagent/atom {:label "Name"
|
||||
:channel-name "Channel"
|
||||
:type :group-avatar
|
||||
:duration "00:32"
|
||||
:show-avatar? true
|
||||
:no-avatar-placeholder? false})]
|
||||
(let [state
|
||||
(reagent/atom
|
||||
{:label "Name"
|
||||
:size 32
|
||||
:type :group
|
||||
:blur? false
|
||||
:state :selected
|
||||
:customization-color :army
|
||||
:profile-picture nil
|
||||
:full-name "Full Name"
|
||||
:users [{:profile-picture (resources/mock-images :user-picture-male5)
|
||||
:full-name "1"}
|
||||
{:profile-picture nil
|
||||
:full-name "3"}
|
||||
{:profile-picture (resources/mock-images :user-picture-male5)
|
||||
:full-name "2"}]
|
||||
:group-name "Group"
|
||||
:community-logo (resources/mock-images :coinbase)
|
||||
:community-name "Community"
|
||||
:channel-name "my channel"
|
||||
:token-logo (resources/mock-images :diamond)
|
||||
:token-name "ETH"
|
||||
:amount "10"
|
||||
:network-logo (resources/mock-images :monkey)
|
||||
:network-name "Network"
|
||||
:networks [(resources/mock-images :monkey)
|
||||
(resources/mock-images :diamond)]
|
||||
:account-name "Account name"
|
||||
:emoji "😝"
|
||||
:collectible (resources/mock-images :collectible)
|
||||
:collectible-name "Collectible"
|
||||
:collectible-number "123"
|
||||
:address example-pk
|
||||
:icon :i/placeholder
|
||||
:context "Context"
|
||||
:duration "00:32"})]
|
||||
(fn []
|
||||
(let [contacts {example-pk {:public-key example-pk
|
||||
:primary-name "Automatic incompatible Coati"
|
||||
:photo example-photo}
|
||||
example-pk2 {:public-key example-pk2
|
||||
:primary-name "Clearcut Flickering Rattlesnake"
|
||||
:photo example-photo2}}
|
||||
contacts-public-keys (map (fn [{:keys [public-key]}]
|
||||
{:key public-key
|
||||
:value (get-in contacts [public-key :primary-name])})
|
||||
(vals contacts))
|
||||
current-username (if (seq (:contact @state))
|
||||
(->> @state
|
||||
:contact
|
||||
contacts
|
||||
multiaccounts/displayed-name)
|
||||
"Please select a user")
|
||||
descriptor (cond
|
||||
(= (:type @state) :context-tag)
|
||||
(into main-descriptor context-tag-descriptor)
|
||||
|
||||
(= (:type @state) :group-avatar)
|
||||
(conj main-descriptor
|
||||
{:label "Label"
|
||||
:key :label
|
||||
:type :text})
|
||||
|
||||
(= (:type @state) :avatar)
|
||||
(let [photo (-> @state :contact contacts :photo)]
|
||||
(when-not (contains? @state :contacts)
|
||||
(swap! state assoc :contacts contacts-public-keys))
|
||||
(when-not (= (:photo @state)
|
||||
photo)
|
||||
(swap! state assoc :photo photo))
|
||||
(conj main-descriptor
|
||||
{:label "Contacts"
|
||||
:key :contact
|
||||
:type :select
|
||||
:options contacts-public-keys}))
|
||||
|
||||
(= (:type @state) :community)
|
||||
(conj main-descriptor
|
||||
{:label "Community name"
|
||||
:key :label
|
||||
:type :text})
|
||||
|
||||
(= (:type @state) :audio)
|
||||
(conj main-descriptor
|
||||
{:label "Duration"
|
||||
:key :duration
|
||||
:type :text})
|
||||
|
||||
:else
|
||||
main-descriptor)]
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:style {:padding-bottom 150}}
|
||||
[rn/view {:style {:flex 1}}
|
||||
[preview/customizer state descriptor]]
|
||||
[preview/customizer state
|
||||
(concat main-descriptor
|
||||
(case (:type @state)
|
||||
:default default-descriptor
|
||||
:multiuser multiuser-descriptor
|
||||
:group group-descriptor
|
||||
:channel channel-descriptor
|
||||
:community community-descriptor
|
||||
:token token-descriptor
|
||||
:network network-descriptor
|
||||
:multinetwork multinetwork-descriptor
|
||||
:account account-descriptor
|
||||
:collectible collectible-descriptor
|
||||
:address address-descriptor
|
||||
:icon icon-descriptor
|
||||
:audio audio-descriptor
|
||||
default-descriptor))]]
|
||||
[rn/view {:style {:padding-vertical 60}}
|
||||
[preview/blur-view
|
||||
{:style {:flex 1
|
||||
:margin-vertical 20
|
||||
:margin-horizontal 40}
|
||||
:show-blur-background? (:blur? @state)}
|
||||
(case (:type @state)
|
||||
:context-tag [quo2/context-tag
|
||||
{:blur? (:blur? @state)
|
||||
:size :small
|
||||
:color :purple
|
||||
:no-avatar-placeholder? (:no-avatar-placeholder? @state)}
|
||||
(when (:show-avatar? @state)
|
||||
example-photo2)
|
||||
(:label @state)
|
||||
(:channel-name @state)]
|
||||
|
||||
:group-avatar [quo2/group-avatar-tag (:label @state)
|
||||
{:blur? (:blur? @state)
|
||||
:size :size/s-20
|
||||
:customization-color :purple}]
|
||||
|
||||
:public-key [quo2/public-key-tag
|
||||
{:blur? (:blur? @state)
|
||||
:size :small
|
||||
:color :purple}
|
||||
example-pk]
|
||||
|
||||
:avatar [quo2/user-avatar-tag
|
||||
{:blur? (:blur? @state)
|
||||
:size :small
|
||||
:color :purple}
|
||||
current-username (:photo @state)]
|
||||
|
||||
:audio [quo2/audio-tag (:duration @state) {:blur? (:blur? @state)}]
|
||||
|
||||
:community [quo2/community-tag
|
||||
coinbase-community-image
|
||||
(:label @state)
|
||||
{:blur? (:blur? @state)}])]]]]))))
|
||||
[quo/context-tag @state]]]]])))
|
||||
|
||||
(defn preview-context-tags
|
||||
[]
|
||||
[rn/view
|
||||
{:style {:background-color (colors/theme-colors colors/white
|
||||
colors/neutral-95)
|
||||
{:style {:background-color (colors/theme-colors colors/white colors/neutral-95)
|
||||
:flex 1}}
|
||||
[rn/flat-list
|
||||
{:style {:flex 1}
|
||||
|
|
|
|||
|
|
@ -69,8 +69,11 @@
|
|||
:context [[common/user-avatar-tag author]
|
||||
(i18n/label :t/wants-to-join)
|
||||
[quo/context-tag
|
||||
common/tag-params
|
||||
community-image community-name]]
|
||||
{:type :community
|
||||
:size 24
|
||||
:blur? true
|
||||
:community-logo community-image
|
||||
:community-name community-name}]]
|
||||
:items (case membership-status
|
||||
constants/activity-center-membership-status-accepted
|
||||
[{:type :status
|
||||
|
|
|
|||
|
|
@ -8,24 +8,14 @@
|
|||
[utils.i18n :as i18n]
|
||||
[utils.re-frame :as rf]))
|
||||
|
||||
(def tag-params
|
||||
{:size :size/s-20
|
||||
:customization-color :blue
|
||||
:style style/user-avatar-tag
|
||||
:text-style style/user-avatar-tag-text
|
||||
:no-avatar-placeholder? true})
|
||||
|
||||
(defn user-avatar-tag
|
||||
[user-id]
|
||||
(let [{:keys [primary-name] :as contact} (rf/sub [:contacts/contact-by-identity user-id])]
|
||||
[quo/user-avatar-tag
|
||||
{:color :purple
|
||||
:size :small
|
||||
:style style/user-avatar-tag
|
||||
:text-style style/user-avatar-tag-text
|
||||
:ring? false}
|
||||
primary-name
|
||||
(multiaccounts/displayed-photo contact)]))
|
||||
[quo/context-tag
|
||||
{:blur? true
|
||||
:size 24
|
||||
:full-name primary-name
|
||||
:profile-picture (multiaccounts/displayed-photo contact)}]))
|
||||
|
||||
(defn- render-swipe-action
|
||||
[{:keys [active-swipeable
|
||||
|
|
|
|||
|
|
@ -34,5 +34,9 @@
|
|||
:unread? (not read)
|
||||
:context [[quo/text {:style common-style/user-avatar-tag-text}
|
||||
(i18n/label :t/community-kicked-body)]
|
||||
[quo/context-tag common/tag-params community-image
|
||||
community-name]]}]]))
|
||||
[quo/context-tag
|
||||
{:type :community
|
||||
:size 24
|
||||
:blur? true
|
||||
:community-logo community-image
|
||||
:community-name community-name}]]}]]))
|
||||
|
|
|
|||
|
|
@ -22,10 +22,14 @@
|
|||
[community membership-status]
|
||||
(let [community-name (:name community)
|
||||
permissions (:permissions community)
|
||||
open? (not= 3 (:access permissions))
|
||||
community-image (get-in community [:images :thumbnail :uri])
|
||||
community-context-tag [quo/context-tag common/tag-params community-image
|
||||
community-name]
|
||||
open? (not= 3 (:access permissions))]
|
||||
community-context-tag [quo/context-tag
|
||||
{:type :community
|
||||
:size 24
|
||||
:blur? true
|
||||
:community-logo community-image
|
||||
:community-name community-name}]]
|
||||
(cond
|
||||
(= membership-status constants/activity-center-membership-status-idle)
|
||||
{:header-text (i18n/label :t/community-request-not-accepted)
|
||||
|
|
|
|||
|
|
@ -66,9 +66,11 @@
|
|||
:unread? (not read)
|
||||
:context [[common/user-avatar-tag author]
|
||||
(i18n/label :t/added-you-to)
|
||||
[quo/group-avatar-tag chat-name
|
||||
{:size :size/s-20
|
||||
:customization-color :purple}]]
|
||||
[quo/context-tag
|
||||
{:type :group
|
||||
:blur? true
|
||||
:size 24
|
||||
:group-name chat-name}]]
|
||||
:items (when-not (or accepted dismissed)
|
||||
[{:type :button
|
||||
:subtype :positive
|
||||
|
|
|
|||
|
|
@ -59,9 +59,19 @@
|
|||
:timestamp (datetime/timestamp->relative timestamp)
|
||||
:unread? (not read)
|
||||
:context [[common/user-avatar-tag author]
|
||||
[quo/text {:style style/tag-text} (string/lower-case (i18n/label :t/on))]
|
||||
[quo/text {:style style/tag-text}
|
||||
(string/lower-case (i18n/label :t/on))]
|
||||
(if community-chat?
|
||||
[quo/context-tag common/tag-params community-image community-name
|
||||
chat-name]
|
||||
[quo/group-avatar-tag chat-name common/tag-params])]
|
||||
[quo/context-tag
|
||||
{:type :channel
|
||||
:blur? true
|
||||
:size 24
|
||||
:community-logo community-image
|
||||
:community-name community-name
|
||||
:channel-name chat-name}]
|
||||
[quo/context-tag
|
||||
{:type :group
|
||||
:group-name chat-name
|
||||
:blur? true
|
||||
:size 24}])]
|
||||
:message {:body (message-body message)}}]]]))
|
||||
|
|
|
|||
|
|
@ -74,9 +74,18 @@
|
|||
:context [[common/user-avatar-tag author]
|
||||
[quo/text {:style style/lowercase-text} (i18n/label :t/on)]
|
||||
(if community-chat?
|
||||
[quo/context-tag common/tag-params community-image community-name
|
||||
chat-name]
|
||||
[quo/group-avatar-tag chat-name common/tag-params])]
|
||||
[quo/context-tag
|
||||
{:type :channel
|
||||
:blur? true
|
||||
:size 24
|
||||
:community-logo community-image
|
||||
:community-name community-name
|
||||
:channel-name chat-name}]
|
||||
[quo/context-tag
|
||||
{:type :group
|
||||
:group-name chat-name
|
||||
:blur? true
|
||||
:size 24}])]
|
||||
:message {:body-number-of-lines 1
|
||||
:attachment (cond
|
||||
(= (:content-type message)
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
(ns status-im2.contexts.shell.jump-to.components.switcher-cards.view
|
||||
(:require [clojure.string :as string]
|
||||
[utils.i18n :as i18n]
|
||||
[quo2.core :as quo]
|
||||
[utils.re-frame :as rf]
|
||||
[status-im2.config :as config]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[react-native.fast-image :as fast-image]
|
||||
[status-im2.config :as config]
|
||||
[status-im2.constants :as constants]
|
||||
[status-im2.contexts.chat.messages.resolver.message-resolver :as resolver]
|
||||
[status-im2.contexts.shell.jump-to.animation :as animation]
|
||||
[status-im2.contexts.shell.jump-to.constants :as shell.constants]
|
||||
[status-im2.contexts.shell.jump-to.components.switcher-cards.style :as style]
|
||||
[status-im2.contexts.chat.messages.resolver.message-resolver :as resolver]))
|
||||
[status-im2.contexts.shell.jump-to.constants :as shell.constants]
|
||||
[utils.i18n :as i18n]
|
||||
[utils.re-frame :as rf]))
|
||||
|
||||
(defn- channel-card
|
||||
[{:keys [emoji channel-name customization-color]}]
|
||||
|
|
@ -82,13 +82,14 @@
|
|||
:style style/gif}]
|
||||
|
||||
constants/content-type-audio
|
||||
[quo/audio-tag data {:override-theme :dark}]
|
||||
[quo/context-tag {:type :audio :duration data}]
|
||||
|
||||
constants/content-type-community
|
||||
[quo/community-tag
|
||||
(:avatar data)
|
||||
(:community-name data)
|
||||
{:override-theme :dark}]
|
||||
[quo/context-tag
|
||||
{:type :community
|
||||
:size 24
|
||||
:community-logo (:avatar data)
|
||||
:community-name (:community-name data)}]
|
||||
|
||||
(constants/content-type-link) ;; Components not available
|
||||
;; Code snippet content type is not supported yet
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
(ns status-im2.contexts.syncing.syncing-instructions.view
|
||||
(:require [quo2.core :as quo]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[react-native.gesture :as gesture]
|
||||
[reagent.core :as reagent]
|
||||
|
|
@ -15,7 +14,8 @@
|
|||
[quo/text
|
||||
{:size :paragraph-2
|
||||
:weight :regular
|
||||
:container-style style/list-text} (i18n/label value)]
|
||||
:container-style style/list-text}
|
||||
(i18n/label value)]
|
||||
|
||||
:button-primary
|
||||
[quo/button
|
||||
|
|
@ -42,10 +42,10 @@
|
|||
|
||||
:context-tag
|
||||
[quo/context-tag
|
||||
{:override-theme :dark
|
||||
:text-style {:color colors/white}}
|
||||
(resources/get-mock-image (:source value))
|
||||
(i18n/label (:label value))]))
|
||||
{:blur? true
|
||||
:size 24
|
||||
:profile-picture (resources/get-mock-image (:source value))
|
||||
:full-name (i18n/label (:label value))}]))
|
||||
|
||||
(defn- render-item
|
||||
[i list-item]
|
||||
|
|
|
|||
Loading…
Reference in New Issue