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

Recent statuses pixel perfect must haves (+ popular bonus) 

- fix bug where toolbar wasn't ready with zero statuses
- fix toolbar center and margin to top
- fix grey background missing
- fix top status text margin from the top of the card
- fix separation lines between statuses edge to edge
- margin with chat icon to bottom 12

Also apply same to popular hashtags for consistency
This commit is contained in:
Oskar Thorén 2017-10-17 12:00:06 +02:00
parent 0564551782
commit 86b8a38f08
4 changed files with 64 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -75,3 +75,35 @@
(chat-button whisper-id))]
(when show-separator?
[react/view styles/separator])]])))
;; NOTE(oskarth): Should possibly be merged with discover-list-item-full, but
;; there are too many differences between preview item (main screen) and full
;; screen, so safer to modify custom styles here without risking regressions.
(defview discover-list-item-full [{:keys [message show-separator? current-account]}]
(letsubs [{contact-name :name
contact-photo-path :photo-path} [:get-in [:contacts/contacts (:whisper-id message)]]]
(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)]
[react/view
[react/view styles/discover-list-item-full ;; XXX: Custom style here
[view/status-view {:id message-id
:style styles/discover-item-status-text
:status status}]
[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 24}]]
[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?
(chat-button whisper-id))]]
(when show-separator?
[react/view styles/separator])])))

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

@ -28,7 +28,7 @@
(letsubs [current-account [:get-current-account]
popular-tags [:get-popular-tags 10]
{:keys [discoveries]} [:get-popular-discoveries 10]] ;uses the tags passed via :discover-search-tags state
[react/view styles/discover-container
[react/view styles/all-recent-container
[toolbar/toolbar2 {}
toolbar/default-nav-back
[toolbar/content-title (i18n/label :t/popular-tags)]]
@ -39,6 +39,7 @@
(let [discoveries (map-indexed vector discoveries)]
(for [[i {:keys [message-id] :as message}] discoveries]
^{:key (str "message-hashtag-" message-id)}
[components/discover-list-item {:message message
:show-separator? (not= (inc i) (count discoveries))
:current-account current-account}]))]]]]))
[components/discover-list-item-full
{:message message
:show-separator? (not= (inc i) (count discoveries))
:current-account current-account}]))]]]]))

20
src/status_im/ui/screens/discover/recent_statuses/views.cljs
View File

@ -3,23 +3,25 @@
(:require [status-im.components.react :as react]
[status-im.ui.screens.discover.components.views :as components]
[status-im.ui.screens.discover.styles :as styles]
[status-im.components.toolbar-new.view :as toolbar]))
[status-im.components.toolbar-new.view :as toolbar]
[status-im.i18n :as i18n]))
(defview discover-all-recent []
(letsubs [discoveries [:get-recent-discoveries]
tabs-hidden? [:tabs-hidden?]
current-account [:get-current-account]]
(when (seq discoveries)
[react/view styles/discover-container
[toolbar/toolbar2 {}
toolbar/default-nav-back
[react/view {} [react/text {} "All recent"]]]
[react/view styles/all-recent-container
[toolbar/toolbar2 {}
toolbar/default-nav-back
[toolbar/content-title (i18n/label :t/recent)]]
(when (seq discoveries)
[react/scroll-view (styles/list-container tabs-hidden?)
[react/view styles/status-list-outer
[react/view styles/status-list-inner
(let [discoveries (map-indexed vector discoveries)]
(for [[i {:keys [message-id] :as message}] discoveries]
^{:key (str "message-recent-" message-id)}
[components/discover-list-item {:message message
:show-separator? (not= (inc i) (count discoveries))
:current-account current-account}]))]]]])))
[components/discover-list-item-full
{:message message
:show-separator? (not= (inc i) (count discoveries))
:current-account current-account}]))]]])]))

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

@ -58,21 +58,28 @@
:color styles/color-black
:font-size 14})
;; TODO(oskarth): These rules should be pulled out into more custom styles, not
;; generic enough for discover-list-item
(def discover-list-item
{:flex-direction :column
:padding-bottom 16
:margin-right 10
:top 1})
(def discover-list-item-full
{:flex-direction :column
:margin-top 16
:margin-horizontal 16
:margin-bottom 12})
;; TODO(oskarth): Style too specific for full view, refactor
(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})
@ -114,7 +121,7 @@
(def separator
{:background-color styles/color-gray11
:height 2
:height 4
:margin-top 2
:margin-bottom 2})
@ -166,7 +173,7 @@
(def status-list-inner
{:background-color :white
:padding-left 16})
:margin-top 4})
;; All dapps
@ -432,3 +439,8 @@
(def empty-section-body-text
{:margin-top 2
:font-size 14})
;; TODO(oskarth): Copy of existing style, generalize - discover-container overloaded
(def all-recent-container all-dapps-container)
(def all-popular-container all-dapps-container)