Improve web IDE commit input: Phase 2

With gitlab-ce#44832 we improved the existing web IDE commit input by highlighting the characters that exceed the recommended line length.

In order to make it easier to edit commit messages, we should add an Expaded mode.

Proposal

We add an Expand button to the header of the commit box.

web-ide-commit__blank--collapsed

When the button is clicked, a new file tab is opened with the name Commit message. This tab will not have a status icon, only a close button.

In the editor view, we add a line at 72 characters width.

The last line of the file editor is not enabled for text entry because it displays the following tip:

Tip: Keep the subject line under 50 characters and wrap the body at 72

The commit controls are moved from the sidebar to a bottom panel below the file editor. A new Collapse button is added to the top-right corner.

web-ide-commit__blank--expanded

When line length exceeds 72 characters, the same $orange-200 highlight from gitlab-ce#44832 is added to the overflowing characters.

For the subject line, the highlight is added after 50 characters.

web-ide-message--expanded

Additional details

There should be tooltips on the Expand and Collapse buttons

Expand Collapse
web-ide-commit__blank--collapsed-tooltip web-ide-commit__blank--expanded-tooltip
Edited Apr 14, 2018 by Chris Peressini
Assignee Loading
Time tracking Loading