From 3976ea6c70e4277359fc42d4f985b6e090853470 Mon Sep 17 00:00:00 2001 From: Adrian Tiberius Date: Sat, 7 May 2016 17:53:39 +0300 Subject: [PATCH] moved styles to separate file --- .../components/discovery/discovery.cljs | 41 +---- .../discovery/discovery_popular.cljs | 8 +- .../discovery/discovery_popular_list.cljs | 49 ++--- .../discovery_popular_list_item.cljs | 28 +-- .../discovery/discovery_recent.cljs | 7 +- .../components/discovery/discovery_tag.cljs | 29 +-- src/syng_im/components/discovery/styles.cljs | 173 ++++++++++++++++++ 7 files changed, 215 insertions(+), 120 deletions(-) create mode 100644 src/syng_im/components/discovery/styles.cljs diff --git a/src/syng_im/components/discovery/discovery.cljs b/src/syng_im/components/discovery/discovery.cljs index 7d57cb0a02..8536715102 100644 --- a/src/syng_im/components/discovery/discovery.cljs +++ b/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 {:flex 1 - :marginLeft 18 - :lineHeight 42 - :fontSize 14 - :fontFamily "Avenir-Roman" - :color "#9CBFC0"} + :style st/discovery-search-input :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 - ;:flexDirection "row" - ;:justifyContent "center" - ;:alignSelf "stretch" - ;:alignItems "center" - }} - [text {:style {:color "#000000de" - :alignSelf "center" - :textAlign "center" - :fontFamily "sans-serif" - :fontSize 16}} "Discover"]])) + [view + [text {:style st/discovery-title} "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" - :elevation 0} + [toolbar {:style st/discovery-toolbar :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 - :paddingTop 15 - :paddingBottom 15}} - [text {:style {:color "#8f838c93" - :fontFamily "sans-serif-medium" - :fontSize 14}} "Popular tags"]] + [view {:style st/section-spacing} + [text {:style st/discovery-subtitle} "Popular tags"]] [discovery-popular navigator] - [view {:style {:paddingLeft 30 - :paddingTop 15 - :paddingBottom 15}} - [text {:style {:color "#8f838c93" - :fontSize 14 - :fontFamily "sans-serif-medium"}} "Recent"]] + [view {:style st/section-spacing} + [text {:style st/discovery-subtitle} "Recent"]] [discovery-recent]]]))) (comment (def page-width (aget (natal-shell.dimensions/get "window") "width")) diff --git a/src/syng_im/components/discovery/discovery_popular.cljs b/src/syng_im/components/discovery/discovery_popular.cljs index 7e2b144e19..21b4fdab0a 100644 --- a/src/syng_im/components/discovery/discovery_popular.cljs +++ b/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 - :shadowColor "black" - :shadowRadius 1 - :shadowOpacity 0.8 - :elevation 2 - :marginBottom 10} + [carousel {:pageStyle st/carousel-page-style :pageWidth (- (page-width) 60) :sneak 20} (for [tag @popular-tags] diff --git a/src/syng_im/components/discovery/discovery_popular_list.cljs b/src/syng_im/components/discovery/discovery_popular_list.cljs index 32e88b536e..afdb5fd77c 100644 --- a/src/syng_im/components/discovery/discovery_popular_list.cljs +++ b/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 - :borderBottomColor "#eff2f3"} + (let [elem (r/as-element [view {:style st/row-separator :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 - :backgroundColor "white" - :paddingLeft 10 - :paddingTop 16}} - [view {:style {:flexDirection "row" - :backgroundColor "white" - :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"}} + [view {:style st/popular-list-container} + [view {:style st/row} + [view {:style st/column} + [touchable-highlight {:onPress #(dispatch [:show-discovery-tag tag navigator :push])} + [view {:style st/tag-name-container} + [text {:style st/tag-name} (str " #" (name tag))]]]] - [view {:style {:flex 0.2 - :alignItems "flex-end" - :paddingTop 10 - :paddingRight 9}} - [text {:style {:color "#838c93" - :fontFamily "sans-serif" - :fontSize 12 - :paddingRight 5 - :paddingBottom 2 - :alignItems "center" - :justifyContent "center"}} + [view {:style st/tag-count-container} + [text {:style st/tag-count} count]]] [list-view {:dataSource (to-realm-datasource @discoveries) :enableEmptySections true - :renderRow render-row + :renderRow render-row :renderSeparator render-separator - :style {:backgroundColor "white" - :paddingTop 13}}] + :style st/popular-list}] ])) diff --git a/src/syng_im/components/discovery/discovery_popular_list_item.cljs b/src/syng_im/components/discovery/discovery_popular_list_item.cljs index 86b11dc3d0..616fa9d7e2 100644 --- a/src/syng_im/components/discovery/discovery_popular_list_item.cljs +++ b/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" - :paddingTop 10 - :paddingBottom 10}} - [view {:style {:flex 0.8 - :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} + (r/as-element [view {:style st/popular-list-item} + [view {:style st/popular-list-item-name-container} + [text {:style st/popular-list-item-name} (aget discovery "name")] + [text {:style st/popular-list-item-status :numberOfLines 2} (aget discovery "status")] ] - [view {:style {:flex 0.2 - :flexDirection "column" - :alignItems "center" - :paddingTop 5}} - [image {:style {:resizeMode "contain" - :borderRadius 150 - :width 40 - :height 40} + [view {:style st/popular-list-item-avatar-container} + [image {:style st/popular-list-item-avatar :source res/user-no-photo}] ] ])) \ No newline at end of file diff --git a/src/syng_im/components/discovery/discovery_recent.cljs b/src/syng_im/components/discovery/discovery_recent.cljs index d9a48ebb56..4b1a650322 100644 --- a/src/syng_im/components/discovery/discovery_recent.cljs +++ b/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 - :borderBottomColor "#eff2f3"} + (let [elem (r/as-element [view {:style st/row-separator :key rowID}])] elem)) @@ -31,6 +31,5 @@ :enableEmptySections true :renderRow render-row :renderSeparator render-separator - :style {:backgroundColor "white" - :paddingLeft 15}}] + :style st/recent-list}] )) \ No newline at end of file diff --git a/src/syng_im/components/discovery/discovery_tag.cljs b/src/syng_im/components/discovery/discovery_tag.cljs index 956a06cb6d..ba7b247fc4 100644 --- a/src/syng_im/components/discovery/discovery_tag.cljs +++ b/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 - :borderBottomColor "#eff2f3"} + (let [elem (r/as-element [view {:style st/row-separator :key rowID}])] elem)) (defn title-content [tag] - [view {:style {:backgroundColor "#eef2f5" - :flexWrap :wrap - :borderRadius 5 - :padding 4}} - [text {:style {:color "#7099e6" - :fontFamily "sans-serif-medium" - :fontSize 14 - :paddingRight 5 - :paddingBottom 2}} + [view {:style st/tag-title-container} + [text {:style st/tag-title} (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 - :backgroundColor "#eef2f5"}} + [view {:style st/discovery-tag-container} [toolbar {:navigator navigator :nav-action {:image {:source {:uri "icon_back"} - :style {:width 8 - :height 14}} + :style st/icon-back} :handler (fn [] (nav-pop navigator))} :title "Add Participants" :content (title-content @tag) :action {:image {:source {:uri "icon_search"} - :style {:width 17 - :height 17}} + :style st/icon-search} :handler (fn [] ())}}] @@ -66,6 +56,5 @@ :enableEmptySections true :renderRow render-row :renderSeparator render-separator - :style {:backgroundColor "white" - :paddingLeft 15}}] + :style st/recent-list}] ])))) \ No newline at end of file diff --git a/src/syng_im/components/discovery/styles.cljs b/src/syng_im/components/discovery/styles.cljs new file mode 100644 index 0000000000..da85fb9732 --- /dev/null +++ b/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}) \ No newline at end of file