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

feat: add leave community feature to redesign (#14169)

This commit is contained in:
Jamie Caprani 2022-10-21 10:06:53 +01:00 committed by GitHub
parent 41f2c08736
commit 0826ef57f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 348 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

178
src/quo2/components/navigation/page_nav.cljs
View File

@ -26,21 +26,33 @@
20 20
16)}} 16)}}
(if-not (string/blank? color) (if-not (string/blank? color)
{:color color} {:color color}
{:no-color true}))) {:no-color true})))
(defn render-left-section [{:keys [on-press icon
icon-color icon-background-color]}
put-middle-section-on-left?]
[rn/view {:style (merge
icon-styles
{:background-color icon-background-color
:width 32
:height 32}
(when put-middle-section-on-left? {:margin-right 5}))}
[rn/touchable-opacity {:on-press on-press}
[icons/icon icon (icon-props icon-color :big)]]])
(defn- mid-section-comp (defn- mid-section-comp
[{:keys [mid-section-description-user-icon horizontal-description? text-secondary-color align-mid? text-color mid-section-icon mid-section-main-text mid-section-type mid-section-description]}] [{:keys [description-user-icon horizontal-description? text-secondary-color align-mid? text-color icon main-text type description]}]
[rn/view {:style (assoc [rn/view {:style (assoc
centrify-style centrify-style
:flex-direction :row :flex-direction :row
:margin-horizontal 2)} :margin-horizontal 2)}
(when (or (and (not horizontal-description?) (when (or (and (not horizontal-description?)
align-mid? align-mid?
(not= :text-with-description mid-section-type)) (not= :text-with-description type))
(and mid-section-description-user-icon (and description-user-icon
(not mid-section-icon))) (not icon)))
[rn/image {:source {:uri mid-section-description-user-icon} [rn/image {:source {:uri description-user-icon}
:style {:width 32 :style {:width 32
:height 32 :height 32
:border-radius 32 :border-radius 32
@ -52,21 +64,22 @@
:weight :semi-bold :weight :semi-bold
:style {:color text-color :style {:color text-color
:line-height 21}} :line-height 21}}
mid-section-main-text] main-text]
(when mid-section-description (when description
[text/text {:size :paragraph-2 [text/text {:size :paragraph-2
:weight :medium :weight :medium
:style (cond-> {:padding-right 4 :style (cond-> {:padding-right 4
:color text-secondary-color :color text-secondary-color
:line-height 18} :line-height 18}
horizontal-description? (assoc :margin-left 4 :margin-top 2))} horizontal-description? (assoc :margin-left 4 :margin-top 2))}
mid-section-description])]]) description])]])
(defn- mid-section (defn- render-mid-section
[{:keys [horizontal-description? one-icon-align-left? mid-section-type left-align? mid-section-main-text mid-section-right-icon mid-section-main-text-icon-color mid-section-left-icon] :as mid-section-props}] [{:keys [horizontal-description? one-icon-align-left? type left-align?
main-text right-icon main-text-icon-color left-icon] :as props}]
(let [text-color (if (colors/dark?) colors/neutral-5 colors/neutral-95) (let [text-color (if (colors/dark?) colors/neutral-5 colors/neutral-95)
text-secondary-color (if (colors/dark?) colors/neutral-40 colors/neutral-50) text-secondary-color (if (colors/dark?) colors/neutral-40 colors/neutral-50)
mid-section-comp-instance [mid-section-comp (assoc mid-section-props :text-secondary-color text-secondary-color)]] component-instance [mid-section-comp (assoc props :text-secondary-color text-secondary-color)]]
[rn/view {:style (merge [rn/view {:style (merge
(if left-align? (if left-align?
align-left align-left
@ -74,37 +87,37 @@
{:flex 1 {:flex 1
:margin-left 4 :margin-left 4
:text-align-vertical :center})} :text-align-vertical :center})}
(case mid-section-type (case type
:text-only [text/text {:size :paragraph-1 :text-only [text/text {:size :paragraph-1
:weight :semi-bold :weight :semi-bold
:style {:color text-color}} :style {:color text-color}}
mid-section-main-text] main-text]
:text-with-two-icons [rn/view {:style (assoc centrify-style :flex-direction :row)} :text-with-two-icons [rn/view {:style (assoc centrify-style :flex-direction :row)}
[icons/icon mid-section-left-icon [icons/icon left-icon
(icon-props mid-section-main-text-icon-color :big)] (icon-props main-text-icon-color :big)]
[text/text {:size :paragraph-1 [text/text {:size :paragraph-1
:weight :semi-bold :weight :semi-bold
:style {:padding-horizontal 4 :style {:padding-horizontal 4
:color text-color}} :color text-color}}
mid-section-main-text] main-text]
[icons/icon mid-section-right-icon [icons/icon right-icon
(icon-props mid-section-main-text-icon-color :big)]] (icon-props main-text-icon-color :big)]]
:text-with-one-icon [rn/view {:style {:flex-direction :row}} :text-with-one-icon [rn/view {:style {:flex-direction :row}}
(if one-icon-align-left? (if one-icon-align-left?
[rn/view {:style {:flex-direction :row [rn/view {:style {:flex-direction :row
:align-items :center}} :align-items :center}}
(when horizontal-description? (when horizontal-description?
[icons/icon mid-section-left-icon [icons/icon left-icon
(icon-props mid-section-main-text-icon-color :big)]) (icon-props main-text-icon-color :big)])
mid-section-comp-instance] component-instance]
[rn/view {:style {:flex-direction :row [rn/view {:style {:flex-direction :row
:align-items :center}} :align-items :center}}
mid-section-comp-instance component-instance
(when horizontal-description? (when horizontal-description?
[icons/icon mid-section-left-icon [icons/icon left-icon
(icon-props mid-section-main-text-icon-color :big)])])] (icon-props main-text-icon-color :big)])])]
:text-with-description mid-section-comp-instance)])) :text-with-description component-instance)]))
(defn- right-section-icon (defn- right-section-icon
[{:keys [background-color icon icon-color push-to-the-left?] :or {push-to-the-left? false}}] [{:keys [background-color icon icon-color push-to-the-left?] :or {push-to-the-left? false}}]
@ -116,19 +129,74 @@
:margin-right (if push-to-the-left? 8 0))} :margin-right (if push-to-the-left? 8 0))}
[icons/icon icon (icon-props icon-color :big)]]) [icons/icon icon (icon-props icon-color :big)]])
(defn- render-right-section [right-section-buttons]
[rn/view {:style (assoc
centrify-style
:flex-direction :row
:flex 1
:justify-content :flex-end)}
(let [last-icon-index (-> right-section-buttons count dec)]
(map-indexed (fn [index {:keys [icon background-color icon-color on-press]}]
^{:key index}
[rn/touchable-opacity {:on-press on-press}
[right-section-icon
{:icon icon
:background-color background-color
:icon-color icon-color
:push-to-the-left? (not= index last-icon-index)}]])
right-section-buttons))])
(defn page-nav (defn page-nav
[{:keys [one-icon-align-left? horizontal-description? align-mid? page-nav-color page-nav-background-uri mid-section-type mid-section-icon mid-section-main-text mid-section-left-icon mid-section-right-icon mid-section-description mid-section-description-color mid-section-description-icon mid-section-description-user-icon mid-section-main-text-icon-color left-section-icon left-section-icon-color left-section-icon-background-color right-section-icons]}] "[page-nav opts]
opts
{ :one-icon-align-left? true/false
:horizontal-description? true/false
:align-mid? true/false
:page-nav-color color
:page-nav-background-uri image-uri
:mid-section
{:type one-of :text-only :text-with-two-icons :text-with-one-icon :text-with-description
:icon icon
:main-text string
:left-icon icon
:right-icon icon
:description string
:description-color color
:description-icon icon
:description-user-icon icon
:main-text-icon-color color
}
:left-section
{:on-press event
:icon icon
:icon-color color
:icon-background-color color
}
:right-section-buttons vector of
{:on-press event
:icon icon
:icon-color color
:icon-background-color color
}
}
"
[{:keys [one-icon-align-left? horizontal-description? align-mid?
page-nav-color page-nav-background-uri
mid-section
left-section
right-section-buttons]}]
(let [{:keys [height width]} (dimensions/window) (let [{:keys [height width]} (dimensions/window)
put-middle-section-on-left? (or align-mid? put-middle-section-on-left? (or align-mid?
(> (count right-section-icons) 1)) (> (count right-section-buttons) 1))
mid-section-props {:mid-section-type mid-section-type mid-section-props
:horizontal-description? horizontal-description? {:type (:type mid-section)
:mid-section-main-text mid-section-main-text :horizontal-description? horizontal-description?
:one-icon-align-left? one-icon-align-left? :main-text (:main-text mid-section)
:mid-section-right-icon mid-section-right-icon :main-text-icon-color (:main-text-icon-color mid-section)
:mid-section-icon mid-section-icon :one-icon-align-left? one-icon-align-left?
:mid-section-main-text-icon-color mid-section-main-text-icon-color :right-icon (:right-icon mid-section)
:mid-section-left-icon mid-section-left-icon}] :icon (:icon mid-section)
:left-icon (:left-icon mid-section)}]
[rn/view {:style (cond-> [rn/view {:style (cond->
{:display :flex {:display :flex
:flex-direction :row :flex-direction :row
@ -143,33 +211,15 @@
[rn/view {:style {:flex 1 [rn/view {:style {:flex 1
:flex-direction :row :flex-direction :row
:align-items :center}} :align-items :center}}
[rn/view {:style (merge (render-left-section left-section put-middle-section-on-left?)
icon-styles
{:background-color left-section-icon-background-color
:width 32
:height 32}
(when put-middle-section-on-left? {:margin-right 5}))}
[icons/icon left-section-icon (icon-props left-section-icon-color :big)]]
(when put-middle-section-on-left? (when put-middle-section-on-left?
[mid-section (assoc mid-section-props [render-mid-section (assoc mid-section-props
:left-align? true :left-align? true
:mid-section-description mid-section-description :description (:description mid-section)
:mid-section-description-color mid-section-description-color :description-color (:description-color mid-section)
:mid-section-description-icon mid-section-description-icon :description-icon (:description-icon mid-section)
:align-mid? align-mid? :align-mid? align-mid?
:mid-section-description-user-icon mid-section-description-user-icon)])] :description-user-icon (:description-user-icon mid-section))])]
(when-not put-middle-section-on-left? (when-not put-middle-section-on-left?
[mid-section mid-section-props]) [render-mid-section mid-section-props])
[rn/view {:style (assoc (render-right-section right-section-buttons)]))
centrify-style
:flex-direction :row
:flex 1
:justify-content :flex-end)}
(let [last-icon-index (- (count right-section-icons) 1)]
(map-indexed (fn [index {:keys [icon background-color icon-color]}]
^{:key index}
[right-section-icon {:icon icon
:background-color background-color
:icon-color icon-color
:push-to-the-left? (if (= index last-icon-index) false true)}])
right-section-icons))]]))

45
src/quo2/screens/navigation/page_nav.cljs
View File

@ -44,46 +44,47 @@
(let [right-icon {:background-color (if (colors/dark?) (let [right-icon {:background-color (if (colors/dark?)
colors/neutral-80 colors/neutral-80
colors/neutral-20) colors/neutral-20)
:icon :main-icons/placeholder :icon :main-icons2/placeholder
:icon-color nil} :icon-color nil}
base-props {:horizontal-description? true base-props {:horizontal-description? true
:one-icon-align-left? true :one-icon-align-left? true
:align-mid? false :align-mid? false
:page-nav-color :transparent :page-nav-color :transparent
:page-nav-background-uri "" :page-nav-background-uri ""
:mid-section-type :text-with-description :mid-section {:type :text-with-description
:mid-section-icon :main-icons/placeholder :icon :main-icons2/placeholder
:mid-section-main-text "Status" :main-text "Status"
:mid-section-left-icon :main-icons/placeholder :left-icon :main-icons2/placeholder
:mid-section-right-icon :main-icons/placeholder :right-icon :main-icons2/placeholder
:mid-section-description "SNT" :description "SNT"
:mid-section-description-color "black" :description-color "black"
:mid-section-description-icon :main-icons/placeholder :description-icon :main-icons2/placeholder
:mid-section-description-user-icon "https://i.picsum.photos/id/810/200/300.jpg?hmac=HgwlXd-OaLOAqhGyCiZDUb_75EgUI4u0GtS7nfgxd8s" :description-user-icon "https://i.picsum.photos/id/810/200/300.jpg?hmac=HgwlXd-OaLOAqhGyCiZDUb_75EgUI4u0GtS7nfgxd8s"}
:left-section-icon :main-icons/unlocked :left-section
:left-section-icon-background-color (if (colors/dark?) {:icon :main-icons2/unlocked
colors/neutral-80 :icon-background-color (if (colors/dark?)
colors/neutral-20)} colors/neutral-80
create-variation #(merge %1 %2) colors/neutral-20)}}
create-variation #(merge %1 %2 {:mid-section (merge (:mid-section %1) (:mid-section %2))})
variations {:text-only? base-props variations {:text-only? base-props
:align-left? (create-variation base-props {:align-mid? true}) :align-left? (create-variation base-props {:align-mid? true})
:one-icon-align-left? (create-variation base-props {:one-icon-align-left? true :one-icon-align-left? (create-variation base-props {:one-icon-align-left? true
:mid-section-type :text-with-one-icon}) :mid-section {:type :text-with-one-icon}})
:one-icon-align-right? (create-variation base-props {:one-icon-align-left? false :one-icon-align-right? (create-variation base-props {:one-icon-align-left? false
:mid-section-type :text-with-one-icon}) :mid-section {:type :text-with-one-icon}})
:two-icons? (create-variation base-props {:mid-section-type :text-with-two-icons}) :two-icons? (create-variation base-props {:mid-section {:type :text-with-two-icons}})
:user-icon? (create-variation base-props {:align-mid? true :user-icon? (create-variation base-props {:align-mid? true
:horizontal-description? false :horizontal-description? false
:mid-section-type :text-with-one-icon}) :mid-section {:type :text-with-one-icon}})
:empty? (create-variation base-props {:mid-section-main-text "" :empty? (create-variation base-props {:mid-section-main-text ""
:mid-section-description ""}) :mid-section-description ""})
:align-left-with-icon? (create-variation base-props {:align-mid? true :align-left-with-icon? (create-variation base-props {:align-mid? true
:mid-section-type :text-with-one-icon}) :mid-section {:type :text-with-one-icon}})
:align-left-top-down-text? (create-variation base-props {:align-mid? true :align-left-top-down-text? (create-variation base-props {:align-mid? true
:horizontal-description? false :horizontal-description? false
:mid-section-type :text-with-description})} :mid-section {:type :text-with-description}})}
state (reagent/atom (-> (get variations (:selected-variation @selected-variation)) state (reagent/atom (-> (get variations (:selected-variation @selected-variation))
(assoc :right-section-icons (repeat (:number-of-right-icons @selected-variation) right-icon))))] (assoc :right-section-buttons (repeat (:number-of-right-icons @selected-variation) right-icon))))]
(fn [] (fn []
[rn/view {:margin-bottom 50 [rn/view {:margin-bottom 50
:padding 16} :padding 16}

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

@ -3,7 +3,7 @@
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im.i18n.i18n :as i18n] [status-im.i18n.i18n :as i18n]
[status-im.ui.components.list.views :as list] [status-im.ui.components.list.views :as list]
[status-im.ui.components.react :as react] [quo.react-native :as rn]
[quo2.components.separator :as separator] [quo2.components.separator :as separator]
[quo2.components.markdown.text :as quo2.text] [quo2.components.markdown.text :as quo2.text]
[quo2.components.buttons.button :as quo2.button] [quo2.components.buttons.button :as quo2.button]
@ -28,7 +28,8 @@
(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 {:community-color "#0052FF"
:status :gated
:locked true :locked true
:cover (resources/get-image :community-cover) :cover (resources/get-image :community-cover)
:tokens [{:id 1 :tokens [{:id 1
@ -70,14 +71,14 @@
#js {:length 64 :offset (* 64 index) :index index}) #js {:length 64 :offset (* 64 index) :index index})
(defn community-segments [] (defn community-segments []
[react/view {:flex 1 [rn/view {:flex 1
:margin-bottom 8 :margin-bottom 8
:padding-horizontal 20} :padding-horizontal 20}
[react/view {:flex-direction :row [rn/view {:flex-direction :row
:padding-top 20 :padding-top 20
:padding-bottom 8 :padding-bottom 8
:height 60} :height 60}
[react/view {:flex 1} [rn/view {:flex 1}
[quo2.tabs/tabs {:size 32 [quo2.tabs/tabs {:size 32
:on-change #(reset! selected-tab %) :on-change #(reset! selected-tab %)
:default-active selected-tab :default-active selected-tab
@ -87,7 +88,7 @@
:label (i18n/label :t/open)} :label (i18n/label :t/open)}
{:id :gated {:id :gated
:label (i18n/label :t/gated)}]}]] :label (i18n/label :t/gated)}]}]]
[react/view {:flex-direction :row} [rn/view {:flex-direction :row}
[quo2.button/button [quo2.button/button
{:icon true {:icon true
:type :outline :type :outline
@ -141,14 +142,14 @@
(defn featured-communities-section [communities] (defn featured-communities-section [communities]
(let [count (reagent/atom {:value (count communities) :type :grey})] (let [count (reagent/atom {:value (count communities) :type :grey})]
[react/view {:flex 1} [rn/view {:flex 1}
[react/view {:flex-direction :row [rn/view {:flex-direction :row
:height 30 :height 30
:padding-top 8 :padding-top 8
:justify-content :space-between :justify-content :space-between
:padding-horizontal 20} :padding-horizontal 20}
[react/view {:flex-direction :row [rn/view {:flex-direction :row
:align-items :center} :align-items :center}
[quo2.text/text {:accessibility-label :featured-communities-title [quo2.text/text {:accessibility-label :featured-communities-title
:weight :semi-bold :weight :semi-bold
:size :paragraph-1 :size :paragraph-1
@ -162,18 +163,18 @@
:color (quo2.colors/theme-colors :color (quo2.colors/theme-colors
quo2.colors/neutral-50 quo2.colors/neutral-50
quo2.colors/neutral-40)}]] quo2.colors/neutral-40)}]]
[react/view {:margin-top 8 [rn/view {:margin-top 8
:padding-left 20} :padding-left 20}
[featured-communities communities]]])) [featured-communities communities]]]))
(defn title-column [] (defn title-column []
[react/view [rn/view
{:flex-direction :row {:flex-direction :row
:align-items :center :align-items :center
:height 56 :height 56
:padding-vertical 12 :padding-vertical 12
:padding-horizontal 20} :padding-horizontal 20}
[react/view [rn/view
{:flex 1} {:flex 1}
[quo2.text/text {:accessibility-label :communities-screen-title [quo2.text/text {:accessibility-label :communities-screen-title
:margin-right 6 :margin-right 6
@ -187,13 +188,13 @@
{:id 2 :tag-label (i18n/label :t/lifestyle) :resource (resources/get-image :lifestyle)} {: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)} {:id 3 :tag-label (i18n/label :t/podcasts) :resource (resources/get-image :podcasts)}
{:id 4 :tag-label (i18n/label :t/podcasts) :resource (resources/get-image :podcasts)}]] {:id 4 :tag-label (i18n/label :t/podcasts) :resource (resources/get-image :podcasts)}]]
[react/scroll-view {:horizontal true [rn/scroll-view {:horizontal true
:height 48 :height 48
:shows-horizontal-scroll-indicator false :shows-horizontal-scroll-indicator false
:scroll-event-throttle 64 :scroll-event-throttle 64
:padding-top 4 :padding-top 4
:padding-bottom 12 :padding-bottom 12
:padding-horizontal 20} :padding-horizontal 20}
[tags/tags {:data filters [tags/tags {:data filters
:labelled true :labelled true
:type :emoji :type :emoji
@ -208,31 +209,31 @@
[safe-area/consumer [safe-area/consumer
(fn [insets] (fn [insets]
[react/view {:style {:flex 1 [rn/view {:style {:flex 1
:padding-top (:top insets) :padding-top (:top insets)
:background-color (quo2.colors/theme-colors :background-color (quo2.colors/theme-colors
quo2.colors/neutral-5 quo2.colors/neutral-5
quo2.colors/neutral-95)}} quo2.colors/neutral-95)}}
[topbar/topbar [topbar/topbar
{:navigation :none {:navigation :none
:left-component [react/view {:margin-left 16} :left-component [rn/view {:margin-left 16}
[photos/photo (multiaccounts/displayed-photo multiaccount) [photos/photo (multiaccounts/displayed-photo multiaccount)
{:size 32}]] {:size 32}]]
:right-component [react/view {:flex-direction :row :right-component [rn/view {:flex-direction :row
:margin-right 16} :margin-right 16}
[topnav/qr-scanner] [topnav/qr-scanner]
[topnav/qr-code] [topnav/qr-code]
[topnav/notifications-button]] [topnav/notifications-button]]
:new-ui? true :new-ui? true
:border-bottom false}] :border-bottom false}]
[title-column] [title-column]
[react/scroll-view [rn/scroll-view
[community-filter-tags] [community-filter-tags]
[featured-communities-section featured-communities] [featured-communities-section featured-communities]
(when communities (when communities
[:<> [:<>
[react/view {:margin-vertical 4 [rn/view {:margin-vertical 4
:padding-horizontal 20} :padding-horizontal 20}
[separator/separator]] [separator/separator]]
[community-segments]]) [community-segments]])
[community-segments-view communities]]])])) [community-segments-view communities]]])]))

89
src/status_im/ui/screens/communities/community_options_bottom_sheet.cljs Normal file
View File

@ -0,0 +1,89 @@
(ns status-im.ui.screens.communities.community-options-bottom-sheet
(:require [status-im.i18n.i18n :as i18n]
[quo.react-native :as rn] [quo2.components.markdown.text :as text]
[quo2.components.buttons.button :as button]
[quo2.components.drawers.action-drawers :as action-drawers]
[quo2.components.tags.context-tags :as context-tags]
[status-im.react-native.resources :as resources]
[status-im.utils.handlers :refer [<sub >evt]]
[status-im.communities.core :as communities]))
(def not-joined-options [{:icon :main-icons2/members
:label (i18n/label :t/view-members)}
{:icon :main-icons2/bullet-list
:right-icon :main-icons2/chevron-right
:label (i18n/label :t/view-community-rules)}
{:icon :main-icons2/add-user
:label (i18n/label :t/invite-contacts)}
{:icon :main-icons2/qr-code
:label (i18n/label :t/show-qr)}
{:icon :main-icons2/share
:label (i18n/label :t/share-community)}])
(def joined-options [{:icon :main-icons2/members
:label (i18n/label :t/view-members)}
{:icon :main-icons2/bullet-list
:right-icon :main-icons2/chevron-right
:label (i18n/label :t/view-community-rules)}
{:icon :main-icons2/up-to-date
:label (i18n/label :t/mark-as-read)}
{:icon :main-icons2/muted
:label (i18n/label :t/mute-community)
:right-icon :main-icons2/chevron-right}
{:icon :main-icons2/notifications
:label (i18n/label :t/community-notification-settings)
:right-icon :main-icons2/chevron-right}
{:icon :main-icons2/add-user
:label (i18n/label :t/invite-contacts)}
{:icon :main-icons2/qr-code
:label (i18n/label :t/show-qr)}
{:icon :main-icons2/share
:label (i18n/label :t/share-community)}])
(defn leave-sheet [community]
[rn/view {:style {:flex 1 :margin-left 20 :margin-right 20 :margin-bottom 20}}
[rn/view {:style {:flex 1 :flex-direction :row :align-items :center :justify-content :space-between}}
[text/text {:accessibility-label :communities-join-community
:weight :semi-bold
:size :heading-1}
(i18n/label :t/leave-community?)]]
;; 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 {:accessibility-label :communities-join-community
:size :paragraph-1
:style {:margin-top 16}}
(i18n/label :t/leave-community-message)]
[rn/view {:style {:width "100%"
:margin-top 16 :margin-bottom 16
:flex 1
:flex-direction :row
:align-items :center
:justify-content :space-evenly}}
[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/leave (:id community)])
(>evt [:bottom-sheet/hide]))
:style {:flex 1}} (i18n/label :t/leave-community)]]])
(defn options-menu []
(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)])]
[action-drawers/action-drawer {:actions (if (:joined community)
joined-options
not-joined-options)
:actions-with-consequence
(when (:joined community)
[{:icon :main-icons2/log-out
:label (i18n/label :t/leave-community)
:on-press #(>evt [:bottom-sheet/show-sheet
{:content (constantly [leave-sheet community])
:content-height 300}])}])}]))

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

@ -1,6 +1,6 @@
(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] [quo.react-native :as rn]
[quo2.components.markdown.text :as text] [quo2.components.markdown.text :as text]
[quo2.components.buttons.button :as button] [quo2.components.buttons.button :as button]
[quo2.components.list-items.preview-list :as preview-list] [quo2.components.list-items.preview-list :as preview-list]
@ -9,10 +9,12 @@
[quo2.components.community.community-view :as community-view] [quo2.components.community.community-view :as community-view]
[quo2.components.tags.status-tags :as status-tags] [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.screens.communities.community-options-bottom-sheet :as options-menu]
[status-im.ui.components.list.views :as list] [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] [quo2.foundations.colors :as colors]
[quo2.components.navigation.page-nav :as page-nav]
[status-im.ui.screens.communities.icon :as communities.icon])) [status-im.ui.screens.communities.icon :as communities.icon]))
;; Mocked list items ;; Mocked list items
@ -23,9 +25,9 @@
{:full-name "STU VWX"}]) {:full-name "STU VWX"}])
(defn preview-user-list [] (defn preview-user-list []
[react/view {:style {:flex-direction :row [rn/view {:style {:flex-direction :row
:align-items :center :align-items :center
:margin-top 20}} :margin-top 20}}
[preview-list/preview-list {:type :user [preview-list/preview-list {:type :user
:user user-list :list-size 4 :size 24}] :user user-list :list-size 4 :size 24}]
[text/text {:accessibility-label :communities-screen-title [text/text {:accessibility-label :communities-screen-title
@ -49,65 +51,89 @@
:emoji "👽"}]}) :emoji "👽"}]})
(defn channel-list-component [] (defn channel-list-component []
[react/scroll-view {:style {:margin-top 20}} [rn/scroll-view {:style {:margin-top 20}}
[:<> {:style {:flex 1}} [:<> {:style {:flex 1}}
(map (fn [category] (map (fn [category]
^{:key (get category 0)} ^{:key (get category 0)}
[react/view {:flex 1} [rn/view {:flex 1}
[divider-label/divider-label [divider-label/divider-label
{:label (first category) {:label (first category)
:chevron-position :left}] :chevron-position :left}]
[react/view [rn/view
{:margin-left 8 {:margin-left 8
:margin-top 10 :margin-top 10
:margin-bottom 8} :margin-bottom 8}
[list/flat-list [list/flat-list
{:shows-horizontal-scroll-indicator false {:shows-horizontal-scroll-indicator false
:separator [react/view {:margin-top 4}] :separator [rn/view {:margin-top 4}]
:data ((first category) list-of-channels) :data ((first category) list-of-channels)
:render-fn channel/list-item}]]]) :render-fn channel/list-item}]]])
list-of-channels)]]) list-of-channels)]])
(defn icon-color []
(colors/theme-colors
colors/white-opa-40
colors/neutral-80-opa-40))
(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 community-color] :as community}]
[react/view [rn/view
{:style {:style
{:flex 1 {:flex 1
:border-radius 20}} :border-radius 20}}
[react/view (styles/community-cover-container 148) [rn/view (styles/community-cover-container 148)
[react/image
[rn/image
{:source cover {:source cover
:style {:position :relative :style {:position :absolute
:flex 1}}]] :flex 1}}]
[react/view {:flex 1 [rn/view {:style {:margin-top 26}}
:height 20 [page-nav/page-nav
:border-radius 16 {:horizontal-description? true
:background-color (colors/theme-colors :one-icon-align-left? true
colors/white :align-mid? false
colors/neutral-90)} :page-nav-color :transparent
[react/view {:padding-horizontal 20} :page-nav-background-uri ""
[react/view {:border-radius 40 :mid-section {:type :text-with-description}
:border-width 1 :right-section-buttons [{:icon :main-icons2/search
:border-color colors/white :background-color (icon-color)}
:position :absolute {:icon :main-icons2/options
:top (- (/ 80 2)) :background-color (icon-color)
:left (/ 70 4) :on-press #(>evt [:bottom-sheet/show-sheet
:padding 2 {:content (constantly [options-menu/options-menu community])
:background-color (colors/theme-colors :content-height 400}])}]
colors/white :left-section {:icon :main-icons2/close
colors/neutral-90)} :icon-background-color (icon-color)
:on-press #(>evt [:navigate-back])}}]]]
[rn/view {:flex 1
:height 20
:border-radius 16
:background-color (colors/theme-colors
colors/white
colors/neutral-90)}
[rn/view {:padding-horizontal 20}
[rn/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]] [communities.icon/community-icon-redesign community 80]]
(when (and (not joined) (when (and (not joined)
(= status :gated)) (= status :gated))
[react/view (styles/permission-tag-styles) [rn/view (styles/permission-tag-styles)
[community-view/permission-tag-container [community-view/permission-tag-container
{:locked locked {:locked locked
:status status :status status
:tokens tokens}]]) :tokens tokens}]])
(when joined (when joined
[react/view {:position :absolute [rn/view {:position :absolute
:top 12 :top 12
:right 12} :right 12}
[status-tags/status-tag {:status {:type :positive} :label (i18n/label :joined)}]]) [status-tags/status-tag {:status {:type :positive} :label (i18n/label :joined)}]])
[community-view/community-title [community-view/community-title
{:title name {:title name
@ -121,6 +147,7 @@
{:on-press #(>evt [:bottom-sheet/show-sheet {:on-press #(>evt [:bottom-sheet/show-sheet
{:content (constantly [request-to-join/request-to-join community]) {:content (constantly [request-to-join/request-to-join community])
:content-height 300}]) :content-height 300}])
:override-background-color community-color
:style :style
{:width "100%" {:width "100%"
:margin-top 20 :margin-top 20
@ -133,8 +160,9 @@
(defn overview [] (defn overview []
(let [community-mock (<sub [:get-screen-params :community-overview]) ;;TODO stop using mock data and only pass community id (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)])] community (<sub [:communities/community (:id community-mock)])]
[react/view {:style [rn/view {:style
{:height "100%"}} {:height "100%"}}
[community-card-page-view [community-card-page-view
(merge community-mock {:joined (:joined community)})]])) (merge community-mock {:joined (:joined community)})]]))

2
src/status_im/ui/screens/screens.cljs
View File

@ -332,7 +332,7 @@
:options {:topBar {:title {:text (i18n/label :t/membership-title)}}} :options {:topBar {:title {:text (i18n/label :t/membership-title)}}}
:component membership/membership} :component membership/membership}
{:name :community-overview {:name :community-overview
:options {:topBar {:visible true}} ;; to do, replace with new top bar style :options {:topBar {:visible false}}
:component community-overview/overview} :component community-overview/overview}
;;BROWSER ;;BROWSER

17
translations/en.json
View File

@ -196,6 +196,7 @@
"community-invite-title": "Invite", "community-invite-title": "Invite",
"community-share-title": "Share", "community-share-title": "Share",
"invite": "Invite", "invite": "Invite",
"invite-contacts": "Invite people from contacts list",
"create-channel": "Create a channel", "create-channel": "Create a channel",
"import-community": "Import a community", "import-community": "Import a community",
"import-community-title": "Import a community", "import-community-title": "Import a community",
@ -803,6 +804,8 @@
"learn-more": "Learn more", "learn-more": "Learn more",
"learn-more-about-keycard": "Learn more about Keycard", "learn-more-about-keycard": "Learn more about Keycard",
"leave": "Leave", "leave": "Leave",
"leave-community?": "Leave community?",
"leave-community-message": "We’ll be sad to see you go but remember, you can come back at any time!",
"joined": "Joined", "joined": "Joined",
"leave-group": "Leave group", "leave-group": "Leave group",
"left": "left", "left": "left",
@ -846,6 +849,7 @@
"mainnet-network": "Main network", "mainnet-network": "Main network",
"make-admin": "Make admin", "make-admin": "Make admin",
"manage-keys-and-storage": "Manage keys and storage", "manage-keys-and-storage": "Manage keys and storage",
"mark-as-read": "Mark as read",
"mark-all-read": "Mark all read", "mark-all-read": "Mark all read",
"members": { "members": {
"one": "1 member", "one": "1 member",
@ -964,6 +968,7 @@
"remote-notifications-subtitle": "Enable google push notifications", "remote-notifications-subtitle": "Enable google push notifications",
"show-notifications": "Show notifications", "show-notifications": "Show notifications",
"notification-settings": "Notifications", "notification-settings": "Notifications",
"community-notification-settings": "Notification settings",
"notifications-servers": "Notification servers", "notifications-servers": "Notification servers",
"notifications-preferences": "Notification preferences", "notifications-preferences": "Notification preferences",
"notifications-switch": "Show notifications", "notifications-switch": "Show notifications",
@ -1149,6 +1154,7 @@
"share-address": "Share address", "share-address": "Share address",
"share-chat": "Share chat", "share-chat": "Share chat",
"share-contact-code": "Share my chat key", "share-contact-code": "Share my chat key",
"share-community": "Share community",
"share-dapp-text": "Check out this DApp I'm using on Status: {{link}}", "share-dapp-text": "Check out this DApp I'm using on Status: {{link}}",
"share-link": "Share link", "share-link": "Share link",
"share-my-profile": "Share my profile", "share-my-profile": "Share my profile",
@ -1324,14 +1330,17 @@
"version": "App version", "version": "App version",
"app-commit": "App commit", "app-commit": "App commit",
"view": "View", "view": "View",
"view-community-rules": "View Community Rules",
"view-cryptokitties": "View in CryptoKitties", "view-cryptokitties": "View in CryptoKitties",
"view-cryptostrikers": "View in CryptoStrikers", "view-cryptostrikers": "View in CryptoStrikers",
"view-etheremon": "View in Etheremon", "view-etheremon": "View in Etheremon",
"view-gitcoin": "View in Gitcoin", "view-gitcoin": "View in Gitcoin",
"view-members": "View members",
"view-profile": "View profile", "view-profile": "View profile",
"view-details": "View Details", "view-details": "View Details",
"view-signing": "View signing phrase", "view-signing": "View signing phrase",
"view-superrare": "View in SuperRare", "view-superrare": "View in SuperRare",
"vote-to-feature": "Vote to feature this community",
"waiting-for-wifi": "No Wi-fi, message syncing disabled.", "waiting-for-wifi": "No Wi-fi, message syncing disabled.",
"waiting-for-wifi-change": "Settings", "waiting-for-wifi-change": "Settings",
"waiting-to-sign": "Waiting to sign transaction...", "waiting-to-sign": "Waiting to sign transaction...",
@ -1503,6 +1512,8 @@
"name-optional": "Name (optional)", "name-optional": "Name (optional)",
"mute": "Mute", "mute": "Mute",
"unmute": "Unmute", "unmute": "Unmute",
"mute-community": "Mute community",
"unmute-community": "Unmute community",
"scan-tokens": "Scan tokens", "scan-tokens": "Scan tokens",
"my-status": "My status", "my-status": "My status",
"contacts-descr": "Your contacts will appear here. You will receive status updates from anyone you add as a contact", "contacts-descr": "Your contacts will appear here. You will receive status updates from anyone you add as a contact",
@ -1768,7 +1779,7 @@
"contact-request": "Contact request", "contact-request": "Contact request",
"contact-requests": "Contact Requests", "contact-requests": "Contact Requests",
"say-hi": "Say hi", "say-hi": "Say hi",
"opened" : "Opened", "opened": "Opened",
"accepted": "Accepted", "accepted": "Accepted",
"declined": "Declined", "declined": "Declined",
"contact-request-sent": "sent contact request", "contact-request-sent": "sent contact request",
@ -1786,11 +1797,11 @@
"K": "K", "K": "K",
"M": "M", "M": "M",
"gated": "Gated", "gated": "Gated",
"featured" : "Featured", "featured": "Featured",
"music": "Music", "music": "Music",
"lifestyle": "Lifestyle", "lifestyle": "Lifestyle",
"podcasts": "Podcasts", "podcasts": "Podcasts",
"NFT":"NFT", "NFT": "NFT",
"new-messages-header": "New Messages", "new-messages-header": "New Messages",
"link-to-community": "Link to community", "link-to-community": "Link to community",
"external-link": "External link", "external-link": "External link",