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

colors (+1 squashed commit) 

Squashed commits:
[11d7921] android styles and functionality (+2 squashed commits)
Squashed commits:
[c93f5ab] implemented error
[d6fe519] implemented text-input-with-label
This commit is contained in:
Andrey Shovkoplyas 2017-04-05 18:35:19 +03:00 committed by Roman Volosovskyi
parent abf0128a1a
commit 9987e1bd55
11 changed files with 205 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/status_im/components/styles.cljs
View File

@ -23,7 +23,9 @@
(def color-dark-blue-2 "#1f253f")
(def color-dark-blue-3 "#191f37")
(def color-light-gray "#EEF2F5")
(def color-light-gray2 "#ececf0")
(def color-red "red")
(def color-red2 "#d84b4b")
(def color-light-red "#e86363")
(def color-light-red2 "#f47979")

32
src/status_im/components/text_input_with_label/animation.cljs Normal file
View File

@ -0,0 +1,32 @@
(ns status-im.components.text-input-with-label.animation
(:require [status-im.components.animation :as animation]
[clojure.string :as str]))
(def anim-duration 200)
(defn animate-underline [underline-width to-line-width underline-height to-line-height]
(let [anim (animation/parallel [(animation/timing underline-width {:toValue to-line-width
:duration anim-duration})
(animation/timing underline-height {:toValue to-line-height
:duration anim-duration})])]
(animation/start anim)))
(defn text-input-on-focus [{:keys [underline-width underline-max-width* underline-height underline-max-height]}]
(animate-underline underline-width @underline-max-width* underline-height underline-max-height))
(defn text-input-on-blur [{:keys [underline-width underline-height]}]
(animate-underline underline-width 0 underline-height 1))
(defn animate-label [text {:keys [value* label-top label-font-size
label-top-top label-top-bottom label-font-size-top label-font-size-bottom]}]
(when (or (str/blank? text) (str/blank? @value*))
(let [was-blank? (str/blank? @value*)
anim (animation/parallel [(animation/timing label-top {:toValue (if was-blank?
label-top-top
label-top-bottom)
:duration anim-duration})
(animation/timing label-font-size {:toValue (if was-blank?
label-font-size-top
label-font-size-bottom)
:duration anim-duration})])]
(animation/start anim))))

70
src/status_im/components/text_input_with_label/styles.cljs Normal file
View File

@ -0,0 +1,70 @@
(ns status-im.components.text-input-with-label.styles
(:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
(:require [status-im.utils.platform :refer [ios?]]
[status-im.components.styles :as common]))
(defstyle text-input
{:placeholder ""
:android {:height 24
:padding-top 0
:padding-bottom 0
:padding-left 0
:margin-top 26
:margin-bottom 4
:font-size 16}
:ios {:height 26
:margin-top 24
:margin-bottom 6
:font-size 17
:letter-spacing -0.2}})
(defstyle component-container
{:padding-left 16
:android {:min-height 76}
:ios {:min-height 78}})
(defnstyle label-animated-text [{:keys [label-top label-font-size]}]
{:position :absolute
:top label-top
:font-size label-font-size
:color common/color-gray4
:ios {:letter-spacing -0.2}})
(defstyle description-text
{:color common/color-gray4
:android {:margin-top 6
:height 14
:font-size 12}
:ios {:margin-top 4
:height 16
:font-size 14
:letter-spacing -0.2}})
(defstyle error-text
{:color common/color-red2
:android {:margin-top 6
:height 14
:font-size 12}
:ios {:margin-top 4
:height 16
:font-size 14
:letter-spacing -0.2}})
(defn underline-blured [error]
{:background-color (if error common/color-red2 common/color-light-gray2)
:align-items :center})
(defn underline-focused [underline-width underline-height error]
{:height underline-height
:width underline-width
:background-color (if error common/color-red2 common/color-light-blue)})
(def label-top-top (if ios? 6 6))
(def label-top-bottom (if ios? 26 26))
(def label-font-size-top (if ios? 14 12))
(def label-font-size-bottom (if ios? 17 16))
(def underline-max-height (if ios? 1 2))

75
src/status_im/components/text_input_with_label/view.cljs Normal file
View File

@ -0,0 +1,75 @@
(ns status-im.components.text-input-with-label.view
(:require [reagent.core :as r]
[status-im.components.animation :as animation]
[status-im.components.text-input-with-label.animation :refer [animate-label
text-input-on-focus
text-input-on-blur]]
[status-im.components.react :refer [view
text
animated-text
animated-view
text-input]]
[status-im.components.text-input-with-label.styles :as st]
[clojure.string :as str]))
(defn get-init-props [{:keys [default-value]}]
(let [blank? (str/blank? default-value)]
{:underline-width (animation/create-value 0)
:underline-height (animation/create-value 1)
:label-top (animation/create-value (if blank?
st/label-top-bottom
st/label-top-top))
:label-font-size (animation/create-value (if blank?
st/label-font-size-bottom
st/label-font-size-top))
:label-top-top st/label-top-top
:label-top-bottom st/label-top-bottom
:label-font-size-top st/label-font-size-top
:label-font-size-bottom st/label-font-size-bottom
:underline-max-height st/underline-max-height
:input-ref* (r/atom nil)
:value* (r/atom default-value)
:underline-max-width* (r/atom 0)}))
(defn get-width [event]
(.-width (.-layout (.-nativeEvent event))))
(defn text-input-on-change-text [text props]
(animate-label text props)
(reset! (:value* props) text))
(defn text-input-handlers [{:keys [on-focus on-blur on-change-text on-submit-editing ref]} props]
{:ref #(do
(reset! (:input-ref* props) %)
(when ref (ref %)))
:on-submit-editing #(do
(.blur @(:input-ref* props))
(when on-submit-editing (on-submit-editing)))
:on-focus #(do
(text-input-on-focus props)
(when on-focus (on-focus)))
:on-blur #(do
(text-input-on-blur props)
(when on-blur (on-blur)))
:on-change-text #(do
(text-input-on-change-text % props)
(when on-change-text (on-change-text %)))})
(defn text-input-with-label [options]
(let [props (get-init-props options)]
(fn [{:keys [label description error] :as options}]
[view st/component-container
[animated-text {:style (st/label-animated-text props)} label]
[text-input (merge st/text-input
(dissoc options :label :description :error)
(text-input-handlers options props))]
[view {:style (st/underline-blured error)
:on-layout #(reset! (:underline-max-width* props) (get-width %))}
[animated-view {:style (st/underline-focused
(:underline-width props)
(:underline-height props)
error)}]]
(cond error
[text {:style st/error-text} error]
description
[text {:style st/description-text} description])])))

1
src/status_im/contacts/views/contact_list.cljs
View File

@ -11,7 +11,6 @@
touchable-highlight
list-view
list-item]]
[status-im.components.text-field.view :refer [text-field]]
[status-im.components.status-bar :refer [status-bar]]
[status-im.components.toolbar-new.view :refer [toolbar-with-search toolbar]]
[status-im.components.toolbar-new.actions :as act]

1
src/status_im/contacts/views/contact_list_modal.cljs
View File

@ -13,7 +13,6 @@
[status-im.components.action-button.action-button :refer [action-button
action-separator]]
[status-im.components.action-button.styles :refer [actions-list]]
[status-im.components.text-field.view :refer [text-field]]
[status-im.components.status-bar :refer [status-bar]]
[status-im.components.toolbar-new.view :refer [toolbar-with-search toolbar]]
[status-im.components.toolbar-new.actions :as act]

4
src/status_im/new_group/screen_private.cljs
View File

@ -59,7 +59,7 @@
st/group-container)
[group-toolbar type true]
[group-name-view]
[view {:flex 1}
[view st/list-view-container
[add-btn #(dispatch [:navigate-to :add-contacts-toggle-list])]
[group-contacts-view group]
[view st/separator]
@ -83,7 +83,7 @@
st/group-container)
[group-toolbar group-type false]
[group-name-view]
[view {:flex 1}
[view st/list-view-container
[list-view {:dataSource (to-datasource contacts)
:enableEmptySections true
:renderRow render-row

7
src/status_im/new_group/styles.cljs
View File

@ -33,8 +33,7 @@
:android {:padding-top 16}})
(def chat-name-container
{:margin-top 21
:margin-left 16})
{:margin-top 10})
(def add-button-container
{:margin-left 16})
@ -221,6 +220,10 @@
:height 1
:opacity 0.5})
(def list-view-container
{:flex 1
:margin-top 10})

27
src/status_im/new_group/views/group.cljs
View File

@ -10,7 +10,7 @@
text
icon
touchable-highlight]]
[status-im.components.text-field.view :refer [text-field]]
[status-im.components.text-input-with-label.view :refer [text-input-with-label]]
[status-im.components.styles :refer [color-blue color-gray5 color-light-blue]]
[status-im.components.status-bar :refer [status-bar]]
[status-im.components.toolbar-new.view :refer [toolbar]]
@ -18,20 +18,6 @@
[status-im.new-group.styles :as st]
[status-im.i18n :refer [label]]))
(defview group-name-input []
[new-group-name [:get :new-chat-name]]
[view
[text-field
{:wrapper-style st/group-chat-name-wrapper
:line-color color-gray5
:focus-line-color color-light-blue
:focus-line-height st/group-chat-focus-line-height
:label-hidden? true
:input-style st/group-chat-name-input
:auto-focus true
:on-change-text #(dispatch [:set :new-chat-name %])
:value new-group-name}]])
(defn group-toolbar [group-type edit?]
[view
[status-bar]
@ -42,11 +28,14 @@
(if edit? :t/chat-settings :t/new-group-chat)))
:actions [{:image :blank}]}]])
(defn group-name-view []
(defview group-name-view []
[new-group-name [:get :new-chat-name]]
[view st/chat-name-container
[text {:style st/group-name-text}
(label :t/name)]
[group-name-input]])
[text-input-with-label
{:auto-focus true
:label (label :t/name)
:on-change-text #(dispatch [:set :new-chat-name %])
:default-value new-group-name}]])
(defn add-btn [on-press]
[action-button (label :t/add-members)

13
src/status_im/profile/edit/screen.cljs
View File

@ -1,12 +1,12 @@
(ns status-im.profile.edit.screen
(:require-macros [status-im.utils.views :refer [defview]])
(:require [status-im.profile.styles :as st]
[status-im.components.text-input-with-label.view :refer [text-input-with-label]]
[status-im.components.styles :refer [color-blue color-gray5]]
[re-frame.core :refer [dispatch]]
[status-im.components.status-bar :refer [status-bar]]
[status-im.components.toolbar-new.view :refer [toolbar]]
[status-im.components.toolbar-new.actions :as act]
[status-im.components.text-field.view :refer [text-field]]
[status-im.i18n :refer [label]]
[status-im.profile.screen :refer [colorize-status-hashtags]]
[status-im.components.sticky-button :refer [sticky-button]]
@ -32,14 +32,9 @@
(defview profile-name-input []
[new-profile-name [:get-in [:profile-edit :name]]]
[view
[text-field
{:line-color st/edit-line-color
:focus-line-color st/profile-focus-line-color
:focus-line-height st/profile-focus-line-height
:label (label :t/name)
:input-style st/profile-name-input
:on-change-text #(dispatch [:set-in [:profile-edit :name] %])
:value new-profile-name}]])
[text-input-with-label {:label (label :t/name)
:default-value new-profile-name
:on-change-text #(dispatch [:set-in [:profile-edit :name] %])}]])
(def profile-icon-options
[{:text (label :t/image-source-gallery) :value #(dispatch [:open-image-picker])}

15
src/status_im/profile/styles.cljs
View File

@ -51,18 +51,14 @@
(def edit-profile-bage
{:flex-direction :row
:align-items :center
:padding-left 24})
(def context-menu-custom-styles
{:optionsContainer {:margin-top 78}})
(defstyle edit-profile-name-container
(def edit-profile-name-container
{:flex 1
:ios {:padding-left 32
:padding-top 15}
:android {:padding-top 16
:padding-left 16}})
:padding-top 30})
(def edit-profile-icon-container
{:padding-top 25})
@ -185,9 +181,10 @@
:padding-bottom 16
:margin-left 16
:margin-right 16
:margin-top 24
:ios {:padding-top 10}
:android {:padding-top 13}})
:ios {:padding-top 10
:margin-top 10}
:android {:padding-top 13
:margin-top 13}})
(def add-a-status
(merge profile-status-text