moved styles to separate file

src/syng_im/components/discovery/discovery.cljs

@@ -14,6 +14,7 @@
     [syng-im.components.discovery.discovery-popular :refer [discovery-popular]]
     [syng-im.components.discovery.discovery-recent :refer [discovery-recent]]
     [syng-im.resources :as res]
+    [syng-im.components.discovery.styles :as st]
     [syng-im.persistence.realm :as realm]))
 
 (def search-input (atom {:search "x"}))
@@ -27,30 +28,15 @@
 (defn title-content [showSearch]
   (if showSearch
     [text-input {:underlineColorAndroid "transparent"
-                 ;:value                 (:search @search-input)
+                 :style                 st/discovery-search-input
-                 :style                 {:flex       1
-                                         :marginLeft 18
-                                         :lineHeight 42
-                                         :fontSize   14
-                                         :fontFamily "Avenir-Roman"
-                                         :color      "#9CBFC0"}
                  :autoFocus             true
                  :placeholder           "Type your search tags here"
                  :onSubmitEditing       (fn [e]
                                           (let [search (aget e "nativeEvent" "text")
                                                 hashtags (get-hashtags search)]
                                             (dispatch [:broadcast-status search hashtags])))}]
-    [view {:style {;:flex 1
+    [view
-                   ;:flexDirection "row"
+     [text {:style st/discovery-title} "Discover"]]))
-                   ;:justifyContent "center"
-                   ;:alignSelf "stretch"
-                   ;:alignItems "center"
-                   }}
-     [text {:style {:color      "#000000de"
-                    :alignSelf "center"
-                    :textAlign  "center"
-                    :fontFamily "sans-serif"
-                    :fontSize   16}} "Discover"]]))
 
 (defn create-fake-discovery []
   (let [number (rand-int 999)]
@@ -69,8 +55,7 @@
     (fn []
       [view {:style {:flex            1
                      :backgroundColor "#eef2f5"}}
-       [toolbar {:style {:backgroundColor "#eef2f5"
+       [toolbar {:style st/discovery-toolbar
-                         :elevation 0}
                  :navigator navigator
                  :nav-action {:image {:source {:uri "icon_hamburger"}
                                       :style  {:width      16
@@ -86,19 +71,11 @@
                                           (reset! showSearch false)
                                           (reset! showSearch true)))}}]
        [scroll-view {:style {}}
-        [view {:style {:paddingLeft   30
+        [view {:style st/section-spacing}
-                       :paddingTop    15
+         [text {:style st/discovery-subtitle} "Popular tags"]]
-                       :paddingBottom 15}}
-         [text {:style {:color      "#8f838c93"
-                        :fontFamily "sans-serif-medium"
-                        :fontSize   14}} "Popular tags"]]
         [discovery-popular navigator]
-        [view {:style {:paddingLeft   30
+        [view {:style st/section-spacing}
-                       :paddingTop    15
+         [text {:style st/discovery-subtitle} "Recent"]]
-                       :paddingBottom 15}}
-         [text {:style {:color      "#8f838c93"
-                        :fontSize   14
-                        :fontFamily "sans-serif-medium"}} "Recent"]]
         [discovery-recent]]])))
   (comment
     (def page-width (aget (natal-shell.dimensions/get "window") "width"))

src/syng_im/components/discovery/discovery_popular.cljs

@@ -5,6 +5,7 @@
     [syng-im.components.react :refer [android?
                                       text]]
     [syng-im.components.carousel :refer [carousel]]
+    [syng-im.components.discovery.styles :as st]
     [syng-im.components.discovery.discovery-popular-list :refer [discovery-popular-list]]
     ))
 
@@ -15,12 +16,7 @@
   (let [popular-tags (subscribe [:get-popular-tags 3])]
     (log/debug "Got popular tags: " @popular-tags)
     (if (> (count @popular-tags) 0)
-      [carousel {:pageStyle {:borderRadius  1
+      [carousel {:pageStyle st/carousel-page-style
-                              :shadowColor   "black"
-                              :shadowRadius  1
-                              :shadowOpacity 0.8
-                              :elevation     2
-                              :marginBottom  10}
                   :pageWidth (- (page-width) 60)
                   :sneak     20}
        (for [tag @popular-tags]

src/syng_im/components/discovery/discovery_popular_list.cljs

@@ -10,6 +10,7 @@
                                       image]]
     [reagent.core :as r]
     [syng-im.components.realm :refer [list-view]]
+    [syng-im.components.discovery.styles :as st]
     [syng-im.utils.listview :refer [to-realm-datasource]]
     [syng-im.components.discovery.discovery-popular-list-item :refer [discovery-popular-list-item] ])
   )
@@ -21,52 +22,26 @@
 )
 
 (defn render-separator [sectionID, rowID, adjacentRowHighlighted]
-  (let [elem (r/as-element [view {:style {:borderBottomWidth 1
+  (let [elem (r/as-element [view {:style st/row-separator
-                               :borderBottomColor "#eff2f3"}
                                   :key rowID}])]
     elem))
 
 (defn discovery-popular-list [tag count navigator]
   (let [discoveries (subscribe [:get-discoveries-by-tag tag 3])]
     (log/debug "Got discoveries for tag (" tag "): " @discoveries)
-    [view {:style {:flex 1
+    [view {:style st/popular-list-container}
-                   :backgroundColor "white"
+     [view {:style st/row}
-                   :paddingLeft 10
+      [view {:style st/column}
-                   :paddingTop 16}}
+       [touchable-highlight {:onPress #(dispatch [:show-discovery-tag tag navigator :push])}
-     [view {:style {:flexDirection "row"
+        [view {:style st/tag-name-container}
-                    :backgroundColor "white"
+         [text {:style st/tag-name}
-                    :padding 0}}
-      [view {:style {
-                     :flexDirection "column"}}
-       [touchable-highlight {:onPress (fn [event]
-                                        (dispatch [:show-discovery-tag tag navigator :push]))}
-        [view {:style {:backgroundColor "#eef2f5"
-                     :borderRadius 5
-                     :padding 4}}
-         [text {:style {:color "#7099e6"
-                      :fontFamily "sans-serif-medium"
-                      :fontSize   14
-                      :paddingRight 5
-                      :paddingBottom 2
-                      :alignItems "center"
-                      :justifyContent "center"}}
         (str " #" (name tag))]]]]
-      [view {:style {:flex 0.2
+      [view {:style st/tag-count-container}
-                     :alignItems "flex-end"
+       [text {:style st/tag-count}
-                     :paddingTop 10
-                     :paddingRight 9}}
-       [text {:style {:color "#838c93"
-                      :fontFamily "sans-serif"
-                      :fontSize   12
-                      :paddingRight 5
-                      :paddingBottom 2
-                      :alignItems "center"
-                      :justifyContent "center"}}
         count]]]
      [list-view {:dataSource (to-realm-datasource @discoveries)
                  :enableEmptySections true
                  :renderRow render-row
                  :renderSeparator render-separator
-                 :style      {:backgroundColor "white"
+                 :style st/popular-list}]
-                              :paddingTop 13}}]
      ]))

src/syng_im/components/discovery/discovery_popular_list_item.cljs

@@ -6,34 +6,20 @@
                                       text
                                       image]]
     [syng-im.resources :as res]
+    [syng-im.components.discovery.styles :as st]
     [reagent.core :as r])
   )
 
 (defn discovery-popular-list-item [discovery]
   (log/debug discovery)
-  (r/as-element [view {:style {:flexDirection "row"
+  (r/as-element [view {:style st/popular-list-item}
-                               :paddingTop 10
+                 [view {:style st/popular-list-item-name-container}
-                               :paddingBottom 10}}
+                  [text {:style st/popular-list-item-name} (aget discovery "name")]
-                 [view {:style {:flex 0.8
+                  [text {:style st/popular-list-item-status
-                                :flexDirection "column"}}
-                  [text {:style {:color "black"
-                                 :fontFamily "sans-serif-medium"
-                                 :fontSize 14
-                                 :lineHeight 24}} (aget discovery "name")]
-                  [text {:style {:color "black"
-                                 :fontFamily "sans-serif"
-                                 :lineHeight 22
-                                 :fontSize 14}
                          :numberOfLines 2} (aget discovery "status")]
                   ]
-                 [view {:style {:flex 0.2
+                 [view {:style st/popular-list-item-avatar-container}
-                                :flexDirection "column"
+                  [image {:style st/popular-list-item-avatar
-                                :alignItems "center"
-                                :paddingTop 5}}
-                  [image {:style {:resizeMode "contain"
-                                  :borderRadius 150
-                                  :width 40
-                                  :height 40}
                           :source res/user-no-photo}]
                   ]
                  ]))

src/syng_im/components/discovery/discovery_recent.cljs

@@ -9,6 +9,7 @@
                                       view]]
     [syng-im.components.realm :refer [list-view]]
     [syng-im.utils.listview :refer [to-realm-datasource]]
+    [syng-im.components.discovery.styles :as st]
     [syng-im.components.discovery.discovery-popular-list-item :refer [discovery-popular-list-item]]
     [reagent.core :as r]))
 
@@ -19,8 +20,7 @@
   )
 
 (defn render-separator [sectionID, rowID, adjacentRowHighlighted]
-  (let [elem (r/as-element [view {:style {:borderBottomWidth 1
+  (let [elem (r/as-element [view {:style st/row-separator
-                                          :borderBottomColor "#eff2f3"}
                                   :key rowID}])]
     elem))
 
@@ -31,6 +31,5 @@
                 :enableEmptySections true
                 :renderRow  render-row
                 :renderSeparator render-separator
-                :style      {:backgroundColor "white"
+                :style st/recent-list}]
-                             :paddingLeft 15}}]
   ))

src/syng_im/components/discovery/discovery_tag.cljs

@@ -12,7 +12,8 @@
     [syng-im.components.toolbar :refer [toolbar]]
     [reagent.core :as r]
     [syng-im.components.discovery.discovery-popular-list-item :refer [discovery-popular-list-item]]
-    [syng-im.resources :as res]))
+    [syng-im.resources :as res]
+    [syng-im.components.discovery.styles :as st]))
 
 (defn render-row [row section-id row-id]
   (log/debug "discovery-tag-row: " row section-id row-id)
@@ -23,21 +24,13 @@
   ))
 
 (defn render-separator [sectionID, rowID, adjacentRowHighlighted]
-  (let [elem (r/as-element [view {:style {:borderBottomWidth 1
+  (let [elem (r/as-element [view {:style st/row-separator
-                                          :borderBottomColor "#eff2f3"}
                                   :key   rowID}])]
     elem))
 
 (defn title-content [tag]
-  [view {:style {:backgroundColor "#eef2f5"
+  [view {:style st/tag-title-container}
-                 :flexWrap :wrap
+   [text {:style st/tag-title}
-                 :borderRadius 5
-                 :padding 4}}
-   [text {:style {:color "#7099e6"
-                  :fontFamily "sans-serif-medium"
-                  :fontSize   14
-                  :paddingRight 5
-                  :paddingBottom 2}}
     (str " #" tag)]])
 
 (defn discovery-tag [{:keys [tag navigator]}]
@@ -47,18 +40,15 @@
     (fn []
       (let [items @discoveries
             datasource (to-realm-datasource items)]
-    [view {:style {:flex            1
+    [view {:style st/discovery-tag-container}
-                   :backgroundColor "#eef2f5"}}
      [toolbar {:navigator navigator
                :nav-action {:image {:source {:uri "icon_back"}
-                                    :style  {:width      8
+                                    :style  st/icon-back}
-                                             :height     14}}
                             :handler (fn [] (nav-pop navigator))}
                :title     "Add Participants"
                :content   (title-content @tag)
                :action    {:image {:source {:uri "icon_search"}
-                                   :style  {:width  17
+                                   :style  st/icon-search}
-                                            :height 17}}
                            :handler (fn []
                                       ())}}]
 
@@ -66,6 +56,5 @@
                  :enableEmptySections true
                  :renderRow  render-row
                  :renderSeparator render-separator
-                 :style      {:backgroundColor "white"
+                 :style      st/recent-list}]
-                              :paddingLeft 15}}]
      ]))))

src/syng_im/components/discovery/styles.cljs

@@ -0,0 +1,173 @@
+(ns syng-im.components.discovery.styles
+  (:require [syng-im.components.styles :refer [font
+                                               title-font
+                                               color-white
+                                               chat-background
+                                               online-color
+                                               selected-message-color
+                                               separator-color
+                                               text1-color
+                                               text2-color
+                                               toolbar-background1]]))
+
+;; common
+
+(def row-separator
+  {:borderBottomWidth 1
+   :borderBottomColor "#eff2f3"})
+
+(def row
+  {:flexDirection "row"})
+
+(def column
+  {:flexDirection "column"})
+
+;; discovery.cljs
+
+(def discovery-search-input
+  {:flex       1
+   :marginLeft 18
+   :lineHeight 42
+   :fontSize   14
+   :fontFamily "Avenir-Roman"
+   :color      "#9CBFC0"})
+
+(def discovery-title
+  {:color      "#000000de"
+   :alignSelf "center"
+   :textAlign  "center"
+   :fontFamily "sans-serif"
+   :fontSize   16})
+
+(def discovery-toolbar
+  {:backgroundColor "#eef2f5"
+   :elevation 0})
+
+(def discovery-subtitle
+  {:color      "#8f838c93"
+   :fontFamily "sans-serif-medium"
+   :fontSize   14})
+
+(def section-spacing
+  {:paddingLeft   30
+   :paddingTop    15
+   :paddingBottom 15})
+
+;; discovery_popular.cljs
+
+(def carousel-page-style
+  {:borderRadius  1
+   :shadowColor   "black"
+   :shadowRadius  1
+   :shadowOpacity 0.8
+   :elevation     2
+   :marginBottom  10})
+
+;; discovery_populat_list.cljs
+
+(def tag-name
+  {:color "#7099e6"
+   :fontFamily "sans-serif-medium"
+   :fontSize   14
+   :paddingRight 5
+   :paddingBottom 2
+   :alignItems "center"
+   :justifyContent "center"})
+
+(def tag-name-container
+  {:backgroundColor "#eef2f5"
+   :borderRadius 5
+   :padding 4})
+
+(def tag-count
+  {:color "#838c93"
+   :fontFamily "sans-serif"
+   :fontSize   12
+   :paddingRight 5
+   :paddingBottom 2
+   :alignItems "center"
+   :justifyContent "center"})
+
+(def tag-count-container
+  {:flex 0.2
+   :alignItems "flex-end"
+   :paddingTop 10
+   :paddingRight 9})
+
+(def popular-list-container
+  {:flex 1
+   :backgroundColor "white"
+   :paddingLeft 10
+   :paddingTop 16})
+
+(def popular-list
+  {:backgroundColor "white"
+   :paddingTop 13})
+
+;; discover_popular_list_item.cjls
+
+(def popular-list-item
+  {:flexDirection "row"
+   :paddingTop 10
+   :paddingBottom 10})
+
+(def popular-list-item-status
+  {:color "black"
+   :fontFamily "sans-serif"
+   :lineHeight 22
+   :fontSize 14})
+
+(def popular-list-item-name
+  {:color "black"
+   :fontFamily "sans-serif-medium"
+   :fontSize 14
+   :lineHeight 24})
+
+(def popular-list-item-name-container
+  {:flex 0.8
+   :flexDirection "column"})
+
+(def popular-list-item-avatar-container
+  {:flex 0.2
+   :flexDirection "column"
+   :alignItems "center"
+   :paddingTop 5})
+
+(def popular-list-item-avatar
+  {:resizeMode "contain"
+   :borderRadius 150
+   :width 40
+   :height 40})
+
+;; discovery_recent
+
+(def recent-list
+  {:backgroundColor "white"
+   :paddingLeft 15})
+
+;; discovery_tag
+
+(def discovery-tag-container
+  {:flex            1
+   :backgroundColor "#eef2f5"})
+
+(def tag-title
+  {:color "#7099e6"
+   :fontFamily "sans-serif-medium"
+   :fontSize   14
+   :paddingRight 5
+   :paddingBottom 2})
+
+(def tag-title-container
+  {:backgroundColor "#eef2f5"
+   :flexWrap :wrap
+   :borderRadius 5
+   :padding 4})
+
+(def icon-back
+  {:width      8
+   :height     14})
+
+(def icon-search
+  {:width  17
+   :height 17})