search

hasadna / datacity-k8s

1 stars 0 forks source link

SVG / PNG icons #158

Open niryariv opened 3 years ago

niryariv commented 3 years ago

The new design requires group icons to have a different color in the homepage and internal pages.

Possible solutions:

  1. Find some color that'll work with both (likely require changing the homepage design)

  2. Have two sets of PNG icons, one for each color

  3. Use SVG icons so we change color via the CSS, eg a class for each case

Seems like 3 is the best option as it will offer us more versatility and will be easier to use when site maintainers add new icons. @OriHoch please take a look and see how much work is needed to implement.

(GH doesn't allow attaching SVG to an issue. For testing you can get svg/png files of our Religion icon here)

OriHoch commented 3 years ago
  1. this is how the SVG icon looks on group pages: 1 2 - is this OK?
  2. how should we handle the possibility that a site admin will set a PNG image for a group?
niryariv commented 3 years ago

  1. looks fine to me though I'd prefer the previous color

  2. We'll tell them to use an SVG file

OriHoch commented 3 years ago

ok, please provide all the group image SVGs

OriHoch commented 3 years ago

this is more complex then I thought, let's discuss next meeting if it's worth to invest the time for this

niryariv commented 3 years ago

We keep getting negative feedback on the icon colors. As we discussed, the new design has a light blue background on the homepage and a white bg on internal pages. This makes it very hard to find an icon color that will work on both.

We discussed changing the color programmatically via CSS according to the context. Turns out this doesn't work when the SVG is an external file.

Since this keeps coming up I looked into it again, seems like there's a hack that might work for us. Can you take a look?

OriHoch commented 3 years ago

I couldn't get it to work, the example in the link you sent doesn't work for me. It seems that this feature is partially supported in most browsers, and also depends on how the SVG file is structured.

niryariv commented 3 years ago

Could it be a CORS issue? It seems CORS applies to SVG, and when I try it locally I get a CORS error Screen Shot 2021-01-11 at 10 21 34

niryariv commented 3 years ago

Moving to TODO for now.

niryariv commented 3 years ago

For future reference: https://stackoverflow.com/questions/61824128/python-change-color-in-svg-and-export-to-svg-png-pdf