[CLOSED] Improve working-set context menu UI/UX

[core-ai-bot]

Issue by artoale
Monday Nov 25, 2013 at 21:07 GMT
Originally opened as adobe/brackets#6107

---

This commit refers to issue #6012
It rearrange items whitin the working sets and move all those related
to "sorting" to a new drop down menu accessible through a new cog
button in the working set header

---

artoale included the following code: https://github.com/adobe/brackets/pull/6107/commits

[core-ai-bot]

Comment by artoale
Monday Nov 25, 2013 at 21:12 GMT

---

@Cocoa-Coder, what do you think? I've used the cog, as suggested by@larz0 and a position absolute pushed to the right to have a consistent UI when the bar is resized and small...seems reasonable?
Let me know

[core-ai-bot]

Comment by artoale
Monday Nov 25, 2013 at 22:27 GMT

---

A couple of screenshot to show the UI
Note: the hovered cog icon has the same "silent" styling as the recent-project drop-down button

[core-ai-bot]

Comment by larz0
Monday Nov 25, 2013 at 22:52 GMT

---

Wow nice. Could you try and make the cog smaller (try 13px) so that it's not larger than the "Working Files" text. Hope that makes sense. Thanks@artoale ~

[core-ai-bot]

Comment by artoale
Monday Nov 25, 2013 at 22:57 GMT

---

Here we go :)

[core-ai-bot]

Comment by artoale
Monday Nov 25, 2013 at 23:11 GMT

---

@Cocoa-Coder thanks for the comments! I've just pushed the updated code...since I'm not particularly good in UI/design/CSS any correction is much appreciated!

[core-ai-bot]

Comment by MentalGear
Monday Nov 25, 2013 at 23:14 GMT

---

Looking good !

• Only the icon needs to be aligned with the Working Files text.
• Also I would change opacity when hovered/active vs. normal.
• I think the context menu should have an arrow, else it seems too much disconnected
• As I suggested earlier, the 3 line menu icon might be a better fit. At least I do see a cog for deeper settings then ordering. Also it's more subtile.

I do the CSS corrections myself in a few hours (once I am free).
Good Job ! Glad you joined to help ! :)

Btw: Can you explain what you mean with: silent styling as the recent-project drop-down button ?

[core-ai-bot]

Comment by artoale
Monday Nov 25, 2013 at 23:25 GMT

---

"silent" was intended to mean "quiet" in topcoat terminology (there's no
border until the item is hovered)
For the icon alignment, if you can help me a little on that would be great
:)
Opacity is done as said :)
For the arrow and icon element, I did it like this because one of last
comment of@larz0 on issue #6012 (which, for some reason, I cannot open
anymore, I get a 404). I personally don't like the arrow much, mostly
because it breaks the look&feel across the app (no arrow anywhere), but
that's just my idea, we can add it if required! For the cog/hamburger
icon...well, the latter is typically used for app-wise menus and this one
is not...but again, small work to change it if we want!

2013/11/26 Cocoa-Coder notifications@github.com

Looking good !

• Only the icon needs to be aligned with the Working Files text.
• Also I would change opacity when hovered/active vs. normal.
• I think the context menu should have an arrow, else it seems too
  much deconnected
• As I suggested earlier, the 3 line menu icon might be a better fit.
  At least I do see a cog for deeper settings then ordering. Also it's more
  subtile.

I do the CSS corrections myself in a few hours (once I am free).
Good Job ! Glad you joined to help ! :)

Btw: Can you explain what you mean with: silent styling as the
recent-project drop-down button ?

—
Reply to this email directly or view it on GitHubhttps://github.com/adobe/brackets/pull/6107#issuecomment-29252599
.

Alessandro Artoni

artoale.com

[core-ai-bot]

Comment by artoale
Tuesday Nov 26, 2013 at 12:35 GMT

---

Thanks, I'll fix these as soon as I get home

[core-ai-bot]

Comment by pthiess
Tuesday Nov 26, 2013 at 18:38 GMT

---

@JeffryBooher to track

[core-ai-bot]

Comment by peterflynn
Wednesday Nov 27, 2013 at 00:55 GMT

---

Re #6012 disappearing: I have no idea what happened to it either, so fwiw I've pinged GitHub support. Once or twice in the past we've hit some sort of "stale cache" GH bug that lead to missing query results, but this seems different...

[core-ai-bot]

Comment by artoale
Wednesday Nov 27, 2013 at 20:47 GMT

---

@peterflynn, I've added tests for the new ContextMenu.prototype.isOpen method, but I'm quite sure you mean to test something else too...can you please specify what (and, if possible, in which spec file I should put them?)
Cheers

[core-ai-bot]

Comment by peterflynn
Thursday Nov 28, 2013 at 00:10 GMT

---

@artoale I meant more hand-testing the UI to make sure the behavior of Recent Projects vs. this new dropdown don't feel too inconsistent with each other. Given that the implementations are very different, there could easily be some subtle differences in behavior. As long as they're subtle that seems ok.

I would look at things like the rollover state and popup styling, how they behave as the sidebar is resized smaller, which actions close vs. don't close the popup, how the menu items are styled and formatted (including on rollover), etc.

One difference worth noting: I know a bunch of work went into making the Recent Projects dropdown keyboard-accessible. But most of our other popup menus are not keyboard-accessible (in fact they generally don't even take focus), so I wouldn't worry about replicating that behavior here...

[core-ai-bot]

Comment by artoale
Thursday Nov 28, 2013 at 00:15 GMT

---

Definitely make sense... I'll try to test this as much as I can and
fix/discuss/document eventual inconsistence.
Cheers
On Nov 28, 2013 1:11 AM, "Peter Flynn" notifications@github.com wrote:

@artoale https://github.com/artoale I meant more hand-testing the UI to
make sure the behavior of Recent Projects vs. this new dropdown don't feel
too inconsistent with each other. Given that the implementations are very
different, there could easily be some subtle differences in behavior. As
long as they're subtle that seems ok.

I would look at things like the rollover state and popup styling, how they
behave as the sidebar is resized smaller, which actions close vs. don't
close the popup, how the menu items are styled and formatted (including on
rollover), etc.

One difference worth noting: I know a bunch of work went into making the
Recent Projects dropdown keyboard-accessible. But most of our other popup
menus are not keyboard-accessible (in fact they generally don't even
take focus), so I wouldn't worry about replicating that behavior here...

—
Reply to this email directly or view it on GitHubhttps://github.com/adobe/brackets/pull/6107#issuecomment-29430721
.

[core-ai-bot]

Comment by peterflynn
Thursday Nov 28, 2013 at 00:18 GMT

---

No need to go overboard with the fixes, it's just a good idea to test and make note of anything... if it's just little things they probably don't need to get addressed yet.

[core-ai-bot]

Comment by artoale
Thursday Nov 28, 2013 at 00:20 GMT

---

Even better :-)
On Nov 28, 2013 1:19 AM, "Peter Flynn" notifications@github.com wrote:

No need to go overboard with the fixes, it's just a good idea to test and
make note of anything... if it's just little things they probably don't
need to get addressed yet.

—
Reply to this email directly or view it on GitHubhttps://github.com/adobe/brackets/pull/6107#issuecomment-29431073
.

[core-ai-bot]

Comment by artoale
Thursday Nov 28, 2013 at 19:07 GMT

---

I've testing this feature for a while...and it seems to me that the only behavioral difference w.r.t the Recent Project extension is the key binding behavior. The context menu doesn't get focus therefore it's not keyboard-accessible.

Apart from that, they both close much on every click (with a small exception being that the X for closing a recent project doesn't close the dropdown. Moreover, they both close when ESC is pressed.

[core-ai-bot]

Comment by MentalGear
Thursday Nov 28, 2013 at 23:18 GMT

---

Some people expressed reservations about the new "Arrange Menu" because it would be a different style than the "Recent Projects" Menu.

So for standardizing menus, here's a version of the recent files menu, with the new style applied.

Other visual "connections" between icon and menu are also possible as seen in adobe/brackets#6012 (comment)

But I have to say, imo, no matter which one you favor, there should be a connection. ( or it may look like a context menu from windows 98 )

[core-ai-bot]

Comment by artoale
Friday Nov 29, 2013 at 00:11 GMT

---

In my opinion the triangle is very oldish, while the plain dropdown is much
cleaner... I kinda like the second version you proposed (second on the left
in the big screenshot) but, to be completely honest...I don't see what's
wrong with the no-triangle no-anything-else that we have now... Again,
that's only my vision and I'm definitely not strong with that :-)
For the recent project style consistency, well... It looks fine... But at
the same time the current UI seems more logical: in recent project we want
to "change" the project itself, not configure something... So it make sense
for the project name to be the button. Is it this bad for the UI to be
different? They target different kind of action and as long as the look and
feel is still maintained I think we don't need to make them identical.
That said, let me know what to do with the PR... Should I try to modify the
Recent Project according to@Cocoa-Coder mockup? Add the triangle?
Something else :-)
On Nov 29, 2013 12:19 AM, "Cocoa-Coder" notifications@github.com wrote:

Some people expressed reservations about the new "Arrange Menu" because it
would be a different style than the "Recent Projects" Menu.
So for standardizing menus, here's a version of the recent files menu,
with the new style applied.
[image: recent-files]https://f.cloud.github.com/assets/2837147/1641892/eaf44fd0-5868-11e3-9ab7-e9019d3ee74c.png

Other visual "connections" between icon and menu are also possible as seen
in #6012 (comment)adobe/brackets#6012 (comment)

But I have to say, imo, no matter which one you favor, there should be a
connection. ( or it may look like a context menu from windows 98 )

—
Reply to this email directly or view it on GitHubhttps://github.com/adobe/brackets/pull/6107#issuecomment-29489038
.

[core-ai-bot]

Comment by larz0
Friday Nov 29, 2013 at 17:14 GMT

---

@Cocoa-Coder we don't use triangles for drop-down menus but we do use it for popovers and tooltips. I don't think we need to change how recent project drop-down works because it's more elegant right now.

[core-ai-bot]

Comment by artoale
Monday Dec 02, 2013 at 20:23 GMT

---

@TomMalbran, just to be sure I've got what you meant :) 8eb67f4 is a super-basic refactoring of the event handling registration. Does it look reasonable?

[core-ai-bot]

Comment by TomMalbran
Monday Dec 02, 2013 at 20:33 GMT

---

@artoale Yes, something as simple as that is what I was thinking about. We could then see if that new function works for the Recent Projects menu.

[core-ai-bot]

Comment by artoale
Monday Dec 02, 2013 at 21:29 GMT

---

I was considering this more in details...well, it's not super straightforward: I think that, if we really want to refactor the recent project plugin to use this helper, we should consider a more in depth refactoring because:

1. Context menu are shown/hidden while recent project menu gets destroyed/recreated every time (this implies that, in the current code, there's quite some code for registering/deregistering event handlers)
2. The currently, the whole open/close logic for Context Menus is handled by context menu specific method and scenarios (e.g., in Menu.js, the closeAll method removes the "open" class for every ".dropdown" elements - which depends on ContextMenu template and is not compatible with the Recent Project template. (which, besides, has still to register different event listener)

long story short...it seems to me that refactoring Recent Project with this simple function creates more confusion and doesn't actually reduce code duplication: it requires in fact an adapter that provides a ContextMenu-compatible interface for RecentProject and we should still do a lot of manual event handling registration/registration. Moreover, since we don' t share neither the markup nor the hide/show logic, it will all results in a hackish solution rather than a more clean code.

[core-ai-bot]

Comment by TomMalbran
Monday Dec 02, 2013 at 21:45 GMT

---

I am not talking about refactoring the entire code in the Recent Projects initialization, just use this function for the part that creates the menu and places it under the project name.

[core-ai-bot]

Comment by artoale
Monday Dec 02, 2013 at 21:49 GMT

---

Yes, I know...what I'm saying is that, by trying to do that, it looks more like a hack than a good reuse practice :) I' push soon a basic implementation and let you see what I mean :)

[core-ai-bot]

Comment by artoale
Thursday Dec 12, 2013 at 01:08 GMT

---

ping :)

[core-ai-bot]

Comment by TomMalbran
Thursday Dec 12, 2013 at 01:17 GMT

---

Oh, sorry. We don't get mails when a new commit is done, so is better to add a reply after you add a comit and want feedback.

That looks great, and was what I thought that we could refactor, just the opening and cloing using the mouse. If we find other stuff later that both codes share, we can refactor those later too.

[core-ai-bot]

Comment by artoale
Thursday Dec 12, 2013 at 20:01 GMT

---

Here we go :)

[core-ai-bot]

Comment by artoale
Thursday Feb 06, 2014 at 16:15 GMT

---

ping!

[core-ai-bot]

Comment by JeffryBooher
Friday Feb 28, 2014 at 01:29 GMT

---

@artoale can you merge master into this branch so I can look at this and merge it this week? Thanks!

[core-ai-bot]

Comment by artoale
Friday Feb 28, 2014 at 01:48 GMT

---

Yup, sure! I'll try to rebase it tomorrow night!@peterflynn, do you need it to be squashed too?