New communities redesign (#13607)
* communities redesign * added communnities screen for membership status * updated communities redesign * communities home redesign * Removed unnecessary files * Updated communities redesign
This commit is contained in:
John Ngei
GitHub
parent
5d9bcb3adb
commit
04b69181f2
Binary file not shown.
|
After Width: | Height: | Size: 602 B |
Binary file not shown.
|
After Width: | Height: | Size: 602 B |
Binary file not shown.
|
After Width: | Height: | Size: 523 B |
Binary file not shown.
|
After Width: | Height: | Size: 679 B |
Binary file not shown.
|
After Width: | Height: | Size: 468 B |
Binary file not shown.
|
After Width: | Height: | Size: 468 B |
Binary file not shown.
|
After Width: | Height: | Size: 628 B |
Binary file not shown.
|
After Width: | Height: | Size: 952 B |
Binary file not shown.
|
After Width: | Height: | Size: 566 B |
Binary file not shown.
|
After Width: | Height: | Size: 786 B |
Binary file not shown.
|
After Width: | Height: | Size: 412 B |
Binary file not shown.
|
After Width: | Height: | Size: 536 B |
Binary file not shown.
|
After Width: | Height: | Size: 460 B |
Binary file not shown.
|
After Width: | Height: | Size: 666 B |
Binary file not shown.
|
After Width: | Height: | Size: 333 B |
Binary file not shown.
|
After Width: | Height: | Size: 333 B |
Binary file not shown.
|
After Width: | Height: | Size: 618 B |
Binary file not shown.
|
After Width: | Height: | Size: 618 B |
Binary file not shown.
|
After Width: | Height: | Size: 738 B |
Binary file not shown.
|
After Width: | Height: | Size: 738 B |
Binary file not shown.
|
After Width: | Height: | Size: 498 B |
Binary file not shown.
|
After Width: | Height: | Size: 659 B |
Binary file not shown.
|
After Width: | Height: | Size: 625 B |
Binary file not shown.
|
After Width: | Height: | Size: 904 B |
Binary file not shown.
|
After Width: | Height: | Size: 477 B |
Binary file not shown.
|
After Width: | Height: | Size: 569 B |
Binary file not shown.
|
After Width: | Height: | Size: 521 B |
Binary file not shown.
|
After Width: | Height: | Size: 677 B |
Binary file not shown.
|
After Width: | Height: | Size: 362 B |
Binary file not shown.
|
After Width: | Height: | Size: 633 B |
Binary file not shown.
|
After Width: | Height: | Size: 633 B |
Binary file not shown.
|
After Width: | Height: | Size: 458 B |
Binary file not shown.
|
After Width: | Height: | Size: 633 B |
Binary file not shown.
|
After Width: | Height: | Size: 233 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 601 B |
Binary file not shown.
|
After Width: | Height: | Size: 896 B |
Binary file not shown.
|
After Width: | Height: | Size: 593 B |
Binary file not shown.
|
After Width: | Height: | Size: 837 B |
Binary file not shown.
|
After Width: | Height: | Size: 998 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -1,5 +1,6 @@
|
|||
(ns quo.components.bottom-sheet.style
|
||||
(:require [quo.design-system.colors :as colors]
|
||||
[quo2.foundations.colors :as quo2.colors]
|
||||
[quo.design-system.spacing :as spacing]))
|
||||
|
||||
(def border-radius 16)
|
||||
|
|
@ -24,8 +25,12 @@
|
|||
:bottom 0})
|
||||
|
||||
(defn content-container
|
||||
[window-height]
|
||||
{:background-color (:ui-background @colors/theme)
|
||||
[window-height new-ui?]
|
||||
{:background-color (if new-ui?
|
||||
(quo2.colors/theme-colors
|
||||
quo2.colors/white
|
||||
quo2.colors/neutral-90)
|
||||
(:ui-background @colors/theme))
|
||||
:border-top-left-radius border-radius
|
||||
:border-top-right-radius border-radius
|
||||
:height (* window-height 2)})
|
||||
|
|
|
|||
|
|
@ -8,7 +8,8 @@
|
|||
[quo.components.safe-area :as safe-area]
|
||||
[quo.components.bottom-sheet.style :as styles]
|
||||
[quo.gesture-handler :as gesture-handler]
|
||||
[quo.design-system.colors :as colors]))
|
||||
[quo.design-system.colors :as colors]
|
||||
[status-im.utils.config :as config]))
|
||||
|
||||
(def opacity-coeff 0.8)
|
||||
(def close-duration 150)
|
||||
|
|
@ -101,7 +102,8 @@
|
|||
{:inputRange [(animated/multiply open-snap-point opacity-coeff) 0]
|
||||
:outputRange [1 0]
|
||||
:extrapolate (:clamp animated/extrapolate)})))
|
||||
[])]
|
||||
[])
|
||||
new-ui? @config/new-ui-enabled?]
|
||||
(animated/code!
|
||||
(fn []
|
||||
(animated/cond* (animated/and* (animated/eq master-state (:end gesture-handler/states))
|
||||
|
|
@ -185,7 +187,7 @@
|
|||
(when platform/ios?
|
||||
{:opacity opacity
|
||||
:background-color (:backdrop @colors/theme)}))}]]
|
||||
[animated/view {:style (merge (styles/content-container window-height)
|
||||
[animated/view {:style (merge (styles/content-container window-height new-ui?)
|
||||
{:transform [{:translateY (if (= sheet-height max-height)
|
||||
(animated/add translate-y keyboard-height-android-delta)
|
||||
translate-y)}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,8 @@
|
|||
[quo.components.tooltip :as tooltip]
|
||||
;; FIXME:
|
||||
[status-im.ui.components.icons.icons :as icons]
|
||||
[quo2.foundations.colors :as quo2.colors]
|
||||
[quo2.components.icon :as quo.icons]
|
||||
[quo.components.animated.pressable :as animated]))
|
||||
|
||||
(defn themes [theme]
|
||||
|
|
@ -38,7 +40,17 @@
|
|||
:icon-bg-color (:ui-01 @colors/theme)
|
||||
:active-background (:ui-01 @colors/theme)
|
||||
:passive-background (:ui-background @colors/theme)
|
||||
:text-color (:text-02 @colors/theme)}))
|
||||
:text-color (:text-02 @colors/theme)}
|
||||
:light {:icon-color quo2.colors/neutral-50
|
||||
:icon-bg-color quo2.colors/white
|
||||
:text-color quo2.colors/black
|
||||
:active-background quo2.colors/neutral-10
|
||||
:passive-background quo2.colors/white}
|
||||
:dark {:icon-color quo2.colors/neutral-40
|
||||
:icon-bg-color quo2.colors/neutral-90
|
||||
:text-color quo2.colors/white
|
||||
:active-background quo2.colors/neutral-70
|
||||
:passive-background quo2.colors/neutral-90}))
|
||||
|
||||
(defn size->icon-size [size]
|
||||
(case size
|
||||
|
|
@ -65,7 +77,7 @@
|
|||
children))
|
||||
|
||||
(defn icon-column
|
||||
[{:keys [icon icon-bg-color icon-color size icon-container-style]}]
|
||||
[{:keys [icon icon-bg-color icon-color size icon-container-style new-ui?]}]
|
||||
(when icon
|
||||
(let [icon-size (size->icon-size size)]
|
||||
[rn/view {:style (or icon-container-style (:tiny spacing/padding-horizontal))}
|
||||
|
|
@ -74,13 +86,19 @@
|
|||
icon
|
||||
|
||||
(keyword? icon)
|
||||
[rn/view {:style {:width icon-size
|
||||
:height icon-size
|
||||
:align-items :center
|
||||
:justify-content :center
|
||||
:border-radius (/ icon-size 2)
|
||||
:background-color icon-bg-color}}
|
||||
[icons/icon icon {:color icon-color}]])])))
|
||||
(if new-ui?
|
||||
[quo.icons/icon icon {:container-style {:align-items :center
|
||||
:justify-content :center}
|
||||
:color icon-color
|
||||
:size 20
|
||||
:resize-mode :center}]
|
||||
[rn/view {:style {:width icon-size
|
||||
:height icon-size
|
||||
:align-items :center
|
||||
:justify-content :center
|
||||
:border-radius (/ icon-size 2)
|
||||
:background-color icon-bg-color}}
|
||||
[icons/icon icon {:color icon-color}]]))])))
|
||||
|
||||
(defn title-column
|
||||
[{:keys [title text-color subtitle subtitle-max-lines subtitle-secondary
|
||||
|
|
@ -252,7 +270,8 @@
|
|||
:subtitle subtitle
|
||||
:subtitle-max-lines subtitle-max-lines
|
||||
:subtitle-secondary subtitle-secondary
|
||||
:right-side-present? (or accessory chevron)}]
|
||||
:right-side-present? (or accessory chevron)
|
||||
:new-ui? :new-ui?}]
|
||||
[right-side {:chevron chevron
|
||||
:active active
|
||||
:disabled disabled
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
(ns quo2.components.base-tag
|
||||
(:require
|
||||
[quo.react-native :as rn]))
|
||||
|
||||
(defn style-container [size disabled border-color border-width background-color label type]
|
||||
(merge {:height size
|
||||
:border-color border-color
|
||||
:background-color background-color
|
||||
:border-width border-width
|
||||
:border-radius size
|
||||
:align-items :center
|
||||
:justify-content :center}
|
||||
(when disabled
|
||||
{:opacity 0.3})
|
||||
(when (and (or (= type :icon) (= type :emoji)) (not label))
|
||||
{:width size})))
|
||||
|
||||
(defn base-tag
|
||||
"opts
|
||||
{:type :icon/:emoji/:label/:permission
|
||||
:size 32/24}
|
||||
:labelled true"
|
||||
[_]
|
||||
(fn [{:keys [id size disabled border-color border-width background-color on-press
|
||||
accessibility-label label type] :or {size 32}} children]
|
||||
[rn/touchable-without-feedback (merge {:disabled disabled
|
||||
:accessibility-label accessibility-label}
|
||||
(when on-press
|
||||
{:on-press #(on-press id)}))
|
||||
[rn/view {:style (merge (style-container size disabled border-color border-width
|
||||
background-color label type))}
|
||||
children]]))
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
:background-color {:default colors/primary-50-opa-20
|
||||
:pressed colors/primary-50-opa-30
|
||||
:disabled colors/primary-50-opa-20}}
|
||||
:grey {:icon-color colors/neutral-40
|
||||
:grey {:icon-color colors/white
|
||||
:label {:style {:color colors/white}}
|
||||
:background-color {:default colors/neutral-80
|
||||
:pressed colors/neutral-60
|
||||
|
|
|
|||
|
|
@ -0,0 +1,190 @@
|
|||
(ns quo2.components.community-card-view
|
||||
(:require
|
||||
[quo2.components.text :as text]
|
||||
[quo2.components.icon :as icons]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.permission-tag :as permission]
|
||||
[quo2.components.filter-tag :as filter-tag]
|
||||
[status-im.communities.core :as communities]
|
||||
[status-im.utils.handlers :refer [>evt <sub]]
|
||||
[status-im.ui.components.react :as react]
|
||||
[status-im.utils.money :as money]
|
||||
[status-im.i18n.i18n :as i18n]
|
||||
[status-im.ui.screens.communities.styles :as styles]
|
||||
[status-im.ui.screens.communities.community :as community]
|
||||
[status-im.ui.screens.communities.icon :as communities.icon]))
|
||||
|
||||
(defn format-members [count]
|
||||
(if (> count 1000000)
|
||||
(str (money/with-precision (/ count 1000000) 1) (i18n/label :t/M))
|
||||
(if (and (> count 999) (< count 1000000))
|
||||
(str (money/with-precision (/ count 1000) 1) (i18n/label :t/K))
|
||||
count)))
|
||||
|
||||
(defn community-stats [{:keys [icon count icon-color]}]
|
||||
[react/view (styles/stats-count-container)
|
||||
[react/view {:margin-right 4}
|
||||
[icons/icon icon {:container-style {:align-items :center
|
||||
:justify-content :center}
|
||||
:resize-mode :center
|
||||
:size 16
|
||||
:color icon-color}]]
|
||||
[text/text {:weight :regular
|
||||
:size :paragraph-1}
|
||||
(format-members count)]])
|
||||
|
||||
(defn community-stats-column [type]
|
||||
(let [icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40)]
|
||||
[react/view (if (= type :card-view)
|
||||
(styles/card-stats-container)
|
||||
(styles/list-stats-container))
|
||||
[community-stats {:icon :main-icons2/group
|
||||
:count 630000
|
||||
:icon-color icon-color}]
|
||||
[community-stats {:icon :main-icons2/lightning
|
||||
:count 3300
|
||||
:icon-color icon-color}]
|
||||
[community-stats {:icon :main-icons2/placeholder
|
||||
:count 63
|
||||
:icon-color icon-color}]]))
|
||||
|
||||
(defn community-tags [tags]
|
||||
[react/view (styles/community-tags-container)
|
||||
(for [{:keys [id tag-label resource]} tags]
|
||||
^{:key id}
|
||||
[react/view {:margin-right 8}
|
||||
[filter-tag/filter-tag
|
||||
{:id id
|
||||
:size 24
|
||||
:label tag-label
|
||||
:type :emoji
|
||||
:labelled true
|
||||
:resource resource}]])])
|
||||
|
||||
(defn community-title [{:keys [title description]}]
|
||||
[react/view (styles/community-title-description-container)
|
||||
(when title
|
||||
[text/text
|
||||
{:accessibility-label :chat-name-text
|
||||
:number-of-lines 1
|
||||
:ellipsize-mode :tail
|
||||
:weight :semi-bold
|
||||
:size :heading-2}
|
||||
title])
|
||||
(when description
|
||||
[text/text
|
||||
{:accessibility-label :community-description-text
|
||||
:number-of-lines 2
|
||||
:ellipsize-mode :tail
|
||||
:weight :regular
|
||||
:size :paragraph-1}
|
||||
description])])
|
||||
|
||||
(defn permission-tag-container [{:keys [locked tokens]}]
|
||||
[permission/tag {:background-color (colors/theme-colors
|
||||
colors/neutral-10
|
||||
colors/neutral-80)
|
||||
:locked locked
|
||||
:tokens tokens
|
||||
:size 24}])
|
||||
|
||||
(defn community-card-view-item [{:keys [id name description locked
|
||||
status tokens cover tags featured] :as community}]
|
||||
(let [width (* (<sub [:dimensions/window-width]) 0.90)]
|
||||
[react/view {:style (merge (styles/community-card 20)
|
||||
{:margin-bottom 16}
|
||||
(if featured
|
||||
{:margin-right 12
|
||||
:width width}
|
||||
{:flex 1
|
||||
:margin-horizontal 20}))}
|
||||
[react/view {:style {:height 230
|
||||
:border-radius 20}
|
||||
:on-press (fn []
|
||||
(>evt [::communities/load-category-states id])
|
||||
(>evt [:dismiss-keyboard])
|
||||
(>evt [:navigate-to :community {:community-id id}]))
|
||||
:on-long-press #(>evt [:bottom-sheet/show-sheet
|
||||
{:content (fn [] [community/community-actions community])}])}
|
||||
[react/view {:flex 1}
|
||||
[react/view (styles/community-cover-container)
|
||||
[react/image {:source cover
|
||||
:style {:flex 1
|
||||
:border-radius 20}}]]
|
||||
[react/view (styles/card-view-content-container)
|
||||
[react/view (styles/card-view-chat-icon)
|
||||
[communities.icon/community-icon-redesign community 48]]
|
||||
(when (= status :gated)
|
||||
[react/view (styles/permission-tag-styles)
|
||||
[permission-tag-container {:locked locked
|
||||
:status status
|
||||
:tokens tokens}]])
|
||||
[community-title {:title name
|
||||
:description description}]
|
||||
[community-stats-column :card-view]
|
||||
[community-tags tags]]]]]))
|
||||
|
||||
(defn communities-list-view-item [{:keys [id name locked status tokens background-color] :as community}]
|
||||
[react/view {:style (merge (styles/community-card 16)
|
||||
{:margin-bottom 12
|
||||
:margin-horizontal 20})}
|
||||
[react/view {:style {:height 56
|
||||
:border-radius 16}
|
||||
:on-press (fn []
|
||||
(>evt [::communities/load-category-states id])
|
||||
(>evt [:dismiss-keyboard])
|
||||
(>evt [:navigate-to :community {:community-id id}]))
|
||||
:on-long-press #(>evt [:bottom-sheet/show-sheet
|
||||
{:content (fn []
|
||||
[community/community-actions community])}])}
|
||||
[react/view {:flex 1}
|
||||
[react/view {:flex-direction :row
|
||||
:border-radius 16
|
||||
:padding-horizontal 12
|
||||
:align-items :center
|
||||
:padding-vertical 8
|
||||
:background-color background-color}
|
||||
[react/view
|
||||
[communities.icon/community-icon-redesign community 32]]
|
||||
[react/view {:flex 1
|
||||
:margin-horizontal 12}
|
||||
[text/text {:weight :semi-bold
|
||||
:size :paragraph-1
|
||||
:accessibility-label :community-name-text
|
||||
:number-of-lines 1
|
||||
:ellipsize-mode :tail}
|
||||
name]
|
||||
[community-stats-column :list-view]]
|
||||
(when (= status :gated)
|
||||
[permission-tag-container {:locked locked
|
||||
:status status
|
||||
:tokens tokens}])]]]])
|
||||
|
||||
(defn communities-membership-list-item [{:keys [id name status tokens locked] :as community}]
|
||||
[react/view {:margin-bottom 12
|
||||
:padding-horizontal 8}
|
||||
[react/touchable-highlight {:underlay-color colors/primary-50-opa-5
|
||||
:style {:border-radius 12}
|
||||
:on-press (fn []
|
||||
(>evt [::communities/load-category-states id])
|
||||
(>evt [:dismiss-keyboard])
|
||||
(>evt [:navigate-to :community {:community-id id}]))
|
||||
:on-long-press #(>evt [:bottom-sheet/show-sheet
|
||||
{:content (fn []
|
||||
[community/community-actions community])}])}
|
||||
[react/view {:flex 1
|
||||
:padding-vertical 8
|
||||
:padding-horizontal 12}
|
||||
[react/view {:flex-direction :row
|
||||
:border-radius 16
|
||||
:align-items :center}
|
||||
[communities.icon/community-icon-redesign community 48]
|
||||
[react/view {:margin-left 12
|
||||
:flex 1}
|
||||
[community-title {:title name}]]
|
||||
(when (= status :gated)
|
||||
[react/view {:justify-content :center
|
||||
:margin-right 12}
|
||||
[permission-tag-container {:locked locked
|
||||
:status status
|
||||
:tokens tokens}]])]]]])
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
(ns quo2.components.filter-tag
|
||||
(:require [quo2.foundations.colors :as colors]
|
||||
[quo.theme :as theme]
|
||||
[quo.react-native :as rn]
|
||||
[quo2.components.icon :as icons]
|
||||
[quo2.components.text :as text]
|
||||
[quo2.components.base-tag :as base-tag]))
|
||||
|
||||
(def themes {:light {:default {:border-color colors/neutral-20
|
||||
:blurred-border-color colors/neutral-80-opa-5
|
||||
:text-color {:style {:color colors/black}}}
|
||||
:active {:border-color colors/neutral-30
|
||||
:blurred-border-color colors/neutral-80-opa-10
|
||||
:text-color {:style {:color colors/black}}}
|
||||
:disabled {:border-color colors/neutral-20
|
||||
:blurred-border-color colors/neutral-80-opa-5
|
||||
:text-color {:style {:color colors/black}}}}
|
||||
:dark {:default {:border-color colors/neutral-70
|
||||
:blurred-border-color colors/white-opa-10
|
||||
:text-color {:style {:color colors/white}}}
|
||||
:active {:border-color colors/neutral-60
|
||||
:blurred-border-color colors/white-opa-20
|
||||
:text-color {:style {:color colors/white}}}
|
||||
:disabled {:border-color colors/neutral-70
|
||||
:blurred-border-color colors/white-opa-10
|
||||
:text-color {:style {:color colors/white}}}}})
|
||||
|
||||
(defn tag-resources [size type resource icon-color label text-color labelled]
|
||||
[rn/view {:style (merge {:flex-direction :row
|
||||
:align-items :center
|
||||
:justify-content :center}
|
||||
(when label
|
||||
{:padding-horizontal (case size 32 12 24 8)}))}
|
||||
(when (= type :icon)
|
||||
[icons/icon resource {:container-style (when label
|
||||
{:margin-right 4})
|
||||
:resize-mode :center
|
||||
:size (case size
|
||||
32 20
|
||||
24 12)
|
||||
:color icon-color}])
|
||||
(when (= type :emoji)
|
||||
[rn/image {:source resource
|
||||
:style (merge (case size
|
||||
32 {:height 20
|
||||
:width 20}
|
||||
24 {:height 12
|
||||
:width 12})
|
||||
(when label
|
||||
{:margin-right 4}))}])
|
||||
(when labelled
|
||||
[text/text (merge {:size (case size
|
||||
32 :paragraph-1
|
||||
24 :paragraph-2
|
||||
20 :label nil)
|
||||
:weight :medium
|
||||
:number-of-lines 1}
|
||||
text-color)
|
||||
label])])
|
||||
|
||||
(defn filter-tag
|
||||
[_ _]
|
||||
(fn [{:keys [id on-press disabled size resource active accessibility-label
|
||||
label type labelled blurred icon-color] :or {size 32}}]
|
||||
(let [state (cond disabled :disabled active :active :else :default)
|
||||
{:keys [border-color blurred-border-color text-color]}
|
||||
(get-in themes [(theme/get-theme) state])]
|
||||
[base-tag/base-tag {:id id
|
||||
:size size
|
||||
:border-width 1
|
||||
:border-color (if blurred
|
||||
blurred-border-color
|
||||
border-color)
|
||||
:on-press on-press
|
||||
:accessibility-label accessibility-label
|
||||
:disabled disabled
|
||||
:type type
|
||||
:label label}
|
||||
[tag-resources size type resource icon-color label text-color labelled]])))
|
||||
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
(ns quo2.components.filter-tags
|
||||
(:require [reagent.core :as reagent]
|
||||
[quo.react-native :as rn]
|
||||
[quo2.components.filter-tag :as tag]))
|
||||
|
||||
(defn tags [{:keys [default-active on-change]}]
|
||||
(let [active-tab-id (reagent/atom default-active)]
|
||||
(fn [{:keys [data size type labelled disabled blurred icon-color] :or {size 32}}]
|
||||
(let [active-id @active-tab-id]
|
||||
[rn/view {:flex-direction :row}
|
||||
(for [{:keys [tag-label id resource]} data]
|
||||
^{:key id}
|
||||
[rn/view {:margin-right 8}
|
||||
[tag/filter-tag
|
||||
(merge {:id id
|
||||
:size size
|
||||
:type type
|
||||
:label (if labelled tag-label (when (= type :label) tag-label))
|
||||
:active (= id active-id)
|
||||
:disabled disabled
|
||||
:blurred blurred
|
||||
:icon-color icon-color
|
||||
:labelled (if (= type :label) true labelled)
|
||||
:resource (if (= type :icon)
|
||||
:main-icons2/placeholder
|
||||
resource)
|
||||
:on-press #(do (reset! active-tab-id %)
|
||||
(when on-change (on-change %)))})
|
||||
tag-label]])]))))
|
||||
|
|
@ -0,0 +1,178 @@
|
|||
(ns quo2.components.header
|
||||
(:require [oops.core :refer [oget]]
|
||||
[quo.animated :as animated]
|
||||
[quo2.components.button :as button]
|
||||
[quo2.components.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo.design-system.spacing :as spacing]
|
||||
[quo.react-native :as rn]
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
(def header-height 56)
|
||||
|
||||
(defn header-wrapper-style [{:keys [height border-bottom background]}]
|
||||
(merge
|
||||
{:background-color (colors/theme-colors
|
||||
colors/neutral-5
|
||||
colors/neutral-95)
|
||||
:height height}
|
||||
(when background
|
||||
{:background-color background})
|
||||
(when border-bottom
|
||||
{:border-bottom-width 1
|
||||
:border-bottom-color (colors/theme-colors
|
||||
colors/neutral-5
|
||||
colors/neutral-95)})))
|
||||
|
||||
(def absolute-fill {:position :absolute
|
||||
:top 0
|
||||
:bottom 0
|
||||
:left 0
|
||||
:right 0})
|
||||
|
||||
(def content {:flex 1
|
||||
:flex-direction :row
|
||||
:align-items :center
|
||||
:justify-content :center})
|
||||
|
||||
(def left {:position :absolute
|
||||
:left 0
|
||||
:top 0
|
||||
:bottom 0
|
||||
:justify-content :center
|
||||
:align-items :flex-start})
|
||||
|
||||
(def right {:position :absolute
|
||||
:right 0
|
||||
:top 0
|
||||
:bottom 0
|
||||
:justify-content :center
|
||||
:align-items :flex-end})
|
||||
|
||||
(defn title-style [{:keys [left right]} title-align]
|
||||
(merge
|
||||
absolute-fill
|
||||
(case title-align
|
||||
:left {:left (:width left)
|
||||
:right (:width right)}
|
||||
{:align-items :center
|
||||
:justify-content :center
|
||||
:left (max (:width left) (:width right))
|
||||
:right (max (:width left) (:width right))})))
|
||||
|
||||
(def header-actions-style
|
||||
(merge
|
||||
{:flex 1
|
||||
:flex-direction :row
|
||||
:align-items :center
|
||||
:justify-content :center}
|
||||
(:x-tiny spacing/padding-horizontal)))
|
||||
|
||||
(def header-action-placeholder
|
||||
{:width (:base spacing/spacing)})
|
||||
|
||||
(def element {:align-items :center
|
||||
:justify-content :center
|
||||
:flex 1})
|
||||
|
||||
(defn header-action [{:keys [icon label on-press disabled accessibility-label]}]
|
||||
[button/button (merge {:on-press on-press
|
||||
:disabled disabled}
|
||||
(cond
|
||||
icon {:type :icon
|
||||
:theme :icon}
|
||||
label {:type :secondary})
|
||||
(when accessibility-label
|
||||
{:accessibility-label accessibility-label}))
|
||||
(cond
|
||||
icon icon
|
||||
label label)])
|
||||
|
||||
(defn header-actions [{:keys [accessories component]}]
|
||||
[rn/view {:style element}
|
||||
(cond
|
||||
(seq accessories)
|
||||
(into [rn/view {:style header-actions-style}]
|
||||
(map header-action accessories))
|
||||
|
||||
component component
|
||||
|
||||
:else
|
||||
[rn/view {:style header-action-placeholder}])])
|
||||
|
||||
(defn header-title [{:keys [title subtitle component title-align]}]
|
||||
[:<>
|
||||
(cond
|
||||
component component
|
||||
|
||||
(and title subtitle)
|
||||
[:<>
|
||||
[text/text {:weight :medium
|
||||
:number-of-lines 1}
|
||||
title]
|
||||
[text/text {:weight :regular
|
||||
:color :secondary
|
||||
:number-of-lines 1}
|
||||
subtitle]]
|
||||
|
||||
title [text/text {:weight :bold
|
||||
:number-of-lines 0
|
||||
:align title-align
|
||||
:size :large}
|
||||
title])])
|
||||
|
||||
(defn header [{:keys [left-width right-width]}]
|
||||
(let [layout (reagent/atom {:left {:width (or left-width 8)
|
||||
:height header-height}
|
||||
:right {:width (or right-width 8)
|
||||
:height header-height}
|
||||
:title {:width 0
|
||||
:height header-height}})
|
||||
handle-layout (fn [el get-layout]
|
||||
(fn [evt]
|
||||
(let [width (oget evt "nativeEvent" "layout" "width")
|
||||
height (oget evt "nativeEvent" "layout" "height")]
|
||||
(when get-layout
|
||||
(get-layout el {:width width
|
||||
:height height}))
|
||||
(swap! layout assoc el {:width width
|
||||
:height height}))))]
|
||||
(fn [{:keys [left-accessories left-component border-bottom
|
||||
right-accessories right-component insets get-layout
|
||||
title subtitle title-component style title-align
|
||||
background]
|
||||
:or {title-align :center
|
||||
border-bottom false}}]
|
||||
(let [status-bar-height (get insets :top 0)
|
||||
height (+ header-height status-bar-height)]
|
||||
[animated/view {:style (header-wrapper-style {:height height
|
||||
:background background
|
||||
:border-bottom border-bottom})}
|
||||
[rn/view {:pointer-events :box-none
|
||||
:height status-bar-height}]
|
||||
[rn/view {:style (merge {:height header-height}
|
||||
style)
|
||||
:pointer-events :box-none}
|
||||
[rn/view {:style absolute-fill
|
||||
:pointer-events :box-none}
|
||||
[rn/view {:style content
|
||||
:pointer-events :box-none}
|
||||
[rn/view {:style left
|
||||
:on-layout (handle-layout :left get-layout)
|
||||
:pointer-events :box-none}
|
||||
[header-actions {:accessories left-accessories
|
||||
:component left-component}]]
|
||||
|
||||
[rn/view {:style (title-style @layout title-align)
|
||||
:on-layout (handle-layout :title get-layout)
|
||||
:pointer-events :box-none}
|
||||
[header-title {:title title
|
||||
:subtitle subtitle
|
||||
:title-align title-align
|
||||
:component title-component}]]
|
||||
|
||||
[rn/view {:style right
|
||||
:on-layout (handle-layout :right get-layout)
|
||||
:pointer-events :box-none}
|
||||
[header-actions {:accessories right-accessories
|
||||
:component right-component}]]]]]]))))
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
(ns quo2.components.permission-tag
|
||||
(:require [status-im.ui.components.react :as react]
|
||||
[quo2.components.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.icon :as icons]
|
||||
[quo2.components.base-tag :as base-tag]
|
||||
[status-im.i18n.i18n :as i18n]))
|
||||
|
||||
(defn outer-resource-container [size background-color]
|
||||
{:background-color background-color
|
||||
:border-radius size
|
||||
:width size
|
||||
:height size
|
||||
:margin-left (case size 32 -12 24 -8)
|
||||
:align-items :center
|
||||
:justify-content :center})
|
||||
|
||||
(defn extra-count-styles [size]
|
||||
{:background-color (colors/theme-colors
|
||||
colors/neutral-20
|
||||
colors/neutral-70)
|
||||
:height (case size 32 28 24 20)
|
||||
:width (case size 32 28 24 20)
|
||||
:border-radius size
|
||||
:justify-content :center
|
||||
:align-items :center})
|
||||
|
||||
(defn extra-count [total-group-count selected-count size background-color]
|
||||
(let [extra-group-count (- total-group-count selected-count)]
|
||||
(when (> extra-group-count 0)
|
||||
[react/view (outer-resource-container size background-color)
|
||||
[react/view (extra-count-styles size)
|
||||
(if (< extra-group-count 4)
|
||||
[text/text {:size :label
|
||||
:style {:align-items :center
|
||||
:color (colors/theme-colors
|
||||
colors/neutral-50
|
||||
colors/neutral-40)}}
|
||||
(str "+" extra-group-count)]
|
||||
[icons/icon :main-icons2/pending-default {:container-style {:align-items :center
|
||||
:justify-content :center}
|
||||
:color (colors/theme-colors
|
||||
colors/neutral-50
|
||||
colors/neutral-40)
|
||||
:size 12}])]])))
|
||||
|
||||
(defn selected-token-count [group]
|
||||
(cond
|
||||
(= (count group) 3) 3
|
||||
|
||||
(> (count group) 3) 2
|
||||
|
||||
:else
|
||||
(count group)))
|
||||
|
||||
(defn token-group []
|
||||
(fn [{:keys [group size last-group background-color]
|
||||
:or {size 24}}]
|
||||
(let [tokens-count (count group)
|
||||
selected-tokens (take (selected-token-count group) group)]
|
||||
[react/view {:flex-direction :row
|
||||
:align-items :center}
|
||||
(for [{:keys [token-icon]} selected-tokens]
|
||||
^{:key token-icon}
|
||||
[react/view {:flex-direction :row}
|
||||
[react/view (outer-resource-container size background-color)
|
||||
[react/image {:source token-icon
|
||||
:style {:height (case size 32 28 24 20)
|
||||
:width (case size 32 28 24 20)
|
||||
:border-radius size}}]]])
|
||||
|
||||
[extra-count tokens-count (count selected-tokens) size]
|
||||
(when-not last-group
|
||||
[react/view {:align-items :center}
|
||||
[text/text {:weight :medium
|
||||
:size (case size 32 :paragraph-2 24 :label)
|
||||
:style {:color (colors/theme-colors
|
||||
colors/neutral-50
|
||||
colors/neutral-40)
|
||||
:padding-left 4
|
||||
:text-transform :lowercase
|
||||
:padding-right (case size 32 16 24 12)}}
|
||||
(i18n/label :t/or)]])])))
|
||||
|
||||
(defn selected-group-count [tokens]
|
||||
(cond
|
||||
(> (count tokens) 3) 3
|
||||
|
||||
:else
|
||||
(count tokens)))
|
||||
|
||||
(defn tag-tokens []
|
||||
(fn [{:keys [tokens size background-color]
|
||||
:or {size 24}}]
|
||||
(let [selected-groups (take (selected-group-count tokens) tokens)
|
||||
last-group-id ((last selected-groups) :id)]
|
||||
[react/view {:flex-direction :row
|
||||
:align-items :center}
|
||||
(for [{:keys [id group]} selected-groups]
|
||||
^{:key id}
|
||||
[token-group {:group group
|
||||
:size size
|
||||
:last-group (if (= id last-group-id) true false)
|
||||
:background-color background-color}])])))
|
||||
|
||||
(defn tag
|
||||
[_ _]
|
||||
(fn [{:keys [locked tokens size background-color]
|
||||
:or {size 24}}]
|
||||
[base-tag/base-tag {:background-color background-color
|
||||
:size size
|
||||
:type :permission}
|
||||
[react/view {:flex-direction :row
|
||||
:align-items :center
|
||||
:justify-content :flex-end}
|
||||
[react/view {:padding-left (case 32 8 24 6)
|
||||
:padding-right (case size 32 16 24 12)}
|
||||
[icons/icon (if locked :main-icons2/locked
|
||||
:main-icons2/unlocked)
|
||||
{:resize-mode :center
|
||||
:size (case size 32 20 24 16)
|
||||
:color (colors/theme-colors
|
||||
colors/neutral-50
|
||||
colors/neutral-40)}]]
|
||||
[tag-tokens {:tokens tokens
|
||||
:size size
|
||||
:background-color background-color}]]]))
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
(ns quo2.components.separator
|
||||
(:require [quo.react-native :as react]
|
||||
[quo2.foundations.colors :as quo2.colors]))
|
||||
|
||||
(defn separator [{:keys [style]}]
|
||||
[react/view
|
||||
{:style
|
||||
(merge
|
||||
style
|
||||
{:background-color (quo2.colors/theme-colors
|
||||
quo2.colors/neutral-30
|
||||
quo2.colors/neutral-80)
|
||||
:align-self :stretch
|
||||
:height 1})}])
|
||||
|
|
@ -42,6 +42,8 @@
|
|||
(def neutral-70-opa-95 (alpha neutral-70 0.95))
|
||||
|
||||
;;80 with transparency
|
||||
(def neutral-80-opa-5 (alpha neutral-80 0.05))
|
||||
(def neutral-80-opa-10 (alpha neutral-80 0.1))
|
||||
(def neutral-80-opa-60 (alpha neutral-80 0.6))
|
||||
(def neutral-80-opa-70 (alpha neutral-80 0.7))
|
||||
(def neutral-80-opa-80 (alpha neutral-80 0.8))
|
||||
|
|
@ -218,6 +220,8 @@
|
|||
(def beige-50 "#CAAE93")
|
||||
(def beige-60 (alpha "#CAAE93" 0.6))
|
||||
|
||||
(def shadow "rgba(9,16,28,0.04)")
|
||||
|
||||
(def customization
|
||||
{:dark {:purple purple-60
|
||||
:indigo indigo-60
|
||||
|
|
|
|||
|
|
@ -0,0 +1,56 @@
|
|||
(ns quo2.screens.community-card-view
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo.previews.preview :as preview]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.constants :as constants]
|
||||
[quo.design-system.colors :as quo.colors]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.community-card-view :as community-view]
|
||||
[status-im.i18n.i18n :as i18n]
|
||||
[status-im.react-native.resources :as resources]))
|
||||
|
||||
(def community-data
|
||||
{:id constants/status-community-id
|
||||
:name "Status"
|
||||
:description "Status is a secure messaging app, crypto wallet and web3 browser built with the state of the art technology"
|
||||
:status "gated"
|
||||
:section "popular"
|
||||
:permissions true
|
||||
:cover (resources/get-image :community-cover)
|
||||
:community-icon (resources/get-image :status-logo)
|
||||
:color (rand-nth quo.colors/chat-colors)
|
||||
:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}]
|
||||
:tags [{:id 1 :tag-label (i18n/label :t/music) :resource (resources/get-image :music)}
|
||||
{:id 2 :tag-label (i18n/label :t/lifestyle) :resource (resources/get-image :lifestyle)}
|
||||
{:id 3 :tag-label (i18n/label :t/podcasts) :resource (resources/get-image :podcasts)}]})
|
||||
|
||||
(def descriptor [{:label "Community views"
|
||||
:key :view-style
|
||||
:type :select
|
||||
:options [{:key :card-view
|
||||
:value "Card view"}
|
||||
{:key :list-view
|
||||
:value "List view"}]}])
|
||||
|
||||
(defn cool-preview []
|
||||
(let [state (reagent/atom {:view-style :card-view})]
|
||||
(fn []
|
||||
[rn/view {:margin-bottom 50}
|
||||
[rn/view {:flex 1
|
||||
:padding 16}
|
||||
[preview/customizer state descriptor]]
|
||||
[rn/view {:padding-vertical 60
|
||||
:justify-content :center}
|
||||
(if (= :card-view (:view-style @state))
|
||||
[community-view/community-card-view-item community-data]
|
||||
[community-view/communities-list-view-item community-data])]])))
|
||||
|
||||
(defn preview-community-card []
|
||||
[rn/view {:background-color (colors/theme-colors colors/neutral-5
|
||||
colors/neutral-95)
|
||||
:flex 1}
|
||||
[rn/flat-list {:flex 1
|
||||
:keyboardShouldPersistTaps :always
|
||||
:header [cool-preview]
|
||||
:key-fn str}]])
|
||||
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
(ns quo2.screens.filter-tags
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo.previews.preview :as preview]
|
||||
[status-im.ui.components.react :as react]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.filter-tags :as quo2.tags]
|
||||
[status-im.react-native.resources :as resources]
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
(def descriptor [{:label "Size:"
|
||||
:key :size
|
||||
:type :select
|
||||
:options [{:key 32
|
||||
:value "32"}
|
||||
{:key 24
|
||||
:value "24"}]}
|
||||
{:label "Type:"
|
||||
:key :type
|
||||
:type :select
|
||||
:options [{:key :emoji
|
||||
:value "Emoji"}
|
||||
{:key :icon
|
||||
:value "Icons"}
|
||||
{:key :label
|
||||
:value "Label"}]}
|
||||
{:label "Labelled:"
|
||||
:key :labelled
|
||||
:type :boolean}
|
||||
{:label "Disabled:"
|
||||
:key :disabled
|
||||
:type :boolean}
|
||||
{:label "Blurred background:"
|
||||
:key :blurred
|
||||
:type :boolean}])
|
||||
|
||||
(defn cool-preview []
|
||||
(let [state (reagent/atom {:size 32
|
||||
:labelled true
|
||||
:type :emoji})]
|
||||
(fn []
|
||||
[rn/view {:margin-bottom 50
|
||||
:padding 16
|
||||
:padding-vertical 60}
|
||||
[rn/view {:flex 1}
|
||||
[preview/customizer state descriptor]]
|
||||
[rn/view {:flex 1
|
||||
:justify-content :center
|
||||
:top 60}
|
||||
(when (:blurred @state)
|
||||
[rn/view {:flex 1}
|
||||
[react/view {:flex-direction :row
|
||||
:height 100}
|
||||
[react/image {:source (resources/get-image :community-cover)
|
||||
:style {:flex 1
|
||||
:height 100
|
||||
:border-radius 16}}]]
|
||||
[react/view {:flex-direction :row
|
||||
:height 100
|
||||
:position :absolute
|
||||
:left 0
|
||||
:right 0}
|
||||
[react/blur-view {:flex 1
|
||||
:style {:border-radius 16
|
||||
:height 100}
|
||||
:blur-amount 40
|
||||
:overlay-color (colors/theme-colors
|
||||
colors/white-opa-70
|
||||
colors/neutral-80-opa-80)}]]])
|
||||
[rn/scroll-view {:justify-content :center
|
||||
:align-items :center
|
||||
:position :absolute
|
||||
:padding-horizontal 10}
|
||||
[quo2.tags/tags (merge @state
|
||||
{:default-active 1
|
||||
:data [{:id 1 :tag-label "Music" :resource (resources/get-image :music)}
|
||||
{:id 2 :tag-label "Lifestyle" :resource (resources/get-image :lifestyle)}
|
||||
{:id 3 :tag-label "Podcasts" :resource (resources/get-image :podcasts)}]})]]]])))
|
||||
(defn preview-filter-tags []
|
||||
[rn/view {:flex 1
|
||||
:background-color (colors/theme-colors
|
||||
colors/neutral-5
|
||||
colors/neutral-90)}
|
||||
[rn/flat-list {:flex 1
|
||||
:keyboardShouldPersistTaps :always
|
||||
:header [cool-preview]
|
||||
:key-fn str}]])
|
||||
|
|
@ -19,6 +19,9 @@
|
|||
[quo2.screens.info-message :as info-message]
|
||||
[quo2.screens.information-box :as information-box]
|
||||
[quo.components.safe-area :as safe-area]
|
||||
[quo2.screens.permission-tag :as permission-tag]
|
||||
[quo2.screens.community-card-view :as community-card]
|
||||
[quo2.screens.filter-tags :as filter-tags]
|
||||
[quo.core :as quo]))
|
||||
|
||||
(def screens [{:name :quo2-texts
|
||||
|
|
@ -65,7 +68,16 @@
|
|||
:component info-message/preview-info-message}
|
||||
{:name :information-box
|
||||
:insets {:top false}
|
||||
:component information-box/preview-information-box}])
|
||||
:component information-box/preview-information-box}
|
||||
{:name :quo2-permission-tag
|
||||
:insets {:top false}
|
||||
:component permission-tag/preview-permission-tag}
|
||||
{:name :quo2-filter-tags
|
||||
:insets {:top false}
|
||||
:component filter-tags/preview-filter-tags}
|
||||
{:name :quo2-community-cards
|
||||
:insets {:top false}
|
||||
:component community-card/preview-community-card}])
|
||||
|
||||
(defn theme-switcher []
|
||||
[rn/view {:style {:flex-direction :row
|
||||
|
|
|
|||
|
|
@ -0,0 +1,168 @@
|
|||
(ns quo2.screens.permission-tag
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo.previews.preview :as preview]
|
||||
[quo2.components.permission-tag :as permission-tag]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[status-im.react-native.resources :as resources]
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
(def descriptor [{:label "Size:"
|
||||
:key :size
|
||||
:type :select
|
||||
:options [{:key 32
|
||||
:value "32"}
|
||||
{:key 24
|
||||
:value "24"}]}
|
||||
{:label "Locked:"
|
||||
:key :locked?
|
||||
:type :boolean}])
|
||||
|
||||
(def community-tokens
|
||||
[{:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 3 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 3 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 1 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 3 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 3 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 4 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 3 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 3 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 4 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 3 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 3 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 3 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 3 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 4 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 3 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 4 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 3 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 4 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 3 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 4 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 5 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 6 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 1 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 3 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 4 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 5 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 6 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 3 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 3 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 4 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 5 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 6 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 3 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 4 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 3 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 4 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 5 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 6 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 3 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 3 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 3 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 4 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 5 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 6 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 3 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 3 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 3 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 4 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 5 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 6 :token-icon (resources/get-image :status-logo)}]}]}])
|
||||
|
||||
(defn cool-preview []
|
||||
(let [state (reagent/atom {:size 32})]
|
||||
(fn []
|
||||
[rn/view {:margin-bottom 50
|
||||
:padding 16}
|
||||
[rn/view {:flex 1}
|
||||
[preview/customizer state descriptor]]
|
||||
[rn/view {:padding-vertical 60
|
||||
:justify-content :center}
|
||||
(when @state
|
||||
(for [{:keys [tokens]} community-tokens]
|
||||
^{:key tokens}
|
||||
[rn/view {:margin-top 20
|
||||
:align-self :flex-end}
|
||||
[permission-tag/tag (merge @state
|
||||
{:tokens tokens
|
||||
:background-color (colors/theme-colors
|
||||
colors/neutral-10
|
||||
colors/neutral-80)})]]))]])))
|
||||
|
||||
(defn preview-permission-tag []
|
||||
[rn/view {:background-color (colors/theme-colors
|
||||
colors/white
|
||||
colors/neutral-80)
|
||||
:flex 1}
|
||||
[rn/flat-list {:flex 1
|
||||
:keyboardShouldPersistTaps :always
|
||||
:header [cool-preview]
|
||||
:key-fn str}]])
|
||||
|
|
@ -21,4 +21,4 @@
|
|||
{:events [:bottom-sheet/hide]}
|
||||
[{:keys [db]}]
|
||||
{:hide-bottom-sheet nil
|
||||
:db (assoc db :bottom-sheet/show? false)})
|
||||
:db (assoc db :bottom-sheet/show? false)})
|
||||
|
|
@ -63,4 +63,4 @@
|
|||
(def locale
|
||||
(.-locale i18n))
|
||||
|
||||
(def format-currency goog.i18n/format-currency)
|
||||
(def format-currency goog.i18n/format-currency)
|
||||
|
|
@ -47,7 +47,12 @@
|
|||
:collectible-dark (js/require "../resources/images/ui/collectible-dark.png")
|
||||
:hand-wave (js/require "../resources/images/ui/hand-wave.png")
|
||||
:graph (js/require "../resources/images/ui/graph.png")
|
||||
:switcher (js/require "../resources/images/ui/switcher.png")})
|
||||
:switcher (js/require "../resources/images/ui/switcher.png")
|
||||
:discover (js/require "../resources/images/ui/discover.png")
|
||||
:community-cover (js/require "../resources/images/ui/community-cover.png")
|
||||
:lifestyle (js/require "../resources/images/ui/lifestyle.png")
|
||||
:music (js/require "../resources/images/ui/music.png")
|
||||
:podcasts (js/require "../resources/images/ui/podcasts.png")})
|
||||
|
||||
(defn get-theme-image [k]
|
||||
(get ui (when (colors/dark?) (keyword (str (name k) "-dark"))) (get ui k)))
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
(ns status-im.switcher.home-stack
|
||||
(:require [quo2.reanimated :as reanimated]
|
||||
[quo2.screens.main :as quo2.preview]
|
||||
[status-im.utils.platform :as platform]
|
||||
[status-im.switcher.switcher :as switcher]
|
||||
[status-im.ui.screens.home.views :as home]
|
||||
[status-im.switcher.constants :as constants]
|
||||
[status-im.switcher.bottom-tabs :as bottom-tabs]
|
||||
[status-im.ui.screens.profile.user.views :as profile.user]
|
||||
[status-im.ui.screens.communities.communities-list-redesign :as communities]
|
||||
[status-im.ui.screens.wallet.accounts.views :as wallet.accounts]))
|
||||
|
||||
(defn load-stack? [stack-id]
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
:right 0
|
||||
:position :absolute})}
|
||||
(case stack-id
|
||||
:communities-stack [quo2.preview/main-screen]
|
||||
:communities-stack [communities/views]
|
||||
:chats-stack [home/home]
|
||||
:wallet-stack [wallet.accounts/accounts-overview]
|
||||
:browser-stack [profile.user/my-profile])])]))
|
||||
|
|
|
|||
|
|
@ -93,6 +93,19 @@
|
|||
:default-chat-icon (styles/default-chat-icon-chat-list color)
|
||||
:default-chat-icon-text (styles/default-chat-icon-text 40)}])
|
||||
|
||||
(defn chat-icon-view-chat-list-redesign
|
||||
[chat-id group-chat name color size]
|
||||
[chat-icon-view chat-id group-chat name
|
||||
{:container (if (= size 20)
|
||||
(styles/token-icon-container-chat-list size)
|
||||
(styles/community-icon-container-chat-list size))
|
||||
:size size
|
||||
:chat-icon (if (= size 20)
|
||||
(styles/community-icon-chat-list-redesign size)
|
||||
(styles/community-icon-chat-list size))
|
||||
:default-chat-icon (styles/default-list-chat-icon-redesign color size)
|
||||
:default-chat-icon-text (styles/default-chat-icon-text size)}])
|
||||
|
||||
(defn chat-icon-view-chat-sheet
|
||||
[chat-id group-chat name color]
|
||||
[chat-icon-view chat-id group-chat name
|
||||
|
|
|
|||
|
|
@ -11,12 +11,39 @@
|
|||
:border-radius 20
|
||||
:background-color color})
|
||||
|
||||
(defn default-chat-icon-redesign [color size]
|
||||
{:margin 0
|
||||
:width size
|
||||
:height size
|
||||
:align-items :center
|
||||
:justify-content :center
|
||||
:border-radius (/ size 2)
|
||||
:background-color color})
|
||||
|
||||
(defn default-chat-icon-chat-list [color]
|
||||
(merge (default-chat-icon color)
|
||||
{:width 40
|
||||
:height 40
|
||||
:border-radius 20}))
|
||||
|
||||
(defn default-list-chat-icon-redesign [color size]
|
||||
(merge (default-chat-icon-redesign color size)
|
||||
{:width size
|
||||
:height size
|
||||
:border-radius (/ size 2)}))
|
||||
|
||||
(defn default-community-icon-chat-list [color]
|
||||
(merge (default-chat-icon color)
|
||||
{:width 48
|
||||
:height 48
|
||||
:border-radius 48}))
|
||||
|
||||
(defn default-token-icon-chat-list [color]
|
||||
(merge (default-chat-icon color)
|
||||
{:width 20
|
||||
:height 20
|
||||
:border-radius 20}))
|
||||
|
||||
(defn default-chat-icon-chat-toolbar [color]
|
||||
(merge (default-chat-icon color)
|
||||
{:width 36
|
||||
|
|
@ -46,12 +73,48 @@
|
|||
:width 40
|
||||
:height 40})
|
||||
|
||||
(defn chat-icon-redesign [size]
|
||||
{:margin 4
|
||||
:border-radius (/ size 2)
|
||||
:width size
|
||||
:height size})
|
||||
|
||||
(def chat-icon-chat-list
|
||||
(merge chat-icon
|
||||
{:width 40
|
||||
:height 40
|
||||
:margin 0}))
|
||||
|
||||
(defn community-status-icon [size]
|
||||
{:margin 4
|
||||
:border-radius 10
|
||||
:width size
|
||||
:height size})
|
||||
|
||||
(def community-icon-chat-list
|
||||
(merge chat-icon
|
||||
{:width 48
|
||||
:height 48
|
||||
:margin 0}))
|
||||
|
||||
(defn community-icon-chat-list-redesign [size]
|
||||
(merge (chat-icon size)
|
||||
{:width size
|
||||
:height size
|
||||
:margin 0}))
|
||||
|
||||
(defn community-status-chat-list-icon [size]
|
||||
(merge (community-status-icon size)
|
||||
{:width size
|
||||
:height size
|
||||
:margin 0}))
|
||||
|
||||
(def token-icon-chat-list
|
||||
(merge chat-icon
|
||||
{:width 20
|
||||
:height 20
|
||||
:margin 0}))
|
||||
|
||||
(def chat-icon-chat-toolbar
|
||||
(merge chat-icon
|
||||
{:width 36
|
||||
|
|
@ -74,6 +137,14 @@
|
|||
{:width 40
|
||||
:height 40})
|
||||
|
||||
(def token-icon-container-chat-list
|
||||
{:width 20
|
||||
:height 20})
|
||||
|
||||
(def community-icon-container-chat-list
|
||||
{:width 48
|
||||
:height 48})
|
||||
|
||||
(defn container-list-size [size]
|
||||
{:width size
|
||||
:height size})
|
||||
|
|
|
|||
|
|
@ -40,4 +40,4 @@
|
|||
(when (seq right-accessories)
|
||||
{:right-accessories right-accessories})
|
||||
(when new-ui?
|
||||
{:background (quo2.colors/theme-colors quo2.colors/white quo2.colors/divider-dark)}))])]))
|
||||
{:background (quo2.colors/theme-colors quo2.colors/neutral-5 quo2.colors/neutral-95)}))])]))
|
||||
|
|
|
|||
|
|
@ -0,0 +1,48 @@
|
|||
(ns status-im.ui.components.topnav
|
||||
(:require
|
||||
[re-frame.core :as re-frame]
|
||||
[quo2.components.button :as quo2.button]
|
||||
[status-im.qr-scanner.core :as qr-scanner]
|
||||
[status-im.utils.handlers :refer [<sub]]
|
||||
[status-im.i18n.i18n :as i18n]
|
||||
[status-im.ui.screens.home.styles :as styles]
|
||||
[status-im.ui.components.react :as react]))
|
||||
|
||||
(defn qr-scanner []
|
||||
[quo2.button/button
|
||||
{:icon true
|
||||
:size 32
|
||||
:type :grey
|
||||
:style {:margin-left 12}
|
||||
:accessibility-label :scan-qr-code-button
|
||||
:on-press #(re-frame/dispatch [::qr-scanner/scan-code
|
||||
{:title (i18n/label :t/add-bootnode)
|
||||
:handler :bootnodes.callback/qr-code-scanned}])}
|
||||
:main-icons2/scanner])
|
||||
|
||||
(defn qr-code []
|
||||
[quo2.button/button
|
||||
{:icon true
|
||||
:type :grey
|
||||
:size 32
|
||||
:style {:margin-left 12}
|
||||
:accessibility-label :contact-qr-code-button}
|
||||
:main-icons2/qr-code])
|
||||
|
||||
(defn notifications-button []
|
||||
(let [notif-count (<sub [:activity.center/notifications-count])]
|
||||
[:<>
|
||||
[quo2.button/button {:icon true
|
||||
:type :grey
|
||||
:size 32
|
||||
:style {:margin-left 12}
|
||||
:accessibility-label :notifications-button
|
||||
:on-press #(do
|
||||
(re-frame/dispatch [:mark-all-activity-center-notifications-as-read])
|
||||
(re-frame/dispatch [:navigate-to :notifications-center]))}
|
||||
:main-icons2/notifications]
|
||||
(when (pos? notif-count)
|
||||
[react/view {:style (merge (styles/counter-public-container) {:top 5 :right 5})
|
||||
:pointer-events :none}
|
||||
[react/view {:style styles/counter-public
|
||||
:accessibility-label :notifications-unread-badge}]])]))
|
||||
|
|
@ -5,6 +5,7 @@
|
|||
[status-im.ui.screens.keycard.views :as keycard]
|
||||
[status-im.ui.screens.multiaccounts.key-storage.views :as key-storage]
|
||||
[status-im.ui.screens.about-app.views :as about-app]
|
||||
[status-im.ui.screens.communities.sort-communities :as sort]
|
||||
[status-im.ui.screens.multiaccounts.recover.views :as recover.views]
|
||||
[quo.core :as quo]))
|
||||
|
||||
|
|
@ -37,7 +38,10 @@
|
|||
(merge recover.views/bottom-sheet)
|
||||
|
||||
(= view :migrate-account-password)
|
||||
(merge key-storage/migrate-account-password))]
|
||||
(merge key-storage/migrate-account-password)
|
||||
|
||||
(= view :sort-communities)
|
||||
(merge sort/sort-communities))]
|
||||
[quo/bottom-sheet opts
|
||||
(when content
|
||||
[content (when options options)])]))
|
||||
[content (when options options)])]))
|
||||
|
|
@ -0,0 +1,237 @@
|
|||
(ns status-im.ui.screens.communities.communities-list-redesign
|
||||
(:require [re-frame.core :as re-frame]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.i18n.i18n :as i18n]
|
||||
[status-im.ui.components.list.views :as list]
|
||||
[status-im.ui.components.react :as react]
|
||||
[quo2.components.community-card-view :as community-card]
|
||||
[quo2.components.separator :as separator]
|
||||
[quo2.components.text :as quo2.text]
|
||||
[quo2.components.button :as quo2.button]
|
||||
[quo2.components.counter :as quo2.counter]
|
||||
[quo2.components.filter-tags :as filter-tags]
|
||||
[quo2.components.filter-tag :as filter-tag]
|
||||
[quo2.foundations.colors :as quo2.colors]
|
||||
[quo.components.safe-area :as safe-area]
|
||||
[quo2.components.tabs :as quo2.tabs]
|
||||
[status-im.ui.screens.chat.photos :as photos]
|
||||
[status-im.react-native.resources :as resources]
|
||||
[status-im.multiaccounts.core :as multiaccounts]
|
||||
[status-im.ui.components.topbar :as topbar]
|
||||
[status-im.ui.components.plus-button :as plus-button]
|
||||
[status-im.utils.handlers :refer [<sub]]
|
||||
[status-im.ui.components.topnav :as topnav]
|
||||
[quo2.components.icon :as icons]))
|
||||
|
||||
(def selected-tab (reagent/atom :all))
|
||||
(def view-type (reagent/atom :card-view))
|
||||
(def sort-list-by (reagent/atom :name))
|
||||
|
||||
(def community-item-data
|
||||
{:data {:status :gated
|
||||
:locked true
|
||||
:cover (resources/get-image :community-cover)
|
||||
:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}]
|
||||
:tags [{:id 1 :tag-label (i18n/label :t/music) :resource (resources/get-image :music)}
|
||||
{:id 2 :tag-label (i18n/label :t/lifestyle) :resource (resources/get-image :lifestyle)}
|
||||
{:id 3 :tag-label (i18n/label :t/podcasts) :resource (resources/get-image :podcasts)}]}})
|
||||
|
||||
(defn plus-button []
|
||||
(let [logging-in? (<sub [:multiaccounts/login])]
|
||||
[plus-button/plus-button
|
||||
{:on-press (when-not logging-in?
|
||||
#(re-frame/dispatch [:bottom-sheet/show-sheet :add-new {}]))
|
||||
:loading logging-in?
|
||||
:accessibility-label :new-community-button}]))
|
||||
|
||||
(defn render-other-fn [community-item]
|
||||
(let [item (merge community-item
|
||||
(get community-item-data :data)
|
||||
{:featured false})]
|
||||
(if (= @view-type :card-view)
|
||||
[community-card/community-card-view-item item]
|
||||
[community-card/communities-list-view-item item])))
|
||||
|
||||
(defn render-featured-fn [community-item]
|
||||
(let [item (merge community-item
|
||||
(get community-item-data :data)
|
||||
{:featured true})]
|
||||
[community-card/community-card-view-item item]))
|
||||
|
||||
(defn community-list-key-fn [item]
|
||||
(:id item))
|
||||
|
||||
(defn get-item-layout-js [_ index]
|
||||
#js {:length 64 :offset (* 64 index) :index index})
|
||||
|
||||
(defn community-segments []
|
||||
[react/view {:flex 1
|
||||
:margin-bottom 8
|
||||
:padding-horizontal 20}
|
||||
[react/view {:flex-direction :row
|
||||
:padding-top 20
|
||||
:padding-bottom 8
|
||||
:height 60}
|
||||
[react/view {:flex 1}
|
||||
[quo2.tabs/tabs {:size 32
|
||||
:on-change #(reset! selected-tab %)
|
||||
:default-active :all
|
||||
:data [{:id :all :label (i18n/label :t/all)}
|
||||
{:id :open :label (i18n/label :t/open)}
|
||||
{:id :gated :label (i18n/label :t/gated)}]}]]
|
||||
[react/view {:flex-direction :row}
|
||||
[quo2.button/button
|
||||
{:icon true
|
||||
:type :outline
|
||||
:size 32
|
||||
:style {:margin-right 12}
|
||||
:on-press #(re-frame/dispatch [:bottom-sheet/show-sheet :sort-communities {}])}
|
||||
:main-icons2/lightning]
|
||||
[quo2.button/button
|
||||
{:icon true
|
||||
:type :outline
|
||||
:size 32
|
||||
:on-press #(if (= @view-type :card-view)
|
||||
(reset! view-type :list-view)
|
||||
(reset! view-type :card-view))}
|
||||
(if (= @view-type :card-view)
|
||||
:main-icons2/card-view
|
||||
:main-icons2/list-view)]]]])
|
||||
|
||||
(defn featured-communities [communities]
|
||||
[list/flat-list
|
||||
{:key-fn community-list-key-fn
|
||||
:horizontal true
|
||||
:getItemLayout get-item-layout-js
|
||||
:keyboard-should-persist-taps :always
|
||||
:shows-horizontal-scroll-indicator false
|
||||
:data communities
|
||||
:render-fn render-featured-fn}])
|
||||
|
||||
(defn other-communities [communities sort-list-by]
|
||||
(let [sorted-communities (sort-by sort-list-by communities)]
|
||||
[list/flat-list
|
||||
{:key-fn community-list-key-fn
|
||||
:getItemLayout get-item-layout-js
|
||||
:keyboard-should-persist-taps :always
|
||||
:shows-horizontal-scroll-indicator false
|
||||
:data sorted-communities
|
||||
:render-fn render-other-fn}]))
|
||||
|
||||
(defn community-segments-view [communities]
|
||||
(let [tab @selected-tab
|
||||
sort-list-by @sort-list-by]
|
||||
(case tab
|
||||
:all
|
||||
[other-communities communities sort-list-by]
|
||||
|
||||
:open
|
||||
[other-communities communities sort-list-by]
|
||||
|
||||
:gated
|
||||
[other-communities communities sort-list-by])))
|
||||
|
||||
(defn featured-communities-section [communities]
|
||||
(let [count (reagent/atom {:value 2 :type :grey})]
|
||||
[react/view {:flex 1}
|
||||
[react/view {:flex-direction :row
|
||||
:height 30
|
||||
:padding-top 8
|
||||
:justify-content :space-between
|
||||
:padding-horizontal 20}
|
||||
[react/view {:flex-direction :row
|
||||
:align-items :center}
|
||||
[quo2.text/text {:accessibility-label :featured-communities-title
|
||||
:weight :semi-bold
|
||||
:size :paragraph-1
|
||||
:style {:margin-right 6}}
|
||||
(i18n/label :t/featured)]
|
||||
[quo2.counter/counter @count (:value @count)]]
|
||||
[icons/icon :main-icons2/info {:container-style {:align-items :center
|
||||
:justify-content :center}
|
||||
:resize-mode :center
|
||||
:size 20
|
||||
:color (quo2.colors/theme-colors
|
||||
quo2.colors/neutral-50
|
||||
quo2.colors/neutral-40)}]]
|
||||
[react/view {:margin-top 8
|
||||
:padding-left 20}
|
||||
[featured-communities communities]]]))
|
||||
|
||||
(defn title-column []
|
||||
[react/view
|
||||
{:flex-direction :row
|
||||
:align-items :center
|
||||
:height 56
|
||||
:padding-vertical 12
|
||||
:padding-horizontal 20}
|
||||
[react/view
|
||||
{:flex 1}
|
||||
[quo2.text/text {:accessibility-label :communities-screen-title
|
||||
:margin-right 6
|
||||
:weight :semi-bold
|
||||
:size :heading-1}
|
||||
(i18n/label :t/communities)]]
|
||||
[plus-button]])
|
||||
|
||||
(defn community-filter-tags []
|
||||
(let [filters [{:id 1 :tag-label (i18n/label :t/music) :resource (resources/get-image :music)}
|
||||
{:id 2 :tag-label (i18n/label :t/lifestyle) :resource (resources/get-image :lifestyle)}
|
||||
{:id 3 :tag-label (i18n/label :t/podcasts) :resource (resources/get-image :podcasts)}
|
||||
{:id 3 :tag-label (i18n/label :t/podcasts) :resource (resources/get-image :podcasts)}]]
|
||||
[react/scroll-view {:horizontal true
|
||||
:height 48
|
||||
:shows-horizontal-scroll-indicator false
|
||||
:scroll-event-throttle 64
|
||||
:padding-top 4
|
||||
:padding-bottom 12
|
||||
:padding-horizontal 20}
|
||||
[react/view {:flex-direction :row}
|
||||
[react/view {:margin-right 8}
|
||||
[filter-tag/filter-tag {:resource :main-icons2/search
|
||||
:labelled false
|
||||
:type :icon
|
||||
:icon-color (quo2.colors/theme-colors
|
||||
quo2.colors/black
|
||||
quo2.colors/white)}]]
|
||||
[filter-tags/tags {:data filters
|
||||
:labelled true
|
||||
:type :emoji
|
||||
:icon-color (quo2.colors/theme-colors
|
||||
quo2.colors/neutral-50
|
||||
quo2.colors/neutral-40)}]]]))
|
||||
|
||||
(defn views []
|
||||
(let [multiaccount (<sub [:multiaccount])
|
||||
communities (<sub [:communities/communities])]
|
||||
(fn []
|
||||
[safe-area/consumer
|
||||
(fn [insets]
|
||||
[react/view {:style {:flex 1
|
||||
:padding-top (:top insets)
|
||||
:background-color (quo2.colors/theme-colors
|
||||
quo2.colors/neutral-5
|
||||
quo2.colors/neutral-95)}}
|
||||
[topbar/topbar
|
||||
{:navigation :none
|
||||
:left-component [react/view {:margin-left 16}
|
||||
[photos/photo (multiaccounts/displayed-photo multiaccount)
|
||||
{:size 32}]]
|
||||
:right-component [react/view {:flex-direction :row
|
||||
:margin-right 16}
|
||||
[topnav/qr-scanner]
|
||||
[topnav/qr-code]
|
||||
[topnav/notifications-button]]
|
||||
:new-ui? true
|
||||
:border-bottom false}]
|
||||
[title-column]
|
||||
[react/scroll-view
|
||||
[community-filter-tags]
|
||||
[featured-communities-section communities]
|
||||
(when communities
|
||||
[:<>
|
||||
[react/view {:margin-vertical 4
|
||||
:padding-horizontal 20}
|
||||
[separator/separator]]
|
||||
[community-segments]])
|
||||
[community-segments-view communities]]])])))
|
||||
|
|
@ -0,0 +1,149 @@
|
|||
(ns status-im.ui.screens.communities.community-membership-status
|
||||
(:require [re-frame.core :as re-frame]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.i18n.i18n :as i18n]
|
||||
[status-im.ui.components.list.views :as list]
|
||||
[status-im.ui.components.react :as react]
|
||||
[quo2.components.community-card-view :as community-card]
|
||||
[quo2.components.text :as quo2.text]
|
||||
[quo2.foundations.colors :as quo2.colors]
|
||||
[quo.components.safe-area :as safe-area]
|
||||
[quo2.components.tabs :as quo2.tabs]
|
||||
[status-im.ui.screens.chat.photos :as photos]
|
||||
[status-im.react-native.resources :as resources]
|
||||
[status-im.multiaccounts.core :as multiaccounts]
|
||||
[status-im.ui.components.topbar :as topbar]
|
||||
[status-im.ui.components.topnav :as topnav]
|
||||
[status-im.utils.handlers :refer [<sub]]
|
||||
[status-im.ui.components.plus-button :as components.plus-button]))
|
||||
|
||||
(def selected-tab (reagent/atom :all))
|
||||
|
||||
(defn plus-button []
|
||||
(let [logging-in? (<sub [:multiaccounts/login])]
|
||||
[components.plus-button/plus-button
|
||||
{:on-press (when-not logging-in?
|
||||
#(re-frame/dispatch [:bottom-sheet/show-sheet :add-new {}]))
|
||||
:loading logging-in?
|
||||
:accessibility-label :new-chat-button}]))
|
||||
|
||||
(defn render-fn [community-item]
|
||||
[community-card/communities-membership-list-item community-item])
|
||||
|
||||
(defn community-list-key-fn [item]
|
||||
(:id item))
|
||||
|
||||
(defn get-item-layout-js [_ index]
|
||||
#js {:length 64 :offset (* 64 index) :index index})
|
||||
|
||||
(defn community-tabs []
|
||||
[react/view {:flex-direction :row
|
||||
:align-items :center
|
||||
:padding-bottom 8
|
||||
:padding-top 16
|
||||
:height 56
|
||||
:padding-horizontal 20}
|
||||
[react/view {:flex 1}
|
||||
[quo2.tabs/tabs {:size 32
|
||||
:on-change #(reset! selected-tab %)
|
||||
:default-active :all
|
||||
:data [{:id :all :label (i18n/label :chats/joined)}
|
||||
{:id :open :label (i18n/label :t/pending)}
|
||||
{:id :gated :label (i18n/label :t/opened)}]}]]])
|
||||
|
||||
(defn popular-communities [communities]
|
||||
[list/flat-list
|
||||
{:key-fn community-list-key-fn
|
||||
:getItemLayout get-item-layout-js
|
||||
:keyboard-should-persist-taps :always
|
||||
:shows-horizontal-scroll-indicator false
|
||||
:data communities
|
||||
:render-fn render-fn}])
|
||||
|
||||
(defn community-tabs-view [communities]
|
||||
(let [tab @selected-tab]
|
||||
[react/view {:padding-left 20}
|
||||
(case tab
|
||||
:all
|
||||
[popular-communities communities]
|
||||
|
||||
:open
|
||||
[popular-communities communities]
|
||||
|
||||
:gated
|
||||
[popular-communities communities])]))
|
||||
|
||||
(defn title-column []
|
||||
[react/view {:flex-direction :row
|
||||
:align-items :center
|
||||
:padding-vertical 12
|
||||
:padding-horizontal 20}
|
||||
[react/view {:flex 1}
|
||||
[quo2.text/text {:accessibility-label :communities-screen-title
|
||||
:margin-right 6
|
||||
:weight :semi-bold
|
||||
:size :heading-1}
|
||||
(i18n/label :t/communities)]]
|
||||
[plus-button]])
|
||||
|
||||
(defn discover-card []
|
||||
[react/view {:background-color (quo2.colors/theme-colors
|
||||
quo2.colors/white
|
||||
quo2.colors/neutral-80)
|
||||
:align-items :center
|
||||
:padding-horizontal 12
|
||||
:margin-vertical 8
|
||||
:border-radius 12
|
||||
:margin-horizontal 20
|
||||
:height 56
|
||||
:flex-direction :row}
|
||||
[react/view {:flex 1}
|
||||
[quo2.text/text {:accessibility-label :community-name-text
|
||||
:ellipsize-mode :tail
|
||||
:number-of-lines 1
|
||||
:weight :medium
|
||||
:size :paragraph-1}
|
||||
(i18n/label :t/discover-communities)]
|
||||
[quo2.text/text {:accessibility-label :community-name-text
|
||||
:ellipsize-mode :tail
|
||||
:number-of-lines 1
|
||||
:color (quo2.colors/theme-colors
|
||||
quo2.colors/neutral-50
|
||||
quo2.colors/neutral-40)
|
||||
:weight :medium
|
||||
:size :paragraph-2}
|
||||
(i18n/label :t/whats-trending)]]
|
||||
[react/image {:source (resources/get-image :discover)
|
||||
:position :absolute
|
||||
:top 6
|
||||
:right 24
|
||||
:style {:width 56
|
||||
:height 50}}]])
|
||||
|
||||
(defn views []
|
||||
(let [multiaccount (<sub [:multiaccount])
|
||||
communities (<sub [:communities/communities])]
|
||||
(fn []
|
||||
[safe-area/consumer
|
||||
(fn []
|
||||
[react/view {:style {:flex 1
|
||||
:background-color (quo2.colors/theme-colors
|
||||
quo2.colors/neutral-5
|
||||
quo2.colors/neutral-95)}}
|
||||
[topbar/topbar
|
||||
{:navigation :none
|
||||
:left-component [react/view {:margin-left 12}
|
||||
[photos/photo (multiaccounts/displayed-photo multiaccount)
|
||||
{:size 32}]]
|
||||
:right-component [react/view {:flex-direction :row
|
||||
:margin-right 12}
|
||||
[topnav/qr-scanner]
|
||||
[topnav/qr-code]
|
||||
[topnav/notifications-button]]
|
||||
:new-ui? true
|
||||
:border-bottom false}]
|
||||
[title-column]
|
||||
[react/scroll-view
|
||||
[discover-card]
|
||||
[community-tabs]
|
||||
[community-tabs-view communities]]])])))
|
||||
|
|
@ -19,4 +19,19 @@
|
|||
|
||||
:else
|
||||
[chat-icon.screen/chat-icon-view-chat-list
|
||||
id true name color false false])))
|
||||
id true name color false false])))
|
||||
|
||||
(defn community-icon-redesign [{:keys [id name images color]} size]
|
||||
(let [color (or color (rand-nth colors/chat-colors))
|
||||
thumbnail-image (get-in images [:thumbnail :uri])]
|
||||
(cond
|
||||
(= id constants/status-community-id)
|
||||
[react/image {:source (resources/get-image :status-logo)
|
||||
:style {:width size
|
||||
:height size}}]
|
||||
(seq thumbnail-image)
|
||||
[photos/photo thumbnail-image {:size size}]
|
||||
|
||||
:else
|
||||
[chat-icon.screen/chat-icon-view-chat-list-redesign
|
||||
id true name color size])))
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
(ns status-im.ui.screens.communities.sort-communities
|
||||
(:require [re-frame.core :as re-frame]
|
||||
[quo2.components.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo.core :as quo]
|
||||
[quo.theme :as theme]
|
||||
[status-im.ui.components.react :as react]
|
||||
[status-im.i18n.i18n :as i18n]))
|
||||
|
||||
(defn hide-sheet-and-dispatch [event]
|
||||
(re-frame/dispatch [:bottom-sheet/hide])
|
||||
(re-frame/dispatch event))
|
||||
|
||||
(defn sort-communities-view []
|
||||
[:<>
|
||||
[react/view {:margin-left 20
|
||||
:padding-bottom 12}
|
||||
[text/text
|
||||
{:style {:accessibility-label :sort-communities-title
|
||||
:color (colors/theme-colors
|
||||
colors/neutral-50
|
||||
colors/neutral-40)
|
||||
:weight :medium
|
||||
:size :paragraph-2}}
|
||||
(i18n/label :t/sort-communities)]]
|
||||
[quo/list-item
|
||||
{:theme (theme/get-theme)
|
||||
:title (i18n/label :t/alphabetically)
|
||||
:accessibility-label :alphabetically
|
||||
:icon :main-icons2/alphabetically
|
||||
:new-ui? true}]
|
||||
[quo/list-item
|
||||
{:theme (theme/get-theme)
|
||||
:title (i18n/label :t/total-members)
|
||||
:accessibility-label :total-members
|
||||
:icon :main-icons2/members
|
||||
:new-ui? true}]
|
||||
[quo/list-item
|
||||
{:theme (theme/get-theme)
|
||||
:title (i18n/label :t/active-members)
|
||||
:accessibility-label :active-members
|
||||
:icon :main-icons2/lightning
|
||||
:new-ui? true}]
|
||||
[quo/list-item
|
||||
{:theme (theme/get-theme)
|
||||
:title (i18n/label :t/mutal-contacts)
|
||||
:accessibility-label :mutual-contacts
|
||||
:icon :main-icons2/friend
|
||||
:new-ui? true}]])
|
||||
|
||||
(def sort-communities
|
||||
{:content sort-communities-view})
|
||||
|
|
@ -1,4 +1,6 @@
|
|||
(ns status-im.ui.screens.communities.styles)
|
||||
(ns status-im.ui.screens.communities.styles
|
||||
(:require
|
||||
[quo2.foundations.colors :as colors]))
|
||||
|
||||
(def category-item
|
||||
{:flex 1
|
||||
|
|
@ -6,3 +8,92 @@
|
|||
:align-items :center
|
||||
:height 52
|
||||
:padding-left 18})
|
||||
|
||||
(defn community-card [radius]
|
||||
{:shadow-offset {:width 0
|
||||
:height 2}
|
||||
:shadow-radius radius
|
||||
:shadow-opacity 1
|
||||
:shadow-color colors/shadow
|
||||
:border-radius radius
|
||||
:justify-content :space-between
|
||||
:elevation 2
|
||||
:background-color (colors/theme-colors
|
||||
colors/white
|
||||
colors/neutral-90)})
|
||||
|
||||
(defn stats-count-container []
|
||||
{:flex-direction :row
|
||||
:align-items :center
|
||||
:margin-right 16})
|
||||
|
||||
(defn card-stats-container []
|
||||
{:flex-direction :row
|
||||
:position :absolute
|
||||
:top 116
|
||||
:left 12
|
||||
:right 12})
|
||||
|
||||
(defn list-stats-container []
|
||||
{:flex-direction :row
|
||||
:align-items :center})
|
||||
|
||||
(defn community-tags-container []
|
||||
{:flex-direction :row
|
||||
:position :absolute
|
||||
:top 154
|
||||
:left 12
|
||||
:right 12})
|
||||
|
||||
(defn card-view-content-container []
|
||||
{:flex 1
|
||||
:position :absolute
|
||||
:top 40
|
||||
:left 0
|
||||
:right 0
|
||||
:bottom 0
|
||||
:border-radius 16
|
||||
:padding-horizontal 12
|
||||
:background-color (colors/theme-colors
|
||||
colors/white
|
||||
colors/neutral-90)})
|
||||
|
||||
(defn card-view-chat-icon []
|
||||
{:border-radius 48
|
||||
:position :absolute
|
||||
:top -24
|
||||
:left 12
|
||||
:padding 2
|
||||
:background-color (colors/theme-colors
|
||||
colors/white
|
||||
colors/neutral-90)})
|
||||
|
||||
(defn list-view-content-container []
|
||||
{:flex-direction :row
|
||||
:border-radius 16
|
||||
:align-items :center
|
||||
:background-color (colors/theme-colors
|
||||
colors/white
|
||||
colors/neutral-90)})
|
||||
|
||||
(defn list-view-chat-icon []
|
||||
{:border-radius 32
|
||||
:padding 12})
|
||||
|
||||
(defn community-title-description-container []
|
||||
{:position :absolute
|
||||
:top 32
|
||||
:left 12
|
||||
:right 12})
|
||||
|
||||
(defn community-cover-container []
|
||||
{:flex-direction :row
|
||||
:height 64
|
||||
:border-top-right-radius 20
|
||||
:border-top-left-radius 20
|
||||
:background-color colors/primary-50-opa-20})
|
||||
|
||||
(defn permission-tag-styles []
|
||||
{:position :absolute
|
||||
:top 8
|
||||
:right 8})
|
||||
|
|
@ -442,6 +442,7 @@
|
|||
"disconnected": "Chat offline",
|
||||
"discover": "Discover",
|
||||
"dismiss": "Dismiss",
|
||||
"discover-communities": "Discover Communities",
|
||||
"done": "Done",
|
||||
"edit": "Edit",
|
||||
"edit-group": "Edit group",
|
||||
|
|
@ -959,7 +960,6 @@
|
|||
"notifications-switch": "Show notifications",
|
||||
"notifications-non-contacts": "Notifications from non-contacts",
|
||||
"notifications-transactions": "Wallet transactions",
|
||||
"local-notifications": "Local notifications",
|
||||
"send-push-notifications": "Send Push Notifications",
|
||||
"send-push-notifications-description": "When disabled, the person receiving your messages won't be notified of their arrival",
|
||||
"push-notifications-server-enabled": "Server enabled",
|
||||
|
|
@ -1554,6 +1554,7 @@
|
|||
"master-account": "Master account",
|
||||
"back-up": "Back up",
|
||||
"key-on-device": "Private key is saved on this device",
|
||||
"whats-trending": "See what`s trending",
|
||||
"seed-key-uid-mismatch": "Seed doesn't match",
|
||||
"seed-key-uid-mismatch-desc-1": "The seed phrase you entered does not match {{multiaccount-name}}",
|
||||
"seed-key-uid-mismatch-desc-2": "To manage keys for this account verify your seed phrase and try again.",
|
||||
|
|
@ -1681,6 +1682,11 @@
|
|||
"your-tip-limit": "Your tip limit",
|
||||
"your-price-limit": "Your price limit",
|
||||
"suggested-min-tip": "Suggested min. tip",
|
||||
"sort-communities": "Sort communities",
|
||||
"alphabetically": "Alphabetically",
|
||||
"active-members": "Active members",
|
||||
"total-members": "Total members",
|
||||
"mutal-contacts": "Mutual contacts",
|
||||
"suggested-price-limit": "Suggested price limit",
|
||||
"include": "Include",
|
||||
"category": "Category",
|
||||
|
|
@ -1749,9 +1755,9 @@
|
|||
"send-contact-request-message": "To start a chat you need to become contacts",
|
||||
"contact-request": "Contact request",
|
||||
"say-hi": "Say hi",
|
||||
"opened" : "Opened",
|
||||
"accepted": "Accepted",
|
||||
"declined": "Declined",
|
||||
"contact-request": "Contact request",
|
||||
"contact-request-header": "👋 Contact requests",
|
||||
"contact-request-declined": "Declined ⓧ",
|
||||
"contact-request-accepted": "Accepted ✓",
|
||||
|
|
@ -1762,5 +1768,14 @@
|
|||
"positive": "Positive",
|
||||
"public": "Public",
|
||||
"successful-connection": "Successful Connection",
|
||||
"all-connections": "All Connections"
|
||||
"all-connections": "All Connections",
|
||||
"K": "K",
|
||||
"M": "M",
|
||||
"gated": "Gated",
|
||||
"featured" : "Featured",
|
||||
"music": "Music",
|
||||
"lifestyle": "Lifestyle",
|
||||
"podcasts": "Podcasts",
|
||||
"NFT":"NFT"
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue