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

Start custom toolbar 

Former-commit-id: 1b3c788ec7
This commit is contained in:
virvar 2016-05-02 16:56:42 +03:00
parent b9a51912fd
commit 5415896efe
3 changed files with 152 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

184
src/syng_im/components/chat.cljs
View File

@ -6,6 +6,7 @@
text text
image image
navigator navigator
touchable-highlight
toolbar-android]] toolbar-android]]
[syng-im.components.realm :refer [list-view]] [syng-im.components.realm :refer [list-view]]
[syng-im.components.styles :refer [font [syng-im.components.styles :refer [font
@ -14,6 +15,7 @@
chat-background chat-background
online-color online-color
selected-message-color selected-message-color
separator-color
text1-color text1-color
text2-color]] text2-color]]
[syng-im.utils.logging :as log] [syng-im.utils.logging :as log]
@ -41,7 +43,8 @@
:background-color background-color)))) :background-color background-color))))
(defn chat-photo [{:keys [photo-path]}] (defn chat-photo [{:keys [photo-path]}]
[view {:borderRadius 50} [view {:margin 10
:borderRadius 50}
[image {:source (if (s/blank? photo-path) [image {:source (if (s/blank? photo-path)
res/user-no-photo res/user-no-photo
{:uri photo-path}) {:uri photo-path})
@ -52,8 +55,8 @@
(defn contact-online [{:keys [online]}] (defn contact-online [{:keys [online]}]
(when online (when online
[view {:position "absolute" [view {:position "absolute"
:top 20 :top 30
:left 20 :left 30
:width 20 :width 20
:height 20 :height 20
:borderRadius 50 :borderRadius 50
@ -97,48 +100,117 @@
(for [member ["Geoff" "Justas"]] (for [member ["Geoff" "Justas"]]
^{:key member} [typing member])]) ^{:key member} [typing member])])
(defn toolbar-content-chat [chat] (defn action-view [action]
(let [group? (:group-chat chat)] [touchable-highlight {:on-press (:handler action)
:underlay-color :transparent}
[view {:style {:flexDirection "row"
:height 56}}
[view {:width 56
:height 56}
[image {:source {:uri (:icon action)}
:style (merge (:icon-style action)
{:marginTop 21
:marginLeft 23})}]]
[view {:style {:flex 1 [view {:style {:flex 1
:flexDirection "row" :alignItems "flex-start"
:backgroundColor "transparent"}} :justifyContent "center"}}
[view {:style {:flex 1 [text {:style {:marginTop -2.5
:alignItems "flex-start" :color text1-color
:justifyContent "center" :fontSize 14
:marginRight 112}} :fontFamily font}}
[text {:style {:marginTop -2.5 (:title action)]
:color text1-color (when-let [subtitle (:subtitle action)]
:fontSize 16 [text {:style {:marginTop 1
:fontFamily font}} :color text2-color
(or (chat :name) :fontSize 12
"Chat name")] :fontFamily font}}
(if group? subtitle])]]])
[view {:style {:flexDirection "row"}}
[image {:source {:uri "icon_group"} (defn actions-view [navigator chat]
:style {:marginTop 4 (when-let [actions (when (or true (and (:group-chat chat) ;; temp
:width 14 (:is-active chat)))
:height 9}}] [{:title "Add Contact to chat"
[text {:style {:marginTop -0.5 :icon "icon_group"
:marginLeft 4 :icon-style {:width 14
:fontFamily font :height 9}
:handler #(dispatch [:show-add-participants navigator])}
{:title "Remove Contact from chat"
:subtitle "Alex, John"
:icon "icon_search"
:icon-style {:width 14
:height 9}
:handler #(dispatch [:show-remove-participants navigator])}
{:title "Leave Chat"
:icon "icon_search"
:icon-style {:width 14
:height 9}
:handler #(dispatch [:leave-group-chat navigator])}])]
[view nil
[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]
(let [show-actions true]
[view {:style {:flexDirection "column"
:backgroundColor color-white
:elevation 2}}
[view {:style {:flexDirection "row"
:height 56}}
(when (not show-actions)
[touchable-highlight {:on-press (fn []
(nav-pop navigator))
:underlay-color :transparent}
[view {:width 56
:height 56}
[image {:source {:uri "icon_back"}
:style {:marginTop 21
:marginLeft 23
:width 8
:height 14}}]]])
[view {:style {:flex 1
:marginLeft (if show-actions 16 0)
:alignItems "flex-start"
:justifyContent "center"}}
[text {:style {:marginTop -2.5
:color text1-color
:fontSize 16
:fontFamily font}}
(or (chat :name)
"Chat name")]
(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
:color text2-color}}
(str (count (:contacts chat))
(if (< 1 (count (:contacts chat)))
" members"
" member")
", " (count (:contacts chat)) " active")]]
[text {:style {:marginTop 1
:color text2-color
:fontSize 12 :fontSize 12
:color text2-color}} :fontFamily font}}
(str (count (:contacts chat)) "Active a minute ago"])]
(if (< 1 (count (:contacts chat))) (when-not (:group-chat chat)
" members" [touchable-highlight {:on-press (fn []
" member") (nav-pop navigator))
", " (count (:contacts chat)) " active")]] :underlay-color :transparent}
[text {:style {:marginTop 1 [view {:style {:width 56
:color text2-color :height 56}}
:fontSize 12 [chat-photo {}]
:fontFamily font}} [contact-online {:online true}]]])]
"Active a minute ago"])] [actions-view navigator chat]]))
(when-not group?
[view {:style {:position "absolute"
:top 10
:right 66}}
[chat-photo {}]
[contact-online {:online true}]])]))
(defn chat [{:keys [navigator]}] (defn chat [{:keys [navigator]}]
(let [messages (subscribe [:get-chat-messages]) (let [messages (subscribe [:get-chat-messages])
@ -154,31 +226,7 @@
contact-by-identity (contacts-by-identity contacts)] contact-by-identity (contacts-by-identity contacts)]
[view {:style {:flex 1 [view {:style {:flex 1
:backgroundColor chat-background}} :backgroundColor chat-background}}
(when android? [toolbar navigator @chat]
;; TODO add IOS version
[toolbar-android {:navIcon {:uri "icon_back"}
:style {:backgroundColor color-white
:height 56
:elevation 2}
:actions (when (and (:group-chat @chat)
(:is-active @chat))
[{:title "Add Contact to chat"
:icon res/add-icon
:showWithText true}
{:title "Remove Contact from chat"
:icon res/trash-icon
:showWithText true}
{:title "Leave Chat"
:icon res/leave-icon
:showWithText true}])
:onActionSelected (fn [position]
(case position
0 (dispatch [:show-add-participants navigator])
1 (dispatch [:show-remove-participants navigator])
2 (dispatch [:leave-group-chat navigator])))
:onIconClicked (fn []
(nav-pop navigator))}
[toolbar-content-chat @chat]])
(let [last-msg-id (:last-msg-id @chat)] (let [last-msg-id (:last-msg-id @chat)]
[list-view {:dataSource datasource [list-view {:dataSource datasource
:renderScrollComponent (fn [props] :renderScrollComponent (fn [props]

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

@ -4,8 +4,8 @@
view view
text text
image image
navigator touchable-highlight
toolbar-android]] navigator]]
[syng-im.components.realm :refer [list-view]] [syng-im.components.realm :refer [list-view]]
[syng-im.utils.logging :as log] [syng-im.utils.logging :as log]
[syng-im.navigation :refer [nav-pop]] [syng-im.navigation :refer [nav-pop]]
@ -24,6 +24,38 @@
text2-color]] text2-color]]
[syng-im.components.icons.ionicons :refer [icon]])) [syng-im.components.icons.ionicons :refer [icon]]))
(defn toolbar []
[view {:style {:flexDirection "row"
:backgroundColor color-white
:height 56
:elevation 2}}
[touchable-highlight {:on-press (fn []
)
:underlay-color :transparent}
[view {:width 56
:height 56}
[image {:source {:uri "icon_hamburger"}
:style {:marginTop 22
:marginLeft 20
:width 16
:height 12}}]]]
[view {:style {:flex 1
:alignItems "center"
:justifyContent "center"}}
[text {:style {:marginTop -2.5
:color text1-color
:fontSize 16
:fontFamily font}}
"Chats"]]
[touchable-highlight {:on-press (fn []
)
:underlay-color :transparent}
[view {:width 56
:height 56}
[image {:source {:uri "icon_search"}
:style {:margin 19.5
:width 17
:height 17}}]]]])
(defn chats-list [{:keys [navigator]}] (defn chats-list [{:keys [navigator]}]
(let [chats (subscribe [:get-chats])] (let [chats (subscribe [:get-chats])]
@ -33,27 +65,7 @@
datasource (to-realm-datasource chats)] datasource (to-realm-datasource chats)]
[view {:style {:flex 1 [view {:style {:flex 1
:backgroundColor "white"}} :backgroundColor "white"}}
(when android? [toolbar]
;; TODO add IOS version
[toolbar-android {:navIcon {:uri "icon_hamburger"}
:style {:backgroundColor color-white
:height 56
:elevation 2}
:onIconClicked (fn []
(nav-pop navigator))
:actions [{:title "Search"
:icon {:uri "icon_search"}
:show "always"}]}
[view {:style {:flex 1
:alignItems "center"
:justifyContent "center"
:marginRight 112
:backgroundColor "transparent"}}
[text {:style {:marginTop -2.5
:color text1-color
:fontSize 16
:fontFamily font}}
"Chats"]]])
[list-view {:dataSource datasource [list-view {:dataSource datasource
:renderRow (fn [row section-id row-id] :renderRow (fn [row section-id row-id]
(r/as-element [chat-list-item row navigator])) (r/as-element [chat-list-item row navigator]))

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

@ -19,3 +19,4 @@
(def new-messages-count-color "#7099e632") (def new-messages-count-color "#7099e632")
(def chat-background "#EBF0F4") (def chat-background "#EBF0F4")
(def selected-message-color "#E4E9ED") (def selected-message-color "#E4E9ED")
(def separator-color "#0000001f")