diff --git a/src/quo2/components/community/community_card_view.cljs b/src/quo2/components/community/community_card_view.cljs index a0d57b7b37..e7928663d3 100644 --- a/src/quo2/components/community/community_card_view.cljs +++ b/src/quo2/components/community/community_card_view.cljs @@ -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]]]]]]]) - diff --git a/src/quo2/components/community/community_list_view.cljs b/src/quo2/components/community/community_list_view.cljs index 1ef185e7ef..d24d239286 100644 --- a/src/quo2/components/community/community_list_view.cljs +++ b/src/quo2/components/community/community_list_view.cljs @@ -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? diff --git a/src/quo2/components/community/community_view.cljs b/src/quo2/components/community/community_view.cljs index 725075bf3a..199bf731be 100644 --- a/src/quo2/components/community/community_view.cljs +++ b/src/quo2/components/community/community_view.cljs @@ -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} diff --git a/src/quo2/components/community/style.cljs b/src/quo2/components/community/style.cljs index 5dc31f0118..b438f14f24 100644 --- a/src/quo2/components/community/style.cljs +++ b/src/quo2/components/community/style.cljs @@ -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 diff --git a/src/status_im2/contexts/communities/discover/style.cljs b/src/status_im2/contexts/communities/discover/style.cljs index 791364195a..c598b49205 100644 --- a/src/status_im2/contexts/communities/discover/style.cljs +++ b/src/status_im2/contexts/communities/discover/style.cljs @@ -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 diff --git a/src/status_im2/contexts/communities/discover/view.cljs b/src/status_im2/contexts/communities/discover/view.cljs index 81818fc430..74e2180ced 100644 --- a/src/status_im2/contexts/communities/discover/view.cljs +++ b/src/status_im2/contexts/communities/discover/view.cljs @@ -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 [] diff --git a/src/status_im2/contexts/quo_preview/tags/tag.cljs b/src/status_im2/contexts/quo_preview/tags/tag.cljs index 7de9489e6d..5053d511e1 100644 --- a/src/status_im2/contexts/quo_preview/tags/tag.cljs +++ b/src/status_im2/contexts/quo_preview/tags/tag.cljs @@ -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