search

iitc-project / ingress-intel-total-conversion

ingress.com/intel total conversion user script with some new features. Should allow easier extension of the intel map.
http://iitc.jonatkins.com/
ISC License
989 stars 552 forks source link

Use sync icons from Material to reduce toolbox clutter #1265

Open phoudoin opened 6 years ago

phoudoin commented 6 years ago

In effort to reduce toolbox cluttering, here a change to use Material Icons font's icons for Sync plugin.

See screenshot: screenshot-ingress com-2018-05-23-18-53-51

phoudoin commented 6 years ago

Same can be done for other common plugins like bookmark, drawtools...

EvoldicA commented 6 years ago

I like the idea of cleaning up the toolbox. This was never merged. Maybe due to the faction biased colour choice? Does anyone think its a good idea to do similar with other things? I could probably take a crack at it.

phoudoin commented 5 years ago

It's not faction biased, it's just reusing the visual common sense to report disabled (gray), error (red), or ok (green) sync status. Others icons without live status indication, like bookmarks icon, should keep the default toolbox color (yellow).

johnd0e commented 5 years ago

Same can be done for other common plugins like bookmark, drawtools...

Imagine there are 3 plugins with icons. Could we avoid triple including the same stylesheet in the head?

modos189 commented 5 years ago

I suggest not import heavy third-party Google icons, which slows down the IITC start, but to import only the necessary Google Material icons in svg format, as I started here: https://github.com/IITC-CE/ingress-intel-total-conversion/commit/59cc3126bd85f5c9e298e94517384b34c8458d65

johnd0e commented 5 years ago

@modos189

Really heavy?

They say that it's only 42KB for 900+ icons.

phoudoin commented 4 years ago

@johnd0e

Imagine there are 3 plugins with icons. Could we avoid triple including the same stylesheet in the head?

First, if it's exactly the same URL, the cached content will be reused, not triple downloaded. But, agreed, it will be triple evaluated, which is bad.

We can mitigate this by assign an id to check if it's already there:

if ( $( "#material-icons-stylesheet" ).length == 0 ) {
  // add Google Material icons.
  $("head").append(
    '<link id="material-icons-stylesheet" rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">'
  );
}