From 5f35ff7edafb2d4551fd0cbe6d75a1bb2f406652 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oskar=20Thor=C3=A9n?= Date: Wed, 11 Oct 2017 14:06:06 +0200 Subject: [PATCH] Discover: refactor platform styles All styles belonging to screen/component should be in styles.cljs. This commit moves platform specific styles to appropriate place. Also fixes misc weird ns imports. Also moves colors to common ns (FUBAR). --- src/status_im/android/platform.cljs | 6 ++ src/status_im/components/styles.cljs | 8 ++ src/status_im/ios/platform.cljs | 6 ++ .../ui/screens/discover/components/views.cljs | 50 +++++------ .../screens/discover/dapp_details/views.cljs | 25 +++--- .../discover/popular_hashtags/views.cljs | 18 ++-- .../discover/recent_statuses/views.cljs | 18 ++-- src/status_im/ui/screens/discover/styles.cljs | 89 +++++++++++++------ src/status_im/ui/screens/discover/views.cljs | 47 +++++----- 9 files changed, 157 insertions(+), 110 deletions(-) diff --git a/src/status_im/android/platform.cljs b/src/status_im/android/platform.cljs index 5f3488f5b1..bf337f2f44 100644 --- a/src/status_im/android/platform.cljs +++ b/src/status_im/android/platform.cljs @@ -2,6 +2,12 @@ (:require [status-im.components.styles :as styles] [status-im.react-native.js-dependencies :as rn-dependencies])) +;; DEPRECATION NOTICE +;; +;; NOTE(oskarth): These component-styles are legacy and should be removed, +;; please don't add or modify these styles. Instead, use defstyle macro to +;; inline platform-specific styles in the appropriate namespace + (def component-styles {:status-bar {:default {:height 25 :bar-style "dark-content" diff --git a/src/status_im/components/styles.cljs b/src/status_im/components/styles.cljs index 17f80bfcd8..2ff809c6e9 100644 --- a/src/status_im/components/styles.cljs +++ b/src/status_im/components/styles.cljs @@ -1,5 +1,7 @@ (ns status-im.components.styles) +;; TODO(oskarth): Make a palette of all these colors + (def color-transparent "transparent") (def color-blue "#7099e6") (def color-blue2 "#5b6dee") @@ -26,6 +28,7 @@ (def color-gray8 "#6E777E") (def color-gray9 "#E9EBEC") (def color-gray10 "#9BA3A8") +(def color-gray11 "#EEF1F5") (def color-dark "#49545d") (def color-steel "#838b91") (def color-white "white") @@ -42,12 +45,17 @@ (def color-light-blue3 "#a0bcf0") (def color-light-blue4 "#f1f4f5") (def color-light-blue5 "#d9dff9") +(def color-light-blue6 "#e3ebfa") +(def color-light-blue7 "#dcd6fb") (def color-dark-blue-1 "#252c4a") (def color-dark-blue-2 "#1f253f") (def color-dark-blue-3 "#191f37") +(def color-dark-blue-4 "#6e00e4") (def color-light-gray "#EEF2F5") (def color-light-gray2 "#ececf0") (def color-light-gray3 "#e8ebec") +(def color-light-gray4 "#eff2f3") +(def color-light-gray5 "#D7D7D7") (def color-red "red") (def color-red-2 "#d84b4b") (def color-red-3 "#FFC1BD") diff --git a/src/status_im/ios/platform.cljs b/src/status_im/ios/platform.cljs index 59ef5893fb..f2fec28c52 100644 --- a/src/status_im/ios/platform.cljs +++ b/src/status_im/ios/platform.cljs @@ -4,6 +4,12 @@ [status-im.utils.utils :as utils] [status-im.react-native.js-dependencies :as rn-dependencies])) +;; DEPRECATION NOTICE +;; +;; NOTE(oskarth): These component-styles are legacy and should be removed, +;; please don't add or modify these styles. Instead, use defstyle macro to +;; inline platform-specific styles in the appropriate namespace + (def component-styles {:status-bar {:default {:height 20 :bar-style "default" diff --git a/src/status_im/ui/screens/discover/components/views.cljs b/src/status_im/ui/screens/discover/components/views.cljs index 14a4f84fa1..5dd875bade 100644 --- a/src/status_im/ui/screens/discover/components/views.cljs +++ b/src/status_im/ui/screens/discover/components/views.cljs @@ -3,35 +3,35 @@ (:require [re-frame.core :as re-frame] [clojure.string :as str] [status-im.components.react :as react] - [status-im.ui.screens.discover.styles :as st] + [status-im.ui.screens.discover.styles :as styles] [status-im.components.status-view.view :as view] [status-im.utils.gfycat.core :as gfycat] [status-im.utils.identicon :as identicon] - [status-im.components.chat-icon.screen :as ci] - [status-im.utils.platform :as platform] - [status-im.components.icons.vector-icons :as vi] + [status-im.components.chat-icon.screen :as chat-icon] + [status-im.components.icons.vector-icons :as vector-icons] [status-im.i18n :as i18n])) (defn title [label-kw action-kw action-fn active?] - [react/view st/title - [react/text {:style (get-in platform/platform-specific [:component-styles :discover :subtitle]) - :uppercase? (get-in platform/platform-specific [:discover :uppercase-subtitles?]) + [react/view styles/title + [react/text {:style styles/title-text :font :medium} (i18n/label label-kw)] [react/touchable-highlight {:on-press action-fn} [react/view {} - [react/text {:style (st/title-action-text active?)} + ;; NOTE(oskarth): text-transform to uppercase not supported as RN style + ;; https://github.com/facebook/react-native/issues/2088 + [react/text {:style (styles/title-action-text active?) + :uppercase? (:uppercase? styles/subtitle-text-augment)} (i18n/label action-kw)]]]]) (defn tags-menu [tags] - [react/view st/tag-title-container + [react/view styles/tag-title-container (for [tag (take 3 tags)] ^{:key (str "tag-" tag)} [react/touchable-highlight {:on-press #(do (re-frame/dispatch [:set :discover-search-tags [tag]]) (re-frame/dispatch [:navigate-to :discover-search-results]))} - [react/view (merge (get-in platform/platform-specific [:component-styles :discover :tag]) - {:margin-left 2 :margin-right 2}) - [react/text {:style st/tag-title + [react/view styles/tag-view + [react/text {:style styles/tag-title :font :default} (str " #" tag)]]])]) @@ -56,28 +56,26 @@ {account-photo-path :photo-path account-address :public-key account-name :name} current-account - me? (= account-address whisper-id) - item-style (get-in platform/platform-specific [:component-styles :discover :item])] + me? (= account-address whisper-id)] [react/view - [react/view st/popular-list-item + [react/view styles/popular-list-item [view/status-view {:id message-id - :style (:status-text item-style) + :style styles/discover-item-status-text :status status}] - [react/view st/popular-list-item-second-row - [react/view st/popular-list-item-name-container - [react/view (merge st/popular-list-item-avatar-container - (:icon item-style)) - [ci/chat-icon + [react/view styles/popular-list-item-second-row + [react/view styles/popular-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 st/popular-list-item-name + [react/text {:style styles/popular-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 st/popular-list-chat-action - [vi/icon :icons/chats {:color "rgb(110, 0, 228)"}] - [react/text {:style st/popular-list-chat-action-text} (i18n/label :t/chat)]]])] + [react/view styles/popular-list-chat-action + [vector-icons/icon :icons/chats {:color "rgb(110, 0, 228)"}] + [react/text {:style styles/popular-list-chat-action-text} (i18n/label :t/chat)]]])] (when show-separator? - [react/view st/separator])]]))) + [react/view styles/separator])]]))) diff --git a/src/status_im/ui/screens/discover/dapp_details/views.cljs b/src/status_im/ui/screens/discover/dapp_details/views.cljs index 90cf0a7d12..4e505ae664 100644 --- a/src/status_im/ui/screens/discover/dapp_details/views.cljs +++ b/src/status_im/ui/screens/discover/dapp_details/views.cljs @@ -1,17 +1,14 @@ -(ns ^{:doc "todo" - :author "Goran Jovic"} -status-im.ui.screens.discover.dapp-details.views +(ns status-im.ui.screens.discover.dapp-details.views (:require-macros [status-im.utils.views :refer [defview letsubs]]) - (:require - [status-im.components.react :as react] - [status-im.ui.screens.discover.components.views :as components] - [status-im.components.chat-icon.screen :as chat-icon.screen] - [status-im.components.common.common :as common] - [status-im.components.icons.vector-icons :as vector-icons] - [status-im.components.toolbar-new.view :as toolbar] - [status-im.ui.screens.discover.styles :as styles] - [status-im.i18n :as i18n] - [re-frame.core :as re-frame])) + (:require [status-im.components.react :as react] + [status-im.ui.screens.discover.components.views :as components] + [status-im.components.chat-icon.screen :as chat-icon.screen] + [status-im.components.common.common :as common] + [status-im.components.icons.vector-icons :as vector-icons] + [status-im.components.toolbar-new.view :as toolbar] + [status-im.ui.screens.discover.styles :as styles] + [status-im.i18n :as i18n] + [re-frame.core :as re-frame])) (defn section [title content] [react/view styles/dapp-details-section-container @@ -44,4 +41,4 @@ status-im.ui.screens.discover.dapp-details.views :style styles/dapp-details-action-name-text} (i18n/label :t/open)]]]]] [section (i18n/label :t/description) (:description dapp "Description goes here")] [common/separator] - [section (i18n/label :t/url) dapp-url]]])) \ No newline at end of file + [section (i18n/label :t/url) dapp-url]]])) 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 459e66f7ab..6dc40b6f5b 100644 --- a/src/status_im/ui/screens/discover/popular_hashtags/views.cljs +++ b/src/status_im/ui/screens/discover/popular_hashtags/views.cljs @@ -1,24 +1,22 @@ (ns status-im.ui.screens.discover.popular-hashtags.views (:require-macros [status-im.utils.views :refer [defview letsubs]]) - (:require - [status-im.components.react :as react] - [status-im.ui.screens.discover.styles :as st] - [status-im.utils.listview :refer [to-datasource]] - [status-im.ui.screens.discover.components.views :as components] - [status-im.components.toolbar-new.view :as toolbar])) + (:require [status-im.components.react :as react] + [status-im.ui.screens.discover.styles :as styles] + [status-im.ui.screens.discover.components.views :as components] + [status-im.components.toolbar-new.view :as toolbar])) (defview discover-all-hashtags [] (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 st/discover-container + [react/view styles/discover-container [toolbar/toolbar2 {} toolbar/default-nav-back [react/view {} [react/text {} "All hashtags"]]] [components/tags-menu (map :name popular-tags)] - [react/scroll-view st/list-container - [react/view st/recent-container - [react/view st/recent-list + [react/scroll-view styles/list-container + [react/view styles/recent-container + [react/view styles/recent-list (let [discoveries (map-indexed vector discoveries)] (for [[i {:keys [message-id] :as message}] discoveries] ^{:key (str "message-hashtag-" message-id)} 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 f0ad7a450d..daf41bf012 100644 --- a/src/status_im/ui/screens/discover/recent_statuses/views.cljs +++ b/src/status_im/ui/screens/discover/recent_statuses/views.cljs @@ -1,24 +1,22 @@ (ns status-im.ui.screens.discover.recent-statuses.views (:require-macros [status-im.utils.views :refer [defview letsubs]]) - (:require - [status-im.components.react :as react] - [status-im.ui.screens.discover.styles :as st] - [status-im.utils.listview :refer [to-datasource]] - [status-im.ui.screens.discover.components.views :as components] - [status-im.components.toolbar-new.view :as toolbar])) + (: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])) (defview discover-all-recent [] (letsubs [discoveries [:get-recent-discoveries] tabs-hidden? [:tabs-hidden?] current-account [:get-current-account]] (when (seq discoveries) - [react/view st/discover-container + [react/view styles/discover-container [toolbar/toolbar2 {} toolbar/default-nav-back [react/view {} [react/text {} "All recent"]]] - [react/scroll-view (st/list-container tabs-hidden?) - [react/view st/recent-container - [react/view st/recent-list + [react/scroll-view (styles/list-container tabs-hidden?) + [react/view styles/recent-container + [react/view styles/recent-list (let [discoveries (map-indexed vector discoveries)] (for [[i {:keys [message-id] :as message}] discoveries] ^{:key (str "message-recent-" message-id)} diff --git a/src/status_im/ui/screens/discover/styles.cljs b/src/status_im/ui/screens/discover/styles.cljs index d9f16e1e23..f818eee2c9 100644 --- a/src/status_im/ui/screens/discover/styles.cljs +++ b/src/status_im/ui/screens/discover/styles.cljs @@ -1,15 +1,13 @@ (ns status-im.ui.screens.discover.styles - (:require-macros [status-im.utils.styles :refer [defnstyle]]) + (:require-macros [status-im.utils.styles :refer [defstyle]]) (:require [status-im.components.styles :as styles] - [status-im.components.toolbar.styles :refer [toolbar-background2]] - [status-im.components.tabs.styles :as tabs-st] - [status-im.utils.platform :as p])) + [status-im.components.toolbar.styles :refer [toolbar-background2]])) ;; Common (def row-separator {:border-bottom-width 1 - :border-bottom-color "#eff2f3"}) + :border-bottom-color styles/color-light-gray4}) (def row {:flex-direction :row @@ -29,6 +27,44 @@ :flex-direction :row :justify-content :space-between}) +(defstyle title-text + {:ios {:color styles/color-steel + :font-size 13 + :letter-spacing 1} + :android {:color styles/color-gray2 + :font-size 14}}) + +;; NOTE(oskarth): Hacky use of defstyle to get +;; platform specific styles in place where they belong +(defstyle subtitle-text-augment + {:ios {:uppercase? false} + :android {:uppercase? true}}) + +(defstyle tag-view + {:margin-horizontal 2 + :ios {:flex-direction :column + :background-color styles/color-light-blue6 + :border-radius 4 + :border-width 1 + :border-color styles/color-light-blue6 + :padding 6} + :android {:flex-direction :column + :background-color styles/color-light-blue6 + :border-radius 5 + :padding 4}}) + +(defstyle discover-item-status-text + {:ios {:font-size 14 + :letter-spacing -0.1} + :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}}) + ;; Popular (def popular-container @@ -53,7 +89,7 @@ :justify-content :center}) (def tag-count - {:color "#838c93" + {:color styles/color-gray :font-size 12 :padding-right 6 :padding-bottom 2 @@ -62,28 +98,34 @@ (def tag-count-container {:flex 0.2 - :flex-direction "column" - :align-items "flex-end" + :flex-direction :column + :align-items :flex-end :padding-top 6 :padding-right 9}) (def separator - {:background-color "rgb(238, 241, 245)" + {:background-color styles/color-gray11 :height 2 :margin-top 2 :margin-bottom 2}) ;; Popular list item -(def popular-list-container +(defstyle popular-list-container {:flex 1 :background-color :white :padding-top 18 :padding-left 16 - }) + :ios {:border-radius 3 + :border-width 1 + :border-color styles/color-light-gray5} + :android {:border-radius 4 + :margin-top 2 + :margin-bottom 4 + :margin-right 2}}) (def popular-list-item - {:flex-direction "column" + {:flex-direction :column :padding-bottom 16 :margin-right 10 :top 1}) @@ -103,20 +145,17 @@ (def popular-list-item-name {:margin-left 7 - :color "black" + :color styles/color-black :font-size 12}) -(def popular-list-item-avatar-container - {:flex-direction "column"}) - (def popular-list-chat-action - {:background-color "rgb(220, 214, 251)" + {:background-color styles/color-light-blue7 :flex-direction :row :border-radius 5 :padding 4}) (def popular-list-chat-action-text - {:color "rgb(110, 0, 228)"}) + {:color styles/color-dark-blue-4}) ;; discover_recent @@ -163,7 +202,7 @@ :color styles/text1-color :font-size 12}) -(def dapps-list-item-avatar-container +(defstyle dapps-list-item-avatar-container {:flex-direction :column :padding 4 :margin 4 @@ -189,7 +228,7 @@ ;; Discover tag (def discover-tag-toolbar - {:border-bottom-color "#D7D7D7" + {:border-bottom-color styles/color-light-gray5 :border-bottom-width 1}) (def discover-tag-container @@ -198,14 +237,14 @@ (def tag-title-scroll {:flex 1 - :alignItems "center" - :justifyContent "center"}) + :alignItems :center + :justifyContent :center}) (def tag-title-container {:flex 0.2 - :alignItems "center" - :justifyContent "center" - :flex-direction "row"}) + :alignItems :center + :justifyContent :center + :flex-direction :row}) (def tag-title {:color styles/color-blue diff --git a/src/status_im/ui/screens/discover/views.cljs b/src/status_im/ui/screens/discover/views.cljs index 513e2cada3..53ca59035c 100644 --- a/src/status_im/ui/screens/discover/views.cljs +++ b/src/status_im/ui/screens/discover/views.cljs @@ -1,22 +1,20 @@ (ns status-im.ui.screens.discover.views (:require-macros [status-im.utils.views :refer [defview letsubs]]) - (:require - [re-frame.core :as re-frame] - [clojure.string :as str] - [status-im.components.react :as react] - [status-im.components.icons.vector-icons :as vi] - [status-im.components.toolbar-new.view :as toolbar] - [status-im.components.toolbar-new.actions :as act] - [status-im.components.drawer.view :as drawer] - [status-im.components.carousel.carousel :as carousel] - [status-im.ui.screens.discover.components.views :as components] - [status-im.ui.screens.discover.all-dapps.views :as all-dapps] - [status-im.utils.platform :as platform] - [status-im.i18n :as i18n] - [status-im.ui.screens.discover.styles :as styles] - [status-im.ui.screens.contacts.styles :as contacts-st] - [status-im.components.list.views :as components.list] - [status-im.react-native.resources :as resources])) + (:require [re-frame.core :as re-frame] + [clojure.string :as string] + [status-im.components.react :as react] + [status-im.components.icons.vector-icons :as vector-icons] + [status-im.components.toolbar-new.view :as toolbar] + [status-im.components.toolbar-new.actions :as actions] + [status-im.components.drawer.view :as drawer] + [status-im.components.carousel.carousel :as carousel] + [status-im.ui.screens.discover.components.views :as components] + [status-im.ui.screens.discover.all-dapps.views :as all-dapps] + [status-im.i18n :as i18n] + [status-im.ui.screens.discover.styles :as styles] + [status-im.ui.screens.contacts.styles :as contacts-st] + [status-im.components.list.views :as list] + [status-im.react-native.resources :as resources])) (defn empty-section [image-kw title-kw body-kw] [react/view styles/empty-section-container @@ -30,7 +28,7 @@ (i18n/label body-kw)]]]) (defn get-hashtags [status] - (let [hashtags (map #(str/lower-case (str/replace % #"#" "")) (re-seq #"[^ !?,;:.]+" status))] + (let [hashtags (map #(string/lower-case (string/replace % #"#" "")) (re-seq #"[^ !?,;:.]+" status))] (or hashtags []))) (defn toolbar-view [show-search? search-text] @@ -40,9 +38,9 @@ :search-key :discover :title (i18n/label :t/discover) :search-placeholder (i18n/label :t/search-tags) - :nav-action (act/hamburger drawer/open-drawer!) + :nav-action (actions/hamburger drawer/open-drawer!) :on-search-submit (fn [text] - (when-not (str/blank? text) + (when-not (string/blank? text) (let [hashtags (get-hashtags text)] ;; TODO (goranjovic) - refactor double dispatch to a single call (re-frame/dispatch [:set :discover-search-tags hashtags]) @@ -51,8 +49,7 @@ (defview top-status-for-popular-hashtag [{:keys [tag current-account]}] (letsubs [discoveries [:get-popular-discoveries 1 [tag]]] - [react/view (merge styles/popular-list-container - (get-in platform/platform-specific [:component-styles :discover :popular])) + [react/view styles/popular-list-container [react/view styles/row [react/view {} ;; TODO (goranjovic) - refactor double dispatch to a single call @@ -123,7 +120,7 @@ [react/view styles/public-chats-item-name-container ;; TODO(goranjovic) lightgray intentionally hardcoded while only a teaser ;; will be removed and properly styled when enabled - [vi/icon :icons/public {:color "lightgray"}] + [vector-icons/icon :icons/public {:color "lightgray"}] [react/text {:font :medium :style styles/public-chats-item-name-text} (:name item)]] @@ -134,8 +131,8 @@ (defn public-chats-teaser [] [react/view {} [components/title :t/public-chats :t/soon #() false] - [components.list/flat-list {:data public-chats-mock-data - :render-fn render-public-chats-item}]]) + [list/flat-list {:data public-chats-mock-data + :render-fn render-public-chats-item}]]) (defview discover [current-view?] (letsubs [show-search [:get-in [:toolbar-search :show]]