status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Discover: Show all apps 

- Addresses https://github.com/status-im/status-react/issues/1972
- WIP carousel
- Not pixel perfect
This commit is contained in:
Oskar Thorén 2017-10-05 11:08:32 +02:00 committed by Roman Volosovskyi
parent 6e2e14dfea
commit 4c8935a16f
6 changed files with 143 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/status_im/translations/en.cljs
View File

@ -168,6 +168,7 @@
:public-chats "Public chats"
:soon "Soon"
:public-chat-user-count "{{count}} people"
:dapps "DApps"
;;settings
:settings "Settings"

64
src/status_im/ui/screens/discover/all_dapps/views.cljs Normal file
View File

@ -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])]]]])))

64
src/status_im/ui/screens/discover/styles.cljs
View File

@ -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})
:margin-left 5})

9
src/status_im/ui/screens/discover/subs.cljs
View File

@ -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 {})))))

5
src/status_im/ui/screens/discover/views.cljs
View File

@ -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])]))

2
src/status_im/ui/screens/views.cljs
View File

@ -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