status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

quo2 core (#14319) 

* quo2 core
This commit is contained in:
flexsurfer 2022-11-10 12:10:16 +01:00 committed by GitHub
parent aca296030c
commit 8168d224d3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 297 additions and 220 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/quo2/components/community/community_card_view.cljs
View File

@ -1,48 +1,44 @@
(ns quo2.components.community.community-card-view (ns quo2.components.community.community-card-view
(:require (:require
[quo2.components.community.community-view :as community-view] [quo2.components.community.community-view :as community-view]
[status-im.utils.handlers :refer [<sub]] [quo2.components.community.style :as style]
[status-im.ui.components.react :as react] [react-native.core :as rn]))
[status-im.ui.screens.communities.styles :as styles]
[status-im.ui.screens.communities.icon :as communities.icon]))
;; TODO move this component to ui namespace, status-im or re-frame ns shouldn't be used in quo
(defn community-card-view-item (defn community-card-view-item
[{:keys [name description locked [{:keys [name description locked
status tokens cover tags featured] :as community} on-press] status tokens cover tags featured]} on-press]
(let [width (* (<sub [:dimensions/window-width]) 0.90)] [rn/touchable-opacity {:on-press on-press}
[react/touchable-opacity {:on-press on-press} [rn/view {:style (merge (style/community-card 20)
[react/view {:style (merge (styles/community-card 20) {:margin-bottom 16}
{:margin-bottom 16} (if featured
(if featured {:margin-right 12}
{:margin-right 12 {:flex 1
:width width} :margin-horizontal 20}))}
{:flex 1 [rn/view {:style {:height 230
:margin-horizontal 20}))} :border-radius 20}
[react/view {:style {:height 230 :on-press on-press}
:border-radius 20} [rn/view
:on-press on-press} {:flex 1}
[react/view [rn/view (style/community-cover-container 40)
{:flex 1} [rn/image
[react/view (styles/community-cover-container 40) {:source cover
[react/image :style
{:source cover {:flex 1
:style :border-radius 20}}]]
{:flex 1 [rn/view (style/card-view-content-container 12)
:border-radius 20}}]] [rn/view (style/card-view-chat-icon 48)]
[react/view (styles/card-view-content-container 12) ;;TODO new pure component based on quo2 should be implemented without status-im usage
[react/view (styles/card-view-chat-icon 48) ;[communities.icon/community-icon-redesign community 48]]
[communities.icon/community-icon-redesign community 48]] (when (= status :gated)
(when (= status :gated) [rn/view (style/permission-tag-styles)
[react/view (styles/permission-tag-styles) [community-view/permission-tag-container {:locked locked
[community-view/permission-tag-container {:locked locked :status status
:status status :tokens tokens}]])
:tokens tokens}]]) [community-view/community-title
[community-view/community-title {:title name
{:title name :description description}]
:description description}] [rn/view {:style (style/card-stats-position)}
[react/view {:style (styles/card-stats-position)} [community-view/community-stats-column :card-view]]
[community-view/community-stats-column :card-view]] [rn/view {:style (style/community-tags-position)}
[react/view {:style (styles/community-tags-position)} [community-view/community-tags tags]]]]]]])
[community-view/community-tags tags]]]]]]]))

135
src/quo2/components/community/community_list_view.cljs
View File

@ -5,93 +5,78 @@
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.components.counter.counter :as counter] [quo2.components.counter.counter :as counter]
[quo2.components.icon :as icons] [quo2.components.icon :as icons]
[status-im.communities.core :as communities] [quo2.components.community.style :as style]
[status-im.utils.handlers :refer [>evt]] [react-native.core :as rn]))
[status-im.ui.components.react :as react]
[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]))
;; TODO move this component to ui namespace, status-im or re-frame ns shouldn't be used in quo (defn communities-list-view-item [props {:keys [name locked? status notifications
(defn communities-list-view-item [{:keys [id name locked? status notifications tokens background-color]}]
tokens background-color] :as community}] [rn/view {:style (merge (style/community-card 16)
[react/view {:style (merge (styles/community-card 16) {:margin-bottom 12
{:margin-bottom 12 :margin-horizontal 20})}
:margin-horizontal 20})} [rn/touchable-highlight (merge {:style {:height 56
[react/view {:style {:height 56 :border-radius 16}}
:border-radius 16} props)
:on-press (fn [] [rn/view {:flex 1}
(>evt [::communities/load-category-states id]) [rn/view {:flex-direction :row
(>evt [:dismiss-keyboard]) :border-radius 16
(>evt [:navigate-to :community {:community-id id}])) :padding-horizontal 12
:on-long-press #(>evt [:bottom-sheet/show-sheet :align-items :center
{:content (fn [] :padding-vertical 8
[community/community-actions community])}])} :background-color background-color}
[react/view {:flex 1} [rn/view]
[react/view {:flex-direction :row ;;TODO new pure component based on quo2 should be implemented without status-im usage
:border-radius 16 ;[communities.icon/community-icon-redesign community 32]]
:padding-horizontal 12 [rn/view {:flex 1
:align-items :center :margin-horizontal 12}
: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 [text/text {:weight :semi-bold
:size :paragraph-1 :size :paragraph-1
:accessibility-label :community-name-text :accessibility-label :community-name-text
:number-of-lines 1 :number-of-lines 1
:ellipsize-mode :tail :ellipsize-mode :tail
:style {:color (when (= notifications :muted) :style {:color (when (= notifications :muted)
(colors/theme-colors (colors/theme-colors
colors/neutral-40 colors/neutral-40
colors/neutral-60))}} colors/neutral-60))}}
name] name]
[community-view/community-stats-column :list-view]] [community-view/community-stats-column :list-view]]
(if (= status :gated) (if (= status :gated)
[community-view/permission-tag-container {:locked? locked? [community-view/permission-tag-container {:locked? locked?
:tokens tokens}] :tokens tokens}]
(cond (cond
(= notifications :unread-messages-count) (= notifications :unread-messages-count)
[react/view {:style {:width 8 [rn/view {:style {:width 8
:height 8 :height 8
:border-radius 4 :border-radius 4
:background-color (colors/theme-colors :background-color (colors/theme-colors
colors/neutral-40 colors/neutral-40
colors/neutral-60)}}] colors/neutral-60)}}]
(= notifications :unread-mentions-count) (= notifications :unread-mentions-count)
[counter/counter {:type :default} 5] [counter/counter {:type :default} 5]
(= notifications :muted) (= notifications :muted)
[icons/icon :main-icons2/muted {:container-style {:align-items :center [icons/icon :main-icons2/muted {:container-style {:align-items :center
:justify-content :center} :justify-content :center}
:resize-mode :center :resize-mode :center
:size 20 :size 20
:color (colors/theme-colors :color (colors/theme-colors
colors/neutral-40 colors/neutral-40
colors/neutral-50)}]))]]]]) colors/neutral-50)}]))]]]])
(defn communities-membership-list-item [{:keys [id name status tokens locked?] :as community}] (defn communities-membership-list-item [props {:keys [name status tokens locked?]}]
[react/view {:margin-bottom 20} [rn/view {:margin-bottom 20}
[react/touchable-highlight {:underlay-color colors/primary-50-opa-5 [rn/touchable-highlight (merge {:underlay-color colors/primary-50-opa-5
:style {:border-radius 12} :style {:border-radius 12}}
:on-press (fn [] props)
(>evt [::communities/load-category-states id]) [rn/view {:flex 1}
(>evt [:dismiss-keyboard]) [rn/view {:flex-direction :row
(>evt [:navigate-to :community {:community-id id}])) :border-radius 16
:on-long-press #(>evt [:bottom-sheet/show-sheet :align-items :center}
{:content (fn [] ;;TODO new pure component based on quo2 should be implemented without status-im usage
[community/community-actions community])}])} ;[communities.icon/community-icon-redesign community 32]
[react/view {:flex 1} [rn/view {:flex 1
[react/view {:flex-direction :row :margin-left 12
:border-radius 16 :justify-content :center}
:align-items :center}
[communities.icon/community-icon-redesign community 32]
[react/view {:flex 1
:margin-left 12
:justify-content :center}
[text/text [text/text
{:accessibility-label :chat-name-text {:accessibility-label :chat-name-text
:number-of-lines 1 :number-of-lines 1
@ -100,7 +85,7 @@
:size :paragraph-1} :size :paragraph-1}
name]] name]]
(when (= status :gated) (when (= status :gated)
[react/view {:justify-content :center [rn/view {:justify-content :center
:margin-right 12} :margin-right 12}
[community-view/permission-tag-container {:locked? locked? [community-view/permission-tag-container {:locked? locked?
:tokens tokens}]])]]]]) :tokens tokens}]])]]]])

72
src/quo2/components/community/community_view.cljs
View File

@ -4,42 +4,32 @@
[quo2.components.icon :as icons] [quo2.components.icon :as icons]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.components.tags.permission-tag :as permission] [quo2.components.tags.permission-tag :as permission]
[quo2.components.tags.tag :as tag] [quo2.components.tags.tag :as tag]
[status-im.ui.components.react :as react] [quo2.components.community.style :as style]
[status-im.utils.money :as money] [react-native.core :as rn]))
[status-im.i18n.i18n :as i18n]
[status-im.ui.screens.communities.styles :as styles]))
;; TODO move this component to ui namespace, status-im or re-frame ns shouldn't be used in quo (defn community-stats [{:keys [icon members-count icon-color]}]
(defn format-members [count] [rn/view (style/stats-count-container)
(if (> count 1000000) [rn/view {:margin-right 4}
(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 [icons/icon icon {:container-style {:align-items :center
:justify-content :center} :justify-content :center}
:resize-mode :center :resize-mode :center
:size 16 :size 16
:color icon-color}]] :color icon-color}]]
[text/text {:weight :regular [text/text {:weight :regular
:size :paragraph-1} :size :paragraph-1}
(format-members count)]]) members-count]])
(defn community-stats-column [type] (defn community-stats-column [type]
(let [icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40)] (let [icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40)]
[react/view (if (= type :card-view) [rn/view (if (= type :card-view)
(styles/card-stats-container) (style/card-stats-container)
(styles/list-stats-container)) (style/list-stats-container))
[community-stats {:icon :main-icons2/group [community-stats {:icon :main-icons2/group
:count "629.2K" :members-count "629.2K" ;;TODO here should be formatted value, use money/format-members from outside this component
:icon-color icon-color}] :icon-color icon-color}]
[community-stats {:icon :main-icons2/lightning [community-stats {:icon :main-icons2/lightning
:count "112.1K" :members-count "112.1K"
:icon-color icon-color}] :icon-color icon-color}]
(when (= type :card-view) (when (= type :card-view)
[community-stats {:icon :main-icons2/placeholder [community-stats {:icon :main-icons2/placeholder
@ -47,36 +37,36 @@
:icon-color icon-color}])])) :icon-color icon-color}])]))
(defn community-tags [tags] (defn community-tags [tags]
[react/view (styles/community-tags-container) [rn/view (style/community-tags-container)
(for [{:keys [id tag-label resource]} tags] (for [{:keys [id tag-label resource]} tags]
^{:key id} ^{:key id}
[react/view {:margin-right 8} [rn/view {:margin-right 8}
[tag/tag [tag/tag
{:id id {:id id
:size 24 :size 24
:label tag-label :label tag-label
:type :emoji :type :emoji
:labelled true :labelled true
:resource resource}]])]) :resource resource}]])])
(defn community-title [{:keys [title description size] :or {size :small}}] (defn community-title [{:keys [title description size] :or {size :small}}]
[react/view (styles/community-title-description-container (if (= size :large) 56 32)) [rn/view (style/community-title-description-container (if (= size :large) 56 32))
(when title (when title
[text/text [text/text
{:accessibility-label :chat-name-text {:accessibility-label :chat-name-text
:number-of-lines 1 :number-of-lines 1
:ellipsize-mode :tail :ellipsize-mode :tail
:weight :semi-bold :weight :semi-bold
:size (if (= size :large) :heading-1 :heading-2)} :size (if (= size :large) :heading-1 :heading-2)}
title]) title])
(when description (when description
[text/text [text/text
{:accessibility-label :community-description-text {:accessibility-label :community-description-text
:number-of-lines 2 :number-of-lines 2
:ellipsize-mode :tail :ellipsize-mode :tail
:weight :regular :weight :regular
:size :paragraph-1 :size :paragraph-1
:style {:margin-top (if (= size :large) 8 2)}} :style {:margin-top (if (= size :large) 8 2)}}
description])]) description])])
(defn permission-tag-container [{:keys [locked? tokens]}] (defn permission-tag-container [{:keys [locked? tokens]}]

72
src/quo2/components/community/discover_card.cljs
View File

@ -1,10 +1,8 @@
(ns quo2.components.community.discover-card (ns quo2.components.community.discover-card
(:require [quo2.components.markdown.text :as text] (:require [quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[status-im.ui.screens.communities.styles :as styles] [quo2.components.community.style :as style]
[status-im.ui.components.react :as react])) [react-native.core :as rn]))
;; TODO move this component to ui namespace, status-im or re-frame ns shouldn't be used in quo
;; Discover card placeholders images. ;; Discover card placeholders images.
;; TODO replaced when real data is available ;; TODO replaced when real data is available
@ -13,13 +11,13 @@
{:id 2 :column-images [{}]}]}) {:id 2 :column-images [{}]}]})
(defn card-title-and-description [title description] (defn card-title-and-description [title description]
[react/view [rn/view
{:flex 1 {:flex 1
:padding-top 8 :padding-top 8
:padding-bottom 8 :padding-bottom 8
:border-radius 12} :border-radius 12}
[react/view {:flex 1 [rn/view {:flex 1
:padding-horizontal 12} :padding-horizontal 12}
[text/text {:accessibility-label :community-name-text [text/text {:accessibility-label :community-name-text
:ellipsize-mode :tail :ellipsize-mode :tail
:number-of-lines 1 :number-of-lines 1
@ -37,53 +35,53 @@
description]]]) description]]])
(defn placeholder-list-images [{:keys [images width height border-radius]}] (defn placeholder-list-images [{:keys [images width height border-radius]}]
[react/view [rn/view
[react/view {:justify-content :center} [rn/view {:justify-content :center}
(for [{:keys [id]} images] (for [{:keys [id]} images]
^{:key id} ^{:key id}
[react/view {:border-radius border-radius [rn/view {:border-radius border-radius
:margin-top 4 :margin-top 4
:margin-right 4 :margin-right 4
:width width :width width
:height height :height height
:background-color colors/neutral-10}])]]) :background-color colors/neutral-10}])]])
(defn placeholder-row-images [{:keys [first-image last-image images width height (defn placeholder-row-images [{:keys [first-image last-image images width height
border-radius]}] border-radius]}]
[react/view [rn/view
(when first-image (when first-image
[react/view {:border-bottom-right-radius 6 [rn/view {:border-bottom-right-radius 6
:border-bottom-left-radius 6 :border-bottom-left-radius 6
:margin-right 4 :margin-right 4
:width width :width width
:height height :height height
:background-color colors/neutral-10}]) :background-color colors/neutral-10}])
(when images (when images
[placeholder-list-images {:images images [placeholder-list-images {:images images
:width 32 :width 32
:height 32 :height 32
:border-radius 6}]) :border-radius 6}])
(when last-image (when last-image
[react/view {:border-top-left-radius border-radius [rn/view {:border-top-left-radius border-radius
:border-top-right-radius 6 :border-top-right-radius 6
:margin-top 4 :margin-top 4
:width width :width width
:height height :height height
:background-color colors/neutral-10}])]) :background-color colors/neutral-10}])])
(defn discover-card [{:keys [title description on-press accessibility-label]}] (defn discover-card [{:keys [title description on-press accessibility-label]}]
(let [on-joined-images (get images :images)] (let [on-joined-images (get images :images)]
[react/touchable-without-feedback [rn/touchable-without-feedback
{:on-press on-press {:on-press on-press
:accessibility-label accessibility-label} :accessibility-label accessibility-label}
[react/view (merge (styles/community-card 16) [rn/view (merge (style/community-card 16)
{:background-color (colors/theme-colors {:background-color (colors/theme-colors
colors/white colors/white
colors/neutral-90)} colors/neutral-90)}
{:flex-direction :row {:flex-direction :row
:margin-horizontal 20 :margin-horizontal 20
:height 56 :height 56
:padding-right 12}) :padding-right 12})
[card-title-and-description title description] [card-title-and-description title description]
(for [{:keys [id column-images]} on-joined-images] (for [{:keys [id column-images]} on-joined-images]
^{:key id} ^{:key id}

5
src/status_im/ui/screens/communities/styles.cljs → src/quo2/components/community/style.cljs
View File

@ -1,6 +1,5 @@
(ns status-im.ui.screens.communities.styles (ns quo2.components.community.style
(:require (:require [quo2.foundations.colors :as colors]))
[quo2.foundations.colors :as colors]))
(def category-item (def category-item
{:flex 1 {:flex 1

87
src/quo2/core.cljs Normal file
View File

@ -0,0 +1,87 @@
(ns quo2.core
(:require quo2.components.buttons.button
quo2.components.buttons.dynamic-button
quo2.components.markdown.text
quo2.components.icon
quo2.components.separator
quo2.components.header
quo2.components.avatars.account-avatar
quo2.components.avatars.channel-avatar
quo2.components.avatars.group-avatar
quo2.components.avatars.icon-avatar
quo2.components.avatars.user-avatar
quo2.components.avatars.wallet-user-avatar
quo2.components.community.community-card-view
quo2.components.community.community-list-view
quo2.components.community.community-view
quo2.components.community.discover-card
quo2.components.counter.counter
quo2.components.dividers.divider-label
quo2.components.dividers.new-messages
quo2.components.drawers.action-drawers
quo2.components.dropdowns.dropdown
quo2.components.info.info-message
quo2.components.info.information-box
quo2.components.list-items.channel
quo2.components.list-items.menu-item
quo2.components.list-items.preview-list
quo2.components.messages.gap
quo2.components.messages.system-message
quo2.components.reactions.reaction
quo2.components.notifications.activity-logs
quo2.components.notifications.info-count
quo2.components.notifications.notification-dot
quo2.components.tags.tags
quo2.components.tabs.tabs
quo2.components.tabs.account-selector))
(def button quo2.components.buttons.button/button)
(def dynamic-button quo2.components.buttons.dynamic-button/dynamic-button)
(def text quo2.components.markdown.text/text)
(def icon quo2.components.icon/icon)
(def separator quo2.components.separator/separator)
(def counter quo2.components.counter.counter/counter)
(def header quo2.components.header/header)
(def action-drawer quo2.components.drawers.action-drawers/action-drawer)
(def dropdown quo2.components.dropdowns.dropdown/dropdown)
(def info-message quo2.components.info.info-message/info-message)
(def information-box quo2.components.info.information-box/information-box)
(def gap quo2.components.messages.gap/gap)
(def system-message quo2.components.messages.system-message/system-message)
(def reaction quo2.components.reactions.reaction/reaction)
(def tags quo2.components.tags.tags/tags)
(def tabs quo2.components.tabs.tabs/tabs)
(def scrollable-tabs quo2.components.tabs.tabs/scrollable-tabs)
(def account-selector quo2.components.tabs.account-selector/account-selector)
;;;; AVATAR
(def account-avatar quo2.components.avatars.account-avatar/account-avatar)
(def channel-avatar quo2.components.avatars.channel-avatar/channel-avatar)
(def group-avatar quo2.components.avatars.group-avatar/group-avatar)
(def icon-avatar quo2.components.avatars.icon-avatar/icon-avatar)
(def user-avatar quo2.components.avatars.user-avatar/user-avatar)
(def wallet-user-avatar quo2.components.avatars.wallet-user-avatar/wallet-user-avatar)
;;;; COMMUNITY
(def community-card-view-item quo2.components.community.community-card-view/community-card-view-item)
(def communities-list-view-item quo2.components.community.community-list-view/communities-list-view-item)
(def communities-membership-list-item quo2.components.community.community-list-view/communities-membership-list-item)
(def community-stats-column quo2.components.community.community-view/community-stats-column)
(def community-stats quo2.components.community.community-view/community-stats)
(def community-tags quo2.components.community.community-view/community-tags)
(def community-title quo2.components.community.community-view/community-title)
(def discover-card quo2.components.community.discover-card/discover-card)
;;;; DIVIDERS
(def divider-label quo2.components.dividers.divider-label/divider-label)
(def new-messages quo2.components.dividers.new-messages/new-messages)
;;;; LIST ITEMS
(def channel-list-item quo2.components.list-items.channel/list-item)
(def menu-item quo2.components.list-items.menu-item/menu-item)
(def preview-list quo2.components.list-items.preview-list/preview-list)
;;;; NOTIFICATIONS
(def activity-log quo2.components.notifications.activity-logs/activity-log)
(def info-count quo2.components.notifications.info-count/info-count)
(def notification-dot quo2.components.notifications.notification-dot/notification-dot)

2
src/status_im/communities/core.cljs
View File

@ -655,7 +655,7 @@
{:db (update-in db [:communities community-id :categories] merge categories)})) {:db (update-in db [:communities community-id :categories] merge categories)}))
(fx/defn load-category-states (fx/defn load-category-states
{:events [::load-category-states]} {:events [:communities/load-category-states]}
[{:keys [db]} community-id] [{:keys [db]} community-id]
(let [public-key (get-in db [:multiaccount :public-key]) (let [public-key (get-in db [:multiaccount :public-key])
categories (get-in db [:communities community-id :categories]) categories (get-in db [:communities community-id :categories])

2
src/quo2/components/switcher/styles.cljs → src/status_im/switcher/switcher_cards/styles.cljs
View File

@ -1,4 +1,4 @@
(ns quo2.components.switcher.styles (ns status-im.switcher.switcher-cards.styles
(:require [quo2.foundations.colors :as colors])) (:require [quo2.foundations.colors :as colors]))
(def colors-map (def colors-map

8
src/quo2/components/switcher/switcher_cards.cljs → src/status_im/switcher/switcher_cards/switcher_cards.cljs
View File

@ -1,22 +1,18 @@
(ns quo2.components.switcher.switcher-cards (ns status-im.switcher.switcher-cards.switcher-cards
(:require [react-native.core :as rn] (:require [react-native.core :as rn]
[react-native.fast-image :as fast-image] [react-native.fast-image :as fast-image]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.components.markdown.text :as text] [quo2.components.markdown.text :as text]
[quo2.components.buttons.button :as button] [quo2.components.buttons.button :as button]
[quo2.components.switcher.styles :as styles]
[quo2.components.counter.counter :as counter] [quo2.components.counter.counter :as counter]
[quo2.components.tags.status-tags :as status-tags] [quo2.components.tags.status-tags :as status-tags]
[quo2.components.avatars.user-avatar :as user-avatar] [quo2.components.avatars.user-avatar :as user-avatar]
[quo2.components.avatars.group-avatar :as group-avatar] [quo2.components.avatars.group-avatar :as group-avatar]
[quo2.components.list-items.preview-list :as preview-list] [quo2.components.list-items.preview-list :as preview-list]
[quo2.components.avatars.channel-avatar :as channel-avatar] [quo2.components.avatars.channel-avatar :as channel-avatar]
[status-im.switcher.switcher-cards.styles :as styles]
[status-im.i18n.i18n :as i18n])) [status-im.i18n.i18n :as i18n]))
;;TODO move outside quo or find a way how to move i18n outside
;; Supporting Components
(defn content-container [{:keys [content-type data new-notifications? color-50]}] (defn content-container [{:keys [content-type data new-notifications? color-50]}]
[rn/view {:style (styles/content-container new-notifications?)} [rn/view {:style (styles/content-container new-notifications?)}
(case content-type (case content-type

2
src/status_im/ui/screens/communities/community.cljs
View File

@ -22,7 +22,7 @@
[re-frame.core :as re-frame] [re-frame.core :as re-frame]
[status-im.ui.screens.chat.sheets :as sheets] [status-im.ui.screens.chat.sheets :as sheets]
[status-im.ui.components.accordion :as accordion] [status-im.ui.components.accordion :as accordion]
[status-im.ui.screens.communities.styles :as styles])) [quo2.components.community.style :as styles]))
(def request-cooldown-ms (* 24 60 60 1000)) (def request-cooldown-ms (* 24 60 60 1000))

6
src/status_im/ui/screens/communities/community_overview_redesign.cljs
View File

@ -8,13 +8,13 @@
[quo2.components.dividers.divider-label :as divider-label] [quo2.components.dividers.divider-label :as divider-label]
[quo2.components.community.community-view :as community-view] [quo2.components.community.community-view :as community-view]
[quo2.components.tags.status-tags :as status-tags] [quo2.components.tags.status-tags :as status-tags]
[quo2.components.community.style :as styles]
[quo2.foundations.colors :as colors]
[quo2.components.navigation.page-nav :as page-nav]
[status-im.ui.screens.communities.request-to-join-bottom-sheet-redesign :as request-to-join] [status-im.ui.screens.communities.request-to-join-bottom-sheet-redesign :as request-to-join]
[status-im.ui.screens.communities.community-options-bottom-sheet :as options-menu] [status-im.ui.screens.communities.community-options-bottom-sheet :as options-menu]
[status-im.ui.components.list.views :as list] [status-im.ui.components.list.views :as list]
[status-im.utils.handlers :refer [<sub >evt]] [status-im.utils.handlers :refer [<sub >evt]]
[status-im.ui.screens.communities.styles :as styles]
[quo2.foundations.colors :as colors]
[quo2.components.navigation.page-nav :as page-nav]
[status-im.ui.screens.communities.icon :as communities.icon])) [status-im.ui.screens.communities.icon :as communities.icon]))
;; Mocked list items ;; Mocked list items

2
src/status_im/ui/screens/communities/reorder_categories.cljs
View File

@ -13,7 +13,7 @@
[status-im.communities.core :as communities] [status-im.communities.core :as communities]
[status-im.utils.handlers :refer [>evt <sub]] [status-im.utils.handlers :refer [>evt <sub]]
[status-im.ui.components.icons.icons :as icons] [status-im.ui.components.icons.icons :as icons]
[status-im.ui.screens.communities.styles :as styles] [quo2.components.community.style :as styles]
[status-im.ui.components.topbar :as topbar] [status-im.ui.components.topbar :as topbar]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.ui.components.tabs :as tabs] [status-im.ui.components.tabs :as tabs]

2
src/status_im/ui/screens/communities/views.cljs
View File

@ -41,7 +41,7 @@
{:border-bottom-color (quo.colors/get-color :ui-01) {:border-bottom-color (quo.colors/get-color :ui-01)
:border-bottom-width 1})) :border-bottom-width 1}))
:on-press (fn [] :on-press (fn []
(>evt [::communities/load-category-states id]) (>evt [:communities/load-category-states id])
(>evt [:dismiss-keyboard]) (>evt [:dismiss-keyboard])
(>evt [:navigate-to :community {:community-id id}])) (>evt [:navigate-to :community {:community-id id}]))
:on-long-press #(>evt [:bottom-sheet/show-sheet :on-long-press #(>evt [:bottom-sheet/show-sheet

13
src/status_im/ui2/screens/communities/communities_home.cljs
View File

@ -12,7 +12,8 @@
[status-im.i18n.i18n :as i18n] [status-im.i18n.i18n :as i18n]
[status-im.ui.components.list.views :as list] [status-im.ui.components.list.views :as list]
[status-im.ui.components.react :as rn] [status-im.ui.components.react :as rn]
[status-im.ui.components.plus-button :as components.plus-button])) [status-im.ui.components.plus-button :as components.plus-button]
[status-im.ui.screens.communities.community :as community]))
(def selected-tab (reagent/atom :joined)) (def selected-tab (reagent/atom :joined))
@ -25,7 +26,15 @@
:accessibility-label :new-chat-button}])) :accessibility-label :new-chat-button}]))
(defn render-fn [community-item] (defn render-fn [community-item]
[community-list-view/communities-membership-list-item community-item]) [community-list-view/communities-membership-list-item
{:on-press (fn []
(>evt [:communities/load-category-states (:id community-item)])
(>evt [:dismiss-keyboard])
(>evt [:navigate-to :community {:community-id (:id community-item)}]))
:on-long-press #(>evt [:bottom-sheet/show-sheet
{:content (fn []
[community/community-actions community-item])}])}
community-item])
(defn community-list-key-fn [item] (defn community-list-key-fn [item]
(:id item)) (:id item))

15
src/status_im/ui2/screens/communities/discover_communities.cljs
View File

@ -7,12 +7,13 @@
[quo2.components.counter.counter :as quo2.counter] [quo2.components.counter.counter :as quo2.counter]
[quo.components.safe-area :as safe-area] [quo.components.safe-area :as safe-area]
[status-im.react-native.resources :as resources] [status-im.react-native.resources :as resources]
[status-im.utils.handlers :refer [<sub >evt]] [status-im.utils.handlers :refer [<sub >evt]]
[quo2.components.buttons.button :as quo2.button] [quo2.components.buttons.button :as quo2.button]
[quo2.components.community.community-card-view :as community-card] [quo2.components.community.community-card-view :as community-card]
[quo2.components.community.community-list-view :as community-list] [quo2.components.community.community-list-view :as community-list]
[quo2.components.icon :as icons] [quo2.components.icon :as icons]
[quo2.foundations.colors :as colors])) [quo2.foundations.colors :as colors]
[status-im.ui.screens.communities.community :as community]))
(def view-type (reagent/atom :card-view)) (def view-type (reagent/atom :card-view))
@ -40,7 +41,15 @@
{:featured false})] {:featured false})]
(if (= @view-type :card-view) (if (= @view-type :card-view)
[community-card/community-card-view-item item #(>evt [:navigate-to :community-overview item])] [community-card/community-card-view-item item #(>evt [:navigate-to :community-overview item])]
[community-list/communities-list-view-item item]))) [community-list/communities-list-view-item
{:on-press (fn []
(>evt [:communities/load-category-states (:id item)])
(>evt [:dismiss-keyboard])
(>evt [:navigate-to :community {:community-id (:id item)}]))
:on-long-press #(>evt [:bottom-sheet/show-sheet
{:content (fn []
[community/community-actions item])}])}
item])))
(defn render-featured-fn [community-item] (defn render-featured-fn [community-item]
(let [item (merge community-item (let [item (merge community-item

4
src/status_im/ui2/screens/quo2_preview/community/community_list_view.cljs
View File

@ -56,8 +56,8 @@
[preview/customizer state descriptor]] [preview/customizer state descriptor]]
[rn/view {:padding-vertical 60 [rn/view {:padding-vertical 60
:justify-content :center} :justify-content :center}
[community-list-view/communities-list-view-item (merge @state [community-list-view/communities-list-view-item {} (merge @state
community-data)]]]]))) community-data)]]]])))
(defn preview-community-list-view [] (defn preview-community-list-view []
[rn/view {:background-color (colors/theme-colors colors/neutral-5 [rn/view {:background-color (colors/theme-colors colors/neutral-5

2
src/status_im/ui2/screens/quo2_preview/switcher/switcher_cards.cljs
View File

@ -4,7 +4,7 @@
[status-im.ui2.screens.quo2-preview.preview :as preview] [status-im.ui2.screens.quo2-preview.preview :as preview]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[status-im.react-native.resources :as resources] [status-im.react-native.resources :as resources]
[quo2.components.switcher.switcher-cards :as switcher-cards])) [status-im.switcher.switcher-cards.switcher-cards :as switcher-cards]))
(def descriptor [{:label "Type" (def descriptor [{:label "Type"
:key :type :key :type

10
src/status_im/utils/money.cljs
View File

@ -1,6 +1,7 @@
(ns status-im.utils.money (ns status-im.utils.money
(:require ["bignumber.js" :as BigNumber] (:require ["bignumber.js" :as BigNumber]
[clojure.string :as string])) [clojure.string :as string]
[status-im.i18n.i18n :as i18n]))
;; The BigNumber version included in web3 sometimes hangs when dividing large ;; The BigNumber version included in web3 sometimes hangs when dividing large
;; numbers Hence we want to use these functions instead of fromWei etc, which ;; numbers Hence we want to use these functions instead of fromWei etc, which
@ -191,3 +192,10 @@
(defn div-and-round [bn1 bn2] (defn div-and-round [bn1 bn2]
(.round (.dividedBy ^js bn1 bn2) 0)) (.round (.dividedBy ^js bn1 bn2) 0))
(defn format-members [count]
(if (> count 1000000)
(str (with-precision (/ count 1000000) 1) (i18n/label :t/M))
(if (and (> count 999) (< count 1000000))
(str (with-precision (/ count 1000) 1) (i18n/label :t/K))
count)))