Github: Improve Diff pane UI

Created on 30 May 2017 · 3Comments · Source: atom/github

Description

Here some brainstorming around the Diff (FilePatch) UI.

Problem

Currently it's quite hard to know if the Diff pane shows the unstaged or staged changes. There are the labels and titles, but the only difference is Uns vs S and takes some effort to process.

Also, there is the icon to switch to the other list, but that might add to the confusion. "Is this the current state or am I going to this state?"

design enhancement

Source

simurai

Most helpful comment

Option A

Show both icons. They can be used to toggle between the two lists:

diff-toggle

Also, the tab title just says: Diff (plus icon). So that it doesn't repeat the same thing twice. Alternative: Changes, but that could also be used for commit history later on.

Concerns

Split diffs #816 will also add one of these toggle buttons, which then muddies the water again.

simurai on 30 May 2017

👍6

All 3 comments

Option A

Show both icons. They can be used to toggle between the two lists:

diff-toggle

Also, the tab title just says: Diff (plus icon). So that it doesn't repeat the same thing twice. Alternative: Changes, but that could also be used for commit history later on.

Concerns

Split diffs #816 will also add one of these toggle buttons, which then muddies the water again.

simurai on 30 May 2017

👍6

Option B

Show both lists:

diff

Then it's like the file lists on the right. Also, seeing how lines move between lists helps to understand what's going on. "Don't worry, your changes are still there, just in that other bucket".