Page MenuHomePhabricator

Build icon-based room switcher for persistent chat pane
Closed, ResolvedPublic

Assigned To
Authored By
btrahan
Feb 26 2015, 12:28 AM
Referenced Files
F337220: pasted_file
Mar 13 2015, 10:42 PM
Unknown Object (File)
Feb 26 2015, 2:11 AM
F273855: persistent_v2.png
Feb 26 2015, 12:28 AM
F319556: Screen_Shot_2015-01-23_at_3.52.10_PM.png
Feb 26 2015, 12:28 AM

Description

Screen_Shot_2015-01-23_at_3.52.10_PM.png (910×996 px, 190 KB)

See them there little custom icons in a row? This task is about building that UI into the persistent chat pane. This icon row is always visible. Still to be defined - there should be specific behaviors to these icons when e.g. a new chat message is received.

This task related to T7025 because eventually these could be the "pinned" conpherences. For now though, they should just be the most recent link in the notification pane.
This task is blocked by T7014 since it is UI that appears inside that other UI.

Related Objects

Event Timeline

btrahan claimed this task.
btrahan raised the priority of this task from to Normal.
btrahan updated the task description. (Show Details)
btrahan added a project: Conpherence.
btrahan updated the task description. (Show Details)
btrahan added a subscriber: btrahan.

My expectation is that this row is always visible and there is no down arrow.

To me, a big part of the value here (vs a dropdown) is that we can use it to indicate that there's activity in a room (by making the border light up, or putting a star on the icon, or making it bounce). We can't do that if it's hidden.

Cool, I dig it. Updated the specypoo.

Specifically, the driving use case is:

  • I'm active in #phacility and #pokemon.
  • I'm focused on #phacility (it is currently shown in my chatbar).
  • Someone in #pokemon says @epriestley: should I evolve my pikachu?

When this happens, I'd like:

  • Zero clicks to see which room there's activity in (i.e., a persistent element changes state in a way that indicates which room has activity, and possibly the kind of activity).
    • This is something like a bouncing icon or colored border.
    • Maybe there's a different color if my name was mentioned.
  • One click to see the activity (i.e., click a button which already exists).

I think this is table stakes for a chat client. Obviously we can't have every thread you're a part of always visible, but we can figure out the rules for which ones are visible later and presumably get enough of them visible that everyone's happy with the coverage.

Post D12037 we have an icon based room switcher that is just the latest 6 conpherences. The UI is not pixel perfect to the mocks - accepting feedback and diffs...! :D

With my current stab at the design, I think we could fit a 7th icon which could just be "View More" and take you to Conpherence real view (we can even select the 7th conpherence)? Does that sound good?

What else is needed here before T7025, which would theoretically change the Nth icon from "View More" into something about editing pinned conpherences? I'd like to identify what needs to be done for this little UI piece to be resolved in advance of that.

I think making the 7th icon a fixed "more" (or maybe eventually a dropdown) makes a ton of sense.

Let me poke at this a bit locally...

Sounds good - I got some domestic stuff to take care of for a bit and probably won't be able to make more code progress today anyway.

@chad - do you have any thoughts on this 7th button before I build it? What should this be before T7025?

I'm thinking the "more" thing... Its going to be a right caret ">" in with a little border on it, which when you click it just takes you to main conpherence on the 7th conpherence.

I have a mock somewhere I'll dig it up tonight

Were you able to locate the mockypoo?

Haha, I got stuck with baby too so Photoshop time has been 0. Ill spend 5 minutes now while she's distracted.

Basically, last menu item become a [ ] which drops down a menu that just looks like the other conpherence menu with the additional rooms.

pasted_file (399×423 px, 70 KB)

For a project we're working on in large part because its spec'd, this thing is wildly under-spec'd.

  • what does that search icon do?
  • suppose there are N conpherences. How are the N laid out between the icon bar, and this list? What if N is very large, like 10k or something?
  • how does this relate to T7025? can we spec this to be the bare minimum of features if T7025 is in scope to obviate this work?
  • If we had search, it would pull up that interface, but for now I'd ignore it. I just wanted to think about search if we did want it.
  • The main reason I see to have this menu is to notify you that you have a new message in a room that is not listed in the bar.
  • I roughly expect Pinned to get pre-pended on the list of Recent, so if you have 4 pins, the rest will be filled in with most recent. If you pin 10, then they start to fill up this dropdown menu. We should probably cap this though to only 5 or 10 as it gets clowny fast. We can cap it and have a 'Go To Conpherence' link if the user needs to explore all 10k of their threads.

I owe you additional mocks for the full interactions here, there some edge cases, like notification counts, that haven't been mocked out yet. I can take this task and pass it back when I have all the edges defined.

I'll take more spec here. :D Also, if you think we should just do pinned before this that works for me too.

Otherwise, I picked up some concrete buggy behaviors that need eradicating so I'll be working on those for a bit.

I'm going to re-express this as separate subtasks of T7572 since the remaining behaviors have different blockers.