Group settings styles

src/syng_im/components/group_settings.cljs

@@ -5,16 +5,13 @@
                                               text-input
                                               text
                                               image
+                                              icon
                                               touchable-highlight]]
-            [syng-im.components.styles :refer [font
-                                               title-font
-                                               color-white
-                                               color-purple
-                                               text1-color
-                                               text2-color
-                                               toolbar-background1]]
             [syng-im.components.toolbar :refer [toolbar]]
             [syng-im.components.realm :refer [list-view]]
+            [syng-im.components.styles :refer [color-purple
+                                               text2-color]]
+            [syng-im.components.group-settings-styles :as st]
             [syng-im.utils.listview :refer [to-realm-datasource]]
             [syng-im.components.contact-list.contact-inner :refer [contact-inner-view]]
             [syng-im.components.chats.new-group-contact :refer [new-group-contact]]
@@ -23,74 +20,50 @@
 (defn set-group-settings-name [chat-name]
   (dispatch [:set-group-settings-name chat-name]))
 
+(defn save-group-chat []
+  (dispatch [:save-group-chat]))
+
 (defn chat-members [members]
-  [view {:style {:marginBottom 10}}
+  [view st/chat-members-container
    (for [member members]
      ^{:key member} [contact-inner-view member]
      ;; [new-group-contact member nil]
      )])
 
-(defn new-group-toolbar [chat-name]
+(defn action-save []
+  [touchable-highlight
+   {:on-press save-group-chat}
+   [view st/save-btn
+    [text {:style st/save-btn-text} "S"]]])
+
+(defn new-group-toolbar []
   [toolbar {:title  "Chat settings"
-            :action {:image {:source res/v ;; {:uri "icon_search"}
+            :custom-action [action-save]}])
-                             :style  {:width  20
-                                      :height 18}}
-                     :handler (fn []
-                                (dispatch [:save-group-chat chat-name]))}}])
 
 (defn group-settings []
   (let [chat-name (subscribe [:group-settings-name])
         members   (subscribe [:group-settings-members])]
     (fn []
-      [view {:style {:flex            1
+      [view st/group-settings
-                     :flexDirection   "column"
+       [new-group-toolbar]
-                     :backgroundColor color-white}}
+       [view st/properties-container
-       [new-group-toolbar @chat-name]
+        [text {:style st/chat-name-text}
-       [view {:style {:marginHorizontal 16}}
-        [text {:style {:marginTop    24
-                       :marginBottom 16
-                       :color        text2-color
-                       :fontFamily   font
-                       :fontSize     14
-                       :lineHeight   20}}
          "Chat name"]
-        [text-input {:underlineColorAndroid color-purple
+        [text-input {:style                 st/chat-name-input
-                     :style                 {:marginLeft -4
+                     :underlineColorAndroid color-purple
-                                             :fontSize   14
-                                             :fontFamily font
-                                             :color      text1-color}
                      :autoFocus             true
                      :placeholderTextColor  text2-color
                      :onChangeText          set-group-settings-name}
          @chat-name]
-        [text {:style {:marginTop    24
+        [text {:style st/members-text}
-                       :marginBottom 16
-                       :color        text2-color
-                       :fontFamily   font
-                       :fontSize     14
-                       :lineHeight   20}}
          "Members"]
-        [touchable-highlight {:on-press (fn [])
+        [touchable-highlight {:on-press (fn []
-                              :underlay-color :transparent}
+                                          ;; TODO not implemented
-         [view {:style {:flexDirection "row"
+                                          )}
-                        :marginBottom  16}}
+         [view st/add-members-container
-          [image {:source {:uri "icon_add_gray"}
+          [icon :add-gray st/add-members-icon]
-                  :style  {:marginVertical   19
+          [text {:style st/add-members-text}
-                           :marginHorizontal 3
-                           :width            17
-                           :height           17}}]
-          [text {:style {:marginTop    18
-                         :marginLeft   32
-                         :color        text2-color
-                         :fontFamily   font
-                         :fontSize     14
-                         :lineHeight   20}}
            "Add members"]]]
         [chat-members (vals (js->clj @members :keywordize-keys true))]
-        [text {:style {:marginTop    24
+        [text {:style st/settings-text}
-                       :marginBottom 16
-                       :color        text2-color
-                       :fontFamily   font
-                       :fontSize     14
-                       :lineHeight   20}}
          "Settings"]]])))

src/syng_im/components/group_settings_styles.cljs

@@ -0,0 +1,86 @@
+(ns syng-im.components.group-settings-styles
+  (:require [syng-im.components.styles :refer [font
+                                               title-font
+                                               color-white
+                                               color-purple
+                                               chat-background
+                                               online-color
+                                               selected-message-color
+                                               separator-color
+                                               text1-color
+                                               text2-color
+                                               toolbar-background1]]))
+
+(def chat-members-container
+  {:marginBottom 10})
+
+(def save-btn
+  {:margin          10
+   :width           36
+   :height          36
+   :borderRadius    50
+   :backgroundColor color-purple})
+
+(def save-btn-text
+  {:marginTop  7
+   :marginLeft 13
+   :color      color-white
+   :fontFamily font
+   :fontSize   16
+   :lineHeight 20})
+
+(def group-settings
+  {:flex            1
+   :flexDirection   :column
+   :backgroundColor color-white})
+
+(def properties-container
+  {:marginHorizontal 16})
+
+(def chat-name-text
+  {:marginTop    24
+   :marginBottom 16
+   :color        text2-color
+   :fontFamily   font
+   :fontSize     14
+   :lineHeight   20})
+
+(def chat-name-input
+  {:marginLeft -4
+   :fontSize   14
+   :fontFamily font
+   :color      text1-color})
+
+(def members-text
+  {:marginTop    24
+   :marginBottom 16
+   :color        text2-color
+   :fontFamily   font
+   :fontSize     14
+   :lineHeight   20})
+
+(def add-members-icon
+  {:marginVertical   19
+   :marginHorizontal 3
+   :width            17
+   :height           17})
+
+(def add-members-container
+  {:flexDirection :row
+   :marginBottom  16})
+
+(def add-members-text
+  {:marginTop  18
+   :marginLeft 32
+   :color      text2-color
+   :fontFamily font
+   :fontSize   14
+   :lineHeight 20})
+
+(def settings-text
+  {:marginTop    24
+   :marginBottom 16
+   :color        text2-color
+   :fontFamily   font
+   :fontSize     14
+   :lineHeight   20})

src/syng_im/models/chat.cljs

@@ -24,7 +24,8 @@
 
 (defn set-group-settings [db]
   (let [group-chat (current-chat db)]
-    (assoc-in db db/group-settings-path group-chat)))
+    (assoc-in db db/group-settings-path
+              (select-keys group-chat [:chat-id :name :contacts]))))
 
 (defn update-new-group-selection [db identity add?]
   (update-in db db/new-group-path (fn [new-group]

src/syng_im/models/chats.cljs

@@ -83,7 +83,8 @@
     (r/write
      (fn []
        ;; TODO UNDONE contacts
-       (r/create :chats (select-keys chat-settings [:chat-id :name]) true)))
+       (r/create :chats
+                 (select-keys chat-settings [:chat-id :name :contacts]) true)))
     ;; TODO update chat in db atom
     (dispatch [:initialize-chats])
     (-> db