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

Improve switcher last content (#14626)

This commit is contained in:
Parvesh Monu 2023-01-04 03:32:51 +05:30 committed by GitHub
parent 697aa1c394
commit 63ace4da76
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 360 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
resources/images/mock/coinbase@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

54
src/quo2/components/tags/context_tags.cljs
View File

@ -6,12 +6,6 @@
[quo2.theme :as quo2.theme] [quo2.theme :as quo2.theme]
[react-native.core :as rn])) [react-native.core :as rn]))
(defn padding-left-for-type
[type]
(case type
:group-avatar 3
8))
(defn trim-public-key (defn trim-public-key
[pk] [pk]
(str (subs pk 0 6) "..." (subs pk (- (count pk) 3)))) (str (subs pk 0 6) "..." (subs pk (- (count pk) 3))))
@ -30,7 +24,7 @@
:padding-left 8 :padding-left 8
:background-color (if (= theme :light) :background-color (if (= theme :light)
colors/neutral-10 colors/neutral-10
colors/neutral-80)} colors/neutral-90)}
style)] style)]
children)))) children))))
@ -40,7 +34,8 @@
[base-tag [base-tag
(-> opts (-> opts
(select-keys [:override-theme :style]) (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] [group-avatar/group-avatar opts]
[text/text [text/text
{:weight :medium {:weight :medium
@ -69,7 +64,7 @@
[rn/image [rn/image
{:style {:width 20 {:style {:width 20
:border-radius 10 :border-radius 10
:background-color :white :background-color :red
:height 20} :height 20}
:source photo}] :source photo}]
[rn/view [rn/view
@ -88,3 +83,44 @@
[] []
(fn [params username photo] (fn [params username photo]
[context-tag params {:uri photo} username])) [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])

2
src/quo2/core.cljs
View File

@ -75,6 +75,8 @@
(def user-avatar-tag quo2.components.tags.context-tags/user-avatar-tag) (def user-avatar-tag quo2.components.tags.context-tags/user-avatar-tag)
(def context-tag quo2.components.tags.context-tags/context-tag) (def context-tag quo2.components.tags.context-tags/context-tag)
(def group-avatar-tag quo2.components.tags.context-tags/group-avatar-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 tabs quo2.components.tabs.tabs/tabs)
(def scrollable-tabs quo2.components.tabs.tabs/scrollable-tabs) (def scrollable-tabs quo2.components.tabs.tabs/scrollable-tabs)
(def account-selector quo2.components.tabs.account-selector/account-selector) (def account-selector quo2.components.tabs.account-selector/account-selector)

3
src/status_im/react_native/resources.cljs
View File

@ -63,7 +63,8 @@
:sticker (js/require "../resources/images/mock/sticker.png") :sticker (js/require "../resources/images/mock/sticker.png")
:user-picture-female2 (js/require "../resources/images/mock/user_picture_female2.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-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 (defn get-theme-image
[k] [k]

2
src/status_im2/common/constants.cljs
View File

@ -13,6 +13,8 @@
(def ^:const content-type-community 9) (def ^:const content-type-community 9)
(def ^:const content-type-gap 10) (def ^:const content-type-gap 10)
(def ^:const content-type-contact-request 11) ;; TODO: temp, will be removed (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-none 0)
(def ^:const contact-request-state-mutual 1) (def ^:const contact-request-state-mutual 1)

4
src/status_im2/contexts/chat/messages/list/view.cljs
View File

@ -179,7 +179,9 @@
:on-layout on-messages-view-layout})] :on-layout on-messages-view-layout})]
[quo/floating-shell-button [quo/floating-shell-button
(merge {:jump-to (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)}} :label (i18n/label :t/jump-to)}}
(when @show-floating-scroll-down-button (when @show-floating-scroll-down-button
{:scroll-to-bottom {:on-press scroll-to-bottom}})) {:scroll-to-bottom {:on-press scroll-to-bottom}}))

72
src/status_im2/contexts/quo_preview/switcher/switcher_cards.cljs
View File

@ -2,6 +2,7 @@
(:require [quo2.foundations.colors :as colors] (:require [quo2.foundations.colors :as colors]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.common.constants :as constants]
[status-im.react-native.resources :as resources] [status-im.react-native.resources :as resources]
[status-im2.contexts.quo-preview.preview :as preview] [status-im2.contexts.quo-preview.preview :as preview]
[status-im2.contexts.shell.cards.view :as switcher-cards] [status-im2.contexts.shell.cards.view :as switcher-cards]
@ -19,6 +20,8 @@
:value "Group Messaging"} :value "Group Messaging"}
{:key shell.constants/community-card {:key shell.constants/community-card
:value "Community Card"} :value "Community Card"}
{:key shell.constants/community-channel-card
:value "Community Channel Card"}
{:key shell.constants/browser-card {:key shell.constants/browser-card
:value "Browser Card"} :value "Browser Card"}
{:key shell.constants/wallet-card {:key shell.constants/wallet-card
@ -51,26 +54,20 @@
{:label "Content Type" {:label "Content Type"
:key :content-type :key :content-type
:type :select :type :select
:options [{:key :text :options [{:key constants/content-type-text
:value :text} :value :text}
{:key :photo {:key constants/content-type-image
:value :photo} :value :photo}
{:key :sticker {:key constants/content-type-sticker
:value :sticker} :value :sticker}
{:key :gif {:key constants/content-type-gif
:value :gif} :value :gif}
{:key :audio {:key constants/content-type-audio
:value :audio} :value :audio}
{:key :community {:key constants/content-type-community
:value :community} :value :community}
{:key :link {:key constants/content-type-link
:value :link} :value :link}]}
{:key :code
:value :code}
{:key :channel
:value :channel}
{:key :community-info
:value :community-info}]}
{:label "Last Message" {:label "Last Message"
:key :last-message :key :last-message
:type :text} :type :text}
@ -90,6 +87,7 @@
(def sticker {:source (resources/get-mock-image :sticker)}) (def sticker {:source (resources/get-mock-image :sticker)})
(def community-avatar {:source (resources/get-mock-image :community-logo)}) (def community-avatar {:source (resources/get-mock-image :community-logo)})
(def gif {:source (resources/get-mock-image :gif)}) (def gif {:source (resources/get-mock-image :gif)})
(def coinbase-community (resources/get-mock-image :coinbase))
(def photos-list (def photos-list
[{:source (resources/get-mock-image :photo1)} [{:source (resources/get-mock-image :photo1)}
@ -102,13 +100,27 @@
(defn get-mock-content (defn get-mock-content
[data] [data]
(case (:content-type data) (case (:content-type data)
:text (:last-message data) constants/content-type-text
:photo photos-list (:last-message data)
:sticker sticker
:gif gif constants/content-type-image
:channel {:emoji "🍑" :channel-name "# random"} photos-list
:community-info {:type :kicked}
(:audio :community :link :code) nil)) 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 (defn get-mock-data
[{:keys [type] :as data}] [{:keys [type] :as data}]
@ -120,11 +132,19 @@
:notification-indicator (:notification-indicator data) :notification-indicator (:notification-indicator data)
:counter-label (:counter-label data) :counter-label (:counter-label data)
:content-type (:content-type data) :content-type (:content-type data)
:community-channel {:emoji "🍑" :channel-name "# random"}
:community-info {:type :kicked}
:data (get-mock-content data)}} :data (get-mock-content data)}}
(case type (case type
shell.constants/one-to-one-chat-card {:avatar-params {:full-name (:title data)}} shell.constants/one-to-one-chat-card
shell.constants/private-group-chat-card {} {:avatar-params {:full-name (:title data)}}
shell.constants/community-card {:avatar-params community-avatar}
shell.constants/private-group-chat-card
{}
(shell.constants/community-card
shell.constants/community-channel-card)
{:avatar-params community-avatar}
{}))) {})))
(defn cool-preview (defn cool-preview
@ -136,7 +156,7 @@
:banner? false :banner? false
:notification-indicator :counter :notification-indicator :counter
:counter-label 2 :counter-label 2
:content-type :text :content-type constants/content-type-text
:last-message "This is fantastic! Ethereum" :last-message "This is fantastic! Ethereum"
:preview-label-color colors/white})] :preview-label-color colors/white})]
(fn [] (fn []
@ -151,7 +171,7 @@
(defn preview-switcher-cards (defn preview-switcher-cards
[] []
[rn/view [rn/view
{:background-color colors/neutral-100 {:background-color (colors/theme-colors colors/white colors/neutral-90)
:flex 1} :flex 1}
[rn/flat-list [rn/flat-list
{:flex 1 {:flex 1

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

@ -3,6 +3,7 @@
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[react-native.core :as rn] [react-native.core :as rn]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im.react-native.resources :as resources]
[status-im.multiaccounts.core :as multiaccounts] [status-im.multiaccounts.core :as multiaccounts]
[status-im2.contexts.quo-preview.preview :as preview])) [status-im2.contexts.quo-preview.preview :as preview]))
@ -19,6 +20,8 @@
(def example-photo2 (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=") "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 (def main-descriptor
[{:label "Type" [{:label "Type"
:key :type :key :type
@ -30,7 +33,11 @@
{:key :group-avatar {:key :group-avatar
:value "Group avatar"} :value "Group avatar"}
{:key :context-tag {:key :context-tag
:value "Context tag"}]}]) :value "Context tag"}
{:key :audio
:value "Audio"}
{:key :community
:value "Community"}]}])
(def context-tag-descriptor (def context-tag-descriptor
[{:label "Label" [{:label "Label"
@ -100,13 +107,17 @@
:public-key :public-key
[quo2/public-key-tag {} example-pk] [quo2/public-key-tag {} example-pk]
:avatar :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 (defn preview-context-tags
[] []
[rn/view [rn/view
{:background-color (colors/theme-colors colors/white {:background-color (colors/theme-colors colors/white
colors/neutral-90) colors/neutral-95)
:flex 1} :flex 1}
[rn/flat-list [rn/flat-list
{:flex 1 {:flex 1

205
src/status_im2/contexts/shell/cards/view.cljs
View File

@ -5,59 +5,85 @@
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.fast-image :as fast-image] [react-native.fast-image :as fast-image]
[status-im2.common.constants :as constants]
[status-im2.contexts.shell.cards.style :as style] [status-im2.contexts.shell.cards.style :as style]
[status-im2.contexts.shell.constants :as shell.constants])) [status-im2.contexts.shell.constants :as shell.constants]))
(defn content-container (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?)} [rn/view {:style (style/content-container new-notifications?)}
;; TODO - Use status-im2.common.shell.constants for content type (case type
(case content-type shell.constants/community-card
:text [quo/text (case (:type community-info)
{:size :paragraph-2 :pending [quo/status-tag
:weight :regular {:status {:type :pending}
:number-of-lines 1 :label (i18n/label :t/pending)
:ellipsize-mode :tail :size :small
:style style/last-message-text} :override-theme :dark}]
data] :kicked [quo/status-tag
:photo [quo/preview-list {:status {:type :negative}
{:type :photo :size :small
:more-than-99-label (i18n/label :counter-99-plus) :override-theme :dark
:size 24 :label (i18n/label :t/kicked)}]
:override-theme :dark} data] (:count :permission) [:<>]) ;; Add components for these cases
:sticker [fast-image/fast-image
{:source (:source data) shell.constants/community-channel-card
:style style/sticker}] [rn/view
:gif [fast-image/fast-image {:style {:flex-direction :row
{:source (:source data) :align-items :center}}
:style style/gif}] [quo/channel-avatar
:channel [rn/view {:emoji (:emoji community-channel)
{:style {:flex-direction :row :emoji-background-color (colors/alpha color-50 0.1)}]
:align-items :center}} [quo/text
[quo/channel-avatar {:size :paragraph-2
{:emoji (:emoji data) :weight :medium
:emoji-background-color (colors/alpha color-50 0.1)}] :number-of-lines 1
[quo/text :ellipsize-mode :tail
{:size :paragraph-2 :style style/community-channel}
:weight :medium (:channel-name community-channel)]]
:number-of-lines 1
:ellipsize-mode :tail (case content-type
:style style/community-channel} constants/content-type-text
(:channel-name data)]] [quo/text
:community-info (case (:type data) {:size :paragraph-2
:pending [quo/status-tag :weight :regular
{:status {:type :pending} :number-of-lines 1
:label (i18n/label :t/pending) :ellipsize-mode :tail
:size :small :style style/last-message-text}
:override-theme :dark}] data]
:kicked [quo/status-tag
{:status {:type :negative} constants/content-type-image
:size :small [quo/preview-list
:override-theme :dark {:type :photo
:label (i18n/label :t/kicked)}] :more-than-99-label (i18n/label :counter-99-plus)
(:count :permission) [:<>]) ;; Add components for these cases :size 24
(:audio :community :link :code) ;; Components not available :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 (defn notification-container
[{:keys [notification-indicator counter-label color-60]}] [{:keys [notification-indicator counter-label color-60]}]
@ -70,9 +96,9 @@
[rn/view {:style (style/unread-dot color-60)}])]) [rn/view {:style (style/unread-dot color-60)}])])
(defn bottom-container (defn bottom-container
[{:keys [new-notifications?] :as content}] [type {:keys [new-notifications?] :as content}]
[:<> [:<>
[content-container content] [content-container type content]
(when new-notifications? (when new-notifications?
[notification-container content])]) [notification-container content])])
@ -92,7 +118,8 @@
:size :large :size :large
:override-theme :dark}] :override-theme :dark}]
shell.constants/community-card (shell.constants/community-card
shell.constants/community-channel-card)
(if (:source avatar-params) (if (:source avatar-params)
[fast-image/fast-image [fast-image/fast-image
{:source (:source avatar-params) {:source (:source avatar-params)
@ -106,19 +133,41 @@
(string/upper-case (first (:name avatar-params)))]]))) (string/upper-case (first (:name avatar-params)))]])))
(defn subtitle (defn subtitle
[{:keys [content-type data]}] [type {:keys [content-type data]}]
(case content-type (case type
:text (i18n/label :t/message) shell.constants/community-card
:photo (i18n/label :t/n-photos {:count (count data)}) (i18n/label :t/community)
:sticker (i18n/label :t/sticker)
:gif (i18n/label :t/gif) shell.constants/community-channel-card
:audio (i18n/label :t/audio-message) (i18n/label :t/community-channel)
:community (i18n/label :t/link-to-community)
:link (i18n/label :t/external-link) (case content-type
:code (i18n/label :t/code-snippet) constants/content-type-text
:channel (i18n/label :t/community-channel) (i18n/label :t/message)
:community-info (i18n/label :t/community)
(i18n/label :t/community))) 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 ;; Screens Card
(defn screens-card (defn screens-card
@ -144,8 +193,8 @@
{:size :paragraph-2 {:size :paragraph-2
:weight :medium :weight :medium
:style style/subtitle} :style style/subtitle}
(subtitle content)] (subtitle type content)]
[bottom-container (merge {:color-50 color-50 :color-60 color-60} content)]] [bottom-container type (merge {:color-50 color-50 :color-60 color-60} content)]]
(when avatar-params (when avatar-params
[rn/view {:style style/avatar-container} [rn/view {:style style/avatar-container}
[avatar avatar-params type customization-color]]) [avatar avatar-params type customization-color]])
@ -188,30 +237,26 @@
(defn card (defn card
[{:keys [type] :as data}] [{:keys [type] :as data}]
(case type (case type
shell.constants/empty-card ;; Placeholder
shell.constants/empty-card ;; Placeholder
[empty-card] [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] [screens-card data]
shell.constants/private-group-chat-card ;; Screens Card shell.constants/browser-card ;; Browser Card
[screens-card data]
shell.constants/community-card ;; Screens Card
[screens-card data]
shell.constants/browser-card ;; Browser Card
[browser-card data] [browser-card data]
shell.constants/wallet-card ;; Wallet Card shell.constants/wallet-card ;; Wallet Card
[wallet-card data] [wallet-card data]
shell.constants/wallet-collectible ;; Wallet Card shell.constants/wallet-collectible ;; Wallet Card
[wallet-collectible data] [wallet-collectible data]
shell.constants/wallet-graph ;; Wallet Card shell.constants/wallet-graph ;; Wallet Card
[wallet-graph data] [wallet-graph data]
shell.constants/communities-discover ;; Home Card shell.constants/communities-discover ;; Home Card
[communities-discover data])) [communities-discover data]))

11
src/status_im2/contexts/shell/constants.cljs
View File

@ -60,8 +60,9 @@
(def ^:const one-to-one-chat-card 1) (def ^:const one-to-one-chat-card 1)
(def ^:const private-group-chat-card 2) (def ^:const private-group-chat-card 2)
(def ^:const community-card 3) (def ^:const community-card 3)
(def ^:const browser-card 4) (def ^:const community-channel-card 4)
(def ^:const wallet-card 5) (def ^:const browser-card 5)
(def ^:const wallet-collectible 6) (def ^:const wallet-card 6)
(def ^:const wallet-graph 7) (def ^:const wallet-collectible 7)
(def ^:const communities-discover 8) (def ^:const wallet-graph 8)
(def ^:const communities-discover 9)

27
src/status_im2/contexts/shell/events.cljs
View File

@ -1,10 +1,10 @@
(ns status-im2.contexts.shell.events (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.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] [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 ;; Effects
@ -59,14 +59,10 @@
:db (assoc-in :db (assoc-in
db db
[:shell/switcher-cards (:community-id chat)] [:shell/switcher-cards (:community-id chat)]
{:type shell.constants/community-card {:type shell.constants/community-channel-card
:id (:community-id chat) :id (:community-id chat)
:clock now :clock now
:content {:content-type :channel :channel-id (:chat-id chat)})}
:data {:emoji (:emoji chat)
:channel-id (:chat-id chat)
:channel-name (:chat-name
chat)}}})}
nil)) nil))
@ -75,9 +71,10 @@
:db (assoc-in :db (assoc-in
db db
[:shell/switcher-cards (:community-id id)] [:shell/switcher-cards (:community-id id)]
{:type shell.constants/community-card {:type shell.constants/community-card
:id (:community-id id) :id (:community-id id)
:clock now})} :clock now
:channel-id nil})}
nil)) nil))

10
src/status_im2/contexts/shell/style.cljs
View File

@ -51,9 +51,13 @@
:accessibility-label :shell-placeholder-view}) :accessibility-label :shell-placeholder-view})
(def placeholder-image (def placeholder-image
{:margin-top 186 {:margin-top 186
:width 120 :width 120
:height 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 (def placeholder-title
{:margin-top 20 {:margin-top 20

11
src/status_im2/contexts/shell/view.cljs
View File

@ -47,7 +47,7 @@
(i18n/label :t/jump-to)]) (i18n/label :t/jump-to)])
(defn render-card (defn render-card
[{:keys [id type content] :as card}] [{:keys [id type channel-id] :as card}]
(let [card-data (case type (let [card-data (case type
shell.constants/one-to-one-chat-card shell.constants/one-to-one-chat-card
(rf/sub [:shell/one-to-one-chat-card id]) (rf/sub [:shell/one-to-one-chat-card id])
@ -56,11 +56,10 @@
(rf/sub [:shell/private-group-chat-card id]) (rf/sub [:shell/private-group-chat-card id])
shell.constants/community-card shell.constants/community-card
(if content (rf/sub [:shell/community-card id])
(rf/sub [:shell/community-channel-card
id (get-in content [:data :channel-id]) shell.constants/community-channel-card
content]) (rf/sub [:shell/community-channel-card channel-id])
(rf/sub [:shell/community-card id]))
nil)] nil)]
[switcher-cards/card (merge card card-data)])) [switcher-cards/card (merge card card-data)]))

122
src/status_im2/subs/shell.cljs
View File

@ -1,21 +1,67 @@
(ns status-im2.subs.shell (ns status-im2.subs.shell
(:require [re-frame.core :as re-frame] (:require [re-frame.core :as re-frame]
[status-im.react-native.resources :as resources] [utils.datetime :as datetime]
[status-im2.common.constants :as status-constants])) [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 (defn get-card-content
[chat] [chat communities]
(let [last-message (:last-message chat)] (let [last-message (:last-message chat)]
(case (:content-type last-message) (merge
status-constants/content-type-text (when last-message
{:content-type :text (case (:content-type last-message)
:data (get-in last-message [:content :text])} (constants/content-type-text
constants/content-type-emoji)
{:content-type constants/content-type-text
:data (get-in last-message [:content :text])}
{:content-type :text ;; Currently mock image is used as placeholder,
:data "Todo: Implement"}))) ;; 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 (defn one-to-one-chat-card
[contact names chat id] [contact names chat id communities]
(let [images (:images contact) (let [images (:images contact)
profile-picture (:uri (or (:thumbnail images) (:large images) (first images)))] profile-picture (:uri (or (:thumbnail images) (:large images) (first images)))]
{:title (first names) {:title (first names)
@ -25,26 +71,20 @@
:customization-color (or (:customization-color contact) :primary) :customization-color (or (:customization-color contact) :primary)
:on-close #(re-frame/dispatch [:shell/close-switcher-card id]) :on-close #(re-frame/dispatch [:shell/close-switcher-card id])
:on-press #(re-frame/dispatch [:chat.ui/navigate-to-chat-nav2 id true]) :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 (defn private-group-chat-card
[chat id] [chat id communities]
{:title (:chat-name chat) {:title (:chat-name chat)
:avatar-params {} :avatar-params {}
:customization-color (or (:customization-color chat) :primary) :customization-color (or (:customization-color chat) :primary)
:on-close #(re-frame/dispatch [:shell/close-switcher-card id]) :on-close #(re-frame/dispatch [:shell/close-switcher-card id])
:on-press #(re-frame/dispatch [:chat.ui/navigate-to-chat-nav2 id true]) :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 (defn community-card
[community id content] [community id]
(let [images (:images community) (let [profile-picture (community-avatar 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)))}))]
{:title (:name community) {:title (:name community)
:avatar-params (if profile-picture :avatar-params (if profile-picture
{:source profile-picture} {:source profile-picture}
@ -53,15 +93,15 @@
:on-close #(re-frame/dispatch [:shell/close-switcher-card id]) :on-close #(re-frame/dispatch [:shell/close-switcher-card id])
:on-press #(re-frame/dispatch [:navigate-to-nav2 :community :on-press #(re-frame/dispatch [:navigate-to-nav2 :community
{:community-id id} true]) {:community-id id} true])
:content (or content :content {:community-info {:type :permission}}}))
{:content-type :community-info
:data {:type :permission}})}))
(defn community-channel-card (defn community-channel-card
[community community-id _ channel-id content] [community community-id channel channel-id]
(merge (merge
(community-card community community-id content) (community-card community community-id)
{:on-press (fn [] {:content {:community-channel {:emoji (:emoji channel)
:channel-name (str "# " (:name channel))}}
:on-press (fn []
(re-frame/dispatch [:navigate-to :community {:community-id community-id}]) (re-frame/dispatch [:navigate-to :community {:community-id community-id}])
(js/setTimeout (js/setTimeout
#(re-frame/dispatch [:chat.ui/navigate-to-chat-nav2 channel-id true]) #(re-frame/dispatch [:chat.ui/navigate-to-chat-nav2 channel-id true])
@ -78,28 +118,32 @@
(fn [[_ id] _] (fn [[_ id] _]
[(re-frame/subscribe [:contacts/contact-by-identity id]) [(re-frame/subscribe [:contacts/contact-by-identity id])
(re-frame/subscribe [:contacts/contact-two-names-by-identity id]) (re-frame/subscribe [:contacts/contact-two-names-by-identity id])
(re-frame/subscribe [:chats/chat id])]) (re-frame/subscribe [:chats/chat id])
(fn [[contact names chat] [_ id]] (re-frame/subscribe [:communities])])
(one-to-one-chat-card contact names chat id))) (fn [[contact names chat communities] [_ id]]
(one-to-one-chat-card contact names chat id communities)))
(re-frame/reg-sub (re-frame/reg-sub
:shell/private-group-chat-card :shell/private-group-chat-card
(fn [[_ id] _] (fn [[_ id] _]
[(re-frame/subscribe [:chats/chat id])]) [(re-frame/subscribe [:chats/chat id])
(fn [[chat] [_ id]] (re-frame/subscribe [:communities])])
(private-group-chat-card chat id))) (fn [[chat communities] [_ id]]
(private-group-chat-card chat id communities)))
(re-frame/reg-sub (re-frame/reg-sub
:shell/community-card :shell/community-card
(fn [[_ id] _] (fn [[_ id] _]
[(re-frame/subscribe [:communities/community id])]) [(re-frame/subscribe [:communities/community id])])
(fn [[community] [_ id]] (fn [[community] [_ id]]
(community-card community id nil))) (community-card community id)))
(re-frame/reg-sub (re-frame/reg-sub
:shell/community-channel-card :shell/community-channel-card
(fn [[_ community-id channel-id _] _] (fn [[_ channel-id] _]
[(re-frame/subscribe [:communities/community community-id]) [(re-frame/subscribe [:chats/chat channel-id])
(re-frame/subscribe [:chats/chat channel-id])]) (re-frame/subscribe [:communities])])
(fn [[community channel] [_ community-id channel-id content]] (fn [[channel communities] [_ channel-id]]
(community-channel-card community community-id channel channel-id content))) (let [community-id (:community-id channel)
community (get communities (:community-id channel))]
(community-channel-card community community-id channel channel-id))))

7
src/utils/datetime.cljs
View File

@ -1,6 +1,7 @@
(ns utils.datetime (ns utils.datetime
(:require [cljs-time.coerce :as t.coerce] (:require [cljs-time.coerce :as t.coerce]
[cljs-time.core :as t] [cljs-time.core :as t]
[goog.string :as gstring]
[cljs-time.format :as t.format] [cljs-time.format :as t.format]
[clojure.string :as string] [clojure.string :as string]
[i18n.i18n :as i18n] [i18n.i18n :as i18n]
@ -250,3 +251,9 @@
(defn to-ms (defn to-ms
[sec] [sec]
(* 1000 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))))

2
translations/en.json
View File

@ -1470,6 +1470,7 @@
"system": "System", "system": "System",
"give-permissions-camera": "Give permission\nto access camera", "give-permissions-camera": "Give permission\nto access camera",
"photos": "Photos", "photos": "Photos",
"one-photo": "1 photo",
"n-photos": "{{count}} photos", "n-photos": "{{count}} photos",
"image": "Image", "image": "Image",
"sign-anyway": "Sign anyway", "sign-anyway": "Sign anyway",
@ -1832,7 +1833,6 @@
"new-messages-header": "New Messages", "new-messages-header": "New Messages",
"link-to-community": "Link to community", "link-to-community": "Link to community",
"external-link": "External link", "external-link": "External link",
"code-snippet": "Code snippet",
"kicked": "Kicked", "kicked": "Kicked",
"delete-for-everyone": "Delete for everyone", "delete-for-everyone": "Delete for everyone",
"pin-to-chat": "Pin to the chat", "pin-to-chat": "Pin to the chat",