From 63ace4da76ab47c8212cb62ef970aaf20bb0b1f4 Mon Sep 17 00:00:00 2001 From: Parvesh Monu Date: Wed, 4 Jan 2023 03:32:51 +0530 Subject: [PATCH] Improve switcher last content (#14626) --- resources/images/mock/coinbase@2x.png | Bin 0 -> 2692 bytes src/quo2/components/tags/context_tags.cljs | 54 ++++- src/quo2/core.cljs | 2 + src/status_im/react_native/resources.cljs | 3 +- src/status_im2/common/constants.cljs | 2 + .../contexts/chat/messages/list/view.cljs | 4 +- .../quo_preview/switcher/switcher_cards.cljs | 72 +++--- .../quo_preview/tags/context_tags.cljs | 17 +- src/status_im2/contexts/shell/cards/view.cljs | 205 +++++++++++------- src/status_im2/contexts/shell/constants.cljs | 11 +- src/status_im2/contexts/shell/events.cljs | 27 +-- src/status_im2/contexts/shell/style.cljs | 10 +- src/status_im2/contexts/shell/view.cljs | 11 +- src/status_im2/subs/shell.cljs | 122 +++++++---- src/utils/datetime.cljs | 7 + translations/en.json | 2 +- 16 files changed, 360 insertions(+), 189 deletions(-) create mode 100644 resources/images/mock/coinbase@2x.png diff --git a/resources/images/mock/coinbase@2x.png b/resources/images/mock/coinbase@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..b3bc187f15a5663427e88e62895fc86609dd95af GIT binary patch literal 2692 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 opts (select-keys [:override-theme :style]) - (assoc-in [:style :padding-left] 3)) + (assoc-in [:style :padding-left] 3) + (assoc-in [:style :padding-vertical] 2)) [group-avatar/group-avatar opts] [text/text {:weight :medium @@ -69,7 +64,7 @@ [rn/image {:style {:width 20 :border-radius 10 - :background-color :white + :background-color :red :height 20} :source photo}] [rn/view @@ -88,3 +83,44 @@ [] (fn [params username photo] [context-tag params {:uri photo} username])) + +(defn audio-tag + [duration params] + [base-tag + (merge + {:style {:padding-left 2 + :padding-vertical 2}} + params) + [rn/view + {:width 20 + :height 20 + :border-radius 10 + :align-items :center + :justify-content :center + :background-color colors/primary-50} + [icons/icon + :i/play + {:color colors/white + :size 12}]] + [text/text + {:weight :medium + :size :paragraph-2 + :style {:margin-left 4 + :color (colors/theme-colors + colors/neutral-100 + colors/white + (:override-theme params))}} + duration]]) + +(defn community-tag + [avatar community-name params] + [context-tag + (merge + {:style {:padding-vertical 2} + :text-style {:margin-left 2 + :color (colors/theme-colors + colors/neutral-100 + colors/white + (:override-theme params))}} + params) + avatar community-name]) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 942f011646..ea566c9f72 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -75,6 +75,8 @@ (def user-avatar-tag quo2.components.tags.context-tags/user-avatar-tag) (def context-tag quo2.components.tags.context-tags/context-tag) (def group-avatar-tag quo2.components.tags.context-tags/group-avatar-tag) +(def audio-tag quo2.components.tags.context-tags/audio-tag) +(def community-tag quo2.components.tags.context-tags/community-tag) (def tabs quo2.components.tabs.tabs/tabs) (def scrollable-tabs quo2.components.tabs.tabs/scrollable-tabs) (def account-selector quo2.components.tabs.account-selector/account-selector) diff --git a/src/status_im/react_native/resources.cljs b/src/status_im/react_native/resources.cljs index f3394a516b..2e95848f8d 100644 --- a/src/status_im/react_native/resources.cljs +++ b/src/status_im/react_native/resources.cljs @@ -63,7 +63,8 @@ :sticker (js/require "../resources/images/mock/sticker.png") :user-picture-female2 (js/require "../resources/images/mock/user_picture_female2.png") :user-picture-male4 (js/require "../resources/images/mock/user_picture_male4.png") - :user-picture-male5 (js/require "../resources/images/mock/user_picture_male5.png")}) + :user-picture-male5 (js/require "../resources/images/mock/user_picture_male5.png") + :coinbase (js/require "../resources/images/mock/coinbase.png")}) (defn get-theme-image [k] diff --git a/src/status_im2/common/constants.cljs b/src/status_im2/common/constants.cljs index c95d33b5b8..7d96a42077 100644 --- a/src/status_im2/common/constants.cljs +++ b/src/status_im2/common/constants.cljs @@ -13,6 +13,8 @@ (def ^:const content-type-community 9) (def ^:const content-type-gap 10) (def ^:const content-type-contact-request 11) ;; TODO: temp, will be removed +(def ^:const content-type-gif 12) +(def ^:const content-type-link 13) (def ^:const contact-request-state-none 0) (def ^:const contact-request-state-mutual 1) diff --git a/src/status_im2/contexts/chat/messages/list/view.cljs b/src/status_im2/contexts/chat/messages/list/view.cljs index afefc6ecfb..18c0d92c38 100644 --- a/src/status_im2/contexts/chat/messages/list/view.cljs +++ b/src/status_im2/contexts/chat/messages/list/view.cljs @@ -179,7 +179,9 @@ :on-layout on-messages-view-layout})] [quo/floating-shell-button (merge {:jump-to - {:on-press #(rf/dispatch [:shell/navigate-to-jump-to]) + {:on-press #(do + (rf/dispatch [:close-chat]) + (rf/dispatch [:shell/navigate-to-jump-to])) :label (i18n/label :t/jump-to)}} (when @show-floating-scroll-down-button {:scroll-to-bottom {:on-press scroll-to-bottom}})) diff --git a/src/status_im2/contexts/quo_preview/switcher/switcher_cards.cljs b/src/status_im2/contexts/quo_preview/switcher/switcher_cards.cljs index 1aa8a96c17..2bff3c7ce8 100644 --- a/src/status_im2/contexts/quo_preview/switcher/switcher_cards.cljs +++ b/src/status_im2/contexts/quo_preview/switcher/switcher_cards.cljs @@ -2,6 +2,7 @@ (:require [quo2.foundations.colors :as colors] [react-native.core :as rn] [reagent.core :as reagent] + [status-im2.common.constants :as constants] [status-im.react-native.resources :as resources] [status-im2.contexts.quo-preview.preview :as preview] [status-im2.contexts.shell.cards.view :as switcher-cards] @@ -19,6 +20,8 @@ :value "Group Messaging"} {:key shell.constants/community-card :value "Community Card"} + {:key shell.constants/community-channel-card + :value "Community Channel Card"} {:key shell.constants/browser-card :value "Browser Card"} {:key shell.constants/wallet-card @@ -51,26 +54,20 @@ {:label "Content Type" :key :content-type :type :select - :options [{:key :text + :options [{:key constants/content-type-text :value :text} - {:key :photo + {:key constants/content-type-image :value :photo} - {:key :sticker + {:key constants/content-type-sticker :value :sticker} - {:key :gif + {:key constants/content-type-gif :value :gif} - {:key :audio + {:key constants/content-type-audio :value :audio} - {:key :community + {:key constants/content-type-community :value :community} - {:key :link - :value :link} - {:key :code - :value :code} - {:key :channel - :value :channel} - {:key :community-info - :value :community-info}]} + {:key constants/content-type-link + :value :link}]} {:label "Last Message" :key :last-message :type :text} @@ -90,6 +87,7 @@ (def sticker {:source (resources/get-mock-image :sticker)}) (def community-avatar {:source (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)} @@ -102,13 +100,27 @@ (defn get-mock-content [data] (case (:content-type data) - :text (:last-message data) - :photo photos-list - :sticker sticker - :gif gif - :channel {:emoji "🍑" :channel-name "# random"} - :community-info {:type :kicked} - (:audio :community :link :code) nil)) + constants/content-type-text + (:last-message data) + + constants/content-type-image + photos-list + + constants/content-type-sticker + sticker + + constants/content-type-gif + gif + + constants/content-type-audio + "00:32" + + constants/content-type-community + {:avatar coinbase-community + :community-name "Coinbase"} + + constants/content-type-link + nil)) (defn get-mock-data [{:keys [type] :as data}] @@ -120,11 +132,19 @@ :notification-indicator (:notification-indicator data) :counter-label (:counter-label data) :content-type (:content-type data) + :community-channel {:emoji "🍑" :channel-name "# random"} + :community-info {:type :kicked} :data (get-mock-content data)}} (case type - shell.constants/one-to-one-chat-card {:avatar-params {:full-name (:title data)}} - shell.constants/private-group-chat-card {} - shell.constants/community-card {:avatar-params community-avatar} + shell.constants/one-to-one-chat-card + {:avatar-params {:full-name (:title data)}} + + shell.constants/private-group-chat-card + {} + + (shell.constants/community-card + shell.constants/community-channel-card) + {:avatar-params community-avatar} {}))) (defn cool-preview @@ -136,7 +156,7 @@ :banner? false :notification-indicator :counter :counter-label 2 - :content-type :text + :content-type constants/content-type-text :last-message "This is fantastic! Ethereum" :preview-label-color colors/white})] (fn [] @@ -151,7 +171,7 @@ (defn preview-switcher-cards [] [rn/view - {:background-color colors/neutral-100 + {:background-color (colors/theme-colors colors/white colors/neutral-90) :flex 1} [rn/flat-list {:flex 1 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 231fb3eabf..26c1173d0f 100644 --- a/src/status_im2/contexts/quo_preview/tags/context_tags.cljs +++ b/src/status_im2/contexts/quo_preview/tags/context_tags.cljs @@ -3,6 +3,7 @@ [quo2.foundations.colors :as colors] [react-native.core :as rn] [reagent.core :as reagent] + [status-im.react-native.resources :as resources] [status-im.multiaccounts.core :as multiaccounts] [status-im2.contexts.quo-preview.preview :as preview])) @@ -19,6 +20,8 @@ (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 (resources/get-mock-image :coinbase)) + (def main-descriptor [{:label "Type" :key :type @@ -30,7 +33,11 @@ {:key :group-avatar :value "Group avatar"} {:key :context-tag - :value "Context tag"}]}]) + :value "Context tag"} + {:key :audio + :value "Audio"} + {:key :community + :value "Community"}]}]) (def context-tag-descriptor [{:label "Label" @@ -100,13 +107,17 @@ :public-key [quo2/public-key-tag {} example-pk] :avatar - [quo2/user-avatar-tag {} current-username (:photo @state)])]]])))) + [quo2/user-avatar-tag {} current-username (:photo @state)] + :audio + [quo2/audio-tag "00:32"] + :community + [quo2/community-tag coinbase-community "Coinbase"])]]])))) (defn preview-context-tags [] [rn/view {:background-color (colors/theme-colors colors/white - colors/neutral-90) + colors/neutral-95) :flex 1} [rn/flat-list {:flex 1 diff --git a/src/status_im2/contexts/shell/cards/view.cljs b/src/status_im2/contexts/shell/cards/view.cljs index 61c2c775d3..6607471f90 100644 --- a/src/status_im2/contexts/shell/cards/view.cljs +++ b/src/status_im2/contexts/shell/cards/view.cljs @@ -5,59 +5,85 @@ [quo2.foundations.colors :as colors] [react-native.core :as rn] [react-native.fast-image :as fast-image] + [status-im2.common.constants :as constants] [status-im2.contexts.shell.cards.style :as style] [status-im2.contexts.shell.constants :as shell.constants])) (defn content-container - [{:keys [content-type data new-notifications? color-50]}] + [type {:keys [content-type data new-notifications? color-50 community-info community-channel]}] [rn/view {:style (style/content-container new-notifications?)} - ;; TODO - Use status-im2.common.shell.constants for content type - (case content-type - :text [quo/text - {:size :paragraph-2 - :weight :regular - :number-of-lines 1 - :ellipsize-mode :tail - :style style/last-message-text} - data] - :photo [quo/preview-list - {:type :photo - :more-than-99-label (i18n/label :counter-99-plus) - :size 24 - :override-theme :dark} data] - :sticker [fast-image/fast-image - {:source (:source data) - :style style/sticker}] - :gif [fast-image/fast-image - {:source (:source data) - :style style/gif}] - :channel [rn/view - {:style {:flex-direction :row - :align-items :center}} - [quo/channel-avatar - {:emoji (:emoji data) - :emoji-background-color (colors/alpha color-50 0.1)}] - [quo/text - {:size :paragraph-2 - :weight :medium - :number-of-lines 1 - :ellipsize-mode :tail - :style style/community-channel} - (:channel-name data)]] - :community-info (case (:type data) - :pending [quo/status-tag - {:status {:type :pending} - :label (i18n/label :t/pending) - :size :small - :override-theme :dark}] - :kicked [quo/status-tag - {:status {:type :negative} - :size :small - :override-theme :dark - :label (i18n/label :t/kicked)}] - (:count :permission) [:<>]) ;; Add components for these cases - (:audio :community :link :code) ;; Components not available - [:<>])]) + (case type + shell.constants/community-card + (case (:type community-info) + :pending [quo/status-tag + {:status {:type :pending} + :label (i18n/label :t/pending) + :size :small + :override-theme :dark}] + :kicked [quo/status-tag + {:status {:type :negative} + :size :small + :override-theme :dark + :label (i18n/label :t/kicked)}] + (:count :permission) [:<>]) ;; Add components for these cases + + shell.constants/community-channel-card + [rn/view + {:style {:flex-direction :row + :align-items :center}} + [quo/channel-avatar + {:emoji (:emoji community-channel) + :emoji-background-color (colors/alpha color-50 0.1)}] + [quo/text + {:size :paragraph-2 + :weight :medium + :number-of-lines 1 + :ellipsize-mode :tail + :style style/community-channel} + (:channel-name community-channel)]] + + (case content-type + constants/content-type-text + [quo/text + {:size :paragraph-2 + :weight :regular + :number-of-lines 1 + :ellipsize-mode :tail + :style style/last-message-text} + data] + + constants/content-type-image + [quo/preview-list + {:type :photo + :more-than-99-label (i18n/label :counter-99-plus) + :size 24 + :override-theme :dark} data] + + constants/content-type-sticker + [fast-image/fast-image + {:source (:source data) + :style style/sticker}] + + + constants/content-type-gif + [fast-image/fast-image + {:source (:source data) + :style style/gif}] + + constants/content-type-audio + [quo/audio-tag data {:override-theme :dark}] + + constants/content-type-community + [quo/community-tag + (:avatar data) + (:community-name data) + {:override-theme :dark}] + + (constants/content-type-link) ;; Components not available + ;; Code snippet content type is not supported yet + [:<>] + + nil))]) (defn notification-container [{:keys [notification-indicator counter-label color-60]}] @@ -70,9 +96,9 @@ [rn/view {:style (style/unread-dot color-60)}])]) (defn bottom-container - [{:keys [new-notifications?] :as content}] + [type {:keys [new-notifications?] :as content}] [:<> - [content-container content] + [content-container type content] (when new-notifications? [notification-container content])]) @@ -92,7 +118,8 @@ :size :large :override-theme :dark}] - shell.constants/community-card + (shell.constants/community-card + shell.constants/community-channel-card) (if (:source avatar-params) [fast-image/fast-image {:source (:source avatar-params) @@ -106,19 +133,41 @@ (string/upper-case (first (:name avatar-params)))]]))) (defn subtitle - [{:keys [content-type data]}] - (case content-type - :text (i18n/label :t/message) - :photo (i18n/label :t/n-photos {:count (count data)}) - :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) - :channel (i18n/label :t/community-channel) - :community-info (i18n/label :t/community) - (i18n/label :t/community))) + [type {:keys [content-type data]}] + (case type + shell.constants/community-card + (i18n/label :t/community) + + shell.constants/community-channel-card + (i18n/label :t/community-channel) + + (case content-type + constants/content-type-text + (i18n/label :t/message) + + constants/content-type-image + (i18n/label + (if (= (count data) 1) + :t/one-photo + :t/n-photos) + {:count (count data)}) + + constants/content-type-sticker + (i18n/label :t/sticker) + + constants/content-type-gif + (i18n/label :t/gif) + + constants/content-type-audio + (i18n/label :t/audio-message) + + constants/content-type-community + (i18n/label :t/link-to-community) + + constants/content-type-link + (i18n/label :t/external-link) + + ""))) ;; Screens Card (defn screens-card @@ -144,8 +193,8 @@ {:size :paragraph-2 :weight :medium :style style/subtitle} - (subtitle content)] - [bottom-container (merge {:color-50 color-50 :color-60 color-60} content)]] + (subtitle type content)] + [bottom-container type (merge {:color-50 color-50 :color-60 color-60} content)]] (when avatar-params [rn/view {:style style/avatar-container} [avatar avatar-params type customization-color]]) @@ -188,30 +237,26 @@ (defn card [{:keys [type] :as data}] (case type - - shell.constants/empty-card ;; Placeholder + shell.constants/empty-card ;; Placeholder [empty-card] - shell.constants/one-to-one-chat-card ;; Screens Card + (shell.constants/one-to-one-chat-card ;; Screens Card + shell.constants/private-group-chat-card + shell.constants/community-card + shell.constants/community-channel-card) [screens-card data] - shell.constants/private-group-chat-card ;; Screens Card - [screens-card data] - - shell.constants/community-card ;; Screens Card - [screens-card data] - - shell.constants/browser-card ;; Browser Card + shell.constants/browser-card ;; Browser Card [browser-card data] - shell.constants/wallet-card ;; Wallet Card + shell.constants/wallet-card ;; Wallet Card [wallet-card data] - shell.constants/wallet-collectible ;; Wallet Card + shell.constants/wallet-collectible ;; Wallet Card [wallet-collectible data] - shell.constants/wallet-graph ;; Wallet Card + shell.constants/wallet-graph ;; Wallet Card [wallet-graph data] - shell.constants/communities-discover ;; Home Card + shell.constants/communities-discover ;; Home Card [communities-discover data])) diff --git a/src/status_im2/contexts/shell/constants.cljs b/src/status_im2/contexts/shell/constants.cljs index 7f3fc0b0bf..28778e4dc5 100644 --- a/src/status_im2/contexts/shell/constants.cljs +++ b/src/status_im2/contexts/shell/constants.cljs @@ -60,8 +60,9 @@ (def ^:const one-to-one-chat-card 1) (def ^:const private-group-chat-card 2) (def ^:const community-card 3) -(def ^:const browser-card 4) -(def ^:const wallet-card 5) -(def ^:const wallet-collectible 6) -(def ^:const wallet-graph 7) -(def ^:const communities-discover 8) +(def ^:const community-channel-card 4) +(def ^:const browser-card 5) +(def ^:const wallet-card 6) +(def ^:const wallet-collectible 7) +(def ^:const wallet-graph 8) +(def ^:const communities-discover 9) diff --git a/src/status_im2/contexts/shell/events.cljs b/src/status_im2/contexts/shell/events.cljs index 517c8ced2e..3fc8f320cf 100644 --- a/src/status_im2/contexts/shell/events.cljs +++ b/src/status_im2/contexts/shell/events.cljs @@ -1,10 +1,10 @@ (ns status-im2.contexts.shell.events - (:require [re-frame.core :as re-frame] + (:require [utils.re-frame :as rf] + [re-frame.core :as re-frame] [status-im2.common.constants :as constants] - [status-im2.contexts.shell.animation :as animation] - [status-im2.contexts.shell.constants :as shell.constants] [status-im2.navigation.events :as navigation] - [utils.re-frame :as rf])) + [status-im2.contexts.shell.animation :as animation] + [status-im2.contexts.shell.constants :as shell.constants])) ;; Effects @@ -59,14 +59,10 @@ :db (assoc-in db [:shell/switcher-cards (:community-id chat)] - {:type shell.constants/community-card - :id (:community-id chat) - :clock now - :content {:content-type :channel - :data {:emoji (:emoji chat) - :channel-id (:chat-id chat) - :channel-name (:chat-name - chat)}}})} + {:type shell.constants/community-channel-card + :id (:community-id chat) + :clock now + :channel-id (:chat-id chat)})} nil)) @@ -75,9 +71,10 @@ :db (assoc-in db [:shell/switcher-cards (:community-id id)] - {:type shell.constants/community-card - :id (:community-id id) - :clock now})} + {:type shell.constants/community-card + :id (:community-id id) + :clock now + :channel-id nil})} nil)) diff --git a/src/status_im2/contexts/shell/style.cljs b/src/status_im2/contexts/shell/style.cljs index eb6d599c0d..fc9f443a5f 100644 --- a/src/status_im2/contexts/shell/style.cljs +++ b/src/status_im2/contexts/shell/style.cljs @@ -51,9 +51,13 @@ :accessibility-label :shell-placeholder-view}) (def placeholder-image - {:margin-top 186 - :width 120 - :height 120}) + {:margin-top 186 + :width 120 + :height 120 + ;; Code to remove once placeholder image/vector will be available + :border-width 5 + :border-radius 10 + :border-color :red}) (def placeholder-title {:margin-top 20 diff --git a/src/status_im2/contexts/shell/view.cljs b/src/status_im2/contexts/shell/view.cljs index 3cece63e71..bb65f591a6 100644 --- a/src/status_im2/contexts/shell/view.cljs +++ b/src/status_im2/contexts/shell/view.cljs @@ -47,7 +47,7 @@ (i18n/label :t/jump-to)]) (defn render-card - [{:keys [id type content] :as card}] + [{:keys [id type channel-id] :as card}] (let [card-data (case type shell.constants/one-to-one-chat-card (rf/sub [:shell/one-to-one-chat-card id]) @@ -56,11 +56,10 @@ (rf/sub [:shell/private-group-chat-card id]) shell.constants/community-card - (if content - (rf/sub [:shell/community-channel-card - id (get-in content [:data :channel-id]) - content]) - (rf/sub [:shell/community-card id])) + (rf/sub [:shell/community-card id]) + + shell.constants/community-channel-card + (rf/sub [:shell/community-channel-card channel-id]) nil)] [switcher-cards/card (merge card card-data)])) diff --git a/src/status_im2/subs/shell.cljs b/src/status_im2/subs/shell.cljs index cdcb4d1f56..97e9f571b4 100644 --- a/src/status_im2/subs/shell.cljs +++ b/src/status_im2/subs/shell.cljs @@ -1,21 +1,67 @@ (ns status-im2.subs.shell (:require [re-frame.core :as re-frame] - [status-im.react-native.resources :as resources] - [status-im2.common.constants :as status-constants])) + [utils.datetime :as datetime] + [status-im2.common.constants :as constants] + [status-im.react-native.resources :as resources])) + +(defn community-avatar + [community] + (let [images (:images community)] + (if (= (:id community) constants/status-community-id) + (resources/get-image :status-logo) + (when images + {:uri (:uri (or (:thumbnail images) + (:large images) + (first images)))})))) (defn get-card-content - [chat] + [chat communities] (let [last-message (:last-message chat)] - (case (:content-type last-message) - status-constants/content-type-text - {:content-type :text - :data (get-in last-message [:content :text])} + (merge + (when last-message + (case (:content-type last-message) + (constants/content-type-text + constants/content-type-emoji) + {:content-type constants/content-type-text + :data (get-in last-message [:content :text])} - {:content-type :text - :data "Todo: Implement"}))) + ;; Currently mock image is used as placeholder, + ;; as last-message don't have image + ;; https://github.com/status-im/status-mobile/issues/14625 + constants/content-type-image + {:content-type constants/content-type-image + :data [{:source (resources/get-mock-image :photo2)}]} + + ;; Same for sticker, mock image is used + constants/content-type-sticker + {:content-type constants/content-type-sticker + :data {:source (resources/get-mock-image :sticker)}} + + ;; Mock Image + constants/content-type-gif + {:content-type constants/content-type-gif + :data {:source (resources/get-mock-image :gif)}} + + constants/content-type-audio + {:content-type constants/content-type-audio + :data (datetime/ms-to-duration (:audio-duration-ms last-message))} + + constants/content-type-community + (let [community (get communities (:community-id last-message))] + {:content-type constants/content-type-community + :data {:avatar (community-avatar community) + :community-name (:name community)}}) + + {:content-type constants/content-type-text + :data "Todo: Implement"})) + {:new-notifications? (pos? (:unviewed-messages-count chat)) + :notification-indicator (if (pos? (:unviewed-mentions-count chat)) + :counter + :unread-dot) + :counter-label (:unviewed-mentions-count chat)}))) (defn one-to-one-chat-card - [contact names chat id] + [contact names chat id communities] (let [images (:images contact) profile-picture (:uri (or (:thumbnail images) (:large images) (first images)))] {:title (first names) @@ -25,26 +71,20 @@ :customization-color (or (:customization-color contact) :primary) :on-close #(re-frame/dispatch [:shell/close-switcher-card id]) :on-press #(re-frame/dispatch [:chat.ui/navigate-to-chat-nav2 id true]) - :content (get-card-content chat)})) + :content (get-card-content chat communities)})) (defn private-group-chat-card - [chat id] + [chat id communities] {:title (:chat-name chat) :avatar-params {} :customization-color (or (:customization-color chat) :primary) :on-close #(re-frame/dispatch [:shell/close-switcher-card id]) :on-press #(re-frame/dispatch [:chat.ui/navigate-to-chat-nav2 id true]) - :content (get-card-content chat)}) + :content (get-card-content chat communities)}) (defn community-card - [community id content] - (let [images (:images community) - profile-picture (if (= id status-constants/status-community-id) - (resources/get-image :status-logo) - (when images - {:uri (:uri (or (:thumbnail images) - (:large images) - (first images)))}))] + [community id] + (let [profile-picture (community-avatar community)] {:title (:name community) :avatar-params (if profile-picture {:source profile-picture} @@ -53,15 +93,15 @@ :on-close #(re-frame/dispatch [:shell/close-switcher-card id]) :on-press #(re-frame/dispatch [:navigate-to-nav2 :community {:community-id id} true]) - :content (or content - {:content-type :community-info - :data {:type :permission}})})) + :content {:community-info {:type :permission}}})) (defn community-channel-card - [community community-id _ channel-id content] + [community community-id channel channel-id] (merge - (community-card community community-id content) - {:on-press (fn [] + (community-card community community-id) + {:content {:community-channel {:emoji (:emoji channel) + :channel-name (str "# " (:name channel))}} + :on-press (fn [] (re-frame/dispatch [:navigate-to :community {:community-id community-id}]) (js/setTimeout #(re-frame/dispatch [:chat.ui/navigate-to-chat-nav2 channel-id true]) @@ -78,28 +118,32 @@ (fn [[_ id] _] [(re-frame/subscribe [:contacts/contact-by-identity id]) (re-frame/subscribe [:contacts/contact-two-names-by-identity id]) - (re-frame/subscribe [:chats/chat id])]) - (fn [[contact names chat] [_ id]] - (one-to-one-chat-card contact names chat id))) + (re-frame/subscribe [:chats/chat id]) + (re-frame/subscribe [:communities])]) + (fn [[contact names chat communities] [_ id]] + (one-to-one-chat-card contact names chat id communities))) (re-frame/reg-sub :shell/private-group-chat-card (fn [[_ id] _] - [(re-frame/subscribe [:chats/chat id])]) - (fn [[chat] [_ id]] - (private-group-chat-card chat id))) + [(re-frame/subscribe [:chats/chat id]) + (re-frame/subscribe [:communities])]) + (fn [[chat communities] [_ id]] + (private-group-chat-card chat id communities))) (re-frame/reg-sub :shell/community-card (fn [[_ id] _] [(re-frame/subscribe [:communities/community id])]) (fn [[community] [_ id]] - (community-card community id nil))) + (community-card community id))) (re-frame/reg-sub :shell/community-channel-card - (fn [[_ community-id channel-id _] _] - [(re-frame/subscribe [:communities/community community-id]) - (re-frame/subscribe [:chats/chat channel-id])]) - (fn [[community channel] [_ community-id channel-id content]] - (community-channel-card community community-id channel channel-id content))) + (fn [[_ channel-id] _] + [(re-frame/subscribe [:chats/chat channel-id]) + (re-frame/subscribe [:communities])]) + (fn [[channel communities] [_ channel-id]] + (let [community-id (:community-id channel) + community (get communities (:community-id channel))] + (community-channel-card community community-id channel channel-id)))) diff --git a/src/utils/datetime.cljs b/src/utils/datetime.cljs index 58c9f8c89c..054c5c6833 100644 --- a/src/utils/datetime.cljs +++ b/src/utils/datetime.cljs @@ -1,6 +1,7 @@ (ns utils.datetime (:require [cljs-time.coerce :as t.coerce] [cljs-time.core :as t] + [goog.string :as gstring] [cljs-time.format :as t.format] [clojure.string :as string] [i18n.i18n :as i18n] @@ -250,3 +251,9 @@ (defn to-ms [sec] (* 1000 sec)) + +(defn ms-to-duration + "milisecods to mm:ss format" + [ms] + (let [sec (quot ms 1000)] + (gstring/format "%02d:%02d" (quot sec 60) (mod sec 60)))) diff --git a/translations/en.json b/translations/en.json index aa3d98e4d4..cf4cb21b9a 100644 --- a/translations/en.json +++ b/translations/en.json @@ -1470,6 +1470,7 @@ "system": "System", "give-permissions-camera": "Give permission\nto access camera", "photos": "Photos", + "one-photo": "1 photo", "n-photos": "{{count}} photos", "image": "Image", "sign-anyway": "Sign anyway", @@ -1832,7 +1833,6 @@ "new-messages-header": "New Messages", "link-to-community": "Link to community", "external-link": "External link", - "code-snippet": "Code snippet", "kicked": "Kicked", "delete-for-everyone": "Delete for everyone", "pin-to-chat": "Pin to the chat",