Chat name edit form. Fix styles.

src/syng_im/android/core.cljs

@@ -16,6 +16,7 @@
             [syng-im.components.chat.new-participants :refer [new-participants]]
             [syng-im.components.chat.remove-participants :refer [remove-participants]]
             [syng-im.group-settings.group-settings :refer [group-settings]]
+            [syng-im.group-settings.views.chat-name-edit :refer [chat-name-edit]]
             [syng-im.components.profile :refer [profile my-profile]]
             [syng-im.utils.logging :as log]
             [syng-im.utils.utils :refer [toast]]
@@ -48,6 +49,7 @@
         :chat-list [chats-list]
         :new-group [new-group]
         :group-settings [group-settings]
+        :chat-name-edit [chat-name-edit]
         :contact-list [contact-list]
         :chat [chat]
         :profile [profile]

src/syng_im/components/styles.cljs

@@ -2,7 +2,8 @@
 
 (def font "sans-serif")
 ;; (def font "Avenir-Roman")
-(def title-font "sans-serif-medium")
+(def font-medium "sans-serif-medium")
+(def title-font font-medium)
 
 (def color-blue "#7099e6")
 (def color-blue-transparent "#7099e632")

src/syng_im/group_settings/group_settings.cljs

@@ -14,7 +14,7 @@
                                                text2-color]]
             [syng-im.group-settings.styles.group-settings :as st]
             [syng-im.utils.listview :refer [to-realm-datasource]]
-            [syng-im.group-settings.views.member :refer [contact-inner-view]]
+            [syng-im.group-settings.views.member :refer [member-view]]
             [reagent.core :as r]))
 
 (defn remove-member [{:keys [whisper-identity]}]
@@ -36,13 +36,13 @@
       [text {:style st/modal-remove-text}
        "Remove"]]]]])
 
-(defn set-group-chat-name [chat-name]
-  (dispatch [:set-group-chat-name chat-name]))
-
 (defn chat-members [members]
   [view st/chat-members-container
    (for [member members]
-     ^{:key member} [contact-inner-view member])])
+     ^{:key member} [member-view member])])
+
+(defn show-chat-name-edit []
+  (dispatch [:navigate-to :chat-name-edit]))
 
 (defn chat-icon []
   (let [chat-name (subscribe [:get-current-chat-name])]
@@ -63,12 +63,13 @@
        [new-group-toolbar]
        [text {:style st/chat-name-text}
         "Chat name"]
-       [text-input {:style                 st/chat-name-input
+       [view st/chat-name-value-container
-                    :underlineColorAndroid color-purple
+        [text {:style st/chat-name-value}
-                    :autoFocus             true
+         @chat-name]
-                    :placeholderTextColor  text2-color
+        [touchable-highlight {:style st/chat-name-btn-edit-container
-                    :onChangeText          set-group-chat-name}
+                              :on-press show-chat-name-edit}
-        @chat-name]
+         [text {:style st/chat-name-btn-edit-text}
+          "Edit"]]]
        [text {:style st/members-text}
         "Members"]
        [touchable-highlight {:on-press (fn []

src/syng_im/group_settings/styles/chat_name_edit.cljs

@@ -0,0 +1,19 @@
+(ns syng-im.group-settings.styles.chat-name-edit
+  (:require [syng-im.components.styles :refer [font
+                                               color-white
+                                               text1-color]]))
+
+(def save-action-icon
+  {:width  18
+   :height 14})
+
+(def chat-name-container
+  {:flex            1
+   :flexDirection   :column
+   :backgroundColor color-white})
+
+(def chat-name-input
+  {:marginLeft 12
+   :fontSize   14
+   :fontFamily font
+   :color      text1-color})

src/syng_im/group_settings/styles/group_settings.cljs

@@ -1,5 +1,6 @@
 (ns syng-im.group-settings.styles.group-settings
   (:require [syng-im.components.styles :refer [font
+                                               font-medium
                                                title-font
                                                color-white
                                                color-purple
@@ -63,22 +64,42 @@
    :marginLeft   16
    :marginBottom 16
    :color        text2-color
-   :fontFamily   font
+   :fontFamily   font-medium
    :fontSize     14
    :lineHeight   20})
 
-(def chat-name-input
+(def chat-name-value-container
-  {:marginLeft 12
+  {:flexDirection     :row
-   :fontSize   14
+   :marginLeft        16
+   :height            56
+   :alignItems        :center
+   :justifyContent    :center
+   :borderBottomWidth 1
+   :borderBottomColor separator-color})
+
+(def chat-name-value
+  {:flex       1
+   :fontSize   16
    :fontFamily font
    :color      text1-color})
 
+(def chat-name-btn-edit-container
+  {:padding        16
+   :justifyContent :center})
+
+(def chat-name-btn-edit-text
+  {:marginTop    -1
+   :color        text2-color
+   :fontFamily   font
+   :fontSize     16
+   :lineHeight   20})
+
 (def members-text
   {:marginTop    24
    :marginLeft   16
    :marginBottom 16
    :color        text2-color
-   :fontFamily   font
+   :fontFamily   font-medium
    :fontSize     14
    :lineHeight   20})
 
@@ -90,15 +111,14 @@
    :height           17})
 
 (def add-members-container
-  {:flexDirection :row
+  {:flexDirection :row})
-   :marginBottom  16})
 
 (def add-members-text
   {:marginTop  18
    :marginLeft 32
    :color      text2-color
    :fontFamily font
-   :fontSize   14
+   :fontSize   16
    :lineHeight 20})
 
 (def settings-text
@@ -106,6 +126,6 @@
    :marginLeft   16
    :marginBottom 16
    :color        text2-color
-   :fontFamily   font
+   :fontFamily   font-medium
    :fontSize     14
    :lineHeight   20})

src/syng_im/group_settings/views/chat_name_edit.cljs

@@ -0,0 +1,33 @@
+(ns syng-im.group-settings.views.chat-name-edit
+  (:require [reagent.core :as r]
+            [re-frame.core :refer [subscribe dispatch dispatch-sync]]
+            [syng-im.components.react :refer [view text-input]]
+            [syng-im.components.toolbar :refer [toolbar]]
+            [syng-im.group-settings.styles.chat-name-edit :as st]
+            [syng-im.components.styles :refer [toolbar-background2
+                                               text2-color]]))
+
+(defn save-group-chat-name [chat-name]
+  (dispatch [:set-group-chat-name chat-name])
+  (dispatch [:navigate-back]))
+
+(defn chat-name-edit-toolbar [chat-name]
+  [toolbar {:background-color toolbar-background2
+            :title           "Edit chat name"
+            ;; TODO change to dark 'ok' icon
+            :action          {:image   {:source {:uri :icon_ok}
+                                        :style  st/save-action-icon}
+                              :handler #(save-group-chat-name chat-name)}}])
+
+(defn chat-name-edit []
+  (let [current-chat-name (subscribe [:get-current-chat-name])
+        chat-name         (r/atom @current-chat-name)]
+    (fn []
+      [view st/chat-name-container
+       [chat-name-edit-toolbar @chat-name]
+       [text-input {:style                st/chat-name-input
+                    :autoFocus            true
+                    :placeholderTextColor text2-color
+                    :onChangeText         (fn [text]
+                                            (reset! chat-name text))}
+        @chat-name]])))

src/syng_im/group_settings/views/member.cljs

@@ -22,7 +22,7 @@
      [view st/online-dot-left]
      [view st/online-dot-right]]))
 
-(defn contact-inner-view [{:keys [whisper-identity name photo-path online role]}]
+(defn member-view [{:keys [whisper-identity name photo-path online role]}]
   [view st/contact-container
    [view st/photo-container
     [contact-photo {:photo-path photo-path}]

src/syng_im/subs.cljs

@@ -94,7 +94,7 @@
 (register-sub :get-current-chat-name
   (fn [db _]
     (let [current-chat-id (current-chat-id @db)]
-      (reaction (get-in @db (db/chat-name-path current-chat-id :name))))))
+      (reaction (get-in @db (db/chat-name-path current-chat-id))))))
 
 
 ;; -- User data --------------------------------------------------------------