Closed skjnldsv closed 7 years ago
You want opinions about code or visual?
@Espina2 visual
I really like it a lot ๐
I think the buttons can have a bit more padding and bit bigger.
@Espina2 What do you suggest? :) Could be a good idea!
And the time input is higher than all other inputs and therefore looks out of place.
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?
I also really like it! One thing range seems kaput (on FF 50)? Nothing is visible.
@blizzz Noticed this too. Will fix. @Espina2 I don't understand what you mean ๐
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.
Yes, the codepen have two rows: the left one is the current nextcloud design, the right is my submission :)
@Espina2 @MorrisJobke @blizzz I updated the codepen. New feedback? ๐
@Espina2 @MorrisJobke @blizzz I updated the codepen. New feedback? ๐
Awesome ๐ ๐
@skjnldsv great stuff! Some points:
@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
If we are on it, can we add :focus states for checkboxes and radio buttons?
@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 !
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:
@Espina2 @MorrisJobke @blizzz I updated the codepen. New feedback? ๐
@skjnldsv same codepen link? Still have no range elements with FF 50 ๐ฟ
@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+
Aw rly? On mobile currently and codepen works here with FF 50.1.0 mobile. Clearly, the Qt port should be revived ;)
@skjnldsv Great! Especially the buttons are a big improvement. :tada:
For a future PR of this, consider changes made in #2098
@eppfel, well the border on focus fit this purpose didn't it?
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
Added white checkbox and radio! ๐
Okay, this is starting to be a monologue, but I'm not gonna lie, I like it a lot! :D
Please more feedback!
@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.
Pr will follow tomorrow ;)
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