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

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 2023-08-28 05:37:43 -06:00 committed by GitHub
parent 6156bfc472
commit 255a3b9172
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 646 additions and 385 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
src/quo2/components/avatars/group_avatar.cljs Normal file
View File

12
src/quo2/components/avatars/group_avatar/view.cljs
View File

@ -1,6 +1,6 @@
(ns quo2.components.avatars.group-avatar.view (ns quo2.components.avatars.group-avatar.view
(:require [quo2.components.icon :as icon] (:require [quo2.components.icon :as icon]
[quo2.theme :as theme] [quo2.theme :as quo.theme]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.fast-image :as fast-image] [react-native.fast-image :as fast-image]
@ -20,9 +20,11 @@
(defn- view-internal (defn- view-internal
[_] [_]
(fn [{:keys [size theme customization-color picture] (fn [{:keys [size theme customization-color picture icon-name]
:or {size :size/s-20 :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]) (let [container-size (get-in sizes [size :container])
icon-size (get-in sizes [size :icon])] icon-size (get-in sizes [size :icon])]
[rn/view [rn/view
@ -34,8 +36,8 @@
{:source picture {:source picture
:style {:width container-size :style {:width container-size
:height container-size}}] :height container-size}}]
[icon/icon :i/members [icon/icon icon-name
{:size icon-size {:size icon-size
:color colors/white-opa-70}])]))) :color colors/white-opa-70}])])))
(def view (theme/with-theme view-internal)) (def view (quo.theme/with-theme view-internal))

4
src/quo2/components/avatars/user_avatar/style.cljs
View File

@ -14,6 +14,10 @@
:status-indicator 12 :status-indicator 12
:status-indicator-border 2 :status-indicator-border 2
:font-size :paragraph-2} :font-size :paragraph-2}
28 {:dimensions 28
:status-indicator 0
:status-indicator-border 0
:font-size :paragraph-2}
:xs {:dimensions 24 :xs {:dimensions 24
:status-indicator 0 :status-indicator 0
:status-indicator-border 0 :status-indicator-border 0

16
src/quo2/components/markdown/list/view.cljs
View File

@ -1,12 +1,12 @@
(ns quo2.components.markdown.list.view (ns quo2.components.markdown.list.view
(:require [react-native.core :as rn] (:require [quo2.components.counter.step.view :as step]
[quo2.components.markdown.text :as text]
[quo2.components.counter.step.view :as step]
[quo2.components.markdown.list.style :as style]
[quo2.components.icon :as icon] [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.foundations.colors :as colors]
[quo2.theme :as theme] [quo2.theme :as theme]
[quo2.components.tags.context-tag.view :as context-tag])) [react-native.core :as rn]))
(defn get-colors (defn get-colors
[theme blur?] [theme blur?]
@ -27,7 +27,11 @@
:size :paragraph-2} :size :paragraph-2}
description] description]
[rn/view {:style {:margin-left 4}} [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 [text/text
{:style {:margin-left 4} {:style {:margin-left 4}
:accessibility-label :list-item-description-after-tag :accessibility-label :list-item-description-after-tag

124
src/quo2/components/tags/context_tag/style.cljs
View File

@ -1,31 +1,11 @@
(ns quo2.components.tags.context-tag.style (ns quo2.components.tags.context-tag.style
(:require [quo2.foundations.colors :as colors])) (: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 (defn context-tag-icon-color
[blur?] [theme blur?]
(if blur? (if blur?
(colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40) (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
(colors/theme-colors colors/neutral-50 colors/neutral-40))) (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))
(def context-tag-text-container
{:align-items :center
:margin-left 4
:flex-direction :row})
(def audio-tag-container
{:padding-left 2
:padding-vertical 2})
(def audio-tag-icon-container (def audio-tag-icon-container
{:width 20 {:width 20
@ -37,21 +17,91 @@
(def audio-tag-icon-color colors/white) (def audio-tag-icon-color colors/white)
(defn audio-tag-text-color (defn container
[override-theme] [{:keys [theme type size state blur? customization-color]}]
(colors/theme-colors colors/neutral-100 colors/white override-theme)) (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 (defn tag-container
{:padding-vertical 2 [size]
:padding-left 2}) {:margin-right (if (= size 24) 6 10)
(def community-tag-text-container
{:margin-left 4
:flex 1
:flex-direction :row :flex-direction :row
:align-items :center}) :align-items :center})
(defn community-tag-text (defn tag-spacing
[override-theme] [size]
{:margin-left 2 {:margin-left (if (= size 24) 4 8)})
:color (colors/theme-colors colors/neutral-100 colors/white override-theme)})
(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})

291
src/quo2/components/tags/context_tag/view.cljs
View File

@ -1,106 +1,215 @@
(ns quo2.components.tags.context-tag.view (ns quo2.components.tags.context-tag.view
(:require [quo2.components.avatars.group-avatar.view :as group-avatar] (:require [quo2.components.avatars.account-avatar.view :as account-avatar]
[quo2.components.avatars.user-avatar.style :as user-avatar.style] [quo2.components.avatars.group-avatar.view :as group-avatar]
[quo2.components.avatars.user-avatar.view :as user-avatar] [quo2.components.avatars.user-avatar.view :as user-avatar]
[quo2.components.icon :as icons] [quo2.components.icon :as icons]
[quo2.components.list-items.preview-list.view :as preview-list]
[quo2.components.markdown.text :as text] [quo2.components.markdown.text :as text]
[quo2.components.tags.context-tag.style :as style] [quo2.components.tags.context-tag.style :as style]
[quo2.foundations.colors :as colors]
[quo2.theme :as quo.theme]
[react-native.core :as rn])) [react-native.core :as rn]))
(defn trim-public-key (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
{:style (style/text theme)
:weight :medium
:size (if (= size 24) :paragraph-2 :paragraph-1)}
text]]])
(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
{:style (style/text theme)
:weight :medium
:size text-size}
community-name]]
(when channel?
[:<>
[icons/icon :i/chevron-right
{:color (style/context-tag-icon-color theme blur?)
:size icon-size}]
[text/text
{:style (style/text theme)
:weight :medium
:size text-size}
(str "# " channel-name)]])]))
(defn- trim-public-key
[pk] [pk]
(str (subs pk 0 6) "..." (subs pk (- (count pk) 3)))) (str (subs pk 0 5) "..." (subs pk (- (count pk) 3))))
(defn base-tag (defn- address-tag
[{:keys [override-theme style blur?]} & children] [{:keys [theme size address]}]
(into [rn/view {:style (style/address size)}
[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]
[text/text [text/text
{:weight :medium {:style (style/text theme)
:size :paragraph-2 :weight :monospace ;; TODO: fix this style (issue #17009)
:style (:text-style opts)} :size (if (= size 24) :paragraph-2 :paragraph-1)}
(str " " label)]]) (trim-public-key address)]])
(defn public-key-tag (defn- icon-tag
[params public-key] [{:keys [theme size icon blur? context]}]
[base-tag params [rn/view {:style (style/icon size)}
[text/text [icons/icon icon
{:weight :monospace {:color (style/context-tag-icon-color theme blur?)
:size :paragraph-2} :size (if (= size 24) 12 20)}]
(trim-public-key public-key)]]) [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 context-tag (defn- view-internal
[{:keys [text-style blur? no-avatar-placeholder? text-container-style ellipsize-text? ring?] [{:keys [theme type size state blur? customization-color profile-picture full-name users
:as props} group-name token-logo amount token-name network-logo network-name networks
photo account-name emoji collectible collectible-name collectible-number duration]
name :or {customization-color :blue
channel-name] type :default
(let [text-props {:weight :medium state :default}
:size :paragraph-2 :as props}]
:style (assoc text-style :justify-content :center) [rn/view
:number-of-lines 1 {:style (style/container {:theme theme
:ellipsize-mode :tail} :type type
empty-photo? (nil? photo) :size size
avatar-size :xxs :state state
avatar-outer-size (get-in user-avatar.style/sizes [avatar-size :outer])] :blur? blur?
[base-tag (update-in props [:style :padding-left] #(or % 3)) :customization-color customization-color})}
(if (and empty-photo? no-avatar-placeholder?) (case type
[rn/view {:style {:width avatar-outer-size}}] :default
[user-avatar/user-avatar [tag-skeleton {:theme theme :size size :text full-name}
{:full-name name [user-avatar/user-avatar
:profile-picture photo {:full-name full-name
:size avatar-size :profile-picture profile-picture
:ring? ring? :size (if (= size 24) :xxs 28)
:status-indicator? false}]) :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
[:<>
[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 :multiuser
[params username photo] [preview-list/view {:type :user :size 20}
[context-tag params photo username]) users]
(defn audio-tag :multinetwork
[duration params] [preview-list/view {:type :network :size 20}
[base-tag (merge {:style style/audio-tag-container} params) (map #(hash-map :profile-picture %) networks)]
[rn/view {:style style/audio-tag-icon-container}
[icons/icon
:i/play
{:color style/audio-tag-icon-color
:size 12}]]
[text/text
{:weight :medium
:size :paragraph-2
:style {:margin-left 4
:color (style/audio-tag-text-color (:override-theme params))}}
duration]])
(defn community-tag :audio
[avatar community-name {:keys [override-theme] :as params}] [tag-skeleton {:theme theme :text (str duration)}
[context-tag [rn/view {:style style/audio-tag-icon-container}
(merge {:style style/community-tag [icons/icon :i/play {:color style/audio-tag-icon-color :size 12}]]]
:text-style (style/community-tag-text override-theme)
:text-container-style style/community-tag-text-container :group
:ellipsize-text? true} [tag-skeleton {:theme theme :size size :text group-name}
params) [group-avatar/view
avatar {:icon-name :i/members
community-name]) :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))

7
src/quo2/core.cljs
View File

@ -315,11 +315,8 @@
(def permission-tag quo2.components.tags.permission-tag/tag) (def permission-tag quo2.components.tags.permission-tag/tag)
(def status-tag quo2.components.tags.status-tags/status-tag) (def status-tag quo2.components.tags.status-tags/status-tag)
(def token-tag quo2.components.tags.token-tag/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 context-tag quo2.components.tags.context-tag.view/view)
(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)
;;;; Title ;;;; Title
(def title quo2.components.text-combinations.title.view/title) (def title quo2.components.text-combinations.title.view/title)

10
src/status_im2/common/password_authentication/view.cljs
View File

@ -16,11 +16,11 @@
[rn/view {:padding-horizontal 20} [rn/view {:padding-horizontal 20}
[quo/text {:size :heading-1 :weight :semi-bold} [quo/text {:size :heading-1 :weight :semi-bold}
(i18n/label :t/enter-password)] (i18n/label :t/enter-password)]
[quo/user-avatar-tag [rn/view {:style {:margin-top 8 :margin-bottom 20}}
{:size :small [quo/context-tag
:style {:margin-top 8 :margin-bottom 20}} {:size 24
(multiaccounts/displayed-name account) :profile-picture (multiaccounts/displayed-photo account)
(multiaccounts/displayed-photo account)] :full-name (multiaccounts/displayed-name account)}]]
[quo/input [quo/input
{:type :password {:type :password
:label (i18n/label :t/profile-password) :label (i18n/label :t/profile-password)

2
src/status_im2/contexts/communities/actions/generic_menu/style.cljs
View File

@ -12,6 +12,6 @@
:align-items :center :align-items :center
:justify-content :space-between}) :justify-content :space-between})
(def context-tag (def community-tag
{:margin-right :auto {:margin-right :auto
:margin-top 8}) :margin-top 8})

9
src/status_im2/contexts/communities/actions/generic_menu/view.cljs
View File

@ -14,7 +14,10 @@
:weight :semi-bold :weight :semi-bold
:size :heading-1} :size :heading-1}
title]] title]]
[quo/context-tag [rn/view {:style style/community-tag}
{:style style/context-tag} [quo/context-tag
(:thumbnail images) name] {:type :community
:size 24
:community-logo (:thumbnail images)
:community-name name}]]
children])) children]))

11
src/status_im2/contexts/communities/actions/request_to_join/view.cljs
View File

@ -37,11 +37,12 @@
:weight :semi-bold :weight :semi-bold
:size :heading-1} :size :heading-1}
(request-to-join-text open?)]] (request-to-join-text open?)]]
[quo/context-tag [rn/view {:style {:margin-right :auto :margin-top 8}}
{:style [quo/context-tag
{:margin-right :auto {:type :community
:margin-top 8}} :size 24
(:thumbnail images) name] :community-logo (:thumbnail images)
:community-name name}]]
[quo/text [quo/text
{:style {:margin-top 24} {:style {:margin-top 24}
:accessibility-label :communities-rules-title :accessibility-label :communities-rules-title

24
src/status_im2/contexts/quo_preview/inputs/search_input.cljs
View File

@ -19,15 +19,21 @@
(defn example-tags (defn example-tags
[blur?] [blur?]
[[quo/context-tag {:blur? [blur?]} [[quo/context-tag
(resources/get-mock-image :user-picture-male5) {:blur? blur?
"alisher.eth"] :size 24
[quo/context-tag {:blur? [blur?]} :profile-picture (resources/get-mock-image :user-picture-male5)
(resources/get-mock-image :user-picture-male4) :full-name "alisher.eth"}]
"Pedro"] [quo/context-tag
[quo/context-tag {:blur? [blur?]} {:blur? blur?
(resources/get-mock-image :user-picture-female2) :size 24
"Freya Odinson"]]) :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 (defn view
[] []

51
src/status_im2/contexts/quo_preview/notifications/activity_logs.cljs
View File

@ -1,6 +1,7 @@
(ns status-im2.contexts.quo-preview.notifications.activity-logs (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.foundations.colors :as colors]
[quo2.theme :as quo.theme]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview] [status-im2.contexts.quo-preview.preview :as preview]
@ -67,27 +68,20 @@
status-tags/status-tags-options]) status-tags/status-tags-options])
(def basic-user-action (def basic-user-action
[[quo2/user-avatar-tag [[quo/context-tag
{:color :purple {:size 24
:override-theme :dark :full-name "Name"
:size :small :blur? true}]
:style {:background-color colors/white-opa-10}
:text-style {:color colors/white}}
"Name"]
"did something here."]) "did something here."])
(def complex-user-action (def complex-user-action
(let [tag-props {:color :purple [[quo/context-tag {:size 24 :full-name "Alice" :blur? true}]
:size :small "from"
:style {:background-color colors/white-opa-10} [quo/context-tag {:size 24 :full-name "Mainnet" :blur? true}]
:text-style {:color colors/white}}] "to"
[[quo2/user-avatar-tag tag-props "Alice"] [quo/context-tag {:size 24 :full-name "Optimism" :blur? true}]
"from" "on"
[quo2/user-avatar-tag tag-props "Mainnet"] [quo/context-tag {:size 24 :full-name "My savings" :blur? true}]])
"to"
[quo2/user-avatar-tag tag-props "Optimism"]
"on"
[quo2/user-avatar-tag tag-props "My savings"]]))
(def message-with-mention (def message-with-mention
(let [common-text-style {:style {:color colors/white} (let [common-text-style {:style {:color colors/white}
@ -95,8 +89,8 @@
{:body [rn/view {:body [rn/view
{:flex 1 {:flex 1
:flex-direction :row} :flex-direction :row}
[quo2/text common-text-style "Hello"] [quo/text common-text-style "Hello"]
[quo2/text [quo/text
{:style {:background-color colors/primary-50-opa-10 {:style {:background-color colors/primary-50-opa-10
:border-radius 6 :border-radius 6
:color colors/primary-50 :color colors/primary-50
@ -104,7 +98,7 @@
:padding-horizontal 3 :padding-horizontal 3
:size :paragraph-1}} :size :paragraph-1}}
"@name"] "@name"]
[quo2/text common-text-style "! How are you feeling?"]]})) [quo/text common-text-style "! How are you feeling?"]]}))
(def message-with-title (def message-with-title
{:body "Your favorite color is Turquoise." {:body "Your favorite color is Turquoise."
@ -176,12 +170,13 @@
{:flex 1 {:flex 1
:padding 16} :padding 16}
[preview/customizer state descriptor]] [preview/customizer state descriptor]]
[rn/view [quo.theme/provider {:theme :dark}
{:background-color colors/neutral-90 [rn/view
:flex-direction :row {:background-color colors/neutral-90
:justify-content :center :flex-direction :row
:padding-vertical 60} :justify-content :center
[quo2/activity-log props]]])))) :padding-vertical 60}
[quo/activity-log props]]]]))))
(defn preview-activity-logs (defn preview-activity-logs
[] []

351
src/status_im2/contexts/quo_preview/tags/context_tags.cljs
View File

@ -1,173 +1,240 @@
(ns status-im2.contexts.quo-preview.tags.context-tags (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] [quo2.foundations.colors :as colors]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im.multiaccounts.core :as multiaccounts]
[status-im2.common.resources :as resources] [status-im2.common.resources :as resources]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
(def group-avatar-default-params
{:size :small
:color :purple})
(def example-pk (def example-pk
"0x04fcf40c526b09ff9fb22f4a5dbd08490ef9b64af700870f8a0ba2133f4251d5607ed83cd9047b8c2796576bc83fa0de23a13a4dced07654b8ff137fe744047917") "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 (def main-descriptor
[{:label "Type" [{:label "Type"
:key :type :key :type
:type :select :type :select
:options [{:key :public-key :options [{:key :default}
:value "Public key"} {:key :multiuser}
{:key :avatar {:key :group}
:value "Avatar"} {:key :channel}
{:key :group-avatar {:key :community}
:value "Group avatar"} {:key :token}
{:key :context-tag {:key :network}
:value "Context tag"} {:key :multinetwork}
{:key :audio {:key :account}
:value "Audio"} {:key :collectible}
{:key :community {:key :address}
:value "Community"}]} {:key :icon}
{:label "Blur" {:key :audio}]}
:key :blur? {:key :blur?
:type :boolean}]) :type :boolean}
{:key :state
:type :select
:options [{:key :default}
{:key :selected}]}
(preview/customization-color-option)])
(def context-tag-descriptor (def default-descriptor
[{:label "Show avatar" [size-descriptor
:key :show-avatar? {:key :profile-picture
:type :boolean} :type :select
{:label "Label" :options avatar-options}
:key :label {: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} :type :text}
{:label "Channel name" {:label "Channel name"
:key :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} :type :text}
{:label "Avatar placeholder" {:label "Token name"
:key :no-avatar-placeholder? :key :token-name
:type :boolean}]) :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 (defn cool-preview
[] []
(let [state (reagent/atom {:label "Name" (let [state
:channel-name "Channel" (reagent/atom
:type :group-avatar {:label "Name"
:duration "00:32" :size 32
:show-avatar? true :type :group
:no-avatar-placeholder? false})] :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 [] (fn []
(let [contacts {example-pk {:public-key example-pk [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
:primary-name "Automatic incompatible Coati" [rn/view {:style {:padding-bottom 150}}
:photo example-photo} [rn/view {:style {:flex 1}}
example-pk2 {:public-key example-pk2 [preview/customizer state
:primary-name "Clearcut Flickering Rattlesnake" (concat main-descriptor
:photo example-photo2}} (case (:type @state)
contacts-public-keys (map (fn [{:keys [public-key]}] :default default-descriptor
{:key public-key :multiuser multiuser-descriptor
:value (get-in contacts [public-key :primary-name])}) :group group-descriptor
(vals contacts)) :channel channel-descriptor
current-username (if (seq (:contact @state)) :community community-descriptor
(->> @state :token token-descriptor
:contact :network network-descriptor
contacts :multinetwork multinetwork-descriptor
multiaccounts/displayed-name) :account account-descriptor
"Please select a user") :collectible collectible-descriptor
descriptor (cond :address address-descriptor
(= (:type @state) :context-tag) :icon icon-descriptor
(into main-descriptor context-tag-descriptor) :audio audio-descriptor
default-descriptor))]]
(= (:type @state) :group-avatar) [rn/view {:style {:padding-vertical 60}}
(conj main-descriptor [preview/blur-view
{:label "Label" {:style {:flex 1
:key :label :margin-vertical 20
:type :text}) :margin-horizontal 40}
:show-blur-background? (:blur? @state)}
(= (:type @state) :avatar) [quo/context-tag @state]]]]])))
(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]]
[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)}])]]]]))))
(defn preview-context-tags (defn preview-context-tags
[] []
[rn/view [rn/view
{:style {:background-color (colors/theme-colors colors/white {:style {:background-color (colors/theme-colors colors/white colors/neutral-95)
colors/neutral-95)
:flex 1}} :flex 1}}
[rn/flat-list [rn/flat-list
{:style {:flex 1} {:style {:flex 1}

7
src/status_im2/contexts/shell/activity_center/notification/admin/view.cljs
View File

@ -69,8 +69,11 @@
:context [[common/user-avatar-tag author] :context [[common/user-avatar-tag author]
(i18n/label :t/wants-to-join) (i18n/label :t/wants-to-join)
[quo/context-tag [quo/context-tag
common/tag-params {:type :community
community-image community-name]] :size 24
:blur? true
:community-logo community-image
:community-name community-name}]]
:items (case membership-status :items (case membership-status
constants/activity-center-membership-status-accepted constants/activity-center-membership-status-accepted
[{:type :status [{:type :status

20
src/status_im2/contexts/shell/activity_center/notification/common/view.cljs
View File

@ -8,24 +8,14 @@
[utils.i18n :as i18n] [utils.i18n :as i18n]
[utils.re-frame :as rf])) [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 (defn user-avatar-tag
[user-id] [user-id]
(let [{:keys [primary-name] :as contact} (rf/sub [:contacts/contact-by-identity user-id])] (let [{:keys [primary-name] :as contact} (rf/sub [:contacts/contact-by-identity user-id])]
[quo/user-avatar-tag [quo/context-tag
{:color :purple {:blur? true
:size :small :size 24
:style style/user-avatar-tag :full-name primary-name
:text-style style/user-avatar-tag-text :profile-picture (multiaccounts/displayed-photo contact)}]))
:ring? false}
primary-name
(multiaccounts/displayed-photo contact)]))
(defn- render-swipe-action (defn- render-swipe-action
[{:keys [active-swipeable [{:keys [active-swipeable

8
src/status_im2/contexts/shell/activity_center/notification/community_kicked/view.cljs
View File

@ -34,5 +34,9 @@
:unread? (not read) :unread? (not read)
:context [[quo/text {:style common-style/user-avatar-tag-text} :context [[quo/text {:style common-style/user-avatar-tag-text}
(i18n/label :t/community-kicked-body)] (i18n/label :t/community-kicked-body)]
[quo/context-tag common/tag-params community-image [quo/context-tag
community-name]]}]])) {:type :community
:size 24
:blur? true
:community-logo community-image
:community-name community-name}]]}]]))

10
src/status_im2/contexts/shell/activity_center/notification/community_request/view.cljs
View File

@ -22,10 +22,14 @@
[community membership-status] [community membership-status]
(let [community-name (:name community) (let [community-name (:name community)
permissions (:permissions community) permissions (:permissions community)
open? (not= 3 (:access permissions))
community-image (get-in community [:images :thumbnail :uri]) community-image (get-in community [:images :thumbnail :uri])
community-context-tag [quo/context-tag common/tag-params community-image community-context-tag [quo/context-tag
community-name] {:type :community
open? (not= 3 (:access permissions))] :size 24
:blur? true
:community-logo community-image
:community-name community-name}]]
(cond (cond
(= membership-status constants/activity-center-membership-status-idle) (= membership-status constants/activity-center-membership-status-idle)
{:header-text (i18n/label :t/community-request-not-accepted) {:header-text (i18n/label :t/community-request-not-accepted)

8
src/status_im2/contexts/shell/activity_center/notification/membership/view.cljs
View File

@ -66,9 +66,11 @@
:unread? (not read) :unread? (not read)
:context [[common/user-avatar-tag author] :context [[common/user-avatar-tag author]
(i18n/label :t/added-you-to) (i18n/label :t/added-you-to)
[quo/group-avatar-tag chat-name [quo/context-tag
{:size :size/s-20 {:type :group
:customization-color :purple}]] :blur? true
:size 24
:group-name chat-name}]]
:items (when-not (or accepted dismissed) :items (when-not (or accepted dismissed)
[{:type :button [{:type :button
:subtype :positive :subtype :positive

18
src/status_im2/contexts/shell/activity_center/notification/mentions/view.cljs
View File

@ -59,9 +59,19 @@
:timestamp (datetime/timestamp->relative timestamp) :timestamp (datetime/timestamp->relative timestamp)
:unread? (not read) :unread? (not read)
:context [[common/user-avatar-tag author] :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? (if community-chat?
[quo/context-tag common/tag-params community-image community-name [quo/context-tag
chat-name] {:type :channel
[quo/group-avatar-tag chat-name common/tag-params])] :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)}}]]])) :message {:body (message-body message)}}]]]))

15
src/status_im2/contexts/shell/activity_center/notification/reply/view.cljs
View File

@ -74,9 +74,18 @@
:context [[common/user-avatar-tag author] :context [[common/user-avatar-tag author]
[quo/text {:style style/lowercase-text} (i18n/label :t/on)] [quo/text {:style style/lowercase-text} (i18n/label :t/on)]
(if community-chat? (if community-chat?
[quo/context-tag common/tag-params community-image community-name [quo/context-tag
chat-name] {:type :channel
[quo/group-avatar-tag chat-name common/tag-params])] :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 :message {:body-number-of-lines 1
:attachment (cond :attachment (cond
(= (:content-type message) (= (:content-type message)

21
src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs
View File

@ -1,17 +1,17 @@
(ns status-im2.contexts.shell.jump-to.components.switcher-cards.view (ns status-im2.contexts.shell.jump-to.components.switcher-cards.view
(:require [clojure.string :as string] (:require [clojure.string :as string]
[utils.i18n :as i18n]
[quo2.core :as quo] [quo2.core :as quo]
[utils.re-frame :as rf]
[status-im2.config :as config]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.fast-image :as fast-image] [react-native.fast-image :as fast-image]
[status-im2.config :as config]
[status-im2.constants :as constants] [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.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.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 (defn- channel-card
[{:keys [emoji channel-name customization-color]}] [{:keys [emoji channel-name customization-color]}]
@ -82,13 +82,14 @@
:style style/gif}] :style style/gif}]
constants/content-type-audio constants/content-type-audio
[quo/audio-tag data {:override-theme :dark}] [quo/context-tag {:type :audio :duration data}]
constants/content-type-community constants/content-type-community
[quo/community-tag [quo/context-tag
(:avatar data) {:type :community
(:community-name data) :size 24
{:override-theme :dark}] :community-logo (:avatar data)
:community-name (:community-name data)}]
(constants/content-type-link) ;; Components not available (constants/content-type-link) ;; Components not available
;; Code snippet content type is not supported yet ;; Code snippet content type is not supported yet

12
src/status_im2/contexts/syncing/syncing_instructions/view.cljs
View File

@ -1,6 +1,5 @@
(ns status-im2.contexts.syncing.syncing-instructions.view (ns status-im2.contexts.syncing.syncing-instructions.view
(:require [quo2.core :as quo] (:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.gesture :as gesture] [react-native.gesture :as gesture]
[reagent.core :as reagent] [reagent.core :as reagent]
@ -15,7 +14,8 @@
[quo/text [quo/text
{:size :paragraph-2 {:size :paragraph-2
:weight :regular :weight :regular
:container-style style/list-text} (i18n/label value)] :container-style style/list-text}
(i18n/label value)]
:button-primary :button-primary
[quo/button [quo/button
@ -42,10 +42,10 @@
:context-tag :context-tag
[quo/context-tag [quo/context-tag
{:override-theme :dark {:blur? true
:text-style {:color colors/white}} :size 24
(resources/get-mock-image (:source value)) :profile-picture (resources/get-mock-image (:source value))
(i18n/label (:label value))])) :full-name (i18n/label (:label value))}]))
(defn- render-item (defn- render-item
[i list-item] [i list-item]