From 173752ea2c4c6790b044c9733aed6008b2ebed8b Mon Sep 17 00:00:00 2001 From: virvar Date: Mon, 18 Apr 2016 13:38:38 +0300 Subject: [PATCH] Toolbar style. 'Send' button. --- images/icon_send.png | Bin 0 -> 252 bytes src/syng_im/components/chat.cljs | 82 +++++++++++++-- src/syng_im/components/chat/chat_message.cljs | 7 +- .../components/chat/plain_message_input.cljs | 99 ++++++++++-------- .../components/chats/chat_list_item.cljs | 2 - .../chats/chat_list_item_inner.cljs | 8 +- src/syng_im/components/chats/chats_list.cljs | 31 ++++-- src/syng_im/components/styles.cljs | 1 + src/syng_im/resources.cljs | 1 + 9 files changed, 161 insertions(+), 70 deletions(-) create mode 100644 images/icon_send.png diff --git a/images/icon_send.png b/images/icon_send.png new file mode 100644 index 0000000000000000000000000000000000000000..45eda4e76e5255d349a4201d40aa53b2a68450fb GIT binary patch literal 252 zcmeAS@N?(olHy`uVBq!ia0vp^{2W; z|M>sEUPQp!U;^WehANAO3i}HU%?@uoCP_N*#yI?8>_~hdFyW!g7Db1n!iiQBUmSMW zX6)$P(6wcP$wK3P2G*DlQcNKQ46));|1~DOZ@Vh6z=dU2Qp}xX2hQ>diaiFC8<=by zzPT%~9c3_7U|GkpVrI(hiKfkuB;^mhOJBg}wD2w0cGkI!S8O=Dr!J^alW@HeB=PVF zV-e$pFDWb5sw~eHTk!9_!OlD!Y|F-Z*u-n>GKp!x8y85}Sb4q9e06tP( A(*OVf literal 0 HcmV?d00001 diff --git a/src/syng_im/components/chat.cljs b/src/syng_im/components/chat.cljs index 3dfe8893fc..3166d38f17 100644 --- a/src/syng_im/components/chat.cljs +++ b/src/syng_im/components/chat.cljs @@ -1,5 +1,6 @@ (ns syng-im.components.chat - (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] + (:require [clojure.string :as s] + [re-frame.core :refer [subscribe dispatch dispatch-sync]] [syng-im.components.react :refer [android? view text @@ -8,6 +9,13 @@ navigator toolbar-android]] [syng-im.components.realm :refer [list-view]] + [syng-im.components.styles :refer [font + title-font + color-white + chat-background + online-color + text1-color + text2-color]] [syng-im.utils.logging :as log] [syng-im.navigation :refer [nav-pop]] [syng-im.resources :as res] @@ -29,6 +37,41 @@ (assoc msg :text-color text-color :background-color background-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 36 + :height 36}}]]) + +(defn contact-online [{:keys [online]}] + (when online + [view {:position "absolute" + :top 20 + :left 20 + :width 20 + :height 20 + :borderRadius 50 + :backgroundColor online-color + :borderWidth 2 + :borderColor color-white} + [view {:position "absolute" + :top 6 + :left 3 + :width 4 + :height 4 + :borderRadius 50 + :backgroundColor color-white}] + [view {:position "absolute" + :top 6 + :left 9 + :width 4 + :height 4 + :borderRadius 50 + :backgroundColor color-white}]])) + (defn chat [{:keys [navigator]}] (let [messages (subscribe [:get-chat-messages]) chat (subscribe [:get-current-chat])] @@ -39,21 +82,38 @@ contacts (:contacts @chat) contact-by-identity (contacts-by-identity contacts)] [view {:style {:flex 1 - :backgroundColor "#EBF0F4"}} + :backgroundColor chat-background}} (when android? ;; TODO add IOS version - [toolbar-android {:logo res/logo-icon ;; todo contact/chat avatar - :title (or (@chat :name) - "Chat name") - :titleColor "#4A5258" - :subtitle "Last seen just now" - :subtitleColor "#AAB2B2" - :navIcon res/icon-back - :style {:backgroundColor "white" + [toolbar-android {:navIcon res/icon-back + :style {:backgroundColor color-white :height 56 :elevation 2} :onIconClicked (fn [] - (nav-pop navigator))}]) + (nav-pop navigator))} + [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")] + [text {:style {:marginTop 1 + :color text2-color + :fontSize 12 + :fontFamily font}} + "Active a minute ago"]] + [view {:style {:position "absolute" + :top 10 + :right 66}} + [chat-photo {}] + [contact-online {:online true}]]]]) [list-view {:dataSource datasource :renderScrollComponent (fn [props] (invertible-scroll-view nil)) diff --git a/src/syng_im/components/chat/chat_message.cljs b/src/syng_im/components/chat/chat_message.cljs index b1540beec1..1a12955148 100644 --- a/src/syng_im/components/chat/chat_message.cljs +++ b/src/syng_im/components/chat/chat_message.cljs @@ -168,11 +168,10 @@ [view {:style {:flexDirection "row" :marginTop 2}} [image {:source (case delivery-status - :delivered res/delivered-icon - :seen res/seen-icon + :delivered res/icon-ok-small + :seen res/icon-ok-small :failed res/delivery-failed-icon) - :style {:marginTop 6 - :opacity 0.6}}] + :style {:marginTop 6}}] [text {:style {:fontFamily font :fontSize 12 :color text2-color diff --git a/src/syng_im/components/chat/plain_message_input.cljs b/src/syng_im/components/chat/plain_message_input.cljs index d9a94d156e..74c8cd2c83 100644 --- a/src/syng_im/components/chat/plain_message_input.cljs +++ b/src/syng_im/components/chat/plain_message_input.cljs @@ -3,10 +3,12 @@ [syng-im.components.react :refer [android? view image + touchable-highlight text-input]] [syng-im.components.styles :refer [font text2-color - color-white]] + color-white + color-blue]] [syng-im.components.chat.suggestions :refer [suggestions-view]] [syng-im.utils.utils :refer [log toast http-post]] [syng-im.utils.logging :as log] @@ -16,49 +18,64 @@ (defn set-input-message [message] (dispatch [:set-chat-input-text message])) +(defn send [chat input-message] + (let [{:keys [group-chat chat-id]} chat] + (if group-chat + (dispatch [:send-group-chat-msg chat-id + input-message]) + (dispatch [:send-chat-msg chat-id + input-message]))) + (set-input-message nil)) + (defn plain-message-input-view [] (let [chat (subscribe [:get-current-chat]) input-message-atom (subscribe [:get-chat-input-text])] (fn [] (let [input-message @input-message-atom] [view {:style {:flexDirection "column"}} - [suggestions-view] - [view {:style {:flexDirection "row" - :height 56 - :paddingTop 16 - :paddingHorizontal 16 - :backgroundColor color-white - :elevation 4}} - [image {:source res/icon-list - :style {:marginTop 6 - :marginRight 6 - :marginBottom 6 - :marginLeft 5 - :width 13 - :height 12}}] - [text-input {:underlineColorAndroid "transparent" - :style {:flex 1 - :marginLeft 16 - :marginTop -9 - :fontSize 14 - :fontFamily font - :color text2-color} - :autoFocus false - :placeholder "Type" - :placeholderTextColor text2-color - :onChangeText (fn [new-text] - (set-input-message new-text)) - :onSubmitEditing (fn [e] - (let [{:keys [group-chat chat-id]} @chat] - (if group-chat - (dispatch [:send-group-chat-msg chat-id - input-message]) - (dispatch [:send-chat-msg chat-id - input-message]))) - (set-input-message nil))} - input-message] - [image {:source res/icon-smile - :style {:marginTop 2 - :marginRight 2 - :width 20 - :height 20}}]]])))) + [suggestions-view] + [view {:style {:flexDirection "row" + :height 56 + :backgroundColor color-white + :elevation 4}} + [image {:source res/icon-list + :style {:marginTop 22 + :marginRight 6 + :marginBottom 6 + :marginLeft 21 + :width 13 + :height 12}}] + [text-input {:underlineColorAndroid "transparent" + :style {:flex 1 + :marginLeft 16 + :marginTop 7 + :fontSize 14 + :fontFamily font + :color text2-color} + :autoFocus false + :placeholder "Type" + :placeholderTextColor text2-color + :onChangeText (fn [new-text] + (set-input-message new-text)) + :onSubmitEditing (fn [e] + (send @chat input-message))} + input-message] + [image {:source res/icon-smile + :style {:marginTop 18 + :marginRight 18 + :width 20 + :height 20}}] + (when (< 0 (count input-message)) + [touchable-highlight {:on-press (fn [] + (send @chat input-message))} + [view {:style {:marginTop 10 + :marginRight 10 + :width 36 + :height 36 + :borderRadius 50 + :backgroundColor color-blue}} + [image {:source res/icon-send + :style {:marginTop 10.5 + :marginLeft 12 + :width 15 + :height 15}}]]])]])))) diff --git a/src/syng_im/components/chats/chat_list_item.cljs b/src/syng_im/components/chats/chat_list_item.cljs index 80efff57a7..4e26540b7f 100644 --- a/src/syng_im/components/chats/chat_list_item.cljs +++ b/src/syng_im/components/chats/chat_list_item.cljs @@ -10,8 +10,6 @@ [syng-im.resources :as res])) (defn chat-list-item [chat-obj navigator] - (log/info "!!!!!") - (log/info chat-obj) [touchable-highlight {:on-press (fn [] (dispatch [:show-chat (aget chat-obj "chat-id") navigator]))} ;; TODO add [photo-path delivery-status new-messages-count online] values to chat-obj diff --git a/src/syng_im/components/chats/chat_list_item_inner.cljs b/src/syng_im/components/chats/chat_list_item_inner.cljs index eefd421a68..6062cfd36a 100644 --- a/src/syng_im/components/chats/chat_list_item_inner.cljs +++ b/src/syng_im/components/chats/chat_list_item_inner.cljs @@ -99,14 +99,14 @@ :right 0}} (when delivery-status [image {:source (if (= (keyword delivery-status) :seen) - res/seen-icon - res/delivered-icon) - :style {:marginTop 4}}]) + res/icon-ok-small + res/icon-ok-small) + :style {:marginTop 6}}]) ;;; datetime [text {:style {:fontFamily font :fontSize 12 :color text2-color - :marginLeft 4}} + :marginLeft 5}} timestamp]] ;;; new messages count (when (< 0 new-messages-count) diff --git a/src/syng_im/components/chats/chats_list.cljs b/src/syng_im/components/chats/chats_list.cljs index 86bf7b430c..4cc4334779 100644 --- a/src/syng_im/components/chats/chats_list.cljs +++ b/src/syng_im/components/chats/chats_list.cljs @@ -16,6 +16,13 @@ [syng-im.components.chats.chat-list-item :refer [chat-list-item]] [syng-im.components.action-button :refer [action-button action-button-item]] + [syng-im.components.styles :refer [font + title-font + color-white + color-black + color-blue + text1-color + text2-color]] [syng-im.components.icons.ionicons :refer [icon]])) @@ -29,22 +36,30 @@ :backgroundColor "white"}} (when android? ;; TODO add IOS version - [toolbar-android {:logo res/logo-icon - :title "Chats" - :titleColor "#4A5258" - :subtitle "List of your recent chats" - :subtitleColor "#AAB2B2" - :navIcon res/icon-list + [toolbar-android {:navIcon res/icon-hamburger :style {:backgroundColor "white" :height 56 :elevation 2} :onIconClicked (fn [] - (nav-pop navigator))}]) + (nav-pop navigator)) + :actions [{:title "Search" + :icon res/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 :renderRow (fn [row section-id row-id] (r/as-element [chat-list-item row navigator])) :style {:backgroundColor "white"}}] - [action-button {:buttonColor "rgba(231,76,60,1)"} + [action-button {:buttonColor color-blue} [action-button-item {:title "New Chat" :buttonColor "#9b59b6" :onPress (fn [] diff --git a/src/syng_im/components/styles.cljs b/src/syng_im/components/styles.cljs index b7a0e57eb3..6c5b5ba9fd 100644 --- a/src/syng_im/components/styles.cljs +++ b/src/syng_im/components/styles.cljs @@ -17,3 +17,4 @@ (def text2-color color-gray) (def online-color color-blue) (def new-messages-count-color "#7099e632") +(def chat-background "#EBF0F4") diff --git a/src/syng_im/resources.cljs b/src/syng_im/resources.cljs index 5b9d7a97eb..17c231bf56 100644 --- a/src/syng_im/resources.cljs +++ b/src/syng_im/resources.cljs @@ -26,3 +26,4 @@ (def icon-group (js/require "./images/icon_group.png")) (def icon-hamburger (js/require "./images/icon_hamburger.png")) (def icon-search (js/require "./images/icon_search.png")) +(def icon-send (js/require "./images/icon_send.png"))