From 3777ebc36e24cae2683b2e17dca081f6d8b7dce4 Mon Sep 17 00:00:00 2001 From: flexsurfer Date: Thu, 17 Nov 2022 16:43:02 +0100 Subject: [PATCH] move communities 2 (#14394) --- src/quo2/core.cljs | 10 +- src/status_im/communities/core.cljs | 6 +- .../ui/screens/communities/community.cljs | 81 +++++---- .../community_overview_redesign.cljs | 171 ------------------ .../ui/screens/communities/icon.cljs | 1 + .../ui/screens/communities/profile.cljs | 2 +- ...request_to_join_bottom_sheet_redesign.cljs | 132 -------------- .../ui/screens/communities/views.cljs | 12 -- src/status_im/ui/screens/screens.cljs | 5 +- .../contexts/communities/actions/view.cljs | 1 + .../contexts/communities/discover/view.cljs | 2 +- .../communities/home/actions/view.cljs} | 78 ++++---- .../contexts/communities/home/style.cljs | 15 ++ .../contexts/communities/home/view.cljs | 70 +++---- .../contexts/communities/overview/style.cljs | 23 +++ .../contexts/communities/overview/view.cljs | 134 ++++++++++++++ .../communities/requests/actions/style.cljs | 48 +++++ .../communities/requests/actions/view.cljs | 99 ++++++++++ src/status_im2/navigation/screens.cljs | 9 +- 19 files changed, 444 insertions(+), 455 deletions(-) delete mode 100644 src/status_im/ui/screens/communities/community_overview_redesign.cljs delete mode 100644 src/status_im/ui/screens/communities/request_to_join_bottom_sheet_redesign.cljs create mode 100644 src/status_im2/contexts/communities/actions/view.cljs rename src/{status_im/ui/screens/communities/community_options_bottom_sheet.cljs => status_im2/contexts/communities/home/actions/view.cljs} (59%) create mode 100644 src/status_im2/contexts/communities/home/style.cljs create mode 100644 src/status_im2/contexts/communities/overview/style.cljs create mode 100644 src/status_im2/contexts/communities/overview/view.cljs create mode 100644 src/status_im2/contexts/communities/requests/actions/style.cljs create mode 100644 src/status_im2/contexts/communities/requests/actions/view.cljs diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index ebe03af3c8..22b8a65d76 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -36,7 +36,10 @@ quo2.components.tabs.tabs quo2.components.tabs.account-selector quo2.components.navigation.top-nav - quo2.components.navigation.floating-shell-button)) + quo2.components.navigation.floating-shell-button + quo2.components.tags.status-tags + quo2.components.navigation.page-nav + quo2.components.selectors.disclaimer)) (def button quo2.components.buttons.button/button) (def dynamic-button quo2.components.buttons.dynamic-button/dynamic-button) @@ -54,11 +57,15 @@ (def reaction quo2.components.reactions.reaction/reaction) (def tags quo2.components.tags.tags/tags) (def user-avatar-tag quo2.components.tags.context-tags/user-avatar-tag) +(def context-tag quo2.components.tags.context-tags/context-tag) (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) (def top-nav quo2.components.navigation.top-nav/top-nav) (def floating-shell-button quo2.components.navigation.floating-shell-button/floating-shell-button) +(def status-tag quo2.components.tags.status-tags/status-tag) +(def page-nav quo2.components.navigation.page-nav/page-nav) +(def disclaimer quo2.components.selectors.disclaimer/disclaimer) ;;;; AVATAR (def account-avatar quo2.components.avatars.account-avatar/account-avatar) @@ -76,6 +83,7 @@ (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 permission-tag-container quo2.components.community.community-view/permission-tag-container) (def discover-card quo2.components.community.discover-card/discover-card) ;;;; DIVIDERS diff --git a/src/status_im/communities/core.cljs b/src/status_im/communities/core.cljs index 59d9603286..44803d4f65 100644 --- a/src/status_im/communities/core.cljs +++ b/src/status_im/communities/core.cljs @@ -134,7 +134,7 @@ (re-frame/dispatch [::failed-to-import %]))}]}) (fx/defn join - {:events [::join]} + {:events [:communities/join]} [cofx community-id] {::json-rpc/call [{:method "wakuext_joinCommunity" :params [community-id] @@ -156,8 +156,8 @@ (re-frame/dispatch [::failed-to-request-to-join %]))}]}) (fx/defn leave - {:events [::leave]} - [{:keys [db] :as cofx} community-id] + {:events [:communities/leave]} + [{:keys [db]} community-id] (let [community-chat-ids (map #(str community-id %) (keys (get-in db [:communities community-id :chats])))] {:clear-message-notifications [community-chat-ids diff --git a/src/status_im/ui/screens/communities/community.cljs b/src/status_im/ui/screens/communities/community.cljs index 7c3e687c68..343f8d1978 100644 --- a/src/status_im/ui/screens/communities/community.cljs +++ b/src/status_im/ui/screens/communities/community.cljs @@ -1,28 +1,29 @@ (ns status-im.ui.screens.communities.community - (:require [status-im.ui.components.topbar :as topbar] - [quo.react-native :as rn] + (:require [i18n.i18n :as i18n] + [utils.re-frame :as rf] + [react-native.core :as rn] + [quo2.components.community.style :as styles] + + ;; TODO reimplement with quo2 library and new designs + [status-im.ui.components.topbar :as topbar] [status-im.ui.components.toolbar :as toolbar] - [quo.core :as quo] [status-im.constants :as constants] [status-im.chat.models.link-preview :as link-preview] - [status-im.utils.handlers :refer [>evt evt [:bottom-sheet/hide]) - (>evt event)) + (rf/dispatch [:bottom-sheet/hide]) + (rf/dispatch event)) (defn community-plus-actions [{:keys [id permissions can-manage-users?]}] (let [can-invite? (and can-manage-users? (not= (:access permissions) constants/community-no-membership-access)) @@ -87,14 +88,14 @@ :title (i18n/label :t/invite-people) :icon :main-icons/share :accessibility-label :community-invite-people - :on-press #(>evt [:communities/invite-people-pressed id])}]) + :on-press #(rf/dispatch [:communities/invite-people-pressed id])}]) (when (and can-share? (not can-invite?)) [quo/list-item {:theme :accent :title (i18n/label :t/invite-people) :icon :main-icons/share :accessibility-label :community-share - :on-press #(>evt [:communities/share-community-pressed id])}])])) + :on-press #(rf/dispatch [:communities/share-community-pressed id])}])])) (defn community-actions [{:keys [id name images color can-manage-users?]}] (let [thumbnail-image (get-in images [:thumbnail :uri])] @@ -153,13 +154,13 @@ ;; unread indicator (assoc home-item :public? true) {:on-press (fn [] - (re-frame/dispatch [:dismiss-keyboard]) - (re-frame/dispatch [:chat.ui/navigate-to-chat chat-id]) - (re-frame/dispatch [:search/home-filter-changed nil]) - (re-frame/dispatch [:accept-all-activity-center-notifications-from-chat chat-id])) - :on-long-press #(re-frame/dispatch [:bottom-sheet/show-sheet - {:content (fn [] - [sheets/actions home-item])}])}]) + (rf/dispatch [:dismiss-keyboard]) + (rf/dispatch [:chat.ui/navigate-to-chat chat-id]) + (rf/dispatch [:search/home-filter-changed nil]) + (rf/dispatch [:accept-all-activity-center-notifications-from-chat chat-id])) + :on-long-press #(rf/dispatch [:bottom-sheet/show-sheet + {:content (fn [] + [sheets/actions home-item])}])}]) (defn categories-accordion [community-id chats categories data] [:<> @@ -167,8 +168,8 @@ ^{:key (str "cat" name id)} [:<> [accordion/section - {:on-open #(>evt [::communities/store-category-state community-id id true]) - :on-close #(>evt [::communities/store-category-state community-id id false]) + {:on-open #(rf/dispatch [::communities/store-category-state community-id id true]) + :on-close #(rf/dispatch [::communities/store-category-state community-id id false]) :default state :title [rn/view styles/category-item [icons/icon :main-icons/channel-category {:color colors/gray}] @@ -180,7 +181,7 @@ [quo/separator]])]) (defn community-chat-list [community-id categories from-chat] - (let [chats ( {:style {:flex 1}} [topbar/topbar {:title (if fetching (i18n/label :t/fetching-community) (i18n/label :t/not-found))}] [rn/view {:style {:padding 16 :flex 1 :flex-direction :row :align-items :center :justify-content :center}} - [quo/button {:on-press (when-not fetching #(>evt [::link-preview/resolve-community-info community-id])) + [quo/button {:on-press (when-not fetching #(rf/dispatch [::link-preview/resolve-community-info community-id])) :disabled fetching - :color :secondary} + :color :secondary} (if fetching - [components.react/small-loading-indicator] + [react/small-loading-indicator] (i18n/label :t/fetch-community))]]])) (defn community [] - (let [{:keys [community-id from-chat]} (evt [:bottom-sheet/show-sheet - {:content (fn [] - [community-actions community])}])}])}] + :on-press #(rf/dispatch [:bottom-sheet/show-sheet + {:content (fn [] + [community-actions community])}])}])}] (if joined [community-chat-list id categories false from-chat] [community-channel-preview-list id chats]) (when admin [components.plus-button/plus-button-old - {:on-press #(>evt [:bottom-sheet/show-sheet - {:content (fn [] - [community-plus-actions community])}]) + {:on-press #(rf/dispatch [:bottom-sheet/show-sheet + {:content (fn [] + [community-plus-actions community])}]) :accessibility-label :new-chat-button}]) (when-not joined (cond can-join? [toolbar/toolbar {:show-border? true - :center [quo/button {:on-press #(>evt [::communities/join id]) + :center [quo/button {:on-press #(rf/dispatch [:communities/join id]) :type :secondary} (i18n/label :t/join)]}] can-request-access? @@ -292,13 +293,13 @@ :left [quo/text {:color :secondary} (i18n/label :t/membership-request-pending)]}] [toolbar/toolbar {:show-border? true - :center [quo/button {:on-press #(>evt [::communities/request-to-join id]) + :center [quo/button {:on-press #(rf/dispatch [::communities/request-to-join id]) :type :secondary} (i18n/label :t/request-access)]}]) :else [toolbar/toolbar {:show-border? true - :center [quo/button {:on-press #(>evt [::communities/join id]) + :center [quo/button {:on-press #(rf/dispatch [:communities/join id]) :type :secondary} (i18n/label :t/follow)]}]))] [unknown-community community-id]))))) diff --git a/src/status_im/ui/screens/communities/community_overview_redesign.cljs b/src/status_im/ui/screens/communities/community_overview_redesign.cljs deleted file mode 100644 index ec008fa0c1..0000000000 --- a/src/status_im/ui/screens/communities/community_overview_redesign.cljs +++ /dev/null @@ -1,171 +0,0 @@ -(ns status-im.ui.screens.communities.community-overview-redesign - (:require [status-im.i18n.i18n :as i18n] - [quo.react-native :as rn] - [quo2.components.markdown.text :as text] - [quo2.components.buttons.button :as button] - [quo2.components.list-items.preview-list :as preview-list] - [quo2.components.list-items.channel :as channel] - [quo2.components.dividers.divider-label :as divider-label] - [quo2.components.community.community-view :as community-view] - [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.community-options-bottom-sheet :as options-menu] - [status-im.ui.components.list.views :as list] - [status-im.utils.handlers :refer [evt]] - [status-im.ui.screens.communities.icon :as communities.icon])) - -;; Mocked list items -(def user-list - [{:full-name "Alicia K"} - {:full-name "Marcus C"} - {:full-name "MNO PQR"} - {:full-name "STU VWX"}]) - -(defn preview-user-list [] - [rn/view {:style {:flex-direction :row - :align-items :center - :margin-top 20}} - [preview-list/preview-list {:type :user - :more-than-99-label (i18n/label :counter-99-plus) - :user user-list :list-size 4 :size 24}] - [text/text {:accessibility-label :communities-screen-title - :style {:margin-left 8} - :size :label} - "Join Alicia, Marcus and 2 more"]]) ;; TODO remove mocked data and use from contacts list/communities members - -(def list-of-channels {:Welcome [{:name "welcome" - :emoji "🤝"} - {:name "onboarding" - :emoji "🍑"} - {:name "intro" - :emoji "🦄"}] - :General [{:name "general" - :emoji "🐷"} - {:name "people-ops" - :emoji "🌏"} - {:name "announcements" - :emoji "🎺"}] - :Mobile [{:name "mobile" - :emoji "👽"}]}) - -(defn channel-list-component [] - [rn/scroll-view {:style {:margin-top 20}} - [:<> {:style {:flex 1}} - (map (fn [category] - ^{:key (get category 0)} - [rn/view {:flex 1} - [divider-label/divider-label - {:label (first category) - :chevron-position :left}] - [rn/view - {:margin-left 8 - :margin-top 10 - :margin-bottom 8} - [list/flat-list - {:shows-horizontal-scroll-indicator false - :separator [rn/view {:margin-top 4}] - :data ((first category) list-of-channels) - :render-fn channel/list-item}]]]) - list-of-channels)]]) - -(defn icon-color [] - (colors/theme-colors - colors/white-opa-40 - colors/neutral-80-opa-40)) - -(defn community-card-page-view [{:keys [name description locked joined - status tokens cover tags community-color] :as community}] - [rn/view - {:style - {:flex 1 - :border-radius 20}} - [rn/view (styles/community-cover-container 148) - - [rn/image - {:source cover - :style {:position :absolute - :flex 1}}] - [rn/view {:style {:margin-top 26}} - [page-nav/page-nav - {:horizontal-description? true - :one-icon-align-left? true - :align-mid? false - :page-nav-color :transparent - :page-nav-background-uri "" - :mid-section {:type :text-with-description} - :right-section-buttons [{:icon :i/search - :background-color (icon-color)} - {:icon :i/options - :background-color (icon-color) - :on-press #(>evt [:bottom-sheet/show-sheet - {:content (constantly [options-menu/options-menu community]) - :content-height 400}])}] - :left-section {:icon :i/close - :icon-background-color (icon-color) - :on-press #(>evt [:navigate-back])}}]]] - [rn/view {:flex 1 - :height 20 - :border-radius 16 - :background-color (colors/theme-colors - colors/white - colors/neutral-90)} - [rn/view {:padding-horizontal 20} - [rn/view {:border-radius 40 - :border-width 1 - :border-color colors/white - :position :absolute - :top (- (/ 80 2)) - :left (/ 70 4) - :padding 2 - :background-color (colors/theme-colors - colors/white - colors/neutral-90)} - [communities.icon/community-icon-redesign community 80]] - (when (and (not joined) - (= status :gated)) - [rn/view (styles/permission-tag-styles) - [community-view/permission-tag-container - {:locked locked - :status status - :tokens tokens}]]) - (when joined - [rn/view {:position :absolute - :top 12 - :right 12} - [status-tags/status-tag {:status {:type :positive} :label (i18n/label :joined)}]]) - [community-view/community-title - {:title name - :size :large - :description description}] - [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 - {:on-press #(>evt [:bottom-sheet/show-sheet - {:content (constantly [request-to-join/request-to-join community]) - :content-height 300}]) - :override-background-color community-color - :style - {:width "100%" - :margin-top 20 - :margin-left :auto - :margin-right :auto} - :before :i/communities} - (i18n/label :join-open-community)])] - [channel-list-component]]]) - -(defn overview [] - (let [community-mock (evt [::communities/leave community-id])}] + :on-press #(>evt [:communities/leave community-id])}] ;; Disable as not implemented yet (when false [quo/list-item {:theme :negative diff --git a/src/status_im/ui/screens/communities/request_to_join_bottom_sheet_redesign.cljs b/src/status_im/ui/screens/communities/request_to_join_bottom_sheet_redesign.cljs deleted file mode 100644 index e0efa3d019..0000000000 --- a/src/status_im/ui/screens/communities/request_to_join_bottom_sheet_redesign.cljs +++ /dev/null @@ -1,132 +0,0 @@ -(ns status-im.ui.screens.communities.request-to-join-bottom-sheet-redesign - (:require [status-im.i18n.i18n :as i18n] - [reagent.core :as reagent] - [status-im.react-native.resources :as resources] - [status-im.ui.components.list.views :as list] - [status-im.ui.components.react :as react] - [quo2.components.markdown.text :as text] - [quo2.components.buttons.button :as button] - [quo2.components.selectors.disclaimer :as disclaimer] - [quo2.components.icon :as icon] - [status-im.utils.handlers :refer [>evt]] - [quo2.components.tags.context-tags :as context-tags] - [status-im.communities.core :as communities] - [quo2.foundations.colors :as colors])) - -;; TODO: update with real data -(def community-rules [{:index 1 - :title "Be respectful" - :content "You must respect all users, regardless of your liking towards them. Treat others the way you want to be treated."} - {:index 2 - :title "No Inappropriate Language" - :content "The use of profanity should be kept to a minimum. However, any derogatory language towards any user is prohibited."} - {:index 3 - :title "No spamming" - :content "Don't send a lot of small messages right after each other. Do not disrupt chat by spamming."} - {:index 4 - :title "No pornographic, adult or NSFW material" - :content "This is a community server and not meant to share this kind of material."} - {:index 5 - :title "No advertisements" - :content "We do not tolerate any kind of advertisements, whether it be for other communities or streams."} - {:index 6 - :title "No offensive names and profile pictures" - :content "You will be asked to change your name or picture if the staff deems them inappropriate."}]) - -(defn community-rule-item [{:keys [title content index]}] - [react/view - {:style {:flex 1 :margin-top 16}} - [react/view - {:style - {:flex 1 - :flex-direction :row - :align-items :center}} - [react/view - {:style - {:height 18 - :width 18 - :margin-left 1 - :margin-right 9 - :background-color colors/white - :border-color colors/neutral-20 - :border-width 1 - :border-radius 6}} - [text/text {:style - {:margin-left :auto - :margin-right :auto - :margin-top :auto - :margin-bottom :auto} - :accessibility-label :communities-rule-index - :weight :medium - :size :label} - - (str index)]] - [text/text - {:accessibility-label :communities-rule-title - :weight :semi-bold - :size :paragraph-2} - title]] - [text/text - {:style {:margin-left 28 :margin-top 1} - :accessibility-label :communities-rule-content - :size :paragraph-2} - content]]) - -(defn community-rules-list [rules] - [list/flat-list - {:shows-horizontal-scroll-indicator false - :data rules - :separator [react/view {:margin-top 1}] - :render-fn community-rule-item}]) - -(defn request-to-join [community] - (let [agreed-to-rules? (reagent/atom false)] - (fn [] - [react/view {:style {:flex 1 :margin-left 20 :margin-right 20 :margin-bottom 20}} - [react/view {:style {:flex 1 :flex-direction :row :align-items :center :justify-content :space-between}} - - [text/text {:accessibility-label :communities-join-community - :weight :semi-bold - :size :heading-1} - (i18n/label :t/join-open-community)] - [react/view {:style {:height 32 - :width 32 - :align-items :center - :background-color colors/white - :border-color colors/neutral-20 - :border-width 1 - :border-radius 8 - :display :flex - :justify-content :center}} - [icon/icon :i/info]]] - ;; TODO get tag image from community data - [context-tags/context-tag - {:style - {:margin-right :auto - :margin-top 8}} - (resources/get-image :status-logo) (:name community)] - [text/text {:style {:margin-top 24} - :accessibility-label :communities-rules-title - :weight :semi-bold - :size :paragraph-1} - (i18n/label :t/community-rules)] - [community-rules-list community-rules] - - [disclaimer/disclaimer - {:container-style {:margin-top 20} - :on-change #(swap! agreed-to-rules? not)} - (i18n/label :t/accept-community-rules)] - - [react/view {:style {:width "100%" - :margin-top 32 :margin-bottom 16 - :flex 1 - :flex-direction :row - :align-items :center - :justify-content :space-evenly}} - [button/button {:on-press #(>evt [:bottom-sheet/hide]) - :type :grey :style {:flex 1 :margin-right 12}} (i18n/label :t/cancel)] - [button/button - {:on-press (fn [] - (>evt [::communities/join (:id community)]) - (>evt [:bottom-sheet/hide])) - :disabled (not @agreed-to-rules?) :style {:flex 1}} (i18n/label :t/join-open-community)]]]))) diff --git a/src/status_im/ui/screens/communities/views.cljs b/src/status_im/ui/screens/communities/views.cljs index 62e7080581..b76567c6ec 100644 --- a/src/status_im/ui/screens/communities/views.cljs +++ b/src/status_im/ui/screens/communities/views.cljs @@ -159,15 +159,3 @@ :accessibility-label :chat-key :monospace true} community-key]]])) - -(defn render-featured-community [{:keys [name id]}] - [react/touchable-highlight {:on-press #(>evt [:navigate-to :community {:community-id id}]) - :accessibility-label :chat-item} - [react/view {:padding-right 8 - :padding-vertical 8} - [react/view {:border-color quo.colors/gray-lighter - :border-radius 36 - :border-width 1 - :padding-horizontal 8 - :padding-vertical 5} - [quo/text {:color :link} name]]]]) diff --git a/src/status_im/ui/screens/screens.cljs b/src/status_im/ui/screens/screens.cljs index 5b2afd5da5..c1cb301b59 100644 --- a/src/status_im/ui/screens/screens.cljs +++ b/src/status_im/ui/screens/screens.cljs @@ -18,7 +18,6 @@ [status-im.ui.screens.browser.views :as browser] [status-im.ui.screens.bug-report :as bug-report] [status-im.ui.screens.chat.pinned-messages :as pin-messages] - [status-im.ui.screens.communities.community-overview-redesign :as community-overview] [status-im.ui.screens.communities.channel-details :as communities.channel-details] [status-im.ui.screens.communities.community :as community] [status-im.ui.screens.communities.community-emoji-thumbnail-picker :as community-emoji-thumbnail-picker] @@ -307,9 +306,7 @@ {:name :community-membership :options {:topBar {:title {:text (i18n/label :t/membership-title)}}} :component membership/membership} - {:name :community-overview - :options {:topBar {:visible false}} - :component community-overview/overview} + ;;BROWSER {:name :empty-tab diff --git a/src/status_im2/contexts/communities/actions/view.cljs b/src/status_im2/contexts/communities/actions/view.cljs new file mode 100644 index 0000000000..12ff4ba1ff --- /dev/null +++ b/src/status_im2/contexts/communities/actions/view.cljs @@ -0,0 +1 @@ +(ns status-im2.contexts.communities.actions.view) diff --git a/src/status_im2/contexts/communities/discover/view.cljs b/src/status_im2/contexts/communities/discover/view.cljs index 22caeebba4..55738492eb 100644 --- a/src/status_im2/contexts/communities/discover/view.cljs +++ b/src/status_im2/contexts/communities/discover/view.cljs @@ -120,7 +120,7 @@ :data sorted-communities :render-fn render-other-fn}])) -(defn discover-communities [] +(defn discover [] [safe-area/consumer (fn [] [rn/view {:style {:flex 1 diff --git a/src/status_im/ui/screens/communities/community_options_bottom_sheet.cljs b/src/status_im2/contexts/communities/home/actions/view.cljs similarity index 59% rename from src/status_im/ui/screens/communities/community_options_bottom_sheet.cljs rename to src/status_im2/contexts/communities/home/actions/view.cljs index d834469841..264bb8569c 100644 --- a/src/status_im/ui/screens/communities/community_options_bottom_sheet.cljs +++ b/src/status_im2/contexts/communities/home/actions/view.cljs @@ -1,13 +1,8 @@ -(ns status-im.ui.screens.communities.community-options-bottom-sheet - (:require [status-im.i18n.i18n :as i18n] - [quo.react-native :as rn] - [quo2.components.markdown.text :as text] - [quo2.components.buttons.button :as button] - [quo2.components.drawers.action-drawers :as action-drawers] - [quo2.components.tags.context-tags :as context-tags] - [status-im.react-native.resources :as resources] - [utils.re-frame :as rf] - [status-im.communities.core :as communities])) +(ns status-im2.contexts.communities.home.actions.view + (:require [i18n.i18n :as i18n] + [utils.re-frame :as rf] + [react-native.core :as rn] + [quo2.core :as quo])) (defn hide-sheet-and-dispatch [event] (rf/dispatch [:bottom-sheet/hide]) @@ -63,49 +58,44 @@ [rn/view {:style {:flex 1 :margin-left 20 :margin-right 20 :margin-bottom 20}} [rn/view {:style {:flex 1 :flex-direction :row :align-items :center :justify-content :space-between}} - [text/text {:accessibility-label :communities-join-community - :weight :semi-bold - :size :heading-1} + [quo/text {:accessibility-label :communities-join-community + :weight :semi-bold + :size :heading-1} (i18n/label :t/leave-community?)]] - ;; TODO get tag image from community data - [context-tags/context-tag - {:style - {:margin-right :auto - :margin-top 8}} - (resources/get-image :status-logo) (:name community)] - [text/text {:accessibility-label :communities-join-community - :size :paragraph-1 - :style {:margin-top 16}} + ;; TODO get tag image from community data + #_[quo/context-tag + {:style + {:margin-right :auto + :margin-top 8}} + (resources/get-image :status-logo) (:name community)] + [quo/text {:accessibility-label :communities-join-community + :size :paragraph-1 + :style {:margin-top 16}} (i18n/label :t/leave-community-message)] - [rn/view {:style {:width "100%" - :margin-top 16 + [rn/view {:style {:margin-top 16 :margin-bottom 16 :flex 1 :flex-direction :row :align-items :center :justify-content :space-evenly}} - [button/button {:on-press #(rf/dispatch [:bottom-sheet/hide]) - :type :grey - :style {:flex 1 - :margin-right 12}} + [quo/button {:on-press #(rf/dispatch [:bottom-sheet/hide]) + :type :grey + :style {:flex 1 + :margin-right 12}} (i18n/label :t/cancel)] - [button/button {:on-press (fn [] - #(rf/dispatch [::communities/leave (:id community)]) - #(rf/dispatch [:bottom-sheet/hide])) - :style {:flex 1}} + [quo/button {:on-press #(hide-sheet-and-dispatch [:communities/leave (:id community)]) + :style {:flex 1}} (i18n/label :t/leave-community)]]]) -(defn options-menu [] +(defn actions [] (let [community-mock (rf/sub [:get-screen-params :community-overview]) ;;TODO stop using mock data and only pass community id community (rf/sub [:communities/community (:id community-mock)])] - [action-drawers/action-drawer [(get (if (:joined community) - (joined-options (:id community)) - not-joined-options) :actions) - (when (:joined community) - [{:icon :i/log-out - :label (i18n/label :t/leave-community) - :on-press #(rf/dispatch [:bottom-sheet/show-sheet - {:content (constantly [leave-sheet community]) - :content-height 300}])}])]])) - - + [quo/action-drawer [(get (if (:joined community) + (joined-options (:id community)) + not-joined-options) :actions) + (when (:joined community) + [{:icon :i/log-out + :label (i18n/label :t/leave-community) + :on-press #(rf/dispatch [:bottom-sheet/show-sheet + {:content (constantly [leave-sheet community]) + :content-height 300}])}])]])) diff --git a/src/status_im2/contexts/communities/home/style.cljs b/src/status_im2/contexts/communities/home/style.cljs new file mode 100644 index 0000000000..ba50558a03 --- /dev/null +++ b/src/status_im2/contexts/communities/home/style.cljs @@ -0,0 +1,15 @@ +(ns status-im2.contexts.communities.home.style) + +(def title-column + {:flex-direction :row + :align-items :center + :height 56 + :padding-vertical 12 + :margin-bottom 8 + :padding-horizontal 20}) + +(def title-column-text + {:accessibility-label :communities-screen-title + :margin-right 6 + :weight :semi-bold + :size :heading-1}) diff --git a/src/status_im2/contexts/communities/home/view.cljs b/src/status_im2/contexts/communities/home/view.cljs index 8586276c3e..fec9a5b8b1 100644 --- a/src/status_im2/contexts/communities/home/view.cljs +++ b/src/status_im2/contexts/communities/home/view.cljs @@ -3,24 +3,20 @@ [reagent.core :as reagent] [react-native.core :as rn] [react-native.safe-area :as safe-area] - [quo2.components.markdown.text :as text] - [quo2.components.tabs.tabs :as tabs] + [utils.re-frame :as rf] + [i18n.i18n :as i18n] + [quo2.core :as quo] [quo2.foundations.colors :as colors] [quo2.components.community.discover-card :as discover-card] [quo2.components.navigation.top-nav :as topnav] [status-im2.common.plus-button.view :as components.plus-button] - [utils.re-frame :as rf] - [i18n.i18n :as i18n] - [quo2.core :as quo] - [status-im.ui.screens.communities.community-options-bottom-sheet :as home-actions])) + [status-im2.contexts.communities.home.actions.view :as home.actions] + [status-im2.contexts.communities.home.style :as style])) (defn plus-button [] - (let [logging-in? (rf/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}])) + [components.plus-button/plus-button + {:on-press #(re-frame/dispatch [:bottom-sheet/show-sheet :add-new {}]) + :accessibility-label :new-chat-button}]) (defn render-fn [id] (let [community-item (rf/sub [:communities/home-item id])] @@ -31,7 +27,7 @@ (rf/dispatch [:navigate-to :community {:community-id id}])) :on-long-press #(rf/dispatch [:bottom-sheet/show-sheet {:content (fn [] - [home-actions/options-menu community-item])}])} + [home.actions/actions community-item])}])} community-item])) (defn get-item-layout-js [_ index] @@ -45,12 +41,12 @@ :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}]}]]) + [quo/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 [community-ids] [rn/flat-list @@ -78,28 +74,12 @@ [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} + [rn/view style/title-column + [rn/view {:flex 1} + [quo/text style/title-column-text (i18n/label :t/communities)]] [plus-button]]) -(defn discover-card [] - [discover-card/discover-card {:on-press #(rf/dispatch [:navigate-to :discover-communities]) - :title (i18n/label :t/discover) - :description (i18n/label :t/whats-trending) - :accessibility-label :communities-home-discover-card}]) - (defn home [] [safe-area/consumer (fn [insets] @@ -108,9 +88,11 @@ :background-color (colors/theme-colors colors/neutral-5 colors/neutral-95)}} - [rn/view {:flex 1} - [topnav/top-nav {:type :default}] - [title-column] - [discover-card] - [home-community-segments] - [segments-community-lists]]])]) + [topnav/top-nav {:type :default}] + [title-column] + [discover-card/discover-card {:on-press #(rf/dispatch [:navigate-to :discover-communities]) + :title (i18n/label :t/discover) + :description (i18n/label :t/whats-trending) + :accessibility-label :communities-home-discover-card}] + [home-community-segments] + [segments-community-lists]])]) diff --git a/src/status_im2/contexts/communities/overview/style.cljs b/src/status_im2/contexts/communities/overview/style.cljs new file mode 100644 index 0000000000..8ee285d7df --- /dev/null +++ b/src/status_im2/contexts/communities/overview/style.cljs @@ -0,0 +1,23 @@ +(ns status-im2.contexts.communities.overview.style + (:require [quo2.foundations.colors :as colors])) + +(def container1 + {:flex 1 + :height 20 + :border-radius 16 + :background-color (colors/theme-colors colors/white colors/neutral-90)}) + +(def container2 + {:border-radius 40 + :border-width 1 + :border-color colors/white + :position :absolute + :top (- (/ 80 2)) + :left (/ 70 4) + :padding 2 + :background-color (colors/theme-colors colors/white colors/neutral-90)}) + +(def preview-user + {:flex-direction :row + :align-items :center + :margin-top 20}) diff --git a/src/status_im2/contexts/communities/overview/view.cljs b/src/status_im2/contexts/communities/overview/view.cljs new file mode 100644 index 0000000000..1953947bc2 --- /dev/null +++ b/src/status_im2/contexts/communities/overview/view.cljs @@ -0,0 +1,134 @@ +(ns status-im2.contexts.communities.overview.view + (:require [i18n.i18n :as i18n] + [react-native.core :as rn] + [quo2.core :as quo] + [utils.re-frame :as rf] + [quo2.components.community.style :as styles] + [quo2.foundations.colors :as colors] + [status-im2.contexts.communities.home.actions.view :as home.actions] + [status-im2.contexts.communities.requests.actions.view :as requests.actions] + [status-im2.contexts.communities.overview.style :as style] + + ;; TODO move to status-im2 when reimplemented + [status-im.ui.screens.communities.icon :as communities.icon])) + +;; Mocked list items +(def user-list + [{:full-name "Alicia K"} + {:full-name "Marcus C"} + {:full-name "MNO PQR"} + {:full-name "STU VWX"}]) + +(defn preview-user-list [] + [rn/view style/preview-user + [quo/preview-list {:type :user + :more-than-99-label (i18n/label :counter-99-plus) + :user user-list :list-size 4 :size 24}] + [quo/text {:accessibility-label :communities-screen-title + :style {:margin-left 8} + :size :label} + "Join Alicia, Marcus and 2 more"]]) ;; TODO remove mocked data and use from contacts list/communities members + +(def list-of-channels {:Welcome [{:name "welcome" + :emoji "🤝"} + {:name "onboarding" + :emoji "🍑"} + {:name "intro" + :emoji "🦄"}] + :General [{:name "general" + :emoji "🐷"} + {:name "people-ops" + :emoji "🌏"} + {:name "announcements" + :emoji "🎺"}] + :Mobile [{:name "mobile" + :emoji "👽"}]}) + +(defn channel-list-component [] + [rn/scroll-view {:style {:margin-top 20}} + [:<> + (map (fn [category] + ^{:key (get category 0)} + [rn/view {:flex 1} + [quo/divider-label + {:label (first category) + :chevron-position :left}] + [rn/view + {:margin-left 8 + :margin-top 10 + :margin-bottom 8} + [rn/flat-list + {:shows-horizontal-scroll-indicator false + :separator [rn/view {:margin-top 4}] + :data ((first category) list-of-channels) + :render-fn quo/channel-list-item}]]]) + list-of-channels)]]) + +(defn overview [] + (let [community-mock (rf/sub [:get-screen-params :community-overview]) ;;TODO stop using mock data and only pass community id + community (rf/sub [:communities/community (:id community-mock)]) + {:keys [name description locked joined + status tokens cover tags community-color]} (merge community-mock {:joined (:joined community)}) + icon-color (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40)] + [rn/view {:flex 1 :border-radius 20} + [rn/view (styles/community-cover-container 148) ;; TODO why component's style is used here ? + [rn/image + {:source cover + :style {:position :absolute + :flex 1}}] + [rn/view {:style {:margin-top 26}} + [quo/page-nav + {:horizontal-description? true + :one-icon-align-left? true + :align-mid? false + :page-nav-color :transparent + :page-nav-background-uri "" + :mid-section {:type :text-with-description} + :right-section-buttons [{:icon :i/search + :background-color icon-color} + {:icon :i/options + :background-color icon-color + :on-press #(rf/dispatch [:bottom-sheet/show-sheet + {:content (constantly [home.actions/actions community]) + :content-height 400}])}] + :left-section {:icon :i/close + :icon-background-color icon-color + :on-press #(rf/dispatch [:navigate-back])}}]]] + [rn/view style/container1 + [rn/view {:padding-horizontal 20} + [rn/view style/container2 + [communities.icon/community-icon-redesign community 80]] + (when (and (not joined) + (= status :gated)) + [rn/view (styles/permission-tag-styles) + [quo/permission-tag-container + {:locked locked + :status status + :tokens tokens}]]) + (when joined + [rn/view {:position :absolute :top 12 :right 12} + [quo/status-tag {:status {:type :positive} :label (i18n/label :joined)}]]) + [quo/community-title + {:title name + :size :large + :description description}] + [rn/view {:margin-top 12} + [quo/community-stats-column :card-view]] + [rn/view {:margin-top 16} + [quo/community-tags tags]] + [preview-user-list] + (when (not joined) + ;; TODO (flexsurfer) we shouldn't have custom buttons, this should be a component + [quo/button + {:on-press #(rf/dispatch [:bottom-sheet/show-sheet + {:content (constantly [requests.actions/actions community]) + :content-height 300}]) + :override-background-color community-color + :style + {:width "100%" + :margin-top 20 + :margin-left :auto + :margin-right :auto} + :before :i/communities} + (i18n/label :join-open-community)])] + [channel-list-component]]])) diff --git a/src/status_im2/contexts/communities/requests/actions/style.cljs b/src/status_im2/contexts/communities/requests/actions/style.cljs new file mode 100644 index 0000000000..a257aeb3df --- /dev/null +++ b/src/status_im2/contexts/communities/requests/actions/style.cljs @@ -0,0 +1,48 @@ +(ns status-im2.contexts.communities.requests.actions.style + (:require [quo2.foundations.colors :as colors])) + +(def community-rule + {:height 18 + :width 18 + :margin-left 1 + :margin-right 9 + :background-color colors/white + :border-color colors/neutral-20 + :border-width 1 + :border-radius 6}) + +(def community-rule-text + {:margin-left :auto + :margin-right :auto + :margin-top :auto + :margin-bottom :auto}) + +(def request-container1 + {:flex 1 + :margin-left 20 + :margin-right 20 + :margin-bottom 20}) + +(def request-container2 + {:flex 1 :flex-direction + :row :align-items :center + :justify-content :space-between}) + +(def request-icon + {:height 32 + :width 32 + :align-items :center + :background-color colors/white + :border-color colors/neutral-20 + :border-width 1 + :border-radius 8 + :display :flex + :justify-content :center}) + +(def request-button + {:margin-top 32 + :margin-bottom 16 + :flex 1 + :flex-direction :row + :align-items :center + :justify-content :space-evenly}) diff --git a/src/status_im2/contexts/communities/requests/actions/view.cljs b/src/status_im2/contexts/communities/requests/actions/view.cljs new file mode 100644 index 0000000000..c5fc5eef11 --- /dev/null +++ b/src/status_im2/contexts/communities/requests/actions/view.cljs @@ -0,0 +1,99 @@ +(ns status-im2.contexts.communities.requests.actions.view + (:require [i18n.i18n :as i18n] + [reagent.core :as reagent] + [react-native.core :as rn] + [quo2.core :as quo] + [utils.re-frame :as rf] + [status-im2.contexts.communities.requests.actions.style :as style] + + ;;TODO remove when not needed anymore + [status-im.react-native.resources :as resources])) + +;; TODO: update with real data +(def community-rules [{:index 1 + :title "Be respectful" + :content "You must respect all users, regardless of your liking towards them. Treat others the way you want to be treated."} + {:index 2 + :title "No Inappropriate Language" + :content "The use of profanity should be kept to a minimum. However, any derogatory language towards any user is prohibited."} + {:index 3 + :title "No spamming" + :content "Don't send a lot of small messages right after each other. Do not disrupt chat by spamming."} + {:index 4 + :title "No pornographic, adult or NSFW material" + :content "This is a community server and not meant to share this kind of material."} + {:index 5 + :title "No advertisements" + :content "We do not tolerate any kind of advertisements, whether it be for other communities or streams."} + {:index 6 + :title "No offensive names and profile pictures" + :content "You will be asked to change your name or picture if the staff deems them inappropriate."}]) + +(defn community-rule-item [{:keys [title content index]}] + [rn/view {:flex 1 :margin-top 16} + [rn/view {:flex 1 :flex-direction :row :align-items :center} + [rn/view style/community-rule + [quo/text {:style style/community-rule-text + :accessibility-label :communities-rule-index + :weight :medium + :size :label} + + (str index)]] + [quo/text + {:accessibility-label :communities-rule-title + :weight :semi-bold + :size :paragraph-2} + title]] + [quo/text + {:style {:margin-left 28 :margin-top 1} + :accessibility-label :communities-rule-content + :size :paragraph-2} + content]]) + +(defn community-rules-list [rules] + [rn/flat-list + {:shows-horizontal-scroll-indicator false + :data rules + :separator [rn/view {:margin-top 1}] + :render-fn community-rule-item}]) + +(defn actions [community] + (let [agreed-to-rules? (reagent/atom false)] + (fn [] + ;; TODO shouldn't this be a drawer from quo2 ? + [rn/view style/request-container1 + [rn/view style/request-container2 + [quo/text {:accessibility-label :communities-join-community + :weight :semi-bold + :size :heading-1} + (i18n/label :t/join-open-community)] + [rn/view style/request-icon + [quo/icon :i/info]]] + ;; TODO get tag image from community data + [quo/context-tag + {:style + {:margin-right :auto + :margin-top 8}} + (resources/get-image :status-logo) (:name community)] + [quo/text {:style {:margin-top 24} + :accessibility-label :communities-rules-title + :weight :semi-bold + :size :paragraph-1} + (i18n/label :t/community-rules)] + [community-rules-list community-rules] + + [quo/disclaimer + {:container-style {:margin-top 20} + :on-change #(swap! agreed-to-rules? not)} + (i18n/label :t/accept-community-rules)] + + [rn/view style/request-button + [quo/button {:on-press #(rf/dispatch [:bottom-sheet/hide]) + :type :grey :style {:flex 1 :margin-right 12}} + (i18n/label :t/cancel)] + [quo/button + {:on-press (fn [] + (rf/dispatch [:communities/join (:id community)]) + (rf/dispatch [:bottom-sheet/hide])) + :disabled (not @agreed-to-rules?) :style {:flex 1}} + (i18n/label :t/join-open-community)]]]))) diff --git a/src/status_im2/navigation/screens.cljs b/src/status_im2/navigation/screens.cljs index 9711378ac6..4037ce1278 100644 --- a/src/status_im2/navigation/screens.cljs +++ b/src/status_im2/navigation/screens.cljs @@ -1,6 +1,7 @@ (ns status-im2.navigation.screens (:require [status-im2.setup.config :as config] - [status-im2.contexts.communities.discover.view :as discover-communities] + [status-im2.contexts.communities.discover.view :as communities.discover] + [status-im2.contexts.communities.overview.view :as communities.overview] [status-im2.contexts.shell.view :as shell] ;; TODO remove when not used anymore @@ -28,7 +29,11 @@ {:name :discover-communities :options {:topBar {:visible false}} - :component discover-communities/discover-communities}] + :component communities.discover/discover} + + {:name :community-overview + :options {:topBar {:visible false}} + :component communities.overview/overview}] (when config/quo-preview-enabled? quo2.preview/screens)