status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add drawer

This commit is contained in:
virvar 2016-05-05 17:03:34 +03:00
parent f06cdee11b
commit 55dc64f6e6
7 changed files with 307 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/syng_im/android/core.cljs
View File

@ -13,6 +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.utils.logging :as log]
[syng-im.utils.utils :refer [toast]]
[syng-im.navigation :as nav]
@ -55,7 +56,8 @@
:chat-list (r/as-element [chats-list {:navigator nav}])
:new-group (r/as-element [new-group {:navigator nav}])
:contact-list (r/as-element [contact-list {:navigator nav}])
:chat (r/as-element [chat {:navigator nav}])))
:chat (r/as-element [chat {:navigator nav}])
:profile (r/as-element [profile {:navigator nav}])))
(r/as-element [chat {:navigator nav}]))))}]))))
(defn init []

94
src/syng_im/components/chatmenu/chat_menu.cljs Normal file
View File

@ -0,0 +1,94 @@
(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"]]]])

168
src/syng_im/components/chatmenu/profile.cljs Normal file
View File

@ -0,0 +1,168 @@
(ns syng-im.components.chatmenu.profile
(:require [clojure.string :as s]
[re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.components.react :refer [android?
view
text
text-input
image
navigator
toolbar-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]]
[syng-im.components.toolbar :refer [toolbar]]))
(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 chats-list-toolbar []
[toolbar {:title "Profile"}])
(defn profile [navigator]
[view {:style {:flex 1
:backgroundColor "#FFF"
:flexDirection "column"}}
[toolbar {:title "Profile"}]
[view {:style {:flex .20
:alignItems "center"
:justifyContent "center"}}
[chat-photo {}]]
[view {:style {:flex .07
:alignItems "center"}}
[text {:style {:marginTop -2.5
:color text1-color
:fontSize 18}}
"Status"]]
[view {:style {:flex .13
:alignItems "center"
:marginRight 48
:marginLeft 48}}
[text {:style {:marginTop -2.5
:color text1-color
:alignItems "center"
:textAlign "center"
:fontSize 14}}
(str "The brash businessman’s braggadocio "
"and public exchange with candidates "
"in the US presidential election")]]
[view {:style {:flex .12
:flexDirection "row"
:alignItems "center"
:justifyContent "center"}}
[view {:style {:height 37
:justifyContent "center"
:backgroundColor "#7099E6"
:padding 8
:paddingLeft 20
:paddingRight 20
:marginRight 20
:borderRadius 20}}
[touchable-opacity
[text {:style {:marginTop -2.5
:color "white"
:fontSize 14}}
"Message"]]]
[view {:style {:width 38
:height 37
:alignItems "center"
:backgroundColor "#E3EBFA"
:padding 8
:borderRadius 19}}
[touchable-opacity
[text {:style {:marginTop -2.5
:color text3-color
:fontSize 22}}
"˅"]]]]
[view {:style {:flex .55
:alignItems "flex-start"
:flexDirection "column"
:paddingTop 10}}
[view {:style {:height 55
:justifyContent "center"
:marginLeft 20
:borderBottomWidth 1
:borderBottomColor "#ddd"}}
[touchable-opacity
[text {:style {:marginTop -2.5
:color text2-color
:fontSize 14}}
"Email"]]
[view {:style {:height 30
:borderBottomWidth 0
:marginLeft -5}}
[text-input
{:style {:height 40
:fontSize 15
:paddingBottom 15
:paddingLeft 5}
:value "christonphe_t@gmail.com"}]]]
[view {:style {:height 55
:justifyContent "center"
:marginLeft 20
:borderBottomWidth 1
:borderBottomColor "#ddd"
:marginTop 5}}
[touchable-opacity
[text {:style {:marginTop -2.5
:color text2-color
:fontSize 14}}
"Username"]]
[view {:style {:height 30
:borderBottomWidth 0
:marginLeft -5}}
[text-input {:style {:height 40
:fontSize 15
:paddingBottom 15
:paddingLeft 5}}
"christophe_t"]]]
[view {:style {:height 55
:justifyContent "center"
:marginLeft 20
:borderBottomWidth 1
:borderBottomColor "#ddd"
:marginTop 5}}
[touchable-opacity
[text {:style {:marginTop -2.5
:color text2-color
:fontSize 14}}
"URL"]]
[view {:style {:height 30
:borderBottomWidth 0
:marginLeft -5}}
[text-input {:style {:height 40
:fontSize 15
:paddingBottom 15
:paddingLeft 5}}
"http://instagram.com/etherium-wallet"]]]
[view {:style {:height 55
:justifyContent "center"
:marginLeft 20
:marginTop 5}}
[touchable-opacity
[text {:style {:marginTop -2.5
:color text2-color
:fontSize 14}}
"Phone"]]
[view {:style {:height 30
:borderBottomWidth 0
:marginLeft -5}}
[text-input {:style {:height 40
:fontSize 15
:paddingBottom 15
:paddingLeft 5}}
"+1 548 093 98 66"]]]]])

58
src/syng_im/components/chats/chats_list.cljs
View File

@ -5,6 +5,7 @@
text
image
touchable-highlight
drawer-layout-android
navigator]]
[syng-im.components.realm :refer [list-view]]
[syng-im.utils.logging :as log]
@ -13,6 +14,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.action-button :refer [action-button
action-button-item]]
[syng-im.components.styles :refer [font
@ -29,7 +31,8 @@
[toolbar {:nav-action {:image {:source {:uri "icon_hamburger"}
:style {:width 16
:height 12}}
:handler (fn [])}
:handler (fn []
(.openDrawer js/React.DrawerLayoutAndroid.drawer))}
:title "Chats"
:action {:image {:source {:uri "icon_search"}
:style {:width 17
@ -42,27 +45,32 @@
(let [chats @chats
_ (log/debug "chats=" chats)
datasource (to-realm-datasource chats)]
[view {:style {:flex 1
:backgroundColor "white"}}
[chats-list-toolbar]
[list-view {:dataSource datasource
:renderRow (fn [row section-id row-id]
(r/as-element [chat-list-item row navigator]))
:style {:backgroundColor "white"}}]
[action-button {:buttonColor color-blue}
[action-button-item {:title "New Chat"
:buttonColor "#9b59b6"
:onPress (fn []
(dispatch [:show-contacts navigator]))}
[icon {:name "android-create"
:style {:fontSize 20
:height 22
:color "white"}}]]
[action-button-item {:title "New Group Chat"
:buttonColor "#1abc9c"
:onPress (fn []
(dispatch [:show-group-new navigator]))}
[icon {:name "person-stalker"
:style {:fontSize 20
:height 22
:color "white"}}]]]]))))
[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))}
[view {:style {:flex 1
:backgroundColor "white"}}
[chats-list-toolbar]
[list-view {:dataSource datasource
:renderRow (fn [row section-id row-id]
(r/as-element [chat-list-item row navigator]))
:style {:backgroundColor "white"}}]
[action-button {:buttonColor color-blue}
[action-button-item {:title "New Chat"
:buttonColor "#9b59b6"
:onPress (fn []
(dispatch [:show-contacts navigator]))}
[icon {:name "android-create"
:style {:fontSize 20
:height 22
:color "white"}}]]
[action-button-item {:title "New Group Chat"
:buttonColor "#1abc9c"
:onPress (fn []
(dispatch [:show-group-new navigator]))}
[icon {:name "person-stalker"
:style {:fontSize 20
:height 22
:color "white"}}]]]]]))))

2
src/syng_im/components/react.cljs
View File

@ -12,6 +12,8 @@
(def toolbar-android (r/adapt-react-class (.-ToolbarAndroid js/React)))
(def list-view (r/adapt-react-class (.-ListView js/React)))
(def text-input (r/adapt-react-class (.-TextInput js/React)))
(def drawer-layout-android (r/adapt-react-class (.-DrawerLayoutAndroid js/React)))
(def touchable-opacity (r/adapt-react-class (.-TouchableOpacity js/React)))
(def platform (.. js/React -Platform -OS))

1
src/syng_im/components/styles.cljs
View File

@ -16,6 +16,7 @@
(def text1-color color-black)
(def text2-color color-gray)
(def text3-color color-blue)
(def online-color color-blue)
(def new-messages-count-color "#7099e632")
(def chat-background color-light-gray)

6
src/syng_im/handlers.cljs
View File

@ -384,6 +384,12 @@
;; -- Chats --------------------------------------------------------------
(register-handler :show-profile
(fn [db [action navigator]]
(log/debug action)
(nav-push navigator {:view-id :profile})
db))
(register-handler :show-chat
(fn [db [action chat-id navigator nav-type]]
(log/debug action "chat-id" chat-id)