Remove border radius from icon-toggle-pictures

[marcoambrosini]

[skjnldsv]

So, you used a radius of 1, but be aware that the grid one have a radius of .5 :)

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 16 16" width="16" height="16">
	<rect rx=".5" ry=".5" height="6" width="6" y="1" x="1"/>
	<rect rx=".5" ry=".5" height="6" width="6" y="1" x="9"/>
	<rect rx=".5" ry=".5" height="6" width="6" y="9" x="9"/>
	<rect rx=".5" ry=".5" height="6" width="6" y="9" x="1"/>
</svg>

[marcoambrosini]

be aware that the grid one have a radius of .5 :)

Can I remove all this nearly invisible border radiuses and use straight squares here? It would help a lot also with how the 3 little squares look..

[skjnldsv]

Can I remove all this nearly invisible border radiuses and use straight squares here? It would help a lot also with how the 3 little squares look..

see with Jan, I'm fine with whatever :p

[jancborchardt]

be aware that the grid one have a radius of .5 :)

Can I remove all this nearly invisible border radiuses and make squares here? It would help a lot also with how the 3 little squares look..

If it looks good, go ahead. :)

[jancborchardt]

Looks super nice! Seeing how we now have 3 icons without text next to each other, shouldn’t we get the 3-dot menu?

Start call button | 3-dot menu | Sidebar icon

"Fullscreen" and "Grid view" (shorter wording btw) can be in the 3-dot menu. If we want to, we can even put the sidebar icon in the 3-dot menu as "Participants & settings" or just "Conversation settings".

[marcoambrosini]

Looks super nice! Seeing how we now have 3 icons without text next to each other, shouldn’t we get the 3-dot menu?

I wouldn't do this Jan because we are going to bring the whole moderation menu as a 3 dot menu in the app content. Plus those 2 controls are very important for the call imo: provided there's enough width, I think we should show them explicitly

[marcoambrosini]

@skjnldsv do you know why the build is failing?

[skjnldsv]

Unrelated

[nickvergessen]

I would vote that these are very specific icons and they should just go to the Talk app for now.

Also they should be minified hiding the script in build/

[marcoambrosini]

these are very specific icons

Only the promoted-view icon is specific to talk, the grid is used in other apps too.

[rullzer]

these are very specific icons

Only the promoted-view icon is specific to talk, the grid is used in other apps too.

fair enough. Then move the promoted view to talk ;)

[marcoambrosini]

Wouldn't be better, for the sake of standardization, to leave it here? I mean, that icon is in the end just 1 big rectangle on top of 3 smaller rectangles, it could also be easily a gallery icon, or something else we haven't thought of! What if a contributor developing an app needs something like this? Isn't it better to provide it in the server instead of having him create his own version?

Edit: we could also add it to talk for now to simplify backports, but I would leave a version of it here as well.

[rullzer]

Wouldn't be better, for the sake of standardization, to leave it here? I mean, that icon is in the end just 1 big rectangle on top of 3 smaller rectangles, it could also be easily a gallery icon, or something else we haven't thought of! What if a contributor developing an app needs something like this? Isn't it better to provide it in the server instead of having him create his own version?

Edit: we could also add it to talk for now to simplify backports, but I would leave a version of it here as well.

Just dumping all icons in server is not a solution IMO.
Apps should provide their own icons as much as possible. If not only for the backports. And making sure the icon in server isn't suddenly changed.

If it turns out an icon is used consistently across apps for function X. Then we can always move it to server. Or as part of the vue components or whatever.

But lets do that once it is needed. If some app comes along now and thinks they needit. They can just copy the icon from talk.

Let try to keep the server as clean as we can. And the apps as self contained as we can.

[rullzer]

Random brain fart. I don't know how easy/feasible it is. But maybe some npm packages nextcloud/icons would make sense?

That way we still have all the standardized icons. But apps just pick the ones they need?

[skjnldsv]

Random brain fart. I don't know how easy/feasible it is. But maybe some npm packages nextcloud/icons would make sense?

this is planned™ ^^

[marcoambrosini]

Allrighty!

[marcoambrosini]

Done, the only change is now the modification to icon-toggle-pictures

[skjnldsv]

See comment, please also update the main post screenshots so people know what it is about now ;)

[jancborchardt]

But lets do that once it is needed. If some app comes along now and thinks they needit. They can just copy the icon from talk.

Agreed on that. No premature standardization. :)

[jancborchardt]

Wait a sec – the border-radius removal we actually don’t want. The rounded style is something we go for across the design, and the corners should stay softened as they are now. Feel free to increase the radius to 1px for example.

[marcoambrosini]

@jancborchardt please take a look at these icons at 100% . There's no roundness to be seen neither with .5 nor with 1px border radius. We're just making these icons blurry.. It's true that we go for the rounded style but there's no need to do this with icons too imo, and many other icon have straight edges:

[jancborchardt]

@ma12-co I agree that currently it’s inconsistent and this is something we need to work on. But look at the latest icons: details/info, confirm, comment, fullscreen, menu-sidebar, video-off, audio-off.

All of these are rounded or have a majority of rounded elements in them, which is what we are going for, and what is absolutely a difference to them being squared, even on icon size. The others merely need to be adjusted, and we shouldn’t take steps back.

(And sorry for the confusion: My review above was mostly for when this issue was about the promoted view icon.)

[marcoambrosini]

:cough:

[jancborchardt]

:cough:

We are all for a unified style – for that reason it seems off to remove the rounding which is intentional (and visible) from only 1 icon, no?

Yes, Material Design has an icon set where they have sharp and rounded corners mixed. Let’s look at others as well:

• SF Symbols from Apple: Uses a lot of rounding of the corners to make their style more approachable, friendly and easily perceivable. (They also round their hardware and app icons as we know.)
• Bootstrap icons: Even more rounding there
• Fontawesome: I don’t particularly like their specific style, but they also round stuff off.

[skjnldsv]

• Fontawesome: I don’t particularly like their specific style, but they also round stuff off.

should be avoided, they changed license a while ago iirc, Forkawesome is the new OSS version

[marcoambrosini]

@jancborchardt the cough was more of a "Let's use these instead" :)
They have rounded versions too!
https://material.io/resources/icons/?style=round

[marcoambrosini]

Discussion continues here: nextcloud-libraries/nextcloud-vue#1051