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: work towards pixel perfection 

- Refactor: more consistent styles naming
- Align text next to icon
- Grey background whole discover
- Set background popular apps
- Fix margin-bottom for all-dapps
This commit is contained in:
Oskar Thorén 2017-10-11 19:26:29 +02:00
parent 030ceecc21
commit 1b7d2db71d
4 changed files with 42 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/status_im/ui/screens/discover/components/views.cljs
View File

@ -55,23 +55,24 @@
(let [{:keys [name photo-path whisper-id message-id status]} message
{account-photo-path :photo-path
account-address :public-key
account-name :name} current-account
me? (= account-address whisper-id)]
account-name :name} current-account
me? (= account-address whisper-id)]
[react/view
[react/view styles/popular-list-item
[react/view styles/discover-list-item
[view/status-view {:id message-id
:style styles/discover-item-status-text
:status status}]
[react/view styles/popular-list-item-second-row
[react/view styles/popular-list-item-name-container
[react/view styles/discover-list-item-second-row
[react/view styles/discover-list-item-name-container
[react/view styles/discover-list-item-avatar-container
[chat-icon/chat-icon
(display-image me? account-photo-path contact-photo-path photo-path whisper-id)
{:size 20}]]
[react/text {:style styles/popular-list-item-name
[react/text {:style styles/discover-list-item-name
:font :medium
:number-of-lines 1}
(display-name me? account-name contact-name name whisper-id)]]
(when-not me?
[react/touchable-highlight {:on-press #(re-frame/dispatch [:start-chat whisper-id])}
[react/view styles/popular-list-chat-action

1
src/status_im/ui/screens/discover/popular_hashtags/views.cljs
View File

@ -5,6 +5,7 @@
[status-im.ui.screens.discover.components.views :as components]
[status-im.components.toolbar-new.view :as toolbar]))
;; TOOD(oskarth): These styles should be either generic or popular, not recent-*
(defview discover-all-hashtags []
(letsubs [current-account [:get-current-account]
popular-tags [:get-popular-tags 10]

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

@ -59,13 +59,34 @@
:android {:line-height 22
:font-size 16}})
(defstyle discover-list-item-avatar-container
{:flex-direction :column
:ios {:padding-top 0
:bottom -4
:justify-content :flex-end}})
(def discover-list-item-name-container
{:flex 0.3
:flex-direction :row
:justify-content :flex-start
:align-items :center})
;; Popular
(def discover-list-item-name
{:margin-left 7
:color styles/color-black
:font-size 12})
(def discover-list-item
{:flex-direction :column
:padding-bottom 16
:margin-right 10
:top 1})
(def discover-list-item-second-row
{:flex 1
:flex-direction :row
:align-items :center
:justify-content :space-between
:margin-bottom 5
:padding-top 25})
(defstyle discover-list-item-avatar-container
{:flex-direction :column})
(def popular-container
{:background-color toolbar-background2})
@ -124,30 +145,6 @@
:margin-bottom 4
:margin-right 2}})
(def popular-list-item
{:flex-direction :column
:padding-bottom 16
:margin-right 10
:top 1})
(def popular-list-item-second-row
{:flex 1
:flex-direction :row
:align-items :center
:justify-content :space-between
:margin-bottom 5
:padding-top 25})
(def popular-list-item-name-container
{:flex 0.3
:flex-direction :row
:justify-content :flex-start})
(def popular-list-item-name
{:margin-left 7
:color styles/color-black
:font-size 12})
(def popular-list-chat-action
{:background-color styles/color-light-blue7
:flex-direction :row
@ -213,7 +210,8 @@
(def dapp-preview-container
{:background-color styles/color-white
:margin-top 16})
:margin-top 16
:margin-bottom 4})
(def dapp-preview-content
{:border-radius 4
@ -262,7 +260,7 @@
(def discover-container
{:flex 1
:background-color styles/color-white})
:background-color styles/color-light-gray})
(def list-container
{:flex 1})
@ -288,6 +286,9 @@
:margin-right 2
:background-color :white})
(def public-chats-container
{:background-color styles/color-white})
(def public-chats-item-container
{:flex-direction :row
:padding 3})

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

@ -129,7 +129,7 @@
(i18n/label :t/public-chat-user-count {:count (:count item)})]]]])
(defn public-chats-teaser []
[react/view {}
[react/view styles/public-chats-container
[components/title :t/public-chats :t/soon #() false]
[list/flat-list {:data public-chats-mock-data
:render-fn render-public-chats-item}]])