From 1b3c788ec76d3a69f1a47cd84b3d2bbfc2d04f7b Mon Sep 17 00:00:00 2001 From: virvar Date: Mon, 2 May 2016 16:56:42 +0300 Subject: [PATCH] Start custom toolbar --- src/syng_im/components/chat.cljs | 184 ++++++++++++------- src/syng_im/components/chats/chats_list.cljs | 58 +++--- src/syng_im/components/styles.cljs | 1 + 3 files changed, 152 insertions(+), 91 deletions(-) diff --git a/src/syng_im/components/chat.cljs b/src/syng_im/components/chat.cljs index ab8baa031c..07b3ff0abd 100644 --- a/src/syng_im/components/chat.cljs +++ b/src/syng_im/components/chat.cljs @@ -6,6 +6,7 @@ text image navigator + touchable-highlight toolbar-android]] [syng-im.components.realm :refer [list-view]] [syng-im.components.styles :refer [font @@ -14,6 +15,7 @@ chat-background online-color selected-message-color + separator-color text1-color text2-color]] [syng-im.utils.logging :as log] @@ -41,7 +43,8 @@ :background-color background-color)))) (defn chat-photo [{:keys [photo-path]}] - [view {:borderRadius 50} + [view {:margin 10 + :borderRadius 50} [image {:source (if (s/blank? photo-path) res/user-no-photo {:uri photo-path}) @@ -52,8 +55,8 @@ (defn contact-online [{:keys [online]}] (when online [view {:position "absolute" - :top 20 - :left 20 + :top 30 + :left 30 :width 20 :height 20 :borderRadius 50 @@ -97,48 +100,117 @@ (for [member ["Geoff" "Justas"]] ^{:key member} [typing member])]) -(defn toolbar-content-chat [chat] - (let [group? (:group-chat chat)] +(defn action-view [action] + [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 - :flexDirection "row" - :backgroundColor "transparent"}} - [view {:style {:flex 1 - :alignItems "flex-start" - :justifyContent "center" - :marginRight 112}} - [text {:style {:marginTop -2.5 - :color text1-color - :fontSize 16 - :fontFamily font}} - (or (chat :name) - "Chat name")] - (if group? - [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 + :alignItems "flex-start" + :justifyContent "center"}} + [text {:style {:marginTop -2.5 + :color text1-color + :fontSize 14 + :fontFamily font}} + (:title action)] + (when-let [subtitle (:subtitle action)] + [text {:style {:marginTop 1 + :color text2-color + :fontSize 12 + :fontFamily font}} + subtitle])]]]) + +(defn actions-view [navigator chat] + (when-let [actions (when (or true (and (:group-chat chat) ;; temp + (:is-active chat))) + [{:title "Add Contact to chat" + :icon "icon_group" + :icon-style {:width 14 + :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 - :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 - :fontFamily font}} - "Active a minute ago"])] - (when-not group? - [view {:style {:position "absolute" - :top 10 - :right 66}} - [chat-photo {}] - [contact-online {:online true}]])])) + :fontFamily font}} + "Active a minute ago"])] + (when-not (:group-chat chat) + [touchable-highlight {:on-press (fn [] + (nav-pop navigator)) + :underlay-color :transparent} + [view {:style {:width 56 + :height 56}} + [chat-photo {}] + [contact-online {:online true}]]])] + [actions-view navigator chat]])) (defn chat [{:keys [navigator]}] (let [messages (subscribe [:get-chat-messages]) @@ -154,31 +226,7 @@ contact-by-identity (contacts-by-identity contacts)] [view {:style {:flex 1 :backgroundColor chat-background}} - (when android? - ;; 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]]) + [toolbar navigator @chat] (let [last-msg-id (:last-msg-id @chat)] [list-view {:dataSource datasource :renderScrollComponent (fn [props] diff --git a/src/syng_im/components/chats/chats_list.cljs b/src/syng_im/components/chats/chats_list.cljs index 8295a0b24f..c9331ca66f 100644 --- a/src/syng_im/components/chats/chats_list.cljs +++ b/src/syng_im/components/chats/chats_list.cljs @@ -4,8 +4,8 @@ view text image - navigator - toolbar-android]] + touchable-highlight + navigator]] [syng-im.components.realm :refer [list-view]] [syng-im.utils.logging :as log] [syng-im.navigation :refer [nav-pop]] @@ -24,6 +24,38 @@ text2-color]] [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]}] (let [chats (subscribe [:get-chats])] @@ -33,27 +65,7 @@ datasource (to-realm-datasource chats)] [view {:style {:flex 1 :backgroundColor "white"}} - (when android? - ;; 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"]]]) + [toolbar] [list-view {:dataSource datasource :renderRow (fn [row section-id row-id] (r/as-element [chat-list-item row navigator])) diff --git a/src/syng_im/components/styles.cljs b/src/syng_im/components/styles.cljs index f0a6d7db9f..1023539554 100644 --- a/src/syng_im/components/styles.cljs +++ b/src/syng_im/components/styles.cljs @@ -19,3 +19,4 @@ (def new-messages-count-color "#7099e632") (def chat-background "#EBF0F4") (def selected-message-color "#E4E9ED") +(def separator-color "#0000001f")