From 9a84baf131210b250578317b2f6de8ebcffc54c9 Mon Sep 17 00:00:00 2001 From: virvar Date: Fri, 22 Apr 2016 13:51:14 +0300 Subject: [PATCH] Chat status design --- src/syng_im/components/chat.cljs | 20 ++++- src/syng_im/components/chat/chat_message.cljs | 74 +++++++++++++++++-- src/syng_im/constants.cljs | 1 + 3 files changed, 88 insertions(+), 7 deletions(-) diff --git a/src/syng_im/components/chat.cljs b/src/syng_im/components/chat.cljs index 8e275fd4dc..ead0e5fae2 100644 --- a/src/syng_im/components/chat.cljs +++ b/src/syng_im/components/chat.cljs @@ -20,6 +20,7 @@ [syng-im.utils.logging :as log] [syng-im.navigation :refer [nav-pop]] [syng-im.resources :as res] + [syng-im.constants :refer [content-type-status]] [syng-im.utils.listview :refer [to-realm-datasource]] [syng-im.components.invertible-scroll-view :refer [invertible-scroll-view]] [reagent.core :as r] @@ -146,6 +147,21 @@ (fn [] (let [msgs @messages ;_ (log/debug "messages=" msgs) + ;; temp to show first status + msgs-clj (assoc (js->clj msgs) "-1" + {:msg-id "-1" + :content (str "The brash businessman’s braggadocio " + "and public exchange with candidates " + "in the US presidential election") + :delivery-status "seen" + :from "Status" + :chat-id "-" + :content-type content-type-status + :timestamp 1 + :outgoing false + :to nil}) + msgs (clj->js msgs-clj) + ;; end temp datasource (to-realm-datasource msgs) contacts (:contacts @chat) contact-by-identity (contacts-by-identity contacts)] @@ -155,8 +171,8 @@ ;; TODO add IOS version [toolbar-android {:navIcon res/icon-back :style {:backgroundColor color-white - :height 56 - :elevation 2} + :height 56 + :elevation 2} :actions (when (and (:group-chat @chat) (:is-active @chat)) [{:title "Add Contact to chat" diff --git a/src/syng_im/components/chat/chat_message.cljs b/src/syng_im/components/chat/chat_message.cljs index c7d7d0ff71..2e9c7696c2 100644 --- a/src/syng_im/components/chat/chat_message.cljs +++ b/src/syng_im/components/chat/chat_message.cljs @@ -14,6 +14,7 @@ color-black color-blue selected-message-color + online-color text1-color text2-color]] [syng-im.models.commands :refer [parse-command-msg-content @@ -22,6 +23,7 @@ [syng-im.navigation :refer [nav-pop]] [syng-im.resources :as res] [syng-im.constants :refer [text-content-type + content-type-status content-type-command content-type-command-request]])) @@ -39,6 +41,64 @@ :textAlign "center"}} date]]) +(defn contact-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 64 + :height 64}}]]) + +(defn contact-online [{:keys [online]}] + (when online + [view {:position "absolute" + :top 44 + :left 44 + :width 24 + :height 24 + :borderRadius 50 + :backgroundColor online-color + :borderWidth 2 + :borderColor color-white} + [view {:position "absolute" + :top 8 + :left 5 + :width 4 + :height 4 + :borderRadius 50 + :backgroundColor color-white}] + [view {:position "absolute" + :top 8 + :left 11 + :width 4 + :height 4 + :borderRadius 50 + :backgroundColor color-white}]])) + + +(defn message-content-status [from content] + [view {:style {:flex 1 + :marginBottom 20 + :alignSelf "center" + :alignItems "center" + :width 249}} + [view {:style {:marginTop 20}} + [contact-photo {}] + [contact-online {:online true}]] + [text {:style {:marginTop 20 + :fontSize 18 + :fontFamily font + :color text1-color}} + from] + [text {:style {:marginTop 10 + :fontFamily font + :fontSize 14 + :lineHeight 20 + :textAlign "center" + :color text2-color}} + content]]) + (defn message-content-audio [{:keys [content-type content-type]}] [view {:style {:flexDirection "row" :alignItems "center"}} @@ -164,7 +224,8 @@ :fontFamily font}} "Justas"]) (cond - (= content-type text-content-type) + (or (= content-type text-content-type) + (= content-type content-type-status)) [text {:style (merge {:marginTop (if (and group-chat (not outgoing)) 4 0) @@ -266,7 +327,7 @@ (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}] +(defn chat-message [{:keys [msg-id from 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}]) @@ -279,6 +340,9 @@ :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]))]) + [view {} + (when (= content-type content-type-status) + [message-content-status from content]) + (if (and group-chat (not outgoing)) + [incoming-group-message-body msg-data] + [message-body msg-data])])]) diff --git a/src/syng_im/constants.cljs b/src/syng_im/constants.cljs index c545afd9ca..4d4c4df55b 100644 --- a/src/syng_im/constants.cljs +++ b/src/syng_im/constants.cljs @@ -8,6 +8,7 @@ (def text-content-type "text/plain") (def content-type-command "command") (def content-type-command-request "command-request") +(def content-type-status "status") (def group-chat-colors [{:background "#AB7967", :text "#FFFFFF"} {:background "#B48EAD", :text "#FFFFFF"} {:background "#8FA1B3", :text "#FFFFFF"}