Merge pull request #271 from status-im/feature/#255

Multiline text input (#255)
This commit is contained in:
Roman Volosovskyi 2016-09-27 17:22:17 +03:00 committed by GitHub
commit 54633394ed
14 changed files with 172 additions and 110 deletions

View File

@ -0,0 +1,5 @@
<resources>
<color name="primary">#7099e6</color>
<color name="primary_dark">#5c6bc0</color>
<color name="accent">#5c6bc0</color>
</resources>

View File

@ -1,10 +1,4 @@
<resources>
<string name="app_name">Status</string>
<string name="root_warning">Your phone appears to be ROOTED, by pressing CONTINUE you understand and accept the risks in using this software.</string>
<string name="root_okay">Continue</string>

View File

@ -1,8 +1,10 @@
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
</style>
<item name="colorPrimary">@color/primary</item>
<item name="colorPrimaryDark">@color/primary_dark</item>
<item name="colorAccent">@color/accent</item>
<item name="colorControlNormal">@color/primary</item>
<item name="colorControlActivated">@color/primary</item>
</style>
</resources>

View File

@ -765,7 +765,6 @@
TestTargetID = 13B07F861A680F5B00A75B9A;
};
13B07F861A680F5B00A75B9A = {
DevelopmentTeam = 259TWTDE52;
ProvisioningStyle = Automatic;
};
};
@ -1246,7 +1245,7 @@
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
DEAD_CODE_STRIPPING = NO;
DEVELOPMENT_TEAM = 259TWTDE52;
DEVELOPMENT_TEAM = "";
FRAMEWORK_SEARCH_PATHS = "$(PROJECT_DIR)/../modules/react-native-status/ios/RCTStatus";
HEADER_SEARCH_PATHS = (
"$(inherited)",
@ -1290,7 +1289,7 @@
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
DEAD_CODE_STRIPPING = NO;
DEVELOPMENT_TEAM = 259TWTDE52;
DEVELOPMENT_TEAM = "";
FRAMEWORK_SEARCH_PATHS = "$(PROJECT_DIR)/../modules/react-native-status/ios/RCTStatus";
HEADER_SEARCH_PATHS = (
"$(inherited)",

View File

@ -1,6 +1,11 @@
(ns status-im.chat.constants)
(def input-height 56)
(def input-height 54)
(def max-input-height 66)
(def min-input-height 22)
(def input-spacing-top 16)
(def input-spacing-bottom 16)
(def request-info-height 61)
(def response-height-normal 211)
(def minimum-suggestion-height (+ input-height request-info-height))

View File

@ -1,30 +1,48 @@
(ns status-im.chat.styles.message-input
(:require [status-im.components.styles :refer [color-white
color-blue]]
[status-im.chat.constants :refer [input-height]]))
(def message-input-container
{:flex 1
:marginRight 0})
[status-im.chat.constants :refer [max-input-height
min-input-height
input-spacing-top
input-spacing-bottom]]))
(def input-container
{:flexDirection :column})
{:flex-direction :column})
(def input-view
{:flexDirection :row
:height input-height
:backgroundColor color-white})
(defn input-view [content-height]
{:flex-direction :row
:align-items :center
:justify-content :center
:height (+ (min (max min-input-height content-height) max-input-height)
input-spacing-top
input-spacing-bottom)
:background-color color-white})
(def send-icon
{:marginTop 10.5
:marginLeft 12
:width 15
:height 15})
(defn message-input-container [content-height]
{:height (min (max min-input-height content-height) max-input-height)
:margin-top input-spacing-top
:margin-bottom input-spacing-bottom
:flex 1
:flex-direction "column"
:margin-right 0})
(def send-wrapper
{:margin-bottom 8
:margin-right 10
:width 36
:flex 1
:flex-direction "column"
:align-items :center
:justify-content :flex-end})
(def send-container
{:marginTop 10
:marginRight 10
:width 36
{:width 36
:height 36
:borderRadius 18
:backgroundColor color-blue})
:border-radius 18
:background-color color-blue})
(def send-icon
{:margin-top 10.5
:margin-left 12
:width 15
:height 15})

View File

@ -1,18 +1,21 @@
(ns status-im.chat.styles.plain-message
(:require [status-im.components.styles :refer [text2-color]]))
(:require [status-im.components.styles :refer [text1-color]]
[status-im.chat.constants :refer [max-input-height
min-input-height]]))
(defn message-input-button-touchable [w]
{:width w
:height 56
:alignItems :center
:justifyContent :center})
(defn message-input-button-touchable [width content-height]
{:width width
:flex 1
:margin-bottom 14
:align-items :center
:justify-content :flex-end})
(defn message-input-button [scale]
{:transform [{:scale scale}]
:width 24
:height 24
:alignItems :center
:justifyContent :center})
:align-items :center
:justify-content :center})
(def list-icon
{:width 20
@ -33,10 +36,10 @@
(def message-input
{:flex 1
:marginTop -2
:padding 0
:fontSize 14
:color text2-color})
:font-size 14
:line-height 20
:color text1-color})
(def smile-icon
{:width 20

View File

@ -81,11 +81,11 @@
:width 12
:height 12})
(defn command-input [ml disbale?]
(defn command-input [ml disable?]
{:flex 1
:marginRight 16
:margin-left (- ml 5)
:marginTop -2
:margin-top 4
:padding 0
:fontSize 14
:color (if disbale? color-white text1-color)})
:color (if disable? color-white text1-color)})

View File

@ -39,5 +39,5 @@
(defn cancel-button []
[touchable-highlight {:on-press cancel-command-input}
[view st/cancel-container
[icon :close-gray st/cancel-icon]]])
[icon :close_gray st/cancel-icon]]])

View File

@ -11,16 +11,16 @@
[status-im.chat.views.command :as command]
[status-im.chat.styles.message-input :as st]
[status-im.chat.styles.plain-message :as st-message]
[status-im.chat.styles.response :as st-response]))
[status-im.chat.styles.response :as st-response]
[reagent.core :as r]
[clojure.string :as str]))
(defn send-button [{:keys [on-press accessibility-label]}]
[touchable-highlight {:on-press on-press
:accessibility-label accessibility-label}
[view st/send-wrapper
[view st/send-container
[icon :send st/send-icon]]])
(defn message-input-container [input]
[view st/message-input-container input])
[icon :send st/send-icon]]]])
(defn plain-input-options [disable?]
{:style st-message/message-input
@ -39,42 +39,79 @@
:on-change-text (when-not disable? command/set-input-message)
:on-submit-editing (on-press-commands-handler command)})
(defview message-input [input-options command]
[command? [:command?]
input-message [:get-chat-input-text]
input-command [:get-chat-command-content]
(defview message-input [input-options set-layout-size]
[input-message [:get-chat-input-text]
disable? [:get :disable-input]]
[text-input (merge
(plain-input-options disable?)
{:auto-focus false
:blur-on-submit true
:multiline true
:on-change #(let [size (-> (.-nativeEvent %)
(.-contentSize)
(.-height))]
(set-layout-size size))
:accessibility-label :input
:on-focus #(dispatch [:set :focused true])
:on-blur #(do (dispatch [:set :focused false])
(set-layout-size 0))
:default-value (or input-message "")}
input-options)])
(defview command-input [input-options command]
[input-command [:get-chat-command-content]
icon-width [:command-icon-width]
disable? [:get :disable-input]]
[text-input (merge
(if command?
(command-input-options command icon-width disable?)
(plain-input-options disable?))
{:auto-focus false
{:auto-focus true
:blur-on-submit false
:editable true
:accessibility-label :input
:on-focus #(dispatch [:set :focused true])
:on-blur #(dispatch [:set :focused false])
:default-value (if command? (or input-command "") input-message)}
:default-value (or input-command "")}
input-options)])
(defview plain-message-input-view [{:keys [input-options]}]
[command? [:command?]
{:keys [type] :as command} [:get-chat-command]
input-command [:get-chat-command-content]
valid-plain-message? [:valid-plain-message?]]
(defn plain-message-get-initial-state [_]
{:height 0})
(defn plain-message-render [_]
(let [command? (subscribe [:command?])
command (subscribe [:get-chat-command])
input-command (subscribe [:get-chat-command-content])
input-message (subscribe [:get-chat-input-text])
valid-plain-message? (subscribe [:valid-plain-message?])
component (r/current-component)
set-layout-size #(r/set-state component {:height %})]
(r/create-class
{:component-will-update
(fn [_]
(when (or (and @command? (str/blank? @input-command))
(and (not @command?) (not @input-message)))
(set-layout-size 0)))
:reagent-render
(fn [{:keys [input-options]}]
(let [{:keys [height]} (r/state component)]
[view st/input-container
[view st/input-view
[plain-message/commands-button]
[message-input-container
[message-input input-options command]]
[view (st/input-view height)
[plain-message/commands-button height #(set-layout-size 0)]
[view (st/message-input-container height)
(if @command?
[command-input input-options @command]
[message-input input-options set-layout-size])]
;; TODO emoticons: not implemented
[plain-message/smile-button]
(when (or command? valid-plain-message?)
(let [on-press (if command?
(on-press-commands-handler command)
[plain-message/smile-button height]
(when (or @command? @valid-plain-message?)
(let [on-press (if @command?
(on-press-commands-handler @command)
plain-message/send)]
[send-button {:on-press on-press
[send-button {:on-press #(on-press %)
:accessibility-label :send-message}]))
(when (and command? (= :command type))
[command/command-icon command])]])
(when (and @command? (= :command (:type @command)))
[command/command-icon @command])]]))})))
(defn plain-message-input-view [_]
(r/create-class {:get-initial-state plain-message-get-initial-state
:reagent-render plain-message-render}))

View File

@ -37,7 +37,7 @@
:delay delay})
#(dispatch [:set :disable-input false])))))
(defn commands-button []
(defn commands-button [height on-press]
(let [command? (subscribe [:command?])
requests (subscribe [:get-requests])
suggestions (subscribe [:get-suggestions])
@ -55,11 +55,11 @@
:component-did-update
on-update
:reagent-render
(fn []
[touchable-highlight {:on-press #(dispatch [:switch-command-suggestions!])
(fn [on-press]
[touchable-highlight {:on-press #(do (dispatch [:switch-command-suggestions!])
(on-press))
:disabled @command?}
[animated-view {:style (st/message-input-button-touchable
container-width)}
[animated-view {:style (st/message-input-button-touchable container-width height)}
(when-not @command?
[animated-view {:style (st/message-input-button buttons-scale)}
(if (seq @suggestions)
@ -79,7 +79,7 @@
(when (and @command? (.-finished e))
(anim/set-value width 0.1)))))))
(defn smile-button []
(defn smile-button [height]
(let [command? (subscribe [:command?])
buttons-scale (anim/create-value (if @command? 1 0))
container-width (anim/create-value (if @command? 0.1 56))
@ -98,7 +98,6 @@
;; TODO emoticons: not implemented
)
:disabled @command?}
[animated-view {:style (st/message-input-button-touchable
container-width)}
[animated-view {:style (st/message-input-button-touchable container-width height)}
[animated-view {:style (st/message-input-button buttons-scale)}
[icon :smile st/smile-icon]]]])})))

View File

@ -24,12 +24,12 @@
(defn drag-icon []
[view st/drag-container
[icon :drag-white st/drag-icon]])
[icon :drag_white st/drag-icon]])
(defn command-icon []
[view st/command-icon-container
;; TODO stub data: command icon
[icon :dollar-green st/command-icon]])
[icon :dollar_green st/command-icon]])
(defn info-container [command]
[view st/info-container
@ -55,7 +55,7 @@
[info-container @command]
[touchable-highlight {:on-press #(dispatch [:start-cancel-command])}
[view st/cancel-container
[icon :close-white st/cancel-icon]]]]]
[icon :close_white st/cancel-icon]]]]]
[view (merge (drag/pan-handlers pan-responder)
{:style ddst/drag-down-touchable})
[icon :drag_down ddst/drag-down-icon]]))))

View File

@ -30,4 +30,4 @@
[touchable-highlight
{:on-press more-click-handler}
[view st/more-btn
[icon :more-vertical st/more-btn-icon]]]]])
[icon :more_vertical st/more-btn-icon]]]]])

View File

@ -138,7 +138,7 @@
(if (or focused? (not= name new-name))
[touchable-highlight {:style (st/chat-name-btn-edit-container valid?)
:on-press save}
[view [icon :ok-purple st/add-members-icon]]]
[view [icon :ok_purple st/add-members-icon]]]
[touchable-highlight {:style (st/chat-name-btn-edit-container true)
:on-press focus}
[view [text {:style st/chat-name-btn-edit-text} (label :t/edit)]]])]
@ -154,7 +154,7 @@
[touchable-highlight {:on-press #(dispatch [:navigate-to :add-participants])}
;; TODO add participants view is not in design
[view st/add-members-container
[icon :add-gray st/add-members-icon]
[icon :add_gray st/add-members-icon]
[text {:style st/add-members-text}
(label :t/add-members)]]]
[chat-members]