not showing styling

[andrewbanchich]

i'm not sure why, but the styling for the linter UI does not seem to be showing for me anymore. i am on Atom 1.18 and Windows 7.

[Arcanemagus]

What "styling" isn't showing? That looks normal for the status bar when you have no messages.

If you mean colors, the icons are colored when they have more than 0 messages in that category.

[andrewbanchich]

here is how it appears when i create an error

isn't it supposed to appear like this?

[Arcanemagus]

It hasn't looked that way since v1.5.0 was released including https://github.com/steelbrain/linter-ui-default/pull/300.

[andrewbanchich]

why were those icons/styling removed? seems like a huge step backward in terms of a UI in my opinion.

[Arcanemagus]

You'd have to go through the related issues for the reasoning. If I remember it was due to a request that the numbers were indistinguishable for colorblind people.

[andrewbanchich]

@steelbrain any way to add the nice UI back while making it accessible to the color blind? or maybe make it a setting you can toggle?

[steelbrain]

Not yet unfortunately 😢

[muppetjones]

@Arcanemagus That's kind of funny, b/c I'm colorblind, and the other way (pre 1.5) was much much easier for me to see.

[Arcanemagus]

I'd suggest trying out linter-ui-plus as an alternative... but they are done almost the same way there:

linter-ui-default:

linter-ui-plus:

[mehcode]

@andrewbanchich @muppetjones Is the ui in linter-ui-plus an improvement? I strongly feel that the aversion to linter-ui-default is not that they are icons but that they are line icons.

[andrewbanchich]

@mehcode @steelbrain meh, it's a small improvement. the reason i liked the old linter-ui-default UI was... it was a UI. a UI (to me) implies graphical elements. if you remove the graphics and make it just text or small font-like icons, in my opinion it is no longer a UI. if i wanted just text or small symbols i could use the terminal.

[mehcode]

@andrewbanchich Honestly, I disagree with you. But let's stop and appreciate that Atom is a hackable editor.

If you use linter-ui-plus you can apply the following in your styles.less to get the style you want (you might be able to do something similar with linter-ui-default but I haven't checked, this relies on all the information needed to be in the DOM)

@import "ui-variables";

.linter-ui-plus.status-bar {
  // Give each tile a minimum width to appear fixed in 99% of cases
  .tile {
    display: inline-block;
    min-width: 2em;
    padding-left: 0.4em;
    padding-right: 0.4em;
    text-align: center;
    position: relative;
  }

  // When the tile has errors ...
  .tile:not([data-count="0"]) {
    // ... make the text white
    color: white;

    // ... add a color highlight
    &::after {
      position: absolute;
      top: 0.25em;
      right: 0;
      bottom: 0.25em;
      left: 0;
      z-index: 1;
      display: flex;
      align-items: center;
      font-weight: 500;
      justify-content: center;
      border-radius: @component-border-radius;
      content: attr(data-count);
    }

    &.tile-error::after {
      background-color: @text-color-error;
    }

    &.tile-warning::after {
      background-color: @text-color-warning;
    }

    &.tile-info::after {
      background-color: @text-color-info;
    }
  }

  // Hide the icons
  .tile::before {
    display: none;
  }
}

[colbyn]

@muppetjones Thats funny ;) I’m not color blind; although (for preference) my monitor is set to a grayscale color profile. I likewise preferred the previous design due to it’s conciseness…