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: main screen pixel perfect progression 

- Fix icon size and remove badge numbers
- Preview: tighten up margins
- Hide horizontal scrollbar
- Padding for public chats
This commit is contained in:
Oskar Thorén 2017-10-13 14:04:43 +02:00
parent 990232782f
commit e17d3bc05e
2 changed files with 20 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,15 +20,12 @@
[react/view styles/dapps-list-item-second-row [react/view styles/dapps-list-item-second-row
[react/view styles/dapps-list-item-name-container [react/view styles/dapps-list-item-name-container
[react/view styles/dapps-list-item-avatar-container [react/view styles/dapps-list-item-avatar-container
[react/view (chat-icon/contact-icon-contacts-tab dapp)]] [react/view [chat-icon/contact-icon-view dapp {:size 80}]]]
[react/text {:style styles/dapps-list-item-name [react/text {:style styles/dapps-list-item-name
:font :medium :font :medium
:number-of-lines 1} :number-of-lines 1}
name]]]]]) name]]]]])
;; TODO(oskarth): Carousel task, possibly different subcomponent
(def dapp-item render-dapp)
;; TODO(oskarth): Move this to top level discover ns ;; TODO(oskarth): Move this to top level discover ns
(defn preview [dapps] (defn preview [dapps]
[react/view styles/dapp-preview-container [react/view styles/dapp-preview-container
@ -38,11 +35,12 @@
:t/all :t/all
#(re-frame/dispatch [:navigate-to :discover-all-dapps])] #(re-frame/dispatch [:navigate-to :discover-all-dapps])]
(if (seq dapps) (if (seq dapps)
;; TODO(oskarth): Too wide margins bug
[list/flat-list {:data (vals dapps) [list/flat-list {:data (vals dapps)
:render-fn render-dapp :render-fn render-dapp
:horizontal true :horizontal true
:content-container-style styles/all-dapps-flat-list}] :separator? false
:shows-horizontal-scroll-indicator false
:content-container-style styles/dapp-preview-flat-list}]
[react/text (i18n/label :t/none)])]) [react/text (i18n/label :t/none)])])
(defview main [] (defview main []

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

@ -167,7 +167,9 @@
(def all-dapps-flat-list-item (def all-dapps-flat-list-item
{:margin 10 {:margin 10
:width 100 :width 100
:height 100}) :height 140
:justify-content :center
:align-items :center})
(def dapps-list-item-second-row (def dapps-list-item-second-row
{:flex 1 {:flex 1
@ -200,15 +202,13 @@
:margin-top 16 :margin-top 16
:margin-bottom 4}) :margin-bottom 4})
(def dapp-preview-content (def dapp-preview-flat-list
{:border-radius 4 {:justify-content :center
:padding-top 4 :flex-direction :row
:padding-left 4 :flex-wrap :wrap
:margin-top 2 :margin-left 8
:margin-bottom 4 :margin-vertical 0
:margin-right 2 :background-color styles/color-white})
:background-color styles/color-white
:size 10})
;; Discover tag ;; Discover tag
@ -287,7 +287,7 @@
(def public-chats-item-container (def public-chats-item-container
{:flex-direction :row {:flex-direction :row
:padding 3}) :padding 16})
(def public-chats-icon-width-ratio (def public-chats-icon-width-ratio
0.15) 0.15)