Chat status design

This commit is contained in:
virvar 2016-04-22 13:51:14 +03:00
parent 2a9d6df8d9
commit 9a84baf131
3 changed files with 88 additions and 7 deletions

View File

@ -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 businessmans 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"

View File

@ -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])])])

View File

@ -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"}