diff --git a/images/icon_add.png b/images/icon_add.png new file mode 100644 index 0000000000..8593bd6d04 Binary files /dev/null and b/images/icon_add.png differ diff --git a/images/icon_group.png b/images/icon_group.png new file mode 100644 index 0000000000..373056e72b Binary files /dev/null and b/images/icon_group.png differ diff --git a/images/icon_hamburger.png b/images/icon_hamburger.png new file mode 100644 index 0000000000..c3c67a10df Binary files /dev/null and b/images/icon_hamburger.png differ diff --git a/images/icon_search.png b/images/icon_search.png new file mode 100644 index 0000000000..7ea3e3bf36 Binary files /dev/null and b/images/icon_search.png differ diff --git a/src/syng_im/components/chats/chat_list_item.cljs b/src/syng_im/components/chats/chat_list_item.cljs index 82f2c1e50a..80efff57a7 100644 --- a/src/syng_im/components/chats/chat_list_item.cljs +++ b/src/syng_im/components/chats/chat_list_item.cljs @@ -5,23 +5,36 @@ image touchable-highlight]] [syng-im.components.styles :refer [font]] + [syng-im.components.chats.chat-list-item-inner :refer [chat-list-item-inner-view]] [syng-im.utils.logging :as log] [syng-im.resources :as res])) (defn chat-list-item [chat-obj navigator] + (log/info "!!!!!") + (log/info chat-obj) [touchable-highlight {:on-press (fn [] (dispatch [:show-chat (aget chat-obj "chat-id") navigator]))} - [view {:style {:flexDirection "row" - :width 260 - :marginVertical 5}} - [image {:source res/chat-icon - :style {:borderWidth 2 - :borderColor "#FFFFFF" - :width 32 - :height 30 - :marginRight 5 - :marginLeft 5}}] - [text {:style {:fontSize 14 - :fontFamily font - :color "#4A5258"}} - (subs (aget chat-obj "name") 0 30)]]]) + ;; 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) + {:photo-path nil + :delivery-status :seen + :new-messages-count 3 + :timestamp "13:54" + :online true + :group-chat true})]]]) + +(comment [view {:style {:flexDirection "row" + :width 260 + :marginVertical 5}} + [image {:source res/chat-icon + :style {:borderWidth 2 + :borderColor "#FFFFFF" + :width 32 + :height 30 + :marginRight 5 + :marginLeft 5}}] + [text {:style {:fontSize 14 + :fontFamily font + :color "#4A5258"}} + (subs (aget chat-obj "name") 0 30)]]) diff --git a/src/syng_im/components/chats/chat_list_item_inner.cljs b/src/syng_im/components/chats/chat_list_item_inner.cljs new file mode 100644 index 0000000000..eefd421a68 --- /dev/null +++ b/src/syng_im/components/chats/chat_list_item_inner.cljs @@ -0,0 +1,126 @@ +(ns syng-im.components.chats.chat-list-item-inner + (:require [clojure.string :as s] + [syng-im.components.react :refer [view image text]] + [syng-im.components.styles :refer [font + title-font + color-white + color-blue + online-color + text1-color + text2-color + new-messages-count-color]] + [syng-im.resources :as res])) + +(defn contact-photo [{:keys [photo-path]}] + [view {:borderRadius 50} + [image {:source (if (s/blank? photo-path) + res/user-no-photo + {:uri photo-path}) + :style {:borderRadius 50 + :width 40 + :height 40}}]]) + +(defn contact-online [{:keys [online]}] + (when online + [view {:position "absolute" + :top 24 + :left 24 + :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}]])) + +(defn chat-list-item-inner-view + [{:keys [name photo-path delivery-status timestamp new-messages-count online + group-chat contacts]}] + [view {:style {:flexDirection "row" + :paddingVertical 15 + :paddingHorizontal 16 + :height 90}} + [view {:marginTop 2 + :width 44 + :height 44} +;;; photo + [contact-photo {:photo-path photo-path}] +;;; online + [contact-online {:online online}]] + [view {:style {:flexDirection "column" + :marginLeft 12 + :flex 1}} +;;; name + [view {:style {:flexDirection "row"}} + [text {:style {:marginTop -2.5 + :color text1-color + :fontSize 14 + :fontFamily title-font}} name] +;;; group size + (when group-chat + [image {:source res/icon-group + :style {:marginTop 4 + :marginLeft 8}}]) + (when group-chat + [text {:style {:marginTop -0.5 + :marginLeft 4 + :fontFamily font + :fontSize 12 + :color text2-color}} + (if (< 1 (count contacts)) + (str (count contacts) " members") + "1 member")])] +;;; last message + [text {:style {:marginTop 7 + :marginRight 40 + :color text1-color + :fontFamily font + :fontSize 14 + :lineHeight 20}} + (repeatedly 5 #(str "Hi, I'm " name "! "))]] + [view {} +;;; delivery status + [view {:style {:flexDirection "row" + :position "absolute" + :top 0 + :right 0}} + (when delivery-status + [image {:source (if (= (keyword delivery-status) :seen) + res/seen-icon + res/delivered-icon) + :style {:marginTop 4}}]) +;;; datetime + [text {:style {:fontFamily font + :fontSize 12 + :color text2-color + :marginLeft 4}} + timestamp]] +;;; new messages count + (when (< 0 new-messages-count) + [view {:style {:position "absolute" + :top 36 + :right 0 + :width 24 + :height 24 + :backgroundColor new-messages-count-color + :borderRadius 50}} + [text {:style {:top 4 + :left 0 + :fontFamily title-font + :fontSize 10 + :color color-blue + :textAlign "center"}} + new-messages-count]])]]) diff --git a/src/syng_im/components/styles.cljs b/src/syng_im/components/styles.cljs index 2b1e56a843..b7a0e57eb3 100644 --- a/src/syng_im/components/styles.cljs +++ b/src/syng_im/components/styles.cljs @@ -1,6 +1,8 @@ (ns syng-im.components.styles) -(def font "Robot-Regular") +(def font "sans-serif") +;; (def font "Avenir-Roman") +(def title-font "sans-serif-medium") (def color-blue "#7099e6") (def color-black "#000000de") @@ -11,5 +13,7 @@ (def color-light-blue-transparent "#bbc4cb32") (def color-dark-mint "#5fc48d") -(def text1-color "#838c93") -(def text2-color "#838c93de") +(def text1-color color-black) +(def text2-color color-gray) +(def online-color color-blue) +(def new-messages-count-color "#7099e632") diff --git a/src/syng_im/resources.cljs b/src/syng_im/resources.cljs index 9a6b5e274d..5b9d7a97eb 100644 --- a/src/syng_im/resources.cljs +++ b/src/syng_im/resources.cljs @@ -21,3 +21,8 @@ (def icon-lock-white (js/require "./images/icon_lock_white.png")) (def icon-ok-small (js/require "./images/icon_ok_small.png")) (def icon-smile (js/require "./images/icon_smile.png")) + +(def icon-add (js/require "./images/icon_add.png")) +(def icon-group (js/require "./images/icon_group.png")) +(def icon-hamburger (js/require "./images/icon_hamburger.png")) +(def icon-search (js/require "./images/icon_search.png"))