diff --git a/examples/gallery/content/Styles.qml b/examples/gallery/content/Styles.qml
index 0a7e4d74d4f6857d7a31b2dcd91f0cf2f1879192..618b2d7fac45990d9bea64177170ca2308d4126f 100644
--- a/examples/gallery/content/Styles.qml
+++ b/examples/gallery/content/Styles.qml
@@ -97,12 +97,15 @@ Item {
Row {
spacing: 8
SpinBox {
+ width: 100
style: SpinBoxStyle { backgroundColor: colorDialog.color }
}
SpinBox {
+ width: 100
style: SpinBoxStyle { backgroundColor: "#eee" }
}
SpinBox {
+ width: 100
style: spinboxStyle
}
}
diff --git a/src/styles/ButtonStyle.qml b/src/styles/ButtonStyle.qml
index d20fdf9f6dc7ab374334935f7f7a292e4973db97..f1e96a494e87e4c6435415c59d090909bdecfebf 100644
--- a/src/styles/ButtonStyle.qml
+++ b/src/styles/ButtonStyle.qml
@@ -75,6 +75,22 @@ Style {
border.left: 6
border.right: 6
}
+
+ BorderImage {
+ property int margin: 0
+ anchors.fill: parent
+ anchors.margins: -1
+ anchors.topMargin: -2
+ anchors.rightMargin: 0
+ anchors.bottomMargin: 1
+ source: "images/focusframe.png"
+ visible: control.activeFocus
+ border.left: 4
+ border.right: 4
+ border.top: 4
+ border.bottom: 4
+ }
+
}
property Component panel: Item {
diff --git a/src/styles/CheckBoxStyle.qml b/src/styles/CheckBoxStyle.qml
index e56062986f42808f6f88209459cee66e38e7e821..3002c2844fa66ee2fbfbac4712888f27d03aae35 100644
--- a/src/styles/CheckBoxStyle.qml
+++ b/src/styles/CheckBoxStyle.qml
@@ -80,6 +80,19 @@ Style {
border.color: "#33ffffff"
}
}
+ BorderImage {
+ anchors.fill: parent
+ anchors.margins: -1
+ anchors.topMargin: -2
+ anchors.rightMargin: 0
+ anchors.bottomMargin: 1
+ source: "images/focusframe.png"
+ visible: control.activeFocus
+ border.left: 4
+ border.right: 4
+ border.top: 4
+ border.bottom: 4
+ }
}
property Component label: Text {
diff --git a/src/styles/ComboBoxStyle.qml b/src/styles/ComboBoxStyle.qml
index 770e66c7dd00ee72ec6ba8d9a5c65846a7920189..9e8b5a49f7cfda21f2d3e44c5354b000356b29f2 100644
--- a/src/styles/ComboBoxStyle.qml
+++ b/src/styles/ComboBoxStyle.qml
@@ -74,7 +74,20 @@ Style {
anchors.rightMargin: 8
opacity: 0.7
}
-
+ BorderImage {
+ property int margin: 0
+ anchors.fill: parent
+ anchors.margins: -1
+ anchors.topMargin: -2
+ anchors.rightMargin: 0
+ anchors.bottomMargin: 1
+ source: "images/focusframe.png"
+ visible: control.activeFocus
+ border.left: 4
+ border.right: 4
+ border.top: 4
+ border.bottom: 4
+ }
}
}
diff --git a/src/styles/ProgressBarStyle.qml b/src/styles/ProgressBarStyle.qml
index bbdd6d0d6b065796b1b989eac6468916d3540009..475426c12a3acbbd32cd4ed859ac5bc37b79cf1b 100644
--- a/src/styles/ProgressBarStyle.qml
+++ b/src/styles/ProgressBarStyle.qml
@@ -65,7 +65,7 @@ Style {
}
Rectangle {
id: progressItem
- implicitWidth: parent.width * control.value / control.maximumValue
+ implicitWidth: control.indeterminate ? parent.width : parent.width * control.value / control.maximumValue
radius: 2
antialiasing: true
height: parent.height - 2
diff --git a/src/styles/RadioButtonStyle.qml b/src/styles/RadioButtonStyle.qml
index d41074660583afc5274031f9395249d83cea7429..8e7c9a7b612a59950219743b0e3da4ab8515d34b 100644
--- a/src/styles/RadioButtonStyle.qml
+++ b/src/styles/RadioButtonStyle.qml
@@ -54,7 +54,7 @@ Style {
width: 17
height: 17
color: "white"
- border.color: "gray"
+ border.color: control.activeFocus ? "#16c" : "gray"
antialiasing: true
radius: height/2
diff --git a/src/styles/ScrollBarStyle.qml b/src/styles/ScrollBarStyle.qml
index 00c4bea8d7608b2ca6fba4614b95085cc0301318..22f6d02d09ca0e28ccc62b52cd7d10a83a32d925 100644
--- a/src/styles/ScrollBarStyle.qml
+++ b/src/styles/ScrollBarStyle.qml
@@ -60,63 +60,79 @@ Rectangle {
property Component background: Item {
implicitWidth: 16
implicitHeight: 16
+ clip: true
Rectangle {
anchors.fill: parent
color: "#ddd"
border.color: "#aaa"
- anchors.rightMargin: horizontal ? -2 : 0
+ anchors.rightMargin: horizontal ? -2 : -1
anchors.leftMargin: horizontal ? -2 : 0
anchors.topMargin: horizontal ? 0 : -2
- anchors.bottomMargin: horizontal ? 0 : -2
+ anchors.bottomMargin: horizontal ? -1 : -2
}
}
- property Component handle: Rectangle {
+ property Component handle: Item {
implicitWidth: 16
implicitHeight: 16
- color: mouseOver ? "#ddd" : "lightgray"
- border.color: "#aaa"
-
Rectangle {
anchors.fill: parent
- anchors.margins: 1
- color: "transparent"
- border.color: "#66ffffff"
-
+ color: mouseOver ? "#ddd" : "lightgray"
+ border.color: "#aaa"
+ anchors.rightMargin: horizontal ? 0 : -1
+ anchors.bottomMargin: horizontal ? -1 : 0
+ Rectangle {
+ anchors.fill: parent
+ anchors.margins: 1
+ color: "transparent"
+ border.color: "#44ffffff"
+ }
}
}
property Component incrementControl: Rectangle {
implicitWidth: 16
implicitHeight: 16
- border.color: "#aaa"
- Image {
- source: "images/arrow-down.png"
- rotation: horizontal ? -90 : 0
- anchors.centerIn: parent
- opacity: 0.7
- }
- gradient: Gradient {
- GradientStop {color: control.downPressed ? "lightgray" : "white" ; position: 0}
- GradientStop {color: control.downPressed ? "lightgray" : "lightgray" ; position: 1}
+ Rectangle {
+ anchors.fill: parent
+ anchors.bottomMargin: -1
+ anchors.rightMargin: -1
+ border.color: "#aaa"
+ Image {
+ source: "images/arrow-down.png"
+ rotation: horizontal ? -90 : 0
+ anchors.centerIn: parent
+ opacity: 0.7
+ }
+ gradient: Gradient {
+ GradientStop {color: control.downPressed ? "lightgray" : "white" ; position: 0}
+ GradientStop {color: control.downPressed ? "lightgray" : "lightgray" ; position: 1}
+ }
}
}
property Component decrementControl: Rectangle {
implicitWidth: 16
implicitHeight: 16
- color: "lightgray"
- Image {
- source: "images/arrow-up.png"
- rotation: horizontal ? -90 : 0
- anchors.centerIn: parent
- opacity: 0.7
- }
- gradient: Gradient {
- GradientStop {color: control.upPressed ? "lightgray" : "white" ; position: 0}
- GradientStop {color: control.upPressed ? "lightgray" : "lightgray" ; position: 1}
+ Rectangle {
+ anchors.fill: parent
+ anchors.topMargin: horizontal ? 0 : -1
+ anchors.leftMargin: horizontal ? -1 : 0
+ anchors.bottomMargin: horizontal ? -1 : 0
+ anchors.rightMargin: horizontal ? 0 : -1
+ color: "lightgray"
+ Image {
+ source: "images/arrow-up.png"
+ rotation: horizontal ? -90 : 0
+ anchors.centerIn: parent
+ opacity: 0.7
+ }
+ gradient: Gradient {
+ GradientStop {color: control.upPressed ? "lightgray" : "white" ; position: 0}
+ GradientStop {color: control.upPressed ? "lightgray" : "lightgray" ; position: 1}
+ }
+ border.color: "#aaa"
}
- border.color: "#aaa"
}
property string activeControl: ""
@@ -185,6 +201,7 @@ Rectangle {
width: parent.width
anchors.top: horizontal ? undefined : upControl.bottom
anchors.bottom: horizontal ? undefined : downControl.top
+ anchors.bottomMargin: -1
anchors.left: horizontal ? upControl.right : undefined
anchors.right: horizontal ? downControl.left : undefined
sourceComponent: background
@@ -193,6 +210,7 @@ Rectangle {
Loader {
id: downControl
anchors.bottom: horizontal ? undefined : parent.bottom
+ anchors.bottomMargin: -1
anchors.right: horizontal ? parent.right : undefined
sourceComponent: incrementControl
property bool mouseOver: activeControl === "down"
diff --git a/src/styles/ScrollViewStyle.qml b/src/styles/ScrollViewStyle.qml
index b015be4f4925a697848a924a3971af7c6ea5c34f..c10e7a864304f8fbdc3ae0377960849479a42b07 100644
--- a/src/styles/ScrollViewStyle.qml
+++ b/src/styles/ScrollViewStyle.qml
@@ -47,16 +47,15 @@ Style {
property bool frameOnlyAroundContents: false
property int scrollBarSpacing: 4
- property int defaultFrameWidth: 3
+ property int defaultFrameWidth: 1
- property Component frame: BorderImage {
- source: "images/editbox.png"
- border.left: 4
- border.right: 4
- border.top: 4
- border.bottom: 4
+ property Component corner: Rectangle { color: "#ccc" }
+
+ property Component frame: Rectangle {
+ color: "white"
+ border.color: "#999"
+ border.width: 1
+ radius: 1
visible: frameVisible
}
-
- property Component corner: Rectangle { color: "lightgray" }
}
diff --git a/src/styles/SliderStyle.qml b/src/styles/SliderStyle.qml
index 19ec336624b6673ce572a3f137f2ecdfaf78e0ec..d214068cee44b8deef242e2d80973d6767968edc 100644
--- a/src/styles/SliderStyle.qml
+++ b/src/styles/SliderStyle.qml
@@ -64,6 +64,19 @@ Style {
border.bottom: 6
border.left: 6
border.right: 6
+ BorderImage {
+ anchors.fill: parent
+ anchors.margins: -1
+ anchors.topMargin: -2
+ anchors.rightMargin: 0
+ anchors.bottomMargin: 1
+ source: "images/focusframe.png"
+ visible: control.activeFocus
+ border.left: 4
+ border.right: 4
+ border.top: 4
+ border.bottom: 4
+ }
}
}
@@ -106,5 +119,6 @@ Style {
x: Math.round(leftMargin + control.value / control.maximumValue * (root.width - leftMargin - rightMargin - width/2))
property Control control: __cref
}
+
}
}
diff --git a/src/styles/SpinBoxStyle.qml b/src/styles/SpinBoxStyle.qml
index c17b1b1a3047dd4cc19de8cd98b29c7b489cb921..4c06a9bbdad1d91869ae5a63449df03454b5bea0 100644
--- a/src/styles/SpinBoxStyle.qml
+++ b/src/styles/SpinBoxStyle.qml
@@ -64,30 +64,24 @@ Style {
colorGroup: control.enabled ? SystemPalette.Active : SystemPalette.Disabled
}
- property Component upControl: Rectangle {
- implicitWidth: 12
- gradient: Gradient {
- GradientStop {color: control.__upPressed ? "lightgray" : "white" ; position: 0}
- GradientStop {color: control.__upPressed ? "lightgray" : "lightgray" ; position: 1}
- }
- border.color: Qt.darker(backgroundColor, 2)
+ property Component upControl: Item {
+ implicitWidth: 18
Image {
source: "images/arrow-up.png"
anchors.centerIn: parent
+ anchors.verticalCenterOffset: 1
opacity: 0.7
+ anchors.horizontalCenterOffset: -1
}
}
- property Component downControl: Rectangle {
- implicitWidth: 12
- gradient: Gradient {
- GradientStop {color: control.__downPressed ? "lightgray" : "white" ; position: 0}
- GradientStop {color: control.__downPressed ? "lightgray" : "lightgray" ; position: 1}
- }
- border.color: Qt.darker(backgroundColor, 2)
+ property Component downControl: Item {
+ implicitWidth: 18
Image {
source: "images/arrow-down.png"
anchors.centerIn: parent
+ anchors.verticalCenterOffset: -1
+ anchors.horizontalCenterOffset: -1
opacity: 0.7
}
}
@@ -153,5 +147,19 @@ Style {
sourceComponent: downControl
property SpinBox control: cref
}
+
+ BorderImage {
+ anchors.fill: parent
+ anchors.margins: -1
+ anchors.topMargin: -2
+ anchors.rightMargin: 0
+ source: "images/focusframe.png"
+ visible: control.activeFocus
+ border.left: 4
+ border.right: 4
+ border.top: 4
+ border.bottom: 4
+ }
+
}
}
diff --git a/src/styles/TableViewStyle.qml b/src/styles/TableViewStyle.qml
index 495475e818a93890e28bd2e6bb3ab19b0180ac11..50aa759184e720ad4f6655f658cce3cdb136c800 100644
--- a/src/styles/TableViewStyle.qml
+++ b/src/styles/TableViewStyle.qml
@@ -68,7 +68,7 @@ ScrollViewStyle {
anchors.bottom: parent.bottom
width: parent.width
height: 1
- color: "#bbb"
+ color: "#aaa"
}
Rectangle {
anchors.right: parent.right
@@ -81,9 +81,24 @@ ScrollViewStyle {
}
property Component rowDelegate: Rectangle {
- color: rowSelected ? "lightsteelblue" : alternateBackground ? "#eee" : "white"
+ gradient: Gradient {
+ GradientStop { color: rowSelected ? Qt.lighter("#49e", 1.1) : alternateBackground ? "#eee" : "white" ; position: 1 }
+ GradientStop { color: rowSelected ? Qt.lighter("#49e", 1.2) : alternateBackground ? "#eee" : "white" ; position: 0 }
+ }
implicitHeight: 20
implicitWidth: 80
+ Rectangle {
+ anchors.bottom: parent.bottom
+ width: parent.width
+ height: 1
+ color: rowSelected ? "#18a" : "transparent"
+ }
+ Rectangle {
+ anchors.top: parent.top
+ width: parent.width
+ height: 1
+ color: rowSelected ? "#18a" : "transparent"
+ }
}
property Component standardDelegate: Item {
diff --git a/src/styles/TextFieldStyle.qml b/src/styles/TextFieldStyle.qml
index f50ba691001e0e5926c076fe975f9e346d54fe4d..c8969d2c567a0312ef9150f330b1115281c349c0 100644
--- a/src/styles/TextFieldStyle.qml
+++ b/src/styles/TextFieldStyle.qml
@@ -72,6 +72,19 @@ Style {
border.right: 4
border.top: 4
border.bottom: 4
+ BorderImage {
+ anchors.fill: parent
+ anchors.margins: -1
+ anchors.topMargin: -2
+ anchors.rightMargin: 0
+ anchors.bottomMargin: 1
+ source: "images/focusframe.png"
+ visible: control.activeFocus
+ border.left: 4
+ border.right: 4
+ border.top: 4
+ border.bottom: 4
+ }
}
}
@@ -99,16 +112,5 @@ Style {
sourceComponent: background
anchors.fill: parent
}
- BorderImage {
- property int margin: 0
- anchors.fill: parent
- anchors.topMargin: -1
- source: "images/focusframe.png"
- visible: control.activeFocus
- border.left: 4
- border.right: 4
- border.top: 4
- border.bottom: 4
- }
}
}
diff --git a/src/styles/images/focusframe.png b/src/styles/images/focusframe.png
new file mode 100644
index 0000000000000000000000000000000000000000..07d208299f1de09629a7dbc84133019e3c4cd0d6
Binary files /dev/null and b/src/styles/images/focusframe.png differ
diff --git a/src/styles/styles.pro b/src/styles/styles.pro
index 506d042e4f5220c273f09b23659c274fb2f90f87..853d7b1361a535f4e78e981af7273291613b267d 100644
--- a/src/styles/styles.pro
+++ b/src/styles/styles.pro
@@ -50,6 +50,7 @@ QML_FILES += \
images/button_down.png \
images/tab.png \
images/groupbox.png \
+ images/focusframe.png \
images/tab_selected.png \
images/editbox.png \
images/arrow-up.png \