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

Input text styling 

Signed-off-by: Andrea Maria Piana <andrea.maria.piana@gmail.com>
This commit is contained in:
Andrea Maria Piana 2018-06-08 14:29:01 +02:00
parent ed9d678e08
commit 6a9c8de0e4
No known key found for this signature in database
GPG Key ID: AA6CCA6DE0E06424
6 changed files with 15 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/status_im/chat/screen.cljs
View File

@ -17,7 +17,6 @@
[status-im.chat.views.message.options :as message-options]
[status-im.chat.views.message.datemark :as message-datemark]
[status-im.chat.views.message.message :as message]
[status-im.chat.views.input.input :as input]
[status-im.chat.views.toolbar-content :as toolbar-content]
[status-im.ui.components.animation :as animation]
[status-im.ui.components.list.views :as list]

3
src/status_im/chat/styles/animations.cljs
View File

@ -1,7 +1,6 @@
(ns status-im.chat.styles.animations
(:require [status-im.ui.components.styles :as common]))
(def color-root-border "rgba(192, 198, 202, 0.28)")
(def header-draggable-icon "rgba(73, 84, 93, 0.23)")
(def overlap-container
@ -18,8 +17,6 @@
:right 0
:bottom bottom
:position :absolute
:border-top-color color-root-border
:border-top-width 1
:elevation 2
:max-height max-height})

17
src/status_im/chat/styles/input/input.cljs
View File

@ -5,14 +5,12 @@
(def min-input-height 36)
(def padding-vertical 8)
(def border-height 1)
(def max-input-height (* 4 min-input-height))
(def max-input-height (* 5 min-input-height))
(defnstyle root [margin-bottom]
{:background-color colors/white
:margin-bottom margin-bottom
:flex-direction :column
:border-top-width border-height
:border-top-color colors/gray-light
:elevation 2})
(def input-container
@ -25,21 +23,24 @@
:padding-bottom padding-vertical
:flex 1})
(defn input-animated [content-height]
(def input-animated
{:align-items :flex-start
:flex-direction :row
:flex-grow 1
:height (min (max min-input-height content-height) max-input-height)})
:min-height min-input-height
:max-height max-input-height})
(defnstyle input-view [content-height single-line-input?]
(defnstyle input-view [single-line-input?]
{:flex 1
:font-size 15
:line-height 22
:padding-top 9
:padding-bottom 5
:padding-right 12
:height (if single-line-input?
:min-height min-input-height
:max-height (if single-line-input?
min-input-height
(+ (min (max min-input-height content-height) max-input-height)))
max-input-height)
:android {:padding-top 3}})
(def invisible-input-text

5
src/status_im/chat/styles/input/parameter_box.cljs
View File

@ -4,6 +4,5 @@
(def root
{:background-color common/color-white
:border-top-color colors/gray-light
:border-top-width 1})
:border-bottom-color colors/gray-light
:border-bottom-width 1})

5
src/status_im/chat/styles/input/suggestions.cljs
View File

@ -16,10 +16,9 @@
{:flex-direction :row
:align-items :center
:height item-height
:margin-left 14
:padding-right 14
:padding-horizontal 14
:border-bottom-color colors/gray-light
:border-bottom-width (if last? 0 border-height)})
:border-bottom-width border-height})
(def item-suggestion-name
{:color common/color-black

4
src/status_im/chat/views/input/input.cljs
View File

@ -67,7 +67,7 @@
(.-selection))
end (.-end s)]
(re-frame/dispatch [:update-text-selection end]))
:style (style/input-view height single-line-input?)
:style (style/input-view single-line-input?)
:placeholder-text-color colors/gray
:auto-capitalize :sentences}]))
@ -146,7 +146,7 @@
set-container-width-fn #(reagent/set-state component {:container-width %})
{:keys [width height container-width]} (reagent/state component)]
[react/view {:style style/input-root}
[react/animated-view {:style (style/input-animated height)}
[react/animated-view {:style style/input-animated}
[invisible-input {:set-layout-width-fn set-layout-width-fn}]
[invisible-input-height {:set-layout-height-fn set-layout-height-fn
:container-width container-width}]