Enhance site position avatar UI/UX for RFC-001 #332

jasonrudolph · 2018-03-06T19:13:51Z

Description of the Change

This pull request updates the site position avatars in support of #268.

#286 explored various designs, and this pull request implements the design described in the last mockup in #286 (comment):

Verification Process

TODO

Render all site position avatars in the bottom right of the portal pane item
If user is viewing a non-portal pane item, adjust opacity of avatar (e.g., see right-most avatar in this mockup)
Gracefully handle a large number of participants (e.g., Distinguishing between users [from question in RFC-001] #286 (comment))
Define a Verification Process above and execute it
Merge Identify sites with no active editor proxy when relaying position info teletype-client#54, publish a new release of teletype-client, and update teletype to depend on that new version
~~Add padding to avoid covering the last few lines~~ UPDATE: See Enhance site position avatar UI/UX for RFC-001 #332 (comment)

Applicable Issues

Closes #268.
Closes #286.

We're working toward the last mockup shown in #286 (comment).

Prior to this change, we rendered three different site position components (upper right, middle right, and lower right), and a participant's location in the current file determined which site position component they appeared in. This seemed like useful behavior when we were first designing the Teletype UI, but in practice, this behavior isn't useful enough to justify the complexity. With the changes in this commit, we now render a single site position component in the lower right corner of the active text editor, and we show all site participant avatars in that component.

This is an initial step toward the design shown in #286 (comment).

jasonrudolph · 2018-03-06T20:07:21Z

styles/teletype.less

+    .icon-link {
+      position: absolute;
+      padding-left: 28px;
+      padding-top: 28px;


@simurai: I really dig the what the link icon appears in your mockup:

This pull request currently hacks in a pretty rudimentary implementation:

Would you be willing to update the styling to match your mockup? You can feel free to push directly to this branch.

Added an extra pseudo element as cover:

simurai · 2018-03-07T07:18:35Z

Add padding to avoid covering the last few lines

This seems harder than it sounds. I tried adding padding-bottom: 70px to some elements, but most things in the editor are absolute positioned. I think it needs the same mechanic like the "Scroll Past End" setting. That one increases the height of .lines and parent container. So if there isn't an easy solution, I would say we can punt on this for now. Like in case somebody runs into the problem that the avatars cover some code, they can:

Just add a few extra lines
Resize the window
Enable "Scroll Past End"

Not the best experience, but also not unsolvable and there are other higher priorities.

simurai · 2018-03-07T07:45:07Z

Gracefully handle a large number of participants (e.g., Distinguishing between users [from question in RFC-001] #286 (comment))

Any thoughts on the gracefulness? Currently participants just get cut off when there is not enough space:

Maybe already fine? Otherwise we would start optimizing for the 0.1%, if this chart is still accurate.

In the rare case where there are so many participants that we can't fit all of their avatars horizontally across the bottom of the editor pane item, we'll simply hide the avatars that overflow. See #332 (comment).

For now, we're not going to render avatars differently for participants that are in the same editor that you're viewing versus participants that are in a different editor than the one you're viewing.

jasonrudolph · 2018-03-07T14:38:11Z

@simurai: Thanks for these updates! I asked for help with one thing, and you took the time to help with 3 things. 😻

One follow-up request: In my testing, the link icon seems to render well when the using a font size of 14 or smaller. When I increase the font above 14, the link icon's position gets distorted. (See examples below.) Can you push up some changes to fix this issue or offer some tips for how I can go about fixing it?

14-point font

15-point font

20-point font

Prior to this commit, if a site was viewing a non-portal pane item (e.g., the Atom "Settings" tab), the SitePositionsComponent did not show the site's avatar. If you know that a given person is in the portal, it can be confusing to not see their avatar in the SitePositionsComponent. With the changes in this commit, the SitePositionsComponent will now show the avatars for *all* sites. If a site is viewing a non-portal pane item, the SitePositionsComponent gives the avatar a lighter opacity to distinguish it from the avatars of sites that are currently viewing an editor associated with the portal. As part of this change, this commit consolidates SitePositionsController and SitePositionsComponent into one class: SitePositionsComponent.

jasonrudolph · 2018-03-07T21:48:51Z

I originally included this as something we might do in this pull request:

Maybe: Show tooltip when hovering over an avatar (e.g., "Follow @as-cii to foobar.cpp:34")

I still like the idea, but this pull request already involves quite a few changes, and this ☝️ would make sense as a standalone enhancement that we address in a future pull request. So, I've removed this task from the list of TODOs in the pull request body.

simurai · 2018-03-08T01:35:51Z

One follow-up request:

Ohh.. right. Good catch. Ok, it's now locked to a fixed font size:

I still like the idea

I also like that idea. Next to telling what clicking does, it's also a reminder who it is, in case you're not familiar with the avatar.

jasonrudolph · 2018-03-08T12:49:40Z

Good catch. Ok, it's now locked to a fixed font size...

Thanks, @simurai. ⚡🙇💟

@as-cii

/cc @as-cii

@as-cii

/cc @as-cii

xmsid · 2018-03-23T16:17:31Z

The "Link" icon that appears next to a followed collaborator looks weird on my side

I tried different UI/Syntax themes but it still looks like this. is this intended to look like that?

winstliu · 2018-03-23T18:06:28Z

@xmsid I think what you're seeing was fixed in #351 so it should be in a future Teletype release.

xmsid · 2018-03-23T18:58:09Z

@50Wliu yeah, I checked that issue it's the same as mine, I'm really looking for more future releases :).

jasonrudolph · 2018-03-23T21:33:44Z

I'm really looking for more future releases :).

@xmsid: Awesome. Stay tuned. 😄

rsanheim · 2018-03-28T14:39:24Z

Awesome work y'all! ✨

jasonrudolph added 4 commits March 6, 2018 13:57

Update RFC-001 to reflect current thinking re: site position avatars

1091f3a

We're working toward the last mockup shown in #286 (comment).

Remove obsolete scroll/resize logic

4ac5f00

Render link icon at bottom right of avatar

5378fcf

This is an initial step toward the design shown in #286 (comment).

jasonrudolph commented Mar 6, 2018

View reviewed changes

jasonrudolph mentioned this pull request Mar 6, 2018

[Tracking] RFC-001: Allow guests to collaborate on multiple remote buffers #268

Closed

7 tasks

Add background cover to SitePositionsComponent-site icon

d3ece73

Hide overflowing avatars

480e390

jasonrudolph added 3 commits March 7, 2018 07:52

Remove limit on number of site position avatars displayed

18aa95e

In the rare case where there are so many participants that we can't fit all of their avatars horizontally across the bottom of the editor pane item, we'll simply hide the avatars that overflow. See #332 (comment).

Remove obsolete TODO item

7fcfaf8

For now, we're not going to render avatars differently for participants that are in the same editor that you're viewing versus participants that are in a different editor than the one you're viewing.

Improve positioning of link icon

951e739

jasonrudolph mentioned this pull request Mar 7, 2018

Identify sites with no active editor proxy when relaying position info atom/teletype-client#54

Merged

jasonrudolph requested a review from as-cii March 7, 2018 21:50

jasonrudolph changed the title ~~[WIP] Enhance site position avatar UI/UX for RFC-001~~ Enhance site position avatar UI/UX for RFC-001 Mar 7, 2018

Lock link icon to a fixed font size

a7d2933

Disable mouse on the icon

756cfba

jasonrudolph added 5 commits March 8, 2018 07:51

Update RFC-001's status to "implemented"

60f093d

⬆️ teletype-client & teletype-server

7191c62

🔥 Remove dead code

67d72f1

/cc @as-cii

🔥 Remove nonessential visible property from SitePositionsComponent

3ae566e

/cc @as-cii

Merge branch 'master' into better-site-position-avatars

ff66694

jasonrudolph merged commit b9268e5 into master Mar 8, 2018

jasonrudolph deleted the better-site-position-avatars branch March 8, 2018 16:21

jasonrudolph mentioned this pull request Mar 8, 2018

Distinguishing between users [from question in RFC-001] #286

Closed

as-cii mentioned this pull request Mar 20, 2018

Icon not displayed correctly when following another user #345

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Enhance site position avatar UI/UX for RFC-001 #332

Enhance site position avatar UI/UX for RFC-001 #332

jasonrudolph commented Mar 6, 2018 •

edited

Loading

jasonrudolph Mar 6, 2018

simurai Mar 7, 2018

simurai commented Mar 7, 2018

simurai commented Mar 7, 2018

jasonrudolph commented Mar 7, 2018

jasonrudolph commented Mar 7, 2018

simurai commented Mar 8, 2018

jasonrudolph commented Mar 8, 2018

xmsid commented Mar 23, 2018

winstliu commented Mar 23, 2018

xmsid commented Mar 23, 2018

jasonrudolph commented Mar 23, 2018

rsanheim commented Mar 28, 2018

Enhance site position avatar UI/UX for RFC-001 #332

Enhance site position avatar UI/UX for RFC-001 #332

Conversation

jasonrudolph commented Mar 6, 2018 • edited Loading

Description of the Change

Verification Process

TODO

Applicable Issues

jasonrudolph Mar 6, 2018

Choose a reason for hiding this comment

simurai Mar 7, 2018

Choose a reason for hiding this comment

simurai commented Mar 7, 2018

simurai commented Mar 7, 2018

jasonrudolph commented Mar 7, 2018

14-point font

15-point font

20-point font

jasonrudolph commented Mar 7, 2018

simurai commented Mar 8, 2018

jasonrudolph commented Mar 8, 2018

xmsid commented Mar 23, 2018

winstliu commented Mar 23, 2018

xmsid commented Mar 23, 2018

jasonrudolph commented Mar 23, 2018

rsanheim commented Mar 28, 2018

jasonrudolph commented Mar 6, 2018 •

edited

Loading