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

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).
This commit is contained in:
Oskar Thorén 2017-10-11 14:06:06 +02:00
parent dc192005b1
commit 5f35ff7eda
9 changed files with 157 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/status_im/android/platform.cljs
View File

@ -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"

8
src/status_im/components/styles.cljs
View File

@ -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")

6
src/status_im/ios/platform.cljs
View File

@ -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"

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

@ -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])]])))

25
src/status_im/ui/screens/discover/dapp_details/views.cljs
View File

@ -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]]]))
[section (i18n/label :t/url) dapp-url]]]))

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

@ -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)}

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

@ -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)}

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

@ -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

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

@ -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]]