visjs / vis-network

:dizzy: Display dynamic, automatically organised, customizable network views.
https://visjs.github.io/vis-network/
Apache License 2.0
3.07k stars 374 forks source link

replace images with inline svg icons #31

Open mojoaxel opened 5 years ago

mojoaxel commented 5 years ago

we should get rid of these dist/img/network and replace them e.g. with some inline (dataurl) svg images.

r3code commented 5 years ago

Some SVG can be taken form here https://iconsvg.xyz/

mojoaxel commented 5 years ago

We need replacements for the following icons:

image image image image image image

image image image image image image image

I think these can be done in pure css: image image

r3code commented 5 years ago

I think these can be done in pure css: image image

Pure CSS Close (cross) Icon https://codepen.io/Bharek/pen/XJvVLj

r3code commented 5 years ago

We need replacements for the following icons:

image image image image image image

image image image image image image image

I think these can be done in pure css: image image

Should we maintain colours of icons? I think it would be better to have single colour icons aka flat.

mojoaxel commented 5 years ago

Should we maintain colours of icons? I think it would be better to have single colour icons aka flat.

:+1: I also think we should get rid of the colors. If we use inline SVG maybe the user could change the color with custom css later.

r3code commented 5 years ago

It could look like this, I just created a branch in my fork https://github.com/r3code/vis-network/tree/edit-mode-svg-icons to test icons, a took some icons from iconsvg.xyz and some if them I drawn myself. vis-nav-controls

mojoaxel commented 5 years ago

It could look like this

Wow! This would be a perfect replacement!

For me it is important that we get rid of the single image-files. They should be included e.g. as data-urls inside in its own css.

r3code commented 5 years ago

It could look like this

Wow! This would be a perfect replacement!

For me it is important that we get rid of the single image-files. They should be included e.g. as data-urls inside in its own css.

Hmm. I can try to embed them as data:svg+xml into CSS

r3code commented 5 years ago

If I embed like this - users can not change the color of the SVG.

div.vis-network div.vis-navigation div.vis-button.vis-zoomExtends {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='vis-icon vis-icon--zoom-extends' width='30' height='30' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='square' stroke-linejoin='arcs'%3E%3Cpath d='M7.027 7.027l9.946 9.946m0-9.946l-9.946 9.946m6.792-10.43h3.64v3.64m-7.278-3.64h-3.64v3.64m7.278 7.278h3.64v-3.64m-7.278 3.64h-3.64v-3.64' stroke-width='1.6'/%3E%3Ccircle cx='12.102' cy='12.102' r='10'/%3E%3C/svg%3E");
    bottom:50px;
    right:15px;
}
Thomaash commented 5 years ago

What about stroke='currentColor'?

r3code commented 5 years ago

@Thomaash what do you mean? if we use SVG as background-image we have no access to it's internals. We can only apply CSS colors when SVG is inlined into HTML.

r3code commented 5 years ago

What about stroke='currentColor'?

It can ba applied only to inlined . Css not applied to other documents, when SVG is data:image it treated like external doc.

Thomaash commented 5 years ago

You have hardcoded color in your SVG stroke='%23808080'. Just try to replace it with stroke='currentColor' then it should respect the color set by CSS.

r3code commented 5 years ago

You have hardcoded color in your SVG stroke='%23808080'. Just try to replace it with stroke='currentColor' then it should respect the color set by CSS.

It won't work. Take a look https://jsfiddle.net/v3ag0cs6/37/

Thomaash commented 5 years ago

The value currentColor uses the text color (color) not stroke, see updated: https://jsfiddle.net/thomaash/x67gLzpa/ .

r3code commented 5 years ago

The value currentColor uses the text color (color) not stroke, see updated: https://jsfiddle.net/thomaash/x67gLzpa/ .

But it's only for inline SVG. Here my updated example https://jsfiddle.net/q9Lh017r/1/ CSS is not applied to data-url encoded SVG. The only way to allow users change the color is to inline SVG.

Thomaash commented 5 years ago

Oh, you're right.

r3code commented 5 years ago

@Thomaash I propose at first to replace PNG to SVG - it the fastest way. Next we can open another issue to "embed svg icons into JS".

Thomaash commented 5 years ago

We can do it in two stages.

r3code commented 5 years ago

OK. I'll do the first - PNG to SVG replacement. It almost ready

Thomaash commented 5 years ago

Although we may cause some problems to people using this. They now have their .png images and we'll start loading .svg images which they don't have. It will be better to do it all at once so we can just say “hey, you no longer need the images” instead of making them update them just to throw 'em away with the next release.

r3code commented 5 years ago

@Thomaash ok. So you propose to inline the SVG to the JS code?

Thomaash commented 5 years ago

Yeah, although I would like them more inlined in CSS but since SVG injected into HTML from JS can be colored using CSS (some people will definitely appreciate this) I'd go with inlining into JS.

mojoaxel commented 5 years ago

A little of topic but here is a litte example ho to replace the images with simple unicode icons (without optimization): https://stackoverflow.com/a/45307412/722162 image

r3code commented 5 years ago

@Thomaash I have finished the replacement https://github.com/r3code/vis-network/commit/0394ef629f41ef3b728888a11ba32f7b7187754c @mojoaxel Hmm. So what is better?

r3code commented 5 years ago

A little of topic but here is a litte example ho to replace the images with simple unicode icons (without optimization): https://stackoverflow.com/a/45307412/722162 image

I propose to use SVG icons by default and add an extra example how to replace navigation buttons. For 90% of users SVG buttons is pretty enough IMO. Other can override CSS using the example https://github.com/visjs/vis-network/issues/31#issuecomment-529229893 by @mojoaxel

Thomaash commented 5 years ago

We should not use UTF-8 characters as icons. We do not ship any font and therefore there is no guarantee that the characters rendered will look the way we want them to look. We could end up with quite different characters or even rectangles or question marks if someone's font doesn't have these characters (who knows what fonts are people using on their pages or in their browsers in case of default font face). Images give us much more consistent experience, reliability and also more freedom when it comes to design.

Thomaash commented 5 years ago

I have a few questions and objections to the draft:

r3code commented 5 years ago
* Why are the icons in circles?

Looks familiar.

* Why are some of the icons in circles so close to the circle?

Maybe because I draw myself very fast just to show others.

* Why does edit edge use the same icon as add edge?

Mistake )

* Since there is special add edge icon there should also be special add node icon not just a plus in a circle.

Maybe.

* The close button should definitely be bigger than it used to be but this seems a bit too big

I'd suggest to place it top left on the place of the Edit button, so when a user presses the Edit button it turns to "Close" button. So the toolbar would become more friendly. It would have: Close, Add Node, Add Edge buttons by default. For me its counter-intuitive to have all buttons in one style and have a Close button in another.

Thomaash commented 5 years ago

I like the idea of having Close        Add Node   Add Edge   … buttons.

r3code commented 5 years ago
* Why does edit edge use the same icon as add edge? Especially since edit node uses edit icon which makes more sense.

Fixed https://github.com/r3code/vis-network/commit/35c0f9b127e465bcd864d051a37c545da301d694

mojoaxel commented 5 years ago

@r3code Did you open a PR yet? If not feel free to open a Draft Pull-Request so we can have a look :smiley:

r3code commented 5 years ago

@mojoaxel I did it my fork here https://github.com/r3code/vis-network/commit/35c0f9b127e465bcd864d051a37c545da301d694. But I have to merge with current origin before PR.