steelbrain / linter-ui-default

Default UI for the Atom Linter package

MIT License

84 stars 47 forks source link

Linter Error and Linter Info icons are too similar also the icons are inverted which is weird ... #350

Open mehcode opened 7 years ago

mehcode commented 7 years ago

A couple UI suggestions for improvement about the status bar icons.

screen shot 2017-06-13 at 12 25 01 am

From a glance they look identical.

The error and info icons are stylized outline but the warning icon is the inverse. We should stick to one style of icons for all 3. I'd strongly recommend the filled (how the warning icon is now).

Some suggestions. A circle icon with an x in the middle for error would be a good change.

https://codepen.io/anon/pen/awZVoE (the link will only work for 24 hours)

screen shot 2017-06-13 at 12 38 02 am

marcofugaro commented 7 years ago

Yup, the current icons are the worst, please use filled icons.

@mehcode summed it up perfectly, my ideal combination of his suggestions would be icon-cancel icon-warning2 icon-info

caesarsol commented 7 years ago

👍 They should also be colored in the same colors of the highlights/markers!

Arcanemagus commented 7 years ago

The current icons are coming from Atom (which seems to use a mixture of Octicons versions to provide them by default) and can be overridden by your theme. I'm sure it's possible to override that here though that will break how this integrates style wise with other things in Atom that follow the style guide.

@caesarsol The icons are already colored the same as the markers. (warning can be seen in the screenshot above)

caesarsol commented 7 years ago

Well @Arcanemagus sorry, my bad, I'm slightly colorblind and they are so thin I never noticed the color... 😆

Anyway they are quite unbalanced, I completely agree with the suggestion to make them solid (or with a colored background)

caesarsol commented 7 years ago

I guess Octicons were not made to be displayed so small!

steelbrain commented 7 years ago

Open to change if you have a better UI in mind (or can draw one) 😉

Arcanemagus commented 7 years ago

I guess Octicons were not made to be displayed so small!

I definitely agree, the ones posted above look like they would serve the purpose better, my post was just pointing out that currently this package follows Atom's theme, and any change would be making it "unthemable" without custom work on the part of the theme author.

pablomayobre commented 7 years ago

I created a similar font to the one @mehcode posted, using IcoMoon (feel free to regenerate if needed) and Material Design icons.

I kept class names similar, I also used the same Unicode codepoints as the Octicons package.

.icon .icon-issue-opened  => .material-icon .material-issue-opened (U+F026)
.icon .icon-alert         => .material-icon .material-alert        (U+F02D)
.icon .icon-info          => .material-icon .material-info         (U+F059)

You could also use ligatures with info, error and warning.

I'm in favor of having custom classes for this icons, this makes it harder for Themes to break the linter-ui icons. If they want to change them they will consciously do so.

Material-Design-Icons.zip

The package contains, LICENSE file from Material Design Icons, WOFF, TTF and SVG fonts, separated SVG icons, CSS classes, LESS classes and variables and the selection.json, ReadMe and demo files generated by IcoMoon.

To download from IcoMoon directly use the following selection.json (Github Gist)

mehcode commented 7 years ago

Thanks @Positive07 , I dropped that pack into my linter ui experiment.

352

https://github.com/mehcode/linter-ui-plus

steelbrain commented 7 years ago

Happy to review a PR that changes these icons to be easier to understand