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

chore: add components to communities overview (#14108)

This commit is contained in:
Jamie Caprani 2022-10-06 17:32:45 +01:00 committed by GitHub
parent c2c281d9c6
commit 1d5e1479f7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 182 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
resources/images/icons/communities20@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 681 B

BIN
resources/images/icons/communities20@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

3
src/quo2/screens/selectors/disclaimer.cljs
View File

@ -14,8 +14,7 @@
[rn/view {:padding-vertical 60 [rn/view {:padding-vertical 60
:align-items :center} :align-items :center}
[quo2/disclaimer [quo2/disclaimer
{:checked? @checked? {:container-style {:margin-bottom 40}
:container-style {:margin-bottom 40}
:on-change #(swap! checked? not)} :on-change #(swap! checked? not)}
"I agree with the community rules"] "I agree with the community rules"]
[button/button [button/button

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

@ -28,14 +28,21 @@
(def sort-list-by (reagent/atom :name)) (def sort-list-by (reagent/atom :name))
(def mock-community-item-data ;; TODO: 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 []}} ;; TODO address issue with context tag image :cover (resources/get-image :community-cover)
:cover (resources/get-image :community-cover) :tokens [{:id 1
:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}] :group [{:id 1
:tags [{:id 1 :tag-label (i18n/label :t/music) :resource (resources/get-image :music)} :token-icon (resources/get-image :status-logo)}]}]
{:id 2 :tag-label (i18n/label :t/lifestyle) :resource (resources/get-image :lifestyle)} :tags [{:id 1
{:id 3 :tag-label (i18n/label :t/podcasts) :resource (resources/get-image :podcasts)}]}}) :tag-label (i18n/label :t/music)
:resource (resources/get-image :music)}
{:id 2
:tag-label (i18n/label :t/lifestyle)
:resource (resources/get-image :lifestyle)}
{:id 3
:tag-label (i18n/label :t/podcasts)
:resource (resources/get-image :podcasts)}]}})
(defn plus-button [] (defn plus-button []
(let [logging-in? (<sub [:multiaccounts/login])] (let [logging-in? (<sub [:multiaccounts/login])]

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

@ -1,72 +1,141 @@
(ns status-im.ui.screens.communities.community-overview-redesign (ns status-im.ui.screens.communities.community-overview-redesign
(:require [status-im.i18n.i18n :as i18n] (:require [status-im.i18n.i18n :as i18n]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[quo2.components.markdown.text :as quo2.text] [quo2.components.markdown.text :as text]
[quo2.components.buttons.button :as quo2.button] [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.community.community-view :as community-view]
[quo2.components.tags.status-tags :as status-tags]
[status-im.ui.screens.communities.request-to-join-bottom-sheet-redesign :as request-to-join] [status-im.ui.screens.communities.request-to-join-bottom-sheet-redesign :as request-to-join]
[status-im.ui.components.list.views :as list]
[status-im.utils.handlers :refer [<sub >evt]] [status-im.utils.handlers :refer [<sub >evt]]
[status-im.ui.screens.communities.styles :as styles] [status-im.ui.screens.communities.styles :as styles]
[quo2.foundations.colors :as colors]
[status-im.ui.screens.communities.icon :as communities.icon])) [status-im.ui.screens.communities.icon :as communities.icon]))
(defn preview-list-component [] ;; Mocked list items
[react/view {:style {:height 20 :margin-top 20}} (def user-list
[quo2.text/text {:accessibility-label :communities-screen-title [{:full-name "Alicia K"}
:weight :semi-bold {:full-name "Marcus C"}
:size :label} {:full-name "MNO PQR"}
"placeholder for preview list component"]]) {:full-name "STU VWX"}])
(defn preview-user-list []
[react/view {:style {:flex-direction :row
:align-items :center
:margin-top 20}}
[preview-list/preview-list {:type :user
: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 [] (defn channel-list-component []
[react/view {:style {:height 200 :margin-top 20}} [react/scroll-view {:style {:margin-top 20}}
[quo2.text/text {:accessibility-label :communities-screen-title [:<> {:style {:flex 1}}
:weight :semi-bold (map (fn [category]
:size :label} ^{:key (get category 0)}
"placeholder for channel list component"]]) [react/view {:flex 1}
[divider-label/divider-label
{:label (first category)
:chevron-position :left}]
[react/view
{:margin-left 8
:margin-top 10
:margin-bottom 8}
[list/flat-list
{:shows-horizontal-scroll-indicator false
:separator [react/view {:margin-top 4}]
:data ((first category) list-of-channels)
:render-fn channel/list-item}]]])
list-of-channels)]])
(defn community-card-page-view [{:keys [name description locked joined (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
{:height "100%" {:flex 1
:border-radius 20}} :border-radius 20}}
[react/view (styles/community-cover-container 148) [react/view (styles/community-cover-container 148)
[react/image [react/image
{:source cover {:source cover
:style {:height 180 :style {:position :relative
:flex 1}}]] :flex 1}}]]
[react/view (styles/card-view-content-container 20) [react/view {:flex 1
[react/view (styles/card-view-chat-icon 80) :height 20
[communities.icon/community-icon-redesign community 80]] :border-radius 16
(when (= status :gated) :background-color (colors/theme-colors
[react/view (styles/permission-tag-styles) colors/white
[community-view/permission-tag-container colors/neutral-90)}
{:locked locked [react/view {:padding-horizontal 20}
:status status [react/view {:border-radius 40
:tokens tokens}]]) :border-width 1
[community-view/community-title :border-color colors/white
{:title name :position :absolute
:size :large :top (- (/ 80 2))
:description description}] :left (/ 70 4)
[community-view/community-stats-column :card-view] :padding 2
[community-view/community-tags tags] :background-color (colors/theme-colors
[preview-list-component] colors/white
(when (not joined) colors/neutral-90)}
[quo2.button/button [communities.icon/community-icon-redesign community 80]]
{:on-press #(>evt [:bottom-sheet/show-sheet (when (and (not joined)
{:content (fn [] [request-to-join/request-to-join community]) (= status :gated))
:content-height 300}]) [react/view (styles/permission-tag-styles)
:style [community-view/permission-tag-container
{:width "100%" {:locked locked
:margin-top 20 :status status
:margin-left :auto :tokens tokens}]])
:margin-right :auto} (when joined
:before :main-icons/community} [react/view {:position :absolute
(i18n/label :join-open-community)]) :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}]
[community-view/community-stats-column :card-view]
[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}])
:style
{:width "100%"
:margin-top 20
:margin-left :auto
:margin-right :auto}
:before :main-icons2/communities}
(i18n/label :join-open-community)])]
[channel-list-component]]]) [channel-list-component]]])
(defn overview [] (defn overview []
(let [community (<sub [:get-screen-params :community-overview])] (let [community-mock (<sub [:get-screen-params :community-overview]) ;;TODO stop using mock data and only pass community id
[react/view {:style {}} community (<sub [:communities/community (:id community-mock)])]
[react/view {:style
{:height "100%"}}
[community-card-page-view [community-card-page-view
community]])) (merge community-mock {:joined (:joined community)})]]))

108
src/status_im/ui/screens/communities/request_to_join_bottom_sheet_redesign.cljs
View File

@ -1,16 +1,17 @@
(ns status-im.ui.screens.communities.request-to-join-bottom-sheet-redesign (ns status-im.ui.screens.communities.request-to-join-bottom-sheet-redesign
(:require [status-im.i18n.i18n :as i18n] (:require [status-im.i18n.i18n :as i18n]
[quo.core :as quo]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im.react-native.resources :as resources]
[status-im.ui.components.list.views :as list] [status-im.ui.components.list.views :as list]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[quo2.components.markdown.text :as quo2.text] [quo2.components.markdown.text :as text]
[quo2.components.buttons.button :as quo2.button] [quo2.components.buttons.button :as button]
[quo2.components.icon :as quo2.icon] [quo2.components.selectors.disclaimer :as disclaimer]
[quo2.components.icon :as icon]
[status-im.utils.handlers :refer [>evt]] [status-im.utils.handlers :refer [>evt]]
;; [quo2.components.tags.context-tags :as quo2.context-tags] [quo2.components.tags.context-tags :as context-tags]
[status-im.communities.core :as communities] [status-im.communities.core :as communities]
[quo2.foundations.colors :as quo2.colors])) [quo2.foundations.colors :as colors]))
;; TODO: update with real data ;; TODO: update with real data
(def community-rules [{:index 1 (def community-rules [{:index 1
@ -46,84 +47,75 @@
:width 18 :width 18
:margin-left 1 :margin-left 1
:margin-right 9 :margin-right 9
:background-color quo2.colors/white :background-color colors/white
:border-color quo2.colors/neutral-20 :border-color colors/neutral-20
:border-width 1 :border-width 1
:border-radius 6}} :border-radius 6}}
[quo2.text/text {:style [text/text {:style
{:margin-left :auto {:margin-left :auto
:margin-right :auto :margin-right :auto
:margin-top :auto :margin-top :auto
:margin-bottom :auto} :margin-bottom :auto}
:accessibility-label :communities-rule-index :accessibility-label :communities-rule-index
:weight :medium :weight :medium
:size :label} :size :label}
(str index)]] (str index)]]
[quo2.text/text [text/text
{:accessibility-label :communities-rule-title {:accessibility-label :communities-rule-title
:weight :semi-bold :weight :semi-bold
:size :paragraph-2} :size :paragraph-2}
title]] title]]
[quo2.text/text [text/text
{:style {:margin-left 28} {:style {:margin-left 28 :margin-top 1}
:accessibility-label :communities-rule-content :accessibility-label :communities-rule-content
:size :paragraph-2} :size :paragraph-2}
content]]) content]])
(defn community-rules-list [rules] (defn community-rules-list [rules]
[list/flat-list [list/flat-list
{:shows-horizontal-scroll-indicator false {:shows-horizontal-scroll-indicator false
:data rules :data rules
:separator [react/view {:margin-top 1}]
:render-fn community-rule-item}]) :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] (defn request-to-join [community]
(let [agreed-to-rules? (reagent/atom false)] (let [agreed-to-rules? (reagent/atom false)]
(fn [] (fn []
[react/view {:style {:flex 1 :margin-left 20 :margin-right 20 :margin-bottom 20}} [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}} [react/view {:style {:flex 1 :flex-direction :row :align-items :center :justify-content :space-between}}
[quo2.text/text {:accessibility-label :communities-join-community [text/text {:accessibility-label :communities-join-community
:weight :semi-bold :weight :semi-bold
:size :heading-1} :size :heading-1}
(i18n/label :t/join-open-community)] (i18n/label :t/join-open-community)]
[react/view {:style {:height 32 [react/view {:style {:height 32
:width 32 :width 32
:align-items :center :align-items :center
:background-color quo2.colors/white :background-color colors/white
:border-color quo2.colors/neutral-20 :border-color colors/neutral-20
:border-width 1 :border-width 1
:border-radius 6 :border-radius 8
:display :flex :display :flex
:justify-content :center}} :justify-content :center}}
[quo2.icon/icon :main-icons2/info]]] [icon/icon :main-icons2/info]]]
;; TODO address issue with context tag image ;; TODO get tag image from community data
;; [quo2.context-tags/context-tag {:style {:margin-right :auto :margin-top 8}} (get-in community [:images :thumbnail :uri]) (:name community)] [context-tags/context-tag
[quo2.text/text {:style {:margin-top 24} {:style
:accessibility-label :communities-rules-title {:margin-right :auto
:weight :semi-bold :margin-top 8}}
:size :paragraph-1} (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)] (i18n/label :t/community-rules)]
[community-rules-list community-rules] [community-rules-list community-rules]
[rules-checkbox agreed-to-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%" [react/view {:style {:width "100%"
:margin-top 32 :margin-bottom 16 :margin-top 32 :margin-bottom 16
@ -131,8 +123,10 @@
:flex-direction :row :flex-direction :row
:align-items :center :align-items :center
:justify-content :space-evenly}} :justify-content :space-evenly}}
[quo2.button/button {:on-press #(>evt [:bottom-sheet/hide]) [button/button {:on-press #(>evt [:bottom-sheet/hide])
:type :grey :style {:flex 1 :margin-right 12}} (i18n/label :t/cancel)] :type :grey :style {:flex 1 :margin-right 12}} (i18n/label :t/cancel)]
[quo2.button/button [button/button
{:on-press #(>evt [::communities/join (:id community)]) {:on-press (fn []
:disabled (not agreed-to-rules?) :style {:flex 1}} (i18n/label :t/join-open-community)]]]))) (>evt [::communities/join (:id community)])
(>evt [:bottom-sheet/hide]))
:disabled (not @agreed-to-rules?) :style {:flex 1}} (i18n/label :t/join-open-community)]]])))