From 6992b625d636b2460bcdc878d9e387b1f72dabce Mon Sep 17 00:00:00 2001 From: Jamie Caprani Date: Thu, 15 Sep 2022 15:44:16 +0100 Subject: [PATCH] feat: add ability to join open community in new-ui (#14001) --- src/quo2/components/tags/context_tags.cljs | 22 +-- .../communities_list_redesign.cljs | 121 +++++++-------- .../community_overview_redesign.cljs | 25 ++-- ...request_to_join_bottom_sheet_redesign.cljs | 139 ++++++++++++++++++ translations/en.json | 4 +- 5 files changed, 230 insertions(+), 81 deletions(-) create mode 100644 src/status_im/ui/screens/communities/request_to_join_bottom_sheet_redesign.cljs diff --git a/src/quo2/components/tags/context_tags.cljs b/src/quo2/components/tags/context_tags.cljs index e676d635a7..c3577e548a 100644 --- a/src/quo2/components/tags/context_tags.cljs +++ b/src/quo2/components/tags/context_tags.cljs @@ -47,15 +47,17 @@ :size :paragraph-2} (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 [] (fn [params username photo] - [base-tag (assoc-in params [:style :padding-left] 3) - [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)]])) + [context-tag params {:uri photo} username])) diff --git a/src/status_im/ui/screens/communities/communities_list_redesign.cljs b/src/status_im/ui/screens/communities/communities_list_redesign.cljs index 632dbf1129..ae3b40b63c 100644 --- a/src/status_im/ui/screens/communities/communities_list_redesign.cljs +++ b/src/status_im/ui/screens/communities/communities_list_redesign.cljs @@ -28,9 +28,10 @@ (def view-type (reagent/atom :card-view)) (def sort-list-by (reagent/atom :name)) -(def mock-community-item-data ;; TO Do remove once communities are loaded with this data. - {:data {:status :gated +(def mock-community-item-data ;; TODO: remove once communities are loaded with this data. + {:data {:status :gated :locked true + :images {:thumbnail {:uri (resources/get-image :status-logo)}} :cover (resources/get-image :community-cover) :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)} @@ -59,9 +60,6 @@ {:featured true})] [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] #js {:length 64 :offset (* 64 index) :index index}) @@ -69,39 +67,42 @@ [react/view {:flex 1 :margin-bottom 8 :padding-horizontal 20} - [react/view {:flex-direction :row - :padding-top 20 - :padding-bottom 8 - :height 60} - [react/view {:flex 1} - [quo2.tabs/tabs {:size 32 - :on-change #(reset! selected-tab %) - :default-active :all - :data [{:id :all :label (i18n/label :t/all)} - {:id :open :label (i18n/label :t/open)} - {:id :gated :label (i18n/label :t/gated)}]}]] + [react/view {:flex-direction :row + :padding-top 20 + :padding-bottom 8 + :height 60} + [react/view {:flex 1} + [quo2.tabs/tabs {:size 32 + :on-change #(reset! selected-tab %) + :default-active :all + :data [{:id :all + :label (i18n/label :t/all)} + {:id :open + :label (i18n/label :t/open)} + {:id :gated + :label (i18n/label :t/gated)}]}]] [react/view {:flex-direction :row} [quo2.button/button - {:icon true - :type :outline - :size 32 - :style {:margin-right 12} - :on-press #(re-frame/dispatch [:bottom-sheet/show-sheet :sort-communities {}])} + {:icon true + :type :outline + :size 32 + :style {:margin-right 12} + :on-press #(re-frame/dispatch [:bottom-sheet/show-sheet :sort-communities {}])} :main-icons2/lightning] [quo2.button/button - {:icon true - :type :outline - :size 32 - :on-press #(if (= @view-type :card-view) - (reset! view-type :list-view) - (reset! view-type :card-view))} + {:icon true + :type :outline + :size 32 + :on-press #(if (= @view-type :card-view) + (reset! view-type :list-view) + (reset! view-type :card-view))} (if (= @view-type :card-view) :main-icons2/card-view :main-icons2/list-view)]]]]) (defn featured-communities [communities] [list/flat-list - {:key-fn str + {:key-fn :id :horizontal true :getItemLayout get-item-layout-js :keyboard-should-persist-taps :always @@ -112,7 +113,7 @@ (defn other-communities [communities sort-list-by] (let [sorted-communities (sort-by sort-list-by communities)] [list/flat-list - {:key-fn str + {:key-fn :id :getItemLayout get-item-layout-js :keyboard-should-persist-taps :always :shows-horizontal-scroll-indicator false @@ -206,34 +207,34 @@ (let [multiaccount ( - [react/view {:margin-vertical 4 - :padding-horizontal 20} - [separator/separator]] - [community-segments]]) - [community-segments-view communities]]])]))) \ No newline at end of file + + [safe-area/consumer + (fn [insets] + [react/view {:style {:flex 1 + :padding-top (:top insets) + :background-color (quo2.colors/theme-colors + quo2.colors/neutral-5 + quo2.colors/neutral-95)}} + [topbar/topbar + {:navigation :none + :left-component [react/view {:margin-left 16} + [photos/photo (multiaccounts/displayed-photo multiaccount) + {:size 32}]] + :right-component [react/view {:flex-direction :row + :margin-right 16} + [topnav/qr-scanner] + [topnav/qr-code] + [topnav/notifications-button]] + :new-ui? true + :border-bottom false}] + [title-column] + [react/scroll-view + [community-filter-tags] + [featured-communities-section featured-communities] + (when communities + [:<> + [react/view {:margin-vertical 4 + :padding-horizontal 20} + [separator/separator]] + [community-segments]]) + [community-segments-view communities]]])])) \ No newline at end of file diff --git a/src/status_im/ui/screens/communities/community_overview_redesign.cljs b/src/status_im/ui/screens/communities/community_overview_redesign.cljs index ce24aa84bc..712cb62c54 100644 --- a/src/status_im/ui/screens/communities/community_overview_redesign.cljs +++ b/src/status_im/ui/screens/communities/community_overview_redesign.cljs @@ -4,7 +4,8 @@ [quo2.components.markdown.text :as quo2.text] [quo2.components.buttons.button :as quo2.button] [quo2.components.community.community-view :as community-view] - [status-im.utils.handlers :refer [evt]] [status-im.ui.screens.communities.styles :as styles] [status-im.ui.screens.communities.icon :as communities.icon])) @@ -22,7 +23,7 @@ :size :label} "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}] [react/view {:style @@ -49,14 +50,18 @@ [community-view/community-stats-column :card-view] [community-view/community-tags tags] [preview-list-component] - [quo2.button/button - {:style - {:width "100%" - :margin-top 20 - :margin-left :auto - :margin-right :auto} - :before :main-icons/community} - (i18n/label :join-open-community)] + (when (not joined) + [quo2.button/button + {:on-press #(>evt [:bottom-sheet/show-sheet + {:content (fn [] [request-to-join/request-to-join community]) + :content-height 300}]) + :style + {:width "100%" + :margin-top 20 + :margin-left :auto + :margin-right :auto} + :before :main-icons/community} + (i18n/label :join-open-community)]) [channel-list-component]]]) (defn overview [] 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 new file mode 100644 index 0000000000..1fc8f21eab --- /dev/null +++ b/src/status_im/ui/screens/communities/request_to_join_bottom_sheet_redesign.cljs @@ -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)]]]))) diff --git a/translations/en.json b/translations/en.json index 0d00e89b44..43958befad 100644 --- a/translations/en.json +++ b/translations/en.json @@ -7,6 +7,7 @@ "access-key": "Access key", "access-existing-keys": "Access existing keys", "accept-and-share-address": "Accept and share address", + "accept-community-rules": "I agree with the community rules", "account-added": "Account added", "account-color": "Account color", "anyone": "Anyone", @@ -167,6 +168,7 @@ "one": "{{count}} member", "other": "{{count}} members" }, + "community-rules": "Community rules", "members-label": "Members", "open-membership": "Open membership", "member-kick": "Kick member", @@ -683,7 +685,7 @@ "invalid-username-or-key": "Invalid username or chat key", "join-me": "Hey join me on Status: {{url}}", "join-a-community": "or join a community", - "join-open-community": "Join community", + "join-open-community": "Join Community", "http-gateway-error": "Oops, request failed!", "sign-request-failed": "Could not sign message", "invite-friends": "Invite friends",