[#3014]: Updated chat input #3259

alwx · 2018-02-08T07:14:37Z

This PR includes several amazing changes:

Removes react-native-emoji-picker;
Restyles chat input view to make it match the new design;
Adds several cool animations to input field;
Refactors some parts. However, (and it's important!) it's not a refactoring PR and I would like not to make some big changes here to structure/refers/etc here.

This is how it looks:

jeluard

Nice work!

Please make sure the new colors ns is used and
no unused requires are defined.

jeluard · 2018-02-14T07:17:10Z

src/status_im/chat/styles/input/parameter_box.cljs

+(ns status-im.chat.styles.input.parameter-box
+  (:require [status-im.ui.components.styles :as common]))
+
+(def color-root-border "#e8ebec")


Can you define this in colors ns?

jeluard · 2018-02-14T07:17:25Z

src/status_im/chat/styles/input/parameter_box.cljs

+(def color-root-border "#e8ebec")
+
+(def root
+  {:background-color common/color-white


Please use the new colors ns.

jeluard · 2018-02-14T07:17:39Z

src/status_im/chat/styles/input/result_box.cljs

@@ -1,7 +1,7 @@
 (ns status-im.chat.styles.input.result-box
  (:require [status-im.ui.components.styles :as common]))

-(def color-root-border "rgba(192, 198, 202, 0.5)")
+(def color-root-border "#e8ebec")


Please use the new colors ns.

jeluard · 2018-02-14T07:17:48Z

src/status_im/chat/styles/input/send_button.cljs

@@ -0,0 +1,17 @@
+(ns status-im.chat.styles.input.send-button)
+
+(def color-send "#4360df")


Please use the new colors ns.

jeluard · 2018-02-14T07:17:56Z

src/status_im/chat/styles/input/suggestions.cljs

-(def color-item-title-text "rgb(147, 155, 161)")
-(def color-item-suggestion-name "rgb(98, 143, 227)")
-(def color-item-border "#e8eaeb")
+(def color-root-border "#e8ebec")


Please use the new colors ns.

jeluard · 2018-02-14T07:20:02Z

src/status_im/chat/views/input/send_button.cljs

+            [status-im.ui.components.react :as react]
+            [status-im.ui.components.icons.vector-icons :as vi]
+            [status-im.utils.utils :as utils]
+            [taoensso.timbre :as log]))


log not used? Maybe cleanup those requires.

jeluard · 2018-02-14T07:20:58Z

src/status_im/chat/views/input/send_button.cljs

+                                                     (re-frame/dispatch [:send-seq-argument]))
+                                                   (utils/set-timeout
+                                                     (fn [] (re-frame/dispatch [:chat-input-focus :seq-input-ref]))
+                                                     100))


Can you add a comment detailing the need for timeout?

No. It was here before, and I haven't touched it. Simply moved from status-im.chat.views.input.input ns to a new one.

alwx · 2018-02-14T08:51:40Z

@jeluard done

jeluard · 2018-02-14T08:55:23Z

@alwx Thanks! For colors we know favor color name (and comment usage). Goal is to make sure we don't have too many similar colors duplicated.

Could you check with design team those colors are supposed to be different from existing grays? (already 4 or 5)

flexsurfer · 2018-02-15T09:17:44Z

resources/icons/input_commands.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path fill="#6E777E" fill-rule="nonzero" d="M7 5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H7zm0-2h10a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4zm6.618 5H14a.618.618 0 0 1 .553.894l-3.277 6.553a1 1 0 0 1-.894.553H10a.618.618 0 0 1-.553-.894l3.277-6.553A1 1 0 0 1 13.618 8z"/>


better to clean fill, to do not confuse, because this value not used

flexsurfer · 2018-02-15T09:17:50Z

resources/icons/input_send.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22">
+    <path fill="#FFF" fill-rule="evenodd" d="M11.882 8.686l2.047 2.057a.87.87 0 1 0 1.227-1.233l-3.53-3.547a.865.865 0 0 0-.537-.251.866.866 0 0 0-.718.251L6.841 9.51a.88.88 0 0 0 0 1.234.864.864 0 0 0 1.228-.001l2.049-2.059v6.732a.88.88 0 0 0 .882.878c.49 0 .882-.393.882-.878v-6.73z"/>


better to clean fill, to do not confuse, because this value not used

it's not true. seems like the opposite thing is true — color property for svgs doesn't work

flexsurfer · 2018-02-15T09:23:57Z

src/status_im/translations/af.cljs

@@ -215,7 +215,6 @@

   :sharing-share                         "Deel..."
   :type-a-message                        "Tik ‘n boodskap..."
-   :type-a-command                        "Begin ‘n opdrag tik..."


we decided and agreed to do not delete translations,

annadanchenko · 2018-02-15T15:48:47Z

on PR build 24:

Issue 1: No contacts are shown in suggestions for send/request in Group chat. Both iOS and Android
Steps:

create group chat
add Jarrad or other contact to it
use /send command
check content of the suggestions list shown (currently it's empty. Expected: Jarrad is shown or other contact that was added to the group chat)
Note: if return to Home screen and then back to the chat then suggestion shows the contact
TF with log and video https://app.testfairy.com/projects/4803622-status/builds/7711251/sessions/3/?accessToken=rt4LWHN3BhEUO5-W980eb-nGIC0

Issue 2 (Android only)
Suggestions title (Send transaction) is overlapped by chat header and is not fully visible. Google Pixel XL.

note that on iOS it's above chat header and can be read ok.

alwx · 2018-02-16T12:31:02Z

@annadanchenko can be re-tested again

annadanchenko · 2018-02-16T14:47:26Z

Issues 1-2 are fixed.
2 new are found:

Issue 3: tap on Return key on device keyboard when password is entered in Console shows error. Expected: value is sent to Console (same as if tap on "send" button in the input field". Note: this is the only place where Enter behaves like this, in other places it should add new line in the input field
TF: https://app.testfairy.com/projects/4803622-status/builds/7716052/sessions/14/?accessToken=vrhBUlcsxxH5h0rQRxIcsV8qUoU

00:12 I/ReactNativeJS: 
00:12 I/ReactNativeJS: missing_protocol@index.android.bundle:12:114606
00:12 I/ReactNativeJS: _deref@index.android.bundle:12:156439
00:12 I/ReactNativeJS: deref@index.android.bundle:12:214082
00:12 I/ReactNativeJS: index.android.bundle:12:8035926
00:12 I/ReactNativeJS: index.android.bundle:12:8036087
00:12 I/ReactNativeJS: C@index.android.bundle:49:1462
00:12 I/ReactNativeJS: invokeGuardedCallback@index.android.bundle:49:725
00:12 I/ReactNativeJS: invokeGuardedCallbackAndCatchFirstError@index.android.bundle:49:840
00:12 I/ReactNativeJS: k@index.android.bundle:49:1764
00:12 I/ReactNativeJS: executeDispatchesInOrder@index.android.bundle:49:2521
00:12 I/ReactNativeJS: jo@index.android.bundle:49:62490
00:12 I/ReactNativeJS: Oo@index.android.bundle:49:62597
00:12 I/ReactNativeJS: Uo@index.android.bundle:49:62428
00:12 I/ReactNativeJS: processEventQueue@index.android.bundle:49:63577
00:12 I/ReactNativeJS: handleTopLevel@index.android.bundle:49:68294
00:12 I/ReactNativeJS: index.android.bundle:49:68534
00:12 I/ReactNativeJS: batchedUpdates@index.android.bundle:49:93160
00:12 I/ReactNativeJS: A@index.android.bundle:49:3891
00:12 I/ReactNativeJS: batchedUpdates@index.android.bundle:49:3978
00:12 I/ReactNativeJS: _receiveRootNodeIDEvent@index.android.bundle:49:68505
00:12 I/ReactNativeJS: receiveEvent@index.android.bundle:49:68609
00:12 I/ReactNativeJS: value@index.android.bundle:27:3177
00:12 I/ReactNativeJS: index.android.bundle:27:911
00:12 I/ReactNativeJS: value@index.android.bundle:27:2606
00:12 I/ReactNativeJS: value@index.android.bundle:27:883
00:12 I/ReactNativeJS: [native code]
00:12 I/ReactNativeJS:

Issue 4: Second "/send" command is shown in commands list if chat contains 1 or more Request messages sent to this contact. Expected: Only one /send command is shown in the suggestions list
Steps:

in group or in 1:1 chat send 2 requests to contact B
as contact B: open the chat with 2 request messages and tap on "command" icon to open commands suggestions list. Check how many times "/send" command is shown.

Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>

status-github-bot bot added this to REVIEW in Pipeline for QA Feb 8, 2018

alwx self-assigned this Feb 8, 2018

status-github-bot bot moved this from REVIEW to CONTRIBUTOR in Pipeline for QA Feb 8, 2018

status-im deleted a comment from statustestbot Feb 9, 2018

flexsurfer added the in progress label Feb 9, 2018

alwx force-pushed the feature/#3014 branch 2 times, most recently from 4aaf9fa to c22b80e Compare February 12, 2018 14:56

alwx changed the title ~~WIP: [#3014]: Updated chat input~~ [#3014]: Updated chat input Feb 13, 2018

alwx force-pushed the feature/#3014 branch from 13a38ff to f9413ae Compare February 13, 2018 18:00

alwx requested review from goranjovic, janherich, rasom, flexsurfer and jeluard February 13, 2018 18:06

janherich approved these changes Feb 13, 2018

View reviewed changes

janherich moved this from CONTRIBUTOR to REVIEW in Pipeline for QA Feb 13, 2018

janherich removed the in progress label Feb 13, 2018

jeluard suggested changes Feb 14, 2018

View reviewed changes

alwx force-pushed the feature/#3014 branch from 115b6b4 to 2cbf4c0 Compare February 14, 2018 08:43

goranjovic approved these changes Feb 15, 2018

View reviewed changes

flexsurfer approved these changes Feb 15, 2018

View reviewed changes

alwx mentioned this pull request Feb 15, 2018

[ISSUE #3083] Adapted chat menu to latest mockups #3308

Merged

jeluard approved these changes Feb 15, 2018

View reviewed changes

jeluard moved this from REVIEW to TO TEST in Pipeline for QA Feb 15, 2018

alwx force-pushed the feature/#3014 branch from cd5c130 to be58ff5 Compare February 15, 2018 13:32

alwx removed the request for review from rasom February 15, 2018 13:33

annadanchenko moved this from TO TEST to IN TESTING in Pipeline for QA Feb 15, 2018

annadanchenko self-assigned this Feb 15, 2018

alwx force-pushed the feature/#3014 branch 2 times, most recently from 4cd3f7f to 6177009 Compare February 15, 2018 14:36

annadanchenko added the Tested - Issues label Feb 15, 2018

alwx force-pushed the feature/#3014 branch 2 times, most recently from c2895d8 to a3c1265 Compare February 16, 2018 10:42

annadanchenko removed the Tested - Issues label Feb 16, 2018

annadanchenko moved this from IN TESTING to MERGE in Pipeline for QA Feb 16, 2018

alwx force-pushed the feature/#3014 branch from a3c1265 to d65de13 Compare February 16, 2018 17:15

[#3014]: Updated chat input

2aa6c19

Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>

flexsurfer force-pushed the feature/#3014 branch from d65de13 to 2aa6c19 Compare February 16, 2018 17:59

flexsurfer merged commit 2aa6c19 into develop Feb 16, 2018

Pipeline for QA automation moved this from MERGE to DONE Feb 16, 2018

alwx mentioned this pull request Feb 19, 2018

Returning expandable animations back, removing :get-max-container-area-height #3367

Merged

rasom deleted the feature/#3014 branch April 19, 2018 10:50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[#3014]: Updated chat input #3259

[#3014]: Updated chat input #3259

alwx commented Feb 8, 2018 •

edited

Loading

jeluard left a comment

jeluard Feb 14, 2018

jeluard Feb 14, 2018

jeluard Feb 14, 2018

jeluard Feb 14, 2018

jeluard Feb 14, 2018

jeluard Feb 14, 2018

jeluard Feb 14, 2018

alwx Feb 14, 2018

alwx commented Feb 14, 2018

jeluard commented Feb 14, 2018

flexsurfer Feb 15, 2018

flexsurfer Feb 15, 2018

alwx Feb 15, 2018

flexsurfer Feb 15, 2018

annadanchenko commented Feb 15, 2018

alwx commented Feb 16, 2018

annadanchenko commented Feb 16, 2018 •

edited

Loading

		@@ -0,0 +1,17 @@
		(ns status-im.chat.styles.input.send-button)

		(def color-send "#4360df")

		@@ -0,0 +1,3 @@
		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
		<path fill="#6E777E" fill-rule="nonzero" d="M7 5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H7zm0-2h10a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4zm6.618 5H14a.618.618 0 0 1 .553.894l-3.277 6.553a1 1 0 0 1-.894.553H10a.618.618 0 0 1-.553-.894l3.277-6.553A1 1 0 0 1 13.618 8z"/>

		@@ -0,0 +1,3 @@
		<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22">
		<path fill="#FFF" fill-rule="evenodd" d="M11.882 8.686l2.047 2.057a.87.87 0 1 0 1.227-1.233l-3.53-3.547a.865.865 0 0 0-.537-.251.866.866 0 0 0-.718.251L6.841 9.51a.88.88 0 0 0 0 1.234.864.864 0 0 0 1.228-.001l2.049-2.059v6.732a.88.88 0 0 0 .882.878c.49 0 .882-.393.882-.878v-6.73z"/>

[#3014]: Updated chat input #3259

[#3014]: Updated chat input #3259

Conversation

alwx commented Feb 8, 2018 • edited Loading

jeluard left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alwx commented Feb 14, 2018

jeluard commented Feb 14, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

annadanchenko commented Feb 15, 2018

alwx commented Feb 16, 2018

annadanchenko commented Feb 16, 2018 • edited Loading

alwx commented Feb 8, 2018 •

edited

Loading

annadanchenko commented Feb 16, 2018 •

edited

Loading