Group settings members

Former-commit-id: 344f64b9f2

src/syng_im/components/group_settings.cljs

@@ -13,8 +13,7 @@
                                                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]]
+            [syng-im.components.group-settings-member :refer [contact-inner-view]]
             [reagent.core :as r]))
 
 (defn set-group-settings-name [chat-name]
@@ -26,9 +25,7 @@
 (defn chat-members [members]
   [view st/chat-members-container
    (for [member members]
-     ^{:key member} [contact-inner-view member]
-     ;; [new-group-contact member nil]
-     )])
+     ^{:key member} [contact-inner-view member])])
 
 (defn action-save []
   [touchable-highlight
@@ -37,7 +34,7 @@
     [text {:style st/save-btn-text} "S"]]])
 
 (defn new-group-toolbar []
-  [toolbar {:title  "Chat settings"
+  [toolbar {:title         "Chat settings"
             :custom-action [action-save]}])
 
 (defn group-settings []
@@ -46,24 +43,23 @@
     (fn []
       [view st/group-settings
        [new-group-toolbar]
-       [view st/properties-container
-        [text {:style st/chat-name-text}
-         "Chat name"]
-        [text-input {:style                 st/chat-name-input
-                     :underlineColorAndroid color-purple
-                     :autoFocus             true
-                     :placeholderTextColor  text2-color
-                     :onChangeText          set-group-settings-name}
-         @chat-name]
-        [text {:style st/members-text}
-         "Members"]
-        [touchable-highlight {:on-press (fn []
-                                          ;; TODO not implemented
-                                          )}
-         [view st/add-members-container
-          [icon :add-gray st/add-members-icon]
-          [text {:style st/add-members-text}
-           "Add members"]]]
-        [chat-members (vals (js->clj @members :keywordize-keys true))]
-        [text {:style st/settings-text}
-         "Settings"]]])))
+       [text {:style st/chat-name-text}
+        "Chat name"]
+       [text-input {:style                 st/chat-name-input
+                    :underlineColorAndroid color-purple
+                    :autoFocus             true
+                    :placeholderTextColor  text2-color
+                    :onChangeText          set-group-settings-name}
+        @chat-name]
+       [text {:style st/members-text}
+        "Members"]
+       [touchable-highlight {:on-press (fn []
+                                         ;; TODO not implemented
+                                         )}
+        [view st/add-members-container
+         [icon :add-gray st/add-members-icon]
+         [text {:style st/add-members-text}
+          "Add members"]]]
+       [chat-members (vals (js->clj @members :keywordize-keys true))]
+       [text {:style st/settings-text}
+        "Settings"]])))

src/syng_im/components/group_settings_member.cljs

@@ -0,0 +1,39 @@
+(ns syng-im.components.group-settings-member
+  (:require [clojure.string :as s]
+            [syng-im.components.react :refer [view image text icon touchable-highlight]]
+            [syng-im.resources :as res]
+            [syng-im.components.group-settings-member-styles :as st]))
+
+(defn contact-photo [{:keys [photo-path]}]
+  [view st/contact-photo-container
+   [image {:source (if (s/blank? photo-path)
+                     res/user-no-photo
+                     {:uri photo-path})
+           :style  st/photo-image}]])
+
+(defn contact-online [{:keys [online]}]
+  (when online
+    [view st/online-container
+     [view st/online-dot-left]
+     [view st/online-dot-right]]))
+
+(defn contact-inner-view [{:keys [name photo-path online role]}]
+  [view st/contact-container
+   [view st/photo-container
+    [contact-photo {:photo-path photo-path}]
+    [contact-online {:online online}]]
+   [view st/info-container
+    [text {:style st/name-text}
+     (if (pos? (count name))
+       name
+       ;; todo is this correct behaviour?
+       "Noname")]
+    ;; TODO implement :role property for group chat contact
+    (when role
+      [text {:style st/role-text}
+       role])]
+   [touchable-highlight {:on-press (fn []
+                                     ;; TODO not implemented
+                                     )}
+    [view st/more-btn
+     [icon :more-vertical st/more-btn-icon]]]])

src/syng_im/components/group_settings_member_styles.cljs

@@ -0,0 +1,89 @@
+(ns syng-im.components.group-settings-member-styles
+  (:require [syng-im.components.styles :refer [font
+                                               title-font
+                                               text1-color
+                                               text2-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 info-container
+  {:flex           1
+   :flexDirection  :column
+   :marginLeft     16
+   :justifyContent :center})
+
+(def name-text
+  {:marginTop  -2
+   :fontSize   16
+   :fontFamily font
+   :color      text1-color})
+
+(def role-text
+  {:marginTop  1
+   :fontSize   12
+   :fontFamily font
+   :color      text2-color})
+
+(def more-btn
+  {:width          56
+   :height         56
+   :alignItems     :center
+   :justifyContent :center })
+
+(def more-btn-icon
+  {:width  4
+   :height 16})

src/syng_im/components/group_settings_styles.cljs

@@ -34,11 +34,9 @@
    :flexDirection   :column
    :backgroundColor color-white})
 
-(def properties-container
-  {:marginHorizontal 16})
-
 (def chat-name-text
   {:marginTop    24
+   :marginLeft   16
    :marginBottom 16
    :color        text2-color
    :fontFamily   font
@@ -46,13 +44,14 @@
    :lineHeight   20})
 
 (def chat-name-input
-  {:marginLeft -4
+  {:marginLeft 12
    :fontSize   14
    :fontFamily font
    :color      text1-color})
 
 (def members-text
   {:marginTop    24
+   :marginLeft   16
    :marginBottom 16
    :color        text2-color
    :fontFamily   font
@@ -61,6 +60,7 @@
 
 (def add-members-icon
   {:marginVertical   19
+   :marginLeft       19
    :marginHorizontal 3
    :width            17
    :height           17})
@@ -79,6 +79,7 @@
 
 (def settings-text
   {:marginTop    24
+   :marginLeft   16
    :marginBottom 16
    :color        text2-color
    :fontFamily   font