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
I did minimal changes to js - here are the remain changes that need to be made.
- 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.
- 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)
- Panels both bottom and right side (currently no design, no styles)
- Text input
File Tree (or just a tree in general)
- Nested elements
Soon we'll need:
- Form inputs when we get to preferences:
- Breadcrumbs (currently there is an initial design, no styles)
Assess the dependency on Bootstrap
Identify opportunities for animation.
- Animate inline editor open and close
- Animate file tree open close