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 

Former-commit-id: 3976ea6c70
This commit is contained in:
Adrian Tiberius 2016-05-07 17:53:39 +03:00
parent 765e80f0a1
commit ae547a56ac
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-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"))

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

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

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

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

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

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

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

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

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

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

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