From c5c71691c33d2c16b14bb49b3a44048bd52129a7 Mon Sep 17 00:00:00 2001 From: Roman Volosovskyi Date: Wed, 11 May 2016 16:06:37 +0300 Subject: [PATCH] contacts styles --- src/syng_im/chats_list/screen.cljs | 24 ++----- src/syng_im/components/carousel/styles.cljs | 4 +- src/syng_im/components/discovery/styles.cljs | 26 +++---- src/syng_im/components/styles.cljs | 2 +- src/syng_im/components/toolbar.cljs | 18 ++--- src/syng_im/contacts/handlers.cljs | 14 ++++ src/syng_im/contacts/screen.cljs | 51 +++++--------- src/syng_im/contacts/styles.cljs | 69 +++++++++++++++++++ src/syng_im/contacts/subs.cljs | 5 ++ src/syng_im/contacts/views/contact.cljs | 2 +- src/syng_im/contacts/views/contact_inner.cljs | 59 ++++------------ src/syng_im/handlers.cljs | 3 +- src/syng_im/ios/core.cljs | 6 +- src/syng_im/models/chats.cljs | 4 +- src/syng_im/subs.cljs | 7 +- 15 files changed, 161 insertions(+), 133 deletions(-) create mode 100644 src/syng_im/contacts/handlers.cljs create mode 100644 src/syng_im/contacts/styles.cljs create mode 100644 src/syng_im/contacts/subs.cljs diff --git a/src/syng_im/chats_list/screen.cljs b/src/syng_im/chats_list/screen.cljs index 96320dc886..8d3edbec7b 100644 --- a/src/syng_im/chats_list/screen.cljs +++ b/src/syng_im/chats_list/screen.cljs @@ -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" diff --git a/src/syng_im/components/carousel/styles.cljs b/src/syng_im/components/carousel/styles.cljs index def9de8c10..b9a05aaff1 100644 --- a/src/syng_im/components/carousel/styles.cljs +++ b/src/syng_im/components/carousel/styles.cljs @@ -19,6 +19,6 @@ (defn page [page-width margin] {:width page-width - :justifyContent "center" + :justifyContent :center :marginLeft margin - :marginRight margin}) \ No newline at end of file + :marginRight margin}) diff --git a/src/syng_im/components/discovery/styles.cljs b/src/syng_im/components/discovery/styles.cljs index 9c988558f9..957a1f7940 100644 --- a/src/syng_im/components/discovery/styles.cljs +++ b/src/syng_im/components/discovery/styles.cljs @@ -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}) \ No newline at end of file + :height 17}) diff --git a/src/syng_im/components/styles.cljs b/src/syng_im/components/styles.cljs index 5f55404a35..77cad2f864 100644 --- a/src/syng_im/components/styles.cljs +++ b/src/syng_im/components/styles.cljs @@ -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") diff --git a/src/syng_im/components/toolbar.cljs b/src/syng_im/components/toolbar.cljs index 6bc93a9aa7..edc824c83b 100644 --- a/src/syng_im/components/toolbar.cljs +++ b/src/syng_im/components/toolbar.cljs @@ -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)]]]])) diff --git a/src/syng_im/contacts/handlers.cljs b/src/syng_im/contacts/handlers.cljs new file mode 100644 index 0000000000..58586cc671 --- /dev/null +++ b/src/syng_im/contacts/handlers.cljs @@ -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)))) + + diff --git a/src/syng_im/contacts/screen.cljs b/src/syng_im/contacts/screen.cljs index abdc736d5d..5c1f2c0de8 100644 --- a/src/syng_im/contacts/screen.cljs +++ b/src/syng_im/contacts/screen.cljs @@ -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}])])))) diff --git a/src/syng_im/contacts/styles.cljs b/src/syng_im/contacts/styles.cljs new file mode 100644 index 0000000000..819c5582eb --- /dev/null +++ b/src/syng_im/contacts/styles.cljs @@ -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}) diff --git a/src/syng_im/contacts/subs.cljs b/src/syng_im/contacts/subs.cljs new file mode 100644 index 0000000000..8396dac043 --- /dev/null +++ b/src/syng_im/contacts/subs.cljs @@ -0,0 +1,5 @@ +(ns syng-im.contacts.subs + (:require-macros [reagent.ratom :refer [reaction]]) + (:require [re-frame.core :refer [register-sub]])) + + diff --git a/src/syng_im/contacts/views/contact.cljs b/src/syng_im/contacts/views/contact.cljs index 41df1c47d8..d094ae02f0 100644 --- a/src/syng_im/contacts/views/contact.cljs +++ b/src/syng_im/contacts/views/contact.cljs @@ -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]]]) diff --git a/src/syng_im/contacts/views/contact_inner.cljs b/src/syng_im/contacts/views/contact_inner.cljs index 9e47992a18..d96ed3cd35 100644 --- a/src/syng_im/contacts/views/contact_inner.cljs +++ b/src/syng_im/contacts/views/contact_inner.cljs @@ -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")]]]) diff --git a/src/syng_im/handlers.cljs b/src/syng_im/handlers.cljs index 3aa7e8aa63..8b7e1849a7 100644 --- a/src/syng_im/handlers.cljs +++ b/src/syng_im/handlers.cljs @@ -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 ------------------------------------------------------------ ;; diff --git a/src/syng_im/ios/core.cljs b/src/syng_im/ios/core.cljs index 02147cce96..c84d1c2404 100644 --- a/src/syng_im/ios/core.cljs +++ b/src/syng_im/ios/core.cljs @@ -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]) diff --git a/src/syng_im/models/chats.cljs b/src/syng_im/models/chats.cljs index 8d1425b989..f92f3f67e5 100644 --- a/src/syng_im/models/chats.cljs +++ b/src/syng_im/models/chats.cljs @@ -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")))))) diff --git a/src/syng_im/subs.cljs b/src/syng_im/subs.cljs index e20b7561c6..04e6813ee0 100644 --- a/src/syng_im/subs.cljs +++ b/src/syng_im/subs.cljs @@ -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))))