status-im
/
status-react
mirror of https://github.com/status-im/status-react.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
:align-items :center}
[quo2/disclaimer
{:checked? @checked?
:container-style {:margin-bottom 40}
{:container-style {:margin-bottom 40}
:on-change #(swap! checked? not)}
"I agree with the community rules"]
[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 mock-community-item-data ;; TODO: remove once communities are loaded with this data.
{:data {:status :gated
:locked true
;; :images {:thumbnail {:uri []}} ;; TODO address issue with context tag image
: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)}
{: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)}]}})
{:data {:status :gated
:locked true
: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)}
{: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 []
(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
(:require [status-im.i18n.i18n :as i18n]
[status-im.ui.components.react :as react]
[quo2.components.markdown.text :as quo2.text]
[quo2.components.buttons.button :as quo2.button]
[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]
[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.ui.screens.communities.styles :as styles]
[quo2.foundations.colors :as colors]
[status-im.ui.screens.communities.icon :as communities.icon]))
(defn preview-list-component []
[react/view {:style {:height 20 :margin-top 20}}
[quo2.text/text {:accessibility-label :communities-screen-title
:weight :semi-bold
:size :label}
"placeholder for preview list component"]])
;; 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 []
[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 []
[react/view {:style {:height 200 :margin-top 20}}
[quo2.text/text {:accessibility-label :communities-screen-title
:weight :semi-bold
:size :label}
"placeholder for channel list component"]])
[react/scroll-view {:style {:margin-top 20}}
[:<> {:style {:flex 1}}
(map (fn [category]
^{:key (get category 0)}
[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
status tokens cover tags] :as community}]
[react/view
{:style
{:height "100%"
{:flex 1
:border-radius 20}}
[react/view (styles/community-cover-container 148)
[react/image
{:source cover
:style {:height 180
:style {:position :relative
:flex 1}}]]
[react/view (styles/card-view-content-container 20)
[react/view (styles/card-view-chat-icon 80)
[communities.icon/community-icon-redesign community 80]]
(when (= status :gated)
[react/view (styles/permission-tag-styles)
[community-view/permission-tag-container
{:locked locked
:status status
:tokens tokens}]])
[community-view/community-title
{:title name
:size :large
:description description}]
[community-view/community-stats-column :card-view]
[community-view/community-tags tags]
[preview-list-component]
(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)])
[react/view {:flex 1
:height 20
:border-radius 16
:background-color (colors/theme-colors
colors/white
colors/neutral-90)}
[react/view {:padding-horizontal 20}
[react/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))
[react/view (styles/permission-tag-styles)
[community-view/permission-tag-container
{:locked locked
:status status
:tokens tokens}]])
(when joined
[react/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}]
[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]]])
(defn overview []
(let [community (<sub [:get-screen-params :community-overview])]
[react/view {:style {}}
(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)])]
[react/view {:style
{:height "100%"}}
[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
(:require [status-im.i18n.i18n :as i18n]
[quo.core :as quo]
[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 quo2.text]
[quo2.components.buttons.button :as quo2.button]
[quo2.components.icon :as quo2.icon]
[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 quo2.context-tags]
[quo2.components.tags.context-tags :as context-tags]
[status-im.communities.core :as communities]
[quo2.foundations.colors :as quo2.colors]))
[quo2.foundations.colors :as colors]))
;; TODO: update with real data
(def community-rules [{:index 1
@ -46,84 +47,75 @@
:width 18
:margin-left 1
:margin-right 9
:background-color quo2.colors/white
:border-color quo2.colors/neutral-20
:background-color colors/white
:border-color 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}
[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
[text/text
{:accessibility-label :communities-rule-title
:weight :semi-bold
:size :paragraph-2}
title]]
[quo2.text/text
{:style {:margin-left 28}
[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 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 :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}
[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
:background-color colors/white
:border-color colors/neutral-20
:border-width 1
:border-radius 6
:border-radius 8
:display :flex
:justify-content :center}}
[quo2.icon/icon :main-icons2/info]]]
;; TODO address issue with context tag image
;; [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}
[icon/icon :main-icons2/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]
[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%"
:margin-top 32 :margin-bottom 16
@ -131,8 +123,10 @@
: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)]]])))
[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)]]])))