Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update "Preview List" component to use "Number Tag" for overflow item #17257

Merged
merged 6 commits into from
Sep 25, 2023
Merged

Update "Preview List" component to use "Number Tag" for overflow item #17257

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c234a57
Update Preview List component to use Number Tag
smohamedjavid Sep 12, 2023
2fc587d
Update source check
smohamedjavid Sep 12, 2023
050caa9
Update size API for preview-list and number-tag component
smohamedjavid Sep 14, 2023
a53d347
Clean NS
smohamedjavid Sep 14, 2023
f2c547d
[Fix] Blur in context tags preview
smohamedjavid Sep 25, 2023
6c59263
[Fix] customization color in context tag
smohamedjavid Sep 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 20 additions & 76 deletions src/quo2/components/list_items/preview_list/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,67 +1,13 @@
(ns quo2.components.list-items.preview-list.view
(:require [quo2.components.avatars.account-avatar.view :as account-avatar]
[quo2.components.avatars.user-avatar.view :as user-avatar]
[quo2.components.icon :as quo2.icons]
[quo2.components.markdown.text :as quo2.text]
[quo2.foundations.colors :as colors]
[quo2.theme :as quo.theme]
[quo2.components.list-items.preview-list.properties :as properties]
[quo2.components.tags.number-tag.view :as number-tag]
[quo2.theme :as quo.theme]
[react-native.core :as rn]
[react-native.fast-image :as fast-image]
[react-native.hole-view :as hole-view]))

;; This overflow item needs to be cleaned up once the "number tag" component is implemented
smohamedjavid marked this conversation as resolved.
Show resolved Hide resolved
;; https://github.com/status-im/status-mobile/issues/17045
(defn get-overflow-color
[blur? blur-light-color blur-dark-color light-color dark-color theme]
(if blur?
(colors/theme-colors blur-light-color blur-dark-color theme)
(colors/theme-colors light-color dark-color theme)))

(def more-icon-for-sizes #{16 14})

(defn overflow-label
[{:keys [label size blur? border-radius margin-left theme more-than-99-label]}]
[rn/view
{:style {:width size
:height size
:margin-left margin-left
:border-radius border-radius
:justify-content :center
:align-items :center
:background-color (get-overflow-color
blur?
colors/neutral-80-opa-5
colors/white-opa-5
colors/neutral-20
colors/neutral-90
theme)}}
(if (more-icon-for-sizes size)
[quo2.icons/icon :i/more
{:size 12
:color (get-overflow-color
blur?
colors/neutral-80-opa-70
colors/white-opa-70
colors/neutral-50
colors/neutral-40
theme)}]
[quo2.text/text
{:size (if (= size 32) :paragraph-2 :label)
:weight :medium
:style {:color (get-overflow-color
blur?
colors/neutral-80-opa-70
colors/white-opa-70
colors/neutral-50
colors/neutral-40
theme)
:margin-left -2}}
;; If overflow label is below 100, show label as +label (ex. +30), else just show 99+
(if (< label 100)
(str "+" label)
more-than-99-label)])])

(defn- preview-item
[{:keys [item type size-key]}]
(let [size (get-in properties/sizes [size-key :size])
Expand All @@ -70,22 +16,22 @@
[size-key :border-radius (properties/border-type type)])]
(case type
:user [user-avatar/user-avatar
(merge {:ring? false
:status-indicator? false
:size user-avatar-size}
item)]
(assoc item
:ring? false
:status-indicator? false
:size user-avatar-size)]

:accounts [account-avatar/view
(merge item {:size size})]
(assoc item :size size)]

(:communities :collectibles) [fast-image/fast-image
{:source (:source item)
{:source (or (:source item) item)
:style {:width size
:height size
:border-radius border-radius}}]

(:tokens :network :dapps) [fast-image/fast-image
{:source (:source item)
{:source (or (:source item) item)
Comment on lines -82 to +34
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess item can be a map and at the same time it can be a value (i guess a string). but this is not safe to do, I'd suggest to just be one type of thing.

The problem is we could get an exception while trying to extract a key from a string if we attempt: (:source "hey")

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, @ulisesmac. The item can be a map or number (for local resources) or string (for URL).

The problem is we could get an exception while trying to extract a key from a string if we attempt: (:source "hey")

We won't get any exceptions. The form (:source "hey") will produce nil. And since we use the or method, it will fall back to item.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, ok, it seems Clojurescript is pretty flexible sometimes.

Thanks!

:style {:width size
:height size
:border-radius border-radius}}]
Expand Down Expand Up @@ -123,11 +69,11 @@
:blur? overflow-label blur?}
items preview list items (only 4 items is required for preview)
"
[{:keys [type size number blur? theme more-than-99-label]} items]
(let [size-key (if (contains? properties/sizes size) size :size-24)
number (or number (count items))
margin-left (get-in properties/sizes [size-key :margin-left])
border-radius (get-in properties/sizes [size-key :border-radius (properties/border-type type)])]
[{:keys [type size number blur?]} items]
(let [size-key (if (contains? properties/sizes size) size :size-24)
number (or number (count items))
border-type (properties/border-type type)
margin-left (get-in properties/sizes [size-key :margin-left])]
[rn/view {:style {:flex-direction :row}}
(for [index (range (if (> number 4) 3 number))]
^{:key (str index number)}
Expand All @@ -138,13 +84,11 @@
:item (get (vec items) index)
:number number}])
(when (> number 4)
[overflow-label
{:label (- number 3)
:size (get-in properties/sizes [size-key :size])
:blur? blur?
:border-radius border-radius
:margin-left margin-left
:theme theme
:more-than-99-label more-than-99-label}])]))
[number-tag/view
{:type border-type
:number (str (- number 3))
:size size-key
:blur? blur?
:container-style {:margin-left margin-left}}])]))

(def view (quo.theme/with-theme view-internal))
3 changes: 2 additions & 1 deletion src/quo2/components/settings/settings_item/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,8 @@
label-props]
:color [rn/view
{:style (style/label-dot label-props)}]
:preview [preview-list/view {:type (:type label-props)} (:data label-props)]
:preview [preview-list/view {:type (:type label-props) :size :size-24}
(:data label-props)]
nil)])

(defn action-component
Expand Down
17 changes: 9 additions & 8 deletions src/quo2/components/tags/context_tag/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,19 +91,20 @@
:default
[tag-skeleton {:theme theme :size size :text full-name}
[user-avatar/user-avatar
{:full-name full-name
:profile-picture profile-picture
:size (if (= size 24) :xxs 28)
:status-indicator? false
:ring? false}]]
{:full-name full-name
:profile-picture profile-picture
:size (if (= size 24) :xxs 28)
:status-indicator? false
:ring? false
:customization-color customization-color}]]

:multiuser
[preview-list/view {:type :user :size 20}
[preview-list/view {:type :user :size :size-20}
users]

:multinetwork
[preview-list/view {:type :network :size 20}
(map #(hash-map :profile-picture %) networks)]
[preview-list/view {:type :network :size :size-20}
networks]

:audio
[tag-skeleton {:theme theme :text (str duration)}
Expand Down
15 changes: 8 additions & 7 deletions src/quo2/components/tags/number_tag/style.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,10 +55,11 @@
(get-in sizes [size (if widen? :width-extra :size)])))

(defn container
[{:keys [type number size blur? theme]}]
{:style {:width (get-width size number)
:height (get-in sizes [size :size])
:border-radius (get-shape-value size :border-radius type)
:justify-content :center
:align-items :center
:background-color (get-bg-color blur? theme)}})
[{:keys [type number size blur? theme container-style]}]
{:style (assoc container-style
:width (get-width size number)
:height (get-in sizes [size :size])
:border-radius (get-shape-value size :border-radius type)
:justify-content :center
:align-items :center
:background-color (get-bg-color blur? theme))})
4 changes: 2 additions & 2 deletions src/quo2/components/tags/number_tag/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
(ns quo2.components.tags.number-tag.view
(:require [quo2.components.icon :as icons]
[quo2.components.markdown.text :as text]
[react-native.core :as rn]
[quo2.components.tags.number-tag.style :as style]
[quo2.theme :as quo.theme]))
[quo2.theme :as quo.theme]
[react-native.core :as rn]))

(defn view-internal
[{:keys [number size blur? theme] :as props}]
Expand Down
7 changes: 3 additions & 4 deletions src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,10 +104,9 @@

(defn view
[]
(let [state (reagent/atom {:type :accounts
:size :size-32
:number 4
:more-than-99-label "99+"})
smohamedjavid marked this conversation as resolved.
Show resolved Hide resolved
(let [state (reagent/atom {:type :accounts
:size :size-32
:number 4})
type (reagent/cursor state [:type])
blur? (reagent/cursor state [:blur?])]
(fn []
Expand Down
80 changes: 44 additions & 36 deletions src/status_im2/contexts/quo_preview/tags/context_tags.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
(ns status-im2.contexts.quo-preview.tags.context-tags
(:require [quo2.core :as quo]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.common.resources :as resources]
Expand Down Expand Up @@ -69,8 +70,9 @@
:type :select
:options (map (fn [idx]
{:key (mapv (fn [picture idx-name]
{:profile-picture picture
:full-name (str (inc idx-name))})
{:profile-picture picture
:full-name (str (inc idx-name))
:customization-color (rand-nth (keys colors/customization))})
(take idx (cycle users))
(range))
:value (str idx)})
Expand Down Expand Up @@ -175,12 +177,15 @@
:customization-color :army
:profile-picture nil
:full-name "Full Name"
:users [{:profile-picture (resources/mock-images :user-picture-male5)
:full-name "1"}
{:profile-picture nil
:full-name "3"}
{:profile-picture (resources/mock-images :user-picture-male5)
:full-name "2"}]
:users [{:profile-picture (resources/mock-images :user-picture-male5)
:full-name "1"
:customization-color (rand-nth (keys colors/customization))}
{:profile-picture nil
:full-name "3"
:customization-color (rand-nth (keys colors/customization))}
{:profile-picture (resources/mock-images :user-picture-male5)
:full-name "2"
:customization-color (rand-nth (keys colors/customization))}]
:group-name "Group"
:community-logo (resources/mock-images :coinbase)
:community-name "Community"
Expand All @@ -200,31 +205,34 @@
:address example-pk
:icon :i/placeholder
:context "Context"
:duration "00:32"})]
(fn []
[preview/preview-container
{:state state
:descriptor (concat descriptor
(case (:type @state)
:default default-descriptor
:multiuser multiuser-descriptor
:group group-descriptor
:channel channel-descriptor
:community community-descriptor
:token token-descriptor
:network network-descriptor
:multinetwork multinetwork-descriptor
:account account-descriptor
:collectible collectible-descriptor
:address address-descriptor
:icon icon-descriptor
:audio audio-descriptor
default-descriptor))}
[rn/view {:style {:padding-bottom 150}}
[rn/view {:style {:padding-vertical 60}}
[preview/blur-view
{:style {:flex 1
:margin-vertical 20
:margin-horizontal 40}
:show-blur-background? (:blur? @state)}
[quo/context-tag @state]]]]])))
:duration "00:32"})
type (reagent/cursor state [:type])]
[:f>
(fn []
(rn/use-effect (fn []
(when (#{:multiuser :multinetwork :audio} @type)
(swap! state assoc :size 24)))
[@type])
[preview/preview-container
{:state state
:descriptor (concat descriptor
(case (:type @state)
:default default-descriptor
:multiuser multiuser-descriptor
:group group-descriptor
:channel channel-descriptor
:community community-descriptor
:token token-descriptor
:network network-descriptor
:multinetwork multinetwork-descriptor
:account account-descriptor
:collectible collectible-descriptor
:address address-descriptor
:icon icon-descriptor
:audio audio-descriptor
default-descriptor))
:blur-height 80
:blur? true
:show-blur-background? (:blur? @state)}
[rn/view {:style {:align-items :center}}
[quo/context-tag @state]]])]))
5 changes: 2 additions & 3 deletions src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,9 +66,8 @@

constants/content-type-image
[quo/preview-list
{:type :collectibles
:more-than-99-label (i18n/label :counter-99-plus)
:size :size-24}
{:type :collectibles
:size :size-24}
data]

constants/content-type-sticker
Expand Down