Chat view design
This commit is contained in:
virvar
parent
d02af8907d
commit
256c639cf3
|
|
@ -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)}]])
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
|
|
@ -22,29 +24,32 @@
|
|||
[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
|
||||
: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 20}}]
|
||||
: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}}]]]))))
|
||||
|
|
|
|||
|
|
@ -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")
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
Loading…
Reference in New Issue