move communities 2 (#14394)
This commit is contained in:
flexsurfer
GitHub
parent
4c6b4e2d02
commit
3777ebc36e
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 <sub]]
|
||||
[status-im.i18n.i18n :as i18n]
|
||||
[status-im.utils.datetime :as datetime]
|
||||
[status-im.communities.core :as communities]
|
||||
[status-im.ui.components.list.views :as list]
|
||||
[status-im.ui.components.react :as components.react]
|
||||
[status-im.ui.screens.home.views.inner-item :as inner-item]
|
||||
[status-im.ui.screens.chat.photos :as photos]
|
||||
[status-im.react-native.resources :as resources]
|
||||
[status-im.ui.components.chat-icon.screen :as chat-icon.screen]
|
||||
[quo.design-system.colors :as colors]
|
||||
[status-im.ui.components.icons.icons :as icons]
|
||||
[status-im.utils.core :as utils]
|
||||
[status-im.ui.components.plus-button :as components.plus-button]
|
||||
[re-frame.core :as re-frame]
|
||||
[status-im.ui.screens.chat.sheets :as sheets]
|
||||
[status-im.ui.components.accordion :as accordion]
|
||||
[quo2.components.community.style :as styles]))
|
||||
[status-im.ui.components.list.views :as list]
|
||||
[status-im.ui.components.react :as react]
|
||||
[quo.core :as quo]
|
||||
[quo.design-system.colors :as colors]))
|
||||
|
||||
(def request-cooldown-ms (* 24 60 60 1000))
|
||||
|
||||
|
|
@ -61,8 +62,8 @@
|
|||
(i18n/label :t/open-membership))]]]))
|
||||
|
||||
(defn hide-sheet-and-dispatch [event]
|
||||
(>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 (<sub [:chats/sorted-categories-by-community-id community-id])]
|
||||
(let [chats (rf/sub [:chats/sorted-categories-by-community-id community-id])]
|
||||
(if (and (empty? categories) (empty? chats))
|
||||
[blank-page (i18n/label :t/welcome-community-blank-message)]
|
||||
[list/flat-list
|
||||
|
|
@ -230,25 +231,25 @@
|
|||
:render-fn channel-preview-item}]))
|
||||
|
||||
(defn unknown-community [community-id]
|
||||
(let [fetching (<sub [:communities/fetching-community community-id])]
|
||||
(let [fetching (rf/sub [:communities/fetching-community community-id])]
|
||||
[:<> {: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]} (<sub [:get-screen-params])]
|
||||
(let [{:keys [community-id from-chat]} (rf/sub [:get-screen-params])]
|
||||
(fn []
|
||||
(let [{:keys [id chats name images members permissions color joined
|
||||
can-request-access? can-join? requested-to-join-at admin]
|
||||
:as community} (<sub [:communities/community community-id])
|
||||
categories (<sub [:communities/sorted-categories community-id])]
|
||||
:as community} (rf/sub [:communities/community community-id])
|
||||
categories (rf/sub [:communities/sorted-categories community-id])]
|
||||
(if community
|
||||
[rn/view {:style {:flex 1}}
|
||||
[topbar/topbar
|
||||
|
|
@ -264,24 +265,24 @@
|
|||
(when (or admin joined)
|
||||
[{:icon :main-icons/more
|
||||
:accessibility-label :community-menu-button
|
||||
:on-press #(>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])))))
|
||||
|
|
|
|||
|
|
@ -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 [<sub >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 (<sub [:get-screen-params :community-overview]) ;;TODO stop using mock data and only pass community id
|
||||
community (<sub [:communities/community (:id community-mock)])]
|
||||
[rn/view {:style
|
||||
{:height "100%"}}
|
||||
|
||||
[community-card-page-view
|
||||
(merge community-mock {:joined (:joined community)})]]))
|
||||
|
||||
|
|
@ -21,6 +21,7 @@
|
|||
[chat-icon.screen/chat-icon-view-chat-list
|
||||
id true name color false false])))
|
||||
|
||||
;; TODO (flexsurfer) reimplement with new design, its still old design, photos and chat-icon components from old design
|
||||
(defn community-icon-redesign [{:keys [id name images color]} size]
|
||||
(let [color (or color (rand-nth colors/chat-colors))
|
||||
thumbnail-image (get-in images [:thumbnail :uri])]
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@
|
|||
[quo/list-item {:theme :accent
|
||||
:icon :main-icons/arrow-left
|
||||
:title (i18n/label :t/leave-community)
|
||||
:on-press #(>evt [::communities/leave community-id])}]
|
||||
:on-press #(>evt [:communities/leave community-id])}]
|
||||
;; Disable as not implemented yet
|
||||
(when false
|
||||
[quo/list-item {:theme :negative
|
||||
|
|
|
|||
|
|
@ -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)]]])))
|
||||
|
|
@ -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]]]])
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
(ns status-im2.contexts.communities.actions.view)
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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}])}])]]))
|
||||
|
|
@ -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})
|
||||
|
|
@ -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]])])
|
||||
|
|
|
|||
|
|
@ -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})
|
||||
|
|
@ -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]]]))
|
||||
|
|
@ -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})
|
||||
|
|
@ -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)]]])))
|
||||
|
|
@ -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)
|
||||
|
|
|
|||
Loading…
Reference in New Issue