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

android/app/src/main/res/values/colors.xml

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

android/app/src/main/res/values/strings.xml

@@ -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>

android/app/src/main/res/values/styles.xml

@@ -1,8 +1,10 @@
 <resources>
-
-    <!-- Base application theme. -->
     <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>

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)",

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))

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]]))
+            [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
-  {: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
-  {:marginTop       10
+  {:width            36
-   :marginRight     10
+   :height           36
-   :width           36
+   :border-radius    18
-   :height          36
+   :background-color color-blue})
-   :borderRadius    18
+
-   :backgroundColor color-blue})
+(def send-icon
+  {:margin-top  10.5
+   :margin-left 12
+   :width       15
+   :height      15})

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]
+(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]
-  {: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
   {:width  20
@@ -23,21 +26,21 @@
    :width            8
    :height           8
    :border-radius    8
-   :left 0
+   :left             0
-   :top 0
+   :top              0
-   :position :absolute})
+   :position         :absolute})
 
 (def close-icon
   {:width  12
    :height 12})
 
 (def message-input
-  {:flex       1
+  {:flex        1
-   :marginTop  -2
+   :padding     0
-   :padding    0
+   :font-size   14
-   :fontSize   14
+   :line-height 20
-   :color      text2-color})
+   :color       text1-color})
 
 (def smile-icon
-  {:width       20
+  {:width  20
-   :height      20})
+   :height 20})

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)})

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]]])
 

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
+   [view st/send-wrapper
-    [icon :send st/send-icon]]])
+    [view st/send-container
-
+     [icon :send st/send-icon]]]])
-(defn message-input-container [input]
-  [view st/message-input-container input])
 
 (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]
+(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]
    disable? [:get :disable-input]]
   [text-input (merge
-                (if command?
+                (command-input-options command icon-width disable?)
-                  (command-input-options command icon-width disable?)
+                {:auto-focus          true
-                  (plain-input-options disable?))
-                {:auto-focus          false
                  :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]}]
+(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?])
-  [view st/input-container
+        command              (subscribe [:get-chat-command])
-   [view st/input-view
+        input-command        (subscribe [:get-chat-command-content])
-    [plain-message/commands-button]
+        input-message        (subscribe [:get-chat-input-text])
-    [message-input-container
+        valid-plain-message? (subscribe [:valid-plain-message?])
-     [message-input input-options command]]
+        component            (r/current-component)
-    ;; TODO emoticons: not implemented
+        set-layout-size      #(r/set-state component {:height %})]
-    [plain-message/smile-button]
+    (r/create-class
-    (when (or command? valid-plain-message?)
+      {:component-will-update
-      (let [on-press (if command?
+       (fn [_]
-                       (on-press-commands-handler command)
+         (when (or (and @command? (str/blank? @input-command))
-                       plain-message/send)]
+                   (and (not @command?) (not @input-message)))
-        [send-button {:on-press            on-press
+           (set-layout-size 0)))
-                      :accessibility-label :send-message}]))
+       :reagent-render
-    (when (and command? (= :command type))
+       (fn [{:keys [input-options]}]
-      [command/command-icon command])]])
+         (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}))
+
+

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 []
+       (fn [on-press]
-         [touchable-highlight {:on-press #(dispatch [:switch-command-suggestions!])
+         [touchable-highlight {:on-press #(do (dispatch [:switch-command-suggestions!])
+                                              (on-press))
                                :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?
              [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
+          [animated-view {:style (st/message-input-button-touchable container-width height)}
-                                   container-width)}
            [animated-view {:style (st/message-input-button buttons-scale)}
             [icon :smile st/smile-icon]]]])})))

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]]))))

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]]]]])

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]