Reply to topic

[Widget Style] Qt Quick Controls

User avatar GreatEmerald
Registered Member
Posts
84
Karma
0
OS
Ooh, I like the radio button and checkbox styles. The radio button 2 is disabled, not just unchecked, right?
User avatar Heiko Tietze
Registered Member
Posts
593
Karma
0
OS
For me the text field is still too tall. What do you think about align its upper and lower boarder not to the right-hand button but to the checkbox' inframe (whatever it is called, I mean the bounds of the box itself).
Tuukka
Registered Member
Posts
69
Karma
0
OS
GreatEmerald wrote:Ooh, I like the radio button and checkbox styles. The radio button 2 is disabled, not just unchecked, right?

I agree they look nice. The second button is not disabled, it's unchecked. It looks quite different from then checked one, but how would you do it differently?

The button still bugs me. Perhaps we could use a gradient so slight that it's hardly noticeable and won't bulge? Like this:

Image

Also changed in the image: radii changed to 3pix, height of the button and text field reduced by 4pix and tab heights reduced by 2pix. The checkbox is unchecked so that you guys can see how it looks like.

Btw, a technical question: alake, would you mind explaining what is the difference between shadeColor2() and Qt.lighter()? Also I wonder if it would improve readability to use color objects instead of strings in the ColorUtils (so you can access values by color.r etc). The only issue would be converting arguments given as strings to colors but you could use color = Qt.lighter(clr, 1) to do that (for some reason QML does not have a proper constructor for that...)
Tuukka
Registered Member
Posts
69
Karma
0
OS
Edit: thought there was something wrong with how the forums shows images but it was my Firefox settings...

Last edited by Tuukka on Wed Apr 16, 2014 8:59 am, edited 1 time in total.
User avatar colomar
Registered Member
Posts
944
Karma
2
OS
I like the decreased sharpness in Tuukka's version, but overall it looks a little too gray to me.

About the radio button and checkbox: How about making them blue when enabled and just adding the white dot in the middle/checkmark when selected? If we make them gray when unselected, it would be difficult to distinguish unselected from disabled.

General comment: It would be helpful to be able to actually see the style "in action", as I've noticed my own perception of the style demo in QtCurve change over time. I'm not a big fan of flat buttons myself, but found that I got used to them fairly quickly when I used the QtCurve theme daily, and haven't overlooked/misinterpreted as non-interactive any of them so far.

Last edited by colomar on Wed Apr 16, 2014 9:09 am, edited 1 time in total.
Tuukka
Registered Member
Posts
69
Karma
0
OS
colomar wrote:I like the decreased sharpness in Tuukka's version, but overall it looks a little too gray to me.

If you mean the general colors, the style takes them from your system defaults so that's something I can't really control.
User avatar jensreuterberg
Registered Member
Posts
598
Karma
3
OS
Don't worry about the colors for now because as it is we will use the Plasma Next colors BUT since the widget theme picks up the color from the color theme - whatever the user prefers will be what is used. :)

So this is all about shapes.

Edit: yeah what he said ^ :)


KDE Visual Design Group - "Sexy by default - Powerful through cooperation"
User avatar GreatEmerald
Registered Member
Posts
84
Karma
0
OS
Tuukka wrote:I agree they look nice. The second button is not disabled, it's unchecked. It looks quite different from then checked one, but how would you do it differently?


The obvious answer is blue without the white dot. Although that would probably mean that buttons should then also be blue. I can't agree with unchecked being grey, as the usual thing grey signifies is disabled elements.

Tuukka wrote:The button still bugs me. Perhaps we could use a gradient so slight that it's hardly noticeable and won't bulge? Like this:

Also changed in the image: radii changed to 3pix, height of the button and text field reduced by 4pix and tab heights reduced by 2pix. The checkbox is unchecked so that you guys can see how it looks like.


I find that rounding to be acceptable (although I still prefer 4px). And as mentioned I agree with the gradient.
User avatar colomar
Registered Member
Posts
944
Karma
2
OS
Tuukka wrote:
colomar wrote:I like the decreased sharpness in Tuukka's version, but overall it looks a little too gray to me.


If you mean the general colors, the style takes them from you system defaults so that's something I can't really control.


Oh, yes, so that means you'll have to install the Plasma Next color theme, then! You can find it here: https://docs.google.com/file/d/0B36nDbI ... 5LSEU/edit (including instructions for installing it, the file is Next.colors)
Tuukka
Registered Member
Posts
69
Karma
0
OS
GreatEmerald wrote:
Tuukka wrote:I agree they look nice. The second button is not disabled, it's unchecked. It looks quite different from then checked one, but how would you do it differently?

The obvious answer is blue without the white dot. Although that would probably mean that buttons should then also be blue. I can't agree with unchecked being grey, as the usual thing grey signifies is disabled elements.

The blue color is the highlight color from the system palette. So I don't think you can use it for unchecked buttons.
colomar wrote:Oh, yes, so that means you'll have to install the Plasma Next color theme, then! You can find it here: https://docs.google.com/file/d/0B36nDbI ... 5LSEU/edit (including instructions for installing it, the file is Next.colors)

Thanks, will do.

alake, I'm wondering about your use of the sysPalette.widowText with an alpha of 0.3 for borders... Because the color is not opaque that means that the shadow will show through if there is one, and I'm not sure if that's something we want. For example, it makes the border of the unchecked checkbox quite a bit darker like seen in my screenshot above.
User avatar GreatEmerald
Registered Member
Posts
84
Karma
0
OS
Tuukka wrote:The blue color is the highlight color from the system palette. So I don't think you can use it for unchecked buttons.


I'm not sure I follow. Is that a technical limitation, or do you think it would not be appropriate?
Tuukka
Registered Member
Posts
69
Karma
0
OS

Re: [Widget Style] Qt Quick Controls

Wed Apr 16, 2014 10:07 am
GreatEmerald wrote:
Tuukka wrote:The blue color is the highlight color from the system palette. So I don't think you can use it for unchecked buttons.

I'm not sure I follow. Is that a technical limitation, or do you think it would not be appropriate?

I think it would not be appropriate. It is a color that is meant to be used to highlight elements. It can be blue or something else, depending on the system color theme.

I though it would make sense if the unchecked radio button looked similar to an unchecked checkbox, so here's my suggestion:

Image

(Border is 2pix with a dark color, inside is sysPalette.window. I fixed the shadow leaking through the checkbox border.)
User avatar GreatEmerald
Registered Member
Posts
84
Karma
0
OS

Re: [Widget Style] Qt Quick Controls

Wed Apr 16, 2014 10:16 am
I thought about that, but it is too weird when selecting a radio button, instead of adding a dot inside, adds a background to it. It would make sense if it was the other way round, a blue dot was added. Except then we're back right where we started :)
Sogatori
Registered Member
Posts
209
Karma
1
OS

Re: [Widget Style] Qt Quick Controls

Wed Apr 16, 2014 11:05 am
Sooo, I tried my luck on a busy indicator.
I have the honour to present you Infinity!
Image
The infinity symbol represents Plasma's infinit startup times and the visual glitches symbolise all the bugs that never got fixed in KDE SC. >:D

Not really though :) I'm not sure why ImageMagick does this. It's based on this here, and I can't figure out for the life of it why it these glitches occur. The images that I used to compose this .gif don't show this animation glitch either. Has anyone got an idea?
Tuukka
Registered Member
Posts
69
Karma
0
OS

Re: [Widget Style] Qt Quick Controls

Wed Apr 16, 2014 12:02 pm
GreatEmerald wrote:I thought about that, but it is too weird when selecting a radio button, instead of adding a dot inside, adds a background to it. It would make sense if it was the other way round, a blue dot was added. Except then we're back right where we started :)

It think I prefer how it was originally in alake's latest version. After all the dark gray color of the deselected radio button is the same as on the inactive tabs. So the color means inactive, not necessarily disabled.

 
Reply to topic

Bookmarks



Who is online

Registered users: Baidu [Spider], Bing [Bot], dbarron, dhealey, DigitalDeviant, Exabot [Bot], Google [Bot], keyths, kjeram, kyrhammer, ptristan, Rytelier, Sogou [Bot], tymond