status-im/status-react
2
0
Fork 0
mirror of https://github.com/status-im/status-react.git synced 2025-01-10 19:16:59 +00:00
Code Issues Projects Releases Wiki Activity

Chat view design

Browse Source
This commit is contained in:
virvar 2016-04-15 18:04:03 +03:00
parent d02af8907d
commit 256c639cf3
4 changed files with 73 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/syng_im/components/chat/chat_message.cljs
View File

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

52
src/syng_im/components/chat/plain_message_input.cljs
View File

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

12
src/syng_im/components/styles.cljs
View File

@ -1,3 +1,15 @@
(ns syng-im.components.styles) (ns syng-im.components.styles)
(def font "Robot-Regular") (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")

10
src/syng_im/models/commands.cljs
View File

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