Tuukka wrote: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.

Well, for the record, I don't like the grey tabs, either. They too look as if they are disabled.

It's clearly progressing well!

Here are my comments on the latest changes. The widget theme went from this:

alake wrote:

To this:

alake wrote:So I updated the checkbox and radio buttons and reverted to simpler tabs for the time being (plus a couple other minor updates).

What is better:
Now radio buttons, slider handle, checkbox and text input filed are smaller and feel much lighter. I would like to see what it looks like when they are even smaller (a tad only!), but I don't perceive them as disturbingly heavy anymore.

I think the new design of the selected radio button and the checkbox with more blue worked out very well. It's beautiful and gives the theme a clear identity. I understand the qualms some have with the unchecked radio button, but to evaluate that we'd need to know what an inactive button would look like. Could that be added? The same holds true for the checkbox. There should be three versions: checked, unchecked, and inactive.

Edit: Actually, I just found a screenshot linked in a different thread that offers a middle way between both old and new version of the the radio button. There, the checked button has a blue dot in the white center, the unchecked button has only a colored outline, and an inactive radio button could be completely greyed out. See the radio buttons on the very left here: http://dribbble.com/shots/1283529-The-Pony-Express-Mail/attachments/177620

What is not better:
I did prefer the blue line highlighting the active tab, as it goes with the general feel of the theme, but I don't have a very strong preference here.

I also think that the square window close button feels better, especially when trying to close a fullscreen window, where you are able to close the app by clicking in the very corner of the screen, which gives the impression of being far away from the button in the new version.


Keep up the great work! It's beautiful to look at and fun to see it develop.

Hmm, so if we take blue as the highlight colour, how would it look like if the background for the checkbox/radio buttons was white, but the checkmark/dot was blue? And perhaps the top of the active tab could also be made blue to highlight that it's selected. As for the tabs, the inactive ones could be just slightly grey, and disabled ones could be dark grey. And maybe have the active tab be a few pixels higher than inactive ones (but that might be too fancy).

Hey all,

I really like what this is going to. It let's me hope that I can come back to KDE someday. (switched to xfce 'caus I hated the oxygen theme with its ugly gradients, rounded corners and overall outdated shiny and plasticky look)
Please don't do the mistake and go back to rounded corners larger than 3px, large dropshadows and bulged buttons, like some here are claiming.

Some said, that the button does not much feel like a button. So what if you make it in blue color, is this possibly or would that be too much, or would it get in the way of something else?

1) The dark inactive tabs look strange, maybe a simple splitter(just like in ff) between the inactive tabs would be enough?
2) The button looks kinda dull. I think that a dark button would look nice in this case, the contrast adds a little bit of life to the window



And here is a variation with window tabs, i was curious how it would look like

That tab suggestion does look very nice. Though the buttons don't fit, certainly not the black one. The blue one is better, but since blue is highlight, I don't think all buttons should be blue. The "active" (the one that gets pressed if you press the spacebar) could certainly look like that, though. Maybe ordinary buttons could just be as white as textboxes? Although then you could mistake them for textboxes with centred text in them...

I decided to try my hand with the busy indicator too. It's based on vebalshadow's idea.



The animation looks like the blue ball is rolling inside the circle (that's why there's a dot inside, to give the illusion). Here's the code

Code: Select all

    busyIndicatorStyle: BusyIndicatorStyle {
        indicator: Rectangle {
            id: __busyIndicatorBase
            visible: control.running
            implicitWidth:  32
            implicitHeight:  32
            radius: 16
            color: sysPalette.window

            Rectangle {
                width: parent.width/2
                height: parent.height
                anchors.left: parent.left
                color: "transparent"
                clip: true
               
                Rectangle {
                    width: __busyIndicatorBase.width
                    height: __busyIndicatorBase.height
                    radius: width / 2
                   
                    gradient: Gradient {
                            GradientStop { position: 0.0; color: sysPalette.highlight }
                            GradientStop { position: 1.0; color: ColorUtils.fullColorString(sysPalette.highlight, 0) }
                    }
               
                    Rectangle {
                        anchors.centerIn: parent
                        width: radius*2
                        height: radius*2
                        radius: parent.radius - 3
                        color: __busyIndicatorBase.color
                    }
                }
            }
           
            Rectangle {
                id: ball
                width: radius*2
                height: radius*2
                radius: 7
                property int originX: parent.width/2
                property int originY: radius
                x: originX - radius
                y: originY - radius
                color: sysPalette.highlight

                Rectangle {
                    width: radius*2
                    height: radius*2
                    radius: 2.5
                    x: 3
                    y: 3
                    color: ColorUtils.fullColorString(__busyIndicatorBase.color, .7)
                }
               
                NumberAnimation on rotation {
                    loops: Animation.Infinite
                    duration: busyIndicatorSpinner.duration / (1 + __busyIndicatorBase.radius / ball.radius)
                    from: 0 ; to: -360
                }
            }
           
            NumberAnimation on rotation {
                id: busyIndicatorSpinner
                running: control.running
                loops: Animation.Infinite
                duration: 2000
                from: 0 ; to: 360
            }
        }
    }


edit: fixed wrong duration in animation

Tuukka wrote:I decided to try my hand with the busy indicator too. It's based on vebalshadow's idea.



The animation looks like the blue ball is rolling inside the circle (that's why there's a dot inside, to give the illusion). Here's the code

This looks really good! I like the idea

@EraX
I like the idea of using tab separators like this. I think they do it like that in Ubuntu, too, and it doesn't seem to be a problem. But I think that the hinted line could be a bit stronger.

Tuukka wrote:I decided to try my hand with the busy indicator too. It's based on vebalshadow's idea.



The animation looks like the blue ball is rolling inside the circle (that's why there's a dot inside, to give the illusion). Here's the code

Oooh that looks interesting! Great idea! Can't wait to get home to try this later!

Tuukka wrote:Btw, a technical question: alake, would you mind explaining what is the difference between shadeColor2() and Qt.lighter()?

Oh haha! Ignorance on my part. I must have missed that when I read the api doc so I didn't realize I could provide factor as a second parameter to Qt.lighter(). I'll probably switch to that. Although I'm starting to consider using the blendColors function more since increasing luminence may not be the right thing to do for all color schemes. Thanks for the pointer!

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.

Yeah, I'll be changing those to use blendColors with sysPalette.windowText and sysPalette.window instead. Thanks for your help!

mutlu wrote:Actually, I just found a screenshot linked in a different thread that offers a middle way between both old and new version of the the radio button. There, the checked button has a blue dot in the white center, the unchecked button has only a colored outline, and an inactive radio button could be completely greyed out. See the radio buttons on the very left here: http://dribbble.com/shots/1283529-The-P ... nts/177620

Thanks for finding that mutlu; that might be a good idea. I'll certainly try it to see how it looks.

I'll also try to add some disabled controls to the demo so we can see what they look like as well.

It's so helpful getting all this great high quality feedback. I'm genuinely hopeful for how this will turn out in the end.

KEEP THE IDEAS COMING!

Just a small note: there was a mistake in my busy indicator code causing the ball to rotate too slowly. It's fixed now in the original post.

Just an idea for the radio buttons (bassed in a previous comment):

I made a few updates tonight, including updates to the demo to add some disabled controls. There are interactive components in the design of UI controls that screenshots are unable to communicate (hover, button press, active focus cycling, etc.), so if you would like to evaluate those aspects of the design I encourage you to get the style from the repo as described in the original post.

Occasionally I find it useful to pull back and take a quick look at the design progress in the context of our overall design to make sure we're maintaining some harmony. So here's a look at our progress so far with the wallpaper and plasma theme we've already shared in this forum (click to enlarge):


And here are the other tabs:




I think we're making great progress!

I took a look at the Tuuka/verbalshadow busy indicator design and it's definitely a cool idea (the general idea of orbits and suborbits have come up elsewhere in our design discussions). I do think it might be worth a few more iterations to refine it a bit.

As always, keep the great ideas coming and don't be afraid of throw your ideas into the mix!

Nice work! I obviously approve of the new button desing... The radio buttons look nice too -- the previous version of the selected radio button was more beautiful, but it's hard to come up with a matching unselected button.

Still I wanted to show you my experiment with a light-colored button. I kinda like this.



There is a gradient but it's hard to see if there's no comparison. Here's the other tab so you can see it with a text field



The gradient stops used are sysPalette.base and ColorUtils.blendColors(sysPalette.base, sysPalette.window, 0.2)