diff --git a/src/syng_im/chat/screen.cljs b/src/syng_im/chat/screen.cljs index dd355b4223..615df4c025 100644 --- a/src/syng_im/chat/screen.cljs +++ b/src/syng_im/chat/screen.cljs @@ -32,13 +32,19 @@ (assoc msg :text-color text-color :background-color background-color)))) -(defn chat-photo [{:keys [photo-path]}] - [view {:margin 10 - :borderRadius 50} - [image {:source (if (s/blank? photo-path) - res/user-no-photo - {:uri photo-path}) - :style st/chat-photo}]]) +(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 diff --git a/src/syng_im/chat/styles/screen.cljs b/src/syng_im/chat/styles/screen.cljs index f3e74ac123..b789b8098c 100644 --- a/src/syng_im/chat/styles/screen.cljs +++ b/src/syng_im/chat/styles/screen.cljs @@ -21,8 +21,10 @@ :elevation 2}) (def icon-view - {:width 56 - :height 56}) + {:width 56 + :height 56 + :paddingTop 10 + :paddingLeft 10}) (def back-icon {:marginTop 21 @@ -153,6 +155,24 @@ :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 diff --git a/src/syng_im/chats_list/styles.cljs b/src/syng_im/chats_list/styles.cljs index 5b37f27122..dee98e3e0b 100644 --- a/src/syng_im/chats_list/styles.cljs +++ b/src/syng_im/chats_list/styles.cljs @@ -8,6 +8,21 @@ 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}) diff --git a/src/syng_im/chats_list/views/chat_list_item.cljs b/src/syng_im/chats_list/views/chat_list_item.cljs index 3673701ccc..c11e2fcd3f 100644 --- a/src/syng_im/chats_list/views/chat_list_item.cljs +++ b/src/syng_im/chats_list/views/chat_list_item.cljs @@ -13,8 +13,8 @@ {:on-press #(dispatch [:show-chat chat-id :push])} ;; TODO add [photo-path delivery-status new-messages-count online] values to chat-obj [view [chat-list-item-inner-view (merge chat - {:photo-path nil - :delivery-status :seen + ;; TODO stub data + {:delivery-status :seen :new-messages-count 3 :timestamp "13:54" :online true})]]]) diff --git a/src/syng_im/chats_list/views/inner_item.cljs b/src/syng_im/chats_list/views/inner_item.cljs index 0e43c75426..7248e076d8 100644 --- a/src/syng_im/chats_list/views/inner_item.cljs +++ b/src/syng_im/chats_list/views/inner_item.cljs @@ -1,16 +1,19 @@ (ns syng-im.chats-list.views.inner-item - (:require [clojure.string :as s] - [syng-im.components.react :refer [view image icon text]] - [syng-im.chats-list.styles :as st] - [syng-im.resources :as res])) + (:require-macros [syng-im.utils.views :refer [defview]]) + (:require [syng-im.components.react :refer [view image icon text]] + [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)]]) -(defn contact-photo [photo-path] - [view st/contact-photo-container - [image {:source (if (s/blank? photo-path) - res/user-no-photo - {:uri photo-path}) - :style st/contact-photo-image}]]) +(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 @@ -19,11 +22,11 @@ [view st/online-dot-right]])) (defn chat-list-item-inner-view - [{:keys [name photo-path delivery-status timestamp new-messages-count online - group-chat contacts]}] + [{:keys [chat-id name photo-path delivery-status timestamp new-messages-count online + group-chat contacts] :as chat}] [view st/chat-container [view st/photo-container - [contact-photo photo-path] + [contact-photo chat] [contact-online online]] [view st/item-container [view st/name-view @@ -37,7 +40,8 @@ "1 member")])] [text {:style st/last-message-text :numberOfLines 2} - (repeatedly 5 #(str "Hi, I'm " name "! "))]] + (when-let [last-message (first (:messages chat))] + (:content last-message))]] [view [view st/status-container (when delivery-status diff --git a/src/syng_im/constants.cljs b/src/syng_im/constants.cljs index 84fbff6b8a..d300f03821 100644 --- a/src/syng_im/constants.cljs +++ b/src/syng_im/constants.cljs @@ -4,18 +4,9 @@ (def server-address "http://rpc0.syng.im:20000/") ;; (def server-address "http://10.0.3.2:3000/") +;; (def server-address "http://localhost:3000/") (def text-content-type "text/plain") (def content-type-command "command") (def content-type-command-request "command-request") (def content-type-status "status") - - -(comment - - (map (fn [c] - {:background c - :foreground c}) group-chat-colors) - (reverse group-chat-colors) - - ) diff --git a/src/syng_im/contacts/subs.cljs b/src/syng_im/contacts/subs.cljs index d889f12b60..7eae232d55 100644 --- a/src/syng_im/contacts/subs.cljs +++ b/src/syng_im/contacts/subs.cljs @@ -12,18 +12,21 @@ (let [contacts (reaction (:contacts @db))] (reaction (sort-by :name (vals @contacts)))))) -(defn contacts-by-current-chat [fn db] - (let [current-chat-id (:current-chat-id @db) - chat (reaction (get-in @db [:chats current-chat-id])) - contacts (reaction (:contacts @db))] +(defn contacts-by-chat [fn db chat-id] + (let [chat (reaction (get-in @db [:chats chat-id])) + contacts (reaction (:contacts @db))] (reaction - (when @chat - (let [current-participants (->> @chat - :contacts - (map :identity) - set)] - (fn #(current-participants (:whisper-identity %)) - (vals @contacts))))))) + (when @chat + (let [current-participants (->> @chat + :contacts + (map :identity) + set)] + (fn #(current-participants (:whisper-identity %)) + (vals @contacts))))))) + +(defn contacts-by-current-chat [fn db] + (let [current-chat-id (:current-chat-id @db)] + (contacts-by-chat fn db current-chat-id))) (register-sub :contact (fn [db _] @@ -37,3 +40,15 @@ (register-sub :current-chat-contacts (fn [db _] (contacts-by-current-chat filter db))) + +(register-sub :chat-photo + (fn [db [_ chat-id]] + (let [chat-id (or chat-id (:current-chat-id @db)) + chat (reaction (get-in @db [:chats chat-id])) + contacts (contacts-by-chat filter db chat-id)] + (reaction + (when @chat + (if (:group-chat @chat) + ;; TODO return group chat icon + nil + (:photo-path (first @contacts)))))))) diff --git a/src/syng_im/group_settings/styles/group_settings.cljs b/src/syng_im/group_settings/styles/group_settings.cljs index 092ab7387e..c891ebb3b3 100644 --- a/src/syng_im/group_settings/styles/group_settings.cljs +++ b/src/syng_im/group_settings/styles/group_settings.cljs @@ -56,12 +56,13 @@ {:margin 10 :width 36 :height 36 + :alignItems :center + :justifyContent :center :borderRadius 50 :backgroundColor color}) (def chat-icon-text - {:marginTop 7 - :marginLeft 13 + {:marginTop -2 :color color-white :fontFamily font :fontSize 16