Chat icon component

Former-commit-id: 4ce65b37f9

src/syng_im/chat/screen.cljs

@@ -1,7 +1,6 @@
 (ns syng-im.chat.screen
   (:require-macros [syng-im.utils.views :refer [defview]])
-  (:require [clojure.string :as s]
+  (:require [re-frame.core :refer [subscribe dispatch]]
-            [re-frame.core :refer [subscribe dispatch]]
             [syng-im.components.react :refer [view
                                               text
                                               image
@@ -9,8 +8,9 @@
                                               touchable-highlight
                                               list-view
                                               list-item]]
+            [syng-im.components.chat-icon.screen :refer [chat-icon-view-action
+                                                         chat-icon-view-menu-item]]
             [syng-im.chat.styles.screen :as st]
-            [syng-im.resources :as res]
             [syng-im.utils.listview :refer [to-datasource]]
             [syng-im.components.invertible-scroll-view :refer [invertible-scroll-view]]
             [syng-im.components.toolbar :refer [toolbar]]
@@ -32,25 +32,13 @@
       (assoc msg :text-color text-color
                  :background-color background-color))))
 
-(defview default-chat-icon []
+(defview chat-icon []
-  [name  [:chat :name]
+  [chat-id    [:chat :chat-id]
-   color [:chat :color]]
+   group-chat [:chat :group-chat]
-  [view (st/default-chat-icon color)
+   name       [:chat :name]
-   [text {:style st/default-chat-icon-text} (nth name 0)]])
+   color      [:chat :color]]
-
+  ;; TODO stub data ('online' property)
-(defview chat-photo []
+  [chat-icon-view-action chat-id group-chat name color true])
-  [photo-path [:chat-photo]]
-  (if photo-path
-    [view st/contact-photo-container
-     [image {:source {:uri photo-path}
-             :style  st/chat-photo}]]
-    [default-chat-icon]))
-
-(defn contact-online [{:keys [online]}]
-  (when online
-    [view st/online-view
-     [view st/online-dot-left]
-     [view st/online-dot-right]]))
 
 (defn typing [member]
   [view st/typing-view
@@ -100,22 +88,13 @@
        [text {:style st/action-subtitle}
         subtitle])]]])
 
-(defn menu-item-contact-photo [{:keys [photo-path]}]
+(defview menu-item-icon-profile []
-  [image {:source (if (s/blank? photo-path)
+  [chat-id    [:chat :chat-id]
-                    res/user-no-photo
+   group-chat [:chat :group-chat]
-                    {:uri photo-path})
+   name       [:chat :name]
-          :style  st/menu-item-profile-contact-photo}])
+   color      [:chat :color]]
-
+  ;; TODO stub data ('online' property)
-(defn menu-item-contact-online [{:keys [online]}]
+  [chat-icon-view-menu-item chat-id group-chat name color true])
-  (when online
-    [view st/menu-item-profile-online-view
-     [view st/menu-item-profile-online-dot-left]
-     [view st/menu-item-profile-online-dot-right]]))
-
-(defn menu-item-icon-profile []
-  [view st/icon-view
-   [menu-item-contact-photo {}]
-   [menu-item-contact-online {:online true}]])
 
 (defn actions-list-view []
   (let [{:keys [group-chat chat-id]}
@@ -202,13 +181,12 @@
       (if @show-actions
         [touchable-highlight
          {:on-press #(dispatch [:set-show-actions false])}
-         [view st/icon-view
+         [view st/action
           [icon :up st/up-icon]]]
         [touchable-highlight
          {:on-press #(dispatch [:set-show-actions true])}
-         [view st/icon-view
+         [view st/action
-          [chat-photo {}]
+          [chat-icon]]]))))
-          [contact-online {:online true}]]]))))
 
 (defn chat-toolbar []
   (let [{:keys [group-chat name contacts]}

src/syng_im/chat/styles/screen.cljs

@@ -20,11 +20,15 @@
    :backgroundColor toolbar-background1
    :elevation       2})
 
+(def action
+  {:width          56
+   :height         56
+   :alignItems     :center
+   :justifyContent :center})
+
 (def icon-view
-  {:width       56
+  {:width  56
-   :height      56
+   :height 56})
-   :paddingTop  10
-   :paddingLeft 10})
 
 (def back-icon
   {:marginTop  21
@@ -50,10 +54,8 @@
    :height    9})
 
 (def up-icon
-  {:marginTop  23
+  {:width  14
-   :marginLeft 21
+   :height 8})
-   :width      14
-   :height     8})
 
 (def members
   {:marginTop  -0.5
@@ -110,28 +112,6 @@
    :fontSize   12
    :fontFamily font})
 
-(def online-view
-  {:position        :absolute
-   :top             30
-   :left            30
-   :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 (merge online-dot {:left 3}))
-(def online-dot-right (merge online-dot {:left 9}))
-
 (def typing-all
   {:marginBottom 20})
 
@@ -155,29 +135,6 @@
    :fontFamily font
    :color      text2-color})
 
-(defn default-chat-icon [color]
-  {:width           36
-   :height          36
-   :alignItems      :center
-   :justifyContent  :center
-   :borderRadius    50
-   :backgroundColor color})
-
-(def default-chat-icon-text
-  {:marginTop  -2
-   :color      color-white
-   :fontFamily font
-   :fontSize   16
-   :lineHeight 20})
-
-(def contact-photo-container
-  {:borderRadius 50})
-
-(def chat-photo
-  {:borderRadius 50
-   :width        36
-   :height       36})
-
 (def actions-overlay
   {:position :absolute
    :top      0
@@ -187,34 +144,3 @@
 
 (def overlay-highlight
   {:flex 1})
-
-;;----- Menu item Profile ----------------
-
-(def menu-item-profile-contact-photo
-  {:marginTop    13
-   :marginLeft   16
-   :borderRadius 50
-   :width        24
-   :height       24})
-
-(def menu-item-profile-online-view
-  {:position        :absolute
-   :top             26
-   :left            29
-   :width           15
-   :height          15
-   :borderRadius    50
-   :backgroundColor online-color
-   :borderWidth     2
-   :borderColor     color-white})
-
-(def menu-item-profile-online-dot
-  {:position        :absolute
-   :top             4
-   :width           3
-   :height          3
-   :borderRadius    50
-   :backgroundColor color-white})
-
-(def menu-item-profile-online-dot-left (merge menu-item-profile-online-dot {:left 1.7}))
-(def menu-item-profile-online-dot-right (merge menu-item-profile-online-dot {:left 6.3}))

src/syng_im/chats_list/styles.cljs

@@ -8,64 +8,17 @@
                                                text2-color
                                                new-messages-count-color]]))
 
-(defn default-chat-icon [color]
-  {:width           40
-   :height          40
-   :alignItems      :center
-   :justifyContent  :center
-   :borderRadius    50
-   :backgroundColor color})
-
-(def default-chat-icon-text
-  {:marginTop  -2
-   :color      color-white
-   :fontFamily font
-   :fontSize   16
-   :lineHeight 20})
-
-(def contact-photo-container
-  {:borderRadius 50})
-
-(def contact-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 chat-container
   {:flexDirection     :row
    :paddingVertical   15
    :paddingHorizontal 16
    :height            90})
 
-(def photo-container
+(def chat-icon-container
-  {:marginTop 2
+  {:marginTop  -2
-   :width     44
+   :marginLeft -4
-   :height    44})
+   :width      48
+   :height     48})
 
 (def item-container
   {:flexDirection :column

src/syng_im/chats_list/views/inner_item.cljs

@@ -1,33 +1,15 @@
 (ns syng-im.chats-list.views.inner-item
   (:require-macros [syng-im.utils.views :refer [defview]])
   (:require [syng-im.components.react :refer [view image icon text]]
+            [syng-im.components.chat-icon.screen :refer [chat-icon-view-chat-list]]
             [syng-im.chats-list.styles :as st]))
 
-(defn default-chat-icon [{:keys [name color]}]
-  [view (st/default-chat-icon color)
-   [text {:style st/default-chat-icon-text} (nth name 0)]])
-
-(defview contact-photo [chat]
-  [photo-path [:chat-photo (:chat-id chat)]]
-  (if photo-path
-    [view st/contact-photo-container
-     [image {:source {:uri photo-path}
-             :style  st/contact-photo-image}]]
-    [default-chat-icon chat]))
-
-(defn contact-online [online]
-  (when online
-    [view st/online-container
-     [view st/online-dot-left]
-     [view st/online-dot-right]]))
-
 (defn chat-list-item-inner-view
-  [{:keys [chat-id name photo-path delivery-status timestamp new-messages-count online
+  [{:keys [chat-id name color photo-path delivery-status timestamp new-messages-count
-           group-chat contacts] :as chat}]
+           online group-chat contacts] :as chat}]
   [view st/chat-container
-   [view st/photo-container
+   [view st/chat-icon-container
-    [contact-photo chat]
+    [chat-icon-view-chat-list chat-id group-chat name color online]]
-    [contact-online online]]
    [view st/item-container
     [view st/name-view
      [text {:style st/name-text} name]

src/syng_im/components/chat_icon/screen.cljs

@@ -0,0 +1,62 @@
+(ns syng-im.components.chat-icon.screen
+  (:require-macros [syng-im.utils.views :refer [defview]])
+  (:require [re-frame.core :refer [subscribe dispatch]]
+            [syng-im.components.react :refer [view
+                                              text
+                                              image
+                                              icon]]
+            [syng-im.components.chat-icon.styles :as st]))
+
+(defn default-chat-icon [name color styles]
+  [view (:default-chat-icon styles)
+   [text {:style (:default-chat-icon-text styles)}
+    (nth name 0)]])
+
+(defn chat-icon [photo-path styles]
+  [image {:source {:uri photo-path}
+          :style  (:chat-icon styles)}])
+
+(defn contact-online [online styles]
+  (when online
+    [view (:online-view styles)
+     [view (:online-dot-left styles)]
+     [view (:online-dot-right styles)]]))
+
+(defview chat-icon-view [chat-id group-chat name color online styles]
+  [photo-path [:chat-photo chat-id]]
+  [view (:container styles)
+   (if photo-path
+     [chat-icon photo-path styles]
+     [default-chat-icon name color styles])
+   (when (not group-chat)
+     [contact-online online styles])])
+
+(defn chat-icon-view-chat-list [chat-id group-chat name color online]
+  [chat-icon-view chat-id group-chat name color online
+   {:container              st/container-chat-list
+    :online-view            st/online-view
+    :online-dot-left        st/online-dot-left
+    :online-dot-right       st/online-dot-right
+    :chat-icon              st/chat-icon-chat-list
+    :default-chat-icon      (st/default-chat-icon-chat-list color)
+    :default-chat-icon-text st/default-chat-icon-text}])
+
+(defn chat-icon-view-action [chat-id group-chat name color online]
+  [chat-icon-view chat-id group-chat name color online
+   {:container              st/container
+    :online-view            st/online-view
+    :online-dot-left        st/online-dot-left
+    :online-dot-right       st/online-dot-right
+    :chat-icon              st/chat-icon
+    :default-chat-icon      (st/default-chat-icon color)
+    :default-chat-icon-text st/default-chat-icon-text}])
+
+(defn chat-icon-view-menu-item [chat-id group-chat name color online]
+  [chat-icon-view chat-id group-chat name color online
+   {:container              st/container-menu-item
+    :online-view            st/online-view-menu-item
+    :online-dot-left        st/online-dot-left-menu-item
+    :online-dot-right       st/online-dot-right-menu-item
+    :chat-icon              st/chat-icon-menu-item
+    :default-chat-icon      (st/default-chat-icon-menu-item color)
+    :default-chat-icon-text st/default-chat-icon-text}])

src/syng_im/components/chat_icon/styles.cljs

@@ -0,0 +1,103 @@
+(ns syng-im.components.chat-icon.styles
+  (:require [syng-im.components.styles :refer [font
+                                               title-font
+                                               color-white
+                                               chat-background
+                                               online-color
+                                               selected-message-color
+                                               separator-color
+                                               text1-color
+                                               text2-color
+                                               toolbar-background1]]))
+
+(defn default-chat-icon [color]
+  {:margin          4
+   :width           36
+   :height          36
+   :alignItems      :center
+   :justifyContent  :center
+   :borderRadius    50
+   :backgroundColor color})
+
+(defn default-chat-icon-chat-list [color]
+  (merge (default-chat-icon color)
+         {:width  40
+          :height 40}))
+
+(defn default-chat-icon-menu-item [color]
+  (merge (default-chat-icon color)
+         {:width  24
+          :height 24}))
+
+(def default-chat-icon-text
+  {:marginTop  -2
+   :color      color-white
+   :fontFamily font
+   :fontSize   16
+   :lineHeight 20})
+
+(def chat-icon
+  {:margin       4
+   :borderRadius 50
+   :width        36
+   :height       36})
+
+(def chat-icon-chat-list
+  (merge chat-icon
+         {:width  40
+          :height 40}))
+
+(def chat-icon-menu-item
+  (merge chat-icon
+         {:width  24
+          :height 24}))
+
+(def online-view
+  {:position        :absolute
+   :bottom          0
+   :right           0
+   :width           20
+   :height          20
+   :borderRadius    50
+   :backgroundColor online-color
+   :borderWidth     2
+   :borderColor     color-white})
+
+(def online-view-menu-item
+  (merge online-view
+         {:width 15
+          :height 15}))
+
+(def online-dot
+  {:position        :absolute
+   :top             6
+   :width           4
+   :height          4
+   :borderRadius    50
+   :backgroundColor color-white})
+
+(def online-dot-left (merge online-dot {:left 3}))
+(def online-dot-right (merge online-dot {:left 9}))
+
+(def online-dot-menu-item
+  (merge online-dot
+         {:top    4
+          :width  3
+          :height 3}))
+
+(def online-dot-left-menu-item
+  (merge online-dot-menu-item {:left 1.7}))
+(def online-dot-right-menu-item
+  (merge online-dot-menu-item {:left 6.3}))
+
+(def container
+  {:width  44
+   :height 44})
+
+(def container-chat-list
+  {:width  48
+   :height 48})
+
+(def container-menu-item
+  {:width  32
+   :height 32})

src/syng_im/group_settings/screen.cljs

@@ -1,7 +1,6 @@
 (ns syng-im.group-settings.screen
   (:require-macros [syng-im.utils.views :refer [defview]])
   (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
-            [syng-im.resources :as res]
             [syng-im.components.react :refer [view
                                               text-input
                                               text
@@ -13,6 +12,7 @@
                                               scroll-view
                                               touchable-highlight]]
             [syng-im.components.toolbar :refer [toolbar]]
+            [syng-im.components.chat-icon.screen :refer [chat-icon-view-action]]
             [syng-im.components.realm :refer [list-view]]
             [syng-im.components.styles :refer [color-purple
                                                text2-color]]
@@ -125,10 +125,12 @@
        ^{:key setting} [setting-view setting])]))
 
 (defview chat-icon []
-  [name  [:chat :name]
+  [chat-id    [:chat :chat-id]
-   color [:chat :color]]
+   group-chat [:chat :group-chat]
-  [view (st/chat-icon color)
+   name       [:chat :name]
-   [text {:style st/chat-icon-text} (nth name 0)]])
+   color      [:chat :color]]
+  [view st/action
+   [chat-icon-view-action chat-id group-chat name color false]])
 
 (defn new-group-toolbar []
   [toolbar {:title         "Chat settings"

src/syng_im/group_settings/styles/group_settings.cljs

@@ -52,21 +52,11 @@
 (def chat-members-container
   {:marginBottom 10})
 
-(defn chat-icon [color]
+(def action
-  {:margin          10
+  {:width          56
-   :width           36
+   :height         56
-   :height          36
+   :alignItems     :center
-   :alignItems      :center
+   :justifyContent :center})
-   :justifyContent  :center
-   :borderRadius    50
-   :backgroundColor color})
-
-(def chat-icon-text
-  {:marginTop  -2
-   :color      color-white
-   :fontFamily font
-   :fontSize   16
-   :lineHeight 20})
 
 (def group-settings
   {:flex            1