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

moved styles to separate file

This commit is contained in:
Adrian Tiberius 2016-05-07 17:53:39 +03:00
parent d009f038e5
commit 3976ea6c70
7 changed files with 215 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/syng_im/components/discovery/discovery.cljs
View File

@ -14,6 +14,7 @@
[syng-im.components.discovery.discovery-popular :refer [discovery-popular]] [syng-im.components.discovery.discovery-popular :refer [discovery-popular]]
[syng-im.components.discovery.discovery-recent :refer [discovery-recent]] [syng-im.components.discovery.discovery-recent :refer [discovery-recent]]
[syng-im.resources :as res] [syng-im.resources :as res]
[syng-im.components.discovery.styles :as st]
[syng-im.persistence.realm :as realm])) [syng-im.persistence.realm :as realm]))
(def search-input (atom {:search "x"})) (def search-input (atom {:search "x"}))
@ -27,30 +28,15 @@
(defn title-content [showSearch] (defn title-content [showSearch]
(if showSearch (if showSearch
[text-input {:underlineColorAndroid "transparent" [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 :autoFocus true
:placeholder "Type your search tags here" :placeholder "Type your search tags here"
:onSubmitEditing (fn [e] :onSubmitEditing (fn [e]
(let [search (aget e "nativeEvent" "text") (let [search (aget e "nativeEvent" "text")
hashtags (get-hashtags search)] hashtags (get-hashtags search)]
(dispatch [:broadcast-status search hashtags])))}] (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 [] (defn create-fake-discovery []
(let [number (rand-int 999)] (let [number (rand-int 999)]
@ -69,8 +55,7 @@
(fn [] (fn []
[view {:style {:flex 1 [view {:style {:flex 1
:backgroundColor "#eef2f5"}} :backgroundColor "#eef2f5"}}
[toolbar {:style {:backgroundColor "#eef2f5" [toolbar {:style st/discovery-toolbar
:elevation 0}
:navigator navigator :navigator navigator
:nav-action {:image {:source {:uri "icon_hamburger"} :nav-action {:image {:source {:uri "icon_hamburger"}
:style {:width 16 :style {:width 16
@ -86,19 +71,11 @@
(reset! showSearch false) (reset! showSearch false)
(reset! showSearch true)))}}] (reset! showSearch true)))}}]
[scroll-view {:style {}} [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] [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]]]))) [discovery-recent]]])))
(comment (comment
(def page-width (aget (natal-shell.dimensions/get "window") "width")) (def page-width (aget (natal-shell.dimensions/get "window") "width"))

8
src/syng_im/components/discovery/discovery_popular.cljs
View File

@ -5,6 +5,7 @@
[syng-im.components.react :refer [android? [syng-im.components.react :refer [android?
text]] text]]
[syng-im.components.carousel :refer [carousel]] [syng-im.components.carousel :refer [carousel]]
[syng-im.components.discovery.styles :as st]
[syng-im.components.discovery.discovery-popular-list :refer [discovery-popular-list]] [syng-im.components.discovery.discovery-popular-list :refer [discovery-popular-list]]
)) ))
@ -15,12 +16,7 @@
(let [popular-tags (subscribe [:get-popular-tags 3])] (let [popular-tags (subscribe [:get-popular-tags 3])]
(log/debug "Got popular tags: " @popular-tags) (log/debug "Got popular tags: " @popular-tags)
(if (> (count @popular-tags) 0) (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) :pageWidth (- (page-width) 60)
:sneak 20} :sneak 20}
(for [tag @popular-tags] (for [tag @popular-tags]

49
src/syng_im/components/discovery/discovery_popular_list.cljs
View File

@ -10,6 +10,7 @@
image]] image]]
[reagent.core :as r] [reagent.core :as r]
[syng-im.components.realm :refer [list-view]] [syng-im.components.realm :refer [list-view]]
[syng-im.components.discovery.styles :as st]
[syng-im.utils.listview :refer [to-realm-datasource]] [syng-im.utils.listview :refer [to-realm-datasource]]
[syng-im.components.discovery.discovery-popular-list-item :refer [discovery-popular-list-item] ]) [syng-im.components.discovery.discovery-popular-list-item :refer [discovery-popular-list-item] ])
) )
@ -21,52 +22,26 @@
) )
(defn render-separator [sectionID, rowID, adjacentRowHighlighted] (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}])] :key rowID}])]
elem)) elem))
(defn discovery-popular-list [tag count navigator] (defn discovery-popular-list [tag count navigator]
(let [discoveries (subscribe [:get-discoveries-by-tag tag 3])] (let [discoveries (subscribe [:get-discoveries-by-tag tag 3])]
(log/debug "Got discoveries for tag (" tag "): " @discoveries) (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))]]]] (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]]] count]]]
[list-view {:dataSource (to-realm-datasource @discoveries) [list-view {:dataSource (to-realm-datasource @discoveries)
:enableEmptySections true :enableEmptySections true
:renderRow render-row :renderRow render-row
:renderSeparator render-separator :renderSeparator render-separator
:style {:backgroundColor "white" :style st/popular-list}]
:paddingTop 13}}]
])) ]))

28
src/syng_im/components/discovery/discovery_popular_list_item.cljs
View File

@ -6,34 +6,20 @@
text text
image]] image]]
[syng-im.resources :as res] [syng-im.resources :as res]
[syng-im.components.discovery.styles :as st]
[reagent.core :as r]) [reagent.core :as r])
) )
(defn discovery-popular-list-item [discovery] (defn discovery-popular-list-item [discovery]
(log/debug 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")] :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}] :source res/user-no-photo}]
] ]
])) ]))

7
src/syng_im/components/discovery/discovery_recent.cljs
View File

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

29
src/syng_im/components/discovery/discovery_tag.cljs
View File

@ -12,7 +12,8 @@
[syng-im.components.toolbar :refer [toolbar]] [syng-im.components.toolbar :refer [toolbar]]
[reagent.core :as r] [reagent.core :as r]
[syng-im.components.discovery.discovery-popular-list-item :refer [discovery-popular-list-item]] [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] (defn render-row [row section-id row-id]
(log/debug "discovery-tag-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] (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}])] :key rowID}])]
elem)) elem))
(defn title-content [tag] (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)]]) (str " #" tag)]])
(defn discovery-tag [{:keys [tag navigator]}] (defn discovery-tag [{:keys [tag navigator]}]
@ -47,18 +40,15 @@
(fn [] (fn []
(let [items @discoveries (let [items @discoveries
datasource (to-realm-datasource items)] datasource (to-realm-datasource items)]
[view {:style {:flex 1 [view {:style st/discovery-tag-container}
:backgroundColor "#eef2f5"}}
[toolbar {:navigator navigator [toolbar {:navigator navigator
:nav-action {:image {:source {:uri "icon_back"} :nav-action {:image {:source {:uri "icon_back"}
:style {:width 8 :style st/icon-back}
:height 14}}
:handler (fn [] (nav-pop navigator))} :handler (fn [] (nav-pop navigator))}
:title "Add Participants" :title "Add Participants"
:content (title-content @tag) :content (title-content @tag)
:action {:image {:source {:uri "icon_search"} :action {:image {:source {:uri "icon_search"}
:style {:width 17 :style st/icon-search}
:height 17}}
:handler (fn [] :handler (fn []
())}}] ())}}]
@ -66,6 +56,5 @@
:enableEmptySections true :enableEmptySections true
:renderRow render-row :renderRow render-row
:renderSeparator render-separator :renderSeparator render-separator
:style {:backgroundColor "white" :style st/recent-list}]
:paddingLeft 15}}]
])))) ]))))

173
src/syng_im/components/discovery/styles.cljs Normal file
View File

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