New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Display environment in which a commit originated #609

Closed
JanVoracek opened this Issue Jan 4, 2016 · 6 comments

Comments

Projects
None yet
3 participants
@JanVoracek
Copy link
Member

JanVoracek commented Jan 4, 2016

Since #459 VersionPress tracks the environment of each commit and provides it through the API. Now we should display it to the user.

@JanVoracek JanVoracek added this to the 2.2 milestone Jan 4, 2016

@JanVoracek JanVoracek modified the milestones: 3.0, 2.2 Jan 4, 2016

@borekb borekb changed the title Display environment in with commit originated Display environment in which a commit originated Jan 5, 2016

@borekb borekb added the size: m label Jan 20, 2016

@borekb

This comment has been minimized.

Copy link
Member

borekb commented Feb 10, 2016

We discussed a couple of UI options for this feature today:

  1. Use background color for the whole row. This has the problem that it either will be subtle and nice to look at but at the same time problematic for users with impaired vision, or it will be bold and ugly :) We will not go this route.
  2. Small text labels like in Gmail or Bitbucket. Probably between date and message columns.
  3. Similar to 2 but use colorful circles instead of text labels.
  4. Maybe the env. name and color could be combined, again, sort of like colored labels on Gmail
  5. Use a colorful vertical line at the beginning on the row, sort of like selected row in Gmail. Probably a bit less practical.

@vasek17 please try a couple of options.

@vasek17 vasek17 added the in progress label Apr 3, 2016

@vasek17

This comment has been minimized.

Copy link
Member

vasek17 commented Apr 3, 2016

I've tried couple of variants and need your feedback:

1. New text column

screen shot 2016-04-03 at 23 08 33

2. Tag-like

screen shot 2016-04-03 at 23 14 50

3. Tag-like with colors

screen shot 2016-04-03 at 23 13 51

4. Colorful circles at the beginning of the row

screen shot 2016-04-03 at 23 22 35

5. Colorful circles in the second column

screen shot 2016-04-03 at 23 23 26

(The environment name is set as the title attribute)
pfwgh8mrk1

6. Colorful circles at the message column

screen shot 2016-04-03 at 23 28 04

7. Dynamic colorful circles

w8izl0tlbd

8. Dynamic line at the beginning of the row

em8pkn7nsw

@borekb

This comment has been minimized.

Copy link
Member

borekb commented Apr 4, 2016

This is an excellent job, @vasek17!

The last implementation (no. 8) probably looks the coolest but can be a bit tricky when it comes to details, for example:

  • The hit targets would need to be large enough so that the hover-over feature is usable.
  • Should the line continue when you expand the row? How thick should the line be?
  • How will this behave on tablets and other mobile devices? Perhaps we can afford to ignore that for the moment but need to keep that in mind.

The circles are probably best reserved for small avatars of users, like on GitHub or in overv.io.

If we wanted a not-so-cool but simple and straightforward solution, no. 3 would work quite well I think. It's the best from 1..3.

Overall, I'd go for 8 even if some aspects of it might be slightly problematic. It looks really nice!

@borekb

This comment has been minimized.

Copy link
Member

borekb commented Apr 4, 2016

A couple of technical comments when I look at it:

  • Merge commits should have an env indicator too. We don't track it at the moment which I'll create an issue for. Edit: done. #848
  • Should the "current environment" (be it master or staging or whatever) have always the same color? For example, TortoiseGit always uses red for master which makes the orientation easier.
  • master is a slightly weird word for an environment – it's a branch. I've created an issue for it: #847.
  • The colors are random at the moment, right? In the future, it might be useful to construct the color based on the env name so that an environment would always get the same color. The combination of colors should also be pleasing to the eyes so this would be quite an interesting algorithm :)
  • Manual commits would not be visualized at the moment. Created an issue for it: #849
@vasek17

This comment has been minimized.

Copy link
Member

vasek17 commented Apr 4, 2016

The hit targets would need to be large enough so that the hover-over feature is usable.

Definitely. I will try to tune it (also with checkboxes from #201) for the best experience.

Should the line continue when you expand the row? How thick should the line be?

In my opinion it should be only in the first row. We can display the environment in the overview under the change informations.

How will this behave on tablets and other mobile devices? Perhaps we can afford to ignore that for the moment but need to keep that in mind.

In my opinion it would be sufficient to display color lines with environment name in the overview (after expanding the line).

Should the "current environment" (be it master or staging or whatever) have always the same color? For example, TortoiseGit always uses red for master which makes the orientation easier.

Actually, master has always the same (hardcoded) color, however I like @JanVoracek's idea to differentiate only commits from other environments.

The colors are random at the moment, right? In the future, it might be useful to construct the color based on the env name so that an environment would always get the same color. The combination of colors should also be pleasing to the eyes so this would be quite an interesting algorithm :)

I have a few colors (stolen from github 😄 ) with very easy cache so the same envs have the same colors through all pages. I will add some hash algorithm for choosing the same color for branch but it will never be perfect.
Another possible solution is to assign the colors for branches not for the current page but "globally" for the whole repo. (The oldest branch get the first color...)

@borekb

This comment has been minimized.

Copy link
Member

borekb commented Apr 4, 2016

Agree with almost everything, let's go for no. 8 then. It doesn't need to be 100% polished for VP 3.0, future enhancements are OK.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment