From 4c8935a16f47889196a4be08ec66c56d61801c81 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oskar=20Thor=C3=A9n?= Date: Thu, 5 Oct 2017 11:08:32 +0200 Subject: [PATCH] Discover: Show all apps - Addresses https://github.com/status-im/status-react/issues/1972 - WIP carousel - Not pixel perfect --- src/status_im/translations/en.cljs | 1 + .../ui/screens/discover/all_dapps/views.cljs | 64 +++++++++++++++++++ src/status_im/ui/screens/discover/styles.cljs | 64 ++++++++++++++++++- src/status_im/ui/screens/discover/subs.cljs | 9 +++ src/status_im/ui/screens/discover/views.cljs | 5 +- src/status_im/ui/screens/views.cljs | 2 + 6 files changed, 143 insertions(+), 2 deletions(-) create mode 100644 src/status_im/ui/screens/discover/all_dapps/views.cljs diff --git a/src/status_im/translations/en.cljs b/src/status_im/translations/en.cljs index ebdce89b8f..438f0d8d80 100644 --- a/src/status_im/translations/en.cljs +++ b/src/status_im/translations/en.cljs @@ -168,6 +168,7 @@ :public-chats "Public chats" :soon "Soon" :public-chat-user-count "{{count}} people" + :dapps "DApps" ;;settings :settings "Settings" diff --git a/src/status_im/ui/screens/discover/all_dapps/views.cljs b/src/status_im/ui/screens/discover/all_dapps/views.cljs new file mode 100644 index 0000000000..ea66a7e4da --- /dev/null +++ b/src/status_im/ui/screens/discover/all_dapps/views.cljs @@ -0,0 +1,64 @@ +(ns status-im.ui.screens.discover.all-dapps.views + (:require-macros [status-im.utils.views :refer [defview letsubs]]) + (:require [cljs.pprint :as pprint] + [re-frame.core :as re-frame] + [status-im.components.react :as react] + [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 + [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]]]]])) + +;; TODO(oskarth): Move this to top level discover ns +(defn preview [dapps] + [react/view styles/dapp-preview-container + ;; TODO(oskarth): Refactor to shorter form + [discover-components/title + :t/dapps + :t/all + #(re-frame/dispatch [:navigate-to :discover-all-dapps])] + (if (seq dapps) + ;; TODO(oskarth): Make this carousel show more dapps at a time + [carousel/carousel {:page-style styles/carousel-page-style + :count (count dapps)} + (for [[_ dapp] dapps] + ^{:key (str (:name dapp))} + [react/view styles/dapp-preview-content + [dapp-item dapp]])] + [react/text (i18n/label :t/none)])]) + +(defview main [] + (letsubs [all-dapps [:get-all-dapps] + tabs-hidden? [:tabs-hidden?]] + (when (seq all-dapps) + [react/view styles/discover-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])]]]]))) + diff --git a/src/status_im/ui/screens/discover/styles.cljs b/src/status_im/ui/screens/discover/styles.cljs index 92cf997610..f217975c31 100644 --- a/src/status_im/ui/screens/discover/styles.cljs +++ b/src/status_im/ui/screens/discover/styles.cljs @@ -127,6 +127,68 @@ {:background-color :white :padding-left 16}) +;; All dapps + +(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 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 dapps-list-item-second-row + {:flex 1 + :padding 4 + :margin 4}) + +(def dapps-list-item-name-container + {:background-color styles/color-white + :flex-direction :column + :align-items :center}) + +(def dapps-list-item-name + {:margin-left 7 + :padding 4 + :margin 4 + :color styles/text1-color + :font-size 12}) + +(def dapps-list-item-avatar-container + {:flex-direction :column + :padding 4 + :margin 4 + :align-items :center}) + +(def dapp-preview-container + {:background-color styles/color-white + :margin-top 16}) + +(def dapp-preview-content + {:border-radius 4 + :padding-top 4 + :padding-left 4 + :margin-top 2 + :margin-bottom 4 + :margin-right 2 + :background-color styles/color-white + :size 10}) + ;; Discover tag (def discover-tag-toolbar @@ -225,4 +287,4 @@ {:color styles/color-gray-transparent :font-weight :bold :font-size 16 - :margin-left 5}) \ No newline at end of file + :margin-left 5}) diff --git a/src/status_im/ui/screens/discover/subs.cljs b/src/status_im/ui/screens/discover/subs.cljs index 9d3d5fd7af..e5976c7b95 100644 --- a/src/status_im/ui/screens/discover/subs.cljs +++ b/src/status_im/ui/screens/discover/subs.cljs @@ -49,3 +49,12 @@ current-tag (:current-tag db) tags (:discover-search-tags db)] (get-discoveries-by-tags discoveries current-tag tags)))) + +(reg-sub :get-all-dapps + (fn [db] + (let [dapp? (->> (get-in db [:group/contact-groups "dapps" :contacts]) + (map :identity) + set)] + (->> (:contacts/contacts db) + (filter #(-> % key dapp?)) + (into {}))))) diff --git a/src/status_im/ui/screens/discover/views.cljs b/src/status_im/ui/screens/discover/views.cljs index a2e083f760..52476db94b 100644 --- a/src/status_im/ui/screens/discover/views.cljs +++ b/src/status_im/ui/screens/discover/views.cljs @@ -10,6 +10,7 @@ [status-im.components.drawer.view :as drawer] [status-im.components.carousel.carousel :as carousel] [status-im.ui.screens.discover.components.views :as components] + [status-im.ui.screens.discover.all-dapps.views :as all-dapps] [status-im.utils.platform :as platform] [status-im.i18n :as i18n] [status-im.ui.screens.discover.styles :as styles] @@ -137,7 +138,8 @@ search-text [:get-in [:toolbar-search :text]] contacts [:get-contacts] current-account [:get-current-account] - discoveries [:get-recent-discoveries]] + discoveries [:get-recent-discoveries] + all-dapps [:get-all-dapps]] [react/view styles/discover-container [toolbar-view (and current-view? (= show-search :discover)) search-text] @@ -146,5 +148,6 @@ [recent-statuses-preview current-account discoveries] [popular-hashtags-preview {:contacts contacts :current-account current-account}] + [all-dapps/preview all-dapps] [public-chats-teaser]] [empty-discoveries])])) diff --git a/src/status_im/ui/screens/views.cljs b/src/status_im/ui/screens/views.cljs index e61dc298f0..b36d214474 100644 --- a/src/status_im/ui/screens/views.cljs +++ b/src/status_im/ui/screens/views.cljs @@ -46,6 +46,7 @@ [status-im.ui.screens.discover.search-results.views :as discover-search] [status-im.ui.screens.discover.recent-statuses.views :as discover-recent] + [status-im.ui.screens.discover.all-dapps.views :as discover-all-dapps] [status-im.ui.screens.discover.popular-hashtags.views :as discover-popular] [status-im.ui.screens.network-settings.views :refer [network-settings]] [status-im.ui.screens.network-settings.add-rpc.views :refer [add-rpc-url]] @@ -95,6 +96,7 @@ :discover-all-recent discover-recent/discover-all-recent :discover-all-hashtags discover-popular/discover-all-hashtags :discover-search-results discover-search/discover-search-results + :discover-all-dapps discover-all-dapps/main :profile-photo-capture profile-photo-capture :accounts accounts :login login