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

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

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

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

@ -17,7 +17,7 @@
:borderBottomColor "#eff2f3"})
(def row
{:flexDirection "row"})
{:flexDirection :row})
(def column
{:flexDirection "column"})
@ -34,8 +34,8 @@
(def discovery-title
{:color "#000000de"
:alignSelf "center"
:textAlign "center"
:alignSelf :center
:textAlign :center
:fontFamily "sans-serif"
:fontSize 16})
@ -71,8 +71,8 @@
:fontSize 14
:paddingRight 5
:paddingBottom 2
:alignItems "center"
:justifyContent "center"})
:alignItems :center
:justifyContent :center})
(def tag-name-container
{:flexDirection "column"
@ -86,8 +86,8 @@
:fontSize 12
:paddingRight 5
:paddingBottom 2
:alignItems "center"
:justifyContent "center"})
:alignItems :center
:justifyContent :center})
(def tag-count-container
{:flex 0.2
@ -98,18 +98,18 @@
(def popular-list-container
{:flex 1
:backgroundColor "white"
:backgroundColor :white
:paddingLeft 10
:paddingTop 16})
(def popular-list
{:backgroundColor "white"
{:backgroundColor :white
:paddingTop 13})
;; discover_popular_list_item.cjls
(def popular-list-item
{:flexDirection "row"
{:flexDirection :row
:paddingTop 10
:paddingBottom 10})
@ -132,7 +132,7 @@
(def popular-list-item-avatar-container
{:flex 0.2
:flexDirection "column"
:alignItems "center"
:alignItems :center
:paddingTop 5})
(def popular-list-item-avatar
@ -144,7 +144,7 @@
;; discovery_recent
(def recent-list
{:backgroundColor "white"
{:backgroundColor :white
:paddingLeft 15})
;; discovery_tag
@ -172,4 +172,4 @@
(def icon-search
{: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-purple "#a187d5")
(def color-gray "#838c93de")
(def color-white "white")
(def color-white :white)
(def color-light-blue "#bbc4cb")
(def color-light-blue-transparent "#bbc4cb32")
(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]]))
(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)
:height 56
:elevation 2} style)]
@ -24,8 +24,8 @@
[touchable-highlight {:on-press (:handler nav-action)}
[view {:width 56
:height 56
:alignItems "center"
:justifyContent "center"}
:alignItems :center
:justifyContent :center}
[image (:image nav-action)]]]
[touchable-highlight {:on-press #(dispatch [:navigate-back])}
[view {:width 56
@ -37,12 +37,12 @@
:height 14}}]]])
(if content
[view {:style {:flex 1
:alignItems "center"
:justifyContent "center"}}
:alignItems :center
:justifyContent :center}}
content]
[view {:style {:flex 1
:alignItems "center"
:justifyContent "center"}}
:alignItems :center
:justifyContent :center}}
[text {:style {:marginTop -2.5
:color text1-color
:fontSize 16
@ -51,7 +51,7 @@
[touchable-highlight {:on-press (:handler action)}
[view {:width 56
:height 56
:alignItems "center"
:justifyContent "center"}
:alignItems :center
:justifyContent :center}
[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.core :refer [with-error-view]])
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.components.react :refer [view text image touchable-highlight
navigator list-view
[syng-im.components.react :refer [view text
image
touchable-highlight
list-view
list-item]]
[syng-im.contacts.views.contact :refer [contact-view]]
[syng-im.components.styles :refer [font
title-font
color-white
color-black
color-blue
text1-color
text2-color
toolbar-background2]]
[syng-im.components.styles :refer [toolbar-background2]]
[syng-im.components.toolbar :refer [toolbar]]
[syng-im.navigation :refer [nav-pop]]
[syng-im.resources :as res]
[syng-im.utils.logging :as log]))
[syng-im.contacts.styles :as st]))
(defn render-row [navigator row section-id row-id]
(list-item [contact-view {:navigator navigator
:contact (js->clj row :keywordize-keys true)}]))
(defn render-row [row _ _]
(list-item [contact-view (js->clj row :keywordize-keys true)]))
(defn get-data-source [contacts]
(clone-with-rows (data-source {:rowHasChanged (fn [row1 row2]
(not= row1 row2))})
contacts))
(clone-with-rows (data-source {:rowHasChanged not=}) contacts))
(defn contact-list-toolbar [navigator]
[toolbar {:navigator navigator
:title "Contacts"
(defn contact-list-toolbar []
[toolbar {:title "Contacts"
:background-color toolbar-background2
:action {:image {:source {:uri "icon_search"}
:style {:width 17
:height 17}}
:action {:image {:source {:uri :icon_search}
:style st/search-icon}
:handler (fn [])}}])
(defn contact-list [{:keys [navigator]}]
(defn contact-list []
(let [contacts (subscribe [:get-contacts])]
(fn []
(let [contacts-ds (get-data-source @contacts)]
[view {:style {:flex 1
:backgroundColor "white"}}
[contact-list-toolbar navigator]
[view st/contacts-list-container
[contact-list-toolbar]
(when contacts-ds
[list-view {:dataSource contacts-ds
[list-view {:dataSource contacts-ds
:enableEmptySections true
:renderRow (partial render-row navigator)
:style {:backgroundColor "white"}}])]))))
:renderRow render-row
: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]]
[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])}
[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
(:require [clojure.string :as s]
[syng-im.components.react :refer [view image text]]
[syng-im.components.styles :refer [font
title-font
text1-color
color-white
online-color]]
[syng-im.resources :as res]))
[syng-im.resources :as res]
[syng-im.contacts.styles :as st]))
(defn contact-photo [{:keys [photo-path]}]
[view {:borderRadius 50}
[view st/contact-photo-container
[image {:source (if (s/blank? photo-path)
res/user-no-photo
{:uri photo-path})
:style {:borderRadius 50
:width 40
:height 40}}]])
:style st/photo-image}]])
(defn contact-online [{:keys [online]}]
(when online
[view {:position "absolute"
:top 24
:left 24
: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}]]))
[view st/online-container
[view st/online-dot-left]
[view st/online-dot-right]]))
(defn contact-inner-view [{:keys [name photo-path online]}]
[view {:style {:flexDirection "row"
:height 56}}
[view {:style {:marginTop 8
:marginLeft 16
:width 44
:height 44}}
;;; photo
[view st/contact-container
[view st/photo-container
[contact-photo {:photo-path photo-path}]
;;; online
[contact-online {:online online}]]
;;; name
[view {:style {:justifyContent "center"}}
[text {:style {:marginLeft 16
:fontSize 16
:fontFamily font
:color text1-color}}
[view st/name-container
[text {:style st/name-text}
(if (pos? (count name))
name
;; todo is this correct behaviour?
"Noname")]]])

3
src/syng_im/handlers.cljs
View File

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

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

@ -20,13 +20,13 @@
(defn app-root []
(let [greeting (subscribe [:get-greeting])]
(fn []
[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]
[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]
[image {:source logo-img
:style {:width 80 :height 80 :margin-bottom 30}}]
[touchable-highlight {:style {:background-color "#999" :padding 10 :border-radius 5}
: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 []
(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))]
(-> (aget chat "contacts")
(r/filtered query)
(.forEach (fn [object index collection]
(.forEach (fn [object _ _]
(aset object "is-in-chat" false))))))))
(defn active-group-chats []
(let [results (r/filtered (r/get-all :chats)
"group-chat = true && is-active = true")]
(js->clj (.map results (fn [object index collection]
(js->clj (.map results (fn [object _ _]
(aget object "chat-id"))))))

7
src/syng_im/subs.cljs
View File

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