From b76a3d4afdac739b0e98838d9a193d612ad8435b Mon Sep 17 00:00:00 2001 From: virvar Date: Fri, 6 May 2016 11:40:18 +0300 Subject: [PATCH] Fix drawer styles. Rename --- src/syng_im/android/core.cljs | 2 +- .../components/chatmenu/chat_menu.cljs | 94 ------------------- src/syng_im/components/chats/chats_list.cljs | 18 ++-- src/syng_im/components/drawer.cljs | 91 ++++++++++++++++++ .../components/{chatmenu => }/profile.cljs | 10 +- 5 files changed, 102 insertions(+), 113 deletions(-) delete mode 100644 src/syng_im/components/chatmenu/chat_menu.cljs create mode 100644 src/syng_im/components/drawer.cljs rename src/syng_im/components/{chatmenu => }/profile.cljs (97%) diff --git a/src/syng_im/android/core.cljs b/src/syng_im/android/core.cljs index 260e3d78e3..22c1ecdb51 100644 --- a/src/syng_im/android/core.cljs +++ b/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] diff --git a/src/syng_im/components/chatmenu/chat_menu.cljs b/src/syng_im/components/chatmenu/chat_menu.cljs deleted file mode 100644 index f9fd0663a4..0000000000 --- a/src/syng_im/components/chatmenu/chat_menu.cljs +++ /dev/null @@ -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"]]]]) diff --git a/src/syng_im/components/chats/chats_list.cljs b/src/syng_im/components/chats/chats_list.cljs index a22a8a5f77..eaf055b981 100644 --- a/src/syng_im/components/chats/chats_list.cljs +++ b/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 @@ -28,11 +27,10 @@ [syng-im.components.icons.ionicons :refer [icon]])) (defn chats-list-toolbar [] - [toolbar {:nav-action {:image {:source {:uri "icon_hamburger"} - :style {:width 16 - :height 12}} - :handler (fn [] - (.openDrawer js/React.DrawerLayoutAndroid.drawer))} + [toolbar {:nav-action {:image {:source {:uri "icon_hamburger"} + :style {:width 16 + :height 12}} + :handler open-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 - :drawerPosition js/React.DrawerLayoutAndroid.positions.Left - :render-navigation-view #(r/as-element [chat-menu navigator]) - :ref (fn [drawer] - (set! js/React.DrawerLayoutAndroid.drawer drawer))} + [drawer-view {:navigator navigator} [view {:style {:flex 1 :backgroundColor "white"}} [chats-list-toolbar] diff --git a/src/syng_im/components/drawer.cljs b/src/syng_im/components/drawer.cljs new file mode 100644 index 0000000000..4a54004f5a --- /dev/null +++ b/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]) diff --git a/src/syng_im/components/chatmenu/profile.cljs b/src/syng_im/components/profile.cljs similarity index 97% rename from src/syng_im/components/chatmenu/profile.cljs rename to src/syng_im/components/profile.cljs index 16e91a32c7..f7434cd03a 100644 --- a/src/syng_im/components/chatmenu/profile.cljs +++ b/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 [] - [toolbar {:title "Profile"}]) - -(defn profile [navigator] +(defn profile [{:keys [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"}}