diff --git a/src/status_im/ui/screens/discover/components/views.cljs b/src/status_im/ui/screens/discover/components/views.cljs index de27315414..4bee7454a3 100644 --- a/src/status_im/ui/screens/discover/components/views.cljs +++ b/src/status_im/ui/screens/discover/components/views.cljs @@ -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])]))) 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 e6e4254315..e188af7a2b 100644 --- a/src/status_im/ui/screens/discover/popular_hashtags/views.cljs +++ b/src/status_im/ui/screens/discover/popular_hashtags/views.cljs @@ -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}]))]]]])) diff --git a/src/status_im/ui/screens/discover/recent_statuses/views.cljs b/src/status_im/ui/screens/discover/recent_statuses/views.cljs index f9ed39b4ff..5670623ef4 100644 --- a/src/status_im/ui/screens/discover/recent_statuses/views.cljs +++ b/src/status_im/ui/screens/discover/recent_statuses/views.cljs @@ -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}]))]]])])) diff --git a/src/status_im/ui/screens/discover/styles.cljs b/src/status_im/ui/screens/discover/styles.cljs index 6b85fd10a5..b3f68cf289 100644 --- a/src/status_im/ui/screens/discover/styles.cljs +++ b/src/status_im/ui/screens/discover/styles.cljs @@ -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) +