Update communities discover screen
* Fix: discover communities missing data * made community tags scrollable
This commit is contained in:
parent
2ab491f12b
commit
abe4dc7ac1
|
@ -16,15 +16,13 @@
|
|||
:height 230
|
||||
:border-radius 20}
|
||||
:on-press on-press}
|
||||
[rn/view
|
||||
{:flex 1}
|
||||
[rn/view {:style style/detail-container}
|
||||
[rn/view (style/community-cover-container 60)
|
||||
[rn/image
|
||||
{:source cover
|
||||
:style
|
||||
{:flex 1
|
||||
:border-top-right-radius 20
|
||||
:border-top-left-radius 20}}]]
|
||||
:style {:flex 1
|
||||
:border-top-right-radius 20
|
||||
:border-top-left-radius 20}}]]
|
||||
[rn/view (style/card-view-content-container 12)
|
||||
[rn/view (style/card-view-chat-icon 48)
|
||||
[icon/community-icon {:images images} 48]]
|
||||
|
@ -38,7 +36,7 @@
|
|||
{:title name
|
||||
:description description}]
|
||||
[rn/view {:style (style/card-stats-position)}
|
||||
[community-view/community-stats-column :card-view]]
|
||||
[community-view/community-stats-column
|
||||
{:type :card-view}]]
|
||||
[rn/view {:style (style/community-tags-position)}
|
||||
[community-view/community-tags tags]]]]]]])
|
||||
|
||||
|
|
|
@ -46,7 +46,7 @@
|
|||
(merge {:style {:height 56
|
||||
:border-radius 16}}
|
||||
props)
|
||||
[rn/view {:flex 1}
|
||||
[rn/view {:style style/detail-container}
|
||||
[rn/view (style/list-info-container)
|
||||
[community-icon/community-icon
|
||||
{:images community-icon} 32]
|
||||
|
@ -64,7 +64,8 @@
|
|||
colors/neutral-40
|
||||
colors/neutral-60))}}
|
||||
name]
|
||||
[community-view/community-stats-column :list-view]]
|
||||
[community-view/community-stats-column
|
||||
{:type :list-view}]]
|
||||
(if (= status :gated)
|
||||
[community-view/permission-tag-container
|
||||
{:locked? locked?
|
||||
|
|
|
@ -5,6 +5,7 @@
|
|||
[quo2.components.tags.permission-tag :as permission]
|
||||
[quo2.components.tags.tag :as tag]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo.gesture-handler :as gesture-handler] ;;TODO move to quo2
|
||||
[react-native.core :as rn]))
|
||||
|
||||
(defn community-stats
|
||||
|
@ -23,7 +24,7 @@
|
|||
members-count]])
|
||||
|
||||
(defn community-stats-column
|
||||
[type]
|
||||
[{:keys [type]}]
|
||||
(let [icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40)]
|
||||
[rn/view
|
||||
(if (= type :card-view)
|
||||
|
@ -41,7 +42,9 @@
|
|||
|
||||
(defn community-tags
|
||||
[tags]
|
||||
[rn/view (style/community-tags-container)
|
||||
[gesture-handler/scroll-view
|
||||
{:shows-horizontal-scroll-indicator false
|
||||
:horizontal true}
|
||||
(for [{:keys [name emoji]} tags]
|
||||
^{:key name}
|
||||
[rn/view {:margin-right 8}
|
||||
|
|
|
@ -22,6 +22,9 @@
|
|||
colors/white
|
||||
colors/neutral-90)})
|
||||
|
||||
(def detail-container
|
||||
{:flex 1})
|
||||
|
||||
(defn stats-count-container
|
||||
[]
|
||||
{:flex-direction :row
|
||||
|
@ -37,10 +40,6 @@
|
|||
{:flex-direction :row
|
||||
:align-items :center})
|
||||
|
||||
(defn community-tags-container
|
||||
[]
|
||||
{:flex-direction :row})
|
||||
|
||||
(defn card-stats-position
|
||||
[]
|
||||
{:position :absolute
|
||||
|
@ -62,7 +61,7 @@
|
|||
:bottom 0
|
||||
:left 0
|
||||
:right 0
|
||||
:height 20
|
||||
:border-radius 20
|
||||
:padding-horizontal padding-horizontal
|
||||
:border-top-right-radius 16
|
||||
:border-top-left-radius 16
|
||||
|
|
|
@ -22,10 +22,11 @@
|
|||
|
||||
(def featured-list-container
|
||||
{:flex-direction :row
|
||||
:overflow :hidden
|
||||
:margin-bottom 24
|
||||
:margin-left 20
|
||||
:padding-right 20})
|
||||
:overflow :hidden})
|
||||
|
||||
(def flat-list-container
|
||||
{:padding-bottom 24
|
||||
:padding-horizontal 20})
|
||||
|
||||
(def other-communities-container
|
||||
{:flex 1
|
||||
|
|
|
@ -4,12 +4,12 @@
|
|||
[quo2.core :as quo]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[react-native.platform :as platform]
|
||||
[reagent.core :as reagent]
|
||||
[status-im2.common.resources :as resources]
|
||||
[status-im2.contexts.communities.menus.community-options.view :as options]
|
||||
[status-im.ui.screens.communities.community :as community]
|
||||
[status-im.ui.components.react :as react]
|
||||
[react-native.platform :as platform]
|
||||
[status-im2.common.scroll-page.view :as scroll-page]
|
||||
[status-im2.contexts.communities.discover.style :as style]
|
||||
[utils.re-frame :as rf]))
|
||||
|
@ -22,7 +22,7 @@
|
|||
:group [{:id 1
|
||||
:token-icon (resources/get-mock-image :status-logo)}]}]}})
|
||||
|
||||
(defn render-fn
|
||||
(defn community-list-item
|
||||
[community-item _ _ {:keys [width view-type]}]
|
||||
(let [item (merge community-item
|
||||
(get mock-community-item-data :data))
|
||||
|
@ -98,18 +98,20 @@
|
|||
{:style style/featured-list-container
|
||||
:on-layout #(swap! view-size
|
||||
(fn []
|
||||
(- (oops/oget % "nativeEvent.layout.width") 20)))}
|
||||
(- (oops/oget % "nativeEvent.layout.width") 40)))}
|
||||
(when-not (= @view-size 0)
|
||||
[rn/flat-list
|
||||
{:key-fn :id
|
||||
:horizontal true
|
||||
:keyboard-should-persist-taps :always
|
||||
:shows-horizontal-scroll-indicator false
|
||||
:nestedScrollEnabled true
|
||||
:separator [rn/view {:width 12}]
|
||||
:data communities
|
||||
:render-fn render-fn
|
||||
:render-fn community-list-item
|
||||
:render-data {:width @view-size
|
||||
:view-type view-type}}])])))
|
||||
:view-type view-type}
|
||||
:content-container-style style/flat-list-container}])])))
|
||||
|
||||
(defn discover-communities-header
|
||||
[{:keys [featured-communities-count
|
||||
|
@ -120,7 +122,7 @@
|
|||
[screen-title]
|
||||
[featured-communities-header featured-communities-count]
|
||||
[featured-list featured-communities view-type]
|
||||
[quo/separator]
|
||||
[quo/separator {:style {:margin-horizontal 20}}]
|
||||
[discover-communities-segments selected-tab false]])
|
||||
|
||||
(defn other-communities-list
|
||||
|
@ -131,14 +133,16 @@
|
|||
(let [community-id (when communities-ids item)
|
||||
community (if communities
|
||||
item
|
||||
[rf/sub [:communities/home-item community-id]])]
|
||||
(rf/sub [:communities/home-item community-id]))
|
||||
cover {:uri (get-in (:images item) [:banner :uri])}]
|
||||
[rn/view
|
||||
{:key (str inner-index (:id community))
|
||||
:margin-bottom 16}
|
||||
(if (= view-type :card-view)
|
||||
[quo/community-card-view-item
|
||||
(merge community
|
||||
(get mock-community-item-data :data))
|
||||
(get mock-community-item-data :data)
|
||||
{:cover cover})
|
||||
#(rf/dispatch [:navigate-to :community-overview (:id community)])]
|
||||
[quo/communities-list-view-item
|
||||
{:on-press (fn []
|
||||
|
|
|
@ -83,7 +83,7 @@
|
|||
(:labelled? @state))
|
||||
:resource (if (= :emoji (:type @state))
|
||||
(resources/get-image :music)
|
||||
:main-icons2/placeholder)})]]]]])))
|
||||
:i/placeholder)})]]]]])))
|
||||
(defn preview-tag
|
||||
[]
|
||||
[rn/view
|
||||
|
|
Loading…
Reference in New Issue