status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: add ability to join open community in new-ui (#14001)

This commit is contained in:
Jamie Caprani 2022-09-15 15:44:16 +01:00 committed by GitHub
parent 5a55c6ccb2
commit 6992b625d6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 230 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/quo2/components/tags/context_tags.cljs
View File

@ -47,15 +47,17 @@
:size :paragraph-2} :size :paragraph-2}
(trim-public-key public-key)]])) (trim-public-key public-key)]]))
(defn context-tag [params photo name]
[base-tag (assoc-in params [:style :padding-left] 3)
[rn/image {:style {:width 20
:border-radius 10
:background-color :white
:height 20}
:source photo}]
[text/text {:weight :medium
:size :paragraph-2}
(str " " name)]])
(defn user-avatar-tag [] (defn user-avatar-tag []
(fn [params username photo] (fn [params username photo]
[base-tag (assoc-in params [:style :padding-left] 3) [context-tag params {:uri photo} username]))
[rn/image {:style {:width 20
:border-radius 10
:background-color :white
:height 20}
:source {:uri photo}}]
[text/text {:weight :medium
:size :paragraph-2}
(str " " username)]]))

121
src/status_im/ui/screens/communities/communities_list_redesign.cljs
View File

@ -28,9 +28,10 @@
(def view-type (reagent/atom :card-view)) (def view-type (reagent/atom :card-view))
(def sort-list-by (reagent/atom :name)) (def sort-list-by (reagent/atom :name))
(def mock-community-item-data ;; TO Do remove once communities are loaded with this data. (def mock-community-item-data ;; TODO: remove once communities are loaded with this data.
{:data {:status :gated {:data {:status :gated
:locked true :locked true
:images {:thumbnail {:uri (resources/get-image :status-logo)}}
:cover (resources/get-image :community-cover) :cover (resources/get-image :community-cover)
:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}] :tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}]
:tags [{:id 1 :tag-label (i18n/label :t/music) :resource (resources/get-image :music)} :tags [{:id 1 :tag-label (i18n/label :t/music) :resource (resources/get-image :music)}
@ -59,9 +60,6 @@
{:featured true})] {:featured true})]
[community-card/community-card-view-item item #(>evt [:navigate-to :community-overview item])])) [community-card/community-card-view-item item #(>evt [:navigate-to :community-overview item])]))
(defn community-list-key-fn [item]
(:id item))
(defn get-item-layout-js [_ index] (defn get-item-layout-js [_ index]
#js {:length 64 :offset (* 64 index) :index index}) #js {:length 64 :offset (* 64 index) :index index})
@ -69,39 +67,42 @@
[react/view {:flex 1 [react/view {:flex 1
:margin-bottom 8 :margin-bottom 8
:padding-horizontal 20} :padding-horizontal 20}
[react/view {:flex-direction :row [react/view {:flex-direction :row
:padding-top 20 :padding-top 20
:padding-bottom 8 :padding-bottom 8
:height 60} :height 60}
[react/view {:flex 1} [react/view {:flex 1}
[quo2.tabs/tabs {:size 32 [quo2.tabs/tabs {:size 32
:on-change #(reset! selected-tab %) :on-change #(reset! selected-tab %)
:default-active :all :default-active :all
:data [{:id :all :label (i18n/label :t/all)} :data [{:id :all
{:id :open :label (i18n/label :t/open)} :label (i18n/label :t/all)}
{:id :gated :label (i18n/label :t/gated)}]}]] {:id :open
:label (i18n/label :t/open)}
{:id :gated
:label (i18n/label :t/gated)}]}]]
[react/view {:flex-direction :row} [react/view {:flex-direction :row}
[quo2.button/button [quo2.button/button
{:icon true {:icon true
:type :outline :type :outline
:size 32 :size 32
:style {:margin-right 12} :style {:margin-right 12}
:on-press #(re-frame/dispatch [:bottom-sheet/show-sheet :sort-communities {}])} :on-press #(re-frame/dispatch [:bottom-sheet/show-sheet :sort-communities {}])}
:main-icons2/lightning] :main-icons2/lightning]
[quo2.button/button [quo2.button/button
{:icon true {:icon true
:type :outline :type :outline
:size 32 :size 32
:on-press #(if (= @view-type :card-view) :on-press #(if (= @view-type :card-view)
(reset! view-type :list-view) (reset! view-type :list-view)
(reset! view-type :card-view))} (reset! view-type :card-view))}
(if (= @view-type :card-view) (if (= @view-type :card-view)
:main-icons2/card-view :main-icons2/card-view
:main-icons2/list-view)]]]]) :main-icons2/list-view)]]]])
(defn featured-communities [communities] (defn featured-communities [communities]
[list/flat-list [list/flat-list
{:key-fn str {:key-fn :id
:horizontal true :horizontal true
:getItemLayout get-item-layout-js :getItemLayout get-item-layout-js
:keyboard-should-persist-taps :always :keyboard-should-persist-taps :always
@ -112,7 +113,7 @@
(defn other-communities [communities sort-list-by] (defn other-communities [communities sort-list-by]
(let [sorted-communities (sort-by sort-list-by communities)] (let [sorted-communities (sort-by sort-list-by communities)]
[list/flat-list [list/flat-list
{:key-fn str {:key-fn :id
:getItemLayout get-item-layout-js :getItemLayout get-item-layout-js
:keyboard-should-persist-taps :always :keyboard-should-persist-taps :always
:shows-horizontal-scroll-indicator false :shows-horizontal-scroll-indicator false
@ -206,34 +207,34 @@
(let [multiaccount (<sub [:multiaccount]) (let [multiaccount (<sub [:multiaccount])
communities (<sub [:communities/communities]) communities (<sub [:communities/communities])
featured-communities (<sub [:communities/featured-communities])] featured-communities (<sub [:communities/featured-communities])]
(fn []
[safe-area/consumer [safe-area/consumer
(fn [insets] (fn [insets]
[react/view {:style {:flex 1 [react/view {:style {:flex 1
:padding-top (:top insets) :padding-top (:top insets)
:background-color (quo2.colors/theme-colors :background-color (quo2.colors/theme-colors
quo2.colors/neutral-5 quo2.colors/neutral-5
quo2.colors/neutral-95)}} quo2.colors/neutral-95)}}
[topbar/topbar [topbar/topbar
{:navigation :none {:navigation :none
:left-component [react/view {:margin-left 16} :left-component [react/view {:margin-left 16}
[photos/photo (multiaccounts/displayed-photo multiaccount) [photos/photo (multiaccounts/displayed-photo multiaccount)
{:size 32}]] {:size 32}]]
:right-component [react/view {:flex-direction :row :right-component [react/view {:flex-direction :row
:margin-right 16} :margin-right 16}
[topnav/qr-scanner] [topnav/qr-scanner]
[topnav/qr-code] [topnav/qr-code]
[topnav/notifications-button]] [topnav/notifications-button]]
:new-ui? true :new-ui? true
:border-bottom false}] :border-bottom false}]
[title-column] [title-column]
[react/scroll-view [react/scroll-view
[community-filter-tags] [community-filter-tags]
[featured-communities-section featured-communities] [featured-communities-section featured-communities]
(when communities (when communities
[:<> [:<>
[react/view {:margin-vertical 4 [react/view {:margin-vertical 4
:padding-horizontal 20} :padding-horizontal 20}
[separator/separator]] [separator/separator]]
[community-segments]]) [community-segments]])
[community-segments-view communities]]])]))) [community-segments-view communities]]])]))

25
src/status_im/ui/screens/communities/community_overview_redesign.cljs
View File

@ -4,7 +4,8 @@
[quo2.components.markdown.text :as quo2.text] [quo2.components.markdown.text :as quo2.text]
[quo2.components.buttons.button :as quo2.button] [quo2.components.buttons.button :as quo2.button]
[quo2.components.community.community-view :as community-view] [quo2.components.community.community-view :as community-view]
[status-im.utils.handlers :refer [<sub]] [status-im.ui.screens.communities.request-to-join-bottom-sheet-redesign :as request-to-join]
[status-im.utils.handlers :refer [<sub >evt]]
[status-im.ui.screens.communities.styles :as styles] [status-im.ui.screens.communities.styles :as styles]
[status-im.ui.screens.communities.icon :as communities.icon])) [status-im.ui.screens.communities.icon :as communities.icon]))
@ -22,7 +23,7 @@
:size :label} :size :label}
"placeholder for channel list component"]]) "placeholder for channel list component"]])
(defn community-card-page-view [{:keys [name description locked (defn community-card-page-view [{:keys [name description locked joined
status tokens cover tags] :as community}] status tokens cover tags] :as community}]
[react/view [react/view
{:style {:style
@ -49,14 +50,18 @@
[community-view/community-stats-column :card-view] [community-view/community-stats-column :card-view]
[community-view/community-tags tags] [community-view/community-tags tags]
[preview-list-component] [preview-list-component]
[quo2.button/button (when (not joined)
{:style [quo2.button/button
{:width "100%" {:on-press #(>evt [:bottom-sheet/show-sheet
:margin-top 20 {:content (fn [] [request-to-join/request-to-join community])
:margin-left :auto :content-height 300}])
:margin-right :auto} :style
:before :main-icons/community} {:width "100%"
(i18n/label :join-open-community)] :margin-top 20
:margin-left :auto
:margin-right :auto}
:before :main-icons/community}
(i18n/label :join-open-community)])
[channel-list-component]]]) [channel-list-component]]])
(defn overview [] (defn overview []

139
src/status_im/ui/screens/communities/request_to_join_bottom_sheet_redesign.cljs Normal file
View File

@ -0,0 +1,139 @@
(ns status-im.ui.screens.communities.request-to-join-bottom-sheet-redesign
(:require [status-im.i18n.i18n :as i18n]
[quo.core :as quo]
[reagent.core :as reagent]
[status-im.ui.components.list.views :as list]
[status-im.ui.components.react :as react]
[quo2.components.markdown.text :as quo2.text]
[quo2.components.buttons.button :as quo2.button]
[quo2.components.icon :as quo2.icon]
[status-im.utils.handlers :refer [>evt]]
[quo2.components.tags.context-tags :as quo2.context-tags]
[status-im.communities.core :as communities]
[quo2.foundations.colors :as quo2.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 quo2.colors/white
:border-color quo2.colors/neutral-20
:border-width 1
:border-radius 6}}
[quo2.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)]]
[quo2.text/text
{:accessibility-label :communities-rule-title
:weight :semi-bold
:size :paragraph-2}
title]]
[quo2.text/text
{:style {:margin-left 28}
:accessibility-label :communities-rule-content
:size :paragraph-2}
content]])
(defn community-rules-list [rules]
[list/flat-list
{:shows-horizontal-scroll-indicator false
:data rules
:render-fn community-rule-item}])
(defn rules-checkbox [agreed-to-rules?]
[react/view {:style
{:flex 1
:flex-direction :row
:margin-top 20
:background-color quo2.colors/neutral-20
:padding 12
:border-radius 12
:border-width 1
:border-color quo2.colors/neutral-30}}
[quo/checkbox {:value @agreed-to-rules?
:on-change #(swap! agreed-to-rules? not)}]
[quo2.text/text {:accessibility-label :communities-accept-rules
:size :paragraph-2
:style {:margin-left 8}}
(i18n/label :t/accept-community-rules)]])
(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}}
[quo2.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 quo2.colors/white
:border-color quo2.colors/neutral-20
:border-width 1
:border-radius 6
:display :flex
:justify-content :center}}
[quo2.icon/icon :main-icons2/info]]]
[quo2.context-tags/context-tag {:style {:margin-right :auto :margin-top 8}} (get-in community [:images :thumbnail :uri]) (:name community)]
[quo2.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]
[rules-checkbox agreed-to-rules?]
[react/view {:style {:width "100%"
:margin-top 32 :margin-bottom 16
:flex 1
:flex-direction :row
:align-items :center
:justify-content :space-evenly}}
[quo2.button/button {:on-press #(>evt [:bottom-sheet/hide])
:type :grey :style {:flex 1 :margin-right 12}} (i18n/label :t/cancel)]
[quo2.button/button
{:on-press #(>evt [::communities/join (:id community)])
:disabled (not agreed-to-rules?) :style {:flex 1}} (i18n/label :t/join-open-community)]]])))

4
translations/en.json
View File

@ -7,6 +7,7 @@
"access-key": "Access key", "access-key": "Access key",
"access-existing-keys": "Access existing keys", "access-existing-keys": "Access existing keys",
"accept-and-share-address": "Accept and share address", "accept-and-share-address": "Accept and share address",
"accept-community-rules": "I agree with the community rules",
"account-added": "Account added", "account-added": "Account added",
"account-color": "Account color", "account-color": "Account color",
"anyone": "Anyone", "anyone": "Anyone",
@ -167,6 +168,7 @@
"one": "{{count}} member", "one": "{{count}} member",
"other": "{{count}} members" "other": "{{count}} members"
}, },
"community-rules": "Community rules",
"members-label": "Members", "members-label": "Members",
"open-membership": "Open membership", "open-membership": "Open membership",
"member-kick": "Kick member", "member-kick": "Kick member",
@ -683,7 +685,7 @@
"invalid-username-or-key": "Invalid username or chat key", "invalid-username-or-key": "Invalid username or chat key",
"join-me": "Hey join me on Status: {{url}}", "join-me": "Hey join me on Status: {{url}}",
"join-a-community": "or join a community", "join-a-community": "or join a community",
"join-open-community": "Join community", "join-open-community": "Join Community",
"http-gateway-error": "Oops, request failed!", "http-gateway-error": "Oops, request failed!",
"sign-request-failed": "Could not sign message", "sign-request-failed": "Could not sign message",
"invite-friends": "Invite friends", "invite-friends": "Invite friends",