Start chat design

src/syng_im/android/core.cljs

@@ -36,7 +36,10 @@
   (let [signed-up-atom (subscribe [:signed-up])]
     (fn []
       (let [signed-up @signed-up-atom]
-        [navigator {:initial-route (clj->js {:view-id :chat-list})
+        [navigator {:initial-route (clj->js {:view-id
+                                             ;:chat-list
+                                             :chat
+                                             })
                     :render-scene  (fn [route nav]
                                      (log/debug "route" route)
                                      (when true ;; nav/*nav-render*

src/syng_im/components/chat.cljs

@@ -39,16 +39,16 @@
             contacts            (:contacts @chat)
             contact-by-identity (contacts-by-identity contacts)]
         [view {:style {:flex            1
-                       :backgroundColor "#eef2f5"}}
+                       :backgroundColor "#EBF0F4"}}
          (when android?
            ;; TODO add IOS version
-           [toolbar-android {:logo          res/logo-icon
+           [toolbar-android {:logo          res/logo-icon ;; todo contact/chat avatar
                              :title         (or (@chat :name)
                                                 "Chat name")
                              :titleColor    "#4A5258"
                              :subtitle      "Last seen just now"
                              :subtitleColor "#AAB2B2"
-                             :navIcon       res/nav-back-icon
+                             :navIcon       res/icon-back
                              :style         {:backgroundColor "white"
                                              :height          56
                                              :elevation       2}

src/syng_im/components/chat/chat_message.cljs

@@ -66,23 +66,26 @@
 
 
 (defn message-content-command [content]
-  (let [;; command-msg-atom (subscribe [:parse-command-msg-content content])
+  (let [commands-atom (subscribe [:get-commands])]
-        commands-atom (subscribe [:get-commands])]
     (fn [content]
-      (let [;; {:keys [command content]} @command-msg-atom
+      (let [commands @commands-atom
-            commands @commands-atom
             {:keys [command content]} (parse-command-msg-content commands content)]
         [view {:style {:flexDirection "column"}}
-         [view {:style {:marginTop       -5
+         [view {:style {:flexDirection "row"
-                        :marginLeft      0
+                        :marginRight 32}}
-                        :backgroundColor (:color command)
+          [view {:style {:backgroundColor   (:color command)
-                        :borderRadius    10}}
+                         :height            24
-          [text {:style {:marginTop        0
+                         :borderRadius      50
-                         :marginHorizontal 10
+                         :paddingTop        2
-                         :fontSize         14
+                         :paddingHorizontal 12}}
-                         :fontFamily       "Avenir-Roman"
+           [text {:style {:fontSize         12
-                         :color            "white"}}
+                          :fontFamily       "Avenir-Roman"
-           (:text command)]]
+                          :color            "white"}}
+            (:text command)]]]
+         [image {:source (:icon command)
+                 :style {:position "absolute"
+                         :top      4
+                         :right    0}}]
          [text {:style {:marginTop        5
                         :marginHorizontal 0
                         :fontSize         14
@@ -97,21 +100,17 @@
   (dispatch [:set-response-chat-command msg-id (:command command)]))
 
 (defn message-content-command-request [msg-id content outgoing text-color background-color]
-  (let [;; command-request-atom (subscribe [:parse-command-request-msg-content content])
+  (let [commands-atom (subscribe [:get-commands])]
-        commands-atom (subscribe [:get-commands])]
     (fn [msg-id content outgoing text-color background-color]
-      (let [;; {:keys [command content]} @command-request-atom
+      (let [commands @commands-atom
-            commands @commands-atom
             {:keys [command content]} (parse-command-request-msg-content commands content)]
         [touchable-highlight {:onPress (fn []
                                          (set-chat-command msg-id command))}
-         [view {}
+         [view {:style {:paddingRight 16}}
-          [view {:style (merge {:marginTop         15
+          [view {:style (merge {:borderRadius 7
-                                :borderRadius      6
+                                :padding      12}
-                                :paddingVertical   12
-                                :paddingHorizontal 16}
                                (if outgoing
-                                 {:backgroundColor "#D3EEEF"}
+                                 {:backgroundColor "white"}
                                  {:backgroundColor background-color}))}
            [text {:style (merge {:fontSize   14
                                  :fontFamily "Avenir-Roman"}
@@ -120,30 +119,30 @@
                                   {:color text-color}))}
             content]]
           [view {:style {:position        "absolute"
-                         :top             0
+                         :top             12
-                         :left            20
+                         :right           0
-                         :width           30
+                         :width           32
-                         :height          30
+                         :height          32
                          :borderRadius    50
                          :backgroundColor (:color command)}}
-           [image {:source res/att
+           [image {:source (:request-icon command)
-                   :style  {:width    17
+                   :style  {:position "absolute"
-                            :height   14
+                            :top      9
-                            :position "absolute"
+                            :left     10}}]]
-                            :top      8
+          [text {:style {:marginTop  2
-                            :left     6}}]]]]))))
+                         :fontFamily "Avenir-Roman"
+                         :fontSize   12
+                         :color      "#AAB2B2"
+                         :opacity    0.8 }}
+           (str (:request-text command))]]]))))
 
 (defn message-content [{:keys [msg-id content-type content outgoing text-color background-color]}]
   (if (= content-type content-type-command-request)
     [message-content-command-request msg-id content outgoing text-color background-color]
-    [view {:style (merge {:borderRadius 6}
+    [view {:style (merge {:borderRadius 7
-                         (if (= content-type text-content-type)
+                          :padding 12}
-                           {:paddingVertical   12
-                            :paddingHorizontal 16}
-                           {:paddingVertical   14
-                            :paddingHorizontal 10})
                          (if outgoing
-                           {:backgroundColor "#D3EEEF"}
+                           {:backgroundColor "white"}
                            {:backgroundColor background-color}))}
      (cond
        (= content-type text-content-type)
@@ -168,7 +167,7 @@
            :style  {:marginTop 6
                     :opacity   0.6}}]
    [text {:style {:fontFamily "Avenir-Roman"
-                  :fontSize   11
+                  :fontSize   12
                   :color      "#AAB2B2"
                   :opacity    0.8
                   :marginLeft 5}}
@@ -178,31 +177,35 @@
       :failed "Failed")]])
 
 (defn message-body [{:keys [msg-id content content-type outgoing delivery-status text-color background-color]}]
-  [view {:style (merge {:flexDirection  "column"
+  (let [delivery-status :seen]
-                        :width          260
+   [view {:style (merge {:flexDirection "column"
-                        :marginVertical 5}
+                         :width         260
-                       (if outgoing
+                         :paddingTop    5
-                         {:alignSelf  "flex-end"
+                         :paddingRight  8
-                          :alignItems "flex-end"}
+                         :paddingBottom 5
-                         {:alignSelf  "flex-start"
+                         :paddingLeft   8}
-                          :alignItems "flex-start"}))}
+                        (if outgoing
-   [message-content {:msg-id           msg-id
+                          {:alignSelf  "flex-end"
-                     :content-type     content-type
+                           :alignItems "flex-end"}
-                     :content          content
+                          {:alignSelf  "flex-start"
-                     :outgoing         outgoing
+                           :alignItems "flex-start"}))}
-                     :text-color       text-color
+    [message-content {:msg-id           msg-id
-                     :background-color background-color}]
+                      :content-type     content-type
-   (when (and outgoing delivery-status)
+                      :content          content
-     [message-delivery-status {:delivery-status delivery-status}])])
+                      :outgoing         outgoing
+                      :text-color       text-color
+                      :background-color background-color}]
+    (when (and outgoing delivery-status)
+      [message-delivery-status {:delivery-status delivery-status}])]))
 
 (defn chat-message [{:keys [msg-id content content-type outgoing delivery-status date new-day text-color background-color] :as msg}]
-  [view {:paddingHorizontal 15}
+  [view {}
    (when new-day
      [message-date {:date date}])
    [message-body {:msg-id           msg-id
                   :content          content
                   :content-type     content-type
                   :outgoing         outgoing
-                  :text-color       text-color
+                  :text-color       "black" ;text-color
-                  :background-color background-color
+                  :background-color "white" ;background-color
                   :delivery-status  (keyword delivery-status)}]])

src/syng_im/components/chats/chats_list.cljs

@@ -30,11 +30,11 @@
          (when android?
            ;; TODO add IOS version
            [toolbar-android {:logo          res/logo-icon
-                             :title         "Your Chats"
+                             :title         "Chats"
                              :titleColor    "#4A5258"
                              :subtitle      "List of your recent chats"
                              :subtitleColor "#AAB2B2"
-                             :navIcon       res/nav-back-icon
+                             :navIcon       res/icon-list
                              :style         {:backgroundColor "white"
                                              :height          56
                                              :elevation       2}

src/syng_im/models/commands.cljs

@@ -4,6 +4,7 @@
             [cljs.core.async :as async :refer [chan put! <! >!]]
             [re-frame.core :refer [subscribe dispatch dispatch-sync]]
             [syng-im.db :as db]
+            [syng-im.resources :as res]
             [syng-im.models.chat :refer [current-chat-id]]
             [syng-im.utils.utils :refer [log toast]]
             [syng-im.utils.logging :as log]
@@ -14,6 +15,8 @@
                 :text "!money"
                 :description "Send money"
                 :color "#48ba30"
+                :request-icon res/icon-lock-white
+                :icon res/icon-lock-gray
                 :suggestion true}
                {:command :location
                 :text "!location"
@@ -28,7 +31,10 @@
                {:command :confirmation-code
                 :text "!confirmationCode"
                 :description "Send confirmation code"
-                :color "#019af0"
+                :request-text "Confirmation code request"
+                :color "#6581E7"
+                :request-icon res/icon-lock-white
+                :icon res/icon-lock-gray
                 :suggestion true}
                {:command :send
                 :text "!send"
@@ -43,7 +49,9 @@
                {:command :keypair-password
                 :text "!keypairPassword"
                 :description ""
-                :color "#019af0"
+                :color "#6581E7"
+                :request-icon res/icon-lock-white
+                :icon res/icon-lock-gray
                 :suggestion false}
                {:command :help
                 :text "!help"

src/syng_im/resources.cljs

@@ -13,3 +13,11 @@
 (def smile (js/require "./images/smile.png"))
 (def att (js/require "./images/att.png"))
 (def v (js/require "./images/v.png"))
+
+(def icon-back (js/require "./images/icon_back.png"))
+(def icon-dollar (js/require "./images/icon_dollar.png"))
+(def icon-list (js/require "./images/icon_list.png"))
+(def icon-lock-gray (js/require "./images/icon_lock_gray.png"))
+(def icon-lock-white (js/require "./images/icon_lock_white.png"))
+(def icon-ok-small (js/require "./images/icon_ok_small.png"))
+(def icon-smile (js/require "./images/icon_smile.png"))