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

chat inputs styles 

Former-commit-id: 867e5392ad
This commit is contained in:
Roman Volosovskyi 2016-05-09 15:44:06 +03:00
parent 1622d58f82
commit 7a791627d3
11 changed files with 181 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/syng_im/components/chat/chat_message_styles.cljs
View File

@ -220,7 +220,7 @@
:top 4
:width 120
:height 2
:backgroundColor "#EC7262"})
:backgroundColor :#EC7262})
(def track-mark
{:position :absolute
@ -228,7 +228,7 @@
:top 0
:width 2
:height 10
:backgroundColor "#4A5258"})
:backgroundColor :#4A5258})
(def track-duration-text
{:position :absolute
@ -236,7 +236,7 @@
:top 11
:fontFamily font
:fontSize 11
:color "#4A5258"
:color :#4A5258
:letterSpacing 1
:lineHeight 15})
@ -315,10 +315,10 @@
(def participants-container
{:flex 1
:backgroundColor "white"})
:backgroundColor :white})
(def participants-list
{:backgroundColor "white"})
{:backgroundColor :white})
(def new-participant-image
{:width 20

8
src/syng_im/components/chat/input/confirmation_code.cljs
View File

@ -1,9 +1,7 @@
(ns syng-im.components.chat.input.confirmation-code
(:require
[re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.components.chat.input.simple-command :refer [simple-command-input-view]]
[syng-im.utils.utils :refer [log toast http-post]]
[syng-im.utils.logging :as log]))
[syng-im.components.chat.input.simple-command
:refer [simple-command-input-view]]))
(defn confirmation-code-input-view [command]
[simple-command-input-view command {:keyboardType "numeric"}])
[simple-command-input-view command {:keyboardType :numeric}])

120
src/syng_im/components/chat/input/input_styles.cljs Normal file
View File

@ -0,0 +1,120 @@
(ns syng-im.components.chat.input.input-styles
(:require [syng-im.components.styles :refer [font
color-white
color-blue
text1-color
text2-color
chat-background
color-black]]))
(def money-input
{:flex 1
:marginLeft 8
:lineHeight 42
:fontSize 32
:fontFamily font
:color :black})
(def command-input-container
{:flexDirection :row
:height 56
:backgroundColor color-white
:elevation 4})
(defn command-text-container
[{:keys [color]}]
{:flexDirection :column
:marginTop 16
:marginBottom 16
:marginLeft 16
:marginRight 0
:backgroundColor color
:height 24
:borderRadius 50})
(def command-text
{:marginTop 3
:marginHorizontal 12
:fontSize 12
:fontFamily font
:color color-white})
(def command-input
{:flex 1
:marginLeft 8
:marginTop 7
:fontSize 14
:fontFamily font
:color text1-color})
(def send-container
{:marginTop 10
:marginRight 10
:width 36
:height 36
:borderRadius 50
:backgroundColor color-blue})
(def send-icon
{:marginTop 10.5
:marginLeft 12
:width 15
:height 15})
(def cancel-container
{:marginTop 10
:marginRight 10
:width 36
:height 36})
(def cancel-icon
{:marginTop 10.5
:marginLeft 12
:width 12
:height 12})
(def staged-command-container
{:flex 1
:alignItems :flex-start
:flexDirection :column
:backgroundColor color-white})
(def staged-command-background
{:flexDirection :column
:margin 16
:padding 12
:backgroundColor chat-background
:borderRadius 14})
(def staged-command-info-container
{:flexDirection :row})
(defn staged-command-text-container
[{:keys [color]}]
{:backgroundColor color
:height 24
:borderRadius 50
:marginRight 32
:paddingTop 3
:paddingHorizontal 12})
(def staged-command-text
{:fontSize 12
:fontFamily font
:color color-white})
(def staged-command-cancel
{:position :absolute
:top 7
:right 4})
(def staged-command-cancel-icon
{:width 10
:height 10})
(def staged-command-content
{:marginTop 5
:marginHorizontal 0
:fontSize 14
:fontFamily font
:color color-black})

18
src/syng_im/components/chat/input/money.cljs
View File

@ -1,16 +1,10 @@
(ns syng-im.components.chat.input.money
(:require
[re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.components.styles :refer [font]]
[syng-im.components.chat.input.simple-command :refer [simple-command-input-view]]
[syng-im.utils.utils :refer [log toast http-post]]
[syng-im.utils.logging :as log]))
[syng-im.components.chat.input.simple-command
:refer [simple-command-input-view]]
[syng-im.components.chat.input.input-styles :as st]))
(defn money-input-view [command]
[simple-command-input-view command {:keyboardType "numeric"
:style {:flex 1
:marginLeft 8
:lineHeight 42
:fontSize 32
:fontFamily font
:color "black"}}])
[simple-command-input-view command
{:keyboardType :numeric
:style st/money-input}])

6
src/syng_im/components/chat/input/password.cljs
View File

@ -1,9 +1,7 @@
(ns syng-im.components.chat.input.password
(:require
[re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.components.chat.input.simple-command :refer [simple-command-input-view]]
[syng-im.utils.utils :refer [log toast http-post]]
[syng-im.utils.logging :as log]))
[syng-im.components.chat.input.simple-command
:refer [simple-command-input-view]]))
(defn password-input-view [command]
[simple-command-input-view command {:secureTextEntry true}])

8
src/syng_im/components/chat/input/phone.cljs
View File

@ -1,9 +1,7 @@
(ns syng-im.components.chat.input.phone
(:require
[re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.components.chat.input.simple-command :refer [simple-command-input-view]]
[syng-im.utils.utils :refer [log toast http-post]]
[syng-im.utils.logging :as log]))
[syng-im.components.chat.input.simple-command
:refer [simple-command-input-view]]))
(defn phone-input-view [command]
[simple-command-input-view command {:keyboardType "phone-pad"}])
[simple-command-input-view command {:keyboardType :phone-pad}])

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

@ -1,18 +1,13 @@
(ns syng-im.components.chat.input.simple-command
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.components.react :refer [android?
view
[syng-im.components.react :refer [view
image
icon
text
text-input
touchable-highlight]]
[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.resources :as res]))
[syng-im.resources :as res]
[syng-im.components.chat.input.input-styles :as st]))
(defn cancel-command-input []
(dispatch [:cancel-command]))
@ -28,59 +23,19 @@
(let [message-atom (subscribe [:get-chat-command-content])]
(fn [command input-options]
(let [message @message-atom]
[view {:style {:flexDirection :row
:height 56
:backgroundColor color-white
:elevation 4}}
[view {:style {:flexDirection :column
:marginTop 16
:marginBottom 16
:marginLeft 16
:marginRight 0
:backgroundColor (:color command)
:height 24
:borderRadius 50}}
[text {:style {:marginTop 3
:marginHorizontal 12
:fontSize 12
:fontFamily font
:color color-white}}
(:text command)]]
[text-input (merge {:underlineColorAndroid :transparent
:style {:flex 1
:marginLeft 8
:marginTop 7
:fontSize 14
:fontFamily font
:color text1-color}
:autoFocus true
:placeholder "Type"
:placeholderTextColor text2-color
:onChangeText set-input-message
:onSubmitEditing send-command}
[view st/command-input-container
[view (st/command-text-container command)
[text {:style st/command-text} (:text command)]]
[text-input (merge {:style st/command-input
:autoFocus true
:onChangeText set-input-message
:onSubmitEditing send-command}
input-options)
message]
(if (pos? (count message))
[touchable-highlight
{:on-press send-command}
[view {:style {:marginTop 10
:marginRight 10
:width 36
:height 36
:borderRadius 50
:backgroundColor color-blue}}
[image {:source {:uri :icon_send}
:style {:marginTop 10.5
:marginLeft 12
:width 15
:height 15}}]]]
[touchable-highlight {:on-press send-command}
[view st/send-container [icon :send st/send-icon]]]
[touchable-highlight {:on-press cancel-command-input}
[view {:style {:marginTop 10
:marginRight 10
:width 36
:height 36}}
[view st/cancel-container
[image {:source res/icon-close-gray
:style {:marginTop 10.5
:marginLeft 12
:width 12
:height 12}}]]])]))))
:style st/cancel-icon}]]])]))))

69
src/syng_im/components/chat/input/simple_command_staged.cljs
View File

@ -1,61 +1,28 @@
(ns syng-im.components.chat.input.simple-command-staged
(:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
[syng-im.components.react :refer [android?
view
(:require [re-frame.core :refer [subscribe dispatch]]
[syng-im.components.react :refer [view
image
text
text-input
touchable-highlight]]
[syng-im.components.styles :refer [font
color-black
color-white
chat-background]]
[syng-im.utils.utils :refer [log toast http-post]]
[syng-im.utils.logging :as log]
[syng-im.resources :as res]
[reagent.core :as r]))
[syng-im.components.chat.input.input-styles :as st]))
(defn cancel-command-input [staged-command]
(dispatch [:unstage-command staged-command]))
(defn simple-command-staged-view [staged-command]
(let [chat-id-atom (subscribe [:get-current-chat-id])]
(fn [staged-command]
(let [chat-id @chat-id-atom
command (:command staged-command)]
[view {:style {:flex 1
:alignItems "flex-start"
:flexDirection "column"
:backgroundColor color-white}}
[view {:style {:flexDirection "column"
:margin 16
:padding 12
:backgroundColor chat-background
:borderRadius 14}}
[view {:style {:flexDirection "row"}}
[view {:style {:backgroundColor (:color command)
:height 24
:borderRadius 50
:marginRight 32
:paddingTop 3
:paddingHorizontal 12}}
[text {:style {:fontSize 12
:fontFamily font
:color color-white}}
(:text command)]]
[touchable-highlight {:style {:position "absolute"
:top 7
:right 4}
:onPress #(cancel-command-input staged-command)}
[image {:source res/icon-close-gray
:style {:width 10
:height 10}}]]]
[text {:style {:marginTop 5
:marginHorizontal 0
:fontSize 14
:fontFamily font
:color color-black}}
;; TODO isn't smart
(if (= (:command command) :keypair-password)
"******"
(:content staged-command))]]]))))
(let [command (:command staged-command)]
[view st/staged-command-container
[view st/staged-command-background
[view st/staged-command-info-container
[view (st/staged-command-text-container command)
[text {:style st/staged-command-text} (:text command)]]
[touchable-highlight {:style st/staged-command-cancel
:onPress #(cancel-command-input staged-command)}
[image {:source res/icon-close-gray
:style st/staged-command-cancel-icon}]]]
[text {:style st/staged-command-content}
;; TODO isn't smart
(if (= (:command command) :keypair-password)
"******"
(:content staged-command))]]]))

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

@ -30,7 +30,6 @@
[icon :list st/list-icon]
[text-input {:style st/message-input
:autoFocus (pos? (count @staged-commands-atom))
:placeholder "Type"
:onChangeText set-input-message
:onSubmitEditing #(send @chat input-message)}
input-message]

14
src/syng_im/components/chat/suggestions_styles.cljs
View File

@ -2,7 +2,7 @@
(:require [syng-im.components.styles :refer [font color-white]]))
(def suggestion-item-container
{:flexDirection "row"
{:flexDirection :row
:marginVertical 1
:marginHorizontal 0
:height 40
@ -10,15 +10,15 @@
(defn suggestion-background
[{:keys [color]}]
{:flexDirection "column"
:position "absolute"
{:flexDirection :column
:position :absolute
:top 10
:left 60
:backgroundColor color
:borderRadius 10})
(def suggestion-text
{:marginTop -2
{:marginTop -2
:marginHorizontal 10
:fontSize 14
:fontFamily font
@ -26,17 +26,17 @@
(def suggestion-description
{:flex 1
:position "absolute"
:position :absolute
:top 7
:left 190
:lineHeight 18
:fontSize 14
:fontFamily font
:color "black"})
:color :black})
(defn suggestions-container
[suggestions]
{:flexDirection "row"
{:flexDirection :row
:marginVertical 1
:marginHorizontal 0
:height (min 105 (* 42 (count suggestions)))

3
src/syng_im/components/react.cljs
View File

@ -20,7 +20,8 @@
(defn text-input [props text]
[text-input-class (merge
{:underlineColorAndroid :transparent
:placeholderTextColor st/text2-color}
:placeholderTextColor st/text2-color
:placeholder "Type"}
props)
text])