diff --git a/resources/images/icons/communities20@2x.png b/resources/images/icons/communities20@2x.png new file mode 100644 index 0000000000..92216fa4a2 Binary files /dev/null and b/resources/images/icons/communities20@2x.png differ diff --git a/resources/images/icons/communities20@3x.png b/resources/images/icons/communities20@3x.png new file mode 100644 index 0000000000..b0d36596cd Binary files /dev/null and b/resources/images/icons/communities20@3x.png differ diff --git a/src/quo2/screens/selectors/disclaimer.cljs b/src/quo2/screens/selectors/disclaimer.cljs index 54d0a8f57d..535eb87d63 100644 --- a/src/quo2/screens/selectors/disclaimer.cljs +++ b/src/quo2/screens/selectors/disclaimer.cljs @@ -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 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 9700a2e3dd..9bc4eaf000 100644 --- a/src/status_im/ui/screens/communities/communities_list_redesign.cljs +++ b/src/status_im/ui/screens/communities/communities_list_redesign.cljs @@ -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? (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 (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)]]])))