Chat view design

Former-commit-id: 256c639cf3
This commit is contained in:
virvar 2016-04-15 18:04:03 +03:00
parent bd44680981
commit b88b330ec8
4 changed files with 73 additions and 53 deletions

View File

@ -7,7 +7,12 @@
touchable-highlight
navigator
toolbar-android]]
[syng-im.components.styles :refer [font]]
[syng-im.components.styles :refer [font
color-light-blue-transparent
color-white
color-black
text1-color
text2-color]]
[syng-im.models.commands :refer [parse-command-msg-content
parse-command-request-msg-content]]
[syng-im.utils.logging :as log]
@ -18,15 +23,18 @@
content-type-command-request]]))
(defn message-date [{:keys [date]}]
[text {:style {:marginVertical 10
:fontFamily font
:fontSize 11
:color "#AAB2B2"
:letterSpacing 1
:lineHeight 15
:textAlign "center"
:opacity 0.8}}
date])
[view {:style {:backgroundColor color-light-blue-transparent
:height 24
:borderRadius 50
:alignSelf "center"
:marginVertical 15
:paddingTop 3
:paddingHorizontal 12}}
[text {:style {:fontFamily font
:fontSize 12
:color text2-color
:textAlign "center"}}
date]])
(defn message-content-audio [{:keys [content-type content-type]}]
[view {:style {:flexDirection "row"
@ -76,11 +84,11 @@
[view {:style {:backgroundColor (:color command)
:height 24
:borderRadius 50
:paddingTop 2
:paddingTop 3
:paddingHorizontal 12}}
[text {:style {:fontSize 12
:fontFamily font
:color "white"}}
:color color-white}}
(:text command)]]]
[image {:source (:icon command)
:style {:position "absolute"
@ -90,7 +98,7 @@
:marginHorizontal 0
:fontSize 14
:fontFamily font
:color "black"}}
:color color-black}}
;; TODO isn't smart
(if (= (:command command) :keypair-password)
"******"
@ -110,12 +118,12 @@
[view {:style (merge {:borderRadius 7
:padding 12}
(if outgoing
{:backgroundColor "white"}
{:backgroundColor color-white}
{:backgroundColor background-color}))}
[text {:style (merge {:fontSize 14
:fontFamily font}
(if outgoing
{:color "#4A5258"}
{:color color-black}
{:color text-color}))}
content]]
[view {:style {:position "absolute"
@ -132,8 +140,7 @@
[text {:style {:marginTop 2
:fontFamily font
:fontSize 12
:color "#AAB2B2"
:opacity 0.8 }}
:color text2-color}}
(str (:request-text command))]]]))))
(defn message-content [{:keys [msg-id content-type content outgoing text-color background-color]}]
@ -142,14 +149,14 @@
[view {:style (merge {:borderRadius 7
:padding 12}
(if outgoing
{:backgroundColor "white"}
{:backgroundColor color-white}
{:backgroundColor background-color}))}
(cond
(= content-type text-content-type)
[text {:style (merge {:fontSize 14
:fontFamily font}
(if outgoing
{:color "#4A5258"}
{:color color-black}
{:color text-color}))}
content]
(= content-type content-type-command)
@ -168,8 +175,7 @@
:opacity 0.6}}]
[text {:style {:fontFamily font
:fontSize 12
:color "#AAB2B2"
:opacity 0.8
:color text2-color
:marginLeft 5}}
(case delivery-status
:delivered "Delivered"
@ -206,6 +212,6 @@
:content content
:content-type content-type
:outgoing outgoing
:text-color "black" ;text-color
:background-color "white" ;background-color
:text-color color-black ;text-color
:background-color color-white ;background-color
:delivery-status (keyword delivery-status)}]])

View File

@ -4,7 +4,9 @@
view
image
text-input]]
[syng-im.components.styles :refer [font]]
[syng-im.components.styles :refer [font
text2-color
color-white]]
[syng-im.components.chat.suggestions :refer [suggestions-view]]
[syng-im.utils.utils :refer [log toast http-post]]
[syng-im.utils.logging :as log]
@ -21,30 +23,33 @@
(let [input-message @input-message-atom]
[view {:style {:flexDirection "column"}}
[suggestions-view]
[view {:style {:flexDirection "row"
:margin 1
:height 40
:backgroundColor "white"
:borderRadius 5}}
[image {:source res/mic
:style {:marginTop 11
:marginLeft 14
:width 13
:height 20}}]
[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 18
:lineHeight 42
:marginLeft 16
:marginTop -9
:fontSize 14
:fontFamily font
:color "#9CBFC0"}
:color text2-color}
:autoFocus false
:placeholder "Type your message here"
:placeholder "Type"
:placeholderTextColor text2-color
:onChangeText (fn [new-text]
(set-input-message new-text))
:onSubmitEditing (fn [e]
(let [{:keys [group-chat chat-id]} @chat]
;; TODO get text from state?
(if group-chat
(dispatch [:send-group-chat-msg chat-id
input-message])
@ -52,13 +57,8 @@
input-message])))
(set-input-message nil))}
input-message]
[image {:source res/smile
:style {:marginTop 11
:marginRight 12
:width 18
:height 18}}]
[image {:source res/att
:style {:marginTop 14
:marginRight 16
:width 17
:height 14}}]]]))))
[image {:source res/icon-smile
:style {:marginTop 2
:marginRight 2
:width 20
:height 20}}]]]))))

View File

@ -1,3 +1,15 @@
(ns syng-im.components.styles)
(def font "Robot-Regular")
(def color-blue "#7099e6")
(def color-black "#000000de")
(def color-purple "#a187d5")
(def color-gray "#838c93de")
(def color-white "white")
(def color-light-blue "#bbc4cb")
(def color-light-blue-transparent "#bbc4cb32")
(def color-dark-mint "#5fc48d")
(def text1-color "#838c93")
(def text2-color "#838c93de")

View File

@ -6,6 +6,8 @@
[syng-im.db :as db]
[syng-im.resources :as res]
[syng-im.models.chat :refer [current-chat-id]]
[syng-im.components.styles :refer [color-blue
color-dark-mint]]
[syng-im.utils.utils :refer [log toast]]
[syng-im.utils.logging :as log]
[syng-im.persistence.realm :as realm]))
@ -14,7 +16,7 @@
(def commands [{:command :money
:text "!money"
:description "Send money"
:color "#48ba30"
:color color-dark-mint
:request-icon res/icon-lock-white
:icon res/icon-lock-gray
:suggestion true}
@ -26,13 +28,13 @@
{:command :phone
:text "!phone"
:description "Send phone number"
:color "#48ba30"
:color color-dark-mint
:suggestion true}
{:command :confirmation-code
:text "!confirmationCode"
:description "Send confirmation code"
:request-text "Confirmation code request"
:color "#6581E7"
:color color-blue
:request-icon res/icon-lock-white
:icon res/icon-lock-gray
:suggestion true}
@ -49,7 +51,7 @@
{:command :keypair-password
:text "!keypairPassword"
:description ""
:color "#6581E7"
:color color-blue
:request-icon res/icon-lock-white
:icon res/icon-lock-gray
:suggestion false}