From 5c67216b31aa62b248aacdf594f30af42fb9e03b Mon Sep 17 00:00:00 2001 From: Jamie Caprani Date: Wed, 1 Mar 2023 14:09:46 +0000 Subject: [PATCH] feat: add bottom sheet to see community rules (#15130) --- .../menus/community_options/view.cljs | 5 +- .../menus/community_rules_list/style.cljs | 31 +++++++++ .../menus/community_rules_list/view.cljs | 62 +++++++++++++++++ .../communities/menus/generic_menu/style.cljs | 17 +++++ .../communities/menus/generic_menu/view.cljs | 21 ++++++ .../communities/menus/leave/style.cljs | 12 ---- .../communities/menus/leave/view.cljs | 49 ++++++-------- .../menus/request_to_join/style.cljs | 29 -------- .../menus/request_to_join/view.cljs | 67 +------------------ .../communities/menus/see_rules/view.cljs | 9 +++ .../contexts/communities/overview/view.cljs | 1 - 11 files changed, 166 insertions(+), 137 deletions(-) create mode 100644 src/status_im2/contexts/communities/menus/community_rules_list/style.cljs create mode 100644 src/status_im2/contexts/communities/menus/community_rules_list/view.cljs create mode 100644 src/status_im2/contexts/communities/menus/generic_menu/style.cljs create mode 100644 src/status_im2/contexts/communities/menus/generic_menu/view.cljs create mode 100644 src/status_im2/contexts/communities/menus/see_rules/view.cljs diff --git a/src/status_im2/contexts/communities/menus/community_options/view.cljs b/src/status_im2/contexts/communities/menus/community_options/view.cljs index eb4bc7ea0e..7bfe531054 100644 --- a/src/status_im2/contexts/communities/menus/community_options/view.cljs +++ b/src/status_im2/contexts/communities/menus/community_options/view.cljs @@ -2,6 +2,7 @@ (:require [utils.i18n :as i18n] [utils.re-frame :as rf] [quo2.core :as quo] + [status-im2.contexts.communities.menus.see-rules.view :as see-rules] [status-im2.contexts.communities.menus.leave.view :as leave-menu])) (defn hide-sheet-and-dispatch @@ -22,7 +23,9 @@ {:icon :i/bullet-list :right-icon :i/chevron-right :accessibility-label :view-community-rules - :on-press #(js/alert (str "implement action" id)) + :on-press #(rf/dispatch [:bottom-sheet/show-sheet + {:content (constantly [see-rules/view id]) + :content-height 400}]) :label (i18n/label :t/view-community-rules)}) (defn view-token-gating diff --git a/src/status_im2/contexts/communities/menus/community_rules_list/style.cljs b/src/status_im2/contexts/communities/menus/community_rules_list/style.cljs new file mode 100644 index 0000000000..eb17010409 --- /dev/null +++ b/src/status_im2/contexts/communities/menus/community_rules_list/style.cljs @@ -0,0 +1,31 @@ +(ns status-im2.contexts.communities.menus.community-rules-list.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-container + {:flex 1 + :margin-top 16}) + +(def inner-community-rule-container + {:flex 1 + :flex-direction :row + :align-items :center}) + +(def community-rule-text + {:margin-left :auto + :margin-right :auto + :margin-top :auto + :margin-bottom :auto}) + +(def community-rule-sub-text + {:margin-left 28 + :margin-top 1}) diff --git a/src/status_im2/contexts/communities/menus/community_rules_list/view.cljs b/src/status_im2/contexts/communities/menus/community_rules_list/view.cljs new file mode 100644 index 0000000000..dce3a3df6e --- /dev/null +++ b/src/status_im2/contexts/communities/menus/community_rules_list/view.cljs @@ -0,0 +1,62 @@ +(ns status-im2.contexts.communities.menus.community-rules-list.view + (:require [react-native.core :as rn] + [status-im2.contexts.communities.menus.community-rules-list.style :as style] + [quo2.core :as quo])) + +;; TODO: update with real data +(def 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 + {:style style/community-rule-container} + [rn/view + {:style style/inner-community-rule-container} + [rn/view + {:style 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 style/community-rule-sub-text + :accessibility-label :communities-rule-content + :size :paragraph-2} + content]]) + +(defn view + [rules] + [rn/flat-list + {:shows-horizontal-scroll-indicator false + :data rules + :separator [rn/view {:margin-top 1}] + :render-fn community-rule-item}]) diff --git a/src/status_im2/contexts/communities/menus/generic_menu/style.cljs b/src/status_im2/contexts/communities/menus/generic_menu/style.cljs new file mode 100644 index 0000000000..6310a2e54f --- /dev/null +++ b/src/status_im2/contexts/communities/menus/generic_menu/style.cljs @@ -0,0 +1,17 @@ +(ns status-im2.contexts.communities.menus.generic-menu.style) + +(def container + {:flex 1 + :margin-left 20 + :margin-right 20 + :margin-bottom 20}) + +(def inner-container + {:display :flex + :flex-direction :row + :align-items :center + :justify-content :space-between}) + +(def context-tag + {:margin-right :auto + :margin-top 8}) diff --git a/src/status_im2/contexts/communities/menus/generic_menu/view.cljs b/src/status_im2/contexts/communities/menus/generic_menu/view.cljs new file mode 100644 index 0000000000..dbf97c1fa8 --- /dev/null +++ b/src/status_im2/contexts/communities/menus/generic_menu/view.cljs @@ -0,0 +1,21 @@ +(ns status-im2.contexts.communities.menus.generic-menu.view + (:require [utils.i18n :as i18n] + [quo2.core :as quo] + [status-im2.contexts.communities.menus.generic-menu.style :as style] + [react-native.core :as rn] + [utils.re-frame :as rf])) + +(defn view + [id children] + (let [{:keys [name images]} (rf/sub [:communities/community id])] + [rn/view {:style style/container} + [rn/view {:style style/inner-container} + [quo/text + {:accessibility-label :communities-join-community + :weight :semi-bold + :size :heading-1} + (i18n/label :t/leave-community?)]] + [quo/context-tag + {:style style/context-tag} + (:thumbnail images) name] + children])) diff --git a/src/status_im2/contexts/communities/menus/leave/style.cljs b/src/status_im2/contexts/communities/menus/leave/style.cljs index 0c9b1674bd..826acb7003 100644 --- a/src/status_im2/contexts/communities/menus/leave/style.cljs +++ b/src/status_im2/contexts/communities/menus/leave/style.cljs @@ -14,15 +14,3 @@ (def action-button {:flex 1}) (def text {:margin-top 16}) - -(def container - {:height 180 - :margin-left 20 - :margin-right 20 - :margin-bottom 20}) - -(def inner-container - {:display :flex - :flex-direction :row - :align-items :center - :justify-content :space-between}) diff --git a/src/status_im2/contexts/communities/menus/leave/view.cljs b/src/status_im2/contexts/communities/menus/leave/view.cljs index 55f2131506..18e91802b7 100644 --- a/src/status_im2/contexts/communities/menus/leave/view.cljs +++ b/src/status_im2/contexts/communities/menus/leave/view.cljs @@ -1,6 +1,7 @@ (ns status-im2.contexts.communities.menus.leave.view (:require [utils.i18n :as i18n] [quo2.core :as quo] + [status-im2.contexts.communities.menus.generic-menu.view :as generic-menu] [status-im2.contexts.communities.menus.leave.style :as style] [react-native.core :as rn] [utils.re-frame :as rf])) @@ -12,32 +13,22 @@ (defn leave-sheet [id] - (let [{:keys [name images]} (rf/sub [:communities/community id])] - [rn/view {:style style/container} - [rn/view {:style style/inner-container} - [quo/text - {:accessibility-label :communities-join-community - :weight :semi-bold - :size :heading-1} - (i18n/label :t/leave-community?)]] - [quo/context-tag - {:style - {:margin-right :auto - :margin-top 8}} - (:thumbnail images) name] - [quo/text - {:accessibility-label :communities-join-community - :size :paragraph-1 - :style style/text} - (i18n/label :t/leave-community-message)] - [rn/view - {:style style/button-container} - [quo/button - {:on-press #(rf/dispatch [:bottom-sheet/hide]) - :type :grey - :style style/cancel-button} - (i18n/label :t/cancel)] - [quo/button - {:on-press #(hide-sheet-and-dispatch [:communities/leave id]) - :style style/action-button} - (i18n/label :t/leave-community)]]])) + [generic-menu/view + id + [:<> + [quo/text + {:accessibility-label :communities-join-community + :size :paragraph-1 + :style style/text} + (i18n/label :t/leave-community-message)] + [rn/view + {:style style/button-container} + [quo/button + {:on-press #(rf/dispatch [:bottom-sheet/hide]) + :type :grey + :style style/cancel-button} + (i18n/label :t/cancel)] + [quo/button + {:on-press #(hide-sheet-and-dispatch [:communities/leave id]) + :style style/action-button} + (i18n/label :t/leave-community)]]]]) diff --git a/src/status_im2/contexts/communities/menus/request_to_join/style.cljs b/src/status_im2/contexts/communities/menus/request_to_join/style.cljs index f06468dd76..812da95b93 100644 --- a/src/status_im2/contexts/communities/menus/request_to_join/style.cljs +++ b/src/status_im2/contexts/communities/menus/request_to_join/style.cljs @@ -1,35 +1,6 @@ (ns status-im2.contexts.communities.menus.request-to-join.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-container - {:flex 1 - :margin-top 16}) - -(def inner-community-rule-container - {:flex 1 - :flex-direction :row - :align-items :center}) - -(def community-rule-text - {:margin-left :auto - :margin-right :auto - :margin-top :auto - :margin-bottom :auto}) - -(def community-rule-sub-text - {:margin-left 28 - :margin-top 1}) - (def page-container {:margin-left 20 :margin-right 20 diff --git a/src/status_im2/contexts/communities/menus/request_to_join/view.cljs b/src/status_im2/contexts/communities/menus/request_to_join/view.cljs index 86cd5e8676..19fe469a17 100644 --- a/src/status_im2/contexts/communities/menus/request_to_join/view.cljs +++ b/src/status_im2/contexts/communities/menus/request_to_join/view.cljs @@ -1,6 +1,7 @@ (ns status-im2.contexts.communities.menus.request-to-join.view (:require [react-native.core :as rn] [react-native.safe-area :as safe-area] + [status-im2.contexts.communities.menus.community-rules-list.view :as community-rules] [reagent.core :as reagent] [status-im2.contexts.communities.menus.request-to-join.style :as style] [quo2.core :as quo] @@ -8,71 +9,12 @@ [utils.re-frame :as rf] [utils.requests :as requests])) -;; 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 request-to-join-text [is-open?] (if is-open? (i18n/label :t/join-open-community) (i18n/label :t/request-to-join))) -(defn community-rule-item - [{:keys [title content index]}] - [rn/view - {:style style/community-rule-container} - [rn/view - {:style style/inner-community-rule-container} - [rn/view - {:style 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 style/community-rule-sub-text - :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 request-to-join [{:keys [permissions name @@ -92,7 +34,6 @@ [rn/view style/page-container [rn/view {:style style/title-container} - [quo/text {:accessibility-label :communities-join-community :weight :semi-bold @@ -112,22 +53,18 @@ :weight :semi-bold :size :paragraph-1} (i18n/label :t/community-rules)] - - [community-rules-list community-rules] - + [community-rules/view community-rules/rules] [quo/disclaimer {:accessibility-label :rules-disclaimer-checkbox :container-style {:margin-top 20} :on-change #(swap! agreed-to-rules? not)} (i18n/label :t/accept-community-rules)] - [rn/view {:style (style/bottom-container insets)} [quo/button {:accessibility-label :cancel :on-press #(rf/dispatch [:bottom-sheet/hide]) :type :grey :style style/cancel-button} (i18n/label :t/cancel)] - [quo/button {:accessibility-label :join-community-button :on-press (fn [] diff --git a/src/status_im2/contexts/communities/menus/see_rules/view.cljs b/src/status_im2/contexts/communities/menus/see_rules/view.cljs new file mode 100644 index 0000000000..8e91bbd3db --- /dev/null +++ b/src/status_im2/contexts/communities/menus/see_rules/view.cljs @@ -0,0 +1,9 @@ +(ns status-im2.contexts.communities.menus.see-rules.view + (:require [status-im2.contexts.communities.menus.generic-menu.view :as generic-menu] + [status-im2.contexts.communities.menus.community-rules-list.view :as community-rules])) + +(defn view + [id] + [generic-menu/view + id + [community-rules/view community-rules/rules]]) diff --git a/src/status_im2/contexts/communities/overview/view.cljs b/src/status_im2/contexts/communities/overview/view.cljs index 73afd335e2..a1ea49b443 100644 --- a/src/status_im2/contexts/communities/overview/view.cljs +++ b/src/status_im2/contexts/communities/overview/view.cljs @@ -16,7 +16,6 @@ [status-im2.contexts.communities.overview.utils :as utils] [utils.re-frame :as rf])) - (defn preview-user-list [user-list] [rn/view style/preview-user