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

feature #1973 and #2042 - discover - dapp details screen connected to dapp carousel and all dapps screen

This commit is contained in:
Goran Jovic 2017-10-06 16:33:39 +02:00 committed by Roman Volosovskyi
parent 8b1bf510ef
commit ddc2bb3501
8 changed files with 134 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
resources/icons/open.svg Normal file
View File

@ -0,0 +1,4 @@
<svg >
<path fill="000000" d="M12,20 C16.418278,20 20,16.418278 20,12 C20,7.581722 16.418278,4 12,4 C7.581722,4 4,7.581722 4,12 C4,16.418278 7.581722,20 12,20 Z M12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 Z" id="Oval-7"></path>
<path fill="000000" d="M12,14 C13.1045695,14 14,13.1045695 14,12 C14,10.8954305 13.1045695,10 12,10 C10.8954305,10 10,10.8954305 10,12 C10,13.1045695 10.8954305,14 12,14 Z M12,16 C9.790861,16 8,14.209139 8,12 C8,9.790861 9.790861,8 12,8 C14.209139,8 16,9.790861 16,12 C16,14.209139 14.209139,16 12,16 Z" id="Oval-7"></path>
</svg >
Side by Side

After

Width:  |  Height:  |  Size: 660 B

1
src/status_im/components/icons/vector_icons.cljs
View File

@ -69,6 +69,7 @@
:icons/grab (slurp-svg "./resources/icons/grab.svg")
:icons/share (slurp-svg "./resources/icons/share.svg")
:icons/tooltip-triangle (slurp-svg "./resources/icons/tooltip-triangle.svg")
:icons/open (slurp-svg "./resources/icons/open.svg")
:icons/network (slurp-svg "./resources/icons/network.svg")})
(defn normalize-property-name [n]

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

@ -11,6 +11,9 @@
:search-for "Search for..."
:cancel "Cancel"
:next "Next"
:open "Open"
:description "Description"
:url "URL"
:type-a-message "Type a message..."
:type-a-command "Start typing a command..."
:error "Error"

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

@ -29,6 +29,7 @@
:selected-participants #{}
:discoveries {}
:discover-search-tags '()
:discover-current-dapp {}
:tags []
:sync-state :done
:wallet {}
@ -173,6 +174,7 @@
:chat/geolocation
:discoveries/discoveries
:discoveries/discover-search-tags
:discoveries/discover-current-dapp
:discoveries/tags
:discoveries/current-tag
:discoveries/request-discoveries-timer

15
src/status_im/ui/screens/discover/all_dapps/views.cljs
View File

@ -9,9 +9,15 @@
[status-im.ui.screens.discover.components.views :as discover-components]
[status-im.ui.screens.discover.styles :as styles]
[status-im.i18n :as i18n]
[status-im.components.toolbar-new.view :as toolbar]))
[status-im.components.toolbar-new.view :as toolbar]
[taoensso.timbre :as log]))
(defn navigate-to-dapp [dapp]
(do (re-frame/dispatch [:set :discover-current-dapp dapp])
(re-frame/dispatch [:navigate-to :discover-dapp-details])))
(defn render-dapp [{:keys [name photo-path dapp?] :as dapp}]
[react/touchable-highlight {:on-press #(navigate-to-dapp 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
@ -20,7 +26,7 @@
[react/text {:style styles/dapps-list-item-name
:font :medium
:number-of-lines 1}
name]]]])
name]]]]])
;; TODO(oskarth): Carousel task, possibly different subcomponent
(def dapp-item render-dapp)
@ -39,8 +45,9 @@
:count (count dapps)}
(for [[_ dapp] dapps]
^{:key (str (:name dapp))}
[react/view styles/dapp-preview-content
[dapp-item dapp]])]
[react/touchable-highlight {:on-press #(navigate-to-dapp dapp)}
[react/view styles/dapp-preview-content
[dapp-item dapp]]])]
[react/text (i18n/label :t/none)])])
(defview main []

47
src/status_im/ui/screens/discover/dapp_details/views.cljs Normal file
View File

@ -0,0 +1,47 @@
(ns ^{:doc "todo"
:author "Goran Jovic"}
status-im.ui.screens.discover.dapp-details.views
(:require-macros [status-im.utils.views :refer [defview letsubs]])
(:require
[status-im.components.react :as react]
[status-im.ui.screens.discover.components.views :as components]
[status-im.components.chat-icon.screen :as chat-icon.screen]
[status-im.components.common.common :as common]
[status-im.components.icons.vector-icons :as vector-icons]
[status-im.components.toolbar-new.view :as toolbar]
[status-im.ui.screens.discover.styles :as styles]
[status-im.i18n :as i18n]
[re-frame.core :as re-frame]))
(defn section [title content]
[react/view styles/dapp-details-section-container
[react/view styles/dapp-details-section-title-container
[react/text {:font :small
:style styles/dapp-details-section-title-text} title]]
[react/view styles/dapp-details-section-body-container
[react/text {:font :medium} content]]])
(defview dapp-details []
(letsubs [{:keys [photo-path name dapp-url] :as dapp} [:get :discover-current-dapp]]
[react/view styles/discover-container
[toolbar/toolbar2 {}
toolbar/default-nav-back
[react/view]]
[react/view styles/dapp-details-container
[react/view styles/dapp-details-header
[react/view styles/dapp-details-icon
[chat-icon.screen/chat-icon photo-path {:size 50}]]
[react/view styles/dapp-details-name-container
[react/text {:font :medium
:style styles/dapp-details-name-text} name]]]
[react/view styles/dapp-details-action-container
[react/view styles/dapp-details-action-icon-container
[vector-icons/icon :icons/open {:color :active}]]
[react/view styles/dapp-details-action-name-container
[react/touchable-highlight {:on-press #(re-frame/dispatch [:open-chat-with-contact dapp])}
[react/view
[react/text {:font :medium
:style styles/dapp-details-action-name-text} (i18n/label :t/open)]]]]]
[section (i18n/label :t/description) (:description dapp "Description goes here")]
[common/separator]
[section (i18n/label :t/url) dapp-url]]]))

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

@ -284,3 +284,66 @@
:font-weight :bold
:font-size 16
:margin-left 5})
(def dapp-details-container
{:flex-direction :column
:background-color styles/color-light-gray})
(def dapp-details-header
{:flex-direction :row
:justify-content :flex-start
:align-items :center
:height 80
:background-color styles/color-white})
(def dapp-details-icon
{:flex 0.15
:background-color styles/color-white
:padding-left 10})
(def dapp-details-name-container
{:flex 0.85
:background-color styles/color-white})
(def dapp-details-name-text
{:margin-left 10})
(def dapp-details-action-container
{:flex-direction :row
:margin-top 15
:margin-bottom 15})
(def dapp-details-action-icon-container
{:height 80
:flex 0.15
:justify-content :center
:align-items :center
:background-color styles/color-white})
(def dapp-details-action-name-container
{:height 80
:flex 0.85
:background-color styles/color-white
:flex-direction :row
:justify-content :flex-start
:align-items :center})
(def dapp-details-action-name-text
{:margin-left 10
:color styles/color-blue})
(def dapp-details-section-container
{:background-color styles/color-white})
(def dapp-details-section-title-container
{:background-color styles/color-white
:padding 10})
(def dapp-details-section-title-text
{:color styles/color-gray})
(def dapp-details-section-body-container
{:background-color styles/color-white
:padding-left 10
:padding-right 10})

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

@ -48,6 +48,8 @@
[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.discover.dapp-details.views :as discover-dapp-details]
[status-im.ui.screens.network-settings.views :refer [network-settings]]
[status-im.ui.screens.network-settings.add-rpc.views :refer [add-rpc-url]]
[status-im.ui.screens.network-settings.network-details.views :refer [network-details]]
@ -96,6 +98,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-dapp-details discover-dapp-details/dapp-details
:discover-all-dapps discover-all-dapps/main
:profile-photo-capture profile-photo-capture
:accounts accounts