feat: add scrolling in community (#14281)
This commit is contained in:
parent
42de2a6384
commit
0e614d51ef
|
@ -41,7 +41,8 @@
|
||||||
[icons/icon icon (icon-props icon-color :big)]]])
|
[icons/icon icon (icon-props icon-color :big)]]])
|
||||||
|
|
||||||
(defn- mid-section-comp
|
(defn- mid-section-comp
|
||||||
[{:keys [description-user-icon horizontal-description? text-secondary-color align-mid? text-color icon main-text type description]}]
|
[{:keys [description-img 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
|
||||||
|
@ -49,13 +50,16 @@
|
||||||
(when (or (and (not horizontal-description?)
|
(when (or (and (not horizontal-description?)
|
||||||
align-mid?
|
align-mid?
|
||||||
(not= :text-with-description type))
|
(not= :text-with-description type))
|
||||||
(and description-user-icon
|
(and (or description-img description-user-icon)
|
||||||
(not icon)))
|
(not icon)))
|
||||||
|
(if description-img
|
||||||
|
[rn/view {:margin-right 8}
|
||||||
|
[description-img]]
|
||||||
[rn/image {:source {:uri 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
|
||||||
:margin-right 8}}])
|
:margin-right 8}}]))
|
||||||
[rn/view {:style {:flex-direction (if horizontal-description?
|
[rn/view {:style {:flex-direction (if horizontal-description?
|
||||||
:row
|
:row
|
||||||
:column)}}
|
:column)}}
|
||||||
|
@ -99,7 +103,6 @@
|
||||||
:style {:padding-horizontal 4
|
:style {:padding-horizontal 4
|
||||||
:color text-color}}
|
:color text-color}}
|
||||||
main-text]
|
main-text]
|
||||||
|
|
||||||
[icons/icon right-icon
|
[icons/icon right-icon
|
||||||
(icon-props 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}}
|
||||||
|
@ -163,6 +166,7 @@
|
||||||
:description-color color
|
:description-color color
|
||||||
:description-icon icon
|
:description-icon icon
|
||||||
:description-user-icon icon
|
:description-user-icon icon
|
||||||
|
:description-img a render prop which will be used in place of :description-user-icon
|
||||||
:main-text-icon-color color
|
:main-text-icon-color color
|
||||||
}
|
}
|
||||||
:left-section
|
:left-section
|
||||||
|
@ -189,6 +193,7 @@
|
||||||
mid-section-props
|
mid-section-props
|
||||||
{:type (:type mid-section)
|
{:type (:type mid-section)
|
||||||
:horizontal-description? horizontal-description?
|
:horizontal-description? horizontal-description?
|
||||||
|
:description-img (:description-img mid-section)
|
||||||
:main-text (:main-text mid-section)
|
:main-text (:main-text mid-section)
|
||||||
:main-text-icon-color (:main-text-icon-color mid-section)
|
:main-text-icon-color (:main-text-icon-color mid-section)
|
||||||
:one-icon-align-left? one-icon-align-left?
|
:one-icon-align-left? one-icon-align-left?
|
||||||
|
|
|
@ -1,10 +1,12 @@
|
||||||
(ns react-native.core
|
(ns react-native.core
|
||||||
(:require [reagent.core :as reagent]
|
(:require [reagent.core :as reagent]
|
||||||
["react-native" :as react-native]
|
["react-native" :as react-native]
|
||||||
|
["@react-native-community/blur" :as blur]
|
||||||
[react-native.flat-list :as flat-list]
|
[react-native.flat-list :as flat-list]
|
||||||
[react-native.section-list :as section-list]))
|
[react-native.section-list :as section-list]))
|
||||||
|
|
||||||
(def app-state ^js (.-AppState ^js react-native))
|
(def app-state ^js (.-AppState ^js react-native))
|
||||||
|
(def blur-view (reagent/adapt-react-class (.-BlurView blur)))
|
||||||
|
|
||||||
(def view (reagent/adapt-react-class (.-View ^js react-native)))
|
(def view (reagent/adapt-react-class (.-View ^js react-native)))
|
||||||
(def scroll-view (reagent/adapt-react-class (.-ScrollView ^js react-native)))
|
(def scroll-view (reagent/adapt-react-class (.-ScrollView ^js react-native)))
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
thumbnail-image (get-in images [:thumbnail :uri])]
|
thumbnail-image (get-in images [:thumbnail :uri])]
|
||||||
(cond
|
(cond
|
||||||
(= id constants/status-community-id)
|
(= id constants/status-community-id)
|
||||||
[react/image {:source (resources/get-image :status-logo)
|
[react/image {:source (resources/get-image :status-logo) ;; TODO replace with real data (or remove this code)
|
||||||
:style {:width 40
|
:style {:width 40
|
||||||
:height 40}}]
|
:height 40}}]
|
||||||
(seq thumbnail-image)
|
(seq thumbnail-image)
|
||||||
|
@ -27,7 +27,7 @@
|
||||||
thumbnail-image (get-in images [:thumbnail :uri])]
|
thumbnail-image (get-in images [:thumbnail :uri])]
|
||||||
(cond
|
(cond
|
||||||
(= id constants/status-community-id)
|
(= id constants/status-community-id)
|
||||||
[react/image {:source (resources/get-image :status-logo)
|
[react/image {:source (resources/get-image :status-logo) ;; TODO replace with real data
|
||||||
:style {:width size
|
:style {:width size
|
||||||
:height size}}]
|
:height size}}]
|
||||||
(seq thumbnail-image)
|
(seq thumbnail-image)
|
||||||
|
|
|
@ -1,23 +1,38 @@
|
||||||
(ns status-im2.contexts.communities.overview.style
|
(ns status-im2.contexts.communities.overview.style
|
||||||
(:require [quo2.foundations.colors :as colors]))
|
(:require [quo.platform :as platform]
|
||||||
|
[quo2.foundations.colors :as colors]))
|
||||||
(defn container1 []
|
|
||||||
{:flex 1
|
|
||||||
:height 20
|
|
||||||
:border-radius 16
|
|
||||||
:background-color (colors/theme-colors colors/white colors/neutral-90)})
|
|
||||||
|
|
||||||
(defn container2 []
|
|
||||||
{: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)})
|
|
||||||
|
|
||||||
(def preview-user
|
(def preview-user
|
||||||
{:flex-direction :row
|
{:flex-direction :row
|
||||||
:align-items :center
|
:align-items :center
|
||||||
:margin-top 20})
|
:margin-top 20})
|
||||||
|
|
||||||
|
(defn image-slider [height] {:top (if platform/ios? 0 -64) ; -44 -20 (the 20 is needed on android as the scroll doesn't bounce so this won't disapear otherwise)
|
||||||
|
:height height
|
||||||
|
:z-index 4
|
||||||
|
:flex 1})
|
||||||
|
|
||||||
|
(defn blur-slider [height] {:blur-amount 32
|
||||||
|
:blur-type :xlight
|
||||||
|
:overlay-color (if platform/ios? colors/white-opa-70 "transparent")
|
||||||
|
:style {:z-index 5
|
||||||
|
:top (if platform/ios? 0 -64) ; -44 -20 (the 20 is needed on android as the scroll doesn't bounce so this won't disapear otherwise)
|
||||||
|
:position :absolute
|
||||||
|
:height height
|
||||||
|
:width "100%"
|
||||||
|
:flex 1}})
|
||||||
|
|
||||||
|
(def blur-channel-header {:blur-amount 32
|
||||||
|
:blur-type :xlight
|
||||||
|
:overlay-color (if platform/ios? colors/white-opa-70 "transparent")
|
||||||
|
:style {:position :absolute
|
||||||
|
:top (if platform/ios? 44 48)
|
||||||
|
:height 34
|
||||||
|
:width "100%"
|
||||||
|
:flex 1}})
|
||||||
|
|
||||||
|
(defn scroll-view-container [border-radius] {:position :absolute
|
||||||
|
:top -48
|
||||||
|
:overflow :scroll
|
||||||
|
:border-radius border-radius
|
||||||
|
:height "100%"})
|
|
@ -1,18 +1,22 @@
|
||||||
(ns status-im2.contexts.communities.overview.view
|
(ns status-im2.contexts.communities.overview.view
|
||||||
(:require [i18n.i18n :as i18n]
|
(:require
|
||||||
|
[i18n.i18n :as i18n]
|
||||||
[react-native.core :as rn]
|
[react-native.core :as rn]
|
||||||
[quo2.core :as quo]
|
[quo2.core :as quo]
|
||||||
[utils.re-frame :as rf]
|
[utils.re-frame :as rf]
|
||||||
[quo2.components.community.style :as styles]
|
|
||||||
[quo2.foundations.colors :as colors]
|
[quo2.foundations.colors :as colors]
|
||||||
[status-im2.contexts.communities.home.actions.view :as home.actions]
|
|
||||||
[status-im2.contexts.communities.requests.actions.view :as requests.actions]
|
|
||||||
[status-im2.contexts.communities.overview.style :as style]
|
[status-im2.contexts.communities.overview.style :as style]
|
||||||
|
|
||||||
;; TODO move to status-im2 when reimplemented
|
;; TODO move to status-im2 when reimplemented
|
||||||
[status-im.ui.screens.communities.icon :as communities.icon]))
|
[status-im.ui.screens.communities.icon :as communities.icon]
|
||||||
|
[oops.core :as oops]
|
||||||
|
[reagent.core :as reagent]
|
||||||
|
[quo.platform :as platform]
|
||||||
|
[status-im2.contexts.communities.requests.actions.view :as requests.actions]
|
||||||
|
[status-im2.contexts.communities.home.actions.view :as home.actions]))
|
||||||
|
|
||||||
;; Mocked list items
|
;; Mocked list items
|
||||||
|
|
||||||
|
|
||||||
(def user-list
|
(def user-list
|
||||||
[{:full-name "Alicia K"}
|
[{:full-name "Alicia K"}
|
||||||
{:full-name "Marcus C"}
|
{:full-name "Marcus C"}
|
||||||
|
@ -22,7 +26,6 @@
|
||||||
(defn preview-user-list []
|
(defn preview-user-list []
|
||||||
[rn/view style/preview-user
|
[rn/view style/preview-user
|
||||||
[quo/preview-list {:type :user
|
[quo/preview-list {:type :user
|
||||||
:more-than-99-label (i18n/label :counter-99-plus)
|
|
||||||
:user user-list :list-size 4 :size 24}]
|
:user user-list :list-size 4 :size 24}]
|
||||||
[quo/text {:accessibility-label :communities-screen-title
|
[quo/text {:accessibility-label :communities-screen-title
|
||||||
:style {:margin-left 8}
|
:style {:margin-left 8}
|
||||||
|
@ -42,86 +45,203 @@
|
||||||
{:name "announcements"
|
{:name "announcements"
|
||||||
:emoji "🎺"}]
|
:emoji "🎺"}]
|
||||||
:Mobile [{:name "mobile"
|
:Mobile [{:name "mobile"
|
||||||
|
:emoji "👽"}
|
||||||
|
{:name "mobile-ui"
|
||||||
|
:emoji "👽"}
|
||||||
|
{:name "mobile-ui-reviews"
|
||||||
|
:emoji "👽"}]
|
||||||
|
:Desktop [{:name "desktop"
|
||||||
|
:emoji "👽"}
|
||||||
|
{:name "desktop-ui"
|
||||||
|
:emoji "👽"}
|
||||||
|
{:name "desktop-ui-reviews"
|
||||||
|
:emoji "👽"}
|
||||||
|
{:name "desktop2"
|
||||||
|
:emoji "👽"}
|
||||||
|
{:name "desktop-ui2"
|
||||||
|
:emoji "👽"}
|
||||||
|
{:name "desktop-ui2-reviews"
|
||||||
:emoji "👽"}]})
|
:emoji "👽"}]})
|
||||||
|
|
||||||
(defn channel-list-component []
|
(defn channel-list-component [channel-heights first-channel-height]
|
||||||
[rn/scroll-view {:style {:margin-top 20}}
|
[rn/view {:on-layout #(swap! first-channel-height
|
||||||
[:<>
|
(fn [] (+ (if platform/ios? 0 38) (int (Math/ceil (oops/oget % "nativeEvent.layout.y"))))))
|
||||||
(map (fn [category]
|
:style {:margin-top 20 :flex 1}}
|
||||||
^{:key (get category 0)}
|
(map-indexed (fn [index category]
|
||||||
[rn/view {:flex 1}
|
(let [first-category (first category)]
|
||||||
|
^{:key first-category}
|
||||||
|
[rn/view
|
||||||
|
{:flex 1
|
||||||
|
:key (str index first-category)
|
||||||
|
:on-layout #(swap! channel-heights
|
||||||
|
(fn []
|
||||||
|
(sort-by :height
|
||||||
|
(conj @channel-heights
|
||||||
|
{:height (int (oops/oget % "nativeEvent.layout.y"))
|
||||||
|
:label first-category}))))}
|
||||||
|
|
||||||
[quo/divider-label
|
[quo/divider-label
|
||||||
{:label (first category)
|
{:label first-category
|
||||||
:chevron-position :left}]
|
:chevron-position :left}]
|
||||||
[rn/view
|
[rn/view
|
||||||
{:margin-left 8
|
{:margin-left 8
|
||||||
:margin-top 10
|
:margin-top 10
|
||||||
:margin-bottom 8}
|
:margin-bottom 8}
|
||||||
[rn/flat-list
|
(map-indexed (fn [inner-index channel-data] [rn/view {:key (str inner-index (:name channel-data)) :margin-top 4}
|
||||||
{:shows-horizontal-scroll-indicator false
|
[quo/channel-list-item channel-data]]) (first-category list-of-channels))]]))
|
||||||
:separator [rn/view {:margin-top 4}]
|
list-of-channels)])
|
||||||
:data ((first category) list-of-channels)
|
|
||||||
:render-fn quo/channel-list-item}]]])
|
|
||||||
list-of-channels)]])
|
|
||||||
|
|
||||||
(defn overview []
|
(defn icon-color []
|
||||||
(let [community-mock (rf/sub [:get-screen-params :community-overview]) ;;TODO stop using mock data and only pass community id
|
(colors/theme-colors
|
||||||
community (rf/sub [:communities/community (:id community-mock)])
|
colors/white-opa-40
|
||||||
{:keys [name description locked joined
|
colors/neutral-80-opa-40))
|
||||||
status tokens cover tags community-color]} (merge community-mock {:joined (:joined community)})
|
|
||||||
icon-color (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40)]
|
(defn get-platform-value [value] (if platform/ios? (+ value 44) value))
|
||||||
[rn/view {:flex 1 :border-radius 20}
|
|
||||||
[rn/view (styles/community-cover-container 148) ;; TODO why component's style is used here ?
|
(def scroll-0 (if platform/ios? -44 0))
|
||||||
|
(def scroll0 (if platform/ios? 44 0))
|
||||||
|
(def scroll1 (if platform/ios? 86 134))
|
||||||
|
|
||||||
|
(def scroll2 (if platform/ios? -26 18))
|
||||||
|
|
||||||
|
(def max-image-size 80)
|
||||||
|
(def min-image-size 32)
|
||||||
|
|
||||||
|
(defn diff-with-max-min [value maximum minimum]
|
||||||
|
(->>
|
||||||
|
(+ value scroll0)
|
||||||
|
(- maximum)
|
||||||
|
(max minimum)
|
||||||
|
(min maximum)))
|
||||||
|
|
||||||
|
(defn get-header-size [scroll-height]
|
||||||
|
(if (<= scroll-height scroll2)
|
||||||
|
0
|
||||||
|
(->>
|
||||||
|
(+ (get-platform-value -17) scroll-height)
|
||||||
|
(* (if platform/ios? 3 1))
|
||||||
|
(max 0)
|
||||||
|
(min (if platform/ios? 100 124)))))
|
||||||
|
|
||||||
|
(defn community-card-page-view [{:keys [name description locked joined
|
||||||
|
status tokens cover tags community-color] :as community}]
|
||||||
|
(let [community-icon (memoize (fn [] [communities.icon/community-icon-redesign community 24]))
|
||||||
|
scroll-height (reagent/atom scroll-0)
|
||||||
|
channel-heights (reagent/atom [])
|
||||||
|
first-channel-height (reagent/atom 0)]
|
||||||
|
|
||||||
|
(fn []
|
||||||
|
[:<>
|
||||||
|
[:<>
|
||||||
[rn/image
|
[rn/image
|
||||||
{:source cover
|
{:source cover
|
||||||
:style {:position :absolute
|
:position :absolute
|
||||||
:flex 1}}]
|
:style (style/image-slider (get-header-size @scroll-height))}]
|
||||||
[rn/view {:style {:margin-top 26}}
|
[rn/blur-view (style/blur-slider (get-header-size @scroll-height))]]
|
||||||
|
[rn/view {:style {:z-index 6 :margin-top (if platform/ios? 56 12)}}
|
||||||
[quo/page-nav
|
[quo/page-nav
|
||||||
{:horizontal-description? true
|
{: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
|
||||||
|
:main-text (when (>= @scroll-height scroll1) name)
|
||||||
|
:description-img (when (>= @scroll-height scroll1) community-icon)}
|
||||||
:right-section-buttons [{:icon :i/search
|
:right-section-buttons [{:icon :i/search
|
||||||
:background-color icon-color}
|
:background-color (icon-color)}
|
||||||
{:icon :i/options
|
{:icon :i/options
|
||||||
:background-color icon-color
|
:background-color (icon-color)
|
||||||
:on-press #(rf/dispatch [:bottom-sheet/show-sheet
|
:on-press #(rf/dispatch [:bottom-sheet/show-sheet
|
||||||
{:content (constantly [home.actions/actions community])
|
{:content (constantly [home.actions/actions community])
|
||||||
:content-height 400}])}]
|
:content-height 400}])}]
|
||||||
:left-section {:icon :i/close
|
:left-section {:icon :i/close
|
||||||
:icon-background-color icon-color
|
:icon-background-color (icon-color)
|
||||||
:on-press #(rf/dispatch [:navigate-back])}}]]]
|
:on-press #(rf/dispatch [:navigate-back])}}]
|
||||||
[rn/view (style/container1)
|
(when (>= @scroll-height @first-channel-height)
|
||||||
|
[rn/blur-view style/blur-channel-header
|
||||||
|
[quo/divider-label
|
||||||
|
{:label (:label (last (filter (fn [{:keys [height]}]
|
||||||
|
(>= @scroll-height (+ height @first-channel-height)))
|
||||||
|
@channel-heights)))
|
||||||
|
:chevron-position :left}]])]
|
||||||
|
[rn/scroll-view {:style (style/scroll-view-container (diff-with-max-min @scroll-height 16 0))
|
||||||
|
:shows-vertical-scroll-indicator false
|
||||||
|
:scroll-event-throttle 1
|
||||||
|
:on-scroll #(swap! scroll-height (fn [] (int (oops/oget % "nativeEvent.contentOffset.y"))))}
|
||||||
|
[rn/view {:style {:height 151}}
|
||||||
|
[rn/image
|
||||||
|
{:source cover
|
||||||
|
:style {:overflow :visible
|
||||||
|
:flex 1}}]]
|
||||||
|
[rn/view {:flex 1
|
||||||
|
:border-radius (diff-with-max-min @scroll-height 16 0)
|
||||||
|
:background-color (colors/theme-colors
|
||||||
|
colors/white
|
||||||
|
colors/neutral-90)}
|
||||||
|
[rn/view
|
||||||
[rn/view {:padding-horizontal 20}
|
[rn/view {:padding-horizontal 20}
|
||||||
[rn/view (style/container2)
|
[rn/view {:border-radius 40
|
||||||
[communities.icon/community-icon-redesign community 80]]
|
:border-width 1
|
||||||
|
:border-color colors/white
|
||||||
|
:position :absolute
|
||||||
|
:top (if (<= @scroll-height scroll-0)
|
||||||
|
-40
|
||||||
|
(->> (+ scroll0 @scroll-height)
|
||||||
|
(* (if platform/ios? 3 1))
|
||||||
|
(+ -40)
|
||||||
|
(min 8)))
|
||||||
|
|
||||||
|
:left 17
|
||||||
|
:padding 2
|
||||||
|
:background-color (colors/theme-colors
|
||||||
|
colors/white
|
||||||
|
colors/neutral-90)}
|
||||||
|
[communities.icon/community-icon-redesign community
|
||||||
|
(->> (+ scroll0 @scroll-height)
|
||||||
|
(* (if platform/ios? 3 1))
|
||||||
|
(- max-image-size)
|
||||||
|
(max min-image-size)
|
||||||
|
(min max-image-size))]]
|
||||||
(when (and (not joined)
|
(when (and (not joined)
|
||||||
(= status :gated))
|
(= status :gated))
|
||||||
[rn/view (styles/permission-tag-styles)
|
[rn/view {:position :absolute
|
||||||
|
:top 8
|
||||||
|
:right 8}
|
||||||
[quo/permission-tag-container
|
[quo/permission-tag-container
|
||||||
{:locked locked
|
{:locked locked
|
||||||
:status status
|
:status status
|
||||||
:tokens tokens}]])
|
:tokens tokens}]])
|
||||||
|
|
||||||
(when joined
|
(when joined
|
||||||
[rn/view {:position :absolute :top 12 :right 12}
|
[rn/view {:position :absolute
|
||||||
|
:top 12
|
||||||
|
:right 12}
|
||||||
[quo/status-tag {:status {:type :positive} :label (i18n/label :joined)}]])
|
[quo/status-tag {:status {:type :positive} :label (i18n/label :joined)}]])
|
||||||
[quo/community-title
|
[rn/view {:margin-top 56}
|
||||||
{:title name
|
[quo/text
|
||||||
:size :large
|
{:accessibility-label :chat-name-text
|
||||||
:description description}]
|
:number-of-lines 1
|
||||||
[rn/view {:margin-top 12}
|
:ellipsize-mode :tail
|
||||||
[quo/community-stats-column :card-view]]
|
:weight :semi-bold
|
||||||
[rn/view {:margin-top 16}
|
:size :heading-1} name]]
|
||||||
[quo/community-tags tags]]
|
|
||||||
|
[quo/text
|
||||||
|
{:accessibility-label :community-description-text
|
||||||
|
:number-of-lines 2
|
||||||
|
:ellipsize-mode :tail
|
||||||
|
:weight :regular
|
||||||
|
:size :paragraph-1
|
||||||
|
:style {:margin-top 8 :margin-bottom 12}}
|
||||||
|
description]
|
||||||
|
[quo/community-stats-column :card-view]
|
||||||
|
[rn/view {:margin-top 12}]
|
||||||
|
[quo/community-tags tags]
|
||||||
[preview-user-list]
|
[preview-user-list]
|
||||||
(when (not joined)
|
(when-not joined
|
||||||
;; TODO (flexsurfer) we shouldn't have custom buttons, this should be a component
|
|
||||||
[quo/button
|
[quo/button
|
||||||
{:on-press #(rf/dispatch [:bottom-sheet/show-sheet
|
{:on-press #(rf/dispatch [:bottom-sheet/show-sheet
|
||||||
{:content (constantly [requests.actions/actions community])
|
{:content (constantly [requests.actions/request-to-join community])
|
||||||
:content-height 300}])
|
:content-height 300}])
|
||||||
:override-background-color community-color
|
:override-background-color community-color
|
||||||
:style
|
:style
|
||||||
|
@ -131,4 +251,17 @@
|
||||||
:margin-right :auto}
|
:margin-right :auto}
|
||||||
:before :i/communities}
|
:before :i/communities}
|
||||||
(i18n/label :join-open-community)])]
|
(i18n/label :join-open-community)])]
|
||||||
[channel-list-component]]]))
|
[channel-list-component channel-heights first-channel-height]]]]])))
|
||||||
|
|
||||||
|
(defn overview []
|
||||||
|
(let [community-mock (rf/sub [:get-screen-params :community-overview]) ;;TODO stop using mock data and only pass community id
|
||||||
|
community (rf/sub [:communities/community (:id community-mock)])]
|
||||||
|
|
||||||
|
[rn/view {:style
|
||||||
|
{:position :absolute
|
||||||
|
:top (if platform/ios? 0 44)
|
||||||
|
:width "100%"
|
||||||
|
:height "110%"}}
|
||||||
|
[community-card-page-view
|
||||||
|
(merge community-mock {:joined (:joined community)})]]))
|
||||||
|
|
||||||
|
|
|
@ -1,13 +1,17 @@
|
||||||
(ns status-im2.contexts.communities.requests.actions.view
|
(ns status-im2.contexts.communities.requests.actions.view
|
||||||
(:require [i18n.i18n :as i18n]
|
(:require [status-im.i18n.i18n :as i18n]
|
||||||
[reagent.core :as reagent]
|
[reagent.core :as reagent]
|
||||||
[react-native.core :as rn]
|
[status-im.react-native.resources :as resources]
|
||||||
[quo2.core :as quo]
|
[status-im.ui.components.list.views :as list]
|
||||||
[utils.re-frame :as rf]
|
[quo.react-native :as rn]
|
||||||
[status-im2.contexts.communities.requests.actions.style :as style]
|
[quo2.components.markdown.text :as text]
|
||||||
|
[quo2.components.buttons.button :as button]
|
||||||
;;TODO remove when not needed anymore
|
[quo2.components.selectors.disclaimer :as disclaimer]
|
||||||
[status-im.react-native.resources :as resources]))
|
[quo2.components.icon :as icon]
|
||||||
|
[status-im.utils.handlers :refer [>evt]]
|
||||||
|
[quo2.components.tags.context-tags :as context-tags]
|
||||||
|
[status-im.communities.core :as communities]
|
||||||
|
[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
|
||||||
|
@ -30,70 +34,99 @@
|
||||||
:content "You will be asked to change your name or picture if the staff deems them inappropriate."}])
|
:content "You will be asked to change your name or picture if the staff deems them inappropriate."}])
|
||||||
|
|
||||||
(defn community-rule-item [{:keys [title content index]}]
|
(defn community-rule-item [{:keys [title content index]}]
|
||||||
[rn/view {:flex 1 :margin-top 16}
|
[rn/view
|
||||||
[rn/view {:flex 1 :flex-direction :row :align-items :center}
|
{:style {:flex 1 :margin-top 16}}
|
||||||
[rn/view style/community-rule
|
[rn/view
|
||||||
[quo/text {:style style/community-rule-text
|
{:style
|
||||||
|
{:flex 1
|
||||||
|
:flex-direction :row
|
||||||
|
:align-items :center}}
|
||||||
|
[rn/view
|
||||||
|
{:style
|
||||||
|
{:height 18
|
||||||
|
:width 18
|
||||||
|
:margin-left 1
|
||||||
|
:margin-right 9
|
||||||
|
:background-color colors/white
|
||||||
|
:border-color colors/neutral-20
|
||||||
|
:border-width 1
|
||||||
|
:border-radius 6}}
|
||||||
|
[text/text {:style
|
||||||
|
{:margin-left :auto
|
||||||
|
:margin-right :auto
|
||||||
|
:margin-top :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)]]
|
||||||
[quo/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]]
|
||||||
[quo/text
|
[text/text
|
||||||
{:style {:margin-left 28 :margin-top 1}
|
{: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]
|
||||||
[rn/flat-list
|
[list/flat-list
|
||||||
{:shows-horizontal-scroll-indicator false
|
{:shows-horizontal-scroll-indicator false
|
||||||
:data rules
|
:data rules
|
||||||
:separator [rn/view {:margin-top 1}]
|
:separator [rn/view {:margin-top 1}]
|
||||||
:render-fn community-rule-item}])
|
:render-fn community-rule-item}])
|
||||||
|
|
||||||
(defn actions [community]
|
(defn request-to-join [community]
|
||||||
(let [agreed-to-rules? (reagent/atom false)]
|
(let [agreed-to-rules? (reagent/atom false)]
|
||||||
(fn []
|
(fn []
|
||||||
;; TODO shouldn't this be a drawer from quo2 ?
|
[rn/scroll-view {:style {:margin-left 20 :margin-right 20 :margin-bottom 20}}
|
||||||
[rn/view style/request-container1
|
[rn/view {:style {:flex 1 :flex-direction :row :align-items :center :justify-content :space-between}}
|
||||||
[rn/view style/request-container2
|
|
||||||
[quo/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)]
|
||||||
[rn/view style/request-icon
|
[rn/view {:style {:height 32
|
||||||
[quo/icon :i/info]]]
|
:width 32
|
||||||
|
:align-items :center
|
||||||
|
:background-color colors/white
|
||||||
|
:border-color colors/neutral-20
|
||||||
|
:border-width 1
|
||||||
|
:border-radius 8
|
||||||
|
:display :flex
|
||||||
|
:justify-content :center}}
|
||||||
|
[icon/icon :i/info]]]
|
||||||
;; TODO get tag image from community data
|
;; TODO get tag image from community data
|
||||||
[quo/context-tag
|
[context-tags/context-tag
|
||||||
{:style
|
{:style
|
||||||
{:margin-right :auto
|
{:margin-right :auto
|
||||||
:margin-top 8}}
|
:margin-top 8}}
|
||||||
(resources/get-image :status-logo) (:name community)]
|
(resources/get-image :status-logo) (:name community)]
|
||||||
[quo/text {:style {:margin-top 24}
|
[text/text {:style {:margin-top 24}
|
||||||
:accessibility-label :communities-rules-title
|
:accessibility-label :communities-rules-title
|
||||||
:weight :semi-bold
|
:weight :semi-bold
|
||||||
:size :paragraph-1}
|
:size :paragraph-1}
|
||||||
(i18n/label :t/community-rules)]
|
(i18n/label :t/community-rules)]
|
||||||
[community-rules-list community-rules]
|
[community-rules-list community-rules]
|
||||||
|
|
||||||
[quo/disclaimer
|
[disclaimer/disclaimer
|
||||||
{:container-style {:margin-top 20}
|
{:container-style {:margin-top 20}
|
||||||
:on-change #(swap! agreed-to-rules? not)}
|
:on-change #(swap! agreed-to-rules? not)}
|
||||||
(i18n/label :t/accept-community-rules)]
|
(i18n/label :t/accept-community-rules)]
|
||||||
|
|
||||||
[rn/view style/request-button
|
[rn/view {:style {:width "100%"
|
||||||
[quo/button {:on-press #(rf/dispatch [:bottom-sheet/hide])
|
:margin-top 32 :margin-bottom 16
|
||||||
:type :grey :style {:flex 1 :margin-right 12}}
|
:flex 1
|
||||||
(i18n/label :t/cancel)]
|
:flex-direction :row
|
||||||
[quo/button
|
: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 []
|
{:on-press (fn []
|
||||||
(rf/dispatch [:communities/join (:id community)])
|
(>evt [::communities/join (:id community)])
|
||||||
(rf/dispatch [:bottom-sheet/hide]))
|
(>evt [:bottom-sheet/hide]))
|
||||||
:disabled (not @agreed-to-rules?) :style {:flex 1}}
|
:disabled (not @agreed-to-rules?) :style {:flex 1}} (i18n/label :t/join-open-community)]]])))
|
||||||
(i18n/label :t/join-open-community)]]])))
|
|
||||||
|
|
|
@ -35,7 +35,9 @@
|
||||||
(defn status-bar-options []
|
(defn status-bar-options []
|
||||||
(if platform/android?
|
(if platform/android?
|
||||||
{:navigationBar {:backgroundColor (colors/theme-colors colors/white colors/neutral-100)}
|
{:navigationBar {:backgroundColor (colors/theme-colors colors/white colors/neutral-100)}
|
||||||
:statusBar {:backgroundColor (colors/theme-colors colors/white colors/neutral-100)
|
:statusBar {:translucent true
|
||||||
|
:backgroundColor :transparent
|
||||||
|
:drawBehind true
|
||||||
:style (if (colors/dark?) :light :dark)}}
|
:style (if (colors/dark?) :light :dark)}}
|
||||||
{:statusBar {:style (if (colors/dark?) :light :dark)}}))
|
{:statusBar {:style (if (colors/dark?) :light :dark)}}))
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue