From e6b22cd2e4aa1b5861f08c84c8743770a1a33d45 Mon Sep 17 00:00:00 2001 From: virvar Date: Tue, 19 Apr 2016 15:38:16 +0300 Subject: [PATCH] Group chat design --- src/syng_im/components/chat.cljs | 96 +++++++++--- src/syng_im/components/chat/chat_message.cljs | 146 +++++++++++++----- src/syng_im/components/styles.cljs | 1 + 3 files changed, 179 insertions(+), 64 deletions(-) diff --git a/src/syng_im/components/chat.cljs b/src/syng_im/components/chat.cljs index 3166d38f17..5de4d2fffd 100644 --- a/src/syng_im/components/chat.cljs +++ b/src/syng_im/components/chat.cljs @@ -14,6 +14,7 @@ color-white chat-background online-color + selected-message-color text1-color text2-color]] [syng-im.utils.logging :as log] @@ -72,12 +73,76 @@ :borderRadius 50 :backgroundColor color-white}]])) +(defn typing [member] + [view {:style {:width 260 + :paddingTop 2 + :paddingBottom 8 + :paddingLeft 8 + :paddingRight 8 + :alignItems "flex-start" + :alignSelf "flex-start"}} + [view {:style {:borderRadius 14 + :padding 12 + :height 38 + :backgroundColor selected-message-color}} + [text {:style {:marginTop -2 + :fontSize 12 + :fontFamily font + :color text2-color}} + (str member " is typing")]]]) + +(defn typing-all [] + [view {:style {:marginBottom 12}} + (for [member ["Geoff" "Justas"]] + ^{:key member} [typing member])]) + +(defn toolbar-content-chat [chat] + (let [group? (:group-chat chat)] + [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 res/icon-group + :style {:marginTop 4}}] + [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 + :fontFamily font}} + "Active a minute ago"])] + [view {:style {:position "absolute" + :top 10 + :right 66}} + [chat-photo {}] + (when (not group?) + [contact-online {:online true}])]])) + (defn chat [{:keys [navigator]}] (let [messages (subscribe [:get-chat-messages]) chat (subscribe [:get-current-chat])] (fn [] (let [msgs @messages - ;_ (log/debug "messages=" msgs) + ;_ (log/debug "messages=" msgs) datasource (to-realm-datasource msgs) contacts (:contacts @chat) contact-by-identity (contacts-by-identity contacts)] @@ -91,35 +156,16 @@ :elevation 2} :onIconClicked (fn [] (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}]]]]) + [toolbar-content-chat @chat]]) [list-view {:dataSource datasource :renderScrollComponent (fn [props] (invertible-scroll-view nil)) :renderRow (fn [row section-id row-id] (let [msg (-> (js->clj row :keywordize-keys true) - (add-msg-color contact-by-identity))] + (add-msg-color contact-by-identity) + (assoc :group-chat (:group-chat @chat)))] (r/as-element [chat-message msg]))) :style {:backgroundColor "white"}}] + (when (:group-chat @chat) + [typing-all]) [chat-message-new]])))) diff --git a/src/syng_im/components/chat/chat_message.cljs b/src/syng_im/components/chat/chat_message.cljs index 1a12955148..c7d7d0ff71 100644 --- a/src/syng_im/components/chat/chat_message.cljs +++ b/src/syng_im/components/chat/chat_message.cljs @@ -1,5 +1,6 @@ (ns syng-im.components.chat.chat-message - (: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 @@ -11,6 +12,8 @@ color-light-blue-transparent color-white color-black + color-blue + selected-message-color text1-color text2-color]] [syng-im.models.commands :refer [parse-command-msg-content @@ -115,7 +118,7 @@ [touchable-highlight {:onPress (fn [] (set-chat-command msg-id command))} [view {:style {:paddingRight 16}} - [view {:style (merge {:borderRadius 7 + [view {:style (merge {:borderRadius 14 :padding 12} (if outgoing {:backgroundColor color-white} @@ -143,20 +146,34 @@ :color text2-color}} (str (:request-text command))]]])))) -(defn message-content [{:keys [msg-id content-type content outgoing text-color background-color]}] +(defn message-content [{:keys [msg-id content-type content outgoing text-color background-color group-chat selected]}] (if (= content-type content-type-command-request) [message-content-command-request msg-id content outgoing text-color background-color] - [view {:style (merge {:borderRadius 7 - :padding 12} + [view {:style (merge {:borderRadius 14 + :padding 12} (if outgoing - {:backgroundColor color-white} - {:backgroundColor background-color}))} + (if (and group-chat (= content-type text-content-type)) + {:backgroundColor color-blue} + {:backgroundColor color-white}) + (if selected + {:backgroundColor selected-message-color} + {:backgroundColor background-color})))} + (when (and group-chat (not outgoing)) + [text {:style {:marginTop 0 + :fontSize 12 + :fontFamily font}} + "Justas"]) (cond (= content-type text-content-type) - [text {:style (merge {:fontSize 14 + [text {:style (merge {:marginTop (if (and group-chat (not outgoing)) + 4 + 0) + :fontSize 14 :fontFamily font} (if outgoing - {:color color-black} + (if group-chat + {:color color-white} + {:color text1-color}) {:color text-color}))} content] (= content-type content-type-command) @@ -166,10 +183,12 @@ (defn message-delivery-status [{:keys [delivery-status]}] [view {:style {:flexDirection "row" - :marginTop 2}} + :marginTop 2 + :marginBottom 8}} [image {:source (case delivery-status :delivered res/icon-ok-small :seen res/icon-ok-small + :seen-by-everyone res/icon-ok-small :failed res/delivery-failed-icon) :style {:marginTop 6}}] [text {:style {:fontFamily font @@ -179,38 +198,87 @@ (case delivery-status :delivered "Delivered" :seen "Seen" + :seen-by-everyone "Seen by everyone" :failed "Failed")]]) -(defn message-body [{:keys [msg-id content content-type outgoing delivery-status text-color background-color]}] - (let [delivery-status :seen] - [view {:style (merge {:flexDirection "column" - :width 260 - :paddingTop 5 - :paddingRight 8 - :paddingBottom 5 - :paddingLeft 8} - (if outgoing - {:alignSelf "flex-end" - :alignItems "flex-end"} - {:alignSelf "flex-start" - :alignItems "flex-start"}))} - [message-content {:msg-id msg-id - :content-type content-type - :content content - :outgoing outgoing - :text-color text-color - :background-color background-color}] - (when (and outgoing delivery-status) - [message-delivery-status {:delivery-status delivery-status}])])) +(defn member-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 24 + :height 24}}]]) -(defn chat-message [{:keys [msg-id content content-type outgoing delivery-status date new-day text-color background-color] :as msg}] +(defn incoming-group-message-body [{:keys [msg-id content content-type outgoing delivery-status text-color background-color selected]}] + (let [delivery-status :seen-by-everyone] + [view {:style {:flexDirection "column"}} + (when selected + [text {:style {:marginTop 18 + :marginLeft 40 + :fontFamily font + :fontSize 12 + :color text2-color}} + "Mar 7th, 15:22"]) + [view {:style {:flexDirection "row" + :alignSelf "flex-start" + :paddingTop 2 + :paddingRight 8 + :paddingBottom 2 + :paddingLeft 8}} + [member-photo {}] + [view {:style {:flexDirection "column" + :width 260 + :paddingLeft 8 + :alignItems "flex-start"}} + [message-content {:msg-id msg-id + :content-type content-type + :content content + :outgoing outgoing + :text-color text-color + :background-color background-color + :group-chat true + :selected selected}] + ;; TODO show for last or selected + (when (and selected delivery-status) + [message-delivery-status {:delivery-status delivery-status}])]]])) + +(defn message-body [{:keys [msg-id content content-type outgoing delivery-status text-color background-color group-chat]}] + (let [delivery-status :seen] + [view {:style (merge {:flexDirection "column" + :width 260 + :paddingTop 2 + :paddingRight 8 + :paddingBottom 2 + :paddingLeft 8} + (if outgoing + {:alignSelf "flex-end" + :alignItems "flex-end"} + {:alignItems "flex-start" + :alignSelf "flex-start"}))} + [message-content {:msg-id msg-id + :content-type content-type + :content content + :outgoing outgoing + :text-color text-color + :background-color background-color + :group-chat group-chat}] + (when (and outgoing delivery-status) + [message-delivery-status {:delivery-status delivery-status}])])) + +(defn chat-message [{:keys [msg-id content content-type outgoing delivery-status date new-day text-color background-color group-chat selected] :as msg}] [view {} (when new-day [message-date {:date date}]) - [message-body {:msg-id msg-id - :content content - :content-type content-type - :outgoing outgoing - :text-color color-black ;text-color - :background-color color-white ;background-color - :delivery-status (keyword delivery-status)}]]) + (let [msg-data {:msg-id msg-id + :content content + :content-type content-type + :outgoing outgoing + :text-color color-black ;text-color + :background-color color-white ;background-color + :delivery-status (keyword delivery-status) + :group-chat group-chat + :selected selected}] + (if (and group-chat (not outgoing)) + [incoming-group-message-body msg-data] + [message-body msg-data]))]) diff --git a/src/syng_im/components/styles.cljs b/src/syng_im/components/styles.cljs index 6c5b5ba9fd..f0a6d7db9f 100644 --- a/src/syng_im/components/styles.cljs +++ b/src/syng_im/components/styles.cljs @@ -18,3 +18,4 @@ (def online-color color-blue) (def new-messages-count-color "#7099e632") (def chat-background "#EBF0F4") +(def selected-message-color "#E4E9ED")