Input text styling
Signed-off-by: Andrea Maria Piana <andrea.maria.piana@gmail.com>
This commit is contained in:
parent
ed9d678e08
commit
6a9c8de0e4
|
@ -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]
|
||||
|
|
|
@ -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})
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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})
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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}]
|
||||
|
|
Loading…
Reference in New Issue