multiline text input (#255), correct assets for iOS

Former-commit-id: 149442100e
This commit is contained in:
alwxndr 2016-09-26 17:14:41 +03:00 committed by Alexander Pantyuhov
parent 4543a80707
commit 311a61bc7f
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> <resources>
<string name="app_name">Status</string> <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_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> <string name="root_okay">Continue</string>

View File

@ -1,8 +1,10 @@
<resources> <resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. --> <item name="colorPrimary">@color/primary</item>
</style> <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> </resources>

View File

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

View File

@ -1,6 +1,11 @@
(ns status-im.chat.constants) (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 request-info-height 61)
(def response-height-normal 211) (def response-height-normal 211)
(def minimum-suggestion-height (+ input-height request-info-height)) (def minimum-suggestion-height (+ input-height request-info-height))

View File

@ -1,30 +1,48 @@
(ns status-im.chat.styles.message-input (ns status-im.chat.styles.message-input
(:require [status-im.components.styles :refer [color-white (:require [status-im.components.styles :refer [color-white
color-blue]] color-blue]]
[status-im.chat.constants :refer [input-height]])) [status-im.chat.constants :refer [max-input-height
min-input-height
(def message-input-container input-spacing-top
{:flex 1 input-spacing-bottom]]))
:marginRight 0})
(def input-container (def input-container
{:flexDirection :column}) {:flex-direction :column})
(def input-view (defn input-view [content-height]
{:flexDirection :row {:flex-direction :row
:height input-height :align-items :center
:backgroundColor color-white}) :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 (defn message-input-container [content-height]
{:marginTop 10.5 {:height (min (max min-input-height content-height) max-input-height)
:marginLeft 12 :margin-top input-spacing-top
:width 15 :margin-bottom input-spacing-bottom
:height 15}) :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 (def send-container
{:marginTop 10 {:width 36
:marginRight 10
:width 36
:height 36 :height 36
:borderRadius 18 :border-radius 18
:backgroundColor color-blue}) :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 (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] (defn message-input-button-touchable [width content-height]
{:width w {:width width
:height 56 :flex 1
:alignItems :center :margin-bottom 14
:justifyContent :center}) :align-items :center
:justify-content :flex-end})
(defn message-input-button [scale] (defn message-input-button [scale]
{:transform [{:scale scale}] {:transform [{:scale scale}]
:width 24 :width 24
:height 24 :height 24
:alignItems :center :align-items :center
:justifyContent :center}) :justify-content :center})
(def list-icon (def list-icon
{:width 20 {:width 20
@ -33,10 +36,10 @@
(def message-input (def message-input
{:flex 1 {:flex 1
:marginTop -2
:padding 0 :padding 0
:fontSize 14 :font-size 14
:color text2-color}) :line-height 20
:color text1-color})
(def smile-icon (def smile-icon
{:width 20 {:width 20

View File

@ -81,11 +81,11 @@
:width 12 :width 12
:height 12}) :height 12})
(defn command-input [ml disbale?] (defn command-input [ml disable?]
{:flex 1 {:flex 1
:marginRight 16 :marginRight 16
:margin-left (- ml 5) :margin-left (- ml 5)
:marginTop -2 :margin-top 4
:padding 0 :padding 0
:fontSize 14 :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 [] (defn cancel-button []
[touchable-highlight {:on-press cancel-command-input} [touchable-highlight {:on-press cancel-command-input}
[view st/cancel-container [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.views.command :as command]
[status-im.chat.styles.message-input :as st] [status-im.chat.styles.message-input :as st]
[status-im.chat.styles.plain-message :as st-message] [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]}] (defn send-button [{:keys [on-press accessibility-label]}]
[touchable-highlight {:on-press on-press [touchable-highlight {:on-press on-press
:accessibility-label accessibility-label} :accessibility-label accessibility-label}
[view st/send-wrapper
[view st/send-container [view st/send-container
[icon :send st/send-icon]]]) [icon :send st/send-icon]]]])
(defn message-input-container [input]
[view st/message-input-container input])
(defn plain-input-options [disable?] (defn plain-input-options [disable?]
{:style st-message/message-input {:style st-message/message-input
@ -39,42 +39,79 @@
:on-change-text (when-not disable? command/set-input-message) :on-change-text (when-not disable? command/set-input-message)
:on-submit-editing (on-press-commands-handler command)}) :on-submit-editing (on-press-commands-handler command)})
(defview message-input [input-options command] (defview message-input [input-options set-layout-size]
[command? [:command?] [input-message [:get-chat-input-text]
input-message [:get-chat-input-text] disable? [:get :disable-input]]
input-command [:get-chat-command-content] [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] icon-width [:command-icon-width]
disable? [:get :disable-input]] disable? [:get :disable-input]]
[text-input (merge [text-input (merge
(if command?
(command-input-options command icon-width disable?) (command-input-options command icon-width disable?)
(plain-input-options disable?)) {:auto-focus true
{:auto-focus false
:blur-on-submit false :blur-on-submit false
:editable true
:accessibility-label :input :accessibility-label :input
:on-focus #(dispatch [:set :focused true]) :on-focus #(dispatch [:set :focused true])
:on-blur #(dispatch [:set :focused false]) :on-blur #(dispatch [:set :focused false])
:default-value (if command? (or input-command "") input-message)} :default-value (or input-command "")}
input-options)]) input-options)])
(defview plain-message-input-view [{:keys [input-options]}] (defn plain-message-get-initial-state [_]
[command? [:command?] {:height 0})
{:keys [type] :as command} [:get-chat-command]
input-command [:get-chat-command-content] (defn plain-message-render [_]
valid-plain-message? [:valid-plain-message?]] (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-container
[view st/input-view [view (st/input-view height)
[plain-message/commands-button] [plain-message/commands-button height #(set-layout-size 0)]
[message-input-container [view (st/message-input-container height)
[message-input input-options command]] (if @command?
[command-input input-options @command]
[message-input input-options set-layout-size])]
;; TODO emoticons: not implemented ;; TODO emoticons: not implemented
[plain-message/smile-button] [plain-message/smile-button height]
(when (or command? valid-plain-message?) (when (or @command? @valid-plain-message?)
(let [on-press (if command? (let [on-press (if @command?
(on-press-commands-handler command) (on-press-commands-handler @command)
plain-message/send)] plain-message/send)]
[send-button {:on-press on-press [send-button {:on-press #(on-press %)
:accessibility-label :send-message}])) :accessibility-label :send-message}]))
(when (and command? (= :command type)) (when (and @command? (= :command (:type @command)))
[command/command-icon 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}) :delay delay})
#(dispatch [:set :disable-input false]))))) #(dispatch [:set :disable-input false])))))
(defn commands-button [] (defn commands-button [height on-press]
(let [command? (subscribe [:command?]) (let [command? (subscribe [:command?])
requests (subscribe [:get-requests]) requests (subscribe [:get-requests])
suggestions (subscribe [:get-suggestions]) suggestions (subscribe [:get-suggestions])
@ -55,11 +55,11 @@
:component-did-update :component-did-update
on-update on-update
:reagent-render :reagent-render
(fn [] (fn [on-press]
[touchable-highlight {:on-press #(dispatch [:switch-command-suggestions!]) [touchable-highlight {:on-press #(do (dispatch [:switch-command-suggestions!])
(on-press))
:disabled @command?} :disabled @command?}
[animated-view {:style (st/message-input-button-touchable [animated-view {:style (st/message-input-button-touchable container-width height)}
container-width)}
(when-not @command? (when-not @command?
[animated-view {:style (st/message-input-button buttons-scale)} [animated-view {:style (st/message-input-button buttons-scale)}
(if (seq @suggestions) (if (seq @suggestions)
@ -79,7 +79,7 @@
(when (and @command? (.-finished e)) (when (and @command? (.-finished e))
(anim/set-value width 0.1))))))) (anim/set-value width 0.1)))))))
(defn smile-button [] (defn smile-button [height]
(let [command? (subscribe [:command?]) (let [command? (subscribe [:command?])
buttons-scale (anim/create-value (if @command? 1 0)) buttons-scale (anim/create-value (if @command? 1 0))
container-width (anim/create-value (if @command? 0.1 56)) container-width (anim/create-value (if @command? 0.1 56))
@ -98,7 +98,6 @@
;; TODO emoticons: not implemented ;; TODO emoticons: not implemented
) )
:disabled @command?} :disabled @command?}
[animated-view {:style (st/message-input-button-touchable [animated-view {:style (st/message-input-button-touchable container-width height)}
container-width)}
[animated-view {:style (st/message-input-button buttons-scale)} [animated-view {:style (st/message-input-button buttons-scale)}
[icon :smile st/smile-icon]]]])}))) [icon :smile st/smile-icon]]]])})))

View File

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

View File

@ -30,4 +30,4 @@
[touchable-highlight [touchable-highlight
{:on-press more-click-handler} {:on-press more-click-handler}
[view st/more-btn [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)) (if (or focused? (not= name new-name))
[touchable-highlight {:style (st/chat-name-btn-edit-container valid?) [touchable-highlight {:style (st/chat-name-btn-edit-container valid?)
:on-press save} :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) [touchable-highlight {:style (st/chat-name-btn-edit-container true)
:on-press focus} :on-press focus}
[view [text {:style st/chat-name-btn-edit-text} (label :t/edit)]]])] [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])} [touchable-highlight {:on-press #(dispatch [:navigate-to :add-participants])}
;; TODO add participants view is not in design ;; TODO add participants view is not in design
[view st/add-members-container [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} [text {:style st/add-members-text}
(label :t/add-members)]]] (label :t/add-members)]]]
[chat-members] [chat-members]