Typing indicator ellipses #5933

akshayasalvi · 2021-10-18T18:38:33Z

Details

Added ellipses for long emails in typing indicator

Fixed Issues

$ #5623

Tests

Tested email long email and display name
Tested for small email
Tested with multiple users

QA Steps

Go to chat with any account A (or with a long email)
Go to chat with account B
Send chats from Account A to Account B, the typing indicator should show the trimmed username along with the is typing word visible
Test the same with small email, it shouldn't trim the email
For two or more users it should show Multiple users typing...

Tested On

Screenshots

Web

Mobile Web

Desktop

iOS

Android

parasharrajat · 2021-10-18T19:06:32Z

src/languages/en.js

@@ -160,7 +160,7 @@ export default {
        newMsg: ({count}) => `${count} new message${count > 1 ? 's' : ''}`,
    },
    reportTypingIndicator: {
-        isTyping: 'is typing...',
+        isTyping: 'is typing',


I think we should keep this as it is??

I did add ... back to typing....

I am not sure if two ... look fine. But upto you guys.

cc: @NikkiWines

Hmmm, I think it's fine for now since is typing... is pretty standard if there's no animation for a user typing.

parasharrajat · 2021-10-18T19:09:44Z

src/styles/styles.js

+function getTypingIndicatorTextStyle(isSmallScreenWidth) {
+    return isSmallScreenWidth
+        ? {
+            maxWidth: 200,
+        }
+        : {
+            maxWidth: 500,
+        };
+}
+


Hmm. This is supposed to be fluid. Take max available space with hiding is typing...

parasharrajat · 2021-10-18T19:10:15Z

src/pages/home/report/ReportTypingIndicator.js

                        <Text
                            style={[
                                styles.chatItemComposeSecondaryRowSubText,
                                styles.chatItemComposeSecondaryRowOffset,
+                                getTypingIndicatorTextStyle(this.props.isSmallScreenWidth),


We will not need it. See comment below...

parasharrajat · 2021-10-18T19:11:21Z

src/pages/home/report/ReportTypingIndicator.js

                        <Text
                            style={[
                                styles.chatItemComposeSecondaryRowSubText,
-                                styles.chatItemComposeSecondaryRowOffset,
+                                styles.ml1,


I think we should take the natural gap of 1 char.

…ndicator-ellipses

akshayasalvi · 2021-10-19T19:24:24Z

@parasharrajat PR updated.

parasharrajat · 2021-10-19T19:34:17Z

src/pages/home/report/ReportTypingIndicator.js

@@ -108,6 +100,7 @@ ReportTypingIndicator.displayName = 'ReportTypingIndicator';

 export default compose(
    withLocalize,
+    withWindowDimensions,


Seems like unsued now.

parasharrajat

@akshayasalvi Did you test it on all platforms after the recent changes? If so, please update the screenshots.

I see that It does not work well on Android.

The name should not trim until you have consumed all the available space. In the screenshot, there is plenty of space after is typing...
So the Name will be trimmed when is Typing... is close to the right edge where the composer ends.

akshayasalvi · 2021-10-20T15:53:13Z

Yes, you're right. I tried and it does break in Android. I've tried to fix it but it then increases the whitespace between the email and is Typing. Will check.

parasharrajat · 2021-10-22T18:30:12Z

Any update @akshayasalvi ?

akshayasalvi · 2021-10-25T19:49:25Z

Any update @akshayasalvi ?

Tried but haven't figured a solution that ensures fluid for all cases. Still checking.

akshayasalvi · 2021-10-27T18:41:13Z

@parasharrajat @NikkiWines I've made changes and it works fine on Android but I am not sure it doesn't work fine on the Android emulator.

Attached is the screenshot from my android phone.

parasharrajat · 2021-10-28T02:45:37Z

I will check it later.

NikkiWines

Couple minor comments but it's looking great

NikkiWines · 2021-10-29T01:55:19Z

src/pages/home/report/ReportTypingIndicator.js

+                    <View style={[styles.chatItemComposeSecondaryRow, styles.flexRow]}>
+                        <View style={[styles.chatItemComposeSecondaryRowOffset, styles.flexShrink1]}>
+                            <Text
+                                style={[


this can be a single line instead

style={[styles.chatItemComposeSecondaryRowSubText]}

NikkiWines · 2021-10-29T01:56:26Z

src/pages/home/report/ReportTypingIndicator.js

+                            </Text>
+                        </View>
+                        <View style={[styles.flexShrink0]}>
+                            <Text


This can also be a single line:

<Text style={[styles.chatItemComposeSecondaryRowSubText]}>

parasharrajat

LGTM. Tests well. Please refer to Nikki's comments and we are good here. Thanks for the changes.

akshayasalvi · 2021-10-29T10:33:03Z

@parasharrajat @NikkiWines PR updated

NikkiWines

👍 Looks good!!

NikkiWines · 2021-11-01T17:18:51Z

@parasharrajat not sure if you wanted to give this another review or not.

If you haven't by EOD, I'll merge 🚀

OSBotify · 2021-11-02T00:21:47Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

OSBotify · 2021-11-03T00:27:53Z

🚀 Deployed to staging by @NikkiWines in version: 1.1.12-4 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

nazam100 · 2021-11-03T13:15:38Z

Accessibility Issue : Incorrect focus order.
WCAG Failure : 2.4.3.
Expected result : The focus should reach to the chat box after navigating from + button(new chat). .
Actual result : The Focus is moved to menu 'Search tabs menu button subMenu'

Attachments :

Focus.order.fails.mp4

nazam100 · 2021-11-03T13:22:55Z

Accessibility Issue : Incorrect Focus order through messages is reversed bottom-to-top.
WCAG Failure : 2.4.3.
Expected result : The focus should follow the standard reading order of top-down, left-to-right.
Actual result : All of the elements in the chat window are focused in reverse order (bottom-up, left-to-right), making keyboard navigation very confusing. The same occurs with the reading order and scroll direction when the container has many messages (down moves up, up moves down).

Attachments :

Focus.order.fails.from.top.to.bottom.mp4

nazam100 · 2021-11-03T13:40:42Z

Accessibility Issue : "+" (plus), 'Emoji', 'Send' Buttons has wrong button role, state not announced. Similar to the bug #5677.
WCAG Failure : 4.1.2
Expected result : The buttons are not a regular buttons. It functions as a '+'(plus), Emoji', 'Send' Buttons and should announce as such with a collapsed/expanded state. i.e. '+'Button, Emoji' button, 'Send' Button.
Actual result :No '+' (plus). Emoji' button, 'Send' button role or state is announced. Only a Clickable role are announced without any further context.

Attachments :

name.role.vale.+.button.mp4

OSBotify · 2021-11-04T21:21:28Z

🚀 Deployed to production by @yuwenmemon in version: 1.1.13-2 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

akshayasalvi added 2 commits October 18, 2021 23:20

Added ellipses to reporting indicator for a long user name

2f0a3c1

Modified styling based on screen width

f7ab275

akshayasalvi requested a review from a team as a code owner October 18, 2021 18:38

MelvinBot requested review from NikkiWines and removed request for a team October 18, 2021 18:38

NikkiWines linked an issue Oct 18, 2021 that may be closed by this pull request

[HOLD for payment 2021-11-11] Chat - "Typing" isn't visible when someone from another account has longer email is typing #5623

Closed

NikkiWines assigned akshayasalvi Oct 18, 2021

parasharrajat suggested changes Oct 18, 2021

View reviewed changes

akshayasalvi added 3 commits October 20, 2021 00:30

Removed typing styles and added ellipses back

1c44269

Added flex shrink 0 for typing... text

19b76f9

Merge branch 'main' of github-personal:akshayasalvi/App into typing-i…

b1d1e64

…ndicator-ellipses

parasharrajat suggested changes Oct 19, 2021

View reviewed changes

Removed windowDimensions

642c07c

parasharrajat suggested changes Oct 19, 2021

View reviewed changes

Stretch email to take up space

b865cc6

akshayasalvi added 2 commits October 27, 2021 23:37

Modified logic for flex

ff10cfb

Removed unwanted code

add0f8c

NikkiWines requested changes Oct 29, 2021

View reviewed changes

parasharrajat previously approved these changes Oct 29, 2021

View reviewed changes

styling fixes

40bc376

akshayasalvi dismissed parasharrajat’s stale review via 40bc376 October 29, 2021 10:32

NikkiWines approved these changes Oct 29, 2021

View reviewed changes

parasharrajat approved these changes Nov 2, 2021

View reviewed changes

NikkiWines merged commit 6299f48 into Expensify:main Nov 2, 2021

OSBotify mentioned this pull request Nov 2, 2021

Deploy Checklist: New Expensify 2021-11-02 #6182

Closed

19 tasks

botify mentioned this pull request Nov 4, 2021

[HOLD for payment 2021-11-11] Chat - "Typing" isn't visible when someone from another account has longer email is typing #5623

Closed

akshayasalvi mentioned this pull request Nov 10, 2021

[HOLD for payment 2021-12-15] [$250] Attachment - If file name is too long, attachment preview is overflowing the modal - Reported by: @Santhosh-Sellavel #6157

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Typing indicator ellipses #5933

Typing indicator ellipses #5933

akshayasalvi commented Oct 18, 2021 •

edited

Loading

parasharrajat Oct 18, 2021

akshayasalvi Oct 19, 2021

parasharrajat Oct 19, 2021

NikkiWines Oct 29, 2021

parasharrajat Oct 18, 2021

parasharrajat Oct 18, 2021

parasharrajat Oct 18, 2021

akshayasalvi commented Oct 19, 2021

parasharrajat Oct 19, 2021

parasharrajat left a comment •

edited

Loading

akshayasalvi commented Oct 20, 2021

parasharrajat commented Oct 22, 2021

akshayasalvi commented Oct 25, 2021 •

edited

Loading

akshayasalvi commented Oct 27, 2021

parasharrajat commented Oct 28, 2021

NikkiWines left a comment

NikkiWines Oct 29, 2021

NikkiWines Oct 29, 2021

parasharrajat left a comment

akshayasalvi commented Oct 29, 2021

NikkiWines left a comment

NikkiWines commented Nov 1, 2021

OSBotify commented Nov 2, 2021

OSBotify commented Nov 3, 2021

nazam100 commented Nov 3, 2021

nazam100 commented Nov 3, 2021

nazam100 commented Nov 3, 2021

OSBotify commented Nov 4, 2021

Typing indicator ellipses #5933

Typing indicator ellipses #5933

Conversation

akshayasalvi commented Oct 18, 2021 • edited Loading

Details

Fixed Issues

Tests

QA Steps

Tested On

Screenshots

Web

Mobile Web

Desktop

iOS

Android

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

akshayasalvi commented Oct 19, 2021

Choose a reason for hiding this comment

parasharrajat left a comment • edited Loading

Choose a reason for hiding this comment

akshayasalvi commented Oct 20, 2021

parasharrajat commented Oct 22, 2021

akshayasalvi commented Oct 25, 2021 • edited Loading

akshayasalvi commented Oct 27, 2021

parasharrajat commented Oct 28, 2021

NikkiWines left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

parasharrajat left a comment

Choose a reason for hiding this comment

akshayasalvi commented Oct 29, 2021

NikkiWines left a comment

Choose a reason for hiding this comment

NikkiWines commented Nov 1, 2021

OSBotify commented Nov 2, 2021

OSBotify commented Nov 3, 2021

nazam100 commented Nov 3, 2021

nazam100 commented Nov 3, 2021

nazam100 commented Nov 3, 2021

OSBotify commented Nov 4, 2021

akshayasalvi commented Oct 18, 2021 •

edited

Loading

parasharrajat left a comment •

edited

Loading

akshayasalvi commented Oct 25, 2021 •

edited

Loading