status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Start New group view design

This commit is contained in:
virvar 2016-04-21 23:08:07 +03:00
parent 4016767f17
commit 0025d55b05
6 changed files with 66 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/icon_ok.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 302 B

2
src/syng_im/components/chats/chat_list_item.cljs
View File

@ -20,7 +20,7 @@
:new-messages-count 3 :new-messages-count 3
:timestamp "13:54" :timestamp "13:54"
:online true :online true
:group-chat true})]]]) :group-chat false})]]])
(comment [view {:style {:flexDirection "row" (comment [view {:style {:flexDirection "row"
:width 260 :width 260

3
src/syng_im/components/chats/chat_list_item_inner.cljs
View File

@ -89,7 +89,8 @@
:color text1-color :color text1-color
:fontFamily font :fontFamily font
:fontSize 14 :fontSize 14
:lineHeight 20}} :lineHeight 20}
:numberOfLines 2}
(repeatedly 5 #(str "Hi, I'm " name "! "))]] (repeatedly 5 #(str "Hi, I'm " name "! "))]]
[view {} [view {}
;;; delivery status ;;; delivery status

2
src/syng_im/components/chats/chats_list.cljs
View File

@ -37,7 +37,7 @@
(when android? (when android?
;; TODO add IOS version ;; TODO add IOS version
[toolbar-android {:navIcon res/icon-hamburger [toolbar-android {:navIcon res/icon-hamburger
:style {:backgroundColor "white" :style {:backgroundColor color-white
:height 56 :height 56
:elevation 2} :elevation 2}
:onIconClicked (fn [] :onIconClicked (fn []

70
src/syng_im/components/chats/new_group.cljs
View File

@ -1,8 +1,12 @@
(ns syng-im.components.chats.new-group (ns syng-im.components.chats.new-group
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.resources :as res] [syng-im.resources :as res]
[syng-im.components.react :refer [view toolbar-android android? text-input]] [syng-im.components.react :refer [view toolbar-android android? text-input text]]
[syng-im.components.styles :refer [font]] [syng-im.components.styles :refer [font
text1-color
text2-color
color-white
color-purple]]
[syng-im.components.realm :refer [list-view]] [syng-im.components.realm :refer [list-view]]
[syng-im.utils.listview :refer [to-realm-datasource]] [syng-im.utils.listview :refer [to-realm-datasource]]
[syng-im.components.chats.new-group-contact :refer [new-group-contact]] [syng-im.components.chats.new-group-contact :refer [new-group-contact]]
@ -15,39 +19,63 @@
(fn [] (fn []
(let [contacts-ds (to-realm-datasource @contacts)] (let [contacts-ds (to-realm-datasource @contacts)]
[view {:style {:flex 1 [view {:style {:flex 1
:backgroundColor "white"}} :flexDirection "column"
:backgroundColor color-white}}
(when android? (when android?
;; TODO add IOS version ;; TODO add IOS version
[toolbar-android {:logo res/logo-icon [toolbar-android {:navIcon res/icon-back
:title "New Group Chat" :style {:backgroundColor color-white
:titleColor "#4A5258"
:style {:backgroundColor "white"
:height 56 :height 56
:elevation 2} :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 [] :onIconClicked (fn []
(nav-pop navigator))}]) (nav-pop navigator))
[text-input {:underlineColorAndroid "#9CBFC0" :actions [{:title "Create"
:style {:marginLeft 5 ;; :icon res/icon-ok
:marginRight 5 :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 :fontSize 14
:fontFamily font :fontFamily font
:color "#9CBFC0"} :color text1-color}
:autoFocus true :autoFocus true
:placeholder "Group Name" :placeholder "Group Name"
:value @group-name :placeholderTextColor text2-color
:onChangeText (fn [new-text] :onChangeText (fn [new-text]
(reset! group-name new-text) (reset! group-name new-text)
(r/flush)) (r/flush))
:onSubmitEditing (fn [e] :onSubmitEditing (fn [e]
;(dispatch [:send-chat-msg @chat-id @text]) ;(dispatch [:send-chat-msg @chat-id @text])
(reset! group-name nil))}] (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 [list-view {:dataSource contacts-ds
:renderRow (fn [row section-id row-id] :renderRow (fn [row section-id row-id]
(r/as-element [new-group-contact (js->clj row :keywordize-keys true) navigator])) (r/as-element [new-group-contact (js->clj row :keywordize-keys true) navigator]))
:style {:backgroundColor "white"}}]])))) :style {:backgroundColor "white"}}]]]))))

1
src/syng_im/resources.cljs
View File

@ -31,3 +31,4 @@
(def icon-search (js/require "./images/icon_search.png")) (def icon-search (js/require "./images/icon_search.png"))
(def icon-send (js/require "./images/icon_send.png")) (def icon-send (js/require "./images/icon_send.png"))
(def icon-close-gray (js/require "./images/icon_close_gray.png")) (def icon-close-gray (js/require "./images/icon_close_gray.png"))
(def icon-ok (js/require "./images/icon_ok.png"))