diff --git a/src/quo2/components/avatars/group_avatar.cljs b/src/quo2/components/avatars/group_avatar.cljs new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/quo2/components/avatars/group_avatar/view.cljs b/src/quo2/components/avatars/group_avatar/view.cljs index de4239e6ce..7d7608624e 100644 --- a/src/quo2/components/avatars/group_avatar/view.cljs +++ b/src/quo2/components/avatars/group_avatar/view.cljs @@ -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)) diff --git a/src/quo2/components/avatars/user_avatar/style.cljs b/src/quo2/components/avatars/user_avatar/style.cljs index c4614e203e..940b6d9ceb 100644 --- a/src/quo2/components/avatars/user_avatar/style.cljs +++ b/src/quo2/components/avatars/user_avatar/style.cljs @@ -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 diff --git a/src/quo2/components/markdown/list/view.cljs b/src/quo2/components/markdown/list/view.cljs index b08f5bf558..663d636347 100644 --- a/src/quo2/components/markdown/list/view.cljs +++ b/src/quo2/components/markdown/list/view.cljs @@ -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 diff --git a/src/quo2/components/tags/context_tag/style.cljs b/src/quo2/components/tags/context_tag/style.cljs index 1197cc91fa..ea7801cff5 100644 --- a/src/quo2/components/tags/context_tag/style.cljs +++ b/src/quo2/components/tags/context_tag/style.cljs @@ -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}) diff --git a/src/quo2/components/tags/context_tag/view.cljs b/src/quo2/components/tags/context_tag/view.cljs index 506089865e..4e287b5277 100644 --- a/src/quo2/components/tags/context_tag/view.cljs +++ b/src/quo2/components/tags/context_tag/view.cljs @@ -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 +(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] - (str (subs pk 0 6) "..." (subs pk (- (count pk) 3)))) + (str (subs pk 0 5) "..." (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- address-tag + [{:keys [theme size address]}] + [rn/view {:style (style/address size)} [text/text - {:weight :medium - :size :paragraph-2 - :style (:text-style opts)} - (str " " label)]]) + {: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 public-key-tag - [params public-key] - [base-tag params - [text/text - {:weight :monospace - :size :paragraph-2} - (trim-public-key public-key)]]) +(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 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 - [:<> - [icons/icon - :i/chevron-right - {:color (style/context-tag-icon-color blur?) - :size 16}] - [text/text text-props (str "# " channel-name)]])]])) +(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}]] -(defn user-avatar-tag - [params username photo] - [context-tag params photo username]) + :multiuser + [preview-list/view {:type :user :size 20} + users] -(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}]] - [text/text - {:weight :medium - :size :paragraph-2 - :style {:margin-left 4 - :color (style/audio-tag-text-color (:override-theme params))}} - duration]]) + :multinetwork + [preview-list/view {:type :network :size 20} + (map #(hash-map :profile-picture %) networks)] -(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]) + :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)) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 2964b50813..207edb821e 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -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) diff --git a/src/status_im2/common/password_authentication/view.cljs b/src/status_im2/common/password_authentication/view.cljs index 36735cb992..d46058955e 100644 --- a/src/status_im2/common/password_authentication/view.cljs +++ b/src/status_im2/common/password_authentication/view.cljs @@ -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) diff --git a/src/status_im2/contexts/communities/actions/generic_menu/style.cljs b/src/status_im2/contexts/communities/actions/generic_menu/style.cljs index f64a8cab3f..c9fd575757 100644 --- a/src/status_im2/contexts/communities/actions/generic_menu/style.cljs +++ b/src/status_im2/contexts/communities/actions/generic_menu/style.cljs @@ -12,6 +12,6 @@ :align-items :center :justify-content :space-between}) -(def context-tag +(def community-tag {:margin-right :auto :margin-top 8}) diff --git a/src/status_im2/contexts/communities/actions/generic_menu/view.cljs b/src/status_im2/contexts/communities/actions/generic_menu/view.cljs index 544511f479..717d218f88 100644 --- a/src/status_im2/contexts/communities/actions/generic_menu/view.cljs +++ b/src/status_im2/contexts/communities/actions/generic_menu/view.cljs @@ -14,7 +14,10 @@ :weight :semi-bold :size :heading-1} title]] - [quo/context-tag - {:style style/context-tag} - (:thumbnail images) name] + [rn/view {:style style/community-tag} + [quo/context-tag + {:type :community + :size 24 + :community-logo (:thumbnail images) + :community-name name}]] children])) diff --git a/src/status_im2/contexts/communities/actions/request_to_join/view.cljs b/src/status_im2/contexts/communities/actions/request_to_join/view.cljs index 89ddfef9cc..1974f6d07a 100644 --- a/src/status_im2/contexts/communities/actions/request_to_join/view.cljs +++ b/src/status_im2/contexts/communities/actions/request_to_join/view.cljs @@ -37,11 +37,12 @@ :weight :semi-bold :size :heading-1} (request-to-join-text open?)]] - [quo/context-tag - {:style - {:margin-right :auto - :margin-top 8}} - (:thumbnail images) name] + [rn/view {:style {:margin-right :auto :margin-top 8}} + [quo/context-tag + {:type :community + :size 24 + :community-logo (:thumbnail images) + :community-name name}]] [quo/text {:style {:margin-top 24} :accessibility-label :communities-rules-title diff --git a/src/status_im2/contexts/quo_preview/inputs/search_input.cljs b/src/status_im2/contexts/quo_preview/inputs/search_input.cljs index 35a667c89f..bd6901aeea 100644 --- a/src/status_im2/contexts/quo_preview/inputs/search_input.cljs +++ b/src/status_im2/contexts/quo_preview/inputs/search_input.cljs @@ -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 [] diff --git a/src/status_im2/contexts/quo_preview/notifications/activity_logs.cljs b/src/status_im2/contexts/quo_preview/notifications/activity_logs.cljs index 0adf56500a..39e7f5a047 100644 --- a/src/status_im2/contexts/quo_preview/notifications/activity_logs.cljs +++ b/src/status_im2/contexts/quo_preview/notifications/activity_logs.cljs @@ -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"] - "from" - [quo2/user-avatar-tag tag-props "Mainnet"] - "to" - [quo2/user-avatar-tag tag-props "Optimism"] - "on" - [quo2/user-avatar-tag tag-props "My savings"]])) + [[quo/context-tag {:size 24 :full-name "Alice" :blur? true}] + "from" + [quo/context-tag {:size 24 :full-name "Mainnet" :blur? true}] + "to" + [quo/context-tag {:size 24 :full-name "Optimism" :blur? true}] + "on" + [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]] - [rn/view - {:background-color colors/neutral-90 - :flex-direction :row - :justify-content :center - :padding-vertical 60} - [quo2/activity-log props]]])))) + [quo.theme/provider {:theme :dark} + [rn/view + {:background-color colors/neutral-90 + :flex-direction :row + :justify-content :center + :padding-vertical 60} + [quo/activity-log props]]]])))) (defn preview-activity-logs [] diff --git a/src/status_im2/contexts/quo_preview/tags/context_tags.cljs b/src/status_im2/contexts/quo_preview/tags/context_tags.cljs index 61a55b622f..1308f23bba 100644 --- a/src/status_im2/contexts/quo_preview/tags/context_tags.cljs +++ b/src/status_im2/contexts/quo_preview/tags/context_tags.cljs @@ -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}]) + :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} + {:key :state + :type :select + :options [{:key :default} + {:key :selected}]} + (preview/customization-color-option)]) -(def context-tag-descriptor - [{:label "Show avatar" - :key :show-avatar? - :type :boolean} - {:label "Label" - :key :label +(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]] - [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)}])]]]])))) + [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [rn/view {:style {:padding-bottom 150}} + [rn/view {:style {:flex 1}} + [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)} + [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} diff --git a/src/status_im2/contexts/shell/activity_center/notification/admin/view.cljs b/src/status_im2/contexts/shell/activity_center/notification/admin/view.cljs index 52a781c505..c1582ff832 100644 --- a/src/status_im2/contexts/shell/activity_center/notification/admin/view.cljs +++ b/src/status_im2/contexts/shell/activity_center/notification/admin/view.cljs @@ -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 diff --git a/src/status_im2/contexts/shell/activity_center/notification/common/view.cljs b/src/status_im2/contexts/shell/activity_center/notification/common/view.cljs index 02271b91c0..5a6131ebdb 100644 --- a/src/status_im2/contexts/shell/activity_center/notification/common/view.cljs +++ b/src/status_im2/contexts/shell/activity_center/notification/common/view.cljs @@ -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 diff --git a/src/status_im2/contexts/shell/activity_center/notification/community_kicked/view.cljs b/src/status_im2/contexts/shell/activity_center/notification/community_kicked/view.cljs index 9532ae0abd..d53e5473d0 100644 --- a/src/status_im2/contexts/shell/activity_center/notification/community_kicked/view.cljs +++ b/src/status_im2/contexts/shell/activity_center/notification/community_kicked/view.cljs @@ -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}]]}]])) diff --git a/src/status_im2/contexts/shell/activity_center/notification/community_request/view.cljs b/src/status_im2/contexts/shell/activity_center/notification/community_request/view.cljs index df72d0d3ad..1d8b87a3d3 100644 --- a/src/status_im2/contexts/shell/activity_center/notification/community_request/view.cljs +++ b/src/status_im2/contexts/shell/activity_center/notification/community_request/view.cljs @@ -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) diff --git a/src/status_im2/contexts/shell/activity_center/notification/membership/view.cljs b/src/status_im2/contexts/shell/activity_center/notification/membership/view.cljs index 56f5a7cb53..d9d6b419d6 100644 --- a/src/status_im2/contexts/shell/activity_center/notification/membership/view.cljs +++ b/src/status_im2/contexts/shell/activity_center/notification/membership/view.cljs @@ -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 diff --git a/src/status_im2/contexts/shell/activity_center/notification/mentions/view.cljs b/src/status_im2/contexts/shell/activity_center/notification/mentions/view.cljs index 91e4159f1f..51ef385c75 100644 --- a/src/status_im2/contexts/shell/activity_center/notification/mentions/view.cljs +++ b/src/status_im2/contexts/shell/activity_center/notification/mentions/view.cljs @@ -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)}}]]])) diff --git a/src/status_im2/contexts/shell/activity_center/notification/reply/view.cljs b/src/status_im2/contexts/shell/activity_center/notification/reply/view.cljs index 3c3cffe723..738f9b19b2 100644 --- a/src/status_im2/contexts/shell/activity_center/notification/reply/view.cljs +++ b/src/status_im2/contexts/shell/activity_center/notification/reply/view.cljs @@ -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) diff --git a/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs b/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs index 47a9912e30..af74941b07 100644 --- a/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs +++ b/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs @@ -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 diff --git a/src/status_im2/contexts/syncing/syncing_instructions/view.cljs b/src/status_im2/contexts/syncing/syncing_instructions/view.cljs index 40b38936d7..395874e970 100644 --- a/src/status_im2/contexts/syncing/syncing_instructions/view.cljs +++ b/src/status_im2/contexts/syncing/syncing_instructions/view.cljs @@ -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]