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
16)}}
(if-not (string/blank? color)
{:color color}
{:color color}
{: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
[{: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
centrify-style
:flex-direction :row
:margin-horizontal 2)}
(when (or (and (not horizontal-description?)
align-mid?
(not= :text-with-description mid-section-type))
(and mid-section-description-user-icon
(not mid-section-icon)))
[rn/image {:source {:uri mid-section-description-user-icon}
(not= :text-with-description type))
(and description-user-icon
(not icon)))
[rn/image {:source {:uri description-user-icon}
:style {:width 32
:height 32
:border-radius 32
@ -52,21 +64,22 @@
:weight :semi-bold
:style {:color text-color
:line-height 21}}
mid-section-main-text]
(when mid-section-description
main-text]
(when description
[text/text {:size :paragraph-2
:weight :medium
:style (cond-> {:padding-right 4
:color text-secondary-color
:line-height 18}
horizontal-description? (assoc :margin-left 4 :margin-top 2))}
mid-section-description])]])
description])]])
(defn- 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}]
(defn- render-mid-section
[{: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)
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
(if left-align?
align-left
@ -74,37 +87,37 @@
{:flex 1
:margin-left 4
:text-align-vertical :center})}
(case mid-section-type
(case type
:text-only [text/text {:size :paragraph-1
:weight :semi-bold
:style {:color text-color}}
mid-section-main-text]
main-text]
:text-with-two-icons [rn/view {:style (assoc centrify-style :flex-direction :row)}
[icons/icon mid-section-left-icon
(icon-props mid-section-main-text-icon-color :big)]
[icons/icon left-icon
(icon-props main-text-icon-color :big)]
[text/text {:size :paragraph-1
:weight :semi-bold
:style {:padding-horizontal 4
:color text-color}}
mid-section-main-text]
main-text]
[icons/icon mid-section-right-icon
(icon-props mid-section-main-text-icon-color :big)]]
[icons/icon right-icon
(icon-props main-text-icon-color :big)]]
:text-with-one-icon [rn/view {:style {:flex-direction :row}}
(if one-icon-align-left?
[rn/view {:style {:flex-direction :row
:align-items :center}}
(when horizontal-description?
[icons/icon mid-section-left-icon
(icon-props mid-section-main-text-icon-color :big)])
mid-section-comp-instance]
[icons/icon left-icon
(icon-props main-text-icon-color :big)])
component-instance]
[rn/view {:style {:flex-direction :row
:align-items :center}}
mid-section-comp-instance
component-instance
(when horizontal-description?
[icons/icon mid-section-left-icon
(icon-props mid-section-main-text-icon-color :big)])])]
:text-with-description mid-section-comp-instance)]))
[icons/icon left-icon
(icon-props main-text-icon-color :big)])])]
:text-with-description component-instance)]))
(defn- right-section-icon
[{: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))}
[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
[{: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)
put-middle-section-on-left? (or align-mid?
(> (count right-section-icons) 1))
mid-section-props {:mid-section-type mid-section-type
:horizontal-description? horizontal-description?
:mid-section-main-text mid-section-main-text
:one-icon-align-left? one-icon-align-left?
:mid-section-right-icon mid-section-right-icon
:mid-section-icon mid-section-icon
:mid-section-main-text-icon-color mid-section-main-text-icon-color
:mid-section-left-icon mid-section-left-icon}]
(> (count right-section-buttons) 1))
mid-section-props
{:type (:type mid-section)
:horizontal-description? horizontal-description?
:main-text (:main-text mid-section)
:main-text-icon-color (:main-text-icon-color mid-section)
:one-icon-align-left? one-icon-align-left?
:right-icon (:right-icon mid-section)
:icon (:icon mid-section)
:left-icon (:left-icon mid-section)}]
[rn/view {:style (cond->
{:display :flex
:flex-direction :row
@ -143,33 +211,15 @@
[rn/view {:style {:flex 1
:flex-direction :row
:align-items :center}}
[rn/view {:style (merge
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)]]
(render-left-section left-section put-middle-section-on-left?)
(when put-middle-section-on-left?
[mid-section (assoc mid-section-props
:left-align? true
:mid-section-description mid-section-description
:mid-section-description-color mid-section-description-color
:mid-section-description-icon mid-section-description-icon
:align-mid? align-mid?
:mid-section-description-user-icon mid-section-description-user-icon)])]
[render-mid-section (assoc mid-section-props
:left-align? true
:description (:description mid-section)
:description-color (:description-color mid-section)
:description-icon (:description-icon mid-section)
:align-mid? align-mid?
:description-user-icon (:description-user-icon mid-section))])]
(when-not put-middle-section-on-left?
[mid-section mid-section-props])
[rn/view {:style (assoc
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))]]))
[render-mid-section mid-section-props])
(render-right-section right-section-buttons)]))

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

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

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

@ -3,7 +3,7 @@
[reagent.core :as reagent]
[status-im.i18n.i18n :as i18n]
[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.markdown.text :as quo2.text]
[quo2.components.buttons.button :as quo2.button]
@ -28,7 +28,8 @@
(def sort-list-by (reagent/atom :name))
(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
:cover (resources/get-image :community-cover)
:tokens [{:id 1
@ -70,14 +71,14 @@
#js {:length 64 :offset (* 64 index) :index index})
(defn community-segments []
[react/view {:flex 1
:margin-bottom 8
:padding-horizontal 20}
[react/view {:flex-direction :row
:padding-top 20
:padding-bottom 8
:height 60}
[react/view {:flex 1}
[rn/view {:flex 1
:margin-bottom 8
:padding-horizontal 20}
[rn/view {:flex-direction :row
:padding-top 20
:padding-bottom 8
:height 60}
[rn/view {:flex 1}
[quo2.tabs/tabs {:size 32
:on-change #(reset! selected-tab %)
:default-active selected-tab
@ -87,7 +88,7 @@
:label (i18n/label :t/open)}
{:id :gated
:label (i18n/label :t/gated)}]}]]
[react/view {:flex-direction :row}
[rn/view {:flex-direction :row}
[quo2.button/button
{:icon true
:type :outline
@ -141,14 +142,14 @@
(defn featured-communities-section [communities]
(let [count (reagent/atom {:value (count communities) :type :grey})]
[react/view {:flex 1}
[react/view {:flex-direction :row
:height 30
:padding-top 8
:justify-content :space-between
:padding-horizontal 20}
[react/view {:flex-direction :row
:align-items :center}
[rn/view {:flex 1}
[rn/view {:flex-direction :row
:height 30
:padding-top 8
:justify-content :space-between
:padding-horizontal 20}
[rn/view {:flex-direction :row
:align-items :center}
[quo2.text/text {:accessibility-label :featured-communities-title
:weight :semi-bold
:size :paragraph-1
@ -162,18 +163,18 @@
:color (quo2.colors/theme-colors
quo2.colors/neutral-50
quo2.colors/neutral-40)}]]
[react/view {:margin-top 8
:padding-left 20}
[rn/view {:margin-top 8
:padding-left 20}
[featured-communities communities]]]))
(defn title-column []
[react/view
[rn/view
{:flex-direction :row
:align-items :center
:height 56
:padding-vertical 12
:padding-horizontal 20}
[react/view
[rn/view
{:flex 1}
[quo2.text/text {:accessibility-label :communities-screen-title
:margin-right 6
@ -187,13 +188,13 @@
{: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 4 :tag-label (i18n/label :t/podcasts) :resource (resources/get-image :podcasts)}]]
[react/scroll-view {:horizontal true
:height 48
:shows-horizontal-scroll-indicator false
:scroll-event-throttle 64
:padding-top 4
:padding-bottom 12
:padding-horizontal 20}
[rn/scroll-view {:horizontal true
:height 48
:shows-horizontal-scroll-indicator false
:scroll-event-throttle 64
:padding-top 4
:padding-bottom 12
:padding-horizontal 20}
[tags/tags {:data filters
:labelled true
:type :emoji
@ -208,31 +209,31 @@
[safe-area/consumer
(fn [insets]
[react/view {:style {:flex 1
:padding-top (:top insets)
:background-color (quo2.colors/theme-colors
quo2.colors/neutral-5
quo2.colors/neutral-95)}}
[rn/view {:style {:flex 1
:padding-top (:top insets)
:background-color (quo2.colors/theme-colors
quo2.colors/neutral-5
quo2.colors/neutral-95)}}
[topbar/topbar
{:navigation :none
:left-component [react/view {:margin-left 16}
:left-component [rn/view {:margin-left 16}
[photos/photo (multiaccounts/displayed-photo multiaccount)
{:size 32}]]
:right-component [react/view {:flex-direction :row
:margin-right 16}
:right-component [rn/view {:flex-direction :row
:margin-right 16}
[topnav/qr-scanner]
[topnav/qr-code]
[topnav/notifications-button]]
:new-ui? true
:border-bottom false}]
[title-column]
[react/scroll-view
[rn/scroll-view
[community-filter-tags]
[featured-communities-section featured-communities]
(when communities
[:<>
[react/view {:margin-vertical 4
:padding-horizontal 20}
[rn/view {:margin-vertical 4
:padding-horizontal 20}
[separator/separator]]
[community-segments]])
[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
(: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.buttons.button :as button]
[quo2.components.list-items.preview-list :as preview-list]
@ -9,10 +9,12 @@
[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.community-options-bottom-sheet :as options-menu]
[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]
[quo2.components.navigation.page-nav :as page-nav]
[status-im.ui.screens.communities.icon :as communities.icon]))
;; Mocked list items
@ -23,9 +25,9 @@
{:full-name "STU VWX"}])
(defn preview-user-list []
[react/view {:style {:flex-direction :row
:align-items :center
:margin-top 20}}
[rn/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
@ -49,65 +51,89 @@
:emoji "👽"}]})
(defn channel-list-component []
[react/scroll-view {:style {:margin-top 20}}
[rn/scroll-view {:style {:margin-top 20}}
[:<> {:style {:flex 1}}
(map (fn [category]
^{:key (get category 0)}
[react/view {:flex 1}
[rn/view {:flex 1}
[divider-label/divider-label
{:label (first category)
:chevron-position :left}]
[react/view
[rn/view
{:margin-left 8
:margin-top 10
:margin-bottom 8}
[list/flat-list
{:shows-horizontal-scroll-indicator false
:separator [react/view {:margin-top 4}]
:separator [rn/view {:margin-top 4}]
:data ((first category) list-of-channels)
:render-fn channel/list-item}]]])
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
status tokens cover tags] :as community}]
[react/view
status tokens cover tags community-color] :as community}]
[rn/view
{:style
{:flex 1
:border-radius 20}}
[react/view (styles/community-cover-container 148)
[react/image
[rn/view (styles/community-cover-container 148)
[rn/image
{:source cover
:style {:position :relative
:flex 1}}]]
[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)}
:style {:position :absolute
:flex 1}}]
[rn/view {:style {:margin-top 26}}
[page-nav/page-nav
{:horizontal-description? true
:one-icon-align-left? true
:align-mid? false
:page-nav-color :transparent
:page-nav-background-uri ""
:mid-section {:type :text-with-description}
:right-section-buttons [{:icon :main-icons2/search
:background-color (icon-color)}
{:icon :main-icons2/options
:background-color (icon-color)
:on-press #(>evt [:bottom-sheet/show-sheet
{:content (constantly [options-menu/options-menu community])
:content-height 400}])}]
:left-section {:icon :main-icons2/close
: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]]
(when (and (not joined)
(= status :gated))
[react/view (styles/permission-tag-styles)
[rn/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}
[rn/view {:position :absolute
:top 12
:right 12}
[status-tags/status-tag {:status {:type :positive} :label (i18n/label :joined)}]])
[community-view/community-title
{:title name
@ -121,6 +147,7 @@
{:on-press #(>evt [:bottom-sheet/show-sheet
{:content (constantly [request-to-join/request-to-join community])
:content-height 300}])
:override-background-color community-color
:style
{:width "100%"
:margin-top 20
@ -133,8 +160,9 @@
(defn overview []
(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%"}}
[rn/view {:style
{:height "100%"}}
[community-card-page-view
(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)}}}
:component membership/membership}
{:name :community-overview
:options {:topBar {:visible true}} ;; to do, replace with new top bar style
:options {:topBar {:visible false}}
:component community-overview/overview}
;;BROWSER

17
translations/en.json
View File

@ -196,6 +196,7 @@
"community-invite-title": "Invite",
"community-share-title": "Share",
"invite": "Invite",
"invite-contacts": "Invite people from contacts list",
"create-channel": "Create a channel",
"import-community": "Import a community",
"import-community-title": "Import a community",
@ -803,6 +804,8 @@
"learn-more": "Learn more",
"learn-more-about-keycard": "Learn more about Keycard",
"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",
"leave-group": "Leave group",
"left": "left",
@ -846,6 +849,7 @@
"mainnet-network": "Main network",
"make-admin": "Make admin",
"manage-keys-and-storage": "Manage keys and storage",
"mark-as-read": "Mark as read",
"mark-all-read": "Mark all read",
"members": {
"one": "1 member",
@ -964,6 +968,7 @@
"remote-notifications-subtitle": "Enable google push notifications",
"show-notifications": "Show notifications",
"notification-settings": "Notifications",
"community-notification-settings": "Notification settings",
"notifications-servers": "Notification servers",
"notifications-preferences": "Notification preferences",
"notifications-switch": "Show notifications",
@ -1149,6 +1154,7 @@
"share-address": "Share address",
"share-chat": "Share chat",
"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-link": "Share link",
"share-my-profile": "Share my profile",
@ -1324,14 +1330,17 @@
"version": "App version",
"app-commit": "App commit",
"view": "View",
"view-community-rules": "View Community Rules",
"view-cryptokitties": "View in CryptoKitties",
"view-cryptostrikers": "View in CryptoStrikers",
"view-etheremon": "View in Etheremon",
"view-gitcoin": "View in Gitcoin",
"view-members": "View members",
"view-profile": "View profile",
"view-details": "View Details",
"view-signing": "View signing phrase",
"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-change": "Settings",
"waiting-to-sign": "Waiting to sign transaction...",
@ -1503,6 +1512,8 @@
"name-optional": "Name (optional)",
"mute": "Mute",
"unmute": "Unmute",
"mute-community": "Mute community",
"unmute-community": "Unmute community",
"scan-tokens": "Scan tokens",
"my-status": "My status",
"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-requests": "Contact Requests",
"say-hi": "Say hi",
"opened" : "Opened",
"opened": "Opened",
"accepted": "Accepted",
"declined": "Declined",
"contact-request-sent": "sent contact request",
@ -1786,11 +1797,11 @@
"K": "K",
"M": "M",
"gated": "Gated",
"featured" : "Featured",
"featured": "Featured",
"music": "Music",
"lifestyle": "Lifestyle",
"podcasts": "Podcasts",
"NFT":"NFT",
"NFT": "NFT",
"new-messages-header": "New Messages",
"link-to-community": "Link to community",
"external-link": "External link",