[CLOSED] For visual review only: visual design of file working set

[core-ai-bot]

Issue by tvoliter Thursday Jan 05, 2012 at 02:51 GMT Originally opened as https://github.com/adobe/brackets/pull/44

---

Note: this pull request is for visual review only, so please don't commit to master.

Also, please don't spend time reviewing the code yet as I haven't cleaned up the css. Right now I am just asking for feedback on the visual design of file working set area. Since Peter is still working on the model code, this change has some hard coded data in order to visual the css and basic interactions.

Changes:

• left file nav now has two top level nodes "workspace" and "project files". The disclosure triangle toggles visibility. Right now separate css rules make this flat list look like the tree below. We may want to consider using the tree since it would be easier to keep the appearance of each area in sync. The font and padding match. Hover paints the background in blue. The first item is "opened" so it is painted with a darker blue gradient
• right now the project files area scrolls, but the workspace does not
• the rollover "x" to close files is not yet implemented
• I still need to tighten up the space around the

  ---

  and make the

  ---

  taller

---

tvoliter included the following code: https://github.com/adobe/brackets/pull/44/commits

[core-ai-bot]

Comment by njx Thursday Jan 05, 2012 at 19:32 GMT

---

We'll definitely be changing all this once we get some real XD input, so I don't want to spend a bunch of time tweaking this, but here are some things we should do to make what we have look a little better.

• I think "Workspace" is a little confusing. Maybe we should just call this "Open Files".
• The padding of the selection is inconsistent--the left edge of the highlight butts right up against the edge of the text. There should be a little padding to the left, as in the project files case. But the real fix is to make the selection highlight extend across the entire width of the panel. There's a backlog item to do this for the tree, but maybe we could go ahead and just do it for the open file list now.
• The selected item's text color should be white, not black.
• The items in each section should be indented slightly to the right, both so that the items start to the right of the heading text (right now the labels of the items under "Project Files" are actually slightly to the left of the "Project Files" header text), and so that the disclosure triangles for the folders in the Project Files section aren't at the same level as the top-level section disclosure triangles. I don't think they should be indented a full width in, just enough that it's obvious that they're a separate level from the top disclosure level.

I can make a little mockup if it would help--let me know.

[core-ai-bot]

Comment by chrisbank Thursday Jan 05, 2012 at 19:39 GMT

---

FWIW, I think the HR could be a little more prominent. The margin at the end of the list might also be a little much so the of the open files isn't so far from the start of the next panel.

[core-ai-bot]

Comment by njx Thursday Jan 05, 2012 at 19:47 GMT

---

Yes, the HR needs to look etched--it should be a dark line with a light shadow--and it should probably go all the way across the panel. Perhaps instead of using an HR, you could implement it by creating a bottom 1px gray border on the box containing the open file list (use the same gray as the thin line on the right that separates the file list from the code editor), and then add a 1px vertical white box-shadow with no blur.

[core-ai-bot]

Comment by peterflynn Thursday Jan 05, 2012 at 22:22 GMT

---

• I would suggest we make the "Workspace" and "Project Files" headings look more like headers rather than tree nodes, since they're not really selectable items themselves. (It'd also be nice if the entire region was clickable for expand/collapse instead of just the triangle).
  
  If we do that then we might not need the HR anymore. (Although in Espresso the headings look header-like but still use an HR rather than a full background to differentiate them).
• I'd also argue for something different from "Workspace" as the label, if only because that's the same exact terminology that Espresso uses.
• The scrolling/resizing behavior is probably not quite what we'd want... we still need to work out what the right behavior is, though.

[core-ai-bot]

Comment by tvoliter Thursday Jan 05, 2012 at 22:42 GMT

---

Thanks for your feedback guys. I have incorporated most of the fixes and will have an update out shortly.

[core-ai-bot]

Comment by njx Friday Jan 13, 2012 at 23:16 GMT

---

There seem to be two image files, brackets-sprite.png, and brackets-sprites.png. Also, the transparency on the icons is wrong, so they look bad against the selected item background.

[core-ai-bot]

Comment by njx Friday Jan 13, 2012 at 23:21 GMT

---

It's a little weird to have the "Open Files" list (with the expando arrow pointing down) when there's no open documents. Espresso solves this by having some informational text there when the list is empty. I wonder if we should consider hiding the Open Files header entirely when there are no open files, or adding "No open files" underneath it in a grayish colorwhen it's empty.