Fix drawer styles. Rename

Former-commit-id: b76a3d4afd

src/syng_im/android/core.cljs

@@ -13,7 +13,7 @@
             [syng-im.components.chats.new-group :refer [new-group]]
             [syng-im.components.chat.new-participants :refer [new-participants]]
             [syng-im.components.chat.remove-participants :refer [remove-participants]]
-            [syng-im.components.chatmenu.profile :refer [profile]]
+            [syng-im.components.profile :refer [profile]]
             [syng-im.utils.logging :as log]
             [syng-im.utils.utils :refer [toast]]
             [syng-im.navigation :as nav]

src/syng_im/components/chatmenu/chat_menu.cljs

@@ -1,94 +0,0 @@
-(ns syng-im.components.chatmenu.chat_menu
-  (:require [clojure.string :as s]
-            [re-frame.core :refer [subscribe dispatch dispatch-sync]]
-            [syng-im.components.react :refer [android?
-                                              view
-                                              text
-                                              image
-                                              navigator
-                                              toolbar-android
-                                              drawer-layout-android
-                                              touchable-opacity]]
-            [syng-im.resources :as res]
-            [syng-im.components.styles :refer [font
-                                               title-font
-                                               color-white
-                                               chat-background
-                                               online-color
-                                               selected-message-color
-                                               text1-color
-                                               text2-color
-                                               text3-color]]))
-
-(defn chat-photo [{:keys [photo-path]}]
-  [view {:borderRadius 50}
-   [image {:source (if (s/blank? photo-path)
-                     res/user-no-photo
-                     {:uri photo-path})
-           :style  {:borderRadius 50
-                    :width        66
-                    :height       66}}]])
-
-(defn chat-menu [navigator]
-  [view {:style {:flex            1
-                 :backgroundColor "#FFF"
-                 :flexDirection   "column"}}
-   [view {:style {:flex           .25
-                  :alignItems     "center"
-                  :justifyContent "center"}}
-    [chat-photo {}]]
-   [view {:style {:flex       .15
-                  :alignItems "center"}}
-    [text {:style {:marginTop -2.5
-                   :color     text1-color
-                   :fontSize  18}}
-     "Status"]]
-   [view {:style {:flex          .50
-                  :alignItems    "flex-start"
-                  :flexDirection "column"
-                  :paddingTop    10}}
-    [view {:style {:height         40
-                   :justifyContent "center"
-                   :padding        10
-                   :paddingLeft    20}}
-     [touchable-opacity
-      [text {:style {:marginTop -2.5
-                     :color     text1-color
-                     :fontSize  14}
-             :onPress (fn []
-                        (dispatch [:show-profile navigator]))}
-       "Profile"]]]
-    [view {:style {:height         40
-                   :justifyContent "center"
-                   :padding        10
-                   :paddingLeft    20}}
-     [touchable-opacity
-      [text {:style {:marginTop -2.5
-                     :color     text1-color
-                     :fontSize  14}}
-       "Settings"]]]
-    [view {:style {:height         40
-                   :justifyContent "center"
-                   :padding        10
-                   :paddingLeft    20}}
-     [touchable-opacity
-      [text {:style {:marginTop -2.5
-                     :color     text1-color
-                     :fontSize  14}}
-       "Invite friends"]]]
-    [view {:style {:height         40
-                   :justifyContent "center"
-                   :padding        10
-                   :paddingLeft    20}}
-     [touchable-opacity
-      [text {:style {:marginTop -2.5
-                     :color     text1-color
-                     :fontSize  14}}
-       "FAQ"]]]]
-   [view {:style {:flex       .10
-                  :alignItems "center"}}
-    [touchable-opacity
-     [text {:style {:marginTop -2.5
-                    :color     text3-color
-                    :fontSize  14}}
-      "Switch User"]]]])

src/syng_im/components/chats/chats_list.cljs

@@ -5,7 +5,6 @@
                                               text
                                               image
                                               touchable-highlight
-                                              drawer-layout-android
                                               navigator]]
             [syng-im.components.realm :refer [list-view]]
             [syng-im.utils.logging :as log]
@@ -14,7 +13,7 @@
             [syng-im.utils.listview :refer [to-realm-datasource]]
             [reagent.core :as r]
             [syng-im.components.chats.chat-list-item :refer [chat-list-item]]
-            [syng-im.components.chatmenu.chat_menu :refer [chat-menu]]
+            [syng-im.components.drawer :refer [drawer-view open-drawer]]
             [syng-im.components.action-button :refer [action-button
                                                       action-button-item]]
             [syng-im.components.styles :refer [font
@@ -31,8 +30,7 @@
   [toolbar {:nav-action {:image   {:source {:uri "icon_hamburger"}
                                    :style  {:width      16
                                             :height     12}}
-                         :handler (fn []
+                         :handler open-drawer}
-                                    (.openDrawer js/React.DrawerLayoutAndroid.drawer))}
             :title      "Chats"
             :action     {:image {:source {:uri "icon_search"}
                                  :style  {:width  17
@@ -45,11 +43,7 @@
       (let [chats      @chats
             _          (log/debug "chats=" chats)
             datasource (to-realm-datasource chats)]
-        [drawer-layout-android {:drawerWidth    300
+        [drawer-view {:navigator navigator}
-                                :drawerPosition js/React.DrawerLayoutAndroid.positions.Left
-                                :render-navigation-view #(r/as-element [chat-menu navigator])
-                                :ref  (fn [drawer]
-                                        (set! js/React.DrawerLayoutAndroid.drawer drawer))}
          [view {:style {:flex            1
                         :backgroundColor "white"}}
           [chats-list-toolbar]

src/syng_im/components/drawer.cljs

@@ -0,0 +1,91 @@
+(ns syng-im.components.drawer
+  (:require [clojure.string :as s]
+            [re-frame.core :refer [subscribe dispatch dispatch-sync]]
+            [reagent.core :as r]
+            [syng-im.components.react :refer [android?
+                                              view
+                                              text
+                                              image
+                                              navigator
+                                              toolbar-android
+                                              drawer-layout-android
+                                              touchable-opacity]]
+            [syng-im.resources :as res]
+            [syng-im.components.styles :refer [font
+                                               title-font
+                                               color-white
+                                               chat-background
+                                               online-color
+                                               selected-message-color
+                                               text1-color
+                                               text2-color
+                                               text3-color]]))
+
+(defonce drawer-atom (atom))
+
+(defn open-drawer []
+  (.openDrawer @drawer-atom))
+
+(defn user-photo [{:keys [photo-path]}]
+  [view {:borderRadius 50}
+   [image {:source (if (s/blank? photo-path)
+                     res/user-no-photo
+                     {:uri photo-path})
+           :style  {:borderRadius 50
+                    :width        64
+                    :height       64}}]])
+
+(defn menu-item [{:keys [name handler]}]
+  [touchable-opacity {:style {:height      48
+                              :paddingLeft 16
+                              :paddingTop  14}
+                      :onPress handler}
+   [text {:style {:fontSize   14
+                  :fontFamily font
+                  :lineHeight 21
+                  :color      text1-color}}
+    name]])
+
+(defn drawer-menu [navigator]
+  [view {:style {:flex            1
+                 :backgroundColor color-white
+                 :flexDirection   :column}}
+   [view {:style {:marginTop      40
+                  :alignItems     :center
+                  :justifyContent :center}}
+    [user-photo {}]]
+   [view {:style {:marginTop  20
+                  :alignItems :center}}
+    [text {:style {:marginTop -2.5
+                   :color     text1-color
+                   :fontSize  16}}
+     "Status"]]
+   [view {:style {:flex          1
+                  :marginTop     80
+                  :alignItems    :stretch
+                  :flexDirection :column}}
+    [menu-item {:name    "Profile"
+                :handler (fn []
+                           (dispatch [:show-profile navigator]))}]
+    [menu-item {:name    "Settings"
+                :handler (fn [])}]
+    [menu-item {:name    "Invite friends"
+                :handler (fn [])}]
+    [menu-item {:name    "FAQ"
+                :handler (fn [])}]]
+   [view {:style {:paddingVertical 36
+                  :alignItems :center}}
+    [touchable-opacity {}
+     [text {:style {:fontSize   14
+                    :fontFamily font
+                    :lineHeight 21
+                    :color      text3-color}}
+      "Switch users"]]]])
+
+(defn drawer-view [{:keys [navigator]} items]
+  [drawer-layout-android {:drawerWidth            300
+                          :drawerPosition         js/React.DrawerLayoutAndroid.positions.Left
+                          :render-navigation-view #(r/as-element [drawer-menu navigator])
+                          :ref  (fn [drawer]
+                                  (reset! drawer-atom drawer))}
+   items])

src/syng_im/components/profile.cljs

@@ -1,4 +1,4 @@
-(ns syng-im.components.chatmenu.profile
+(ns syng-im.components.profile
   (:require [clojure.string :as s]
             [re-frame.core :refer [subscribe dispatch dispatch-sync]]
             [syng-im.components.react :refer [android?
@@ -30,14 +30,12 @@
                     :width        66
                     :height       66}}]])
 
-(defn chats-list-toolbar []
+(defn profile [{:keys [navigator]}]
-  [toolbar {:title "Profile"}])
-
-(defn profile [navigator]
   [view {:style {:flex            1
                  :backgroundColor "#FFF"
                  :flexDirection   "column"}}
-   [toolbar {:title "Profile"}]
+   [toolbar {:navigator navigator
+             :title "Profile"}]
    [view {:style {:flex           .20
                   :alignItems     "center"
                   :justifyContent "center"}}