Menu items icons. Hide actions menu on click outside.

Former-commit-id: ac11508703

src/syng_im/components/chat.cljs

@@ -101,16 +101,18 @@
      ^{:key member} [typing member])])
 
 (defn action-view [action]
-  [touchable-highlight {:on-press (:handler action)
+  [touchable-highlight {:on-press (fn []
+                                    (dispatch [:set-show-actions false])
+                                    ((:handler action)))
                         :underlay-color :transparent}
    [view {:style {:flexDirection   "row"
                   :height          56}}
     [view {:width  56
-           :height 56}
+           :height 56
+           :alignItems "center"
+           :justifyContent "center"}
      [image {:source {:uri (:icon action)}
-             :style  (merge (:icon-style action)
+             :style  (:icon-style action)}]]
-                            {:marginTop  21
-                             :marginLeft 23})}]]
     [view {:style {:flex 1
                    :alignItems "flex-start"
                    :justifyContent "center"}}
@@ -126,95 +128,133 @@
                       :fontFamily font}}
         subtitle])]]])
 
-(defn actions-view [navigator chat]
+(defn actions-list-view [navigator chat]
-  (when-let [actions (when (or true (and (:group-chat chat) ;; temp
+  (when-let [actions (when (and (:group-chat chat)
-                                         (:is-active chat)))
+                                (:is-active chat))
                        [{:title      "Add Contact to chat"
-                         :icon       "icon_group"
+                         :icon       "icon_menu_group"
-                         :icon-style {:width  14
+                         :icon-style {:width  25
-                                      :height 9}
+                                      :height 19}
                          :handler    #(dispatch [:show-add-participants navigator])}
                         {:title      "Remove Contact from chat"
                          :subtitle   "Alex, John"
-                         :icon       "icon_search"
+                         :icon       "icon_search_gray_copy"
-                         :icon-style {:width  14
+                         :icon-style {:width  17
-                                      :height 9}
+                                      :height 17}
                          :handler    #(dispatch [:show-remove-participants navigator])}
                         {:title      "Leave Chat"
-                         :icon       "icon_search"
+                         :icon       "icon_muted"
-                         :icon-style {:width  14
+                         :icon-style {:width  18
-                                      :height 9}
+                                      :height 21}
-                         :handler    #(dispatch [:leave-group-chat navigator])}])]
+                         :handler    #(dispatch [:leave-group-chat navigator])}
-    [view nil
+                        {:title      "Settings"
-     [view {:style {:marginLeft 16
+                         :subtitle   "Not implemented"
-                    :height 1.5
+                         :icon       "icon_settings"
+                         :icon-style {:width  20
+                                      :height 13}
+                         :handler    (fn [] )}])]
+    [view {:style {:backgroundColor color-white
+                   :elevation       2
+                   :position        "absolute"
+                   :top             56
+                   :left            0
+                   :right           0}}
+     [view {:style {:marginLeft      16
+                    :height          1.5
                     :backgroundColor separator-color}}]
      [view {:style {:marginVertical  10}}
       (for [action actions]
         ^{:key action} [action-view action])]]))
 
-(defn toolbar [navigator chat]
+(defn overlay [{:keys [on-click-outside]} items]
-  (let [show-actions true]
+  [view {:position "absolute"
-    [view {:style {:flexDirection "column"
+         :top      0
-                   :backgroundColor color-white
+         :bottom   0
-                   :elevation       2}}
+         :left     0
-     [view {:style {:flexDirection   "row"
+         :right    0}
-                    :height          56}}
+   [touchable-highlight {:on-press       on-click-outside
-      (when (not show-actions)
+                         :underlay-color :transparent
-        [touchable-highlight {:on-press (fn []
+                         :style          {:flex 1}}
-                                          (nav-pop navigator))
+    [view nil]]
-                              :underlay-color :transparent}
+   items])
-         [view {:width  56
+
-                :height 56}
+(defn actions-view [navigator chat]
-          [image {:source {:uri "icon_back"}
+  [overlay {:on-click-outside (fn []
-                  :style  {:marginTop  21
+                                (dispatch [:set-show-actions false]))}
-                           :marginLeft 23
+   [actions-list-view navigator chat]])
-                           :width      8
+
-                           :height     14}}]]])
+(defn toolbar [navigator chat show-actions]
-      [view {:style {:flex 1
+  [view {:style {:flex (if show-actions 1 0)}}
-                     :marginLeft (if show-actions 16 0)
+   [view {:style {:flexDirection "column"
-                     :alignItems "flex-start"
+                  :backgroundColor color-white
-                     :justifyContent "center"}}
+                  :elevation       2}}
-       [text {:style {:marginTop  -2.5
+    [view {:style {:flexDirection   "row"
-                      :color      text1-color
+                   :height          56}}
-                      :fontSize   16
+     (when (not show-actions)
-                      :fontFamily font}}
+       [touchable-highlight {:on-press (fn []
-        (or (chat :name)
+                                         (nav-pop navigator))
-            "Chat name")]
+                             :underlay-color :transparent}
-       (if (:group-chat chat)
+        [view {:width  56
-         [view {:style {:flexDirection "row"}}
+               :height 56}
-          [image {:source {:uri "icon_group"}
+         [image {:source {:uri "icon_back"}
-                  :style  {:marginTop 4
+                 :style  {:marginTop  21
-                           :width     14
+                          :marginLeft 23
-                           :height    9}}]
+                          :width      8
-          [text {:style {:marginTop  -0.5
+                          :height     14}}]]])
-                         :marginLeft 4
+     [view {:style {:flex 1
-                         :fontFamily font
+                    :marginLeft (if show-actions 16 0)
-                         :fontSize   12
+                    :alignItems "flex-start"
-                         :color      text2-color}}
+                    :justifyContent "center"}}
-           (str (count (:contacts chat))
+      [text {:style {:marginTop  -2.5
-                (if (< 1 (count (:contacts chat)))
+                     :color      text1-color
-                  " members"
+                     :fontSize   16
-                  " member")
+                     :fontFamily font}}
-                ", " (count (:contacts chat)) " active")]]
+       (or (chat :name)
-         [text {:style {:marginTop  1
+           "Chat name")]
-                        :color      text2-color
+      (if (:group-chat chat)
+        [view {:style {:flexDirection "row"}}
+         [image {:source {:uri "icon_group"}
+                 :style  {:marginTop 4
+                          :width     14
+                          :height    9}}]
+         [text {:style {:marginTop  -0.5
+                        :marginLeft 4
+                        :fontFamily font
                         :fontSize   12
-                        :fontFamily font}}
+                        :color      text2-color}}
-          "Active a minute ago"])]
+          (str (count (:contacts chat))
-      (when-not (:group-chat chat)
+               (if (< 1 (count (:contacts chat)))
-        [touchable-highlight {:on-press (fn []
+                 " members"
-                                          (nav-pop navigator))
+                 " member")
-                              :underlay-color :transparent}
+               ", " (count (:contacts chat)) " active")]]
-         [view {:style {:width  56
+        [text {:style {:marginTop  1
-                        :height 56}}
+                       :color      text2-color
-          [chat-photo {}]
+                       :fontSize   12
-          [contact-online {:online true}]]])]
+                       :fontFamily font}}
-     [actions-view navigator chat]]))
+         "Active a minute ago"])]
+     (if show-actions
+       [touchable-highlight {:on-press (fn []
+                                         (dispatch [:set-show-actions false]))
+                             :underlay-color :transparent}
+        [view {:style {:width  56
+                       :height 56}}
+         [image {:source {:uri "icon_up"}
+                 :style  {:marginTop  23
+                          :marginLeft 21
+                          :width      14
+                          :height     8}}]]]
+       [touchable-highlight {:on-press (fn []
+                                         (dispatch [:set-show-actions true]))
+                             :underlay-color :transparent}
+        [view {:style {:width  56
+                       :height 56}}
+         [chat-photo {}]
+         [contact-online {:online true}]]])]]])
 
 (defn chat [{:keys [navigator]}]
   (let [messages          (subscribe [:get-chat-messages])
-        chat              (subscribe [:get-current-chat])]
+        chat              (subscribe [:get-current-chat])
+        show-actions-atom (subscribe [:show-actions])]
     (fn []
       (let [msgs                @messages
                                         ;_                 (log/debug "messages=" msgs)
@@ -226,7 +266,7 @@
             contact-by-identity (contacts-by-identity contacts)]
         [view {:style {:flex            1
                        :backgroundColor chat-background}}
-         [toolbar navigator @chat]
+         [toolbar navigator @chat @show-actions-atom]
          (let [last-msg-id (:last-msg-id @chat)]
            [list-view {:dataSource            datasource
                        :renderScrollComponent (fn [props]
@@ -240,4 +280,6 @@
          (when (:group-chat @chat)
            [typing-all])
          (when (:is-active @chat)
-           [chat-message-new])]))))
+           [chat-message-new])
+         (when @show-actions-atom
+           [actions-view navigator @chat])]))))

src/syng_im/db.cljs

@@ -13,6 +13,7 @@
                                     :last-message    nil}
              :chats                {}
              :chats-updated-signal 0
+             :show-actions         false
              :new-group            #{}
              :new-participants     #{}
              :signed-up            false})
@@ -38,5 +39,6 @@
   [:chats chat-id :command-requests])
 (defn chat-command-request-path [chat-id msg-id]
   [:chats chat-id :command-requests msg-id])
+(def show-actions-path [:show-actions])
 (def new-group-path [:new-group])
 (def new-participants-path [:new-participants])

src/syng_im/handlers.cljs

@@ -117,6 +117,11 @@
                     (log/debug action commands)
                     (set-commands db commands)))
 
+(register-handler :set-show-actions
+  (fn [db [action show-actions]]
+    (log/debug action)
+    (assoc-in db db/show-actions-path show-actions)))
+
 ;; -- Protocol --------------------------------------------------------------
 
 (register-handler :initialize-protocol

src/syng_im/subs.cljs

@@ -109,6 +109,11 @@
    (reaction
     (get @db :signed-up))))
 
+(register-sub
+ :show-actions
+ (fn [db _]
+   (reaction (get-in @db db/show-actions-path))))
+
 (register-sub
   :get-contacts
   (fn [db _]