From a1c1be8f8a30fb69cdf1b6e55461641b637bb7b7 Mon Sep 17 00:00:00 2001 From: John Ngei Date: Wed, 9 Nov 2022 15:41:34 +0300 Subject: [PATCH] updated communities home and discover screen (#14018) --- .../community/community_card_view.cljs | 6 +- .../community/community_list_view.cljs | 65 +++-- .../components/community/community_view.cljs | 11 +- .../components/community/discover_card.cljs | 7 +- src/quo2/components/separator.cljs | 2 +- src/quo2/components/tabs/tabs.cljs | 17 +- src/quo2/components/tags/tags.cljs | 3 +- .../community/community_card_view.cljs | 31 +-- .../community/community_list_view.cljs | 70 +++++ src/quo2/screens/community/discover_card.cljs | 34 +++ src/quo2/screens/main.cljs | 12 +- src/quo2/screens/tags/tags.cljs | 4 +- src/status_im/navigation2/screens.cljs | 12 +- src/status_im/switcher/home_stack.cljs | 6 +- src/status_im/ui/components/topbar.cljs | 2 +- src/status_im/ui/components/topnav.cljs | 55 ---- .../ui/screens/bottom_sheets/views.cljs | 6 +- .../communities_list_redesign.cljs | 239 ------------------ .../community_membership_status.cljs | 149 ----------- .../community_overview_redesign.cljs | 6 +- .../screens/communities/sort_communities.cljs | 52 ---- .../ui/screens/communities/styles.cljs | 18 +- src/status_im/ui/screens/home/views.cljs | 33 +-- .../screens/communities/communities_home.cljs | 114 +++++++++ .../communities/discover_communities.cljs | 133 ++++++++++ translations/en.json | 1 + 26 files changed, 503 insertions(+), 585 deletions(-) create mode 100644 src/quo2/screens/community/community_list_view.cljs create mode 100644 src/quo2/screens/community/discover_card.cljs delete mode 100644 src/status_im/ui/components/topnav.cljs delete mode 100644 src/status_im/ui/screens/communities/communities_list_redesign.cljs delete mode 100644 src/status_im/ui/screens/communities/community_membership_status.cljs delete mode 100644 src/status_im/ui/screens/communities/sort_communities.cljs create mode 100644 src/status_im/ui2/screens/communities/communities_home.cljs create mode 100644 src/status_im/ui2/screens/communities/discover_communities.cljs diff --git a/src/quo2/components/community/community_card_view.cljs b/src/quo2/components/community/community_card_view.cljs index 86cad5ed21..8210479ce9 100644 --- a/src/quo2/components/community/community_card_view.cljs +++ b/src/quo2/components/community/community_card_view.cljs @@ -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]]]]]]])) diff --git a/src/quo2/components/community/community_list_view.cljs b/src/quo2/components/community/community_list_view.cljs index dcdc1164d9..aa3ee28b61 100644 --- a/src/quo2/components/community/community_list_view.cljs +++ b/src/quo2/components/community/community_list_view.cljs @@ -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}]])]]]]) \ No newline at end of file diff --git a/src/quo2/components/community/community_view.cljs b/src/quo2/components/community/community_view.cljs index abe58b01b4..3f55c43ca3 100644 --- a/src/quo2/components/community/community_view.cljs +++ b/src/quo2/components/community/community_view.cljs @@ -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}]) \ No newline at end of file diff --git a/src/quo2/components/community/discover_card.cljs b/src/quo2/components/community/discover_card.cljs index b251d3b310..f9192e1e64 100644 --- a/src/quo2/components/community/discover_card.cljs +++ b/src/quo2/components/community/discover_card.cljs @@ -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 - ]])) + ]])) \ No newline at end of file diff --git a/src/quo2/components/separator.cljs b/src/quo2/components/separator.cljs index 5d7e7868df..fe32ed6cd2 100644 --- a/src/quo2/components/separator.cljs +++ b/src/quo2/components/separator.cljs @@ -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})}]) \ No newline at end of file diff --git a/src/quo2/components/tabs/tabs.cljs b/src/quo2/components/tabs/tabs.cljs index cf4ce781fa..47bca4bbf7 100644 --- a/src/quo2/components/tabs/tabs.cljs +++ b/src/quo2/components/tabs/tabs.cljs @@ -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 diff --git a/src/quo2/components/tags/tags.cljs b/src/quo2/components/tags/tags.cljs index c1cccc5205..5e26426ee4 100644 --- a/src/quo2/components/tags/tags.cljs +++ b/src/quo2/components/tags/tags.cljs @@ -25,5 +25,4 @@ :main-icons2/placeholder resource) :on-press #(do (reset! active-tab-id %) - (when on-change (on-change %)))}) - tag-label]])])))) \ No newline at end of file + (when on-change (on-change %)))})]])])))) \ No newline at end of file diff --git a/src/quo2/screens/community/community_card_view.cljs b/src/quo2/screens/community/community_card_view.cljs index 69f4d23971..0406d2e774 100644 --- a/src/quo2/screens/community/community_card_view.cljs +++ b/src/quo2/screens/community/community_card_view.cljs @@ -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) diff --git a/src/quo2/screens/community/community_list_view.cljs b/src/quo2/screens/community/community_list_view.cljs new file mode 100644 index 0000000000..4b6d54a056 --- /dev/null +++ b/src/quo2/screens/community/community_list_view.cljs @@ -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}]]) + diff --git a/src/quo2/screens/community/discover_card.cljs b/src/quo2/screens/community/discover_card.cljs new file mode 100644 index 0000000000..9af7a9d4b1 --- /dev/null +++ b/src/quo2/screens/community/discover_card.cljs @@ -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}]]) diff --git a/src/quo2/screens/main.cljs b/src/quo2/screens/main.cljs index 75728d6ea6..2a187f71d3 100644 --- a/src/quo2/screens/main.cljs +++ b/src/quo2/screens/main.cljs @@ -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}] diff --git a/src/quo2/screens/tags/tags.cljs b/src/quo2/screens/tags/tags.cljs index e461b04742..9dcfe98c17 100644 --- a/src/quo2/screens/tags/tags.cljs +++ b/src/quo2/screens/tags/tags.cljs @@ -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 diff --git a/src/status_im/navigation2/screens.cljs b/src/status_im/navigation2/screens.cljs index aab483f402..fbb5b53fd5 100644 --- a/src/status_im/navigation2/screens.cljs +++ b/src/status_im/navigation2/screens.cljs @@ -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 diff --git a/src/status_im/switcher/home_stack.cljs b/src/status_im/switcher/home_stack.cljs index 5d997d0116..3f5995ca81 100644 --- a/src/status_im/switcher/home_stack.cljs +++ b/src/status_im/switcher/home_stack.cljs @@ -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])])])) diff --git a/src/status_im/ui/components/topbar.cljs b/src/status_im/ui/components/topbar.cljs index bffe2d5279..478d2699db 100644 --- a/src/status_im/ui/components/topbar.cljs +++ b/src/status_im/ui/components/topbar.cljs @@ -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)}))])])) \ No newline at end of file diff --git a/src/status_im/ui/components/topnav.cljs b/src/status_im/ui/components/topnav.cljs deleted file mode 100644 index c8d6f051fc..0000000000 --- a/src/status_im/ui/components/topnav.cljs +++ /dev/null @@ -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 [ - [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}]])])) diff --git a/src/status_im/ui/screens/bottom_sheets/views.cljs b/src/status_im/ui/screens/bottom_sheets/views.cljs index fc41b62118..d6174cc794 100644 --- a/src/status_im/ui/screens/bottom_sheets/views.cljs +++ b/src/status_im/ui/screens/bottom_sheets/views.cljs @@ -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)])])) \ No newline at end of file diff --git a/src/status_im/ui/screens/communities/communities_list_redesign.cljs b/src/status_im/ui/screens/communities/communities_list_redesign.cljs deleted file mode 100644 index 093848bc18..0000000000 --- a/src/status_im/ui/screens/communities/communities_list_redesign.cljs +++ /dev/null @@ -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 [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? (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 ( - [rn/view {:margin-vertical 4 - :padding-horizontal 20} - [separator/separator]] - [community-segments]]) - [community-segments-view communities]]])])) diff --git a/src/status_im/ui/screens/communities/community_membership_status.cljs b/src/status_im/ui/screens/communities/community_membership_status.cljs deleted file mode 100644 index 4282bd8ba8..0000000000 --- a/src/status_im/ui/screens/communities/community_membership_status.cljs +++ /dev/null @@ -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 [ - [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}) diff --git a/src/status_im/ui/screens/communities/styles.cljs b/src/status_im/ui/screens/communities/styles.cljs index 5174faa1f2..b81833b298 100644 --- a/src/status_im/ui/screens/communities/styles.cljs +++ b/src/status_im/ui/screens/communities/styles.cljs @@ -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 diff --git a/src/status_im/ui/screens/home/views.cljs b/src/status_im/ui/screens/home/views.cljs index 359d13f7c9..4765504fa4 100644 --- a/src/status_im/ui/screens/home/views.cljs +++ b/src/status_im/ui/screens/home/views.cljs @@ -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 diff --git a/src/status_im/ui2/screens/communities/communities_home.cljs b/src/status_im/ui2/screens/communities/communities_home.cljs new file mode 100644 index 0000000000..d8dc2af3ae --- /dev/null +++ b/src/status_im/ui2/screens/communities/communities_home.cljs @@ -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 [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? (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 (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 (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]])])) diff --git a/translations/en.json b/translations/en.json index e2112215dc..45530e963f 100644 --- a/translations/en.json +++ b/translations/en.json @@ -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",