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

Command input 

Former-commit-id: 98e03d1ba9
This commit is contained in:
virvar 2016-04-21 10:31:06 +03:00
parent 5b431d3a24
commit 6be9a83f5b
3 changed files with 64 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/icon_close_gray.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 274 B

118
src/syng_im/components/chat/input/simple_command.cljs
View File

@ -6,7 +6,11 @@
text text
text-input text-input
touchable-highlight]] touchable-highlight]]
[syng-im.components.styles :refer [font]] [syng-im.components.styles :refer [font
color-white
color-blue
text1-color
text2-color]]
[syng-im.utils.utils :refer [log toast http-post]] [syng-im.utils.utils :refer [log toast http-post]]
[syng-im.utils.logging :as log] [syng-im.utils.logging :as log]
[syng-im.resources :as res] [syng-im.resources :as res]
@ -28,58 +32,62 @@
(fn [command input-options] (fn [command input-options]
(let [chat-id @chat-id-atom (let [chat-id @chat-id-atom
message @message-atom] message @message-atom]
[view {:style {:flexDirection "row"}} [view {:style {:flexDirection "row"
[view {:style {:flex 1 :height 56
:flexDirection "column" :backgroundColor color-white
:backgroundColor "white"}} :elevation 4}}
[view {:style {:flexDirection "column" [view {:style {:flexDirection "column"
:margin 10 :marginTop 16
:width 200 :marginBottom 16
:backgroundColor "#ebf0f4" :marginLeft 16
:borderRadius 10}} :marginRight 0
[view {:style {:flexDirection "row"}} :backgroundColor (:color command)
[view {:style {:flexDirection "column" :height 24
:margin 10 :borderRadius 50}}
:backgroundColor (:color command) [text {:style {:marginTop 3
:borderRadius 10}} :marginHorizontal 12
[text {:style {:marginTop -2 :fontSize 12
:marginHorizontal 10 :fontFamily font
:fontSize 14 :color color-white}}
:fontFamily font (:text command)]]
:color "white"}} [text-input (merge {:underlineColorAndroid "transparent"
(:text command)]] :style {:flex 1
[touchable-highlight {:style {:marginTop 14 :marginLeft 8
:marginRight 16 :marginTop 7
:position "absolute" :fontSize 14
:top 3 :fontFamily font
:right 20} :color text1-color}
:onPress (fn [] :autoFocus true
:placeholder "Type"
:placeholderTextColor text2-color
:onChangeText (fn [new-text]
(set-input-message new-text))
:onSubmitEditing (fn [e]
(send-command chat-id command message))}
input-options)
message]
(if (< 0 (count message))
[touchable-highlight {:on-press (fn []
(send-command chat-id command 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}}]]]
[touchable-highlight {:on-press (fn []
(cancel-command-input))} (cancel-command-input))}
[image {:source res/att [view {:style {:marginTop 10
:style {:width 17 :marginRight 10
:height 14}}]]] :width 36
[text-input (merge {:style {:flex 1 :height 36}}
:marginLeft 8 [image {:source res/icon-close-gray
:lineHeight 42 :style {:marginTop 10.5
:fontSize 14 :marginLeft 12
:fontFamily font :width 12
:color "black"} :height 12}}]]])]))))
:underlineColorAndroid "transparent"
:autoFocus true
:keyboardType "default"
:onChangeText (fn [new-text]
(set-input-message new-text))
:onSubmitEditing (fn [e]
(send-command chat-id command message))}
input-options)
message]]]
[touchable-highlight {:style {:marginTop 14
:marginRight 16
:position "absolute"
:right 20
:bottom 20}
:onPress (fn []
(send-command chat-id command message))}
[image {:source res/att
:style {:width 34
:height 28}}]]]))))

1
src/syng_im/resources.cljs
View File

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