chore: add components to communities overview (#14108)
This commit is contained in:
parent
c2c281d9c6
commit
1d5e1479f7
Binary file not shown.
After Width: | Height: | Size: 681 B |
Binary file not shown.
After Width: | Height: | Size: 1.0 KiB |
|
@ -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
|
||||||
|
|
|
@ -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])]
|
||||||
|
|
|
@ -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)})]]))
|
||||||
|
|
||||||
|
|
|
@ -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)]]])))
|
||||||
|
|
Loading…
Reference in New Issue