From baccb013341c7e56d8fdfaade0c9326c6e2d5cb2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oskar=20Thor=C3=A9n?= Date: Mon, 9 Oct 2017 12:13:21 +0200 Subject: [PATCH] Discover: App dapps grid styling and tweaks - Use flat-list and 3 column layout for grid - Get rid of platform ns dependency - Minor refactor: "wrap" -> :wrap, backgroundColor -> background-color --- .../ui/screens/discover/all_dapps/views.cljs | 46 ++++++++----------- src/status_im/ui/screens/discover/styles.cljs | 36 +++++++-------- 2 files changed, 36 insertions(+), 46 deletions(-) diff --git a/src/status_im/ui/screens/discover/all_dapps/views.cljs b/src/status_im/ui/screens/discover/all_dapps/views.cljs index ea66a7e4da..440687f4ec 100644 --- a/src/status_im/ui/screens/discover/all_dapps/views.cljs +++ b/src/status_im/ui/screens/discover/all_dapps/views.cljs @@ -3,30 +3,27 @@ (:require [cljs.pprint :as pprint] [re-frame.core :as re-frame] [status-im.components.react :as react] + [status-im.components.list.views :as list] [status-im.components.chat-icon.screen :as chat-icon] [status-im.components.carousel.carousel :as carousel] [status-im.ui.screens.discover.components.views :as discover-components] [status-im.ui.screens.discover.styles :as styles] - [status-im.utils.platform :as platform] [status-im.i18n :as i18n] [status-im.components.toolbar-new.view :as toolbar])) -(defn dapp-item [dapp] - (let [{:keys [name photo-path dapp?]} dapp - ;; TODO(oskarth): Refactor this to be in discover styles, just uppercase - item-style (get-in platform/platform-specific [:component-styles :discover :item])] - [react/view - [react/view styles/dapps-list-item +(defn render-dapp [{:keys [name photo-path dapp?] :as dapp}] + [react/view {:style styles/all-dapps-flat-list-item} [react/view styles/dapps-list-item-second-row - [react/view styles/dapps-list-item-name-container - [react/view (merge styles/dapps-list-item-avatar-container - (:icon item-style)) - ;; TODO(oskarth): Get rid of badge on icon - [react/view (chat-icon/contact-icon-contacts-tab dapp)]] - [react/text {:style styles/dapps-list-item-name - :font :medium - :number-of-lines 1} - name]]]]])) + [react/view styles/dapps-list-item-name-container + [react/view styles/dapps-list-item-avatar-container + [react/view (chat-icon/contact-icon-contacts-tab dapp)]] + [react/text {:style styles/dapps-list-item-name + :font :medium + :number-of-lines 1} + name]]]]) + +;; TODO(oskarth): Carousel task, possibly different subcomponent +(def dapp-item render-dapp) ;; TODO(oskarth): Move this to top level discover ns (defn preview [dapps] @@ -50,15 +47,12 @@ (letsubs [all-dapps [:get-all-dapps] tabs-hidden? [:tabs-hidden?]] (when (seq all-dapps) - [react/view styles/discover-container + [react/view styles/all-dapps-container [toolbar/toolbar2 {} toolbar/default-nav-back - ;; TODO(oskarth): Lowercase for some reason - [react/view [react/text {} :t/dapps]]] - [react/scroll-view (styles/list-container tabs-hidden?) - [react/view styles/all-dapps-container - [react/view styles/all-dapps-list - (for [[_ dapp] all-dapps] - ^{:key (str (:name dapp))} - [dapp-item dapp])]]]]))) - + ;; TODO(oskarth): Lowercase and wrong style for some reason + [react/view [react/text :t/dapps]]] + [list/flat-list {:data (vals all-dapps) + :render-fn render-dapp + :num-columns 3 + :content-container-style styles/all-dapps-flat-list}]]))) diff --git a/src/status_im/ui/screens/discover/styles.cljs b/src/status_im/ui/screens/discover/styles.cljs index f217975c31..e8491e280e 100644 --- a/src/status_im/ui/screens/discover/styles.cljs +++ b/src/status_im/ui/screens/discover/styles.cljs @@ -131,26 +131,19 @@ (def all-dapps-container {:flex 1 - :flex-direction :row - :flex-grow 1 :background-color toolbar-background2}) -(def all-dapps-list - {:background-color styles/color-white - :flex 1 - :flex-wrap "wrap" - :padding 4 - :margin 4 - :flex-direction :row}) +(def all-dapps-flat-list + {:justify-content :center + :flex-direction :row + :flex-wrap :wrap + :margin-top 8 + :background-color styles/color-white}) -(def dapps-list-item - {:flex-direction :column - ;; TODO(oskarth): Not straight columns and rows - ;; :border-radius 4 - ;; :border-width 4 - ;; :border-color "red" - :margin 4 - :padding 4}) +(def all-dapps-flat-list-item + {:margin 10 + :width 100 + :height 100}) (def dapps-list-item-second-row {:flex 1 @@ -173,7 +166,10 @@ {:flex-direction :column :padding 4 :margin 4 - :align-items :center}) + :align-items :center + :ios {:padding-top 0 + :bottom -4 + :justify-content :flex-end}}) (def dapp-preview-container {:background-color styles/color-white @@ -225,8 +221,8 @@ :height 17}) (def discover-container - {:flex 1 - :backgroundColor styles/color-white}) + {:flex 1 + :background-color styles/color-white}) (def list-container {:flex 1})