From 0025d55b050c1e3fe0a572a28a342823e238bd06 Mon Sep 17 00:00:00 2001 From: virvar Date: Thu, 21 Apr 2016 23:08:07 +0300 Subject: [PATCH] Start New group view design --- images/icon_ok.png | Bin 0 -> 302 bytes .../components/chats/chat_list_item.cljs | 2 +- .../chats/chat_list_item_inner.cljs | 3 +- src/syng_im/components/chats/chats_list.cljs | 2 +- src/syng_im/components/chats/new_group.cljs | 94 ++++++++++++------ src/syng_im/resources.cljs | 1 + 6 files changed, 66 insertions(+), 36 deletions(-) create mode 100644 images/icon_ok.png diff --git a/images/icon_ok.png b/images/icon_ok.png new file mode 100644 index 0000000000000000000000000000000000000000..eb19a3fea518c1e028fd89e7783cb524e3c3338c GIT binary patch literal 302 zcmV+}0nz@6P)Px#=t)FDR45gtkx2@|KoCV;sBt)e8+Q&kpm-Oz?%cT%+_-eU`UI_6-FNKr)6G;Gl*7@`YgQ- zi#FUrH2m5%m|fl*rIys-5N+Z>2Oh4WFLU}P$V){Fu=M$#m4jV)f@lo4cc;{x8ZJcN zfT8D_b(zs5^*&O?IB-*@#v%Gf0^|oI^mmy00+=EX=7nx(0ssI207*qoM6N<$g73R` A)&Kwi literal 0 HcmV?d00001 diff --git a/src/syng_im/components/chats/chat_list_item.cljs b/src/syng_im/components/chats/chat_list_item.cljs index ad188993be..23650e1a9a 100644 --- a/src/syng_im/components/chats/chat_list_item.cljs +++ b/src/syng_im/components/chats/chat_list_item.cljs @@ -20,7 +20,7 @@ :new-messages-count 3 :timestamp "13:54" :online true - :group-chat true})]]]) + :group-chat false})]]]) (comment [view {:style {:flexDirection "row" :width 260 diff --git a/src/syng_im/components/chats/chat_list_item_inner.cljs b/src/syng_im/components/chats/chat_list_item_inner.cljs index 6062cfd36a..4a274bcea1 100644 --- a/src/syng_im/components/chats/chat_list_item_inner.cljs +++ b/src/syng_im/components/chats/chat_list_item_inner.cljs @@ -89,7 +89,8 @@ :color text1-color :fontFamily font :fontSize 14 - :lineHeight 20}} + :lineHeight 20} + :numberOfLines 2} (repeatedly 5 #(str "Hi, I'm " name "! "))]] [view {} ;;; delivery status diff --git a/src/syng_im/components/chats/chats_list.cljs b/src/syng_im/components/chats/chats_list.cljs index 4cc4334779..314d1b354c 100644 --- a/src/syng_im/components/chats/chats_list.cljs +++ b/src/syng_im/components/chats/chats_list.cljs @@ -37,7 +37,7 @@ (when android? ;; TODO add IOS version [toolbar-android {:navIcon res/icon-hamburger - :style {:backgroundColor "white" + :style {:backgroundColor color-white :height 56 :elevation 2} :onIconClicked (fn [] diff --git a/src/syng_im/components/chats/new_group.cljs b/src/syng_im/components/chats/new_group.cljs index 8e34287246..e7bf049eaf 100644 --- a/src/syng_im/components/chats/new_group.cljs +++ b/src/syng_im/components/chats/new_group.cljs @@ -1,8 +1,12 @@ (ns syng-im.components.chats.new-group (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] [syng-im.resources :as res] - [syng-im.components.react :refer [view toolbar-android android? text-input]] - [syng-im.components.styles :refer [font]] + [syng-im.components.react :refer [view toolbar-android android? text-input text]] + [syng-im.components.styles :refer [font + text1-color + text2-color + color-white + color-purple]] [syng-im.components.realm :refer [list-view]] [syng-im.utils.listview :refer [to-realm-datasource]] [syng-im.components.chats.new-group-contact :refer [new-group-contact]] @@ -15,39 +19,63 @@ (fn [] (let [contacts-ds (to-realm-datasource @contacts)] [view {:style {:flex 1 - :backgroundColor "white"}} + :flexDirection "column" + :backgroundColor color-white}} (when android? ;; TODO add IOS version - [toolbar-android {:logo res/logo-icon - :title "New Group Chat" - :titleColor "#4A5258" - :style {:backgroundColor "white" + [toolbar-android {:navIcon res/icon-back + :style {:backgroundColor color-white :height 56 :elevation 2} - :actions [{:title "Create" - :icon res/v - :show "always"}] - :onActionSelected (fn [position] - (dispatch [:create-new-group @group-name navigator])) - :navIcon res/nav-back-icon :onIconClicked (fn [] - (nav-pop navigator))}]) - [text-input {:underlineColorAndroid "#9CBFC0" - :style {:marginLeft 5 - :marginRight 5 - :fontSize 14 - :fontFamily font - :color "#9CBFC0"} - :autoFocus true - :placeholder "Group Name" - :value @group-name - :onChangeText (fn [new-text] - (reset! group-name new-text) - (r/flush)) - :onSubmitEditing (fn [e] - ;(dispatch [:send-chat-msg @chat-id @text]) - (reset! group-name nil))}] - [list-view {:dataSource contacts-ds - :renderRow (fn [row section-id row-id] - (r/as-element [new-group-contact (js->clj row :keywordize-keys true) navigator])) - :style {:backgroundColor "white"}}]])))) + (nav-pop navigator)) + :actions [{:title "Create" + ;; :icon res/icon-ok + :show "always" + :showWithText true}] + :onActionSelected (fn [position] + (dispatch [:create-new-group @group-name navigator]))} + [view {:style {:flex 1 + :alignItems "center" + :justifyContent "center" + :marginRight 112 + :backgroundColor "transparent"}} + [text {:style {:marginTop -2.5 + :color text1-color + :fontSize 16 + :fontFamily font}} + "New group chat"]]]) + [view {:style {:marginHorizontal 16}} + [text {:style {:marginTop 24 + :marginBottom 16 + :color text2-color + :fontFamily font + :fontSize 14 + :lineHeight 20}} + "Chat name"] + [text-input {:underlineColorAndroid color-purple + :style {:marginLeft -4 + :fontSize 14 + :fontFamily font + :color text1-color} + :autoFocus true + :placeholder "Group Name" + :placeholderTextColor text2-color + :onChangeText (fn [new-text] + (reset! group-name new-text) + (r/flush)) + :onSubmitEditing (fn [e] + ;(dispatch [:send-chat-msg @chat-id @text]) + (reset! group-name nil))} + @group-name] + [text {:style {:marginTop 24 + :marginBottom 16 + :color text2-color + :fontFamily font + :fontSize 14 + :lineHeight 20}} + "Members"] + [list-view {:dataSource contacts-ds + :renderRow (fn [row section-id row-id] + (r/as-element [new-group-contact (js->clj row :keywordize-keys true) navigator])) + :style {:backgroundColor "white"}}]]])))) diff --git a/src/syng_im/resources.cljs b/src/syng_im/resources.cljs index 7697983526..5315cc3c32 100644 --- a/src/syng_im/resources.cljs +++ b/src/syng_im/resources.cljs @@ -31,3 +31,4 @@ (def icon-search (js/require "./images/icon_search.png")) (def icon-send (js/require "./images/icon_send.png")) (def icon-close-gray (js/require "./images/icon_close_gray.png")) +(def icon-ok (js/require "./images/icon_ok.png"))