From ab868a6ae5724b61fe7c6876b037461e4597db85 Mon Sep 17 00:00:00 2001 From: codemaster <39961806+codemaster115@users.noreply.github.com> Date: Fri, 29 Sep 2023 09:11:21 -0400 Subject: [PATCH] Implement switcher group messaging card (#16802) --- ios/Podfile.lock | 2 +- .../components/avatars/group_avatar/view.cljs | 7 +- .../components/counter/counter/style.cljs | 4 +- .../switchers/base_card/component_spec.cljs | 18 +++ .../components/switchers/base_card/style.cljs | 23 +++ .../components/switchers/base_card/view.cljs | 31 ++++ .../switchers/card_content/style.cljs | 27 ++++ .../switchers/card_content/view.cljs | 98 +++++++++++++ .../switchers/card_main_info/style.cljs | 5 + .../switchers/card_main_info/view.cljs | 21 +++ .../group_messaging_card/component_spec.cljs | 116 +++++++++++++++ .../switchers/group_messaging_card/style.cljs | 16 +++ .../switchers/group_messaging_card/view.cljs | 32 +++++ src/quo2/components/switchers/utils.cljs | 35 +++++ .../components/tags/context_tag/style.cljs | 8 +- .../components/tags/context_tag/view.cljs | 2 +- src/quo2/core.cljs | 4 + src/quo2/core_spec.cljs | 2 + src/status_im2/contexts/quo_preview/main.cljs | 7 +- .../switcher/group_messaging_card.cljs | 132 ++++++++++++++++++ translations/en.json | 1 + 21 files changed, 581 insertions(+), 10 deletions(-) create mode 100644 src/quo2/components/switchers/base_card/component_spec.cljs create mode 100644 src/quo2/components/switchers/base_card/style.cljs create mode 100644 src/quo2/components/switchers/base_card/view.cljs create mode 100644 src/quo2/components/switchers/card_content/style.cljs create mode 100644 src/quo2/components/switchers/card_content/view.cljs create mode 100644 src/quo2/components/switchers/card_main_info/style.cljs create mode 100644 src/quo2/components/switchers/card_main_info/view.cljs create mode 100644 src/quo2/components/switchers/group_messaging_card/component_spec.cljs create mode 100644 src/quo2/components/switchers/group_messaging_card/style.cljs create mode 100644 src/quo2/components/switchers/group_messaging_card/view.cljs create mode 100644 src/quo2/components/switchers/utils.cljs create mode 100644 src/status_im2/contexts/quo_preview/switcher/group_messaging_card.cljs diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 74d395bf13..d65479ef4c 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -707,7 +707,7 @@ SPEC CHECKSUMS: FBLazyVector: a8af91c2b5a0029d12ff6b32e428863d63c48991 FBReactNativeSpec: 1b2309b096448a1dc9d0c43999216f8fda809ae8 fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9 - glog: d93527a855523adb8c113837db4be68fb00e230d + glog: 166d178815c300e8126de9a7900101814eb16253 HMSegmentedControl: 34c1f54d822d8308e7b24f5d901ec674dfa31352 Keycard: ac6df4d91525c3c82635ac24d4ddd9a80aca5fc8 libwebp: f62cb61d0a484ba548448a4bd52aabf150ff6eef diff --git a/src/quo2/components/avatars/group_avatar/view.cljs b/src/quo2/components/avatars/group_avatar/view.cljs index 1620c0eefc..cfc3931089 100644 --- a/src/quo2/components/avatars/group_avatar/view.cljs +++ b/src/quo2/components/avatars/group_avatar/view.cljs @@ -28,9 +28,10 @@ (let [container-size (get-in sizes [size :container]) icon-size (get-in sizes [size :icon])] [rn/view - {:style (style/container {:container-size container-size - :customization-color customization-color - :theme theme})} + {:accessibility-label :group-avatar + :style (style/container {:container-size container-size + :customization-color customization-color + :theme theme})} (if picture [fast-image/fast-image {:source picture diff --git a/src/quo2/components/counter/counter/style.cljs b/src/quo2/components/counter/counter/style.cljs index 4751d1868f..dae1c6f866 100644 --- a/src/quo2/components/counter/counter/style.cljs +++ b/src/quo2/components/counter/counter/style.cljs @@ -4,7 +4,9 @@ (defn get-color [type customization-color theme] (case type - :default (colors/custom-color customization-color 50) + :default (colors/theme-colors (colors/custom-color customization-color 50) + (colors/custom-color customization-color 60) + theme) :secondary (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme) :grey (colors/theme-colors colors/neutral-10 colors/neutral-80 theme) :outline (colors/theme-colors colors/neutral-20 colors/neutral-80 theme) diff --git a/src/quo2/components/switchers/base_card/component_spec.cljs b/src/quo2/components/switchers/base_card/component_spec.cljs new file mode 100644 index 0000000000..b18eb24d29 --- /dev/null +++ b/src/quo2/components/switchers/base_card/component_spec.cljs @@ -0,0 +1,18 @@ +(ns quo2.components.switchers.base-card.component-spec + (:require [test-helpers.component :as h] + [quo2.components.switchers.base-card.view :as base-card] + [quo2.foundations.colors :as colors])) + +(h/describe "Switcher: Base card" + (h/test "Default render" + (h/render [base-card/base-card {}]) + (h/is-truthy (h/query-by-label-text :base-card))) + (h/test "Banner render" + (h/render [base-card/base-card {:banner {:source "banner"}}]) + (h/is-truthy (h/query-by-label-text :base-card)) + (h/is-truthy (h/query-by-label-text :banner))) + (h/test "Customization color" + (h/render [base-card/base-card {:customization-color :blue}]) + (h/has-style + (h/query-by-label-text :base-card) + {:backgroundColor (colors/custom-color :blue 50 40)}))) diff --git a/src/quo2/components/switchers/base_card/style.cljs b/src/quo2/components/switchers/base_card/style.cljs new file mode 100644 index 0000000000..3a5bb3068a --- /dev/null +++ b/src/quo2/components/switchers/base_card/style.cljs @@ -0,0 +1,23 @@ +(ns quo2.components.switchers.base-card.style + (:require [quo2.foundations.colors :as colors])) + +(defn base-container + [customization-color] + {:width 160 + :height 160 + :border-radius 16 + :background-color (colors/custom-color customization-color 50 40)}) + +(def thumb-card + {:width 160 + :height 120 + :border-radius 16 + :bottom 0 + :position :absolute + :background-color colors/neutral-95 + :padding 12}) + +(def close-button + {:position :absolute + :right 8 + :top 8}) diff --git a/src/quo2/components/switchers/base_card/view.cljs b/src/quo2/components/switchers/base_card/view.cljs new file mode 100644 index 0000000000..c0804f8a09 --- /dev/null +++ b/src/quo2/components/switchers/base_card/view.cljs @@ -0,0 +1,31 @@ +(ns quo2.components.switchers.base-card.view + (:require [quo.react-native :as rn] + [quo2.components.buttons.button.view :as button] + [quo2.components.switchers.base-card.style :as style])) + +(defn base-card + [] + (let [card-ref (atom nil) + set-ref #(reset! card-ref %)] + (fn [{:keys [banner on-press on-close customization-color]} & children] + [rn/touchable-opacity + {:on-press on-press + :ref set-ref + :active-opacity 1} + [rn/view + {:accessibility-label :base-card + :style (style/base-container customization-color)} + (when banner + [rn/image + {:accessibility-label :banner + :source (:source banner) + :style {:width 160}}]) + [button/button + {:size 24 + :type :grey + :icon-only? true + :on-press on-close + :background :photo + :container-style style/close-button} + :i/close] + (into [rn/view {:style style/thumb-card}] children)]]))) diff --git a/src/quo2/components/switchers/card_content/style.cljs b/src/quo2/components/switchers/card_content/style.cljs new file mode 100644 index 0000000000..41f07f0a87 --- /dev/null +++ b/src/quo2/components/switchers/card_content/style.cljs @@ -0,0 +1,27 @@ +(ns quo2.components.switchers.card-content.style + (:require [quo2.foundations.colors :as colors])) + +(defn content-container + [status] + {:flex-direction :row + :justify-content :space-between + :align-items (if (= status :mention) :center :flex-end)}) + +(def notification-container + {:width 20 + :height 20 + :justify-content :center + :align-items :center + :margin-left 8}) + +(def message-text + {:color colors/white}) + +(def sticker + {:width 24 + :height 24}) + +(def gif + {:width 24 + :height 24 + :border-radius 8}) diff --git a/src/quo2/components/switchers/card_content/view.cljs b/src/quo2/components/switchers/card_content/view.cljs new file mode 100644 index 0000000000..bc592c2c00 --- /dev/null +++ b/src/quo2/components/switchers/card_content/view.cljs @@ -0,0 +1,98 @@ +(ns quo2.components.switchers.card-content.view + (:require [react-native.core :as rn] + [react-native.fast-image :as fast-image] + [quo2.components.switchers.card-content.style :as style] + [quo2.components.common.notification-dot.view :as notification-dot] + [quo2.components.counter.counter.view :as counter] + [quo2.components.markdown.text :as text] + [quo2.components.list-items.preview-list.view :as preview-list] + [quo2.components.tags.context-tag.view :as tag] + [quo2.components.code.snippet-preview.view :as snippet-preview] + [utils.i18n :as i18n])) + +(defn content-view + [{:keys [type content customization-color] + {:keys [text duration photos community-avatar + community-name source]} :content}] + [rn/view {:style {:max-width 108}} + (case type + :message + [text/text + {:size :paragraph-2 + :weight :regular + :number-of-lines 1 + :ellipsize-mode :tail + :style style/message-text} + text] + + :photo + [preview-list/view + {:type :collectibles + :more-than-99-label (i18n/label :t/counter-99-plus) + :size :size/s-24} + photos] + + :sticker + [fast-image/fast-image + {:accessibility-label :sticker + :source source + :style style/sticker}] + + :gif + [fast-image/fast-image + {:accessibility-label :gif + :source source + :style style/gif}] + + :audio + [tag/view + {:type :audio + :duration duration + :customization-color customization-color}] + + :community + [tag/view + {:type :community + :community-name community-name + :community-logo community-avatar + :size 24}] + + :link + [tag/view + {:type :icon + :icon (:icon content) + :context (:text content) + :size 24}] + + :code + [snippet-preview/view + {:language (:language content)} + content] + + nil)]) + +(defn notification-indicator + [{:keys [status mention-count customization-color]}] + (when (not= status :read) + [rn/view {:style style/notification-container} + (case status + :unread + [notification-dot/view + {:customization-color customization-color}] + + :mention + [counter/view + {:outline false + :customization-color customization-color} + mention-count] + + nil)])) + +(defn view + [type status customization-color content] + [rn/view {:style (style/content-container status)} + [content-view {:type type :content content :customization-color customization-color}] + [notification-indicator + {:status status + :customization-color customization-color + :mention-count (:mention-count content)}]]) diff --git a/src/quo2/components/switchers/card_main_info/style.cljs b/src/quo2/components/switchers/card_main_info/style.cljs new file mode 100644 index 0000000000..ae0cd5e51a --- /dev/null +++ b/src/quo2/components/switchers/card_main_info/style.cljs @@ -0,0 +1,5 @@ +(ns quo2.components.switchers.card-main-info.style + (:require [quo2.foundations.colors :as colors])) + +(def subtitle + {:color colors/neutral-40}) diff --git a/src/quo2/components/switchers/card_main_info/view.cljs b/src/quo2/components/switchers/card_main_info/view.cljs new file mode 100644 index 0000000000..e1b0d991d5 --- /dev/null +++ b/src/quo2/components/switchers/card_main_info/view.cljs @@ -0,0 +1,21 @@ +(ns quo2.components.switchers.card-main-info.view + (:require [quo2.components.markdown.text :as text] + [quo2.components.switchers.card-main-info.style :as style] + [quo.react-native :as rn])) + +(defn view + [{:keys [title subtitle]}] + [rn/view + [text/text + {:accessibility-label :title + :size :paragraph-1 + :weight :semi-bold + :number-of-lines 1 + :ellipsize-mode :tail} + title] + [text/text + {:accessibility-label :subtitle + :size :paragraph-2 + :weight :medium + :style style/subtitle} + subtitle]]) diff --git a/src/quo2/components/switchers/group_messaging_card/component_spec.cljs b/src/quo2/components/switchers/group_messaging_card/component_spec.cljs new file mode 100644 index 0000000000..513a7eb3a8 --- /dev/null +++ b/src/quo2/components/switchers/group_messaging_card/component_spec.cljs @@ -0,0 +1,116 @@ +(ns quo2.components.switchers.group-messaging-card.component-spec + (:require [test-helpers.component :as h] + [quo2.components.switchers.group-messaging-card.view :as group-messaging-card] + [quo2.components.switchers.utils :as utils])) + +(def photos-list + [{:source (js/require "../resources/images/mock2/photo1.png")} + {:source (js/require "../resources/images/mock2/photo2.png")} + {:source (js/require "../resources/images/mock2/photo3.png")} + {:source (js/require "../resources/images/mock2/photo1.png")} + {:source (js/require "../resources/images/mock2/photo2.png")} + {:source (js/require "../resources/images/mock2/photo3.png")}]) +(def sticker {:source (js/require "../resources/images/mock2/sticker.png")}) +(def gif {:source (js/require "../resources/images/mock2/gif.png")}) +(def coinbase-community (js/require "../resources/images/mock2/coinbase.png")) +(def link-icon (js/require "../resources/images/mock2/status-logo.png")) + +(h/describe "Switcher: Group Messaging Card" + (h/test "Default render" + (h/render [group-messaging-card/view {}]) + (h/is-truthy (h/query-by-label-text :base-card))) + + (h/test "Avatar render" + (h/render [group-messaging-card/view {:avatar true}]) + (h/is-truthy (h/query-by-label-text :group-avatar))) + + (h/test "Status: Read, Type: Message, Avatar: true" + (h/render [group-messaging-card/view + {:avatar true + :status :read + :type :message + :title "Title" + :content {:text "Last message"}}]) + (h/is-truthy (h/get-by-text "Title")) + (h/is-truthy (h/get-by-text (utils/subtitle :message nil))) + (h/is-truthy (h/get-by-text "Last message"))) + + (h/test "Status: Unread, Type: Message, Avatar: true" + (h/render [group-messaging-card/view + {:avatar true + :status :unread + :type :message + :title "Title"}]) + (h/is-truthy (h/query-by-label-text :notification-dot))) + + (h/test "Status: Mention, Type: Message, Avatar: true" + (h/render [group-messaging-card/view + {:avatar true + :status :mention + :type :message + :title "Title" + :content {:mention-count 5}}]) + (h/is-truthy (h/get-by-test-id :counter-component))) + + (h/test "Status: Read, Type: Photo, Avatar: true" + (h/render [group-messaging-card/view + {:avatar true + :status :read + :type :photo + :title "Title" + :content {:photos photos-list}}]) + (h/is-truthy (h/get-by-text (utils/subtitle :photo {:photos photos-list})))) + + (h/test "Status: Read, Type: Stciker, Avatar: true" + (h/render [group-messaging-card/view + {:avatar true + :status :read + :type :sticker + :title "Title" + :content sticker}]) + (h/is-truthy (h/get-by-text (utils/subtitle :sticker nil))) + (h/is-truthy (h/get-by-label-text :sticker))) + + (h/test "Status: Read, Type: Gif, Avatar: true" + (h/render [group-messaging-card/view + {:avatar true + :status :read + :type :gif + :title "Title" + :content gif}]) + (h/is-truthy (h/get-by-text (utils/subtitle :gif nil))) + (h/is-truthy (h/get-by-label-text :gif))) + + (h/test "Status: Read, Type: Audio, Avatar: true" + (h/render [group-messaging-card/view + {:avatar true + :status :read + :type :audio + :title "Title" + :content {:duration "00:32"}}]) + (h/is-truthy (h/get-by-text (utils/subtitle :audio nil))) + (h/is-truthy (h/get-by-text "00:32"))) + + (h/test "Status: Read, Type: Community, Avatar: true" + (h/render [group-messaging-card/view + {:avatar true + :status :read + :type :community + :title "Title" + :content {:community-avatar coinbase-community + :community-name "Coinbase"}}]) + (h/is-truthy (h/get-by-text (utils/subtitle :community nil))) + (h/is-truthy (h/get-by-label-text :group-avatar)) + (h/is-truthy (h/get-by-text "Coinbase"))) + + (h/test "Status: Read, Type: Link, Avatar: true" + (h/render [group-messaging-card/view + {:avatar true + :status :read + :type :link + :title "Title" + :content {:icon :placeholder + :text "Rolling St..."}}]) + (h/is-truthy (h/get-by-text (utils/subtitle :link nil))) + (h/is-truthy (h/get-by-label-text :group-avatar)) + (h/is-truthy (h/get-by-text "Rolling St...")))) diff --git a/src/quo2/components/switchers/group_messaging_card/style.cljs b/src/quo2/components/switchers/group_messaging_card/style.cljs new file mode 100644 index 0000000000..d16586143f --- /dev/null +++ b/src/quo2/components/switchers/group_messaging_card/style.cljs @@ -0,0 +1,16 @@ +(ns quo2.components.switchers.group-messaging-card.style + (:require [quo2.foundations.colors :as colors])) + +(def avatar-container + {:left 10 + :top -30 + :border-radius 48 + :border-width 2 + :border-color colors/neutral-95 + :position :absolute}) + +(def content-container + {:flex 1 + :flex-direction :column + :justify-content :space-between + :margin-top 16}) diff --git a/src/quo2/components/switchers/group_messaging_card/view.cljs b/src/quo2/components/switchers/group_messaging_card/view.cljs new file mode 100644 index 0000000000..89bae5ce0b --- /dev/null +++ b/src/quo2/components/switchers/group_messaging_card/view.cljs @@ -0,0 +1,32 @@ +(ns quo2.components.switchers.group-messaging-card.view + (:require + [react-native.core :as rn] + [quo2.components.avatars.group-avatar.view :as group-avatar] + [quo2.components.switchers.base-card.view :as base-card] + [quo2.components.switchers.card-main-info.view :as card-main-info] + [quo2.components.switchers.card-content.view :as card-content] + [quo2.components.switchers.group-messaging-card.style :as style] + [quo2.components.switchers.utils :as utils])) + +(defn view + "Opts: + :type - keyword -> :message/:photo/:sticker/:gif/:audio/:community/:link/:code + :status - keyword -> :read/:unread/:mention + :profile-color -> keyword or hexstring -> :blue/:army/... or #ABCEDF + :customization-color -> keyword or hexstring -> :blue/:army/... or #ABCEDF" + [{:keys [avatar type status title profile-color customization-color on-close content] + :or {profile-color :blue avatar nil}}] + [base-card/base-card + {:customization-color customization-color + :on-close on-close} + [rn/view {:style style/avatar-container} + [group-avatar/view + {:customization-color customization-color + :picture avatar + :icon-name :i/members + :size :size-48}]] + [rn/view {:style style/content-container} + [card-main-info/view + {:title title + :subtitle (utils/subtitle type content)}] + [card-content/view type status profile-color content]]]) diff --git a/src/quo2/components/switchers/utils.cljs b/src/quo2/components/switchers/utils.cljs new file mode 100644 index 0000000000..e702cb0d52 --- /dev/null +++ b/src/quo2/components/switchers/utils.cljs @@ -0,0 +1,35 @@ +(ns quo2.components.switchers.utils + (:require [utils.i18n :as i18n])) + +(defn subtitle + [type {:keys [photos]}] + (case type + :message + (i18n/label :t/message) + + :photo + (i18n/label + (if (= (count photos) 1) + :t/one-photo + :t/n-photos) + {:count (count photos)}) + + :sticker + (i18n/label :t/sticker) + + :gif + (i18n/label :t/gif) + + :audio + (i18n/label :t/audio-message) + + :community + (i18n/label :t/link-to-community) + + :link + (i18n/label :t/external-link) + + :code + (i18n/label :t/code-snippet) + + "")) diff --git a/src/quo2/components/tags/context_tag/style.cljs b/src/quo2/components/tags/context_tag/style.cljs index ea7801cff5..5fbcbde606 100644 --- a/src/quo2/components/tags/context_tag/style.cljs +++ b/src/quo2/components/tags/context_tag/style.cljs @@ -7,13 +7,17 @@ (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 +(defn audio-tag-icon-container + [customization-color theme] {:width 20 :height 20 :border-radius 10 :align-items :center :justify-content :center - :background-color colors/primary-50}) + :background-color (colors/theme-colors + (colors/custom-color customization-color 50) + (colors/custom-color customization-color 60) + theme)}) (def audio-tag-icon-color colors/white) diff --git a/src/quo2/components/tags/context_tag/view.cljs b/src/quo2/components/tags/context_tag/view.cljs index 6320bdd916..bc45efc290 100644 --- a/src/quo2/components/tags/context_tag/view.cljs +++ b/src/quo2/components/tags/context_tag/view.cljs @@ -108,7 +108,7 @@ :audio [tag-skeleton {:theme theme :text (str duration)} - [rn/view {:style style/audio-tag-icon-container} + [rn/view {:style (style/audio-tag-icon-container customization-color theme)} [icons/icon :i/play {:color style/audio-tag-icon-color :size 12}]]] :group diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 04dad86c96..c554b1e22a 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -112,6 +112,7 @@ quo2.components.settings.section-label.view quo2.components.share.qr-code.view quo2.components.share.share-qr-code.view + quo2.components.switchers.group-messaging-card.view quo2.components.tabs.account-selector quo2.components.tabs.segmented-tab quo2.components.tabs.tabs.view @@ -328,6 +329,9 @@ (def qr-code quo2.components.share.qr-code.view/qr-code) (def share-qr-code quo2.components.share.share-qr-code.view/view) +;;;; SWITCHER +(def group-messaging-card quo2.components.switchers.group-messaging-card.view/view) + ;;;; Tabs (def tabs quo2.components.tabs.tabs.view/view) (def segmented-control quo2.components.tabs.segmented-tab/segmented-control) diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index 99eb8fd83b..a59a420d0d 100644 --- a/src/quo2/core_spec.cljs +++ b/src/quo2/core_spec.cljs @@ -65,6 +65,8 @@ [quo2.components.settings.category.component-spec] [quo2.components.settings.data-item.component-spec] [quo2.components.share.share-qr-code.component-spec] + [quo2.components.switchers.base-card.component-spec] + [quo2.components.switchers.group-messaging-card.component-spec] [quo2.components.tags.network-tags.component-spec] [quo2.components.tags.status-tags-component-spec] [quo2.components.wallet.account-card.component-spec] diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index 6d18d3d2ec..a8d9d6e49e 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -131,6 +131,7 @@ [status-im2.contexts.quo-preview.settings.section-label :as section-label] [status-im2.contexts.quo-preview.share.qr-code :as qr-code] [status-im2.contexts.quo-preview.share.share-qr-code :as share-qr-code] + [status-im2.contexts.quo-preview.switcher.group-messaging-card :as group-messaging-card] [status-im2.contexts.quo-preview.switcher.switcher-cards :as switcher-cards] [status-im2.contexts.quo-preview.tabs.account-selector :as account-selector] [status-im2.contexts.quo-preview.tabs.segmented-tab :as segmented] @@ -362,8 +363,6 @@ :component react/preview-react}] :record-audio [{:name :record-audio :component record-audio/preview-record-audio}] - :switcher [{:name :switcher-cards - :component switcher-cards/preview-switcher-cards}] :selectors [{:name :disclaimer :component disclaimer/preview-disclaimer} {:name :filter @@ -390,6 +389,10 @@ :component qr-code/preview-qr-code} {:name :share-qr-code :component share-qr-code/preview-share-qr-code}] + :switchers [{:name :group-messaging-card + :component group-messaging-card/view} + {:name :switcher-cards + :component switcher-cards/preview-switcher-cards}] :tabs [{:name :segmented :component segmented/preview-segmented} {:name :tabs diff --git a/src/status_im2/contexts/quo_preview/switcher/group_messaging_card.cljs b/src/status_im2/contexts/quo_preview/switcher/group_messaging_card.cljs new file mode 100644 index 0000000000..25b9e67fd9 --- /dev/null +++ b/src/status_im2/contexts/quo_preview/switcher/group_messaging_card.cljs @@ -0,0 +1,132 @@ +(ns status-im2.contexts.quo-preview.switcher.group-messaging-card + (:require [quo2.core :as quo] + [reagent.core :as reagent] + [status-im2.contexts.quo-preview.preview :as preview] + [status-im2.common.resources :as resources])) + +(def descriptor + [{:label "Title" + :key :title + :type :text} + {:label "Status" + :key :status + :type :select + :options [{:key :read + :value :read} + {:key :unread + :value :unread} + {:key :mention + :value :mention}]} + {:label "Counter Label" + :key :counter-label + :type :text} + {:label "Type" + :key :type + :type :select + :options [{:key :message + :value :text} + {:key :photo + :value :photo} + {:key :sticker + :value :sticker} + {:key :gif + :value :gif} + {:key :audio + :value :audio} + {:key :community + :value :community} + {:key :link + :value :link} + {:key :code + :value :code-snippet}]} + {:label "Last Message" + :key :last-message + :type :text} + {:label "Avatar:" + :key :avatar? + :type :boolean} + (preview/customization-color-option)]) + +;; Mock data +(def sticker {:source (resources/get-mock-image :sticker)}) +(def community-avatar (resources/get-mock-image :community-logo)) +(def gif {:source (resources/get-mock-image :gif)}) +(def coinbase-community (resources/get-mock-image :coinbase)) +(def photos-list + [{:source (resources/get-mock-image :photo1)} + {:source (resources/get-mock-image :photo2)} + {:source (resources/get-mock-image :photo3)} + {:source (resources/get-mock-image :photo1)} + {:source (resources/get-mock-image :photo2)} + {:source (resources/get-mock-image :photo3)}]) +(def clojure-example + "(defn request->xhrio-options + [{:as request + :keys [on-success on-failure] + :or {on-success [:http-no-on-success] + on-failure [:http-no-on-failure]}}] + ; wrap events in cljs-ajax callback + (let [api (new goog.net.XhrIo)] + (-> request + (assoc + :api api + :handler (partial ajax-xhrio-handler + #(dispatch (conj on-success %)) + #(dispatch (conj on-failure %)) + api)) + (dissoc :on-success :on-failure :on-request))))") + +(defn get-mock-content + [data] + (case (:type data) + :message + {:text (:last-message data)} + + :photo + {:photos photos-list} + + :sticker + sticker + + :gif + gif + + :audio + {:duration "00:32"} + + :community + {:community-avatar coinbase-community + :community-name "Coinbase"} + + :link + {:icon :placeholder + :text "Rolling St..."} + + :code + {:language :clojure + :text clojure-example} + + nil)) + +(defn get-mock-data + [data] + (merge + data + {:content (merge (get-mock-content data) + {:mention-count (when (= (:status data) :mention) (:counter-label data))})})) + +(defn view + [] + (let [state (reagent/atom {:title "Hester, John, Steven, and 2 others" + :type :message + :status :read + :last-message "Hello there, there is a new message" + :customization-color :camel + :avatar? false + :counter-label 5})] + (fn [] + [preview/preview-container {:state state :descriptor descriptor} + [quo/group-messaging-card + (cond-> (get-mock-data @state) + (:avatar? @state) + (assoc :avatar community-avatar))]]))) diff --git a/translations/en.json b/translations/en.json index b70c249aa7..4aa80522f6 100644 --- a/translations/en.json +++ b/translations/en.json @@ -2307,6 +2307,7 @@ "mint": "Mint", "via": "via", "x-counter": "x{{counter}}", + "code-snippet": "Code snippet", "name-ens-or-address": "Name, ENS, or address", "emoji-search-placeholder": "Search emojis", "emoji-recent": "Recent",