Skip to content

Commit

Permalink
Improve switcher last content (status-im#14626)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Parveshdhull
Parveshdhull authored Jan 3, 2023
1 parent 697aa1c commit 63ace4d
Show file tree
Hide file tree
Showing 16 changed files with 360 additions and 189 deletions.
Binary file added resources/images/mock/[email protected]
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
54 changes: 45 additions & 9 deletions src/quo2/components/tags/context_tags.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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))))
Expand All @@ -30,7 +24,7 @@
:padding-left 8
:background-color (if (= theme :light)
colors/neutral-10
colors/neutral-80)}
colors/neutral-90)}
style)]
children))))

Expand All @@ -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
Expand Down Expand Up @@ -69,7 +64,7 @@
[rn/image
{:style {:width 20
:border-radius 10
:background-color :white
:background-color :red
:height 20}
:source photo}]
[rn/view
Expand All @@ -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])
2 changes: 2 additions & 0 deletions src/quo2/core.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
3 changes: 2 additions & 1 deletion src/status_im/react_native/resources.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand Down
2 changes: 2 additions & 0 deletions src/status_im2/common/constants.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
4 changes: 3 additions & 1 deletion src/status_im2/contexts/chat/messages/list/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}}))
Expand Down
72 changes: 46 additions & 26 deletions src/status_im2/contexts/quo_preview/switcher/switcher_cards.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand All @@ -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
Expand Down Expand Up @@ -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}
Expand All @@ -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)}
Expand All @@ -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}]
Expand All @@ -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
Expand All @@ -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 []
Expand All @@ -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
Expand Down
17 changes: 14 additions & 3 deletions src/status_im2/contexts/quo_preview/tags/context_tags.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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]))

Expand All @@ -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
Expand All @@ -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"
Expand Down Expand Up @@ -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
Expand Down
Loading

0 comments on commit 63ace4d

Please sign in to comment.