feat: add bottom sheet to see community rules (#15130)
This commit is contained in:
parent
0c9a195ca9
commit
5c67216b31
|
@ -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
|
||||
|
|
|
@ -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})
|
|
@ -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}])
|
|
@ -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})
|
|
@ -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]))
|
|
@ -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})
|
||||
|
|
|
@ -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)]]]])
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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 []
|
||||
|
|
|
@ -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]])
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue