From b88b330ec8de68a6a52a4cb1583b46cca03d4833 Mon Sep 17 00:00:00 2001 From: virvar Date: Fri, 15 Apr 2016 18:04:03 +0300 Subject: [PATCH] Chat view design Former-commit-id: 256c639cf313710e3404bb2676d4029787b0d967 --- src/syng_im/components/chat/chat_message.cljs | 52 +++++++++++-------- .../components/chat/plain_message_input.cljs | 52 +++++++++---------- src/syng_im/components/styles.cljs | 12 +++++ src/syng_im/models/commands.cljs | 10 ++-- 4 files changed, 73 insertions(+), 53 deletions(-) diff --git a/src/syng_im/components/chat/chat_message.cljs b/src/syng_im/components/chat/chat_message.cljs index 55bda8351c..b1540beec1 100644 --- a/src/syng_im/components/chat/chat_message.cljs +++ b/src/syng_im/components/chat/chat_message.cljs @@ -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)}]]) diff --git a/src/syng_im/components/chat/plain_message_input.cljs b/src/syng_im/components/chat/plain_message_input.cljs index 635940b065..d9a94d156e 100644 --- a/src/syng_im/components/chat/plain_message_input.cljs +++ b/src/syng_im/components/chat/plain_message_input.cljs @@ -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}}]]])))) diff --git a/src/syng_im/components/styles.cljs b/src/syng_im/components/styles.cljs index 98454becb8..2b1e56a843 100644 --- a/src/syng_im/components/styles.cljs +++ b/src/syng_im/components/styles.cljs @@ -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") diff --git a/src/syng_im/models/commands.cljs b/src/syng_im/models/commands.cljs index 259c378cd1..b8e6e5ab98 100644 --- a/src/syng_im/models/commands.cljs +++ b/src/syng_im/models/commands.cljs @@ -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}