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

contacts styles

This commit is contained in:
Roman Volosovskyi 2016-05-11 16:06:37 +03:00
parent bb0a6c848f
commit c5c71691c3
15 changed files with 161 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/syng_im/chats_list/screen.cljs
View File

@ -1,26 +1,16 @@
(ns syng-im.chats-list.screen (ns syng-im.chats-list.screen
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] (:require [re-frame.core :refer [subscribe dispatch]]
[syng-im.components.react :refer [android? [syng-im.components.react :refer [view
view
text text
image image
touchable-highlight touchable-highlight]]
navigator]]
[syng-im.components.realm :refer [list-view]] [syng-im.components.realm :refer [list-view]]
[syng-im.utils.logging :as log]
[syng-im.navigation :refer [nav-pop]]
[syng-im.utils.listview :refer [to-realm-datasource]] [syng-im.utils.listview :refer [to-realm-datasource]]
[reagent.core :as r] [reagent.core :as r]
[syng-im.chats-list.views.chat-list-item :refer [chat-list-item]] [syng-im.chats-list.views.chat-list-item :refer [chat-list-item]]
[syng-im.components.action-button :refer [action-button [syng-im.components.action-button :refer [action-button
action-button-item]] action-button-item]]
[syng-im.components.styles :refer [font [syng-im.components.styles :refer [color-blue]]
title-font
color-white
color-black
color-blue
text1-color
text2-color]]
[syng-im.components.toolbar :refer [toolbar]] [syng-im.components.toolbar :refer [toolbar]]
[syng-im.components.icons.ionicons :refer [icon]] [syng-im.components.icons.ionicons :refer [icon]]
[syng-im.chats-list.styles :as st])) [syng-im.chats-list.styles :as st]))
@ -28,7 +18,7 @@
(defn chats-list-toolbar [] (defn chats-list-toolbar []
[toolbar {:nav-action {:image {:source {:uri :icon_hamburger} [toolbar {:nav-action {:image {:source {:uri :icon_hamburger}
:style st/hamburger-icon } :style st/hamburger-icon}
:handler (fn [])} :handler (fn [])}
:title "Chats" :title "Chats"
:action {:image {:source {:uri :icon_search} :action {:image {:source {:uri :icon_search}
@ -36,7 +26,7 @@
:handler (fn [])}}]) :handler (fn [])}}])
(defn chats-list [] (defn chats-list []
(let [chats (subscribe [:get-chats])] (let [chats (subscribe [:get :chats])]
(fn [] (fn []
(let [chats @chats (let [chats @chats
datasource (to-realm-datasource chats)] datasource (to-realm-datasource chats)]
@ -45,7 +35,7 @@
[list-view {:dataSource datasource [list-view {:dataSource datasource
:renderRow (fn [row _ _] :renderRow (fn [row _ _]
(r/as-element [chat-list-item row])) (r/as-element [chat-list-item row]))
:style st/list-container}] :style st/list-container}]
[action-button {:buttonColor color-blue} [action-button {:buttonColor color-blue}
[action-button-item [action-button-item
{:title "New Chat" {:title "New Chat"

4
src/syng_im/components/carousel/styles.cljs
View File

@ -19,6 +19,6 @@
(defn page [page-width margin] (defn page [page-width margin]
{:width page-width {:width page-width
:justifyContent "center" :justifyContent :center
:marginLeft margin :marginLeft margin
:marginRight margin}) :marginRight margin})

26
src/syng_im/components/discovery/styles.cljs
View File

@ -17,7 +17,7 @@
:borderBottomColor "#eff2f3"}) :borderBottomColor "#eff2f3"})
(def row (def row
{:flexDirection "row"}) {:flexDirection :row})
(def column (def column
{:flexDirection "column"}) {:flexDirection "column"})
@ -34,8 +34,8 @@
(def discovery-title (def discovery-title
{:color "#000000de" {:color "#000000de"
:alignSelf "center" :alignSelf :center
:textAlign "center" :textAlign :center
:fontFamily "sans-serif" :fontFamily "sans-serif"
:fontSize 16}) :fontSize 16})
@ -71,8 +71,8 @@
:fontSize 14 :fontSize 14
:paddingRight 5 :paddingRight 5
:paddingBottom 2 :paddingBottom 2
:alignItems "center" :alignItems :center
:justifyContent "center"}) :justifyContent :center})
(def tag-name-container (def tag-name-container
{:flexDirection "column" {:flexDirection "column"
@ -86,8 +86,8 @@
:fontSize 12 :fontSize 12
:paddingRight 5 :paddingRight 5
:paddingBottom 2 :paddingBottom 2
:alignItems "center" :alignItems :center
:justifyContent "center"}) :justifyContent :center})
(def tag-count-container (def tag-count-container
{:flex 0.2 {:flex 0.2
@ -98,18 +98,18 @@
(def popular-list-container (def popular-list-container
{:flex 1 {:flex 1
:backgroundColor "white" :backgroundColor :white
:paddingLeft 10 :paddingLeft 10
:paddingTop 16}) :paddingTop 16})
(def popular-list (def popular-list
{:backgroundColor "white" {:backgroundColor :white
:paddingTop 13}) :paddingTop 13})
;; discover_popular_list_item.cjls ;; discover_popular_list_item.cjls
(def popular-list-item (def popular-list-item
{:flexDirection "row" {:flexDirection :row
:paddingTop 10 :paddingTop 10
:paddingBottom 10}) :paddingBottom 10})
@ -132,7 +132,7 @@
(def popular-list-item-avatar-container (def popular-list-item-avatar-container
{:flex 0.2 {:flex 0.2
:flexDirection "column" :flexDirection "column"
:alignItems "center" :alignItems :center
:paddingTop 5}) :paddingTop 5})
(def popular-list-item-avatar (def popular-list-item-avatar
@ -144,7 +144,7 @@
;; discovery_recent ;; discovery_recent
(def recent-list (def recent-list
{:backgroundColor "white" {:backgroundColor :white
:paddingLeft 15}) :paddingLeft 15})
;; discovery_tag ;; discovery_tag
@ -172,4 +172,4 @@
(def icon-search (def icon-search
{:width 17 {:width 17
:height 17}) :height 17})

2
src/syng_im/components/styles.cljs
View File

@ -8,7 +8,7 @@
(def color-black "#000000de") (def color-black "#000000de")
(def color-purple "#a187d5") (def color-purple "#a187d5")
(def color-gray "#838c93de") (def color-gray "#838c93de")
(def color-white "white") (def color-white :white)
(def color-light-blue "#bbc4cb") (def color-light-blue "#bbc4cb")
(def color-light-blue-transparent "#bbc4cb32") (def color-light-blue-transparent "#bbc4cb32")
(def color-dark-mint "#5fc48d") (def color-dark-mint "#5fc48d")

18
src/syng_im/components/toolbar.cljs
View File

@ -15,7 +15,7 @@
[syng-im.utils.listview :refer [to-realm-datasource]])) [syng-im.utils.listview :refer [to-realm-datasource]]))
(defn toolbar [{:keys [title nav-action action background-color content style]}] (defn toolbar [{:keys [title nav-action action background-color content style]}]
(let [style (merge {:flexDirection "row" (let [style (merge {:flexDirection :row
:backgroundColor (or background-color toolbar-background1) :backgroundColor (or background-color toolbar-background1)
:height 56 :height 56
:elevation 2} style)] :elevation 2} style)]
@ -24,8 +24,8 @@
[touchable-highlight {:on-press (:handler nav-action)} [touchable-highlight {:on-press (:handler nav-action)}
[view {:width 56 [view {:width 56
:height 56 :height 56
:alignItems "center" :alignItems :center
:justifyContent "center"} :justifyContent :center}
[image (:image nav-action)]]] [image (:image nav-action)]]]
[touchable-highlight {:on-press #(dispatch [:navigate-back])} [touchable-highlight {:on-press #(dispatch [:navigate-back])}
[view {:width 56 [view {:width 56
@ -37,12 +37,12 @@
:height 14}}]]]) :height 14}}]]])
(if content (if content
[view {:style {:flex 1 [view {:style {:flex 1
:alignItems "center" :alignItems :center
:justifyContent "center"}} :justifyContent :center}}
content] content]
[view {:style {:flex 1 [view {:style {:flex 1
:alignItems "center" :alignItems :center
:justifyContent "center"}} :justifyContent :center}}
[text {:style {:marginTop -2.5 [text {:style {:marginTop -2.5
:color text1-color :color text1-color
:fontSize 16 :fontSize 16
@ -51,7 +51,7 @@
[touchable-highlight {:on-press (:handler action)} [touchable-highlight {:on-press (:handler action)}
[view {:width 56 [view {:width 56
:height 56 :height 56
:alignItems "center" :alignItems :center
:justifyContent "center"} :justifyContent :center}
[image (:image action)]]]])) [image (:image action)]]]]))

14
src/syng_im/contacts/handlers.cljs Normal file
View File

@ -0,0 +1,14 @@
(ns syng-im.contacts.handlers
(:require [re-frame.core :refer [register-handler after]]
[syng-im.models.contacts :as contacts]))
(defn save-contact
[_ [_ contact]]
(contacts/save-syng-contacts [contact]))
(register-handler :add-contact
(-> (fn [db [_ contact]]
(update db :contacts conj contact))
((after save-contact))))

51
src/syng_im/contacts/screen.cljs
View File

@ -3,50 +3,37 @@
[natal-shell.data-source :refer [data-source clone-with-rows]] [natal-shell.data-source :refer [data-source clone-with-rows]]
[natal-shell.core :refer [with-error-view]]) [natal-shell.core :refer [with-error-view]])
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.components.react :refer [view text image touchable-highlight [syng-im.components.react :refer [view text
navigator list-view image
touchable-highlight
list-view
list-item]] list-item]]
[syng-im.contacts.views.contact :refer [contact-view]] [syng-im.contacts.views.contact :refer [contact-view]]
[syng-im.components.styles :refer [font [syng-im.components.styles :refer [toolbar-background2]]
title-font
color-white
color-black
color-blue
text1-color
text2-color
toolbar-background2]]
[syng-im.components.toolbar :refer [toolbar]] [syng-im.components.toolbar :refer [toolbar]]
[syng-im.navigation :refer [nav-pop]] [syng-im.contacts.styles :as st]))
[syng-im.resources :as res]
[syng-im.utils.logging :as log]))
(defn render-row [navigator row section-id row-id] (defn render-row [row _ _]
(list-item [contact-view {:navigator navigator (list-item [contact-view (js->clj row :keywordize-keys true)]))
:contact (js->clj row :keywordize-keys true)}]))
(defn get-data-source [contacts] (defn get-data-source [contacts]
(clone-with-rows (data-source {:rowHasChanged (fn [row1 row2] (clone-with-rows (data-source {:rowHasChanged not=}) contacts))
(not= row1 row2))})
contacts))
(defn contact-list-toolbar [navigator] (defn contact-list-toolbar []
[toolbar {:navigator navigator [toolbar {:title "Contacts"
:title "Contacts"
:background-color toolbar-background2 :background-color toolbar-background2
:action {:image {:source {:uri "icon_search"} :action {:image {:source {:uri :icon_search}
:style {:width 17 :style st/search-icon}
:height 17}}
:handler (fn [])}}]) :handler (fn [])}}])
(defn contact-list [{:keys [navigator]}] (defn contact-list []
(let [contacts (subscribe [:get-contacts])] (let [contacts (subscribe [:get-contacts])]
(fn [] (fn []
(let [contacts-ds (get-data-source @contacts)] (let [contacts-ds (get-data-source @contacts)]
[view {:style {:flex 1 [view st/contacts-list-container
:backgroundColor "white"}} [contact-list-toolbar]
[contact-list-toolbar navigator]
(when contacts-ds (when contacts-ds
[list-view {:dataSource contacts-ds [list-view {:dataSource contacts-ds
:enableEmptySections true :enableEmptySections true
:renderRow (partial render-row navigator) :renderRow render-row
:style {:backgroundColor "white"}}])])))) :style st/contacts-list}])]))))

69
src/syng_im/contacts/styles.cljs Normal file
View File

@ -0,0 +1,69 @@
(ns syng-im.contacts.styles
(:require [syng-im.components.styles :refer [font
title-font
text1-color
color-white
online-color]]))
(def search-icon
{:width 17
:height 17})
(def contacts-list-container
{:flex 1
:backgroundColor :white})
(def contacts-list
{:backgroundColor :white})
(def contact-photo-container
{:borderRadius 50})
(def photo-image
{:borderRadius 50
:width 40
:height 40})
(def online-container
{:position :absolute
:top 24
:left 24
:width 20
:height 20
:borderRadius 50
:backgroundColor online-color
:borderWidth 2
:borderColor color-white})
(def online-dot
{:position :absolute
:top 6
:width 4
:height 4
:borderRadius 50
:backgroundColor color-white})
(def online-dot-left
(assoc online-dot :left 3))
(def online-dot-right
(assoc online-dot :left 9))
(def contact-container
{:flexDirection :row
:height 56})
(def photo-container
{:marginTop 8
:marginLeft 16
:width 44
:height 44})
(def name-container
{:justifyContent :center})
(def name-text
{:marginLeft 16
:fontSize 16
:fontFamily font
:color text1-color})

5
src/syng_im/contacts/subs.cljs Normal file
View File

@ -0,0 +1,5 @@
(ns syng-im.contacts.subs
(:require-macros [reagent.ratom :refer [reaction]])
(:require [re-frame.core :refer [register-sub]]))

2
src/syng_im/contacts/views/contact.cljs
View File

@ -3,6 +3,6 @@
[re-frame.core :refer [dispatch]] [re-frame.core :refer [dispatch]]
[syng-im.contacts.views.contact-inner :refer [contact-inner-view]])) [syng-im.contacts.views.contact-inner :refer [contact-inner-view]]))
(defn contact-view [{:keys [contact]}] (defn contact-view [contact]
[touchable-highlight {:onPress #(dispatch [:navigate-to :chat])} [touchable-highlight {:onPress #(dispatch [:navigate-to :chat])}
[view {} [contact-inner-view contact]]]) [view {} [contact-inner-view contact]]])

59
src/syng_im/contacts/views/contact_inner.cljs
View File

@ -1,65 +1,30 @@
(ns syng-im.contacts.views.contact-inner (ns syng-im.contacts.views.contact-inner
(:require [clojure.string :as s] (:require [clojure.string :as s]
[syng-im.components.react :refer [view image text]] [syng-im.components.react :refer [view image text]]
[syng-im.components.styles :refer [font [syng-im.resources :as res]
title-font [syng-im.contacts.styles :as st]))
text1-color
color-white
online-color]]
[syng-im.resources :as res]))
(defn contact-photo [{:keys [photo-path]}] (defn contact-photo [{:keys [photo-path]}]
[view {:borderRadius 50} [view st/contact-photo-container
[image {:source (if (s/blank? photo-path) [image {:source (if (s/blank? photo-path)
res/user-no-photo res/user-no-photo
{:uri photo-path}) {:uri photo-path})
:style {:borderRadius 50 :style st/photo-image}]])
:width 40
:height 40}}]])
(defn contact-online [{:keys [online]}] (defn contact-online [{:keys [online]}]
(when online (when online
[view {:position "absolute" [view st/online-container
:top 24 [view st/online-dot-left]
:left 24 [view st/online-dot-right]]))
:width 20
:height 20
:borderRadius 50
:backgroundColor online-color
:borderWidth 2
:borderColor color-white}
[view {:position "absolute"
:top 6
:left 3
:width 4
:height 4
:borderRadius 50
:backgroundColor color-white}]
[view {:position "absolute"
:top 6
:left 9
:width 4
:height 4
:borderRadius 50
:backgroundColor color-white}]]))
(defn contact-inner-view [{:keys [name photo-path online]}] (defn contact-inner-view [{:keys [name photo-path online]}]
[view {:style {:flexDirection "row" [view st/contact-container
:height 56}} [view st/photo-container
[view {:style {:marginTop 8
:marginLeft 16
:width 44
:height 44}}
;;; photo
[contact-photo {:photo-path photo-path}] [contact-photo {:photo-path photo-path}]
;;; online
[contact-online {:online online}]] [contact-online {:online online}]]
;;; name [view st/name-container
[view {:style {:justifyContent "center"}} [text {:style st/name-text}
[text {:style {:marginLeft 16
:fontSize 16
:fontFamily font
:color text1-color}}
(if (pos? (count name)) (if (pos? (count name))
name name
;; todo is this correct behaviour?
"Noname")]]]) "Noname")]]])

3
src/syng_im/handlers.cljs
View File

@ -39,7 +39,8 @@
[syng-im.utils.random :as random] [syng-im.utils.random :as random]
syng-im.chat.handlers syng-im.chat.handlers
syng-im.navigation.handlers syng-im.navigation.handlers
syng-im.components.discovery.handlers)) syng-im.components.discovery.handlers
syng-im.contacts.handlers))
;; -- Middleware ------------------------------------------------------------ ;; -- Middleware ------------------------------------------------------------
;; ;;

6
src/syng_im/ios/core.cljs
View File

@ -20,13 +20,13 @@
(defn app-root [] (defn app-root []
(let [greeting (subscribe [:get-greeting])] (let [greeting (subscribe [:get-greeting])]
(fn [] (fn []
[view {:style {:flex-direction "column" :margin 40 :align-items "center"}} [view {:style {:flex-direction "column" :margin 40 :align-items :center}}
[text {:style {:font-size 30 :font-weight "100" :margin-bottom 20 :text-align "center"}} @greeting] [text {:style {:font-size 30 :font-weight "100" :margin-bottom 20 :text-align :center}} @greeting]
[image {:source logo-img [image {:source logo-img
:style {:width 80 :height 80 :margin-bottom 30}}] :style {:width 80 :height 80 :margin-bottom 30}}]
[touchable-highlight {:style {:background-color "#999" :padding 10 :border-radius 5} [touchable-highlight {:style {:background-color "#999" :padding 10 :border-radius 5}
:on-press #(alert "HELLO!")} :on-press #(alert "HELLO!")}
[text {:style {:color "white" :text-align "center" :font-weight "bold"}} "press me"]]]))) [text {:style {:color :white :text-align :center :font-weight "bold"}} "press me"]]])))
(defn init [] (defn init []
(dispatch-sync [:initialize-db]) (dispatch-sync [:initialize-db])

4
src/syng_im/models/chats.cljs
View File

@ -123,13 +123,13 @@
chat (r/single (r/get-by-field :chats :chat-id chat-id))] chat (r/single (r/get-by-field :chats :chat-id chat-id))]
(-> (aget chat "contacts") (-> (aget chat "contacts")
(r/filtered query) (r/filtered query)
(.forEach (fn [object index collection] (.forEach (fn [object _ _]
(aset object "is-in-chat" false)))))))) (aset object "is-in-chat" false))))))))
(defn active-group-chats [] (defn active-group-chats []
(let [results (r/filtered (r/get-all :chats) (let [results (r/filtered (r/get-all :chats)
"group-chat = true && is-active = true")] "group-chat = true && is-active = true")]
(js->clj (.map results (fn [object index collection] (js->clj (.map results (fn [object _ _]
(aget object "chat-id")))))) (aget object "chat-id"))))))

7
src/syng_im/subs.cljs
View File

@ -7,14 +7,11 @@
contacts-list-include]] contacts-list-include]]
syng-im.chat.subs syng-im.chat.subs
syng-im.navigation.subs syng-im.navigation.subs
syng-im.components.discovery.subs)) syng-im.components.discovery.subs
syng-im.contacts.subs))
;; -- Chats list -------------------------------------------------------------- ;; -- Chats list --------------------------------------------------------------
(register-sub :get-chats
(fn [db _]
(reaction (:chats @db))))
(register-sub :get (register-sub :get
(fn [db [_ k]] (fn [db [_ k]]
(reaction (k @db)))) (reaction (k @db))))