From ee28404ef606bcf0840d50968b0fa91b3fc76fe5 Mon Sep 17 00:00:00 2001 From: virvar Date: Thu, 19 May 2016 15:45:16 +0300 Subject: [PATCH] Chat icon component Former-commit-id: 4ce65b37f99a036bc9187eca796e25cc41625357 --- src/syng_im/chat/screen.cljs | 62 ++++------- src/syng_im/chat/styles/screen.cljs | 94 ++-------------- src/syng_im/chats_list/styles.cljs | 57 +--------- src/syng_im/chats_list/views/inner_item.cljs | 28 +---- src/syng_im/components/chat_icon/screen.cljs | 62 +++++++++++ src/syng_im/components/chat_icon/styles.cljs | 103 ++++++++++++++++++ src/syng_im/group_settings/screen.cljs | 12 +- .../group_settings/styles/group_settings.cljs | 20 +--- 8 files changed, 217 insertions(+), 221 deletions(-) create mode 100644 src/syng_im/components/chat_icon/screen.cljs create mode 100644 src/syng_im/components/chat_icon/styles.cljs diff --git a/src/syng_im/chat/screen.cljs b/src/syng_im/chat/screen.cljs index 615df4c025..49c5da0d7d 100644 --- a/src/syng_im/chat/screen.cljs +++ b/src/syng_im/chat/screen.cljs @@ -1,7 +1,6 @@ (ns syng-im.chat.screen (:require-macros [syng-im.utils.views :refer [defview]]) - (:require [clojure.string :as s] - [re-frame.core :refer [subscribe dispatch]] + (:require [re-frame.core :refer [subscribe dispatch]] [syng-im.components.react :refer [view text image @@ -9,8 +8,9 @@ touchable-highlight list-view list-item]] + [syng-im.components.chat-icon.screen :refer [chat-icon-view-action + chat-icon-view-menu-item]] [syng-im.chat.styles.screen :as st] - [syng-im.resources :as res] [syng-im.utils.listview :refer [to-datasource]] [syng-im.components.invertible-scroll-view :refer [invertible-scroll-view]] [syng-im.components.toolbar :refer [toolbar]] @@ -32,25 +32,13 @@ (assoc msg :text-color text-color :background-color background-color)))) -(defview default-chat-icon [] - [name [:chat :name] - color [:chat :color]] - [view (st/default-chat-icon color) - [text {:style st/default-chat-icon-text} (nth name 0)]]) - -(defview chat-photo [] - [photo-path [:chat-photo]] - (if photo-path - [view st/contact-photo-container - [image {:source {:uri photo-path} - :style st/chat-photo}]] - [default-chat-icon])) - -(defn contact-online [{:keys [online]}] - (when online - [view st/online-view - [view st/online-dot-left] - [view st/online-dot-right]])) +(defview chat-icon [] + [chat-id [:chat :chat-id] + group-chat [:chat :group-chat] + name [:chat :name] + color [:chat :color]] + ;; TODO stub data ('online' property) + [chat-icon-view-action chat-id group-chat name color true]) (defn typing [member] [view st/typing-view @@ -100,22 +88,13 @@ [text {:style st/action-subtitle} subtitle])]]]) -(defn menu-item-contact-photo [{:keys [photo-path]}] - [image {:source (if (s/blank? photo-path) - res/user-no-photo - {:uri photo-path}) - :style st/menu-item-profile-contact-photo}]) - -(defn menu-item-contact-online [{:keys [online]}] - (when online - [view st/menu-item-profile-online-view - [view st/menu-item-profile-online-dot-left] - [view st/menu-item-profile-online-dot-right]])) - -(defn menu-item-icon-profile [] - [view st/icon-view - [menu-item-contact-photo {}] - [menu-item-contact-online {:online true}]]) +(defview menu-item-icon-profile [] + [chat-id [:chat :chat-id] + group-chat [:chat :group-chat] + name [:chat :name] + color [:chat :color]] + ;; TODO stub data ('online' property) + [chat-icon-view-menu-item chat-id group-chat name color true]) (defn actions-list-view [] (let [{:keys [group-chat chat-id]} @@ -202,13 +181,12 @@ (if @show-actions [touchable-highlight {:on-press #(dispatch [:set-show-actions false])} - [view st/icon-view + [view st/action [icon :up st/up-icon]]] [touchable-highlight {:on-press #(dispatch [:set-show-actions true])} - [view st/icon-view - [chat-photo {}] - [contact-online {:online true}]]])))) + [view st/action + [chat-icon]]])))) (defn chat-toolbar [] (let [{:keys [group-chat name contacts]} diff --git a/src/syng_im/chat/styles/screen.cljs b/src/syng_im/chat/styles/screen.cljs index b789b8098c..6bcd2af0f7 100644 --- a/src/syng_im/chat/styles/screen.cljs +++ b/src/syng_im/chat/styles/screen.cljs @@ -20,11 +20,15 @@ :backgroundColor toolbar-background1 :elevation 2}) +(def action + {:width 56 + :height 56 + :alignItems :center + :justifyContent :center}) + (def icon-view - {:width 56 - :height 56 - :paddingTop 10 - :paddingLeft 10}) + {:width 56 + :height 56}) (def back-icon {:marginTop 21 @@ -50,10 +54,8 @@ :height 9}) (def up-icon - {:marginTop 23 - :marginLeft 21 - :width 14 - :height 8}) + {:width 14 + :height 8}) (def members {:marginTop -0.5 @@ -110,28 +112,6 @@ :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 {:marginBottom 20}) @@ -155,29 +135,6 @@ :fontFamily font :color text2-color}) -(defn default-chat-icon [color] - {:width 36 - :height 36 - :alignItems :center - :justifyContent :center - :borderRadius 50 - :backgroundColor color}) - -(def default-chat-icon-text - {:marginTop -2 - :color color-white - :fontFamily font - :fontSize 16 - :lineHeight 20}) - -(def contact-photo-container - {:borderRadius 50}) - -(def chat-photo - {:borderRadius 50 - :width 36 - :height 36}) - (def actions-overlay {:position :absolute :top 0 @@ -187,34 +144,3 @@ (def overlay-highlight {:flex 1}) - -;;----- Menu item Profile ---------------- - -(def menu-item-profile-contact-photo - {:marginTop 13 - :marginLeft 16 - :borderRadius 50 - :width 24 - :height 24}) - -(def menu-item-profile-online-view - {:position :absolute - :top 26 - :left 29 - :width 15 - :height 15 - :borderRadius 50 - :backgroundColor online-color - :borderWidth 2 - :borderColor color-white}) - -(def menu-item-profile-online-dot - {:position :absolute - :top 4 - :width 3 - :height 3 - :borderRadius 50 - :backgroundColor color-white}) - -(def menu-item-profile-online-dot-left (merge menu-item-profile-online-dot {:left 1.7})) -(def menu-item-profile-online-dot-right (merge menu-item-profile-online-dot {:left 6.3})) diff --git a/src/syng_im/chats_list/styles.cljs b/src/syng_im/chats_list/styles.cljs index dee98e3e0b..a67a3292f5 100644 --- a/src/syng_im/chats_list/styles.cljs +++ b/src/syng_im/chats_list/styles.cljs @@ -8,64 +8,17 @@ text2-color new-messages-count-color]])) -(defn default-chat-icon [color] - {:width 40 - :height 40 - :alignItems :center - :justifyContent :center - :borderRadius 50 - :backgroundColor color}) - -(def default-chat-icon-text - {:marginTop -2 - :color color-white - :fontFamily font - :fontSize 16 - :lineHeight 20}) - -(def contact-photo-container - {:borderRadius 50}) - -(def contact-photo-image - {:borderRadius 50 - :width 40 - :height 40}) - -(def online-container - {:position :absolute - :top 24 - :left 24 - :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 - (assoc online-dot :left 3)) - -(def online-dot-right - (assoc online-dot :left 9)) - (def chat-container {:flexDirection :row :paddingVertical 15 :paddingHorizontal 16 :height 90}) -(def photo-container - {:marginTop 2 - :width 44 - :height 44}) +(def chat-icon-container + {:marginTop -2 + :marginLeft -4 + :width 48 + :height 48}) (def item-container {:flexDirection :column diff --git a/src/syng_im/chats_list/views/inner_item.cljs b/src/syng_im/chats_list/views/inner_item.cljs index 7248e076d8..8f2b3b1554 100644 --- a/src/syng_im/chats_list/views/inner_item.cljs +++ b/src/syng_im/chats_list/views/inner_item.cljs @@ -1,33 +1,15 @@ (ns syng-im.chats-list.views.inner-item (:require-macros [syng-im.utils.views :refer [defview]]) (:require [syng-im.components.react :refer [view image icon text]] + [syng-im.components.chat-icon.screen :refer [chat-icon-view-chat-list]] [syng-im.chats-list.styles :as st])) -(defn default-chat-icon [{:keys [name color]}] - [view (st/default-chat-icon color) - [text {:style st/default-chat-icon-text} (nth name 0)]]) - -(defview contact-photo [chat] - [photo-path [:chat-photo (:chat-id chat)]] - (if photo-path - [view st/contact-photo-container - [image {:source {:uri photo-path} - :style st/contact-photo-image}]] - [default-chat-icon chat])) - -(defn contact-online [online] - (when online - [view st/online-container - [view st/online-dot-left] - [view st/online-dot-right]])) - (defn chat-list-item-inner-view - [{:keys [chat-id name photo-path delivery-status timestamp new-messages-count online - group-chat contacts] :as chat}] + [{:keys [chat-id name color photo-path delivery-status timestamp new-messages-count + online group-chat contacts] :as chat}] [view st/chat-container - [view st/photo-container - [contact-photo chat] - [contact-online online]] + [view st/chat-icon-container + [chat-icon-view-chat-list chat-id group-chat name color online]] [view st/item-container [view st/name-view [text {:style st/name-text} name] diff --git a/src/syng_im/components/chat_icon/screen.cljs b/src/syng_im/components/chat_icon/screen.cljs new file mode 100644 index 0000000000..194c23ca63 --- /dev/null +++ b/src/syng_im/components/chat_icon/screen.cljs @@ -0,0 +1,62 @@ +(ns syng-im.components.chat-icon.screen + (:require-macros [syng-im.utils.views :refer [defview]]) + (:require [re-frame.core :refer [subscribe dispatch]] + [syng-im.components.react :refer [view + text + image + icon]] + [syng-im.components.chat-icon.styles :as st])) + +(defn default-chat-icon [name color styles] + [view (:default-chat-icon styles) + [text {:style (:default-chat-icon-text styles)} + (nth name 0)]]) + +(defn chat-icon [photo-path styles] + [image {:source {:uri photo-path} + :style (:chat-icon styles)}]) + +(defn contact-online [online styles] + (when online + [view (:online-view styles) + [view (:online-dot-left styles)] + [view (:online-dot-right styles)]])) + +(defview chat-icon-view [chat-id group-chat name color online styles] + [photo-path [:chat-photo chat-id]] + [view (:container styles) + (if photo-path + [chat-icon photo-path styles] + [default-chat-icon name color styles]) + (when (not group-chat) + [contact-online online styles])]) + +(defn chat-icon-view-chat-list [chat-id group-chat name color online] + [chat-icon-view chat-id group-chat name color online + {:container st/container-chat-list + :online-view st/online-view + :online-dot-left st/online-dot-left + :online-dot-right st/online-dot-right + :chat-icon st/chat-icon-chat-list + :default-chat-icon (st/default-chat-icon-chat-list color) + :default-chat-icon-text st/default-chat-icon-text}]) + +(defn chat-icon-view-action [chat-id group-chat name color online] + [chat-icon-view chat-id group-chat name color online + {:container st/container + :online-view st/online-view + :online-dot-left st/online-dot-left + :online-dot-right st/online-dot-right + :chat-icon st/chat-icon + :default-chat-icon (st/default-chat-icon color) + :default-chat-icon-text st/default-chat-icon-text}]) + +(defn chat-icon-view-menu-item [chat-id group-chat name color online] + [chat-icon-view chat-id group-chat name color online + {:container st/container-menu-item + :online-view st/online-view-menu-item + :online-dot-left st/online-dot-left-menu-item + :online-dot-right st/online-dot-right-menu-item + :chat-icon st/chat-icon-menu-item + :default-chat-icon (st/default-chat-icon-menu-item color) + :default-chat-icon-text st/default-chat-icon-text}]) diff --git a/src/syng_im/components/chat_icon/styles.cljs b/src/syng_im/components/chat_icon/styles.cljs new file mode 100644 index 0000000000..8b0406080c --- /dev/null +++ b/src/syng_im/components/chat_icon/styles.cljs @@ -0,0 +1,103 @@ +(ns syng-im.components.chat-icon.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]])) + +(defn default-chat-icon [color] + {:margin 4 + :width 36 + :height 36 + :alignItems :center + :justifyContent :center + :borderRadius 50 + :backgroundColor color}) + +(defn default-chat-icon-chat-list [color] + (merge (default-chat-icon color) + {:width 40 + :height 40})) + +(defn default-chat-icon-menu-item [color] + (merge (default-chat-icon color) + {:width 24 + :height 24})) + +(def default-chat-icon-text + {:marginTop -2 + :color color-white + :fontFamily font + :fontSize 16 + :lineHeight 20}) + +(def chat-icon + {:margin 4 + :borderRadius 50 + :width 36 + :height 36}) + +(def chat-icon-chat-list + (merge chat-icon + {:width 40 + :height 40})) + +(def chat-icon-menu-item + (merge chat-icon + {:width 24 + :height 24})) + +(def online-view + {:position :absolute + :bottom 0 + :right 0 + :width 20 + :height 20 + :borderRadius 50 + :backgroundColor online-color + :borderWidth 2 + :borderColor color-white}) + +(def online-view-menu-item + (merge online-view + {:width 15 + :height 15})) + +(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 online-dot-menu-item + (merge online-dot + {:top 4 + :width 3 + :height 3})) + +(def online-dot-left-menu-item + (merge online-dot-menu-item {:left 1.7})) +(def online-dot-right-menu-item + (merge online-dot-menu-item {:left 6.3})) + +(def container + {:width 44 + :height 44}) + +(def container-chat-list + {:width 48 + :height 48}) + +(def container-menu-item + {:width 32 + :height 32}) diff --git a/src/syng_im/group_settings/screen.cljs b/src/syng_im/group_settings/screen.cljs index 9d3011b5fb..2b60ce8102 100644 --- a/src/syng_im/group_settings/screen.cljs +++ b/src/syng_im/group_settings/screen.cljs @@ -1,7 +1,6 @@ (ns syng-im.group-settings.screen (:require-macros [syng-im.utils.views :refer [defview]]) (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] - [syng-im.resources :as res] [syng-im.components.react :refer [view text-input text @@ -13,6 +12,7 @@ scroll-view touchable-highlight]] [syng-im.components.toolbar :refer [toolbar]] + [syng-im.components.chat-icon.screen :refer [chat-icon-view-action]] [syng-im.components.realm :refer [list-view]] [syng-im.components.styles :refer [color-purple text2-color]] @@ -125,10 +125,12 @@ ^{:key setting} [setting-view setting])])) (defview chat-icon [] - [name [:chat :name] - color [:chat :color]] - [view (st/chat-icon color) - [text {:style st/chat-icon-text} (nth name 0)]]) + [chat-id [:chat :chat-id] + group-chat [:chat :group-chat] + name [:chat :name] + color [:chat :color]] + [view st/action + [chat-icon-view-action chat-id group-chat name color false]]) (defn new-group-toolbar [] [toolbar {:title "Chat settings" diff --git a/src/syng_im/group_settings/styles/group_settings.cljs b/src/syng_im/group_settings/styles/group_settings.cljs index c891ebb3b3..3565a996b8 100644 --- a/src/syng_im/group_settings/styles/group_settings.cljs +++ b/src/syng_im/group_settings/styles/group_settings.cljs @@ -52,21 +52,11 @@ (def chat-members-container {:marginBottom 10}) -(defn chat-icon [color] - {:margin 10 - :width 36 - :height 36 - :alignItems :center - :justifyContent :center - :borderRadius 50 - :backgroundColor color}) - -(def chat-icon-text - {:marginTop -2 - :color color-white - :fontFamily font - :fontSize 16 - :lineHeight 20}) +(def action + {:width 56 + :height 56 + :alignItems :center + :justifyContent :center}) (def group-settings {:flex 1