From 149442100e1b045b1dba9c77b597f97f8e02c785 Mon Sep 17 00:00:00 2001 From: alwxndr Date: Mon, 26 Sep 2016 17:14:41 +0300 Subject: [PATCH] multiline text input (#255), correct assets for iOS --- android/app/src/main/res/values/colors.xml | 5 + android/app/src/main/res/values/strings.xml | 6 - android/app/src/main/res/values/styles.xml | 10 +- ios/StatusIm.xcodeproj/project.pbxproj | 5 +- src/status_im/chat/constants.cljs | 7 +- src/status_im/chat/styles/message_input.cljs | 60 ++++++---- src/status_im/chat/styles/plain_message.cljs | 45 ++++---- src/status_im/chat/styles/response.cljs | 6 +- src/status_im/chat/views/command.cljs | 2 +- src/status_im/chat/views/message_input.cljs | 109 +++++++++++++------ src/status_im/chat/views/plain_message.cljs | 15 ++- src/status_im/chat/views/response.cljs | 6 +- src/status_im/contacts/views/contact.cljs | 2 +- src/status_im/group_settings/screen.cljs | 4 +- 14 files changed, 172 insertions(+), 110 deletions(-) create mode 100644 android/app/src/main/res/values/colors.xml diff --git a/android/app/src/main/res/values/colors.xml b/android/app/src/main/res/values/colors.xml new file mode 100644 index 0000000000..629b151f53 --- /dev/null +++ b/android/app/src/main/res/values/colors.xml @@ -0,0 +1,5 @@ + + #7099e6 + #5c6bc0 + #5c6bc0 + diff --git a/android/app/src/main/res/values/strings.xml b/android/app/src/main/res/values/strings.xml index 5df11c0412..428623ba43 100644 --- a/android/app/src/main/res/values/strings.xml +++ b/android/app/src/main/res/values/strings.xml @@ -1,10 +1,4 @@ - - - - - - Status Your phone appears to be ROOTED, by pressing CONTINUE you understand and accept the risks in using this software. Continue diff --git a/android/app/src/main/res/values/styles.xml b/android/app/src/main/res/values/styles.xml index 319eb0ca10..b6c9d952be 100644 --- a/android/app/src/main/res/values/styles.xml +++ b/android/app/src/main/res/values/styles.xml @@ -1,8 +1,10 @@ - - + @color/primary + @color/primary_dark + @color/accent + @color/primary + @color/primary + diff --git a/ios/StatusIm.xcodeproj/project.pbxproj b/ios/StatusIm.xcodeproj/project.pbxproj index ee36cbb77a..e7132c9c6f 100644 --- a/ios/StatusIm.xcodeproj/project.pbxproj +++ b/ios/StatusIm.xcodeproj/project.pbxproj @@ -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)", diff --git a/src/status_im/chat/constants.cljs b/src/status_im/chat/constants.cljs index d61bd707ca..737c8b9306 100644 --- a/src/status_im/chat/constants.cljs +++ b/src/status_im/chat/constants.cljs @@ -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)) diff --git a/src/status_im/chat/styles/message_input.cljs b/src/status_im/chat/styles/message_input.cljs index e48f7efa5c..daa7f830e0 100644 --- a/src/status_im/chat/styles/message_input.cljs +++ b/src/status_im/chat/styles/message_input.cljs @@ -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 - :height 36 - :borderRadius 18 - :backgroundColor color-blue}) + {:width 36 + :height 36 + :border-radius 18 + :background-color color-blue}) + +(def send-icon + {:margin-top 10.5 + :margin-left 12 + :width 15 + :height 15}) \ No newline at end of file diff --git a/src/status_im/chat/styles/plain_message.cljs b/src/status_im/chat/styles/plain_message.cljs index 008fcd7217..a76ea56700 100644 --- a/src/status_im/chat/styles/plain_message.cljs +++ b/src/status_im/chat/styles/plain_message.cljs @@ -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}) + {:transform [{:scale scale}] + :width 24 + :height 24 + :align-items :center + :justify-content :center}) (def list-icon {:width 20 @@ -23,21 +26,21 @@ :width 8 :height 8 :border-radius 8 - :left 0 - :top 0 - :position :absolute}) + :left 0 + :top 0 + :position :absolute}) (def close-icon {:width 12 :height 12}) (def message-input - {:flex 1 - :marginTop -2 - :padding 0 - :fontSize 14 - :color text2-color}) + {:flex 1 + :padding 0 + :font-size 14 + :line-height 20 + :color text1-color}) (def smile-icon - {:width 20 - :height 20}) + {:width 20 + :height 20}) diff --git a/src/status_im/chat/styles/response.cljs b/src/status_im/chat/styles/response.cljs index 1f9788ee33..a5bc065733 100644 --- a/src/status_im/chat/styles/response.cljs +++ b/src/status_im/chat/styles/response.cljs @@ -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)}) diff --git a/src/status_im/chat/views/command.cljs b/src/status_im/chat/views/command.cljs index 3264e5d597..ec59d296c8 100644 --- a/src/status_im/chat/views/command.cljs +++ b/src/status_im/chat/views/command.cljs @@ -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]]]) diff --git a/src/status_im/chat/views/message_input.cljs b/src/status_im/chat/views/message_input.cljs index bdb730a4cd..0169faa1c2 100644 --- a/src/status_im/chat/views/message_input.cljs +++ b/src/status_im/chat/views/message_input.cljs @@ -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-container - [icon :send st/send-icon]]]) - -(defn message-input-container [input] - [view st/message-input-container input]) + [view st/send-wrapper + [view st/send-container + [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 + (command-input-options command icon-width disable?) + {: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?]] - [view st/input-container - [view st/input-view - [plain-message/commands-button] - [message-input-container - [message-input input-options command]] - ;; 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/send)] - [send-button {:on-press on-press - :accessibility-label :send-message}])) - (when (and command? (= :command type)) - [command/command-icon command])]]) +(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 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 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 %) + :accessibility-label :send-message}])) + (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})) + + diff --git a/src/status_im/chat/views/plain_message.cljs b/src/status_im/chat/views/plain_message.cljs index f4e19beebb..23c5419f39 100644 --- a/src/status_im/chat/views/plain_message.cljs +++ b/src/status_im/chat/views/plain_message.cljs @@ -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]]]])}))) diff --git a/src/status_im/chat/views/response.cljs b/src/status_im/chat/views/response.cljs index fdc3c3831f..537d006cd5 100644 --- a/src/status_im/chat/views/response.cljs +++ b/src/status_im/chat/views/response.cljs @@ -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]])))) diff --git a/src/status_im/contacts/views/contact.cljs b/src/status_im/contacts/views/contact.cljs index 707aff4f7e..913f8a04b3 100644 --- a/src/status_im/contacts/views/contact.cljs +++ b/src/status_im/contacts/views/contact.cljs @@ -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]]]]]) diff --git a/src/status_im/group_settings/screen.cljs b/src/status_im/group_settings/screen.cljs index 4137c56dcb..5087960d9a 100644 --- a/src/status_im/group_settings/screen.cljs +++ b/src/status_im/group_settings/screen.cljs @@ -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]