From 1b7d2db71da2e87e5da804d95f680b84250957d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oskar=20Thor=C3=A9n?= Date: Wed, 11 Oct 2017 19:26:29 +0200 Subject: [PATCH] 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 --- .../ui/screens/discover/components/views.cljs | 13 ++-- .../discover/popular_hashtags/views.cljs | 1 + src/status_im/ui/screens/discover/styles.cljs | 65 ++++++++++--------- src/status_im/ui/screens/discover/views.cljs | 2 +- 4 files changed, 42 insertions(+), 39 deletions(-) diff --git a/src/status_im/ui/screens/discover/components/views.cljs b/src/status_im/ui/screens/discover/components/views.cljs index 5dd875bade..62825927d4 100644 --- a/src/status_im/ui/screens/discover/components/views.cljs +++ b/src/status_im/ui/screens/discover/components/views.cljs @@ -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 diff --git a/src/status_im/ui/screens/discover/popular_hashtags/views.cljs b/src/status_im/ui/screens/discover/popular_hashtags/views.cljs index 6dc40b6f5b..7ab63af4fc 100644 --- a/src/status_im/ui/screens/discover/popular_hashtags/views.cljs +++ b/src/status_im/ui/screens/discover/popular_hashtags/views.cljs @@ -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] diff --git a/src/status_im/ui/screens/discover/styles.cljs b/src/status_im/ui/screens/discover/styles.cljs index f818eee2c9..0ab9a623fa 100644 --- a/src/status_im/ui/screens/discover/styles.cljs +++ b/src/status_im/ui/screens/discover/styles.cljs @@ -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}) diff --git a/src/status_im/ui/screens/discover/views.cljs b/src/status_im/ui/screens/discover/views.cljs index 53ca59035c..a0cb48ae4a 100644 --- a/src/status_im/ui/screens/discover/views.cljs +++ b/src/status_im/ui/screens/discover/views.cljs @@ -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}]])