elementary / icons

Named, vector icons for elementary OS
https://elementary.io
GNU General Public License v3.0
550 stars 85 forks source link

Git-specific status icons #837

Open cassidyjames opened 4 years ago

cassidyjames commented 4 years ago

Also related to #827 but specifically for git statuses, i.e. in Files and Code

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/83826585-git-specific-status-icons?utm_campaign=plugin&utm_content=tracker%2F27377189&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F27377189&utm_medium=issues&utm_source=github).
aljelly commented 4 years ago

I had an idea for this, so I attempted it (probably a bit rough however):

emblem-added-curved-smaller-test svg

emblem-changed-small-slightly-darker-asterisk svg

I believe there's several advantages of using individual, generic glyphs for the statuses:

(...maybe these glyphs are too generic however?)

The idea for using the asterisk for the "changed" icon comes from the paradigm of programs prepending an asterisk to the filename in titles and tabs when there are unsaved changes to the file, Code does this if you have autosave disabled for example. So anyone familiar with this convention will probably know what it means.

For the changed icon I also used a very slightly darker shade than Banana 500 for the circle background, the reason for deviating from the palette slightly was to improve the contrast. I took saturation and hue into account.

SVGs [git-emblems.zip](https://github.com/elementary/icons/files/4169605/git-emblems.zip) Note: - I haven't baked in path effects (multiple rotation) - Haven't vacuumed the SVGs License is GPL3

I initially edited this from the "unreadable file" emblem, so initial versions had longer plus and asterisk glyphs (also the asterisk background here uses Banana 500):

Older versions ![emblem-added-flat svg](https://user-images.githubusercontent.com/10395308/74011265-4b3a2f00-497f-11ea-82f1-76b6a7ad1bf9.png) ![emblem-changed-larger-asterisk svg](https://user-images.githubusercontent.com/10395308/74011271-50977980-497f-11ea-9e5d-c3088f08bd76.png)

But I felt the asterisk looked... not good, so I shortened it, and then I did the same to the plus icon so it would match better.


If this is liked/deemed suitable in its current state, I can send a PR (and make 8px versions as well so that it can be viewed in smallest modes too, also see #872).

If you also want to add an emblem to represent removed files that haven't been committed, I can also make one for that (a red background with a cross, or maybe a bin...).

aljelly commented 4 years ago

Made a variant with a branch as well, if the above is too generic:

This is very rough draft just as a preview to get the drift of the branch concept. The curved branching line is not right, it might be too "busy" in its current state, maybe arrangement would be changed, maybe I'll try the plus smaller, etc.:

emblem-added-branch-version-test svg

Update:

emblem-added-branch-version-small-3 svg

emblem-added-branch-version-small-2 svg

emblem-added-branch-version-test-smaller svg

aljelly commented 4 years ago

Okay, adding knobs (like GitHub's branching icons) seems to make it look way better:

emblem-added-branch-vertical-with-knobs svg

Also it's now vertical.

The squiggly line (and maybe the positioning) still need refining.

Edit:

SVG if you want to try tweaking it [emblem-added-branch-vertical-with-knobs.svg.zip](https://github.com/elementary/icons/files/4170087/emblem-added-branch-vertical-with-knobs.svg.zip)
aljelly commented 4 years ago

emblem-changed-branch-vertical-with-knobs-slightly-darker-again svg

Slightly darkened yellow shade again in order to further improve contrast. Squiggly line is still unrefined. Tried to pixel-fit the asterisk. It may or may not need to be exaggerated more (or the edges flattened more) in order to better differentiate it from the plus icon.

GammaGames commented 4 years ago

Jeremy pointed me to this issue so I thought I'd put my ideas here too.

I think a more general form for icons would be better than specific ones. They could be used across the system for more use cases than git, but I will post those ideas on the related thread.
As for git status, I think +, *, and - badges to signify additions, changes, and removals would suffice. It should scale pretty well since the symbols would be simple and would help color blind users differentiate between the different dots. I do think the branch icon is nice, but they are really small and I'm not sure they would help color blind users much.