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

Toolbar style. 'Send' button.

This commit is contained in:
virvar 2016-04-18 13:38:38 +03:00
parent 55f90dc040
commit 173752ea2c
9 changed files with 161 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/icon_send.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 252 B

82
src/syng_im/components/chat.cljs
View File

@ -1,5 +1,6 @@
(ns syng-im.components.chat
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
(:require [clojure.string :as s]
[re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.components.react :refer [android?
view
text
@ -8,6 +9,13 @@
navigator
toolbar-android]]
[syng-im.components.realm :refer [list-view]]
[syng-im.components.styles :refer [font
title-font
color-white
chat-background
online-color
text1-color
text2-color]]
[syng-im.utils.logging :as log]
[syng-im.navigation :refer [nav-pop]]
[syng-im.resources :as res]
@ -29,6 +37,41 @@
(assoc msg :text-color text-color
:background-color background-color)))
(defn chat-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 36
:height 36}}]])
(defn contact-online [{:keys [online]}]
(when online
[view {:position "absolute"
:top 20
:left 20
: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 [{:keys [navigator]}]
(let [messages (subscribe [:get-chat-messages])
chat (subscribe [:get-current-chat])]
@ -39,21 +82,38 @@
contacts (:contacts @chat)
contact-by-identity (contacts-by-identity contacts)]
[view {:style {:flex 1
:backgroundColor "#EBF0F4"}}
:backgroundColor chat-background}}
(when android?
;; TODO add IOS version
[toolbar-android {:logo res/logo-icon ;; todo contact/chat avatar
:title (or (@chat :name)
"Chat name")
:titleColor "#4A5258"
:subtitle "Last seen just now"
:subtitleColor "#AAB2B2"
:navIcon res/icon-back
:style {:backgroundColor "white"
[toolbar-android {:navIcon res/icon-back
:style {:backgroundColor color-white
:height 56
:elevation 2}
:onIconClicked (fn []
(nav-pop navigator))}])
(nav-pop navigator))}
[view {:style {:flex 1
:flexDirection "row"
:backgroundColor "transparent"}}
[view {:style {:flex 1
:alignItems "flex-start"
:justifyContent "center"
:marginRight 112}}
[text {:style {:marginTop -2.5
:color text1-color
:fontSize 16
:fontFamily font}}
(or (@chat :name)
"Chat name")]
[text {:style {:marginTop 1
:color text2-color
:fontSize 12
:fontFamily font}}
"Active a minute ago"]]
[view {:style {:position "absolute"
:top 10
:right 66}}
[chat-photo {}]
[contact-online {:online true}]]]])
[list-view {:dataSource datasource
:renderScrollComponent (fn [props]
(invertible-scroll-view nil))

7
src/syng_im/components/chat/chat_message.cljs
View File

@ -168,11 +168,10 @@
[view {:style {:flexDirection "row"
:marginTop 2}}
[image {:source (case delivery-status
:delivered res/delivered-icon
:seen res/seen-icon
:delivered res/icon-ok-small
:seen res/icon-ok-small
:failed res/delivery-failed-icon)
:style {:marginTop 6
:opacity 0.6}}]
:style {:marginTop 6}}]
[text {:style {:fontFamily font
:fontSize 12
:color text2-color

99
src/syng_im/components/chat/plain_message_input.cljs
View File

@ -3,10 +3,12 @@
[syng-im.components.react :refer [android?
view
image
touchable-highlight
text-input]]
[syng-im.components.styles :refer [font
text2-color
color-white]]
color-white
color-blue]]
[syng-im.components.chat.suggestions :refer [suggestions-view]]
[syng-im.utils.utils :refer [log toast http-post]]
[syng-im.utils.logging :as log]
@ -16,49 +18,64 @@
(defn set-input-message [message]
(dispatch [:set-chat-input-text message]))
(defn send [chat input-message]
(let [{:keys [group-chat chat-id]} chat]
(if group-chat
(dispatch [:send-group-chat-msg chat-id
input-message])
(dispatch [:send-chat-msg chat-id
input-message])))
(set-input-message nil))
(defn plain-message-input-view []
(let [chat (subscribe [:get-current-chat])
input-message-atom (subscribe [:get-chat-input-text])]
(fn []
(let [input-message @input-message-atom]
[view {:style {:flexDirection "column"}}
[suggestions-view]
[view {:style {:flexDirection "row"
:height 56
:paddingTop 16
:paddingHorizontal 16
:backgroundColor color-white
:elevation 4}}
[image {:source res/icon-list
:style {:marginTop 6
:marginRight 6
:marginBottom 6
:marginLeft 5
:width 13
:height 12}}]
[text-input {:underlineColorAndroid "transparent"
:style {:flex 1
:marginLeft 16
:marginTop -9
:fontSize 14
:fontFamily font
:color text2-color}
:autoFocus false
:placeholder "Type"
:placeholderTextColor text2-color
:onChangeText (fn [new-text]
(set-input-message new-text))
:onSubmitEditing (fn [e]
(let [{:keys [group-chat chat-id]} @chat]
(if group-chat
(dispatch [:send-group-chat-msg chat-id
input-message])
(dispatch [:send-chat-msg chat-id
input-message])))
(set-input-message nil))}
input-message]
[image {:source res/icon-smile
:style {:marginTop 2
:marginRight 2
:width 20
:height 20}}]]]))))
[suggestions-view]
[view {:style {:flexDirection "row"
:height 56
:backgroundColor color-white
:elevation 4}}
[image {:source res/icon-list
:style {:marginTop 22
:marginRight 6
:marginBottom 6
:marginLeft 21
:width 13
:height 12}}]
[text-input {:underlineColorAndroid "transparent"
:style {:flex 1
:marginLeft 16
:marginTop 7
:fontSize 14
:fontFamily font
:color text2-color}
:autoFocus false
:placeholder "Type"
:placeholderTextColor text2-color
:onChangeText (fn [new-text]
(set-input-message new-text))
:onSubmitEditing (fn [e]
(send @chat input-message))}
input-message]
[image {:source res/icon-smile
:style {:marginTop 18
:marginRight 18
:width 20
:height 20}}]
(when (< 0 (count input-message))
[touchable-highlight {:on-press (fn []
(send @chat input-message))}
[view {:style {:marginTop 10
:marginRight 10
:width 36
:height 36
:borderRadius 50
:backgroundColor color-blue}}
[image {:source res/icon-send
:style {:marginTop 10.5
:marginLeft 12
:width 15
:height 15}}]]])]]))))

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

@ -10,8 +10,6 @@
[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]))}
;; TODO add [photo-path delivery-status new-messages-count online] values to chat-obj

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

@ -99,14 +99,14 @@
:right 0}}
(when delivery-status
[image {:source (if (= (keyword delivery-status) :seen)
res/seen-icon
res/delivered-icon)
:style {:marginTop 4}}])
res/icon-ok-small
res/icon-ok-small)
:style {:marginTop 6}}])
;;; datetime
[text {:style {:fontFamily font
:fontSize 12
:color text2-color
:marginLeft 4}}
:marginLeft 5}}
timestamp]]
;;; new messages count
(when (< 0 new-messages-count)

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

@ -16,6 +16,13 @@
[syng-im.components.chats.chat-list-item :refer [chat-list-item]]
[syng-im.components.action-button :refer [action-button
action-button-item]]
[syng-im.components.styles :refer [font
title-font
color-white
color-black
color-blue
text1-color
text2-color]]
[syng-im.components.icons.ionicons :refer [icon]]))
@ -29,22 +36,30 @@
:backgroundColor "white"}}
(when android?
;; TODO add IOS version
[toolbar-android {:logo res/logo-icon
:title "Chats"
:titleColor "#4A5258"
:subtitle "List of your recent chats"
:subtitleColor "#AAB2B2"
:navIcon res/icon-list
[toolbar-android {:navIcon res/icon-hamburger
:style {:backgroundColor "white"
:height 56
:elevation 2}
:onIconClicked (fn []
(nav-pop navigator))}])
(nav-pop navigator))
:actions [{:title "Search"
:icon res/icon-search
:show "always"}]}
[view {:style {:flex 1
:alignItems "center"
:justifyContent "center"
:marginRight 112
:backgroundColor "transparent"}}
[text {:style {:marginTop -2.5
:color text1-color
:fontSize 16
:fontFamily font}}
"Chats"]]])
[list-view {:dataSource datasource
:renderRow (fn [row section-id row-id]
(r/as-element [chat-list-item row navigator]))
:style {:backgroundColor "white"}}]
[action-button {:buttonColor "rgba(231,76,60,1)"}
[action-button {:buttonColor color-blue}
[action-button-item {:title "New Chat"
:buttonColor "#9b59b6"
:onPress (fn []

1
src/syng_im/components/styles.cljs
View File

@ -17,3 +17,4 @@
(def text2-color color-gray)
(def online-color color-blue)
(def new-messages-count-color "#7099e632")
(def chat-background "#EBF0F4")

1
src/syng_im/resources.cljs
View File

@ -26,3 +26,4 @@
(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"))
(def icon-send (js/require "./images/icon_send.png"))