From b00dd02a85c31cf211c4b88ba03b3ff52109f9d9 Mon Sep 17 00:00:00 2001
From: Jens Bache-Wiig <jens.bache-wiig@digia.com>
Date: Wed, 17 Apr 2013 18:15:07 +0200
Subject: [PATCH] Improved styling for Qml style
This is only the first step but already looking a bit nicer.
Change-Id: I79f027b3411245ffe2fe654b4ca6eccbdf6a147b
Reviewed-by: Jens Bache-Wiig <jens.bache-wiig@digia.com>
---
examples/gallery/content/Controls.qml | 1 +
src/controls/ComboBox.qml | 2 +-
src/controls/TableView.qml | 2 --
src/private/qquickcontrolsettings.cpp | 8 +++--
src/styles/ButtonStyle.qml | 21 ++++++------
src/styles/CheckBoxStyle.qml | 39 +++++++++++++--------
src/styles/ComboBoxStyle.qml | 42 +++++++++++++----------
src/styles/GroupBoxStyle.qml | 22 +++++++-----
src/styles/ProgressBarStyle.qml | 30 +++++++---------
src/styles/RadioButtonStyle.qml | 14 ++++----
src/styles/ScrollBarStyle.qml | 47 ++++++++++++++++++++------
src/styles/ScrollViewStyle.qml | 14 ++++++--
src/styles/SliderStyle.qml | 47 ++++++++++++++------------
src/styles/SpinBoxStyle.qml | 23 +++++++------
src/styles/StatusBarStyle.qml | 2 +-
src/styles/TabViewStyle.qml | 43 ++++++++++++++---------
src/styles/TableViewStyle.qml | 14 +++++++-
src/styles/TextFieldStyle.qml | 33 ++++++++++++------
src/styles/images/button.png | Bin 0 -> 857 bytes
src/styles/images/button_down.png | Bin 0 -> 993 bytes
src/styles/images/editbox.png | Bin 0 -> 546 bytes
src/styles/images/groupbox.png | Bin 0 -> 485 bytes
src/styles/images/tab.png | Bin 0 -> 460 bytes
src/styles/images/tab_selected.png | Bin 0 -> 498 bytes
src/styles/styles.pro | 6 ++++
25 files changed, 255 insertions(+), 155 deletions(-)
create mode 100644 src/styles/images/button.png
create mode 100644 src/styles/images/button_down.png
create mode 100644 src/styles/images/editbox.png
create mode 100644 src/styles/images/groupbox.png
create mode 100644 src/styles/images/tab.png
create mode 100644 src/styles/images/tab_selected.png
diff --git a/examples/gallery/content/Controls.qml b/examples/gallery/content/Controls.qml
index 7650cab10..abcebbebc 100644
--- a/examples/gallery/content/Controls.qml
+++ b/examples/gallery/content/Controls.qml
@@ -110,6 +110,7 @@ Item {
Slider {
id: slider
value: 0.5
+ width: 200
tickmarksEnabled: tickmarkCheck.checked
}
}
diff --git a/src/controls/ComboBox.qml b/src/controls/ComboBox.qml
index eca285b22..74c2a196c 100644
--- a/src/controls/ComboBox.qml
+++ b/src/controls/ComboBox.qml
@@ -125,7 +125,7 @@ Control {
property string textRole: ""
property bool ready: false
- property bool isPopup: comboBox.__panel.popup
+ property bool isPopup: __panel ? __panel.popup : false
property int x: 0
property int y: isPopup ? (comboBox.__panel.height - comboBox.__panel.implicitHeight) / 2.0 : comboBox.__panel.height
diff --git a/src/controls/TableView.qml b/src/controls/TableView.qml
index 22e7e052e..f8ec997bb 100644
--- a/src/controls/TableView.qml
+++ b/src/controls/TableView.qml
@@ -449,8 +449,6 @@ ScrollView {
height: headerVisible ? headerrow.height : 0
- Behavior on height { NumberAnimation{ duration: 80 } }
-
Row {
id: headerrow
x: -listView.contentX
diff --git a/src/private/qquickcontrolsettings.cpp b/src/private/qquickcontrolsettings.cpp
index 3b3744fcc..3b7d5506b 100644
--- a/src/private/qquickcontrolsettings.cpp
+++ b/src/private/qquickcontrolsettings.cpp
@@ -56,9 +56,11 @@ QString QQuickControlSettings::theme()
if (currentTheme.isEmpty()) {
currentTheme = QLatin1String("Styles");
#ifndef QT_NO_WIDGETS
- // Only enable QStyle support when we are using QApplication
- if (QCoreApplication::instance()->inherits("QApplication"))
- currentTheme = QLatin1String("Styles/Desktop");
+ //Only enable QStyle support when we are using QApplication
+ if (QCoreApplication::instance()->inherits("QApplication")) {
+ if (qgetenv("QT_QUICK_CONTROLS_NO_WIDGETS").toInt() < 1)
+ currentTheme = QLatin1String("Styles/Desktop");
+ }
#endif
}
return currentTheme;
diff --git a/src/styles/ButtonStyle.qml b/src/styles/ButtonStyle.qml
index 6cd165e6b..d20fdf9f6 100644
--- a/src/styles/ButtonStyle.qml
+++ b/src/styles/ButtonStyle.qml
@@ -64,18 +64,17 @@ Style {
}
}
- property Component background: Rectangle {
- implicitWidth: 80
- implicitHeight: 21
- gradient: Gradient {
- GradientStop {color: control.pressed ? Qt.lighter(buttonstyle.backgroundColor, 1.1) :
- Qt.lighter(buttonstyle.backgroundColor, 1.8) ; position: 0}
- GradientStop {color: control.pressed ? Qt.lighter(buttonstyle.backgroundColor, 1.1) :
- buttonstyle.backgroundColor ; position: 1.4}
+ property Component background: Item {
+ implicitWidth: 100
+ implicitHeight: 25
+ BorderImage {
+ anchors.fill: parent
+ source: control.pressed ? "images/button_down.png" : "images/button.png"
+ border.top: 6
+ border.bottom: 6
+ border.left: 6
+ border.right: 6
}
- border.color: Qt.darker(buttonstyle.backgroundColor, 1.4)
- radius: 3
- antialiasing: true
}
property Component panel: Item {
diff --git a/src/styles/CheckBoxStyle.qml b/src/styles/CheckBoxStyle.qml
index 3c1278934..e56062986 100644
--- a/src/styles/CheckBoxStyle.qml
+++ b/src/styles/CheckBoxStyle.qml
@@ -50,26 +50,35 @@ Style {
property int labelSpacing: 6
- property Component indicator: Rectangle {
- height: 20
- width: 20
- antialiasing: true
- gradient: Gradient {
- GradientStop{color: control.pressed ? "lightgray" : "white" ; position: 0}
- GradientStop{color: control.pressed ? "lightgray" : "lightgray" ; position: 1}
+ property Component indicator: Item {
+ implicitWidth: 18
+ implicitHeight: 18
+ BorderImage {
+ anchors.fill: parent
+ source: "images/editbox.png"
+ border.top: 6
+ border.bottom: 6
+ border.left: 6
+ border.right: 6
}
- radius: 2
- border.color: "#aaa"
Rectangle {
- height: 20
- width: 20
+ height: 16
+ width: 16
antialiasing: true
visible: control.checked
- color: "#444"
+ color: "#666"
radius: 1
- anchors.margins: 5
+ anchors.margins: 4
anchors.fill: parent
- border.color: "black"
+ anchors.topMargin: 3
+ anchors.bottomMargin: 5
+ border.color: "#222"
+ Rectangle {
+ anchors.fill: parent
+ anchors.margins: 1
+ color: "transparent"
+ border.color: "#33ffffff"
+ }
}
}
@@ -79,7 +88,7 @@ Style {
}
property Component panel: Item {
- implicitWidth: row.width + 4
+ implicitWidth: Math.round(row.width + 4)
implicitHeight: row.height
property var _cref: control
diff --git a/src/styles/ComboBoxStyle.qml b/src/styles/ComboBoxStyle.qml
index e0cae7194..770e66c7d 100644
--- a/src/styles/ComboBoxStyle.qml
+++ b/src/styles/ComboBoxStyle.qml
@@ -47,26 +47,34 @@ import QtQuick.Controls.Styles 1.0
*/
Style {
- property Component panel: Rectangle {
- property int popup: 0
- property font font: textitem.font
+ property Component panel: Item {
+ implicitWidth: 100
+ implicitHeight: 24
+ property bool popup: false
+ property alias font: textitem.font
- implicitWidth: 200
- implicitHeight: 20
+ BorderImage {
+ anchors.fill: parent
+ source: control.__pressed ? "images/button_down.png" : "images/button.png"
+ border.top: 6
+ border.bottom: 6
+ border.left: 6
+ border.right: 6
+ Text {
+ id: textitem
+ anchors.centerIn: parent
+ text: control.currentText
+ renderType: Text.NativeRendering
+ }
+ Image {
+ source: "images/arrow-down.png"
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.right: parent.right
+ anchors.rightMargin: 8
+ opacity: 0.7
+ }
- gradient: Gradient{
- GradientStop{color: control.__pressed ? "lightgray" : "white" ; position: 0}
- GradientStop{color: control.__pressed ? "lightgray" : "lightgray" ; position: 1}
- }
-
- radius:4
- border.color: "#aaa"
-
- Text {
- id: textitem
- anchors.centerIn: parent
- text: control.currentText
}
}
diff --git a/src/styles/GroupBoxStyle.qml b/src/styles/GroupBoxStyle.qml
index 7e12791dd..5a46aed15 100644
--- a/src/styles/GroupBoxStyle.qml
+++ b/src/styles/GroupBoxStyle.qml
@@ -47,21 +47,27 @@ import QtQuick.Controls.Styles 1.0
\inqmlmodule QtQuick.Controls.Styles 1.0
*/
Style {
- property int margin: 8
+ property int margin: 9
- property Component panel: Rectangle {
+ property Component panel:
+ Item {
implicitWidth: control.contentWidth + 2 * margin
- implicitHeight: control.contentHeight + 2 * margin + 16
-
+ implicitHeight: control.contentHeight + 2 * margin + 12
Text {
anchors.top: parent.top
anchors.left: parent.left
anchors.margins: 4
text: control.title
+ renderType: Text.NativeRendering
+ }
+ BorderImage {
+ anchors.fill: parent
+ anchors.topMargin: 20
+ source: "images/groupbox.png"
+ border.left: 8
+ border.right: 8
+ border.top: 8
+ border.bottom: 8
}
- border.color: "#999"
- border.width: 1
- color: "transparent"
- radius: 4
}
}
diff --git a/src/styles/ProgressBarStyle.qml b/src/styles/ProgressBarStyle.qml
index 799cb6764..bbdd6d0d6 100644
--- a/src/styles/ProgressBarStyle.qml
+++ b/src/styles/ProgressBarStyle.qml
@@ -50,31 +50,27 @@ import QtQuick.Controls 1.0
Style {
property color backgroundColor: "darkgrey"
- property color progressColor: "#47f"
+ property color progressColor: "#49d"
- property Component background: Rectangle {
- id: styleitem
- anchors.fill: parent
+ property Component background: Item {
implicitWidth: 200
- implicitHeight: 20
- clip: true
- radius: 2
- antialiasing: true
- border.color: "#aaa"
-
- gradient: Gradient {
- GradientStop {color: Qt.lighter(backgroundColor, 1.6) ; position: 0}
- GradientStop {color: backgroundColor ; position: 1.55}
+ implicitHeight: 24
+ BorderImage {
+ anchors.fill: parent
+ source: "images/editbox.png"
+ border.left: 4
+ border.right: 4
+ border.top: 4
+ border.bottom: 4
}
-
Rectangle {
id: progressItem
implicitWidth: parent.width * control.value / control.maximumValue
radius: 2
antialiasing: true
- implicitHeight: 20
+ height: parent.height - 2
gradient: Gradient {
- GradientStop {color: Qt.lighter(progressColor, 1.6) ; position: 0}
+ GradientStop {color: Qt.lighter(progressColor, 1.3) ; position: 0}
GradientStop {color: progressColor ; position: 1.4}
}
border.width: 1
@@ -85,7 +81,7 @@ Style {
antialiasing: true
anchors.fill: parent
anchors.margins: 1
- border.color: Qt.rgba(1,1,1,0.2)
+ border.color: Qt.rgba(1,1,1,0.3)
}
}
}
diff --git a/src/styles/RadioButtonStyle.qml b/src/styles/RadioButtonStyle.qml
index 764e306f8..d41074660 100644
--- a/src/styles/RadioButtonStyle.qml
+++ b/src/styles/RadioButtonStyle.qml
@@ -51,9 +51,9 @@ Style {
property int labelSpacing: 6
property Component indicator: Rectangle {
- width: 20
- height: 20
- color: "#f0f0f0"
+ width: 17
+ height: 17
+ color: "white"
border.color: "gray"
antialiasing: true
radius: height/2
@@ -61,10 +61,10 @@ Style {
Rectangle {
anchors.centerIn: parent
visible: control.checked
- width: 10
- height: 10
- color: "#444"
- border.color: "black"
+ width: 9
+ height: 9
+ color: "#666"
+ border.color: "#222"
antialiasing: true
radius: height/2
}
diff --git a/src/styles/ScrollBarStyle.qml b/src/styles/ScrollBarStyle.qml
index 4fed597d2..00c4bea8d 100644
--- a/src/styles/ScrollBarStyle.qml
+++ b/src/styles/ScrollBarStyle.qml
@@ -50,37 +50,68 @@ Rectangle {
id: styleitem
readonly property bool horizontal: control.orientation === Qt.Horizontal
+ property bool scrollToClickPosition: true
+ property int minimumHandleLength: 30
+ property int handleOverlap: 1
implicitWidth: horizontal ? 200 : bg.implicitWidth
implicitHeight: horizontal ? bg.implicitHeight : 200
- property Component background: Rectangle {
+ property Component background: Item {
implicitWidth: 16
implicitHeight: 16
- color: "gray"
+ Rectangle {
+ anchors.fill: parent
+ color: "#ddd"
+ border.color: "#aaa"
+ anchors.rightMargin: horizontal ? -2 : 0
+ anchors.leftMargin: horizontal ? -2 : 0
+ anchors.topMargin: horizontal ? 0 : -2
+ anchors.bottomMargin: horizontal ? 0 : -2
+ }
}
property Component handle: Rectangle {
implicitWidth: 16
implicitHeight: 16
- color: "lightgray"
+ color: mouseOver ? "#ddd" : "lightgray"
border.color: "#aaa"
+
+ Rectangle {
+ anchors.fill: parent
+ anchors.margins: 1
+ color: "transparent"
+ border.color: "#66ffffff"
+
+ }
}
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}
}
- border.color: "#aaa"
}
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}
@@ -88,10 +119,6 @@ Rectangle {
border.color: "#aaa"
}
- property bool scrollToClickPosition: true
- property int minimumHandleLength: 30
- property int handleOverlap: 1
-
property string activeControl: ""
function pixelMetric(arg) {
if (arg === "scrollbarExtent")
@@ -175,14 +202,14 @@ Rectangle {
Loader{
id: handleControl
property int totalextent: horizontal ? bg.width : bg.height
- property int extent: Math.max(minimumHandleLength, 100 * totalextent / (control.maximumValue - control.minimumValue) + 2 * handleOverlap)
+ property int extent: Math.min (totalextent, Math.max(minimumHandleLength, 100 * totalextent / (control.maximumValue - control.minimumValue)))
property bool mouseOver: activeControl === "handle"
height: horizontal ? implicitHeight : extent
width: horizontal ? extent : implicitWidth
anchors.top: bg.top
anchors.left: bg.left
- anchors.topMargin: horizontal ? 0 : -handleOverlap + (control.value / control.maximumValue) * (bg.height + 2 * handleOverlap- height)
+ anchors.topMargin: horizontal ? 0 : -1 -handleOverlap + (control.value / control.maximumValue) * (bg.height + 2 * handleOverlap- height)
anchors.leftMargin: horizontal ? -handleOverlap + (control.value / control.maximumValue) * (bg.width + 2 * handleOverlap - width) : 0
sourceComponent: handle
}
diff --git a/src/styles/ScrollViewStyle.qml b/src/styles/ScrollViewStyle.qml
index b64fe16f8..b015be4f4 100644
--- a/src/styles/ScrollViewStyle.qml
+++ b/src/styles/ScrollViewStyle.qml
@@ -47,8 +47,16 @@ Style {
property bool frameOnlyAroundContents: false
property int scrollBarSpacing: 4
- property int defaultFrameWidth: 1
+ property int defaultFrameWidth: 3
- property Component frame: Rectangle { visible: frameVisible }
- property Component corner: Rectangle { color: "red" }
+ property Component frame: BorderImage {
+ source: "images/editbox.png"
+ border.left: 4
+ border.right: 4
+ border.top: 4
+ border.bottom: 4
+ visible: frameVisible
+ }
+
+ property Component corner: Rectangle { color: "lightgray" }
}
diff --git a/src/styles/SliderStyle.qml b/src/styles/SliderStyle.qml
index bebe9e90f..19ec33662 100644
--- a/src/styles/SliderStyle.qml
+++ b/src/styles/SliderStyle.qml
@@ -54,30 +54,31 @@ Style {
property color backgroundColor: "lightgray"
- property Component handle: Rectangle {
- implicitWidth: 12
- implicitHeight: 14
- gradient: Gradient {
- GradientStop {color: backgroundColor ; position: 0}
- GradientStop {color: Qt.darker(backgroundColor, 1.2) ; position: 1}
+ property Component handle: Item {
+ implicitWidth: 20
+ implicitHeight: 18
+ BorderImage {
+ anchors.fill: parent
+ source: "images/button.png"
+ border.top: 6
+ border.bottom: 6
+ border.left: 6
+ border.right: 6
}
- antialiasing: true
- radius: height/2
- border.color: Qt.darker(backgroundColor, 1.8)
}
- property Component background: Rectangle {
- anchors.verticalCenter: parent.verticalCenter
- implicitWidth: 200
- implicitHeight: 6
-
- gradient: Gradient {
- GradientStop {color: Qt.darker(backgroundColor, 1.2) ; position: 0}
- GradientStop {color: Qt.darker(backgroundColor, 1.5) ; position: 1}
- }
- antialiasing: true
- radius: height / 2.0
- border.color: Qt.darker(backgroundColor, 1.8)
+ property Component background: Item {
+ anchors.verticalCenter: parent.verticalCenter
+ implicitWidth: 100
+ implicitHeight: 8
+ BorderImage {
+ anchors.fill: parent
+ source: "images/button_down.png"
+ border.top: 3
+ border.bottom: 3
+ border.left: 6
+ border.right: 6
+ }
}
property Component panel: Item {
@@ -92,6 +93,8 @@ Style {
Loader {
id: backgroundControl
sourceComponent: background
+ anchors.left: parent.left
+ anchors.right: parent.right
property Control control: __cref
property Item handle: handleLoader.item
}
@@ -100,7 +103,7 @@ Style {
id: handleLoader
sourceComponent: handle
anchors.verticalCenter: backgroundControl.verticalCenter
- x: leftMargin + control.value / control.maximumValue * (root.width - leftMargin - rightMargin - width/2)
+ 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 1da813098..c17b1b1a3 100644
--- a/src/styles/SpinBoxStyle.qml
+++ b/src/styles/SpinBoxStyle.qml
@@ -65,7 +65,6 @@ Style {
}
property Component upControl: Rectangle {
- anchors.centerIn: parent
implicitWidth: 12
gradient: Gradient {
GradientStop {color: control.__upPressed ? "lightgray" : "white" ; position: 0}
@@ -75,6 +74,7 @@ Style {
Image {
source: "images/arrow-up.png"
anchors.centerIn: parent
+ opacity: 0.7
}
}
@@ -88,25 +88,26 @@ Style {
Image {
source: "images/arrow-down.png"
anchors.centerIn: parent
+ opacity: 0.7
}
}
- property Component background: Rectangle {
- anchors.fill: parent
- gradient: Gradient {
- GradientStop{color: Qt.darker(backgroundColor, 1.1) ; position: 0}
- GradientStop{color: Qt.lighter(backgroundColor, 1.2) ; position: 1}
+ property Component background: Item {
+ BorderImage {
+ anchors.fill: parent
+ source: "images/editbox.png"
+ border.left: 4
+ border.right: 4
+ border.top: 4
+ border.bottom: 4
+ anchors.bottomMargin: -2
}
- radius: 3
- antialiasing: true
- border.color: Qt.darker(backgroundColor, 2)
}
-
property Component panel: Item {
id: styleitem
implicitWidth: control.__contentWidth + 26
- implicitHeight: 21
+ implicitHeight: 23
property color foregroundColor: spinboxStyle.foregroundColor
property color backgroundColor: spinboxStyle.backgroundColor
diff --git a/src/styles/StatusBarStyle.qml b/src/styles/StatusBarStyle.qml
index 02ef32aff..308b9debd 100644
--- a/src/styles/StatusBarStyle.qml
+++ b/src/styles/StatusBarStyle.qml
@@ -60,7 +60,7 @@ Item {
}
Rectangle {
- anchors.bottom: parent.bottom
+ anchors.top: parent.top
width: parent.width
height: 1
color: "#999"
diff --git a/src/styles/TabViewStyle.qml b/src/styles/TabViewStyle.qml
index 9f4c0bd99..0adbe6b0c 100644
--- a/src/styles/TabViewStyle.qml
+++ b/src/styles/TabViewStyle.qml
@@ -68,34 +68,46 @@ Style {
/*! This property holds the amount of overlap there are between
individual tab buttons. The default value is 0
*/
- property int tabOverlap: 0
+ property int tabOverlap: 3
property int tabvshift : 0
- property int tabBaseOverlap: 0
+ property int tabBaseOverlap: 2
property Component frame: Item {
Rectangle {
anchors.fill: parent
- anchors.topMargin: -10
- color: "lightgray"
- border.color: "gray"
+ anchors.topMargin: -tabBaseOverlap
+ color: "#dcdcdc"
+ border.color: "#aaa"
+
+ Rectangle {
+ anchors.fill: parent
+ color: "transparent"
+ border.color: "#66ffffff"
+ anchors.margins: 1
+ }
}
}
property Component tab: Item {
- implicitWidth: textitem.implicitWidth + 20
- implicitHeight: textitem.implicitHeight + 4
-
- Rectangle {
+ scale: control.tabPosition === Qt.TopEdge ? 1 : -1
+ implicitWidth: Math.round(textitem.implicitWidth + 20)
+ implicitHeight: Math.round(textitem.implicitHeight + 10)
+ clip: true
+ Item {
anchors.fill: parent
- gradient: Gradient{
- GradientStop { color: tab.selected ? "lightgray" : "white" ; position: 0}
- GradientStop { color: tab.selected ? "lightgray" : "lightgray" ; position: 1}
+ anchors.bottomMargin: tab.selected ? 0 : 2
+ clip: true
+ BorderImage {
+ anchors.fill: parent
+ source: tab.selected ? "images/tab_selected.png" : "images/tab.png"
+ border.top: 6
+ border.bottom: 6
+ border.left: 6
+ border.right: 6
+ anchors.topMargin: control.tabPosition === Qt.TopEdge ? (tab.selected ? 0 : 1) : 0
}
- border.color: "#aaa"
-
}
-
Text {
id: textitem
anchors.centerIn: parent
@@ -103,5 +115,4 @@ Style {
renderType: Text.NativeRendering
}
}
-
}
diff --git a/src/styles/TableViewStyle.qml b/src/styles/TableViewStyle.qml
index 20352bd23..495475e81 100644
--- a/src/styles/TableViewStyle.qml
+++ b/src/styles/TableViewStyle.qml
@@ -49,7 +49,11 @@ ScrollViewStyle {
property color highlightedTextColor: "white"
property Component headerDelegate: Rectangle {
- color: "white"
+ gradient: Gradient {
+ GradientStop {position: 0 ; color: "#eee"}
+ GradientStop {position: 1 ; color: "#ddd"}
+ }
+
implicitHeight: 16
implicitWidth: 80
Text {
@@ -66,6 +70,14 @@ ScrollViewStyle {
height: 1
color: "#bbb"
}
+ Rectangle {
+ anchors.right: parent.right
+ anchors.top: parent.top
+ anchors.bottom: parent.bottom
+ anchors.bottomMargin: 2
+ width: 1
+ color: "#ccc"
+ }
}
property Component rowDelegate: Rectangle {
diff --git a/src/styles/TextFieldStyle.qml b/src/styles/TextFieldStyle.qml
index c2467ee8f..f50ba6910 100644
--- a/src/styles/TextFieldStyle.qml
+++ b/src/styles/TextFieldStyle.qml
@@ -51,8 +51,8 @@ Style {
id: style
property int topMargin: 4
- property int leftMargin: 8
- property int rightMargin: 8
+ property int leftMargin: 6
+ property int rightMargin: 6
property int bottomMargin: 4
property color foregroundColor: "black"
@@ -62,15 +62,17 @@ Style {
property font font
- property Component background: Rectangle {
- id: styleitem
- border.color: Qt.darker(backgroundColor, 2)
- gradient: Gradient {
- GradientStop{color: Qt.darker(backgroundColor, 1.1) ; position: 0}
- GradientStop{color: Qt.lighter(backgroundColor, 1.2) ; position: 1}
+ property Component background: Item {
+ implicitWidth: 100
+ implicitHeight: 25
+ BorderImage {
+ anchors.fill: parent
+ source: "images/editbox.png"
+ border.left: 4
+ border.right: 4
+ border.top: 4
+ border.bottom: 4
}
- radius: 3
- antialiasing: true
}
property Component panel: Item {
@@ -97,5 +99,16 @@ 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/button.png b/src/styles/images/button.png
new file mode 100644
index 0000000000000000000000000000000000000000..9ee7d8ee0af9433fbe9401f7e1a42490b0799fe8
GIT binary patch
literal 857
zcmV-f1E&0mP)<h;3K|Lk000e1NJLTq002Y)0015c1^@s6l?J#Y00009a7bBm000XU
z000XU0RWnu7ytkR3rR#lR9Fe^m_bULQ51zuQV_vGD|Fh4P(iTUD6XR$a1C973vdVS
zphH(6II`fZh0a<b*pW%!_m}T+d?ukCl;mkIr02eK?~V7IJpZ;C&FAy2)6>(JB`)so
z?+?p)vh@sOI-R~cIXU_90`0rIyWfwFj%IHU4#uO==vmpph4_4ZJ-fQPx+ucm4Tj(V
zX8gRndt?R!m?YZJp5<G#Pqf~i<y*8*wBDZOTeMHKo@caQUS1wjtA=o($;bhDF?-Bg
z>}|g6J3K0?Aqe;z!D)auC^_=>{o1<cb<ev8SPkKzfLt(hdOV9cM^0od^Q<NB&mD%>
zJpaHD7GgPG?ZTdOdHbBp9`i*tIAW9Le{U2wgym+l*}_F3sUgzP7*Ju!*(<l{^XjTM
zL}3&ZVUw6VxuU73;Oui2On%em-Lo39XknX{VG8VdK6NZL1cCV+SZ2y9zL)uhhDeGC
zC0CRP|0j7*^XzKW8-n=qf0-&aMbqpV^x<m`5<W-L$e~dF*yMS41gjyEDM}911UYY#
zDBt6JYN&=lT1d=K7SZ<Q?MTiZv4?qfHL4*H8euWHw&q#P-rnX@!%{>1WK&$5uj*M<
z^L<wJtg8LX`DzF*`C=KL1^#eqE(sDoS3JYn*V8;Z8`Tg9Mc9yn;S{?n*EHV`l-uNa
z_9UtyEK4Ys+)qAh@J90FDV&~O=G6l}Fhqei<hd2BSbM?jZ_ho<vvW116~K82o)>X@
zq+9XwkFbOJ)KU$B^o1y|e~YbPZwj;a_BgMuu?eVCpbyj*+rI4Wb>6+v_TYx(-!gvM
zHYZZkDBgtd?3|c$^l{$Ad3GZ-gs;km+mZrY9+YP&b4`RNtU1#flRf0?o_9}nAqGQs
zc6Pqp+}ym`-`}r-5JE7ZC=q^9-g3Rn7wxP%#0bH+x3?e8&(F_NkPS~A$K&yAdwcuq
z@$vD;y}iA&!H^>QeR;hu--nDRlL@~*T#tD<57(q{<+#Pa+(vw7QqGxEBL*(9hxxLv
j8o!nNlZKT1f8f9`;$+{eg15xx00000NkvXXu0mjfo?)qR
literal 0
HcmV?d00001
diff --git a/src/styles/images/button_down.png b/src/styles/images/button_down.png
new file mode 100644
index 0000000000000000000000000000000000000000..088ed20d53b202ffd49b9cdbe82ea213a80b77a5
GIT binary patch
literal 993
zcmV<710MW|P)<h;3K|Lk000e1NJLTq002Y)0015c1^@s6l?J#Y00009a7bBm000XU
z000XU0RWnu7ytkRlSxEDR9Fe^nM+RGKomvG5WX{{&Xg!(f&>x+)_}4LR*+p}2`qqp
zq(|8R1H^!7GKxgTd<9OO>b{lh>N2A!*sVOtet-A7*Hv!GZrZjDCnqPndwYA|nx@%Z
zUteE|5~3ZJS-}1B@)Dk&p2F(tYPi0>{xF?Rf4l?q{{H^=ot>Tb@bIwN-ri0;R0)Bj
zHl=${^zma=8Bjkna@^hBg{!NpmIV=K{+I}Petr&+F_}!l#>Pfk9U??pAO*NDUJ}t)
z*BAd+{rnD??(grz!NEaub91vxED^G{widRww!-G-W{6uR5mF<d7Sn|tAa<>`78^o8
z*m+cBLiEg#W^e(dNaC>!I&K5mXt&iTO-`b^@W%bkN|T-;U`Nu~fe=i?&L0*|j_xou
zibo1?GZEPyVL!9aXu*ooxq}9DmM!vjx2yRP_JgBCh=8G;oSNSkBaV!<KNA7~9RSK(
zV!jgOlS8QWn0nEOa;2Y=@ier4&6WOT<N!iIh`B8Q#AORCF@$<V@v-$YdxsE!2#f<$
zOxkm9d%hO;e9iXQTlDjrdCT|!*e>Ouo^!jet}pJr*nM?<@xR^A^*V%<OP)bEJg(tN
z&BeS9e{B8CoVSdIM+=y=z(>e2*L{X8*8Cx6F*n?P$Urh7IEw&?y0BtqzDOzw#8=Kc
z=Us#B_c=RTrXR?xMTGeUh^bH7^KK8lpIJME`0%nFq}!ga#XVoMJvOBN1wt6k2lTt@
zaREY?HC|Wdyiayn^OpUY5Dmd_9P-h!0U*0CKGuHSoX$h_HIO30$#Q~9+kNkG+iObO
zeeZGGYf9UF?{Ql-!iJw$2u>*~bS=BAt@)~TExT4<##HNCc3E5VRqI-It)5sW#0%Y~
zNIvYkDDE|-?f#Jag)0+M4h~o?uLNZNX3Ohz5fLNpeY%d`j19S;*%BcDNTBBk1#Ipn
z6(6l#f~<C#`qM*|?-M#ihVF8Ql(=dT)hOq_?6LF<HyTNVJU%|Q@%u#c@bHj=fD*72
zSi+N5HJJG}!v`xQ5fWd)|GK=qoE#k;HN2A7+xPTZwEG-QL~$_$(rR`}rh<4HXuk-#
zy}b<)dmF#rrRCp{xVX6Ze13j@#s@3D(PTn0vgI?t%{F0oupmxPPrn==AD<;cBHT~$
zcpnK_iA=GXV5^OOVvTQ~_{1SC`fig$Qq1)j`s2L9_%qsHMM$*&3k>`QV8~IzmrJ^z
P00000NkvXXu0mjfp6}hL
literal 0
HcmV?d00001
diff --git a/src/styles/images/editbox.png b/src/styles/images/editbox.png
new file mode 100644
index 0000000000000000000000000000000000000000..1f25e70d9bf37a08ae2205c08511bca7ea45427e
GIT binary patch
literal 546
zcmV+-0^R+IP)<h;3K|Lk000e1NJLTq002Y)0015c1^@s6l?J#Y00009a7bBm000XU
z000XU0RWnu7ytkP)Ja4^R9Fe^nZarTF%X6~yM<NQLo4*!W2L*;*C;+mU%+SR6ZinW
zfp5^GPawD+?74;BTER;Nvz-ZMm<(Cz$>Jsv*_qiH%>OybAyG}!B-82i8ph&qIF#UL
zNq}Rw+uckilkY3kUKGXGXf)FI!(qx<AS|U64;i~HE)(1G+T#CJ|F+ra)oQhX-+wef
za3T+7nKoLxa{?F*d=z{f5gtfx;nBO0depvLE=!y>0ZG#|$$LH0<p7|l-|*%7V*cvH
zg?&sqXZ_E9k8?0v1p&c%@a4hnHX%0d%k{-<zI^&}eKA>QeP6CGX7f)yojv1JVkqw-
z5b;k(AQ6ZlAYAGY+|@%JTsr{?6^7Iufe0c5gtv{z3CblPL8%sEc{4;H0!{=Hfd~S^
zr4HfiNaS?h<=P2I=T-kvU<4vS5fI)sA}1)9fCQylh~>=?fe1JeNCYAX2-kLq#&s0x
ziHK&`FXq&}-|xTIb$wS=m2>hg;C0f)Mp&=cq)lO9yWKv|=kpmJ-SZunvN~+QeU#4g
z{9`;GzYGS0nE?WNpWu57ce`npWq5su_m>U$<{lGb;F=YsAeMlStIOK>4u^^H=Oxs`
ke67Y$uwN|@u;V}izt%zIawkWxQ2+n{07*qoM6N<$f~3*%NB{r;
literal 0
HcmV?d00001
diff --git a/src/styles/images/groupbox.png b/src/styles/images/groupbox.png
new file mode 100644
index 0000000000000000000000000000000000000000..98585ee8c71015b309d94bde67524ce1d7e5c5aa
GIT binary patch
literal 485
zcmeAS@N?(olHy`uVBq!ia0vp^NkFW|!3HGlbNotx6lZ})WHAE+w=f7ZGR&GI!N9;c
z-P6S}B!l(s?1g#F0TQj;w>`YJC4_zBP@buNGdV$U#w|NxrpBkXue8503BML<Vmx%{
z#$I#L8OqgKWdToO3iI~$?_aflyUuC1^KUut+}2j{{4{0R%WM(X*>B5!SO3ob+b_*?
z_<{fBlItdCPi_|8c>n$V<As0Ly#AFV5Fscv`E@<_yp<oi7gfxA{`07>i$t4!YGmEa
z=9j<zW<?0ESoNyLLMG{c+w}R$z6WOsyszE(XKsi0a+ePe*3XvtzP01)!h0uKRGN5X
zu6nX4IiFJ<NY+}{8~<OwekfdUXD-L?ok_n`oAeKwRZZI;9g=zbn(=IH>&+$~bNRLy
z9ua(G*7nKf{@2?755l%TvZy<=>5VQ&Q>1l?4EMI9eoog*XFvY<<0HHK@<6+PeS!AC
Pcw_K%^>bP0l+XkKBPGf>
literal 0
HcmV?d00001
diff --git a/src/styles/images/tab.png b/src/styles/images/tab.png
new file mode 100644
index 0000000000000000000000000000000000000000..ae686c4ce0219ab01531c940969acd69359e879b
GIT binary patch
literal 460
zcmV;-0W<!IP)<h;3K|Lk000e1NJLTq002S&000;W1^@s6PC+Yq00006VoOIv0RI60
z0RN!9r;`8x010qNS#tmY3ljhU3ljkVnw%H_000McNliru-2@R25j&ROzG46X0a-~z
zK~z}7<(M(ggdhxtUpN*Mhr6B0@qV?x<^G0=llwOs2k0$_K~hliEjF--*rz0oylqkA
zI6nKn|2XH~03K*?tn2zRUDy2$!{Dv88cMYl0U|8R;^%q(7yz)=>TTOv{25@a)zdV+
zH6JMYXQ0LL4+8+iz*n6qrC3`jd>AGLW5?+x;XPhYHx$RGfe22yjlz5EG^}$r()c|P
zoDuiTeb3D$@L{e)8mT#3B|VYIvl`J{Fn&*ygL7(pbx7e4Vo8~(aw>aeE{Q)L4I((_
zSTIdH-ur#cd%rsib7?$s>9ba)&(`kFBhDIB5R=-}C6O<RWh=p;QXsA<ZplU>f2b^D
zL5USLRp1~_sq#wXDOX3-o~>HDyYiYlYc*{x*QZG0i%nOlxJtXWt0nK<`C`_9QhT1Q
zt>vZgM~#TYlDojjsW5jRAdx@qK63(d*71qrf8W08Mum?u#z74L0000<MNUMnLSTZc
C%f+k!
literal 0
HcmV?d00001
diff --git a/src/styles/images/tab_selected.png b/src/styles/images/tab_selected.png
new file mode 100644
index 0000000000000000000000000000000000000000..369de2e49159f290239b421da1e07a55d06c5757
GIT binary patch
literal 498
zcmV<O0S*3%P)<h;3K|Lk000e1NJLTq002S&000^Y1^@s61Br@q00006VoOIv0RI60
z0RN!9r;`8x010qNS#tmY3ljhU3ljkVnw%H_000McNliru-2@R24;l{lk>daW0e?wE
zK~z}7<(RRKgdh-xe_SdPle-t7vD+8-J@zp+v9YAN&X_YWS8Omy2E<(BL>dA4hB%Rb
zW>CX0e05#-a?U*gJaEG{&-1r#+xDmLdvA<spwzuQK!j<U{5Xy;4FJZNW?7ay{tPh2
zH1GHO+3=2{e>z$m|Ih$H3|wnWDaEdp!iT0)FgBcS62|d-x}i8ebwn`AZ4}0_(J;@g
zk;ZS1;1+Su-1}T#0w4NK$zZJ*N#|LOxSKP=Q|I8E8rL={{LT@%GsmfHO<xkfKN>`E
z&aq$`cD(o7ocDe+7W&e7<ih7!l|GugI*(n{s1TFd&?S*CisfCLK_y4jC~j$uM1Gf9
z#)1+nYO26NoKoeL$Y=A2vuEq<x~uYRihZW6<?0kke6i>%C0A+HR-5u(oi9cWD7D4e
zv$?z!ey<UcSaKH_IThya10?c?)n`s%jw(J;d=N`(t)j}5mAlYL#}avKt<nInuB-aI
oC-%xN=Xow(OX7(Lzn^c%ALs)~cB2~&W&i*H07*qoM6N<$f(VM+f&c&j
literal 0
HcmV?d00001
diff --git a/src/styles/styles.pro b/src/styles/styles.pro
index 402a8db7b..506d042e4 100644
--- a/src/styles/styles.pro
+++ b/src/styles/styles.pro
@@ -46,6 +46,12 @@ QML_FILES += \
# Images
QML_FILES += \
+ images/button.png \
+ images/button_down.png \
+ images/tab.png \
+ images/groupbox.png \
+ images/tab_selected.png \
+ images/editbox.png \
images/arrow-up.png \
images/arrow-down.png
--
GitLab