Improve switcher last content (#14626)
This commit is contained in:
parent
697aa1c394
commit
63ace4da76
Binary file not shown.
After Width: | Height: | Size: 2.6 KiB |
|
@ -6,12 +6,6 @@
|
|||
[quo2.theme :as quo2.theme]
|
||||
[react-native.core :as rn]))
|
||||
|
||||
(defn padding-left-for-type
|
||||
[type]
|
||||
(case type
|
||||
:group-avatar 3
|
||||
8))
|
||||
|
||||
(defn trim-public-key
|
||||
[pk]
|
||||
(str (subs pk 0 6) "..." (subs pk (- (count pk) 3))))
|
||||
|
@ -30,7 +24,7 @@
|
|||
:padding-left 8
|
||||
:background-color (if (= theme :light)
|
||||
colors/neutral-10
|
||||
colors/neutral-80)}
|
||||
colors/neutral-90)}
|
||||
style)]
|
||||
children))))
|
||||
|
||||
|
@ -40,7 +34,8 @@
|
|||
[base-tag
|
||||
(-> 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])
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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]
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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}}))
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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]))
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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))
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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)]))
|
||||
|
|
|
@ -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))))
|
||||
|
|
|
@ -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))))
|
||||
|
|
|
@ -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",
|
||||
|
|
Loading…
Reference in New Issue