Atom: Material UI resets size adjustments applied to icons

Created on 6 Mar 2016  路  20Comments  路  Source: file-icons/atom

After I update the file-icons the .tag icon looks too big in the tree view. And I already restart Atom after I update this package.

image

The icon on the tab looks good:

image

I try to customize this icon with new stylesheet like this:

.filetype-icon-tag:before {
  transform: scale(.5);
}

Still not working...

bug discuss

Most helpful comment

@Alhadis ahh! that solved the problem. Thanks!

All 20 comments

What UI theme are you using?

I'm using atom-material-ui v1.2.0, and also atom-material-syntax v0.4.3

Ugh, I notice the theme is overriding size adjustments that File-Icons applies to individual glyphs:

It's affecting other non-square icons too (TeX and Lisp, for example):

In other words, this extends beyond the Riot icon specifically.

@DanBrooker Having Atom Material reset the icon sizes is somewhat problematic, because it means some are too small (note the Laravel and Rust icons), while others are too big.

There're two possible approaches we can take:

  1. Override Atom Material's icon sizes, which would make everything else look too big to everybody using the theme. It would guarantee a bit more consistency with the icon-size adjustments, however.
  2. Edit the sizes of each icon being used in this theme's fonts to ensure they fit snugly into a 16脳16 canvas. This would be a lot of work, and would basically copying the existing icons into a single font. This sounds stupid, but it would actually ensure harmonious sizes and alignments across icons, resolving #260 as well as this.
  3. Have ad hoc styling corrections applied for Material users, which seems to be the easy and logical thing to do, but it's only solving half the problem.

For now, I use this custom stylesheet to mitigate the issue:

.icon-file-text[data-name$=".tag"]:before,
.icon-file-binary[data-name$=".tag"]:before {
  font-size: 7px !important;
}

I'll cut a patch release to address this particular issue in the short-term, because this is actually bad enough to warrant it.

Mark my words, though: something has to be done about the inconsistent sizes and offsets. Mfizz in particular seems to warrant it most - look at how misaligned the Scala and SQL icons are:

The best solution (the least hacky) would be an entire custom font with nicely aligned and sized icons, but that's a large amount of work and a whole project on it's own

I don't know if this would help but maybe the file icon service is way to avoid this problem (See #229 https://github.com/atom/tree-view#api ) which is the offical way to provide icons and might get around the conflict between themes somehow (maybe?).

It is, but honestly, I'd be more than willing to do the heavy lifting. I even started working on a way to automate this sort of thing, although it's still in development. Basically if I finished that, it'd allow recompilation of the icon font using a folder of 16脳16-sized SVG files. It'd make auditing and modification a hell of a lot easier, and we wouldn't be at the mercy of every font author's different spacing and size considerations.

@Alhadis this might be useful https://github.com/ryanoasis/nerd-fonts

Hrm, no, not quite what I had in mind, haha. =) Basically, that repo seems to be patching existing fonts, whereas this would be generating one from scratch.

Don't worry, I'll nut something out! Just in the middle of other projects right now, heh.

Also, some of those icons still appear to be unevenly-sized, so we're still stuck with the issue of inconsistent sizing...

I can confirm with this issue.

image

Ugh, good lord. Fixing that right now...

What the hell... this thing isn't even fitted to the canvas correctly! :|

Okay guys, I've normalised the widths of every icon that didn't have a square canvas. The issue should be resolved for now... although the other icon fonts really need the normalisation I spoke about.

This will be pushed out in a patch release shortly.

EDIT: Done.

Updated to 1.7.4. Still facing the same problem.

image

@shernshiou Did you restart Atom after installing?

@Alhadis ahh! that solved the problem. Thanks!

Good to hear!

Looks good on Atom 1.8.0-beta1 too.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jgebhardt picture jgebhardt  路  6Comments

Nearoo picture Nearoo  路  4Comments

hemedani picture hemedani  路  8Comments

ThatXliner picture ThatXliner  路  4Comments

radiocity picture radiocity  路  3Comments