Skip to content

Commit

Permalink
Merge branch 'develop' into 16845
Browse files Browse the repository at this point in the history
  • Loading branch information
@ibrkhalil
ibrkhalil authored Sep 26, 2023
2 parents 6b12ddf + f12c740 commit 09752d1
Show file tree
Hide file tree
Showing 106 changed files with 812 additions and 991 deletions.
6 changes: 6 additions & 0 deletions .github/PULL_REQUEST_TEMPLATE.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,4 +63,10 @@ Documentation change PR (review please): https://github.com/status-im/status.im/

<!-- (PRs will only be accepted if squashed into single commit.) -->

### Before and after screenshots comparison

| Figma (if available) | iOS (if available) | Android (if available)
| --- | --- | --- |
| Please embed Image/Video here of the before and after. | Please embed Image/Video here of the before and after. | Please embed Image/Video here of the before and after. |

status: ready <!-- Can be ready or wip -->
29 changes: 29 additions & 0 deletions src/quo2/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,35 @@ In the image above we can see the properties are `Type`, `State`, `Size`,
...)
```

### Handling Sizes
In the designs, sizes are referred to as integers. To avoid having the codebase littered with magic numbers we instead have a keyword convention to use in components to map these keywords with their sizes.

The convention is `:size-<number>`, e.g size `20` is `:size-20`

```clojure
;; bad
(defn button
[{:keys [size]}]
[rn/view
{:style {:height (case size
20 20
40 40
0)}}]
...)
```

```clojure
;; good
(defn button
[{:keys [size]}]
[rn/view
{:style {:height (case size
:size-20 20
:size-40 40
0)}}]
...)
```

## Clojure var conventions

- Due to the fact that every `view` namespace should export only one component
Expand Down
22 changes: 11 additions & 11 deletions src/quo2/components/avatars/group_avatar/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,21 @@
[quo2.components.avatars.group-avatar.style :as style]))

(def sizes
{:size/s-20 {:icon 12
:container 20}
:size/s-28 {:icon 16
:container 28}
:size/s-32 {:icon 16
:container 32}
:size/s-48 {:icon 20
:container 48}
:size/s-80 {:icon 32
:container 80}})
{:size-20 {:icon 12
:container 20}
:size-28 {:icon 16
:container 28}
:size-32 {:icon 16
:container 32}
:size-48 {:icon 20
:container 48}
:size-80 {:icon 32
:container 80}})

(defn- view-internal
[_]
(fn [{:keys [size theme customization-color picture icon-name]
:or {size :size/s-20
:or {size :size-20
customization-color :blue
picture nil
icon-name :i/group}}]
Expand Down
18 changes: 9 additions & 9 deletions src/quo2/components/avatars/icon_avatar.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,19 @@
[react-native.core :as rn]))

(def ^:private sizes
{:size/s-48 {:component 48
:icon 20}
:size/s-32 {:component 32
:icon 20}
:size/s-24 {:component 24
:icon 16}
:size/s-20 {:component 20
:icon 12}})
{:size-48 {:component 48
:icon 20}
:size-32 {:component 32
:icon 20}
:size-24 {:component 24
:icon 16}
:size-20 {:component 20
:icon 12}})

(defn icon-avatar-internal
[{:keys [size icon color opacity border? theme]
:or {opacity 20
size :size/s-32}}]
size :size-32}}]
(let [{component-size :component icon-size :icon} (get sizes size)
circle-color (colors/custom-color color 50 opacity)
icon-color (colors/custom-color-by-theme color 50 60)]
Expand Down
17 changes: 11 additions & 6 deletions src/quo2/components/buttons/button/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,11 @@
only icon
[button {:icon-only? true} :i/close-circle]"
[_ _]
(let [pressed? (reagent/atom false)]
(let [pressed-state? (reagent/atom false)]
(fn
[{:keys [on-press on-long-press disabled? type background size icon-left icon-right icon-top
customization-color theme accessibility-label icon-only? container-style inner-style]
customization-color theme accessibility-label icon-only? container-style inner-style
pressed? on-press-in on-press-out]
:or {type :primary
size 40
customization-color (cond (= type :primary) :blue
Expand All @@ -46,14 +47,18 @@
:background background
:type type
:theme theme
:pressed? @pressed?
:pressed? (if pressed? pressed? @pressed-state?)
:icon-only? icon-only?})
icon-size (when (= 24 size) 12)]
[rn/touchable-without-feedback
{:disabled disabled?
:accessibility-label accessibility-label
:on-press-in #(reset! pressed? true)
:on-press-out #(reset! pressed? nil)
:on-press-in (fn []
(reset! pressed-state? true)
(when on-press-in (on-press-in)))
:on-press-out (fn []
(reset! pressed-state? nil)
(when on-press-out (on-press-out)))
:on-press on-press
:on-long-press on-long-press}
[rn/view
Expand All @@ -76,7 +81,7 @@
[customization-colors/overlay
{:customization-color customization-color
:theme theme
:pressed? @pressed?}])
:pressed? (if pressed? pressed? @pressed-state?)}])
(when (= background :photo)
[blur/view
{:blur-radius 20
Expand Down
2 changes: 1 addition & 1 deletion src/quo2/components/dropdowns/network_dropdown/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
[preview-list/view
{:type :network
:list-size (count networks)
:size :size/s-20}
:size :size-20}
networks]])))

(def view (quo.theme/with-theme internal-view))
80 changes: 40 additions & 40 deletions src/quo2/components/list_items/preview_list/properties.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,43 +7,43 @@
(if (types-for-squared-border type) :squared :rounded))

(def sizes
{:size/s-32 {:size 32
:user-avatar-size :small
:border-radius {:rounded 16 :squared 10}
:hole-radius {:rounded 18 :squared 12}
:margin-left -8
:hole-size 36
:hole-x 22
:hole-y -2}
:size/s-24 {:size 24
:user-avatar-size :xs
:border-radius {:rounded 12 :squared 8}
:hole-radius {:rounded 13 :squared 9}
:margin-left -4
:hole-size 26
:hole-x 19
:hole-y -1}
:size/s-20 {:size 20
:user-avatar-size :xxs
:border-radius {:rounded 10 :squared 8}
:hole-radius {:rounded 11 :squared 9}
:margin-left -4
:hole-size 22
:hole-x 15
:hole-y -1}
:size/s-16 {:size 16
:user-avatar-size :xxxs
:border-radius {:rounded 8 :squared 8}
:hole-radius {:rounded 9 :squared 9}
:margin-left -4
:hole-size 18
:hole-x 11
:hole-y -1}
:size/s-14 {:size 14
:user-avatar-size :xxxs
:border-radius {:rounded 7 :squared 7}
:hole-radius {:rounded 8 :squared 8}
:margin-left -2
:hole-size 16
:hole-x 11
:hole-y -1}})
{:size-32 {:size 32
:user-avatar-size :small
:border-radius {:rounded 16 :squared 10}
:hole-radius {:rounded 18 :squared 12}
:margin-left -8
:hole-size 36
:hole-x 22
:hole-y -2}
:size-24 {:size 24
:user-avatar-size :xs
:border-radius {:rounded 12 :squared 8}
:hole-radius {:rounded 13 :squared 9}
:margin-left -4
:hole-size 26
:hole-x 19
:hole-y -1}
:size-20 {:size 20
:user-avatar-size :xxs
:border-radius {:rounded 10 :squared 8}
:hole-radius {:rounded 11 :squared 9}
:margin-left -4
:hole-size 22
:hole-x 15
:hole-y -1}
:size-16 {:size 16
:user-avatar-size :xxxs
:border-radius {:rounded 8 :squared 8}
:hole-radius {:rounded 9 :squared 9}
:margin-left -4
:hole-size 18
:hole-x 11
:hole-y -1}
:size-14 {:size 14
:user-avatar-size :xxxs
:border-radius {:rounded 7 :squared 7}
:hole-radius {:rounded 8 :squared 8}
:margin-left -2
:hole-size 16
:hole-x 11
:hole-y -1}})
98 changes: 21 additions & 77 deletions src/quo2/components/list_items/preview_list/view.cljs
View file
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
;; 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)
:style {:width size
:height size
:border-radius border-radius}}]
Expand Down Expand Up @@ -118,16 +64,16 @@
"[preview-list opts items]
opts
{:type :user/:communities/:accounts/:tokens/:collectibles/:dapps/:network
:size :size/s-32 | :size/s-24 | :size/s-20 | :size/s-16 | :size/s-14
:size :size-32 | :size-24 | :size-20 | :size-16 | :size-14
:number number of items in the list (optional)
: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/s-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))
Loading

0 comments on commit 09752d1

Please sign in to comment.