More styling improvements for Base Style

- Better scalability - Retina support - Added glow filter to Private - Added focus rects Change-Id: I2ec36a9db546c21e20408429c5e17fde8d67b7c3 Reviewed-by: Gabriel de Dietrich <gabriel.dedietrich@digia.com>
author: Jens Bache-Wiig <jens.bache-wiig@digia.com> 2013-10-25 13:20:38 +0200
committer: The Qt Project <gerrit-noreply@qt-project.org> 2013-10-31 13:23:58 +0100
commit: fd8d7261cc25a7a2efcf42c59f9f11d0280e4383 (patch)
tree: 3017fb73886fa5c6966e65b7d8d484a2cd54732f /src/controls/Styles/Base
parent: 6c5bcbf23928094338da90be2cd4a2787104cf03 (diff)
13 files changed, 361 insertions, 262 deletions
diff --git a/src/controls/Styles/Base/ButtonStyle.qml b/src/controls/Styles/Base/ButtonStyle.qml
index d6a87540b..ad14095c5 100644
--- a/src/controls/Styles/Base/ButtonStyle.qml
+++ b/src/controls/Styles/Base/ButtonStyle.qml
@@ -89,38 +89,34 @@ Style {
     padding {
         top: 4
         left: 4
-        right:  control.menu !== null ? 16 : 4
+        right:  control.menu !== null ? Math.round(TextSingleton.implicitHeight * 0.5) : 4
         bottom: 4
     }
 
     /*! This defines the background of the button. */
     property Component background: Item {
-        implicitWidth: 100
-        implicitHeight: Math.max(25, Math.round(TextSingleton.implicitHeight * 1.1))
-        BorderImage {
+        implicitWidth: Math.round(TextSingleton.implicitHeight * 4.5)
+        implicitHeight: Math.max(25, Math.round(TextSingleton.implicitHeight * 1.2))
+        Rectangle {
             anchors.fill: parent
-            anchors.margins: -1
-            source: control.pressed || (control.checkable && control.checked) ? "images/button_down.png" : "images/button.png"
-            border.top: 6
-            border.bottom: 6
-            border.left: 6
-            border.right: 6
-            anchors.bottomMargin: -1
-            BorderImage {
-                anchors.fill: parent
-                source: "images/focusframe.png"
-                opacity: control.activeFocus ? 1 : 0
-                border.left: 4
-                border.right: 4
-                border.top: 4
-                border.bottom: 4
+            anchors.bottomMargin: control.pressed ? 0 : -1
+            color: "#10000000"
+            radius: baserect.radius
+        }
+        Rectangle {
+            id: baserect
+            gradient: Gradient {
+                GradientStop {color: control.pressed ? "#aaa" : "#fefefe" ; position: 0}
+                GradientStop {color: control.pressed ? "#ccc" : "#e3e3e3" ; position: control.pressed ? 0.1: 1}
             }
+            radius: TextSingleton.implicitHeight * 0.16
+            anchors.fill: parent
+            border.color: control.activeFocus ? "#47b" : "#999"
             Rectangle {
                 anchors.fill: parent
-                anchors.margins: 2
-                radius: 2
-                color: "white"
-                opacity: control.hovered || control.activeFocus ? 0.2 : 0
+                radius: parent.radius
+                color: control.activeFocus ? "#47b" : "white"
+                opacity: control.hovered || control.activeFocus ? 0.1 : 0
                 Behavior on opacity {NumberAnimation{ duration: 100 }}
             }
         }
@@ -130,8 +126,8 @@ Style {
             source: "images/arrow-down.png"
             anchors.verticalCenter: parent.verticalCenter
             anchors.right: parent.right
-            anchors.rightMargin: 8
-            opacity: control.enabled ? 0.7 : 0.5
+            anchors.rightMargin: padding.right
+            opacity: control.enabled ? 0.6 : 0.5
         }
     }
 
diff --git a/src/controls/Styles/Base/CheckBoxStyle.qml b/src/controls/Styles/Base/CheckBoxStyle.qml
index d045d2026..8fb58207c 100644
--- a/src/controls/Styles/Base/CheckBoxStyle.qml
+++ b/src/controls/Styles/Base/CheckBoxStyle.qml
@@ -39,6 +39,7 @@
 ****************************************************************************/
 import QtQuick 2.1
 import QtQuick.Controls 1.1
+import QtQuick.Window 2.1
 import QtQuick.Controls.Private 1.0
 
 /*!
@@ -84,58 +85,79 @@ Style {
     }
 
     /*! This defines the text label. */
-    property Component label: Text {
-        text: control.text
-        color: __syspal.text
-        renderType: Text.NativeRendering
+    property Component label: Item {
+        implicitWidth: text.implicitWidth + 2
+        implicitHeight: text.implicitHeight
+        Rectangle {
+            anchors.fill: text
+            anchors.margins: -1
+            anchors.leftMargin: -3
+            anchors.rightMargin: -3
+            visible: control.activeFocus
+            height: 6
+            radius: 3
+            color: "#224f9fef"
+            border.color: "#47b"
+            opacity: 0.6
+        }
+        Text {
+            id: text
+            text: control.text
+            anchors.centerIn: parent
+            color: __syspal.text
+            renderType: Text.NativeRendering
+        }
     }
     /*! The background under indicator and label. */
     property Component background
 
     /*! The spacing between indicator and label. */
-    property int spacing: 4
+    property int spacing: Math.round(TextSingleton.implicitHeight/4)
 
     /*! This defines the indicator button. */
     property Component indicator:  Item {
-        implicitWidth: 16
-        implicitHeight: 18
-        BorderImage {
+        implicitWidth: Math.round(TextSingleton.implicitHeight)
+        height: width
+        Rectangle {
             anchors.fill: parent
-            source: "images/editbox.png"
-            anchors.margins: -1
-            border.top: 6
-            border.bottom: 6
-            border.left: 6
-            border.right: 6
-            anchors.bottomMargin: 1
-            BorderImage {
-                anchors.fill: parent
-                source: "images/focusframe.png"
-                visible: control.activeFocus
-                border.left: 4
-                border.right: 4
-                border.top: 4
-                border.bottom: 4
+            anchors.bottomMargin: -1
+            color: "#44ffffff"
+            radius: baserect.radius
+        }
+        Rectangle {
+            id: baserect
+            gradient: Gradient {
+                GradientStop {color: "#eee" ; position: 0}
+                GradientStop {color: control.pressed ? "#eee" : "#fff" ; position: 0.1}
+                GradientStop {color: "#fff" ; position: 1}
             }
+            radius: TextSingleton.implicitHeight * 0.16
+            anchors.fill: parent
+            border.color: control.activeFocus ? "#47b" : "#999"
+        }
+
+        Image {
+            source: "images/check.png"
+            opacity: control.checkedState === Qt.Checked ? control.enabled ? 1 : 0.5 : 0
+            anchors.centerIn: parent
+            anchors.verticalCenterOffset: 1
+            Behavior on opacity {NumberAnimation {duration: 80}}
         }
+
         Rectangle {
-            height: 16
-            width: 16
-            antialiasing: true
-            visible: control.checked
-            color: "#666"
-            radius: 1
-            anchors.margins: 3
-            anchors.bottomMargin: 5
             anchors.fill: parent
-            border.color: "#222"
-            opacity: control.enabled ? 1 : 0.5
-            Rectangle {
-                anchors.fill: parent
-                anchors.margins: 1
-                color: "transparent"
-                border.color: "#33ffffff"
+            anchors.margins: Math.round(baserect.radius)
+            antialiasing: true
+            gradient: Gradient {
+                GradientStop {color: control.pressed ? "#555" : "#999" ; position: 0}
+                GradientStop {color: "#555" ; position: 1}
             }
+            radius: baserect.radius - 1
+            anchors.centerIn: parent
+            anchors.alignWhenCentered: true
+            border.color: "#222"
+            Behavior on opacity {NumberAnimation {duration: 80}}
+            opacity: control.checkedState === Qt.PartiallyChecked ? control.enabled ? 1 : 0.5 : 0
         }
     }
 
diff --git a/src/controls/Styles/Base/ComboBoxStyle.qml b/src/controls/Styles/Base/ComboBoxStyle.qml
index 14a0ff473..2b4b237d2 100644
--- a/src/controls/Styles/Base/ComboBoxStyle.qml
+++ b/src/controls/Styles/Base/ComboBoxStyle.qml
@@ -64,79 +64,78 @@ Style {
     /*! The padding between the background and the label components. */
     padding { top: 4 ; left: 6 ; right: 6 ; bottom:4 }
 
+    /*! The size of the drop down button when the combobox is editable. */
+    property int drowDownButtonWidth: Math.round(TextSingleton.implicitHeight)
+
     /*! This defines the background of the button. */
     property Component background: Item {
-        implicitWidth: 125
-        implicitHeight: Math.max(25, Math.round(TextSingleton.implicitHeight * 1.1))
-        BorderImage {
+        implicitWidth: Math.round(TextSingleton.implicitHeight * 4.5)
+        implicitHeight: Math.max(25, Math.round(TextSingleton.implicitHeight * 1.2))
+        Rectangle {
             anchors.fill: parent
-            anchors.margins: -1
-            source: control.pressed ? "images/button_down.png" : "images/button.png"
-            border.top: 6
-            border.bottom: 6
-            border.left: 6
-            border.right: 6
-            anchors.bottomMargin: -1
-            BorderImage {
-                anchors.fill: parent
-                source: "images/focusframe.png"
-                opacity: control.activeFocus ? 1 : 0
-                border.left: 4
-                border.right: 4
-                border.top: 4
-                border.bottom: 4
+            anchors.bottomMargin: control.pressed ? 0 : -1
+            color: "#10000000"
+            radius: baserect.radius
+        }
+        Rectangle {
+            id: baserect
+            gradient: Gradient {
+                GradientStop {color: control.pressed ? "#bababa" : "#fefefe" ; position: 0}
+                GradientStop {color: control.pressed ? "#ccc" : "#e3e3e3" ; position: 1}
             }
+            radius: TextSingleton.implicitHeight * 0.16
+            anchors.fill: parent
+            border.color: control.activeFocus ? "#47b" : "#999"
             Rectangle {
                 anchors.fill: parent
-                anchors.margins: 2
-                radius: 2
-                color: "white"
-                opacity: control.hovered || control.activeFocus ? 0.2 : 0
+                radius: parent.radius
+                color: control.activeFocus ? "#47b" : "white"
+                opacity: control.hovered || control.activeFocus ? 0.1 : 0
                 Behavior on opacity {NumberAnimation{ duration: 100 }}
             }
-            Image {
-                id: imageItem
-                source: "images/arrow-down.png"
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.right: parent.right
-                anchors.rightMargin: 8
-                opacity: control.enabled ? 0.7 : 0.5
-            }
+        }
+        Image {
+            id: imageItem
+            visible: control.menu !== null
+            source: "images/arrow-down.png"
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.right: parent.right
+            anchors.rightMargin: drowDownButtonWidth / 2
+            opacity: control.enabled ? 0.6 : 0.3
         }
     }
 
     /*! \internal */
     property Component __editor: Item {
-        implicitWidth: 125
-        implicitHeight: 25
+        implicitWidth: 100
+        implicitHeight: Math.max(25, Math.round(TextSingleton.implicitHeight * 1.2))
         clip: true
-        BorderImage {
+        Rectangle {
             anchors.fill: parent
-            anchors.margins: -1
             anchors.bottomMargin: 0
-            anchors.rightMargin: -2
-            source: "images/editbox.png"
-            border.left: 4
-            border.right: 4
-            border.top: 4
-            border.bottom: 4
-            BorderImage {
-                anchors.fill: parent
-                source: "images/focusframe.png"
-                visible: control.activeFocus
-                border.left: 4
-                border.right: 4
-                border.top: 4
-                border.bottom: 4
+            color: "#44ffffff"
+            radius: baserect.radius
+        }
+        Rectangle {
+            id: baserect
+            anchors.rightMargin: -radius
+            anchors.bottomMargin: 1
+            gradient: Gradient {
+                GradientStop {color: "#e0e0e0" ; position: 0}
+                GradientStop {color: "#fff" ; position: 0.1}
+                GradientStop {color: "#fff" ; position: 1}
             }
+            radius: TextSingleton.implicitHeight * 0.16
+            anchors.fill: parent
+            border.color: control.activeFocus ? "#47b" : "#999"
         }
         Rectangle {
             color: "#aaa"
+            anchors.bottomMargin: 2
+            anchors.topMargin: 1
             anchors.right: parent.right
             anchors.top: parent.top
             anchors.bottom: parent.bottom
-            anchors.bottomMargin: 2
-            anchors.topMargin: 1
             width: 1
         }
     }
@@ -176,7 +175,7 @@ Style {
         Loader {
             id: editorLoader
             anchors.fill: parent
-            anchors.rightMargin: 20
+            anchors.rightMargin: drowDownButtonWidth + padding.right
             anchors.bottomMargin: -1
             sourceComponent: control.editable ? __editor : null
         }
diff --git a/src/controls/Styles/Base/ProgressBarStyle.qml b/src/controls/Styles/Base/ProgressBarStyle.qml
index fe76f300a..63397edfa 100644
--- a/src/controls/Styles/Base/ProgressBarStyle.qml
+++ b/src/controls/Styles/Base/ProgressBarStyle.qml
@@ -98,40 +98,65 @@ Style {
     /*! \qmlproperty Component ProgressBarStyle::progress
         The progress component for this style.
     */
-    property Component progress: Rectangle {
+    property Component progress: Item {
         property color progressColor: "#49d"
         anchors.fill: parent
-        radius: 2
-        antialiasing: true
-        gradient: Gradient {
-            GradientStop {color: Qt.lighter(progressColor, 1.3)  ; position: 0}
-            GradientStop {color: progressColor ; position: 1.4}
-        }
-        border.width: 1
-        border.color: Qt.darker(progressColor, 1.2)
+        clip: true
         Rectangle {
-            color: "transparent"
-            radius: 1.5
-            clip: true
+            id: base
+            width: control.width
+            height: control.height
+            radius: TextSingleton.implicitHeight * 0.16
             antialiasing: true
-            anchors.fill: parent
-            anchors.margins: 1
-            border.color: Qt.rgba(1,1,1,0.1)
-            Image {
-                visible: control.indeterminate
-                height: parent.height
-                NumberAnimation on x {
-                    from: -39
-                    to: 0
-                    running: control.indeterminate
-                    duration: 800
-                    loops: Animation.Infinite
+            gradient: Gradient {
+                GradientStop {color: Qt.lighter(progressColor, 1.3)  ; position: 0}
+                GradientStop {color: progressColor ; position: 1.4}
+            }
+            border.width: 1
+            border.color: Qt.darker(progressColor, 1.2)
+            Rectangle {
+                color: "transparent"
+                radius: 1.5
+                clip: true
+                antialiasing: true
+                anchors.fill: parent
+                anchors.margins: 1
+                border.color: Qt.rgba(1,1,1,0.1)
+                Image {
+                    visible: control.indeterminate
+                    height: parent.height
+                    NumberAnimation on x {
+                        from: -39
+                        to: 0
+                        running: control.indeterminate
+                        duration: 800
+                        loops: Animation.Infinite
+                    }
+                    fillMode: Image.Tile
+                    width: parent.width + 25
+                    source: "images/progress-indeterminate.png"
                 }
-                fillMode: Image.Tile
-                width: parent.width + 25
-                source: "images/progress-indeterminate.png"
             }
         }
+        Rectangle {
+            height: parent.height - 2
+            width: 1
+            y: 1
+            anchors.right: parent.right
+            anchors.rightMargin: 1
+            color:  Qt.rgba(1,1,1,0.1)
+            visible: splitter.visible
+        }
+        Rectangle {
+            id: splitter
+            height: parent.height - 2
+            width: 1
+            y: 1
+            anchors.right: parent.right
+            color: Qt.darker(progressColor, 1.2)
+            property int offset: currentProgress * control.width
+            visible: offset > base.radius && offset < control.width - base.radius + 1
+        }
     }
 
     /*! \qmlproperty Component ProgressBarStyle::background
@@ -140,15 +165,29 @@ Style {
     property Component background: Item {
         implicitWidth: 200
         implicitHeight: Math.max(17, Math.round(TextSingleton.implicitHeight * 0.7))
-        BorderImage {
+        Rectangle {
             anchors.fill: parent
-            anchors.topMargin: -1
-            anchors.bottomMargin: -1
-            source: "images/editbox.png"
-            border.left: 4
-            border.right: 4
-            border.top: 4
-            border.bottom: 4
+            anchors.bottomMargin: control.pressed ? 0 : -1
+            color: "#44ffffff"
+            radius: baserect.radius
+        }
+        Rectangle {
+            id: baserect
+            gradient: Gradient {
+                GradientStop {color: "#eee" ; position: 0}
+                GradientStop {color: "#fff" ; position: 0.1}
+                GradientStop {color: "#fff" ; position: 1}
+            }
+            radius: TextSingleton.implicitHeight * 0.16
+            anchors.fill: parent
+            border.color: control.activeFocus ? "#47b" : "#999"
+            Rectangle {
+                anchors.fill: parent
+                radius: parent.radius
+                color: control.activeFocus ? "#47b" : "white"
+                opacity: control.hovered || control.activeFocus ? 0.1 : 0
+                Behavior on opacity {NumberAnimation{ duration: 100 }}
+            }
         }
     }
 
diff --git a/src/controls/Styles/Base/RadioButtonStyle.qml b/src/controls/Styles/Base/RadioButtonStyle.qml
index 1a7509238..78f423ace 100644
--- a/src/controls/Styles/Base/RadioButtonStyle.qml
+++ b/src/controls/Styles/Base/RadioButtonStyle.qml
@@ -84,38 +84,61 @@ Style {
     readonly property RadioButton control: __control
 
     /*! This defines the text label. */
-    property Component label: Text {
-        text: control.text
-        renderType: Text.NativeRendering
-        verticalAlignment: Text.AlignVCenter
-        color: __syspal.text
+    property Component label: Item {
+        implicitWidth: text.implicitWidth + 2
+        implicitHeight: text.implicitHeight
+        Rectangle {
+            anchors.fill: text
+            anchors.margins: -1
+            anchors.leftMargin: -3
+            anchors.rightMargin: -3
+            visible: control.activeFocus
+            height: 6
+            radius: 3
+            color: "#224f9fef"
+            border.color: "#47b"
+            opacity: 0.6
+        }
+        Text {
+            id: text
+            text: control.text
+            anchors.centerIn: parent
+            color: __syspal.text
+            renderType: Text.NativeRendering
+        }
     }
 
     /*! The background under indicator and label. */
     property Component background
 
     /*! The spacing between indicator and label. */
-    property int spacing: 4
+    property int spacing: Math.round(TextSingleton.implicitHeight/4)
 
     /*! This defines the indicator button.  */
     property Component indicator: Rectangle {
-        width: 17
-        height: 17
-        color: "white"
+        width:  Math.round(TextSingleton.implicitHeight)
+        height: width
+        gradient: Gradient {
+            GradientStop {color: "#eee" ; position: 0}
+            GradientStop {color: control.pressed ? "#eee" : "#fff" ; position: 0.4}
+            GradientStop {color: "#fff" ; position: 1}
+        }
         border.color: control.activeFocus ? "#16c" : "gray"
         antialiasing: true
         radius: height/2
-
         Rectangle {
             anchors.centerIn: parent
-            visible: control.checked
-            width: 9
-            height: 9
-            color: "#666"
+            width: Math.round(parent.width * 0.5)
+            height: width
+            gradient: Gradient {
+                GradientStop {color: "#999" ; position: 0}
+                GradientStop {color: "#555" ; position: 1}
+            }
             border.color: "#222"
             antialiasing: true
             radius: height/2
-            opacity: control.enabled ? 1 : 0.5
+            Behavior on opacity {NumberAnimation {duration: 80}}
+            opacity: control.checked ? control.enabled ? 1 : 0.5 : 0
         }
     }
 
diff --git a/src/controls/Styles/Base/ScrollViewStyle.qml b/src/controls/Styles/Base/ScrollViewStyle.qml
index 2a0aa1377..a7dbcc520 100644
--- a/src/controls/Styles/Base/ScrollViewStyle.qml
+++ b/src/controls/Styles/Base/ScrollViewStyle.qml
@@ -113,8 +113,8 @@ Style {
     property Component scrollBarBackground: Item {
         property bool sticky: false
         property bool hovered: styleData.hovered
-        implicitWidth: 16
-        implicitHeight: 16
+        implicitWidth: Math.round(TextSingleton.implicitHeight)
+        implicitHeight: Math.round(TextSingleton.implicitHeight)
         clip: true
         opacity: transientScrollBars ? 0.5 : 1.0
         visible: !transientScrollBars || sticky
@@ -146,8 +146,8 @@ Style {
     property Component handle: Item {
         property bool sticky: false
         property bool hovered: __activeControl !== "none"
-        implicitWidth: img.implicitWidth
-        implicitHeight: img.implicitHeight
+        implicitWidth: Math.round(TextSingleton.implicitHeight) + 1
+        implicitHeight: Math.round(TextSingleton.implicitHeight) + 1
         BorderImage {
             id: img
             opacity: styleData.pressed && !transientScrollBars ? 0.5 : styleData.hovered ? 1 : 0.8
@@ -161,8 +161,8 @@ Style {
             anchors.bottom: parent.bottom
             anchors.right: parent.right
             anchors.left: styleData.horizontal ? parent.left : undefined
-            width: !styleData.horizontal && transientScrollBars ? sticky ? 13 : 10 : img.implicitWidth
-            height: styleData.horizontal && transientScrollBars ? sticky ? 13 : 10 : img.implicitHeight
+            width: !styleData.horizontal && transientScrollBars ? sticky ? 13 : 10 : parent.width
+            height: styleData.horizontal && transientScrollBars ? sticky ? 13 : 10 : parent.height
             Behavior on width { enabled: !styleData.horizontal && transientScrollBars; NumberAnimation { duration: 100 } }
             Behavior on height { enabled: styleData.horizontal && transientScrollBars; NumberAnimation { duration: 100 } }
         }
@@ -183,8 +183,8 @@ Style {
     */
     property Component incrementControl: Rectangle {
         visible: !transientScrollBars
-        implicitWidth: transientScrollBars ? 0 : 16
-        implicitHeight: transientScrollBars ? 0 : 16
+        implicitWidth: transientScrollBars ? 0 : Math.round(TextSingleton.implicitHeight)
+        implicitHeight: transientScrollBars ? 0 : Math.round(TextSingleton.implicitHeight)
         Rectangle {
             anchors.fill: parent
             anchors.bottomMargin: -1
@@ -199,7 +199,7 @@ Style {
             Image {
                 source: styleData.horizontal ? "images/arrow-right.png" : "images/arrow-down.png"
                 anchors.centerIn: parent
-                opacity: control.enabled ? 0.7 : 0.5
+                opacity: control.enabled ? 0.6 : 0.5
             }
             gradient: Gradient {
                 GradientStop {color: styleData.pressed ? "lightgray" : "white" ; position: 0}
@@ -221,8 +221,8 @@ Style {
     */
     property Component decrementControl: Rectangle {
         visible: !transientScrollBars
-        implicitWidth: transientScrollBars ? 0 : 16
-        implicitHeight: transientScrollBars ? 0 : 16
+        implicitWidth: transientScrollBars ? 0 : Math.round(TextSingleton.implicitHeight)
+        implicitHeight: transientScrollBars ? 0 : Math.round(TextSingleton.implicitHeight)
         Rectangle {
             anchors.fill: parent
             anchors.topMargin: styleData.horizontal ? 0 : -1
@@ -241,7 +241,7 @@ Style {
                 anchors.centerIn: parent
                 anchors.verticalCenterOffset: styleData.horizontal ? 0 : -1
                 anchors.horizontalCenterOffset: styleData.horizontal ? -1 : 0
-                opacity: control.enabled ? 0.7 : 0.5
+                opacity: control.enabled ? 0.6 : 0.5
             }
             gradient: Gradient {
                 GradientStop {color: styleData.pressed ? "lightgray" : "white" ; position: 0}
diff --git a/src/controls/Styles/Base/SliderStyle.qml b/src/controls/Styles/Base/SliderStyle.qml
index 661f70c06..a62230bcf 100644
--- a/src/controls/Styles/Base/SliderStyle.qml
+++ b/src/controls/Styles/Base/SliderStyle.qml
@@ -95,54 +95,75 @@ Style {
     /*! This property holds the item for the slider handle.
         You can access the slider through the \c control property
     */
-    property Component handle: Item {
-        implicitWidth:  Math.round(implicitHeight * 1.1)
-        implicitHeight: TextSingleton.implicitHeight
+    property Component handle: Item{
+            implicitWidth:  implicitHeight
+            implicitHeight: TextSingleton.implicitHeight * 1.2
 
-        BorderImage {
-            anchors.fill: parent
-            anchors.margins: -1
-            source: "images/slider-handle.png"
-            border.top: 4
-            border.bottom: 4
-            border.left: 4
-            border.right: 4
-            Rectangle {
+            FastGlow {
+                source: handle
                 anchors.fill: parent
-                anchors.margins: 2
-                radius: 2
-                color: "white"
-                opacity: control.hovered || control.activeFocus ? 0.2 : 0
-                Behavior on opacity {NumberAnimation{ duration: 100 }}
+                anchors.bottomMargin: -1
+                anchors.topMargin: 1
+                smooth: true
+                color: "#11000000"
+                spread: 0.8
+                transparentBorder: true
+                blur: 0.1
+
             }
-            BorderImage {
+            Rectangle {
+                id: handle
                 anchors.fill: parent
-                source: "images/focusframe.png"
-                opacity: control.activeFocus ? 1 : 0
-                border.left: 4
-                border.right: 4
-                border.top: 4
-                border.bottom: 4
+
+                radius: width/2
+                gradient: Gradient {
+                    GradientStop { color: control.pressed ? "#e0e0e0" : "#fff" ; position: 1 }
+                    GradientStop { color: "#eee" ; position: 0 }
+                }
+                Rectangle {
+                    anchors.fill: parent
+                    anchors.margins: 1
+                    radius: width/2
+                    border.color: "#99ffffff"
+                    color: control.activeFocus ? "#224f7fbf" : "transparent"
+                }
+                border.color: control.activeFocus ? "#47b" : "#777"
             }
-        }
-    }
 
+    }
     /*! This property holds the background groove of the slider.
 
         You can access the handle position through the \c styleData.handlePosition property.
     */
     property Component groove: Item {
+        property color fillColor: "#49d"
         anchors.verticalCenter: parent.verticalCenter
-        implicitWidth: 100
-        implicitHeight: 8
-        BorderImage {
+        implicitWidth: Math.round(TextSingleton.implicitHeight * 4.5)
+        implicitHeight: Math.max(6, Math.round(TextSingleton.implicitHeight * 0.3))
+        Rectangle {
+            radius: height/2
             anchors.fill: parent
-            source: "images/slider-groove.png"
-            opacity: 0.8
-            border.top: 3
-            border.bottom: 3
-            border.left: 6
-            border.right: 6
+            border.width: 1
+            border.color: "#888"
+            gradient: Gradient {
+                GradientStop { color: "#bbb" ; position: 0 }
+                GradientStop { color: "#ccc" ; position: 0.6 }
+                GradientStop { color: "#ccc" ; position: 1 }
+            }
+        }
+        Item {
+            clip: true
+            width: styleData.handlePosition
+            height: parent.height
+            Rectangle {
+                anchors.fill: parent
+                border.color: Qt.darker(fillColor, 1.2)
+                radius: height/2
+                gradient: Gradient {
+                    GradientStop {color: Qt.lighter(fillColor, 1.3)  ; position: 0}
+                    GradientStop {color: fillColor ; position: 1.4}
+                }
+            }
         }
     }
 
@@ -194,7 +215,7 @@ Style {
                 x: padding.left
                 sourceComponent: groove
                 width: (horizontal ? parent.width : parent.height) - padding.left - padding.right
-                y:  padding.top +  (Math.round(horizontal ? parent.height : parent.width - padding.top - padding.bottom) - grooveLoader.item.height)/2
+                y:  Math.round(padding.top + (Math.round(horizontal ? parent.height : parent.width - padding.top - padding.bottom) - grooveLoader.item.height)/2)
             }
             Loader {
                 id: tickMarkLoader
diff --git a/src/controls/Styles/Base/SpinBoxStyle.qml b/src/controls/Styles/Base/SpinBoxStyle.qml
index 5c04fd327..9f1b565d3 100644
--- a/src/controls/Styles/Base/SpinBoxStyle.qml
+++ b/src/controls/Styles/Base/SpinBoxStyle.qml
@@ -76,7 +76,7 @@ Style {
     }
 
     /*! The content margins of the text field. */
-    padding { top: 1 ; left: 5 ; right: 18 ; bottom: 0 }
+    padding { top: 1 ; left: Math.round(TextSingleton.implicitHeight/2) ; right: Math.round(TextSingleton.implicitHeight) ; bottom: 0 }
 
     /*! \qmlproperty enumeration horizontalAlignment
 
@@ -119,49 +119,46 @@ Style {
 
     /*! The button used to increment the value. */
     property Component incrementControl: Item {
-        implicitWidth: 18
+        implicitWidth: padding.right
         Image {
             source: "images/arrow-up.png"
             anchors.centerIn: parent
             anchors.verticalCenterOffset: 1
-            opacity: control.enabled ? 0.7 : 0.5
+            opacity: control.enabled ? (styleData.upPressed ? 1 : 0.6) : 0.5
         }
     }
 
     /*! The button used to decrement the value. */
     property Component decrementControl: Item {
-        implicitWidth: 18
+        implicitWidth: padding.right
         Image {
             source: "images/arrow-down.png"
             anchors.centerIn: parent
             anchors.verticalCenterOffset: -2
-            opacity: control.enabled ? 0.7 : 0.5
+            opacity: control.enabled ? (styleData.downPressed ? 1 : 0.6) : 0.5
         }
     }
 
     /*! The background of the SpinBox. */
     property Component background: Item {
-        implicitHeight: Math.max(25, Math.round(TextSingleton.implicitHeight * 1.1))
+        implicitHeight: Math.max(25, Math.round(TextSingleton.implicitHeight * 1.2))
         implicitWidth: styleData.contentWidth + 26
-        BorderImage {
-            id: image
+        Rectangle {
             anchors.fill: parent
-            anchors.margins: -1
-            source: "images/editbox.png"
-            border.left: 4
-            border.right: 4
-            border.top: 4
-            border.bottom: 4
             anchors.bottomMargin: -1
-            BorderImage {
-                anchors.fill: parent
-                source: "images/focusframe.png"
-                visible: control.activeFocus
-                border.left: 4
-                border.right: 4
-                border.top: 4
-                border.bottom: 4
+            color: "#44ffffff"
+            radius: baserect.radius
+        }
+        Rectangle {
+            id: baserect
+            gradient: Gradient {
+                GradientStop {color: "#eee" ; position: 0}
+                GradientStop {color: "#fff" ; position: 0.1}
+                GradientStop {color: "#fff" ; position: 1}
             }
+            radius: TextSingleton.implicitHeight * 0.16
+            anchors.fill: parent
+            border.color: control.activeFocus ? "#47b" : "#999"
         }
     }
 
diff --git a/src/controls/Styles/Base/TabViewStyle.qml b/src/controls/Styles/Base/TabViewStyle.qml
index e4d9c010b..430dd02fa 100644
--- a/src/controls/Styles/Base/TabViewStyle.qml
+++ b/src/controls/Styles/Base/TabViewStyle.qml
@@ -156,20 +156,22 @@ Style {
                 border.right: 6
                 anchors.topMargin: styleData.selected ? 0 : 1
             }
-            BorderImage {
-                anchors.fill: parent
-                anchors.margins: -1
-                source: "images/focusframe.png"
-                visible: styleData.activeFocus && styleData.selected
-                border.left: 4
-                border.right: 4
-                border.top: 4
-                border.bottom: 4
-            }
+        }
+        Rectangle {
+            anchors.fill: textitem
+            anchors.margins: -1
+            anchors.leftMargin: -3
+            anchors.rightMargin: -3
+            visible: (styleData.activeFocus && styleData.selected)
+            height: 6
+            radius: 3
+            color: "#224f9fef"
+            border.color: "#47b"
         }
         Text {
             id: textitem
             anchors.centerIn: parent
+            anchors.alignWhenCentered: true
             text: styleData.title
             renderType: Text.NativeRendering
             scale: control.tabPosition === Qt.TopEdge ? 1 : -1
diff --git a/src/controls/Styles/Base/TableViewStyle.qml b/src/controls/Styles/Base/TableViewStyle.qml
index 3397a81ab..512b0cfef 100644
--- a/src/controls/Styles/Base/TableViewStyle.qml
+++ b/src/controls/Styles/Base/TableViewStyle.qml
@@ -99,6 +99,7 @@ ScrollViewStyle {
             anchors.top: parent.top
             anchors.bottom: parent.bottom
             anchors.bottomMargin: 1
+            anchors.topMargin: 1
             width: 1
             color: "#ccc"
         }
diff --git a/src/controls/Styles/Base/TextFieldStyle.qml b/src/controls/Styles/Base/TextFieldStyle.qml
index e05ae82cf..8b4494d18 100644
--- a/src/controls/Styles/Base/TextFieldStyle.qml
+++ b/src/controls/Styles/Base/TextFieldStyle.qml
@@ -77,7 +77,7 @@ Style {
     readonly property TextField control: __control
 
     /*! The content margins of the text field. */
-    padding { top: 4 ; left: 6 ; right: 6 ; bottom:4 }
+    padding { top: 4 ; left: TextSingleton.implicitHeight/3 ; right: TextSingleton.implicitHeight/3 ; bottom:4 }
 
     /*! The current font. */
     property font font
@@ -113,25 +113,24 @@ Style {
 
     /*! The background of the text field. */
     property Component background: Item {
-        implicitWidth: 100
-        implicitHeight: Math.max(25, Math.round(TextSingleton.implicitHeight * 1.1))
-        BorderImage {
+        implicitWidth: Math.round(TextSingleton.implicitHeight * 8)
+        implicitHeight: Math.max(25, Math.round(TextSingleton.implicitHeight * 1.2))
+        Rectangle {
             anchors.fill: parent
-            anchors.margins: -1
-            source: "images/editbox.png"
-            border.left: 4
-            border.right: 4
-            border.top: 4
-            border.bottom: 4
-            BorderImage {
-                anchors.fill: parent
-                source: "images/focusframe.png"
-                visible: control.activeFocus
-                border.left: 4
-                border.right: 4
-                border.top: 4
-                border.bottom: 4
+            anchors.bottomMargin: -1
+            color: "#44ffffff"
+            radius: baserect.radius
+        }
+        Rectangle {
+            id: baserect
+            gradient: Gradient {
+                GradientStop {color: "#e0e0e0" ; position: 0}
+                GradientStop {color: "#fff" ; position: 0.1}
+                GradientStop {color: "#fff" ; position: 1}
             }
+            radius: TextSingleton.implicitHeight * 0.16
+            anchors.fill: parent
+            border.color: control.activeFocus ? "#47b" : "#999"
         }
     }
 
diff --git a/src/controls/Styles/Base/images/check.png b/src/controls/Styles/Base/images/check.png
new file mode 100644
index 000000000..1774880a7
--- /dev/null
+++ b/src/controls/Styles/Base/images/check.png
diff --git a/src/controls/Styles/Base/images/check@2x.png b/src/controls/Styles/Base/images/check@2x.png
new file mode 100644
index 000000000..65727caa5
--- /dev/null
+++ b/src/controls/Styles/Base/images/check@2x.png
author	Jens Bache-Wiig <jens.bache-wiig@digia.com>	2013-10-25 13:20:38 +0200
committer	The Qt Project <gerrit-noreply@qt-project.org>	2013-10-31 13:23:58 +0100
commit	fd8d7261cc25a7a2efcf42c59f9f11d0280e4383 (patch)
tree	3017fb73886fa5c6966e65b7d8d484a2cd54732f /src/controls/Styles/Base
parent	6c5bcbf23928094338da90be2cd4a2787104cf03 (diff)