SVG Icons (octicons)

[tuurep]

Close #102

[tuurep]

I decided to do this in 2 steps:

• Just add the icons + their colors
• svg-to-text alignment
  • Hopefully we can use the same solution for Task list alignment issue #131

[tuurep]

Notes:

• Made sure there's no whitespace between svg and link text, because it looks awkward when the space gets the link underline
  • Add the space as svg margin-right or something like that
• I removed some \ns from the #top-nav and am not fully sure if they were necessary there but I'm trying to hopefully use CSS for these sort of things

[tuurep]

@jannis-baum I'm proposing new colors for dark theme dir and file icons:

How's that look? (if you can ignore the alignment 😄)

dir: #59739c
file: #989898

For back button I'm suggesting to reuse --text-secondary

(todo: alignment)

[tuurep]

Ready for review

[jannis-baum]

Hey @tuurep thank you, this looks cool! I will look at it as soon as I can, might still be a few days though. Talk soon!

[jannis-baum]

I took a look now, looks great overall, such a big improvement over what we currently have! I have two comments, one on the colors and another on customizability of the icons:

Colors

I felt like the colors were a bit much on dark mode so I tried changing the directory and file colors to text-secondary. Then I noticed it looked weird because the links were still blue so I figured I'd try out how it looks with the links in a neutral color for both color schemes as this is what GitHub does. I committed my suggestion, let me know what you think! This is what it looks like while hovering on the README.md, I really like it:

Customizable icons

Do you think it would make sense to allow people to pick alternative icons? We could add a config option for that. If we do, the important thing would be to check that the icon actually exists and catch it if not. But I also definitely see the point of not making them customizable until someone asks for it as this adds complexity to maintaining Vivify.

[tuurep]

Yeah, love the link color change. I also prefer that but didn't think to suggest it.

Gray icon colors look good on dark theme, approved

Do you think it would make sense to allow people to pick alternative icons?

Yeah absolutely, but also I was thinking it's kind of already possible with custom stylesheets with something like:

.icon-directory > path {
   d: path ('foo foo foo foo foo foo foo foo etc')
}

or save an svg file in my vivify conf dir and point to it

(dunno how accurate the above are, I could test this as well)

So I think it might already be well customizable, but does require some knowledge of CSS (but so does all other theming)

What do you think?

Also, I think we can merge but I think this is pending 1 approval from either you or tweekism :)

[jannis-baum]

Oh nice, I wasn't aware of that CSS feature! Cool. Yes, totally enough I'd say. We can point people to it if they ask for it. I'll approve and you can merge it :)

Edit: Looks like I can't approve it anymore because I made a commit to it? Not sure. I'll just bypass the review and merge it then ^^

[tuurep]

Yeah can confirm this is possible, for example:

/* https://primer.style/foundations/icons/feed-star-16/ */
.icon-directory > path {
    d: path("M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.252-12.932a.476.476 0 0 0-.682.195l-1.2 2.432-2.684.39a.477.477 0 0 0-.266.816l1.944 1.892-.46 2.674a.479.479 0 0 0 .694.504L8 10.709l2.4 1.261a.478.478 0 0 0 .694-.504l-.458-2.673L12.578 6.9a.479.479 0 0 0-.265-.815l-2.685-.39-1.2-2.432a.473.473 0 0 0-.176-.195Z");
}

However we might be quite reliant that the SVG used is exactly 16x16 pixels, but maybe that's tweakable on the svg tag as well?

[jannis-baum]

Great, thanks for checking it! I think as long as it's possible it's fine for now :) If it doesn't work for whoever will ask for it in the future we can reconsider