From 956ae87efeb84bf8f3c0a4cbb15baa3dae15cad9 Mon Sep 17 00:00:00 2001
From: Jens Bache-Wiig <jens.bache-wiig@digia.com>
Date: Fri, 19 Apr 2013 13:26:23 +0200
Subject: [PATCH] Add focus drawing on Qt Quick Style
Change-Id: I504a2a11041d7df76fadc6bf76f1a5ee4fc9cb8d
Reviewed-by: J-P Nurmi <jpnurmi@digia.com>
---
examples/gallery/content/Styles.qml | 3 ++
src/styles/ButtonStyle.qml | 16 ++++++
src/styles/CheckBoxStyle.qml | 13 +++++
src/styles/ComboBoxStyle.qml | 15 +++++-
src/styles/ProgressBarStyle.qml | 2 +-
src/styles/RadioButtonStyle.qml | 2 +-
src/styles/ScrollBarStyle.qml | 80 +++++++++++++++++-----------
src/styles/ScrollViewStyle.qml | 17 +++---
src/styles/SliderStyle.qml | 14 +++++
src/styles/SpinBoxStyle.qml | 36 ++++++++-----
src/styles/TableViewStyle.qml | 19 ++++++-
src/styles/TextFieldStyle.qml | 24 +++++----
src/styles/images/focusframe.png | Bin 0 -> 473 bytes
src/styles/styles.pro | 1 +
14 files changed, 172 insertions(+), 70 deletions(-)
create mode 100644 src/styles/images/focusframe.png
diff --git a/examples/gallery/content/Styles.qml b/examples/gallery/content/Styles.qml
index 0a7e4d74d..618b2d7fa 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 d20fdf9f6..f1e96a494 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 e56062986..3002c2844 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 770e66c7d..9e8b5a49f 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 bbdd6d0d6..475426c12 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 d41074660..8e7c9a7b6 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 00c4bea8d..22f6d02d0 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 b015be4f4..c10e7a864 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 19ec33662..d214068ce 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 c17b1b1a3..4c06a9bbd 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 495475e81..50aa75918 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 f50ba6910..c8969d2c5 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
GIT binary patch
literal 473
zcmeAS@N?(olHy`uVBq!ia0vp^PCzWr!3HFQU8D~JDb50q$YKTtZeb8+WSBKaf`Ngt
z+tbA{B!l(sOj|!@LxI-$d*h^bi7e>Q>FCh=Gqs?pfQ@g$6`4k11xHra)N>5t3>O<&
zbe%c{E-dkO-eY!txAcVd3293<hEJRQ^N)@8PtEtXPAh^l{G@VMWIf!^;~b&%L8~Fa
z`N<7;alX|){XH|Qrq~pmEvYzee9WeHeL>&5Pq$AmD6O9?9lq;|q|U3&R+ldyUi>p>
zb$M<9XS2}UYj@Yql$qZ%@uhmi8S&YZ=kn$^7Vkd#A}4v<&FtB$0{SmioYr>aVB<gY
z#ZjT*!aVZ@3CbGT0^h#hVQ$zdzl7f@cH^b|EPIyfq#wZ^6B-&aQWO+eT<!?E2rl9X
zbn$Tz5&S$sPO(eC^$3fLpdtTDT*AElzeIP-9S)M)RP`{|OvUDD#G*pMrgh<e7fxWk
z&i=H9UyncRM)@IzSC?cA54?>?73tl7=0USf*au777q^p20x!IHslvZdbHlbjzoxOB
ze{!DX-Z87G8^UHDC~2SEF8Hn~{isxY#gW(i%)7E89=GKl0>%}Cr>mdKI;Vst096>m
AM*si-
literal 0
HcmV?d00001
diff --git a/src/styles/styles.pro b/src/styles/styles.pro
index 506d042e4..853d7b136 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 \
--
GitLab