New sync state icon design

[jancborchardt]

As discussed in #196. Fix #196 #43

Please review @MorrisJobke @rullzer @MariusBluem @AndyScherzinger @skjnldsv

For reference, they are compressed as we usually do:

• PNG using Trimage (which uses optipng and pngcrush)
• SVG using Scour from our script (NOT SVGO as it leads to data loss)

[jancborchardt]

@rullzer I put the »states.svg« in there on purpose as overview, also if any future changes are needed. Let me know if it absolutely should be removed, but I’d really prefer if it stays there.

[skjnldsv]

Holy crap, 163 files?
How are we supposed to review that? X)

NOT SVGO as it leads to data loss

Ahahahha! Good old memories! 😆

[jancborchardt]

Just clone it and look at it in a file manager ;) it's only 3 folders. 7 svgs each and 5 differently sized pngs per icon.

Yes it was a pain to export that and if it wouldn't (hopefully) be a one-time thing I'd have checked how to script it. ;)

[jancborchardt]

Just remembered: @rullzer where can I find the icons which are shown when a file is shared?

[AndyScherzinger]

PR for Android nextcloud/android#1354 - to be shipped with the upcoming release 🚀

[rullzer]

Let me take over this later to make sure everything still builds

[pixelipo]

@jancborchardt sorry I couldn't join the discussion earlier in #196 (too busy with real life 😉 ).

I have one question: is the "rounded line endings" default for Nextcloud icons now? I'm asking because there is noticable mix of rounded and straight edges. This PR uses different style than existing icons such as checkmark.svg, pause.svg and close.svg, to name a few (hacked into NC files app here for example):

I suggest we decide which version to use and stick to it.

P.S. Nextcloud icon ("connecting") seems not to have enough padding on the sides

[pixelipo]

Nitpicking this PR, I notice weird viewbox values: viewBox="0 0 4.2333331 4.2333334" (should be 0 0 16 16) and unused(?) but defined stroke-width in SVG files.

Also, the all seem to be translated on y-axis: <g transform="translate(0 -292.77)"> - this is a very trivial issue, just gives some strange datapoints overall.

[jancborchardt]

@pixelipo yeah, the plan is to go with the more rounded version as it’s friendlier and it’s easier to notice cause it has less forms/corners.

About the strange values: That is weird – it’s out of Inkscape (with 16*16 document) and then through Scour. :\ Let’s merge so we have the actual files proper, and the »backend« SVG details we can fix in a follow-up, ok?

P.S. Nextcloud icon ("connecting") seems not to have enough padding on the sides

Yeah, that is intentionally since if it would be just 14px width it would be too small, and it’s a circle after all so pixel perfectness is less of an issue.

[pixelipo]

Here's 2 cleaned up examples - state-error.svg (27% smaller file):
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 16"><path d="M 8 0 A 8 8 0 0 0 0 8 A 8 8 0 0 0 8 16 A 8 8 0 0 0 16 8 A 8 8 0 0 0 8 0 z M 4.2636719 3.2636719 A 1 1 0 0 1 4.9824219 3.5664062 L 8 6.5839844 L 11.017578 3.5664062 A 1 1 0 0 1 11.705078 3.2636719 A 1 1 0 0 1 12.431641 4.9804688 L 9.4140625 8 L 12.431641 11.017578 A 1 1 0 1 1 11.017578 12.431641 L 8 9.4140625 L 4.9824219 12.431641 A 1 1 0 1 1 3.5683594 11.017578 L 6.5859375 8 L 3.5683594 4.9804688 A 1 1 0 0 1 4.2636719 3.2636719 z " /></svg>

and state-pause.svg(38% smaller):
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" version="1.1"><path d="M 8 0 C 3.5817 0 0 3.5817 0 8 C 0 12.4183 3.5817 16 8 16 C 12.4183 16 16 12.4183 16 8 C 16 3.5817 12.4183 0 8 0 z M 5.9844 2.968 A 1 1 0 0 1 7 4 L 7 12 A 1 1 0 1 1 5 12 L 5 4 A 1 1 0 0 1 5.9844 2.968 z M 9.9844 2.968 A 1 1 0 0 1 11 4 L 11 12 A 1 1 0 1 1 9 12 L 9 4 A 1 1 0 0 1 9.9844 2.968 z " /></svg>

But I agree, this can be a follow-up. Are SVGs actually used anywhere? I know Gtk supports scalable icons, but I don't know if NC client is.

[jancborchardt]

No it's mainly the sources I think.

@rullzer @pfiff45 ready to merge?

[rullzer]

No don't merge as is I need to generate the png files else building fails hard ;)

[rullzer]

Lets do this

[jancborchardt]

Thanks @rullzer! :)