Teun / git-flow-vis

81 stars 12 forks source link

UI refactoring #50

Open remie opened 7 years ago

remie commented 7 years ago

There are a couple of improvements that can be done regarding the UI:

  1. Switch to a container-based solution for left & right panels (with gutter)
  2. Change commit message divs to a single commit message table in right panel
  3. Cleanup UI in terms of overview: move branch labels to float:right position in the message column, use ellipsis to cut of text overflow in message column, rearrange table columns
  4. Remove table & graph backdrop highlighting on commit message hover and replace it with a more subtle highlight of the single commit in the graph (for instance by filling the commit circle with a color and opaqueness of other commits).
  5. Minor styling improvements (are more subtle gutter line, a more subtle message table, etc)

In addition, an API for the UI/UX can be introduced which allows:

  1. An "embedded: true|false" option which will disable all of the default UI/UX when set to true (except for the gutter)
  2. Override of the table row rendering of messages (to allow custom HTML markup)
  3. The ability to add custom css classes to important elements, such as the commit table, the graph, etc.

In addition, we should consider if we want to keep the AUI styling in the default CSS. If so, it might be better to simply include the AUI packages from NPM instead of copying the CSS styling. That will allow us to keep up to date with AUI styling.