From 8d2af930159b98d1ed033985cfd9db51940d2d60 Mon Sep 17 00:00:00 2001 From: Roman Volosovskyi Date: Mon, 9 May 2016 13:59:55 +0300 Subject: [PATCH] chat elements styles Former-commit-id: 7019d7033fe32b644eb8ea4608480724b2e18dc1 --- src/syng_im/components/chat/chat_message.cljs | 12 ++-- .../components/chat/chat_message_new.cljs | 35 ++++------- .../components/chat/chat_message_styles.cljs | 20 +++++- .../components/chat/new_participants.cljs | 44 ++++++------- .../components/chat/plain_message_input.cljs | 62 +++++-------------- .../chat/plain_message_input_styles.cljs | 50 +++++++++++++++ .../components/chat/remove_participants.cljs | 41 ++++++------ src/syng_im/components/chat/suggestions.cljs | 50 +++------------ .../components/chat/suggestions_styles.cljs | 44 +++++++++++++ src/syng_im/components/react.cljs | 11 +++- 10 files changed, 200 insertions(+), 169 deletions(-) create mode 100644 src/syng_im/components/chat/plain_message_input_styles.cljs create mode 100644 src/syng_im/components/chat/suggestions_styles.cljs diff --git a/src/syng_im/components/chat/chat_message.cljs b/src/syng_im/components/chat/chat_message.cljs index bb8cd37a08..cbf794972b 100644 --- a/src/syng_im/components/chat/chat_message.cljs +++ b/src/syng_im/components/chat/chat_message.cljs @@ -1,16 +1,13 @@ (ns syng-im.components.chat.chat-message (:require [clojure.string :as s] - [re-frame.core :refer [subscribe dispatch dispatch-sync]] - [syng-im.components.react :refer [android? - view + [re-frame.core :refer [subscribe dispatch]] + [syng-im.components.react :refer [view text image - touchable-highlight - navigator]] + touchable-highlight]] [syng-im.components.chat.chat-message-styles :as st] [syng-im.models.commands :refer [parse-command-msg-content parse-command-request]] - [syng-im.navigation :refer [nav-pop]] [syng-im.resources :as res] [syng-im.constants :refer [text-content-type content-type-status @@ -51,8 +48,7 @@ [view st/track-container [view st/track] [view st/track-mark] - [text {:style st/track-duration-text} - "03:39"]]]) + [text {:style st/track-duration-text} "03:39"]]]) (defn message-content-command [content] (let [commands-atom (subscribe [:get-commands])] diff --git a/src/syng_im/components/chat/chat_message_new.cljs b/src/syng_im/components/chat/chat_message_new.cljs index a50662ee4e..545d0052b7 100644 --- a/src/syng_im/components/chat/chat_message_new.cljs +++ b/src/syng_im/components/chat/chat_message_new.cljs @@ -1,23 +1,15 @@ (ns syng-im.components.chat.chat-message-new (:require - [re-frame.core :refer [subscribe dispatch dispatch-sync]] - [syng-im.components.react :refer [android? - view - image - text - text-input]] - [syng-im.components.styles :refer [color-white]] - [syng-im.components.chat.plain-message-input :refer [plain-message-input-view]] - [syng-im.components.chat.input.simple-command :refer [simple-command-input-view]] - [syng-im.components.chat.input.phone :refer [phone-input-view]] - [syng-im.components.chat.input.password :refer [password-input-view]] - [syng-im.components.chat.input.confirmation-code :refer [confirmation-code-input-view]] - [syng-im.components.chat.input.money :refer [money-input-view]] - [syng-im.components.chat.input.simple-command-staged :refer [simple-command-staged-view]] - [syng-im.utils.utils :refer [log toast http-post]] - [syng-im.utils.logging :as log] - [syng-im.resources :as res] - [reagent.core :as r])) + [re-frame.core :refer [subscribe]] + [syng-im.components.react :refer [view]] + [syng-im.components.chat.plain-message-input :refer [plain-message-input-view]] + [syng-im.components.chat.input.simple-command :refer [simple-command-input-view]] + [syng-im.components.chat.input.phone :refer [phone-input-view]] + [syng-im.components.chat.input.password :refer [password-input-view]] + [syng-im.components.chat.input.confirmation-code :refer [confirmation-code-input-view]] + [syng-im.components.chat.input.money :refer [money-input-view]] + [syng-im.components.chat.input.simple-command-staged :refer [simple-command-staged-view]] + [syng-im.components.chat.chat-message-styles :as st])) (defn staged-command-view [stage-command] [simple-command-staged-view stage-command]) @@ -40,13 +32,12 @@ [default-command-input-view command])) (defn chat-message-new [] - (let [command-atom (subscribe [:get-chat-command]) + (let [command-atom (subscribe [:get-chat-command]) staged-commands-atom (subscribe [:get-chat-staged-commands])] (fn [] - (let [command @command-atom + (let [command @command-atom staged-commands @staged-commands-atom] - [view {:style {:backgroundColor color-white - :elevation 4}} + [view st/new-message-container (when (and staged-commands (pos? (count staged-commands))) [staged-commands-view staged-commands]) (if command diff --git a/src/syng_im/components/chat/chat_message_styles.cljs b/src/syng_im/components/chat/chat_message_styles.cljs index c0170d6197..7386ba7b3d 100644 --- a/src/syng_im/components/chat/chat_message_styles.cljs +++ b/src/syng_im/components/chat/chat_message_styles.cljs @@ -25,7 +25,6 @@ :lineHeight 14 :height 16}) - (defn message-padding-top [{:keys [new-day same-author same-direction]}] (cond @@ -309,3 +308,22 @@ (def message-date-text (assoc style-sub-text :textAlign :center)) + +(def new-message-container + {:backgroundColor color-white + :elevation 4}) + +(def participants-container + {:flex 1 + :backgroundColor "white"}) + +(def participants-list + {:backgroundColor "white"}) + +(def new-participant-image + {:width 20 + :height 18}) + +(def remove-participants-image + {:width 22 + :height 30}) diff --git a/src/syng_im/components/chat/new_participants.cljs b/src/syng_im/components/chat/new_participants.cljs index b3e1b4e446..a4bce09507 100644 --- a/src/syng_im/components/chat/new_participants.cljs +++ b/src/syng_im/components/chat/new_participants.cljs @@ -1,40 +1,34 @@ (ns syng-im.components.chat.new-participants - (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] + (:require [re-frame.core :refer [subscribe dispatch]] [syng-im.resources :as res] - [syng-im.components.react :refer [view android? text-input text image - touchable-highlight]] + [syng-im.components.react :refer [view]] [syng-im.components.realm :refer [list-view]] - [syng-im.components.styles :refer [font - title-font - color-white - color-black - color-blue - text1-color - text2-color - toolbar-background1]] [syng-im.components.toolbar :refer [toolbar]] [syng-im.utils.listview :refer [to-realm-datasource]] - [syng-im.components.chats.new-participant-contact :refer [new-participant-contact]] + [syng-im.components.chats.new-participant-contact + :refer [new-participant-contact]] [reagent.core :as r] - [syng-im.navigation :refer [nav-pop]])) + [syng-im.components.chat.chat-message-styles :as st])) (defn new-participants-toolbar [navigator] - [toolbar {:navigator navigator - :title "Add Participants" - :action {:image {:source res/v ;; {:uri "icon_search"} - :style {:width 20 - :height 18}} - :handler (fn [] - (dispatch [:add-new-participants navigator]))}}]) + [toolbar + {:navigator navigator + :title "Add Participants" + :action {:image {:source res/v ;; {:uri "icon_search"} + :style st/new-participant-image} + :handler #(dispatch [:add-new-participants navigator])}}]) + +(defn new-participants-row [navigator] + (fn [row _ _] + (r/as-element + [new-participant-contact (js->clj row :keywordize-keys true) navigator]))) (defn new-participants [{:keys [navigator]}] (let [contacts (subscribe [:all-new-contacts])] (fn [] (let [contacts-ds (to-realm-datasource @contacts)] - [view {:style {:flex 1 - :backgroundColor "white"}} + [view st/participants-container [new-participants-toolbar navigator] [list-view {:dataSource contacts-ds - :renderRow (fn [row section-id row-id] - (r/as-element [new-participant-contact (js->clj row :keywordize-keys true) navigator])) - :style {:backgroundColor "white"}}]])))) + :renderRow (new-participants-row navigator) + :style st/participants-list}]])))) diff --git a/src/syng_im/components/chat/plain_message_input.cljs b/src/syng_im/components/chat/plain_message_input.cljs index 932869c81c..143dc79daf 100644 --- a/src/syng_im/components/chat/plain_message_input.cljs +++ b/src/syng_im/components/chat/plain_message_input.cljs @@ -1,16 +1,11 @@ (ns syng-im.components.chat.plain-message-input (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] - [syng-im.components.react :refer [android? - view - image + [syng-im.components.react :refer [view + icon touchable-highlight text-input]] - [syng-im.components.styles :refer [font - text2-color - color-white - color-blue]] [syng-im.components.chat.suggestions :refer [suggestions-view]] - [syng-im.utils.utils :refer [log toast http-post]])) + [syng-im.components.chat.plain-message-input-styles :as st])) (defn set-input-message [message] (dispatch [:set-chat-input-text message])) @@ -29,48 +24,19 @@ staged-commands-atom (subscribe [:get-chat-staged-commands])] (fn [] (let [input-message @input-message-atom] - [view {:style {:flexDirection :column}} + [view st/input-container [suggestions-view] - [view {:style {:flexDirection :row - :height 56 - :backgroundColor color-white}} - [image {:source {:uri :icon_list} - :style {:marginTop 22 - :marginRight 6 - :marginBottom 6 - :marginLeft 21 - :width 13 - :height 12}}] - [text-input {:underlineColorAndroid :transparent - :style {:flex 1 - :marginLeft 16 - :marginTop -2 - :padding 0 - :fontSize 14 - :fontFamily font - :color text2-color} - :autoFocus (pos? (count @staged-commands-atom)) - :placeholder "Type" - :placeholderTextColor text2-color - :onChangeText set-input-message - :onSubmitEditing #(send @chat input-message)} + [view st/input-view + [icon :list st/list-icon] + [text-input {:style st/message-input + :autoFocus (pos? (count @staged-commands-atom)) + :placeholder "Type" + :onChangeText set-input-message + :onSubmitEditing #(send @chat input-message)} input-message] - [image {:source {:uri :icon_smile} - :style {:marginTop 18 - :marginRight 18 - :width 20 - :height 20}}] + [icon :smile st/smile-icon] (when (or (pos? (count input-message)) (pos? (count @staged-commands-atom))) [touchable-highlight {:on-press #(send @chat input-message)} - [view {:style {:marginTop 10 - :marginRight 10 - :width 36 - :height 36 - :borderRadius 50 - :backgroundColor color-blue}} - [image {:source {:uri :icon_send} - :style {:marginTop 10.5 - :marginLeft 12 - :width 15 - :height 15}}]]])]])))) + [view st/send-container + [icon :send st/send-icon]]])]])))) diff --git a/src/syng_im/components/chat/plain_message_input_styles.cljs b/src/syng_im/components/chat/plain_message_input_styles.cljs new file mode 100644 index 0000000000..01b90f2bf8 --- /dev/null +++ b/src/syng_im/components/chat/plain_message_input_styles.cljs @@ -0,0 +1,50 @@ +(ns syng-im.components.chat.plain-message-input-styles + (:require [syng-im.components.styles :refer [font + text2-color + color-white + color-blue]])) + +(def input-container + {:flexDirection :column}) + +(def input-view + {:flexDirection :row + :height 56 + :backgroundColor color-white}) + +(def list-icon + {:marginTop 22 + :marginRight 6 + :marginBottom 6 + :marginLeft 21 + :width 13 + :height 12}) + +(def message-input + {:flex 1 + :marginLeft 16 + :marginTop -2 + :padding 0 + :fontSize 14 + :fontFamily font + :color text2-color}) + +(def smile-icon + {:marginTop 18 + :marginRight 18 + :width 20 + :height 20}) + +(def send-icon + {:marginTop 10.5 + :marginLeft 12 + :width 15 + :height 15}) + +(def send-container + {:marginTop 10 + :marginRight 10 + :width 36 + :height 36 + :borderRadius 50 + :backgroundColor color-blue}) diff --git a/src/syng_im/components/chat/remove_participants.cljs b/src/syng_im/components/chat/remove_participants.cljs index dded8733b8..ca1b9aaf7f 100644 --- a/src/syng_im/components/chat/remove_participants.cljs +++ b/src/syng_im/components/chat/remove_participants.cljs @@ -1,40 +1,35 @@ (ns syng-im.components.chat.remove-participants - (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] + (:require [re-frame.core :refer [subscribe dispatch]] [syng-im.resources :as res] [syng-im.components.react :refer [view text-input text image touchable-highlight]] [syng-im.components.realm :refer [list-view]] - [syng-im.components.styles :refer [font - title-font - color-white - color-black - color-blue - text1-color - text2-color - toolbar-background1]] [syng-im.components.toolbar :refer [toolbar]] [syng-im.utils.listview :refer [to-realm-datasource]] - [syng-im.components.chats.new-participant-contact :refer [new-participant-contact]] + [syng-im.components.chats.new-participant-contact + :refer [new-participant-contact]] [reagent.core :as r] - [syng-im.navigation :refer [nav-pop]])) + [syng-im.components.chat.chat-message-styles :as st])) (defn remove-participants-toolbar [navigator] - [toolbar {:navigator navigator - :title "Remove Participants" - :action {:image {:source res/trash-icon ;; {:uri "icon_search"} - :style {:width 22 - :height 30}} - :handler (fn [] - (dispatch [:remove-selected-participants navigator]))}}]) + [toolbar + {:navigator navigator + :title "Remove Participants" + :action {:handler #(dispatch [:remove-selected-participants navigator]) + :image {:source res/trash-icon ;; {:uri "icon_search"} + :style st/remove-participants-image}}}]) + +(defn remove-participants-row [navigator] + (fn [row _ _] + (r/as-element + [new-participant-contact (js->clj row :keywordize-keys true) navigator]))) (defn remove-participants [{:keys [navigator]}] (let [contacts (subscribe [:current-chat-contacts])] (fn [] (let [contacts-ds (to-realm-datasource @contacts)] - [view {:style {:flex 1 - :backgroundColor "white"}} + [view st/participants-container [remove-participants-toolbar navigator] [list-view {:dataSource contacts-ds - :renderRow (fn [row section-id row-id] - (r/as-element [new-participant-contact (js->clj row :keywordize-keys true) navigator])) - :style {:backgroundColor "white"}}]])))) + :renderRow (remove-participants-row navigator) + :style st/participants-list}]])))) diff --git a/src/syng_im/components/chat/suggestions.cljs b/src/syng_im/components/chat/suggestions.cljs index a723e179de..b1654fbf53 100644 --- a/src/syng_im/components/chat/suggestions.cljs +++ b/src/syng_im/components/chat/suggestions.cljs @@ -1,54 +1,29 @@ (ns syng-im.components.chat.suggestions (:require-macros [natal-shell.core :refer [with-error-view]]) - (:require [clojure.string :as cstr] - [reagent.core :as r] - [re-frame.core :refer [subscribe dispatch dispatch-sync]] + (:require [re-frame.core :refer [subscribe dispatch]] [syng-im.components.react :refer [view - image text touchable-highlight list-view list-item]] - [syng-im.components.styles :refer [font - color-white]] [syng-im.utils.listview :refer [to-datasource]] - [syng-im.utils.utils :refer [log toast http-post]] - [syng-im.utils.logging :as log])) + [syng-im.components.chat.suggestions-styles :as st])) (defn set-command-input [command] (dispatch [:set-chat-command command])) (defn suggestion-list-item [suggestion] - [touchable-highlight {:onPress #(set-command-input (keyword (:command suggestion)))} - [view {:style {:flexDirection "row" - :marginVertical 1 - :marginHorizontal 0 - :height 40 - :backgroundColor color-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 font - :color color-white}} + [touchable-highlight + {:onPress #(set-command-input (keyword (:command suggestion)))} + [view st/suggestion-item-container + [view (st/suggestion-background suggestion) + [text {:style st/suggestion-text} (:text suggestion)]] - [text {:style {:flex 1 - :position "absolute" - :top 7 - :left 190 - :lineHeight 18 - :fontSize 14 - :fontFamily font - :color "black"}} + [text {:style st/suggestion-description} (:description suggestion)]]]) -(defn render-row [row section-id row-id] +(defn render-row [row _ _] (list-item [suggestion-list-item (js->clj row :keywordize-keys true)])) (defn suggestions-view [] @@ -56,12 +31,7 @@ (fn [] (let [suggestions @suggestions-atom] (when (seq suggestions) - [view {:style {:flexDirection "row" - :marginVertical 1 - :marginHorizontal 0 - :height (min 105 (* 42 (count suggestions))) - :backgroundColor color-white - :borderRadius 5}} + [view (st/suggestions-container suggestions) [list-view {:dataSource (to-datasource suggestions) :renderRow render-row :style {}}]]))))) diff --git a/src/syng_im/components/chat/suggestions_styles.cljs b/src/syng_im/components/chat/suggestions_styles.cljs new file mode 100644 index 0000000000..acd754b6e0 --- /dev/null +++ b/src/syng_im/components/chat/suggestions_styles.cljs @@ -0,0 +1,44 @@ +(ns syng-im.components.chat.suggestions-styles + (:require [syng-im.components.styles :refer [font color-white]])) + +(def suggestion-item-container + {:flexDirection "row" + :marginVertical 1 + :marginHorizontal 0 + :height 40 + :backgroundColor color-white}) + +(defn suggestion-background + [{:keys [color]}] + {:flexDirection "column" + :position "absolute" + :top 10 + :left 60 + :backgroundColor color + :borderRadius 10}) + +(def suggestion-text + {:marginTop -2 + :marginHorizontal 10 + :fontSize 14 + :fontFamily font + :color color-white}) + +(def suggestion-description + {:flex 1 + :position "absolute" + :top 7 + :left 190 + :lineHeight 18 + :fontSize 14 + :fontFamily font + :color "black"}) + +(defn suggestions-container + [suggestions] + {:flexDirection "row" + :marginVertical 1 + :marginHorizontal 0 + :height (min 105 (* 42 (count suggestions))) + :backgroundColor color-white + :borderRadius 5}) diff --git a/src/syng_im/components/react.cljs b/src/syng_im/components/react.cljs index 331fbfbd09..7903b4d0ae 100644 --- a/src/syng_im/components/react.cljs +++ b/src/syng_im/components/react.cljs @@ -1,5 +1,6 @@ (ns syng-im.components.react - (:require [reagent.core :as r])) + (:require [reagent.core :as r] + [syng-im.components.styles :as st])) (set! js/window.React (js/require "react-native")) @@ -15,7 +16,13 @@ content]) (def toolbar-android (r/adapt-react-class (.-ToolbarAndroid js/React))) (def list-view (r/adapt-react-class (.-ListView js/React))) -(def text-input (r/adapt-react-class (.-TextInput js/React))) +(def text-input-class (r/adapt-react-class (.-TextInput js/React))) +(defn text-input [props text] + [text-input-class (merge + {:underlineColorAndroid :transparent + :placeholderTextColor st/text2-color} + props) + text]) (defn icon [n style]