From 7f761944a9f61cccd97394294b5622c9d4e26640 Mon Sep 17 00:00:00 2001 From: virvar Date: Fri, 1 Apr 2016 11:10:38 +0300 Subject: [PATCH] Suggestions styles --- syng-im/src/syng_im/components/chat.cljs | 2 +- .../components/chat/chat_message_new.cljs | 1 - .../syng_im/components/chat/phone_input.cljs | 1 - .../components/chat/plain_message_input.cljs | 10 ++--- .../syng_im/components/chat/suggestions.cljs | 42 +++++++++++-------- syng-im/src/syng_im/handlers/suggestions.cljs | 22 +++++++--- 6 files changed, 47 insertions(+), 31 deletions(-) diff --git a/syng-im/src/syng_im/components/chat.cljs b/syng-im/src/syng_im/components/chat.cljs index dab189630a..13ab983ee7 100644 --- a/syng-im/src/syng_im/components/chat.cljs +++ b/syng-im/src/syng_im/components/chat.cljs @@ -25,7 +25,7 @@ _ (log/debug "messages=" msgs) datasource (to-realm-datasource msgs)] [view {:style {:flex 1 - :backgroundColor "white"}} + :backgroundColor "#eef2f5"}} (when android? ;; TODO add IOS version [toolbar-android {:logo res/logo-icon diff --git a/syng-im/src/syng_im/components/chat/chat_message_new.cljs b/syng-im/src/syng_im/components/chat/chat_message_new.cljs index a540c6e871..b610236392 100644 --- a/syng-im/src/syng_im/components/chat/chat_message_new.cljs +++ b/syng-im/src/syng_im/components/chat/chat_message_new.cljs @@ -32,7 +32,6 @@ [view {:style {:flexDirection "row"}} [view {:style {:flexDirection "column" :margin 10 - :width 120 :backgroundColor "blue" :borderRadius 10}} [text {:style {:marginVertical 3 diff --git a/syng-im/src/syng_im/components/chat/phone_input.cljs b/syng-im/src/syng_im/components/chat/phone_input.cljs index 21fa32a9f6..8cc26340b1 100644 --- a/syng-im/src/syng_im/components/chat/phone_input.cljs +++ b/syng-im/src/syng_im/components/chat/phone_input.cljs @@ -30,7 +30,6 @@ [view {:style {:flexDirection "row"}} [view {:style {:flexDirection "column" :margin 10 - :width 120 :backgroundColor "blue" :borderRadius 10}} [text {:style {:marginVertical 3 diff --git a/syng-im/src/syng_im/components/chat/plain_message_input.cljs b/syng-im/src/syng_im/components/chat/plain_message_input.cljs index bc5daa4b09..3a3d170c7c 100644 --- a/syng-im/src/syng_im/components/chat/plain_message_input.cljs +++ b/syng-im/src/syng_im/components/chat/plain_message_input.cljs @@ -11,23 +11,23 @@ [reagent.core :as r])) (defn plain-message-input-view [] - (let [text (r/atom nil) + (let [text (r/atom "!") chat-id (subscribe [:get-current-chat-id])] (dispatch [:generate-suggestions @text]) (fn [] [view {:style {:flexDirection "column"}} [suggestions-view] [view {:style {:flexDirection "row" - :margin 10 + :margin 1 :height 40 - :backgroundColor "#E5F5F6" + :backgroundColor "white" :borderRadius 5}} [image {:source res/mic :style {:marginTop 11 :marginLeft 14 :width 13 :height 20}}] - [text-input {:underlineColorAndroid "#9CBFC0" + [text-input {:underlineColorAndroid "transparent" :style {:flex 1 :marginLeft 18 :lineHeight 42 @@ -35,7 +35,7 @@ :fontFamily "Avenir-Roman" :color "#9CBFC0"} :autoFocus false - :placeholder "Enter your message here" + :placeholder "Type" :value @text :onChangeText (fn [new-text] (dispatch [:generate-suggestions new-text]) diff --git a/syng-im/src/syng_im/components/chat/suggestions.cljs b/syng-im/src/syng_im/components/chat/suggestions.cljs index 494772249e..7f0f5c1b71 100644 --- a/syng-im/src/syng_im/components/chat/suggestions.cljs +++ b/syng-im/src/syng_im/components/chat/suggestions.cljs @@ -21,24 +21,30 @@ [touchable-highlight {:onPress (fn [] (set-command-input (keyword (:command suggestion))))} [view {:style {:flexDirection "row" - :marginVertical 5 - :marginHorizontal 10 - :height 20 - ;; :backgroundColor "white" - }} + :marginVertical 1 + :marginHorizontal 0 + :height 40 + :backgroundColor "white"}} + [view {:style {:flexDirection "column" + :position "absolute" + :top 10 + :left 60 + :backgroundColor (:color suggestion) + :borderRadius 10}} + [text {:style {:marginTop -2 + :marginHorizontal 10 + :fontSize 14 + :fontFamily "Avenir-Roman" + :color "white"}} + (:text suggestion)]] [text {:style {:flex 1 - :marginLeft 18 + :position "absolute" + :top 7 + :left 190 :lineHeight 18 :fontSize 14 :fontFamily "Avenir-Roman" - :color "#9CBFC0"}} - (:text suggestion)] - [text {:style {:flex 1 - :marginLeft 18 - :lineHeight 18 - :fontSize 14 - :fontFamily "Avenir-Roman" - :color "#9CBFC0"}} + :color "black"}} (:description suggestion)]]]) (defn render-row [row section-id row-id] @@ -50,10 +56,10 @@ (let [suggestions @suggestions-atom] (when (not (empty? suggestions)) [view {:style {:flexDirection "row" - :marginVertical 5 - :marginHorizontal 10 - :height 120 - :backgroundColor "#E5F5F6" + :marginVertical 1 + :marginHorizontal 0 + :height (min 105 (* 42 (count suggestions))) + :backgroundColor "#eef2f5" :borderRadius 5}} [list-view {:dataSource (to-datasource suggestions) :renderRow render-row diff --git a/syng-im/src/syng_im/handlers/suggestions.cljs b/syng-im/src/syng_im/handlers/suggestions.cljs index 19ec9c1256..b9468e9cac 100644 --- a/syng-im/src/syng_im/handlers/suggestions.cljs +++ b/syng-im/src/syng_im/handlers/suggestions.cljs @@ -4,18 +4,30 @@ [syng-im.utils.utils :refer [log on-error http-post]] [syng-im.utils.logging :as log])) -(def commands [{:command :phone +(def commands [{:command :money + :text "!money" + :description "Send money" + :color "#48ba30"} + {:command :location + :text "!location" + :description "Send location" + :color "#9a5dcf"} + {:command :phone :text "!phone" - :description "Send phone number"} + :description "Send phone number" + :color "#48ba30"} {:command :send :text "!send" - :description "Send location"} + :description "Send location" + :color "#9a5dcf"} {:command :request :text "!request" - :description "Send request"} + :description "Send request" + :color "#48ba30"} {:command :help :text "!help" - :description "Help"}]) + :description "Help" + :color "#9a5dcf"}]) (defn get-suggestions [text] (if (= (get text 0) "!")