I'd like to pipe in and say that I really like both the gears and the planet+ring busy indicators. Another option for the gear-based busy indicator that I was thinking up earlier would be to have the gear spinning along the inside of a(n invisible) box.

Also, as there are many suggestions and mock-ups for various styles of busy indicators perhaps we could gather several of the best ones and have the ability to select between them (choice is good, right)?

colomar wrote:It's awesome that you did some quick user test! This is the way to go to find out how well things work in practice, and it gives a lot of insight with comparably little effort.
Anyone can do those: Just ask a few people around you to try stuff out, you'll be amazed of how much you learn from watching them use things!

So true. In fact I just watched video yesterday of an interview with Matias Duarte, and he mentioned how helpful user testing has been for sorting out new or difficult design choices. Truth be told, the moment I tried this design (which was based on verbalshadow's excellent suggestions) was a moment of mix emotions. This new design felt almost inevitably correct, but I was genuinely conflicted by my attachment to the previous checkbox design. And no matter how much I looked at them and interacted with them I could not distangle those feelings. That's why I ran that quick user test to get the designer out of the loop for a minute. It cleared up things up immediately and, while I was sorta sad to see the previous design go, the more I use it the clearer it becomes that the new design was definitely the best choice. It weird how one little change can really strengthen the design language. When I load up the previous checkbox design now it just feels... odd.

Tuukka wrote:The new busy indicator is an interesting idea... I would slow down the animation, now it feels a bit annoying. I'd perhaps also make the spinning ring a tad bit thicker...Or will it look too much like a radio button then?

Good ideas, I'll be sure to try that.

alake wrote:A few minor updates to the checkbox:


I got some quick, informal user feedback with both the before and after version of the checkbox designs plus a third version that was not a candidate. No indication was provided to the users about which design was the before or after or the candidate. The demo app was used for the test to allow them to actually interact with it and to provide some visual context for the design. It was a mix of tech-savvy and non tech savvy users. Of the three designs, in all cases they expressed a strong preference for the design above. In all cases they recognized and understood its function as a checkbox. That was the result I was my hoping for but I wanted to check my gut feelings on this one out before settling on it. I'm super happy with how these checkboxes and radio buttons have turned out so thanks for all the great feedback!

I like the look of those! The only concern I have is that checkboxes with a square already exist (I know that at least Windows has them) and mean something else, see e.g. http://www.java2s.com/Tutorial/CSharp/0 ... eckBox.htm
Also, I personally feel that the distinction between checkboxes and radiobuttons are less clear with the new design, but your test results seem to indicate otherwise.
So for practical reasons I prefer something like the previous design, or just having a blue check inside the box, even though I think the square looks neat.

I also want to echo the previous comment about the buttons, they pretty much blend in with the background. Lighter or darker colors would make them stand out a bit more, which I think would be good.

Hans wrote: The only concern I have is that checkboxes with a square already exist (I know that at least Windows has them) and mean something else, see e.g. http://www.java2s.com/Tutorial/CSharp/0 ... eckBox.htm
Also, I personally feel that the distinction between checkboxes and radiobuttons are less clear with the new design, but your test results seem to indicate otherwise.
So for practical reasons I prefer something like the previous design, or just having a blue check inside the box, even though I think the square looks neat.

Great observation Hans, thanks! Actually, it won't be terribly difficult to solve the tri-state checkbox design within the language of the current design. What matters isn't that the "check" is a square, What matters is finding a solution than can clearly represent a mix of the checked and unchecked states. I already have several ideas that I'll implement this weekend.

Yes Qt has tri-state checkboxes too and KDE even uses them in a few places. But I think it's a solvable problem.

alake wrote:Great observation Hans, thanks! Actually, it won't be terribly difficult to solve the tri-state checkbox design within the language of the current design. What matters isn't that the "check" is a square, What matters is finding a solution than can clearly represent a mix of the checked and unchecked states. I already have several ideas that I'll implement this weekend.

I guess the obvious answer is a triangle (the square cut diagonally into two parts, one blue and one empty).

or a different color of the inner square(orange maybe?)

alake wrote:Great observation Hans, thanks! Actually, it won't be terribly difficult to solve the tri-state checkbox design within the language of the current design. What matters isn't that the "check" is a square, What matters is finding a solution than can clearly represent a mix of the checked and unchecked states. I already have several ideas that I'll implement this weekend.

So my main concern was about consistency. It would be bad if the new style used a square for the "checked" state, while other styles and operating systems use a square for a different purpose. (Personally I think that tri-state checkboxes should just disappear from Earth, but that's another discussion. )

I like that you did the user test, which seems to indicate that users were not confused about the new usage of the square. My guess is that most people aren't familiar with the tri-state checkbox, so they don't associate "square within a checkbox" with what it currently means.

If we keep the current style, I think that GreatEmerald suggestion about a triangle sounds great. I can imagine it looking good and it makes a lot of sense to me (more than the current usage of a check/square).

@scummos:

Can you give some examples of where they're used in KDE? I can't think of any place at the top of my head, and I'm curious about how they look like in Oxygen.

Hi.
I wanted to throw my two cents into this discussion

First of all - it's my first post here so 'Hi everyone' again.
I wanted to prise everyone working on new style. It looks better and better every time when I peek into this topic.
Up till now I just looked at pictures but few moments ago I ran qmlscene to have real-time experience and it's amazing.

I noticed one thing. The hover event over SpinBox arrows does not work. I mean the control should be highlighted but it isn't. I don't now if it's Qt bug or if it can be done, but it's a little, bothering thing when you notice it.

Second thing - I noticed a little inconsistency in controls highlighting:
- textArea control have 1px highlighted border when it's focused, and it does not have highlighted border when 'hovered'. It's different then every other active rectangular control.
- It's my suggestion but shouldn't 2px border appear on buttons/comboboxes when they are clicked? I think it's fitting well with 2px border when text controls are focused.
Here's a picture of how it would look (inactive/hovered/pressed):


And here is code for BreezeStyle.qml (It's changing tabs too - I wanted to change them, but it didn't go well)

Code: Select all

import QtQuick 2.0
import QtQuick.Controls.Styles 1.1
import QtGraphicalEffects 1.0
import "ColorUtils.js" as ColorUtils

Style {
    id:root
    SystemPalette { id: sysPalette; colorGroup: SystemPalette.Active }

    busyIndicatorStyle: BusyIndicatorStyle {
        indicator: Item {
            implicitHeight: 32
            implicitWidth: 32
            Rectangle {
                anchors.centerIn: parent
                height: 24
                width: 24
                radius: 12
                border.width: 2
                border.color: sysPalette.highlight
                color: "transparent"
                transform: Rotation {
                    origin.x: 12
                    origin.y: 12
                    axis { x: 1; y: 0; z: 0 }
                    NumberAnimation on angle {
                        running: control.running
                        loops: Animation.Infinite
                        duration: 1000
                        from: 0 ; to: 360
                    }
                }
            }
            Rectangle {
                anchors.centerIn: parent
                height: 12
                width: 12
                radius: 6
                border.width: 2
                border.color: sysPalette.highlight
                color: sysPalette.highlight
            }
            NumberAnimation on rotation {
                running: control.running
                loops: Animation.Infinite
                duration: 3000
                from: 0 ; to: 360
            }
        }
    }

    buttonStyle: ButtonStyle {
        background: Item {
            property color borderColor: ColorUtils.blendColors(sysPalette.windowText, sysPalette.window, 0.75)
            opacity: control.enabled ? 1.0 : 0.5
            implicitHeight: 32
            implicitWidth: 96
            Rectangle {
                anchors.centerIn: parent
                implicitHeight: parent.height - 2
                implicitWidth: parent.width - 2
                radius: 2
                color: ColorUtils.fullColorString(sysPalette.shadow, 0.2)
                transform: Translate {x: 1; y: 1}
            }
            Rectangle {
                anchors.centerIn: parent
                implicitWidth: parent.width - 2
                implicitHeight: parent.height - 2
                border.width:    control.activeFocus ? 0:
                        control.pressed ? 2 :
                        1
                border.color: (control.activeFocus || control.hovered || control.pressed) ? sysPalette.highlight : borderColor
                radius: 2
                color: control.pressed ? sysPalette.highlight : control.activeFocus ? sysPalette.highlight : sysPalette.button
                gradient: Gradient {
                    GradientStop {
                        position: 0.0
                        color: control.activeFocus ? ColorUtils.shadeColor2(sysPalette.highlight, 0.1) :
                                                     ColorUtils.shadeColor2(sysPalette.button, 0.05)
                    }
                    GradientStop {
                        position: 1.0
                        color: control.activeFocus ? ColorUtils.shadeColor2(sysPalette.highlight, -0.07) :
                                                     ColorUtils.shadeColor2(sysPalette.button, -0.02)
                    }
                }
                transform: Translate {x: control.pressed ? 1 : 0; y: control.pressed ? 1 : 0}
            }
        }

        label: Item {
            opacity: control.enabled ? 1.0 : 0.5
            implicitWidth: __buttonText.implicitWidth + 16
            implicitHeight: __buttonText.implicitHeight + 8
            Text {
                id:__buttonText
                anchors.centerIn: parent
                text: control.text
                color: control.activeFocus ? sysPalette.highlightedText : sysPalette.buttonText
            }
            transform: Translate {x: control.pressed ? 1 : 0; y: control.pressed ? 1 : 0}
        }

    }

    checkBoxStyle: CheckBoxStyle {
        indicator: Item {
            property color enabledCheckedColor: sysPalette.highlight
            property color enabledNotCheckedColor: ColorUtils.blendColors(sysPalette.windowText, sysPalette.window, 0.5)
            property color hoveredColor: ColorUtils.blendColors(sysPalette.highlight, sysPalette.window, 0.5)
            property color disabledColor: ColorUtils.blendColors(sysPalette.windowText, sysPalette.window, 0.6)
            opacity: control.enabled ? 1.0 : 0.5
            implicitHeight: 28
            implicitWidth: 28
            Rectangle {
                visible: control.enabled
                anchors.centerIn: parent
                implicitHeight: parent.height - 8
                implicitWidth: parent.width - 8
                radius: 3
                color: ColorUtils.fullColorString(sysPalette.shadow, 0.15)
                transform: Translate {x: 1; y: 1}
            }
            Rectangle {
                anchors.centerIn: parent
                implicitWidth: parent.width - 8
                implicitHeight: parent.height - 8
                border.width: 2
                border.color: control.enabled ? (control.checked ? enabledCheckedColor : enabledNotCheckedColor) : disabledColor
                radius: 3
                color: sysPalette.window
                transform: Translate {x: control.pressed ? 1 : 0; y: control.pressed ? 1 : 0}
            }
            Rectangle {
                visible: control.hovered
                anchors.centerIn: parent
                implicitWidth: parent.width - 8
                implicitHeight: parent.height - 8
                border.width: 2
                border.color: hoveredColor
                radius: 3
                color: sysPalette.window
                transform: Translate {x: control.pressed ? 1 : 0; y: control.pressed ? 1 : 0}
            }
            Rectangle {
                visible: control.checked
                anchors.centerIn: parent
                color: control.enabled ? enabledCheckedColor : disabledColor
                height: 12
                width: 12
                transform: Translate {x: control.pressed ? 1 : 0; y: control.pressed ? 1 : 0}
            }
            Rectangle {
                visible: control.checked & control.hovered
                anchors.centerIn: parent
                color: hoveredColor
                height: 12
                width: 12
                transform: Translate {x: control.pressed ? 1 : 0; y: control.pressed ? 1 : 0}
            }

        }


        label: Item {
            opacity: control.enabled ? 1.0 : 0.5
            implicitWidth: __checkBoxtext.implicitWidth + 4
            implicitHeight: __checkBoxtext.implicitHeight + 4
            Rectangle {
                anchors {
                    left: parent.left
                    right: parent.right
                    bottom: parent.bottom
                }
                height: 1
                color: control.activeFocus ? sysPalette.highlight : "transparent"
            }
            Text {
                id: __checkBoxtext
                anchors.centerIn: parent
                text: control.text
                color: sysPalette.windowText
            }
        }
    }

    comboBoxStyle: ComboBoxStyle {
        background: Item {
            property color borderColor: ColorUtils.blendColors(sysPalette.windowText, sysPalette.window, 0.75)
            opacity: control.enabled ? 1.0 : 0.5
            implicitHeight: 32
            implicitWidth: 148
            Rectangle {
                visible: !control.editable
                anchors.centerIn: parent
                implicitHeight: parent.height - 2
                implicitWidth: parent.width - 2
                radius: 2
                color: ColorUtils.fullColorString(sysPalette.shadow, 0.2)
                transform: Translate {x: 1; y: 1}
            }
            Rectangle {
                visible: !control.editable
                anchors.centerIn: parent
                implicitWidth: parent.width - 2
                implicitHeight: parent.height - 2
                border.width: control.pressed ? 2 : control.activeFocus ? 0: 1
                border.color: (control.activeFocus || control.hovered || control.pressed) ? sysPalette.highlight : borderColor
                radius: 2
                color: control.pressed || control.activeFocus ? sysPalette.highlight : sysPalette.button
                gradient: Gradient {
                    GradientStop {
                        position: 0.0
                        color: control.activeFocus ? ColorUtils.shadeColor2(sysPalette.highlight, 0.1) :
                                                     ColorUtils.shadeColor2(sysPalette.button, 0.05)
                    }
                    GradientStop {
                        position: 1.0
                        color: control.activeFocus ? ColorUtils.shadeColor2(sysPalette.highlight, -0.07) :
                                                     ColorUtils.shadeColor2(sysPalette.button, -0.02)
                    }
                }
                transform: Translate {x: control.pressed ? 1 : 0; y: control.pressed ? 1 : 0}
            }
            TextFieldBackground {
                visible: control.editable
            }


            DropDownMark {
                anchors.verticalCenter: parent.verticalCenter
                anchors.right: parent.right
                anchors.rightMargin: 6
            }
        }
        drowDownButtonWidth: 22
        label: Item {
            opacity: control.enabled ? 1.0 : 0.5
            implicitWidth: __comboButtonText.implicitWidth + 8
            implicitHeight: __comboButtonText.implicitHeight + 8
            Text {
                id:__comboButtonText
                width: 148 - 20 - 4
                anchors.left: parent.left
                anchors.leftMargin: 4
                anchors.verticalCenter: parent.verticalCenter
                text: control.currentText
                elide: Text.ElideRight
                color: control.activeFocus ? sysPalette.highlightedText : sysPalette.buttonText
            }
            transform: Translate {x: control.pressed ? 1 : 0; y: control.pressed ? 1 : 0}
        }
        __editor: Item { visible: false}
    }

    progressbarStyle: ProgressBarStyle {
        background: Rectangle {
            opacity: control.enabled ? 1.0 : 0.5
            anchors.centerIn: parent
            implicitWidth: 300
            implicitHeight: 16
            color: "transparent"

            Rectangle {
                anchors.fill: parent
                anchors.margins: 5
                color: ColorUtils.fullColorString(sysPalette.buttonText, 0.3)
                radius: 3
            }
        }

        progress: Rectangle {
            opacity: control.enabled ? 1.0 : 0.5
            anchors.centerIn: parent
            implicitWidth: 300
            implicitHeight: 16
            color: "transparent"
            Rectangle {
                anchors.fill: parent
                anchors.margins: 5
                color: sysPalette.highlight
                radius: 3
            }
        }
    }

    radioButtonStyle: RadioButtonStyle {
        indicator: Item {
            property color enabledCheckedColor: sysPalette.highlight
            property color enabledNotCheckedColor: ColorUtils.blendColors(sysPalette.windowText, sysPalette.window, 0.5)
            property color hoveredColor: ColorUtils.blendColors(sysPalette.highlight, sysPalette.window, 0.5)
            property color disabledColor: ColorUtils.blendColors(sysPalette.windowText, sysPalette.window, 0.4)
            opacity: control.enabled ? 1.0 : 0.5
            width: 28
            height: 28

            Rectangle {
                visible: control.enabled
                anchors.centerIn: parent
                height: 20
                width: 20
                radius: 11
                color: ColorUtils.fullColorString(sysPalette.shadow, 0.15)
                transform: Translate { x: 1; y: 1 }
            }
            Rectangle {
                anchors.centerIn: parent
                height: 20
                width: 20
                radius: 10
                color: sysPalette.window
                border {
                    width: 2
                    color: control.checked ? (control.enabled ? enabledCheckedColor : disabledColor) : enabledNotCheckedColor
                }
                transform: Translate {x: control.pressed ? 1 : 0; y: control.pressed ? 1 : 0}
            }
            Rectangle {
                visible: control.hovered
                anchors.centerIn: parent
                height: 20
                width: 20
                radius: 10
                color: sysPalette.window
                border {
                    width: 2
                    color: hoveredColor
                }
                transform: Translate {x: control.pressed ? 1 : 0; y: control.pressed ? 1 : 0}
            }
            Rectangle {
                visible: control.checked
                anchors.centerIn: parent
                height: 12
                width: 12
                radius: 6
                color: control.enabled ? enabledCheckedColor : disabledColor
                transform: Translate {x: control.pressed ? 1 : 0; y: control.pressed ? 1 : 0}
            }
            Rectangle {
                visible: control.checked & control.hovered
                anchors.centerIn: parent
                height: 12
                width: 12
                radius: 6
                color: hoveredColor
                transform: Translate {x: control.pressed ? 1 : 0; y: control.pressed ? 1 : 0}
            }
        }

        label: Rectangle {
            opacity: control.enabled ? 1.0 : 0.5
            implicitWidth: rBText.implicitWidth + 4
            implicitHeight: rBText.implicitHeight + 4
            color: "transparent"

            Rectangle {
                visible: control.activeFocus
                anchors {
                    left: parent.left
                    right: parent.right
                    bottom: parent.bottom
                }
                height: 1
                color: sysPalette.highlight
            }

            Text {
                id:rBText
                anchors.centerIn: parent
                text: control.text
                color: sysPalette.windowText
            }
        }

    }

    scrollViewStyle: ScrollViewStyle {
        frame: Rectangle {
            color:"transparent"
        }
        scrollBarBackground: Rectangle {
            opacity: control.enabled ? 1.0 : 0.5
            anchors.centerIn: parent
            implicitWidth: styleData.horizontal ? 300 : 20
            implicitHeight: styleData.horizontal ? 20 : 300
            color: "transparent"

            Rectangle {
                anchors.fill: parent
                anchors.leftMargin: 5
                anchors.rightMargin: 5
                color: ColorUtils.fullColorString(sysPalette.text, 0.3)
                radius: 5
            }
        }
        handle: Rectangle {
            opacity: control.enabled ? 1.0 : 0.5
            anchors.centerIn: parent
            implicitWidth: styleData.horizontal ? 300 : 20
            implicitHeight: styleData.horizontal ? 20 : 300
            color: "transparent"
            Rectangle {
                anchors.fill: parent
                anchors.leftMargin: 5
                anchors.rightMargin: 5
                color: control.activeFocus || styleData.hovered ? sysPalette.highlight : ColorUtils.fullColorString(sysPalette.text, 0.5)
                radius: 5
            }
        }
        incrementControl: ScrollDownArrow {}
        decrementControl: ScrollUpArrow {}
    }

    sliderStyle: SliderStyle {
        groove: Rectangle {
            opacity: control.enabled ? 1.0 : 0.5
            id: control
            anchors.centerIn: parent
            implicitWidth: 300
            implicitHeight: 16
            color: "transparent"

            Rectangle {
                anchors.fill: parent
                anchors.margins: 5
                color: ColorUtils.fullColorString(sysPalette.windowText, 0.3)
                radius: 3
            }

            Rectangle {
                id: grooveFill
                anchors.verticalCenter: parent.verticalCenter
                anchors.left: parent.left
                anchors.margins: 5
                width: styleData.handlePosition
                height:6
                color: sysPalette.highlight
                radius: 3
            }
        }

        handle: Item {
            property color borderColor: ColorUtils.blendColors(sysPalette.windowText, sysPalette.window, 0.75)
            opacity: control.enabled ? 1.0 : 0.5
            implicitWidth: 20
            implicitHeight: 20
            Rectangle {
                visible: control.enabled
                anchors.centerIn: parent
                height: 20
                width: 20
                radius: 10
                color: ColorUtils.fullColorString(sysPalette.shadow, 0.15)
                transform: Translate { x: 0; y: 0 }
            }

            Rectangle {
                id: sHandle
                anchors.centerIn: parent
                height: 20
                width: 20
                radius: 10
                border.width: control.activeFocus ? 2 : 1
                border.color: (control.activeFocus || control.hovered || control.pressed) ? sysPalette.highlight : borderColor
                color: sysPalette.button
                transform: Translate {x: control.pressed ? 0 : -1; y: control.pressed ? 0 : -1}
            }
        }
    }

    spinBoxStyle: SpinBoxStyle {
        background: TextFieldBackground{
      }

        incrementControl: ScrollUpArrow {
            opacity: control.enabled ? 1.0 : 0.5
            transform: Translate{ x: 0; y: 1}
        }
        decrementControl: ScrollDownArrow {
            opacity: control.enabled ? 1.0 : 0.5
            transform: Translate{ x: 0; y: -1}
        }
    }

    statusBarStyle: StatusBarStyle {
        padding {
            left: 4
            right: 4
            top: 4
            bottom: 4
        }
        background: Rectangle {
            implicitHeight: 16
            implicitWidth: 200
            color: sysPalette.window
        }
    }

    switchStyle: SwitchStyle {
        groove: Rectangle {
            opacity: control.enabled ? 1.0 : 0.5
            implicitWidth: 48
            implicitHeight: 24
            radius: 12
            color: control.checked ? ColorUtils.fullColorString(sysPalette.highlight, 1) : ColorUtils.fullColorString(sysPalette.buttonText, 0.3)
        }

        handle: Rectangle {
            implicitWidth: 24
            implicitHeight: 24
            width: 24
            height: 24
            color: "transparent"
            Rectangle {
                opacity: control.enabled ? 1.0 : 0.5
                anchors.centerIn: parent
                width: 22
                height: 22
                radius: 11
                color: sysPalette.window
                border.width: control.activeFocus ? 2 : 1
                border.color: (control.activeFocus || control.hovered) ? sysPalette.highlight : ColorUtils.fullColorString(sysPalette.buttonText, 0.1)
           }
        }
    }

    tabViewStyle: TabViewStyle {
        frameOverlap: 1
        tabOverlap: 0
        tabsAlignment: Qt.AlignHCenter
        tab: Rectangle {
            color: styleData.selected ? ColorUtils.blendColors(sysPalette.window, sysPalette.base, 0.3) :
                                        //styleData.hovered ? ColorUtils.fullColorString(sysPalette.highlight, 0.2) :
                              //ColorUtils.fullColorString(sysPalette.windowText, 0.2)
                              sysPalette.window
            implicitWidth: Math.max(text.implicitWidth + 8, 80)
            implicitHeight: Math.max(text.implicitHeight + 8, 28)
            border.color:    styleData.selected ? sysPalette.highlight :
                     styleData.hovered ? ColorUtils.fullColorString(sysPalette.highlight, 0.2) :
                     ColorUtils.blendColors(sysPalette.window, sysPalette.windowText, 0.25)
            border.width: styleData.selected || styleData.hovered ? 1 : 1
            radius: 2
            Text {
                id: text
                anchors.centerIn: parent
                text: styleData.title
                color: sysPalette.windowText
            }
            Rectangle {
                anchors.bottom: text.bottom
                anchors.horizontalCenter: parent.horizontalCenter
                width: text.implicitWidth
                height: 1
                color: sysPalette.highlight
                visible: styleData.activeFocus && styleData.selected
            }
            Rectangle {
                anchors.bottom: parent.bottom
                anchors.horizontalCenter: parent.horizontalCenter
                width: parent.width - 2
                height: styleData.selected ? 2 : 1
                color: styleData.selected ? ColorUtils.blendColors(sysPalette.window, sysPalette.base, 0.3) : ColorUtils.blendColors(sysPalette.window, sysPalette.windowText, 0.25)
              }
        }

        frame: Item {
            Rectangle {
                implicitHeight: 300
                implicitWidth: parent.width
                anchors.fill: parent
                border.color: ColorUtils.blendColors(sysPalette.window, sysPalette.windowText, 0.25)
                border.width: 1
                color: ColorUtils.blendColors(sysPalette.window, sysPalette.base, 0.3)
                radius: 2
            }
        }
    }

    textAreaStyle: TextAreaStyle {
        frame: Rectangle {
            opacity: control.enabled ? 1.0 : 0.5
            implicitHeight: 300
            implicitWidth: 300
            border.width: control.activeFocus ? 2 : 1
            border.color: (control.activeFocus || control.hovered) ? sysPalette.highlight : ColorUtils.fullColorString(sysPalette.windowText, 0.3)
            radius: 2
            color: sysPalette.base
        }
        scrollBarBackground: Rectangle {
            opacity: control.enabled ? 1.0 : 0.5
            anchors.centerIn: parent
            implicitWidth: styleData.horizontal ? 300 : 20
            implicitHeight: styleData.horizontal ? 20 : 300
            color: sysPalette.base

            Rectangle {
                anchors.fill: parent
                anchors.leftMargin: 5
                anchors.rightMargin: 5
                color: ColorUtils.fullColorString(sysPalette.text, 0.4)
                radius: 5
            }
        }
        handle: Rectangle {
            opacity: control.enabled ? 1.0 : 0.5
            anchors.centerIn: parent
            implicitWidth: styleData.horizontal ? 300 : 20
            implicitHeight: styleData.horizontal ? 20 : 300
            color: "transparent"
            Rectangle {
                anchors.fill: parent
                anchors.leftMargin: 5
                anchors.rightMargin: 5
                color: control.activeFocus || styleData.hovered ? sysPalette.highlight : ColorUtils.fullColorString(sysPalette.text, 0.5)
                radius: 5
            }
        }
        incrementControl: ScrollDownArrow {
            color: sysPalette.base
        }

        decrementControl: ScrollUpArrow {
            color: sysPalette.base
        }
    }

    textFieldStyle: TextFieldStyle {
        background: TextFieldBackground{}
    }

    toolBarStyle: ToolBarStyle {
        padding {
            left: 4
            right: 4
            top: 4
            bottom: 4
        }
        background: Rectangle {
            implicitHeight: 16
            implicitWidth: 200
            color: sysPalette.window
        }
    }

    toolButtonStyle: ButtonStyle {
        background: Item {
            opacity: control.enabled ? 1.0 : 0.5
            implicitHeight: 32
            implicitWidth: 96
            Rectangle {
                anchors.centerIn: parent
                implicitWidth: parent.width - 2
                implicitHeight: parent.height - 2
                border.width: control.pressed? 2 : 1
                border.color: (control.activeFocus || control.hovered) ? sysPalette.highlight : ColorUtils.fullColorString(sysPalette.windowText, 0.25)
                radius: 2
                color: control.checked ? sysPalette.highlight : sysPalette.button
            }
            visible: control.hovered || control.activeFocus || control.checked
        }

        label: Item {
            opacity: control.enabled ? 1.0 : 0.5
            implicitWidth: __toolButtonText.implicitWidth + 16
            implicitHeight: __toolButtonText.implicitHeight + 8
            Text {
                id:__toolButtonText
                anchors.centerIn: parent
                text: control.text
                color: control.checked  ? sysPalette.highlightedText : sysPalette.buttonText
            }
        }
    }
}


Also - sorry for my English. It's not my native language. I hope everything I wrote is understandable.

jsirek wrote:I noticed one thing. The hover event over SpinBox arrows does not work. I mean the control should be highlighted but it isn't. I don't now if it's Qt bug or if it can be done, but it's a little, bothering thing when you notice it.

Nice catch. The reason for this seems to be that the hovered property in the SpinBox control is defined as

Code: Select all

readonly property alias hovered: mouseArea.containsMouse

and the MouseAreas of the up and down arrows catch the hover events on them and don't let them through to the global mouseArea. This could perhaps be considered as a bug? It could be fixed by

Code: Select all

readonly property alias hovered: mouseArea.containsMouse || mouseUp.containsMouse || mouseDown.containsMouse

Anyway, we can work around this by checking for the styleData.upHovered and styleData.downHovered properties.

On a related note, looking closer at ScrollUpArrow.qml, it seems that there is a hover effect on the arrows that won't work. This line:

Code: Select all

color: (control.pressed || upArrowRoot.hovered || styleData.pressed || styleData.hovered) ? sysPalette.highlight : sysPalette.text

should be replaced with

Code: Select all

color: (styleData.upHovered  && styleData.upEnabled)? sysPalette.highlight : sysPalette.text

By the way, the properties in the styleData of a given control seem to be completely undocumented. According to the source code the SpinBox control has these styleData properties:

Code: Select all

   __styleData: QtObject {
        readonly property bool upEnabled: value != maximumValue;
        readonly property alias upHovered: mouseUp.containsMouse
        readonly property alias upPressed: mouseUp.pressed

        readonly property bool downEnabled: value != minimumValue;
        readonly property alias downPressed: mouseDown.pressed
        readonly property alias downHovered: mouseDown.containsMouse

        readonly property int contentHeight: Math.max(input.implicitHeight, 16)
        readonly property int contentWidth: Math.max(maxSizeHint.implicitWidth, minSizeHint.implicitWidth)
    }

A documentation bug?

I noticed there's quite a lot of code duplication in ScrollUpArrow.qml, ScrollDownArrow.qml and DropDownMark.qml. I combined them all into one component, ScrollArrow.qml:

Code: Select all

import QtQuick 2.0

Rectangle {
    id: arrowRoot
    implicitWidth: 20
    implicitHeight: 20
    color: "transparent"
    property color arrowColor

    Item {
        width: upStroke.width * 2
        height: 6
        anchors.centerIn: parent
        Rectangle {
            id: upStroke
            x: 0
            y: 0
            width: 6
            height: 2
            radius: 1
            smooth: true
            transform: Rotation {
                origin.x: upStroke.width
                origin.y: upStroke.height / 2
                angle: -45
            }
            color: arrowColor
        }
        Rectangle {
            anchors.left: upStroke.right
            anchors.top:  upStroke.top
            width: upStroke.width
            height: upStroke.height
            radius: upStroke.radius
            smooth: true
            transform: Rotation {
                origin.x: 0
                origin.y: upStroke.height / 2
                angle: 45
            }
            color: arrowColor
        }
    }
}


Here's a diff of changes needed for BreezeStyle.qml:

Code: Select all

diff --git a/BreezeStyle.qml b/BreezeStyle.qml
index 619a656..15d0d06 100644
--- a/BreezeStyle.qml
+++ b/BreezeStyle.qml
@@ -234,10 +234,14 @@ Style {
             }
 
 
-            DropDownMark {
+            ScrollArrow {
                 anchors.verticalCenter: parent.verticalCenter
                 anchors.right: parent.right
                 anchors.rightMargin: 6
+                implicitWidth: 12
+                implicitHeight: 6
+                rotation: control.pressed ? 0 : 180
+                arrowColor: (control.activeFocus && !control.editable) ? sysPalette.highlightedText : sysPalette.buttonText
             }
         }
         drowDownButtonWidth: 22
@@ -415,8 +419,14 @@ Style {
                 radius: 5
             }
         }
-        incrementControl: ScrollDownArrow {}
-        decrementControl: ScrollUpArrow {}
+        incrementControl: ScrollArrow {
+            arrowColor: styleData.hovered ? sysPalette.highlight : sysPalette.text
+            rotation: styleData.horizontal ? 90 : 180
+        }
+        decrementControl: ScrollArrow {
+            arrowColor: styleData.hovered ? sysPalette.highlight : sysPalette.text
+            rotation: styleData.horizontal ? -90 : 0
+        }
     }
 
     sliderStyle: SliderStyle {
@@ -479,11 +489,14 @@ Style {
     spinBoxStyle: SpinBoxStyle {
         background: TextFieldBackground{}
 
-        incrementControl: ScrollUpArrow {
+        incrementControl: ScrollArrow {
+            arrowColor: (styleData.upHovered && styleData.upEnabled) ? sysPalette.highlight : sysPalette.text
             opacity: control.enabled ? 1.0 : 0.5
             transform: Translate{ x: 0; y: 1}
         }
-        decrementControl: ScrollDownArrow {
+        decrementControl: ScrollArrow {
+            arrowColor: (styleData.downHovered && styleData.downEnabled) ? sysPalette.highlight : sysPalette.text
+            rotation: 180
             opacity: control.enabled ? 1.0 : 0.5
             transform: Translate{ x: 0; y: -1}
         }
@@ -618,12 +631,13 @@ Style {
                 radius: 5
             }
         }
-        incrementControl: ScrollDownArrow {
-            color: sysPalette.base
+        incrementControl: ScrollArrow {
+            arrowColor: styleData.hovered ? sysPalette.highlight : sysPalette.text
+            rotation: styleData.horizontal ? 90 : 180
         }
-
-        decrementControl: ScrollUpArrow {
-            color: sysPalette.base
+        decrementControl: ScrollArrow {
+            arrowColor: styleData.hovered ? sysPalette.highlight : sysPalette.text
+            rotation: styleData.horizontal ? -90 : 0
         }
     }
 


The new busy indicator is pretty cool. Something I didn't even know we could do. Everyone seems to love the new busy indicator. After considering this for a day or so hoping that it would grow on me or figure out why it bugged me so much. I think the problem is that it is inconsistent with the rest of the style. Same issue I had with the hightlight on the spinning ball. Way to 3d for the style. In this case so much so that it is worse then the highlight changing directions. If it is on screen the user's eye will be attracted there first and always. Sorry I do not have code or a good suggestion to fix this issue.

Thanks for the awesome detective work, patches and feedback everyone! I'll push some updates soon.

Ok, I made a few updates. The updates are pretty straightforward:

• I updated the checkbox tristate based on GreatEmerald's feedback.
• I increased corner rounding based on Tuukka's latest suggestion, which works quite well.
• Lots of little fixes and QML code cleanups including some of the super helpful feedback many folks here shared. Thanks!
• Indeterminate progress bar design
• Complete state change interaction feedback for most controls (button press, hover) and a few subtle transitions to keep the design feeling light and responsive.

I wasn't going to bother including a screenshot since it tells so very little at this point. The best way to experience the style is to get it directly from the repo as described in the original post (and by others here) and running the demo app.

Now, where are we? At this point, we've made enough progress on our original objectives for starting this thread that I'm comfortable that we're really on the tail end of design work for a first design release. Thanks so much for your amazing participation!!! I never imagined that we could iterate so quickly, so efficiently in such a short time. I updated the progress report.

So what does this mean? The bulk of any remaining work on for a first design release of this style are implementation details (bug fixes, packaging for use as a default style, etc.) which I'll work with developers on - if anyone here wants to help out with that feel free to chime in. We'll do another design cycle like this in the future once we get some real-world validation and feedback. If you made a suggestion, rest assured that I tried it - every suggestion was seriously considered. Some feedback got incorporated directly, some were modified a touch, some served as inspiration for another design choice. Hopefully, like me, many of you will have learned something interesting along the way and are motivated to put together some QML styles of your own to share. Hey, do like I did and start a thread and get the positive, helpful feedback of our fellow community designers! We can request the inclusion of any successful design you come up with as an option and, who knows it might be so good that it gets picked as the default in Plasma or by a distro.

Ok, so I have to beg just a couple more favors from the community:

• We would be immensely greatful if someone would be willing to help us gen up a QtCurve settings theme that mimics the design we came up with here as closely as possible. You can start with the QtCurve settings theme file including in the work-in-progress pack Jens several weeks back .
• There is one small area of the design that remains somewhat open in the near term: the tab design. I'll change it in a heartbeat if someone here comes up with a cool design. Remember it doesn't have to be QML. Mock it up in inkscape or GIMP or whatever.

Once again, THANKS for all the brilliant feedback and positive energy everyone here provided.

Much respect.

P.S. For clarity, "first design release" does not necessarily mean it will make the first release of Plasma 2 (which is getting close).