New inputs.scss design

[skjnldsv]

Since the inputs.scss file is a bit messy, I was wondering if it won't be better to rewrite everything. Here's my results so far.

Side-by-side comparison: Codepen

Do you like the change? Do you find t more readable? What are the changes you would do?

@nextcloud/designers @jancborchardt

[Espina2]

You want opinions about code or visual?

[skjnldsv]

@Espina2 visual

[MorrisJobke]

I really like it a lot 👍

[Espina2]

I think the buttons can have a bit more padding and bit bigger.

[skjnldsv]

@Espina2 What do you suggest? :) Could be a good idea!

[MorrisJobke]

And the time input is higher than all other inputs and therefore looks out of place.

[Espina2]

All the elements are the exact same thing as in the app? So I can have a quick overview how this are going to look?

[blizzz]

I also really like it! One thing range seems kaput (on FF 50)? Nothing is visible.

[skjnldsv]

@blizzz Noticed this too. Will fix. @Espina2 I don't understand what you mean 😆

[Espina2]

Sorry my english sometimes is bad.

What I'm trying to ask is if are any visual changes to what we have now in nextcloud.

[skjnldsv]

Yes, the codepen have two rows: the left one is the current nextcloud design, the right is my submission :)

[skjnldsv]

@Espina2 @MorrisJobke @blizzz I updated the codepen. New feedback? 😄

[MorrisJobke]

@Espina2 @MorrisJobke @blizzz I updated the codepen. New feedback? 😄

Awesome 🚀 🎉

[jancborchardt]

@skjnldsv great stuff! Some points:

• [x] the hover and focus states shouldn’t modify the background. It’s especially confusing that it’s »greyed out« when you are in the field. Just leaving it white always (except when disabled) should be fine.
• [x] the active state with the blue border is also a bit strange since it only appears on mousedown for a splitsecond. Better: for hover, focus and active give the field that blue border, but leave the background white.
• [x] the button looks too much like an input field now, with the border. The current style with flat grey and border on hover has more affordance.
• good on changing the select to be more styled like an input field than a button :)

[skjnldsv]

@jancborchardt Updated! :) What do you think now? I tried something new to completely differentiate buttons/select from other inputs.

cc @MorrisJobke @Espina2 @ChristophWurst @nextcloud/designers

[eppfel]

If we are on it, can we add :focus states for checkboxes and radio buttons?

[skjnldsv]

@eppfel We can. I tried adding it to the codepen, but it's a pain adding svg to codepen as base64 ^^ Is there a possibility we could get rid of the svg and only use the checkmark?

Like we could set the border and stuff with css, would be easier to theme !

[skjnldsv]

Okay, i figured it's pretty easy to do for the radio without svg at all. And for the checkbox, it won't be that hard. I will update the codependent (which the radio part is already updated) this afternoon.

It will be much more easier to theme and apply custom design with the incoming variables! :tada:

[blizzz]

@Espina2 @MorrisJobke @blizzz I updated the codepen. New feedback? 😄

@skjnldsv same codepen link? Still have no range elements with FF 50 😿

[skjnldsv]

@blizzz The range element seemed broken. Not coming from me: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_range

Broken here too for me (ff 50.1.0). Seemed to be related to GTK+

[blizzz]

Aw rly? On mobile currently and codepen works here with FF 50.1.0 mobile. Clearly, the Qt port should be revived ;)

[juliushaertl]

@skjnldsv Great! Especially the buttons are a big improvement. :tada:

[eppfel]

For a future PR of this, consider changes made in #2098

[skjnldsv]

@eppfel, well the border on focus fit this purpose didn't it?

[skjnldsv]

Aaaaaaaand! Here we go! Absolutely NO IMAGES used on the new inputs. Including the radio and checkboxes.

@eppfel I added the border to the focus state. But I don't think @jancborchardt will like it. :) http://codepen.io/skjnldsv/embed/QGLjMx/?height=1500&theme-id=dark&embed-version=2

[skjnldsv]

Added white checkbox and radio! 🚀

[skjnldsv]

Okay, this is starting to be a monologue, but I'm not gonna lie, I like it a lot! :D

Please more feedback!

[eppfel]

@eppfel I added the border to the focus state. But I don't think @jancborchardt will like it. :)

We need focus highlighting and that's what he proposed earlier.

Better: for hover, focus and active give the field that blue border

I think for the checkboxes and radios this is still missing.

Overall I like it a lot, too 😍

But from the screenshot it still looks a bit odd. Maybe just because it is unfamiliar. I guess we need a PR to see it more in context.

[skjnldsv]

Pr will follow tomorrow ;)