Skip to content

Research: Topcoat

Garth Braithwaite edited this page · 6 revisions
Clone this wiki locally

Research task to determine the set of work required to enhance and standardize the Brackets user interface with Topcoat.


  • Plan interface design and implementation work.
  • Develop multiple stories to complete interface work.

Working prototype of Topcoat design applied

Topcoat Parity Branch

I did minimal changes to js - here are the remain changes that need to be made.

Project Panel:

  • The triangle on the selected state in the project panel does not show up when the selected file is the final item in the list.
  • The resizing works on the panel, but the resizer needs to be adjusted so it changes the padding of the #content div on resize.


  • Icons should be 16x16.


  • Clickable items need to be distinct from informational ones. I put a border around the currently interactive parts to make it slightly more button like.

Bottom Panel:

  • The panels are still in the #content div, it isn't hard to move it out, but the resizer needs to be adjusted again to resize padding the #content div based on the panel height.

Audit components needed from Topcoat components

Here's what we need now:

  • Modal dialogs (currently no design, no styles)
  • Buttons
  • Panels both bottom and right side (currently no design, no styles)
  • Text input
  • File Tree (or just a tree in general)
    • Collapsable
    • Nested elements

Soon we'll need:

  • Form inputs when we get to preferences:
    • Checkbox (current there is an intial design, no styles)
    • Select
    • Text area (currently no styles)
    • Radio (currently there is an initial design, no styles)
  • Breadcrumbs (currently there is an initial design, no styles)

Assess the dependency on Bootstrap

In progress.

Identify opportunities for animation.

  • Animate inline editor open and close
  • Animate file tree open close
Something went wrong with that request. Please try again.