status-im/status-react
2
0
Fork 0
mirror of https://github.com/status-im/status-react.git synced 2025-02-15 04:17:06 +00:00
Code Issues Projects Releases Wiki Activity

updated communities home and discover screen (#14018)

Browse Source
This commit is contained in:
John Ngei 2022-11-09 15:41:34 +03:00 committed by GitHub
parent 01eae4da9c
commit a1c1be8f8a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
26 changed files with 503 additions and 585 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -40,6 +40,8 @@
[community-view/community-title
{:title name
:description description}]
[community-view/community-stats-column :card-view]
[community-view/community-tags tags]]]]]]))
[react/view {:style (styles/card-stats-position)}
[community-view/community-stats-column :card-view]]
[react/view {:style (styles/community-tags-position)}
[community-view/community-tags tags]]]]]]]))

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

@ -3,6 +3,8 @@
[quo2.components.community.community-view :as community-view]
[quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors]
[quo2.components.counter.counter :as counter]
[quo2.components.icon :as icons]
[status-im.communities.core :as communities]
[status-im.utils.handlers :refer [>evt]]
[status-im.ui.components.react :as react]
@ -10,7 +12,8 @@
[status-im.ui.screens.communities.community :as community]
[status-im.ui.screens.communities.icon :as communities.icon]))
(defn communities-list-view-item [{:keys [id name locked status tokens background-color] :as community}]
(defn communities-list-view-item [{:keys [id name locked? status notifications
tokens background-color] :as community}]
[react/view {:style (merge (styles/community-card 16)
{:margin-bottom 12
:margin-horizontal 20})}
@ -38,17 +41,39 @@
:size :paragraph-1
:accessibility-label :community-name-text
:number-of-lines 1
:ellipsize-mode :tail}
:ellipsize-mode :tail
:style {:color (when (= notifications :muted)
(colors/theme-colors
colors/neutral-40
colors/neutral-60))}}
name]
[community-view/community-stats-column :list-view]]
(when (= status :gated)
[community-view/permission-tag-container {:locked locked
:status status
:tokens tokens}])]]]])
(if (= status :gated)
[community-view/permission-tag-container {:locked? locked?
:tokens tokens}]
(cond
(= notifications :unread-messages-count)
[react/view {:style {:width 8
:height 8
:border-radius 4
:background-color (colors/theme-colors
colors/neutral-40
colors/neutral-60)}}]
(defn communities-membership-list-item [{:keys [id name status tokens locked] :as community}]
[react/view {:margin-bottom 12
:padding-horizontal 8}
(= notifications :unread-mentions-count)
[counter/counter {:type :default} 5]
(= notifications :muted)
[icons/icon :main-icons2/muted {:container-style {:align-items :center
:justify-content :center}
:resize-mode :center
:size 20
:color (colors/theme-colors
colors/neutral-40
colors/neutral-50)}]))]]]])
(defn communities-membership-list-item [{:keys [id name status tokens locked?] :as community}]
[react/view {:margin-bottom 20}
[react/touchable-highlight {:underlay-color colors/primary-50-opa-5
:style {:border-radius 12}
:on-press (fn []
@ -58,19 +83,23 @@
: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 1}
[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-view/community-title {:title name}]]
[communities.icon/community-icon-redesign community 32]
[react/view {:flex 1
:margin-left 12
:justify-content :center}
[text/text
{:accessibility-label :chat-name-text
:number-of-lines 1
:ellipsize-mode :tail
:weight :semi-bold
:size :paragraph-1}
name]]
(when (= status :gated)
[react/view {:justify-content :center
:margin-right 12}
[community-view/permission-tag-container {:locked locked
:status status
[community-view/permission-tag-container {:locked? locked?
:tokens tokens}]])]]]])

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

@ -40,9 +40,10 @@
[community-stats {:icon :main-icons2/lightning
:count "112.1K"
:icon-color icon-color}]
[community-stats {:icon :main-icons2/placeholder
:count 4
:icon-color icon-color}]]))
(when (= type :card-view)
[community-stats {:icon :main-icons2/placeholder
:count 4
:icon-color icon-color}])]))
(defn community-tags [tags]
[react/view (styles/community-tags-container)
@ -77,10 +78,10 @@
:style {:margin-top (if (= size :large) 8 2)}}
description])])
(defn permission-tag-container [{:keys [locked tokens]}]
(defn permission-tag-container [{:keys [locked? tokens]}]
[permission/tag {:background-color (colors/theme-colors
colors/neutral-10
colors/neutral-80)
:locked locked
:locked? locked?
:tokens tokens
:size 24}])

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

@ -69,10 +69,11 @@
:height height
:background-color colors/neutral-10}])])
(defn discover-card [{:keys [title description on-press]}]
(defn discover-card [{:keys [title description on-press accessibility-label]}]
(let [on-joined-images (get images :images)]
[react/touchable-without-feedback
{:on-press on-press}
{:on-press on-press
:accessibility-label accessibility-label}
[react/view (merge (styles/community-card 16)
{:background-color (colors/theme-colors
colors/white
@ -91,4 +92,4 @@
:border-radius 6
:first-image "" ; TODO replace with real data
:last-image ""}]) ; TODO replace with real data
]]))
]]))

2
src/quo2/components/separator.cljs
View File

@ -8,7 +8,7 @@
(merge
style
{:background-color (quo2.colors/theme-colors
quo2.colors/neutral-30
quo2.colors/neutral-10
quo2.colors/neutral-80)
:align-self :stretch
:height 1})}])

17
src/quo2/components/tabs/tabs.cljs
View File

@ -16,7 +16,7 @@
(fn [{:keys [data size] :or {size default-tab-size}}]
[rn/view (merge {:flex-direction :row} style)
(doall
(for [{:keys [label id new-info]} data]
(for [{:keys [label id new-info accessibility-label]} data]
^{:key id}
[rn/view {:style {:margin-right (if (= size default-tab-size) 12 8)}}
(when new-info
@ -32,13 +32,14 @@
:background-color (colors/theme-colors colors/neutral-5 colors/neutral-95)}
[notification-dot]])
[tab/tab
{:id id
:size size
:active (= id @active-tab-id)
:on-press (fn []
(reset! active-tab-id id)
(when on-change
(on-change id)))}
{:id id
:size size
:accessibility-label accessibility-label
:active (= id @active-tab-id)
:on-press (fn []
(reset! active-tab-id id)
(when on-change
(on-change id)))}
label]]))])))
(defn- calculate-fade-end-percentage

3
src/quo2/components/tags/tags.cljs
View File

@ -25,5 +25,4 @@
:main-icons2/placeholder
resource)
:on-press #(do (reset! active-tab-id %)
(when on-change (on-change %)))})
tag-label]])]))))
(when on-change (on-change %)))})]])]))))

31
src/quo2/screens/community/community_card_view.cljs
View File

@ -4,7 +4,7 @@
[reagent.core :as reagent]
[status-im.constants :as constants]
[quo2.foundations.colors :as colors]
[quo2.components.community.community-list-view :as community-list-view]
[quo.design-system.colors :as quo.colors]
[quo2.components.community.community-card-view :as community-card-view]
[status-im.i18n.i18n :as i18n]
[status-im.react-native.resources :as resources]))
@ -13,26 +13,28 @@
{: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)
:tokens [{:id 1 :group [{:id 1 :token-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
(def descriptor [{:label "Status:"
:key :status
:type :select
:options [{:key :card-view
:value "Card view"}
{:key :list-view
:value "List view"}]}])
:options [{:key :gated
:value "Gated"}
{:key :open
:value "Open"}]}
{:label "Locked:"
:key :locked?
:type :boolean}])
(defn cool-preview []
(let [state (reagent/atom {:view-style :card-view})]
(let [state (reagent/atom {:status :gated
:locked? true})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
@ -41,9 +43,8 @@
[preview/customizer state descriptor]]
[rn/view {:padding-vertical 60
:justify-content :center}
(if (= :card-view (:view-style @state))
[community-card-view/community-card-view-item community-data]
[community-list-view/communities-list-view-item community-data])]]])))
[community-card-view/community-card-view-item (merge @state community-data)]]]])))
(defn preview-community-card []
[rn/view {:background-color (colors/theme-colors colors/neutral-5
colors/neutral-95)

70
src/quo2/screens/community/community_list_view.cljs Normal file
View File

@ -0,0 +1,70 @@
(ns quo2.screens.community.community-list-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.community-list-view :as community-list-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"
: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 "Notifications:"
:key :notifications
:type :select
:options [{:key :muted
:value "Muted"}
{:key :unread-mentions-count
:value "Mention counts"}
{:key :unread-messages-count
:value "Unread messages"}]}
{:label "Status:"
:key :status
:type :select
:options [{:key :gated
:value "Gated"}
{:key :open
:value "Open"}]}
{:label "Locked:"
:key :locked?
:type :boolean}])
(defn cool-preview []
(let [notifications (reagent/atom (:notifications nil))
state (reagent/atom {:locked? true
:notifications nil
:status (if notifications
:gated
:open)})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[rn/view {:flex 1
:padding 16}
[preview/customizer state descriptor]]
[rn/view {:padding-vertical 60
:justify-content :center}
[community-list-view/communities-list-view-item (merge @state
community-data)]]]])))
(defn preview-community-list-view []
[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}]])

34
src/quo2/screens/community/discover_card.cljs Normal file
View File

@ -0,0 +1,34 @@
(ns quo2.screens.community.discover-card
(:require [quo.react-native :as rn]
[quo.previews.preview :as preview]
[reagent.core :as reagent]
[status-im.i18n.i18n :as i18n]
[quo2.foundations.colors :as colors]
[quo2.components.community.discover-card :as discover-card]))
(def descriptor [{:label "Joined:"
:key :joined?
:type :boolean}])
(defn cool-preview []
(let [state (reagent/atom {:joined? :false})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[rn/view {:flex 1
:padding 16}
[preview/customizer state descriptor]]
[rn/view {:padding-vertical 60
:justify-content :center}
[discover-card/discover-card {:joined? (:joined? @state)
:title (i18n/label :t/discover)
:description (i18n/label :t/whats-trending)}]]]])))
(defn preview-discoverd-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}]])

12
src/quo2/screens/main.cljs
View File

@ -15,6 +15,8 @@
[quo2.screens.code.snippet :as code-snippet]
[quo2.screens.counter.counter :as counter]
[quo2.screens.community.community-card-view :as community-card]
[quo2.screens.community.discover-card :as discover-card]
[quo2.screens.community.community-list-view :as community-list-view]
[quo2.screens.dividers.divider-label :as divider-label]
[quo2.screens.dividers.new-messages :as new-messages]
[quo2.screens.drawers.action-drawers :as drawers]
@ -78,9 +80,15 @@
:code [{:name :snippet
:insets {:top false}
:component code-snippet/preview-code-snippet}]
:community [{:name :community-cards
:community [{:name :community-card-view
:insets {:top false}
:component community-card/preview-community-card}]
:component community-card/preview-community-card}
{:name :community-list-view
:insets {:top false}
:component community-list-view/preview-community-list-view}
{:name :discover-card
:insets {:top false}
:component discover-card/preview-discoverd-card}]
:counter [{:name :counter
:insets {:top false}
:component counter/preview-counter}]

4
src/quo2/screens/tags/tags.cljs
View File

@ -72,9 +72,9 @@
:padding-horizontal 10}
[tags/tags (merge @state
{:default-active 1
:data [{:id 1 :tag-label "Music" :resource (resources/get-image :music)}
: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)}]})]]]]])))
{:id 3 :tag-label "Podcasts" :resource (resources/get-image :podcasts)}]})]]]]])))
(defn preview-tags []
[rn/view {:flex 1
:background-color (colors/theme-colors

12
src/status_im/navigation2/screens.cljs
View File

@ -1,11 +1,19 @@
(ns status-im.navigation2.screens
(:require [status-im.ui2.screens.chat.view :as chat]
[status-im.switcher.shell-stack :as shell-stack]))
[status-im.switcher.shell-stack :as shell-stack]
[status-im.ui2.screens.communities.discover-communities :as discover-communities]))
;; We have to use the home screen name :chat-stack for now, for compatibility with navigation.cljs
(def screens [{:name :chat-stack ;; TODO(parvesh) - rename to shell-stack
:insets {:top false}
:component shell-stack/shell-stack}])
:component shell-stack/shell-stack}
{:name :discover-communities
;;TODO animated-header scroll behaviours
:options {:topBar {:visible false}}
:component discover-communities/communities}])
;; These screens will overwrite navigation/screens.cljs screens on enabling new UI toggle
(def screen-overwrites

6
src/status_im/switcher/home_stack.cljs
View File

@ -2,13 +2,13 @@
(:require [react-native.reanimated :as reanimated]
[status-im.switcher.styles :as styles]
[status-im.switcher.animation :as animation]
[status-im.switcher.constants :as constants]
[status-im.ui2.screens.chat.home :as chat.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.wallet.accounts.views :as wallet.accounts]
[quo2.components.navigation.floating-shell-button :as floating-shell-button]
[status-im.ui.screens.communities.communities-list-redesign :as communities]))
[status-im.ui2.screens.communities.communities-home :as communities-home]))
(defn load-stack? [stack-id]
(case stack-id
@ -32,7 +32,7 @@
:right 0
:accessibility-label stack-id})}
(case stack-id
:communities-stack [communities/communities-list]
:communities-stack [communities-home/views]
:chats-stack [chat.home/home]
:wallet-stack [wallet.accounts/accounts-overview]
:browser-stack [profile.user/my-profile])])]))

2
src/status_im/ui/components/topbar.cljs
View File

@ -40,4 +40,4 @@
(when (seq right-accessories)
{:right-accessories right-accessories})
(when new-ui?
{:background (quo2.colors/theme-colors quo2.colors/neutral-5 quo2.colors/neutral-95)}))])]))
{:background (quo2.colors/theme-colors quo2.colors/neutral-5 quo2.colors/neutral-95)}))])]))

55
src/status_im/ui/components/topnav.cljs
View File

@ -1,55 +0,0 @@
(ns status-im.ui.components.topnav
(:require [quo2.components.buttons.button :as quo2.button]
[re-frame.core :as re-frame]
[status-im.i18n.i18n :as i18n]
[status-im.qr-scanner.core :as qr-scanner]
[status-im.ui.components.react :as react]
[status-im.ui.screens.home.styles :as styles]
[status-im.utils.config :as config]
[status-im.utils.handlers :refer [<sub]]))
(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/scan])
(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])
(if config/new-activity-center-enabled?
(re-frame/dispatch [:show-popover {:view :activity-center
:style {:margin 0}
:disable-touchable-overlay? true
:blur-view? true
:blur-view-props {:blur-amount 20
:blur-type :dark}}])
(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}]])]))

6
src/status_im/ui/screens/bottom_sheets/views.cljs
View File

@ -5,7 +5,6 @@
[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]))
@ -38,10 +37,7 @@
(merge recover.views/bottom-sheet)
(= view :migrate-account-password)
(merge key-storage/migrate-account-password)
(= view :sort-communities)
(merge sort/sort-communities))]
(merge key-storage/migrate-account-password))]
[quo/bottom-sheet opts
(when content
[content (when options options)])]))

239
src/status_im/ui/screens/communities/communities_list_redesign.cljs
View File

@ -1,239 +0,0 @@
(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]
[quo.react-native :as rn]
[quo2.components.separator :as separator]
[quo2.components.markdown.text :as quo2.text]
[quo2.components.buttons.button :as quo2.button]
[quo2.components.counter.counter :as quo2.counter]
[quo2.components.tags.tags :as tags]
[quo2.foundations.colors :as quo2.colors]
[quo.components.safe-area :as safe-area]
[quo2.components.tabs.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 >evt]]
[status-im.ui.components.topnav :as topnav]
[quo2.components.community.community-card-view :as community-card]
[quo2.components.community.community-list-view :as community-list]
[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 mock-community-item-data ;; TODO: remove once communities are loaded with this data.
{:data {:community-color "#0052FF"
: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 mock-community-item-data :data)
{:featured false})]
(if (= @view-type :card-view)
[community-card/community-card-view-item item #(>evt [:navigate-to :community-overview item])]
[community-list/communities-list-view-item item])))
(defn render-featured-fn [community-item]
(let [item (merge community-item
(get mock-community-item-data :data)
{:featured true})]
[community-card/community-card-view-item item #(>evt [:navigate-to :community-overview item])]))
(defn get-item-layout-js [_ index]
#js {:length 64 :offset (* 64 index) :index index})
(defn community-segments []
[rn/view {:flex 1
:margin-bottom 8
:padding-horizontal 20}
[rn/view {:flex-direction :row
:padding-top 20
:padding-bottom 8
:height 60}
[rn/view {:flex 1}
[quo2.tabs/tabs {:size 32
:on-change #(reset! selected-tab %)
:default-active selected-tab
:data [{:id :all
:label (i18n/label :t/all)}
{:id :open
:label (i18n/label :t/open)}
{:id :gated
:label (i18n/label :t/gated)}]}]]
[rn/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/flash]
[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 :id
: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 :id
: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 (count communities) :type :grey})]
[rn/view {:flex 1}
[rn/view {:flex-direction :row
:height 30
:padding-top 8
:justify-content :space-between
:padding-horizontal 20}
[rn/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)}]]
[rn/view {:margin-top 8
:padding-left 20}
[featured-communities communities]]]))
(defn title-column []
[rn/view
{:flex-direction :row
:align-items :center
:height 56
:padding-vertical 12
:padding-horizontal 20}
[rn/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 4 :tag-label (i18n/label :t/podcasts) :resource (resources/get-image :podcasts)}]]
[rn/scroll-view {:horizontal true
:height 48
:shows-horizontal-scroll-indicator false
:scroll-event-throttle 64
:padding-top 4
:padding-bottom 12
:padding-horizontal 20}
[tags/tags {:data filters
:labelled true
:type :emoji
:icon-color (quo2.colors/theme-colors
quo2.colors/neutral-50
quo2.colors/neutral-40)}]]))
(defn communities-list []
(let [multiaccount (<sub [:multiaccount])
communities (<sub [:communities/communities])
featured-communities (<sub [:communities/featured-communities])]
[safe-area/consumer
(fn [insets]
[rn/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 [rn/view {:margin-left 16}
[photos/photo (multiaccounts/displayed-photo multiaccount)
{:size 32}]]
:right-component [rn/view {:flex-direction :row
:margin-right 16}
[topnav/qr-scanner]
[topnav/qr-code]
[topnav/notifications-button]]
:new-ui? true
:border-bottom false}]
[title-column]
[rn/scroll-view
[community-filter-tags]
[featured-communities-section featured-communities]
(when communities
[:<>
[rn/view {:margin-vertical 4
:padding-horizontal 20}
[separator/separator]]
[community-segments]])
[community-segments-view communities]]])]))

149
src/status_im/ui/screens/communities/community_membership_status.cljs
View File

@ -1,149 +0,0 @@
(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.markdown.text :as quo2.text]
[quo2.foundations.colors :as quo2.colors]
[quo.components.safe-area :as safe-area]
[quo2.components.tabs.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]]])])))

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

@ -139,8 +139,10 @@
{:title name
:size :large
:description description}]
[community-view/community-stats-column :card-view]
[community-view/community-tags tags]
[rn/view {:margin-top 12}
[community-view/community-stats-column :card-view]]
[rn/view {:margin-top 16}
[community-view/community-tags tags]]
[preview-user-list]
(when (not joined)
[button/button

52
src/status_im/ui/screens/communities/sort_communities.cljs
View File

@ -1,52 +0,0 @@
(ns status-im.ui.screens.communities.sort-communities
(:require [re-frame.core :as re-frame]
[quo2.components.markdown.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/flash
: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})

18
src/status_im/ui/screens/communities/styles.cljs
View File

@ -28,16 +28,26 @@
:margin-right 16})
(defn card-stats-container []
{:flex-direction :row
:margin-top 12})
{:flex-direction :row})
(defn list-stats-container []
{:flex-direction :row
:align-items :center})
(defn community-tags-container []
{:flex-direction :row
:margin-top 16})
{:flex-direction :row})
(defn card-stats-position []
{:position :absolute
:top 116
:right 12
:left 12})
(defn community-tags-position []
{:position :absolute
:top 154
:right 12
:left 12})
(defn card-view-content-container [padding-horizontal]
{:flex 1

33
src/status_im/ui/screens/home/views.cljs
View File

@ -60,21 +60,24 @@
[react/view {:padding-horizontal 16
:padding-vertical 10}
[search-input/search-input
{:search-active? search-active?
:search-filter search-filter
:on-cancel #(re-frame/dispatch [:search/home-filter-changed nil])
:on-blur (fn []
(when chats-empty
(re-frame/dispatch [:search/home-filter-changed nil]))
(re-frame/dispatch [::new-chat/clear-new-identity]))
:on-focus (fn [search-filter]
(when-not search-filter
(re-frame/dispatch [:search/home-filter-changed ""])
(re-frame/dispatch [::new-chat/clear-new-identity])))
:on-change (fn [text]
(re-frame/dispatch [:search/home-filter-changed text])
(re-frame/dispatch [:set-in [:contacts/new-identity :state] :searching])
(debounce/debounce-and-dispatch [:new-chat/set-new-identity text] 300))}]])
{:search-active? search-active?
:placeholder (i18n/label :t/search)
:border-radius 10
:search-filter search-filter
:before true
:on-cancel #(re-frame/dispatch [:search/home-filter-changed nil])
:on-blur (fn []
(when chats-empty
(re-frame/dispatch [:search/home-filter-changed nil]))
(re-frame/dispatch [::new-chat/clear-new-identity]))
:on-focus (fn [search-filter]
(when-not search-filter
(re-frame/dispatch [:search/home-filter-changed ""])
(re-frame/dispatch [::new-chat/clear-new-identity])))
:on-change (fn [text]
(re-frame/dispatch [:search/home-filter-changed text])
(re-frame/dispatch [:set-in [:contacts/new-identity :state] :searching])
(debounce/debounce-and-dispatch [:new-chat/set-new-identity text] 300))}]])
(defn search-input-wrapper-old [search-filter chats-empty]
[react/view {:padding-horizontal 16

114
src/status_im/ui2/screens/communities/communities_home.cljs Normal file
View File

@ -0,0 +1,114 @@
(ns status-im.ui2.screens.communities.communities-home
(:require [re-frame.core :as re-frame]
[reagent.core :as reagent]
[quo2.components.community.community-list-view :as community-list-view]
[quo.components.safe-area :as safe-area]
[quo2.components.markdown.text :as text]
[quo2.components.tabs.tabs :as tabs]
[quo2.foundations.colors :as colors]
[quo2.components.community.discover-card :as discover-card]
[quo2.components.navigation.top-nav :as topnav]
[status-im.utils.handlers :refer [<sub >evt]]
[status-im.i18n.i18n :as i18n]
[status-im.ui.components.list.views :as list]
[status-im.ui.components.react :as rn]
[status-im.ui.components.plus-button :as components.plus-button]))
(def selected-tab (reagent/atom :joined))
(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-list-view/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 home-community-segments []
[rn/view {:style {:padding-bottom 12
:padding-top 16
:margin-top 8
:height 60
:padding-horizontal 20}}
[tabs/tabs {:size 32
:on-change #(reset! selected-tab %)
:default-active :joined
:data [{:id :joined :label (i18n/label :chats/joined) :accessibility-label :joined-tab}
{:id :pending :label (i18n/label :t/pending) :accessibility-label :pending-tab}
{:id :opened :label (i18n/label :t/opened) :accessibility-label :opened-tab}]}]])
(defn communities-list [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 segments-community-lists [communities]
(let [tab @selected-tab]
[rn/view {:style {:padding-left 20
:padding-vertical 12}}
(case tab
:joined
[communities-list communities]
:pending
[communities-list communities]
:opened
[communities-list communities])]))
(defn title-column []
[rn/view
{:style {:flex-direction :row
:align-items :center
:height 56
:padding-vertical 12
:margin-bottom 8
:padding-horizontal 20}}
[rn/view
{:flex 1}
[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 []
[discover-card/discover-card {:on-press #(>evt [:navigate-to :discover-communities])
:title (i18n/label :t/discover)
:description (i18n/label :t/whats-trending)
:accessibility-label :communities-home-discover-card}])
(defn communities-home []
(let [communities (<sub [:communities/communities])]
[rn/view {:flex 1}
[topnav/top-nav {:type :default}]
[title-column]
[discover-card]
[home-community-segments]
[segments-community-lists communities]]))
(defn views []
[safe-area/consumer
(fn [insets]
[rn/view {:style {:flex 1
:padding-top (:top insets)
:background-color (colors/theme-colors
colors/neutral-5
colors/neutral-95)}}
[communities-home]])])

133
src/status_im/ui2/screens/communities/discover_communities.cljs Normal file
View File

@ -0,0 +1,133 @@
(ns status-im.ui2.screens.communities.discover-communities
(:require [reagent.core :as reagent]
[status-im.i18n.i18n :as i18n]
[status-im.ui.components.list.views :as list]
[quo.react-native :as rn]
[quo2.components.markdown.text :as quo2.text]
[quo2.components.counter.counter :as quo2.counter]
[quo.components.safe-area :as safe-area]
[status-im.react-native.resources :as resources]
[status-im.utils.handlers :refer [<sub >evt]]
[quo2.components.buttons.button :as quo2.button]
[quo2.components.community.community-card-view :as community-card]
[quo2.components.community.community-list-view :as community-list]
[quo2.components.icon :as icons]
[quo2.foundations.colors :as colors]))
(def view-type (reagent/atom :card-view))
(def mock-community-item-data ;; TODO: remove once communities are loaded with this data.
{:data {:community-color "#0052FF"
: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 render-other-fn [community-item]
(let [item (merge community-item
(get mock-community-item-data :data)
{:featured false})]
(if (= @view-type :card-view)
[community-card/community-card-view-item item #(>evt [:navigate-to :community-overview item])]
[community-list/communities-list-view-item item])))
(defn render-featured-fn [community-item]
(let [item (merge community-item
(get mock-community-item-data :data)
{:featured true})]
[community-card/community-card-view-item item #(>evt [:navigate-to :community-overview item])]))
(defn get-item-layout-js [_ index]
#js {:length 64 :offset (* 64 index) :index index})
(defn screen-title []
[rn/view
{:height 56
:padding-vertical 12
:padding-horizontal 20}
[quo2.text/text {:accessibility-label :communities-screen-title
:weight :semi-bold
:size :heading-1}
(i18n/label :t/discover-communities)]])
(defn featured-communities [communities]
[list/flat-list
{:key-fn :id
: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 featured-communities-section [communities]
(let [count (reagent/atom {:value (count communities) :type :grey})]
[rn/view {:flex 1}
[rn/view {:flex-direction :row
:height 30
:padding-top 8
:justify-content :space-between
:padding-horizontal 20}
[rn/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 (colors/theme-colors
colors/neutral-50
colors/neutral-40)}]]
[rn/view {:margin-top 8
:padding-left 20}
[featured-communities communities]]]))
(defn other-communities [communities sort-list-by]
(let [sorted-communities (sort-by sort-list-by communities)]
[list/flat-list
{:key-fn :id
:getItemLayout get-item-layout-js
:keyboard-should-persist-taps :always
:shows-horizontal-scroll-indicator false
:header (featured-communities-section communities)
:data sorted-communities
:render-fn render-other-fn}]))
(defn discover-communities []
(let [communities (<sub [:communities/communities])]
[rn/view {:flex 1}
[quo2.button/button {:icon true
:type :grey
:size 32
:style {:margin-vertical 12
:margin-left 20}
:on-press #(>evt [:navigate-back])}
:close]
[screen-title]
[other-communities communities :name]]))
(defn communities []
(fn []
[safe-area/consumer
(fn []
[rn/view {:style {:flex 1
:background-color (colors/theme-colors
colors/white
colors/neutral-90)}}
[discover-communities]])]))

1
translations/en.json
View File

@ -1122,6 +1122,7 @@
"scan-qr": "Scan QR code",
"scan-qr-code": "Scan a QR code with a wallet address",
"search": "Search",
"search-discover-communities": "Search communities or categories",
"secret-keys-confirmation-text": "You will need them to continue to use your Keycard in case you ever lose your phone.",
"secret-keys-confirmation-title": "Written the codes down?",
"security": "Security",