From 1ce4c1d459517a036fd5d49363430b0ca90eb8d5 Mon Sep 17 00:00:00 2001 From: Roman Volosovskyi Date: Sat, 7 May 2016 16:39:03 +0300 Subject: [PATCH] styles --- src/syng_im/components/chat.cljs | 253 ++++-------------- src/syng_im/components/chat/chat_message.cljs | 3 +- .../components/chat/input/simple_command.cljs | 6 +- .../chat/input/simple_command_staged.cljs | 22 +- .../components/chat/plain_message_input.cljs | 3 +- src/syng_im/components/chat/suggestions.cljs | 4 +- src/syng_im/components/chat_styles.cljs | 168 ++++++++++++ .../components/chats/chat_list_item.cljs | 5 +- src/syng_im/components/chats/new_group.cljs | 3 +- .../components/contact_list/contact.cljs | 4 +- src/syng_im/components/react.cljs | 11 +- src/syng_im/components/toolbar.cljs | 14 +- 12 files changed, 248 insertions(+), 248 deletions(-) create mode 100644 src/syng_im/components/chat_styles.cljs diff --git a/src/syng_im/components/chat.cljs b/src/syng_im/components/chat.cljs index dda9f69d58..f39dd14b90 100644 --- a/src/syng_im/components/chat.cljs +++ b/src/syng_im/components/chat.cljs @@ -4,22 +4,14 @@ [syng-im.components.react :refer [view text image + icon navigator touchable-highlight toolbar-android list-view list-item android?]] - [syng-im.components.styles :refer [font - title-font - color-white - chat-background - online-color - selected-message-color - separator-color - text1-color - text2-color - toolbar-background1]] + [syng-im.components.chat-styles :as st] [syng-im.utils.logging :as log] [syng-im.resources :as res] [syng-im.constants :refer [content-type-status]] @@ -29,7 +21,6 @@ [syng-im.components.chat.chat-message :refer [chat-message]] [syng-im.components.chat.chat-message-new :refer [chat-message-new]])) - (defn contacts-by-identity [contacts] (->> contacts (map (fn [{:keys [identity] :as contact}] @@ -50,105 +41,25 @@ [image {:source (if (s/blank? photo-path) res/user-no-photo {:uri photo-path}) - :style {:borderRadius 50 - :width 36 - :height 36}}]]) + :style st/chat-photo-st}]]) (defn contact-online [{:keys [online]}] (when online - [view {:position "absolute" - :top 30 - :left 30 - :width 20 - :height 20 - :borderRadius 50 - :backgroundColor online-color - :borderWidth 2 - :borderColor color-white} - [view {:position "absolute" - :top 6 - :left 3 - :width 4 - :height 4 - :borderRadius 50 - :backgroundColor color-white}] - [view {:position "absolute" - :top 6 - :left 9 - :width 4 - :height 4 - :borderRadius 50 - :backgroundColor color-white}]])) + [view st/online-view + [view st/online-dot-left] + [view st/online-dot-right]])) (defn typing [member] - [view {:style {:width 260 - :marginTop 10 - :paddingLeft 8 - :paddingRight 8 - :alignItems "flex-start" - :alignSelf "flex-start"}} - [view {:style {:borderRadius 14 - :padding 12 - :height 38 - :backgroundColor selected-message-color}} - [text {:style {:marginTop -2 - :fontSize 12 - :fontFamily font - :color text2-color}} + [view st/typing-view + [view st/typing-background + [text {:style st/typing-text} (str member " is typing")]]]) (defn typing-all [] - [view {:style {:marginBottom 20}} + [view st/typing-all-st (for [member ["Geoff" "Justas"]] ^{:key member} [typing member])]) -(defn toolbar-content-chat [group-chat] - (let - [contacts (subscribe [:chat :contacts]) - name (subscribe [:chat :name])] - (fn [group-chat] - [view {:style {:flex 1 - :flexDirection "row" - :backgroundColor "transparent"}} - [view {:style {:flex 1 - :alignItems "flex-start" - :justifyContent "center" - :marginRight 112}} - [text {:style {:marginTop -2.5 - :color text1-color - :fontSize 16 - :fontFamily font}} - (or @name "Chat name")] - (if group-chat - [view {:style {:flexDirection "row"}} - [image {:source {:uri :icon_group} - :style {:marginTop 4 - :width 14 - :height 9}}] - [text {:style {:marginTop -0.5 - :marginLeft 4 - :fontFamily font - :fontSize 12 - :color text2-color}} - (let [cnt (count @contacts)] - (str cnt - (if (< 1 cnt) - ;; TODO https://github.com/r0man/inflections-clj - " members" - " member") - ", " cnt " active"))]] - [text {:style {:marginTop 1 - :color text2-color - :fontSize 12 - :fontFamily font}} - "Active a minute ago"])] - (when-not group-chat - [view {:style {:position "absolute" - :top 10 - :right 66}} - [chat-photo {}] - [contact-online {:online true}]])]))) - (defn message-row [contact-by-identity group-chat] (fn [row _ _] (let [msg (-> row @@ -156,17 +67,6 @@ (assoc :group-chat group-chat))] (list-item [chat-message msg])))) -(def group-caht-actions - [{:title "Add Contact to chat" - :icon res/add-icon - :showWithText true} - {:title "Remove Contact from chat" - :icon res/trash-icon - :showWithText true} - {:title "Leave Chat" - :icon res/leave-icon - :showWithText true}]) - (defn on-action-selected [position] (case position 0 (dispatch [:show-add-participants #_navigator]) @@ -174,43 +74,24 @@ 2 (dispatch [:leave-group-chat #_navigator]))) (defn overlay [{:keys [on-click-outside]} items] - [view {:position :absolute - :top 0 - :bottom 0 - :left 0 - :right 0} - [touchable-highlight {:on-press on-click-outside - :underlay-color :transparent - :style {:flex 1}} + [view st/actions-overlay + [touchable-highlight {:on-press on-click-outside + :style st/overlay-highlight} [view nil]] items]) -(defn action-view [action] +(defn action-view [{:keys [icon-style handler title subtitle] + icon-name :icon}] [touchable-highlight {:on-press (fn [] (dispatch [:set-show-actions false]) - ((:handler action))) - :underlay-color :transparent} - [view {:style {:flexDirection "row" - :height 56}} - [view {:width 56 - :height 56 - :alignItems "center" - :justifyContent "center"} - [image {:source {:uri (:icon action)} - :style (:icon-style action)}]] - [view {:style {:flex 1 - :alignItems "flex-start" - :justifyContent "center"}} - [text {:style {:marginTop -2.5 - :color text1-color - :fontSize 14 - :fontFamily font}} - (:title action)] - (when-let [subtitle (:subtitle action)] - [text {:style {:marginTop 1 - :color text2-color - :fontSize 12 - :fontFamily font}} + (handler))} + [view st/action-icon-row + [view st/action-icon-view + [icon icon-name icon-style]] + [view st/action-view-st + [text {:style st/action-title} title] + (when-let [subtitle subtitle] + [text {:style st/action-subtitle} subtitle])]]]) (defn actions-list-view [] @@ -218,40 +99,33 @@ (subscribe [:chat-properties [:group-chat :name :contacts :active]])] (when-let [actions (when (and @group-chat @active) [{:title "Add Contact to chat" - :icon :icon_menu_group + :icon :menu_group :icon-style {:width 25 :height 19} :handler nil #_#(dispatch [:show-add-participants navigator])} {:title "Remove Contact from chat" :subtitle "Alex, John" - :icon :icon_search_gray_copy + :icon :search_gray_copy :icon-style {:width 17 :height 17} :handler nil #_#(dispatch [:show-remove-participants navigator])} {:title "Leave Chat" - :icon :icon_muted + :icon :muted :icon-style {:width 18 :height 21} :handler nil #_#(dispatch [:leave-group-chat navigator])} {:title "Settings" :subtitle "Not implemented" - :icon :icon_settings + :icon :settings :icon-style {:width 20 :height 13} :handler (fn [])}])] - [view {:style {:backgroundColor toolbar-background1 - :elevation 2 - :position :absolute - :top 56 - :left 0 - :right 0}} - [view {:style {:marginLeft 16 - :height 1.5 - :backgroundColor separator-color}}] - [view {:style {:marginVertical 10}} + [view st/actions-wrapper + [view st/actions-separator] + [view st/actions-view-st (for [action actions] ^{:key action} [action-view action])]]))) @@ -264,67 +138,33 @@ (subscribe [:chat-properties [:group-chat :name :contacts]]) show-actions (subscribe [:show-actions])] (fn [] - [view {:style {:flexDirection "row" - :height 56 - :backgroundColor toolbar-background1 - :elevation 2}} + [view st/toolbar-view (when (not @show-actions) - [touchable-highlight {:on-press #(dispatch [:navigate-back]) - :underlay-color :transparent} - [view {:width 56 - :height 56} - [image {:source {:uri "icon_back"} - :style {:marginTop 21 - :marginLeft 23 - :width 8 - :height 14}}]]]) - [view {:style {:flex 1 - :marginLeft (if @show-actions 16 0) - :alignItems "flex-start" - :justifyContent "center"}} - [text {:style {:marginTop -2.5 - :color text1-color - :fontSize 16 - :fontFamily font}} + [touchable-highlight {:on-press #(dispatch [:navigate-back])} + [view st/icon-view + [icon :back st/back-icon]]]) + [view (st/chat-name-view @show-actions) + [text {:style st/chat-name-text} (or @name "Chat name")] (if @group-chat - [view {:style {:flexDirection :row}} - [image {:source {:uri :icon_group} - :style {:marginTop 4 - :width 14 - :height 9}}] - [text {:style {:marginTop -0.5 - :marginLeft 4 - :fontFamily font - :fontSize 12 - :color text2-color}} + [view {:flexDirection :row} + [icon :group st/group-icon] + [text {:style st/members} (let [cnt (count @contacts)] (str cnt (if (< 1 cnt) " members" " member") ", " cnt " active"))]] - [text {:style {:marginTop 1 - :color text2-color - :fontSize 12 - :fontFamily font}} - "Active a minute ago"])] + [text {:style st/last-activity} "Active a minute ago"])] (if @show-actions [touchable-highlight - {:on-press #(dispatch [:set-show-actions false]) - :underlay-color :transparent} - [view {:style {:width 56 - :height 56}} - [image {:source {:uri :icon_up} - :style {:marginTop 23 - :marginLeft 21 - :width 14 - :height 8}}]]] + {:on-press #(dispatch [:set-show-actions false])} + [view st/icon-view + [icon :up st/up-icon]]] [touchable-highlight - {:on-press #(dispatch [:set-show-actions true]) - :underlay-color :transparent} - [view {:style {:width 56 - :height 56}} + {:on-press #(dispatch [:set-show-actions true])} + [view st/icon-view [chat-photo {}] [contact-online {:online true}]]])]))) @@ -343,8 +183,7 @@ group-chat (subscribe [:chat :group-chat]) show-actions-atom (subscribe [:show-actions])] (fn [] - [view {:style {:flex 1 - :backgroundColor chat-background}} + [view st/chat-view [toolbar] [messages-view @group-chat] (when @group-chat [typing-all]) diff --git a/src/syng_im/components/chat/chat_message.cljs b/src/syng_im/components/chat/chat_message.cljs index 726e55e249..1184602da4 100644 --- a/src/syng_im/components/chat/chat_message.cljs +++ b/src/syng_im/components/chat/chat_message.cljs @@ -187,8 +187,7 @@ (fn [{:keys [msg-id content outgoing group-chat from]}] (let [commands @commands-atom {:keys [command content]} (parse-command-request-msg-content commands content)] - [touchable-highlight {:onPress #(set-chat-command msg-id command) - :underlay-color :transparent} + [touchable-highlight {:onPress #(set-chat-command msg-id command)} [view {:style {:paddingRight 16}} [view {:style (merge {:borderRadius 14 :padding 12 diff --git a/src/syng_im/components/chat/input/simple_command.cljs b/src/syng_im/components/chat/input/simple_command.cljs index 82be064403..d94d82bffc 100644 --- a/src/syng_im/components/chat/input/simple_command.cljs +++ b/src/syng_im/components/chat/input/simple_command.cljs @@ -62,8 +62,7 @@ message] (if (pos? (count message)) [touchable-highlight - {:on-press send-command - :underlay-color :transparent} + {:on-press send-command} [view {:style {:marginTop 10 :marginRight 10 :width 36 @@ -75,8 +74,7 @@ :marginLeft 12 :width 15 :height 15}}]]] - [touchable-highlight {:on-press cancel-command-input - :underlay-color :transparent} + [touchable-highlight {:on-press cancel-command-input} [view {:style {:marginTop 10 :marginRight 10 :width 36 diff --git a/src/syng_im/components/chat/input/simple_command_staged.cljs b/src/syng_im/components/chat/input/simple_command_staged.cljs index ba2f0f5a10..3e8d8ad959 100644 --- a/src/syng_im/components/chat/input/simple_command_staged.cljs +++ b/src/syng_im/components/chat/input/simple_command_staged.cljs @@ -23,8 +23,8 @@ (fn [staged-command] (let [chat-id @chat-id-atom command (:command staged-command)] - [view {:style {:flex 1 - :alignItems "flex-start" + [view {:style {:flex 1 + :alignItems "flex-start" :flexDirection "column" :backgroundColor color-white}} [view {:style {:flexDirection "column" @@ -36,19 +36,17 @@ [view {:style {:backgroundColor (:color command) :height 24 :borderRadius 50 - :marginRight 32 + :marginRight 32 :paddingTop 3 :paddingHorizontal 12}} - [text {:style {:fontSize 12 - :fontFamily font - :color color-white}} + [text {:style {:fontSize 12 + :fontFamily font + :color color-white}} (:text command)]] - [touchable-highlight {:style {:position "absolute" - :top 7 - :right 4} - :onPress #(cancel-command-input - staged-command) - :underlay-color :transparent} + [touchable-highlight {:style {:position "absolute" + :top 7 + :right 4} + :onPress #(cancel-command-input staged-command)} [image {:source res/icon-close-gray :style {:width 10 :height 10}}]]] diff --git a/src/syng_im/components/chat/plain_message_input.cljs b/src/syng_im/components/chat/plain_message_input.cljs index 14d5600cce..932869c81c 100644 --- a/src/syng_im/components/chat/plain_message_input.cljs +++ b/src/syng_im/components/chat/plain_message_input.cljs @@ -62,8 +62,7 @@ :height 20}}] (when (or (pos? (count input-message)) (pos? (count @staged-commands-atom))) - [touchable-highlight {:on-press #(send @chat input-message) - :underlay-color :transparent} + [touchable-highlight {:on-press #(send @chat input-message)} [view {:style {:marginTop 10 :marginRight 10 :width 36 diff --git a/src/syng_im/components/chat/suggestions.cljs b/src/syng_im/components/chat/suggestions.cljs index d4edbc9800..a723e179de 100644 --- a/src/syng_im/components/chat/suggestions.cljs +++ b/src/syng_im/components/chat/suggestions.cljs @@ -20,9 +20,7 @@ (dispatch [:set-chat-command command])) (defn suggestion-list-item [suggestion] - [touchable-highlight {:onPress (fn [] - (set-command-input (keyword (:command suggestion)))) - :underlay-color :transparent} + [touchable-highlight {:onPress #(set-command-input (keyword (:command suggestion)))} [view {:style {:flexDirection "row" :marginVertical 1 :marginHorizontal 0 diff --git a/src/syng_im/components/chat_styles.cljs b/src/syng_im/components/chat_styles.cljs new file mode 100644 index 0000000000..45b36d9cdb --- /dev/null +++ b/src/syng_im/components/chat_styles.cljs @@ -0,0 +1,168 @@ +(ns syng-im.components.chat-styles + (:require [syng-im.components.styles :refer [font + title-font + color-white + chat-background + online-color + selected-message-color + separator-color + text1-color + text2-color + toolbar-background1]])) + +(def chat-view + {:flex 1 + :backgroundColor chat-background}) + +(def toolbar-view + {:flexDirection :row + :height 56 + :backgroundColor toolbar-background1 + :elevation 2}) + +(def icon-view + {:width 56 + :height 56}) + +(def back-icon + {:marginTop 21 + :marginLeft 23 + :width 8 + :height 14}) + +(defn chat-name-view [show-actions] + {:flex 1 + :marginLeft (if show-actions 16 0) + :alignItems :flex-start + :justifyContent :center}) + +(def chat-name-text + {:marginTop -2.5 + :color text1-color + :fontSize 16 + :fontFamily font}) + +(def group-icon + {:marginTop 4 + :width 14 + :height 9}) + +(def up-icon + {:marginTop 23 + :marginLeft 21 + :width 14 + :height 8}) + +(def members + {:marginTop -0.5 + :marginLeft 4 + :fontFamily font + :fontSize 12 + :color text2-color}) + +(def last-activity + {:marginTop 1 + :color text2-color + :fontSize 12 + :fontFamily font}) + +(def actions-wrapper + {:backgroundColor toolbar-background1 + :elevation 2 + :position :absolute + :top 56 + :left 0 + :right 0}) + +(def actions-separator + {:marginLeft 16 + :height 1.5 + :backgroundColor separator-color}) + +(def actions-view-st + {:marginVertical 10}) + +(def action-icon-row + {:flexDirection :row + :height 56}) + +(def action-icon-view + (merge icon-view + {:alignItems :center + :justifyContent :center})) + +(def action-view-st + {:flex 1 + :alignItems :flex-start + :justifyContent :center}) + +(def action-title + {:marginTop -2.5 + :color text1-color + :fontSize 14 + :fontFamily font}) + +(def action-subtitle + {:marginTop 1 + :color text2-color + :fontSize 12 + :fontFamily font}) + +(def online-view + {:position :absolute + :top 30 + :left 30 + :width 20 + :height 20 + :borderRadius 50 + :backgroundColor online-color + :borderWidth 2 + :borderColor color-white}) + +(def online-dot + {:position :absolute + :top 6 + :width 4 + :height 4 + :borderRadius 50 + :backgroundColor color-white}) + +(def online-dot-left (merge online-dot {:left 3})) +(def online-dot-right (merge online-dot {:left 9})) + +(def typing-all-st + {:marginBottom 20}) +(def typing-view + {:width 260 + :marginTop 10 + :paddingLeft 8 + :paddingRight 8 + :alignItems :flex-start + :alignSelf :flex-start}) + +(def typing-background + {:borderRadius 14 + :padding 12 + :height 38 + :backgroundColor selected-message-color}) + +(def typing-text + {:marginTop -2 + :fontSize 12 + :fontFamily font + :color text2-color}) + +(def chat-photo-st + {:borderRadius 50 + :width 36 + :height 36}) + +(def actions-overlay + {:position :absolute + :top 0 + :bottom 0 + :left 0 + :right 0}) + +(def overlay-highlight + {:flex 1}) diff --git a/src/syng_im/components/chats/chat_list_item.cljs b/src/syng_im/components/chats/chat_list_item.cljs index 42d33c5a58..a6cc0dc5a1 100644 --- a/src/syng_im/components/chats/chat_list_item.cljs +++ b/src/syng_im/components/chats/chat_list_item.cljs @@ -10,9 +10,8 @@ [syng-im.resources :as res])) (defn chat-list-item [chat-obj navigator] - [touchable-highlight {:on-press (fn [] - (dispatch [:show-chat (aget chat-obj "chat-id") navigator :push])) - :underlay-color :transparent} + [touchable-highlight + {:on-press #(dispatch [:show-chat (aget chat-obj "chat-id") navigator :push])} ;; TODO add [photo-path delivery-status new-messages-count online] values to chat-obj ;; TODO should chat-obj be clj-map? [view {} [chat-list-item-inner-view (merge (js->clj chat-obj :keywordize-keys true) diff --git a/src/syng_im/components/chats/new_group.cljs b/src/syng_im/components/chats/new_group.cljs index f2461b4d73..d2c7ecf937 100644 --- a/src/syng_im/components/chats/new_group.cljs +++ b/src/syng_im/components/chats/new_group.cljs @@ -68,8 +68,7 @@ :fontSize 14 :lineHeight 20}} "Members"] - [touchable-highlight {:on-press (fn []) - :underlay-color :transparent} + [touchable-highlight {:on-press (fn [])} [view {:style {:flexDirection "row" :marginBottom 16}} [image {:source {:uri "icon_add_gray"} diff --git a/src/syng_im/components/contact_list/contact.cljs b/src/syng_im/components/contact_list/contact.cljs index 32f3f34d9c..7b9d5af1c1 100644 --- a/src/syng_im/components/contact_list/contact.cljs +++ b/src/syng_im/components/contact_list/contact.cljs @@ -9,7 +9,5 @@ (defn contact-view [{:keys [navigator contact]}] (let [{:keys [whisper-identity]} contact] - [touchable-highlight {:onPress (fn [] - (show-chat navigator whisper-identity)) - :underlay-color :transparent} + [touchable-highlight {:onPress #(show-chat navigator whisper-identity)} [view {} [contact-inner-view contact]]])) diff --git a/src/syng_im/components/react.cljs b/src/syng_im/components/react.cljs index c71953dff0..331fbfbd09 100644 --- a/src/syng_im/components/react.cljs +++ b/src/syng_im/components/react.cljs @@ -8,11 +8,20 @@ (def text (r/adapt-react-class (.-Text js/React))) (def view (r/adapt-react-class (.-View js/React))) (def image (r/adapt-react-class (.-Image js/React))) -(def touchable-highlight (r/adapt-react-class (.-TouchableHighlight js/React))) +(def touchable-highlight-class (r/adapt-react-class (.-TouchableHighlight js/React))) +(defn touchable-highlight [props content] + [touchable-highlight-class + (merge {:underlay-color :transparent} props) + 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))) + +(defn icon [n style] + [image {:source {:uri (keyword (str "icon_" (name n)))} + :style style}]) + (def platform (.. js/React -Platform -OS)) (def android? (= platform "android")) diff --git a/src/syng_im/components/toolbar.cljs b/src/syng_im/components/toolbar.cljs index 94155f8a6f..ad34b23efe 100644 --- a/src/syng_im/components/toolbar.cljs +++ b/src/syng_im/components/toolbar.cljs @@ -24,16 +24,13 @@ :height 56 :elevation 2}} (if nav-action - [touchable-highlight {:on-press (:handler nav-action) - :underlay-color :transparent} + [touchable-highlight {:on-press (:handler nav-action)} [view {:width 56 :height 56 :alignItems "center" :justifyContent "center"} [image (:image nav-action)]]] - [touchable-highlight {:on-press (fn [] - (nav-pop navigator)) - :underlay-color :transparent} + [touchable-highlight {:on-press #(nav-pop navigator)} [view {:width 56 :height 56} [image {:source {:uri "icon_back"} @@ -41,16 +38,15 @@ :marginLeft 23 :width 8 :height 14}}]]]) - [view {:style {:flex 1 - :alignItems "center" + [view {:style {:flex 1 + :alignItems "center" :justifyContent "center"}} [text {:style {:marginTop -2.5 :color text1-color :fontSize 16 :fontFamily font}} title]] - [touchable-highlight {:on-press (:handler action) - :underlay-color :transparent} + [touchable-highlight {:on-press (:handler action)} [view {:width 56 :height 56 :alignItems "center"