contacts styles

Former-commit-id: c5c71691c3

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]]
+  (:require [re-frame.core :refer [subscribe dispatch]]
-            [syng-im.components.react :refer [android?
+            [syng-im.components.react :refer [view
-                                              view
                                               text
                                               image
-                                              touchable-highlight
+                                              touchable-highlight]]
-                                              navigator]]
             [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
+            [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.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"

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})
+   :marginRight    margin})

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"
+   :alignSelf :center
-   :textAlign  "center"
+   :textAlign  :center
    :fontFamily "sans-serif"
    :fontSize   16})
 
@@ -71,8 +71,8 @@
    :fontSize   14
    :paddingRight 5
    :paddingBottom 2
-   :alignItems "center"
+   :alignItems :center
-   :justifyContent "center"})
+   :justifyContent :center})
 
 (def tag-name-container
   {:flexDirection "column"
@@ -86,8 +86,8 @@
    :fontSize   12
    :paddingRight 5
    :paddingBottom 2
-   :alignItems "center"
+   :alignItems :center
-   :justifyContent "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})

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

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"
+               :alignItems     :center
-               :justifyContent "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"
+                      :alignItems :center
-                      :justifyContent "center"}}
+                      :justifyContent :center}}
         content]
        [view {:style {:flex           1
-                      :alignItems     "center"
+                      :alignItems     :center
-                      :justifyContent "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"
+             :alignItems     :center
-             :justifyContent "center"}
+             :justifyContent :center}
        [image (:image action)]]]]))
 

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

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
+            [syng-im.components.react :refer [view text
-                                              navigator list-view
+                                              image
+                                              touchable-highlight
+                                              list-view
                                               list-item]]
             [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.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]
-  (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
-            :action           {:image {:source {:uri "icon_search"}
+            :action           {:image {:source {:uri :icon_search}
-                                       :style  {:width  17
+                                       :style  st/search-icon}
-                                                :height 17}}
                                :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
+        [view st/contacts-list-container
-                       :backgroundColor "white"}}
+         [contact-list-toolbar]
-         [contact-list-toolbar navigator]
          (when contacts-ds
-           [list-view {:dataSource contacts-ds
+           [list-view {:dataSource          contacts-ds
                        :enableEmptySections true
-                       :renderRow  (partial render-row navigator)
+                       :renderRow           render-row
-                       :style      {:backgroundColor "white"}}])]))))
+                       :style               st/contacts-list}])]))))

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

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]]))
+
+

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

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
+            [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]}]
-  [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
+           :style  st/photo-image}]])
-                    :width        40
-                    :height       40}}]])
 
 (defn contact-online [{:keys [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]}]
-  [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}]
-;;; 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))
        name
+       ;; todo is this correct behaviour?
        "Noname")]]])

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 ------------------------------------------------------------
 ;;

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"}}
+      [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
                :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])

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

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