From f556f3ea80ebc41cb6a49560e83965c8889b8974 Mon Sep 17 00:00:00 2001 From: Mitch Curtis Date: Mon, 23 Nov 2015 14:17:32 +0100 Subject: Implement more of default style design Change-Id: Ieaa2fa1b876d75f94f48a7fce0c47c166b969d57 Reviewed-by: J-P Nurmi --- src/imports/controls/CheckBox.qml | 8 +++---- src/imports/controls/Dial.qml | 29 +++++++++++++------------ src/imports/controls/RadioButton.qml | 7 +++--- src/imports/controls/SpinBox.qml | 1 + src/imports/controls/TextField.qml | 11 ++++++---- src/imports/controls/images/dial-indicator.png | Bin 0 -> 330 bytes src/imports/controls/qtlabscontrolsplugin.qrc | 1 + 7 files changed, 32 insertions(+), 25 deletions(-) create mode 100644 src/imports/controls/images/dial-indicator.png (limited to 'src/imports/controls') diff --git a/src/imports/controls/CheckBox.qml b/src/imports/controls/CheckBox.qml index 5eb7696e..5bfddbf3 100644 --- a/src/imports/controls/CheckBox.qml +++ b/src/imports/controls/CheckBox.qml @@ -51,6 +51,7 @@ T.CheckBox { padding: 6 spacing: 6 + opacity: enabled ? 1 : 0.2 //! [indicator] indicator: Rectangle { @@ -59,15 +60,14 @@ T.CheckBox { x: text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2 y: control.topPadding + (control.availableHeight - height) / 2 - color: control.pressed ? "#bdbebf" : "#ffffff" - border.color: control.pressed ? "#26282a" : (control.checked ? "#353637" : "#bdbebf") + color: control.enabled ? (control.pressed ? "#bdbebf" : "#ffffff") : "#353637" + border.color: control.enabled ? (control.pressed ? "#26282a" : "#353637") : "transparent" Image { x: (parent.width - width) / 2 y: (parent.height - height) / 2 source: "qrc:/images/check.png" visible: control.checked -// opacity: control.tristate && control.checkState === Qt.PartiallyChecked ? 0.5 : 1.0 } } //! [indicator] @@ -81,7 +81,7 @@ T.CheckBox { text: control.text font: control.font - color: control.enabled ? "#26282a" : "#bdbebf" + color: control.pressed ? "#26282a" : "#353637" elide: Text.ElideRight visible: control.text horizontalAlignment: Text.AlignLeft diff --git a/src/imports/controls/Dial.qml b/src/imports/controls/Dial.qml index 378a9339..65a2c2f1 100644 --- a/src/imports/controls/Dial.qml +++ b/src/imports/controls/Dial.qml @@ -35,33 +35,40 @@ ****************************************************************************/ import QtQuick 2.6 -import Qt.labs.controls 1.0 import Qt.labs.templates 1.0 as T T.Dial { id: control - implicitWidth: 100 - implicitHeight: 100 + implicitWidth: 184 + implicitHeight: 184 //! [background] background: Rectangle { - color: control.Theme.backgroundColor radius: width / 2 + border.color: "#353637" - border.color: control.activeFocus ? control.Theme.focusColor : control.Theme.frameColor + Text { + text: control.position.toFixed(1) + color: "#353637" + font.pixelSize: 60 + x: parent.width / 2 - width / 2 + y: parent.height / 2 - height / 2 + } } //! [background] //! [handle] - handle: Rectangle { + handle: Image { id: handleItem - x: background.width / 2 - handle.width / 2 y: background.height / 2 - handle.height / 2 + width: 14 + height: 10 + source: "qrc:/images/dial-indicator.png" transform: [ Translate { - y: -background.height * 0.35 + y: -background.height * 0.4 }, Rotation { angle: control.angle @@ -69,12 +76,6 @@ T.Dial { origin.y: handle.height / 2 } ] - implicitWidth: 20 - implicitHeight: 20 - radius: width / 2 - border.width: control.activeFocus ? 2 : 1 - border.color: control.activeFocus ? control.Theme.focusColor : control.Theme.frameColor - color: control.Theme.baseColor } //! [handle] } diff --git a/src/imports/controls/RadioButton.qml b/src/imports/controls/RadioButton.qml index 66c88118..e41d2d11 100644 --- a/src/imports/controls/RadioButton.qml +++ b/src/imports/controls/RadioButton.qml @@ -52,6 +52,7 @@ T.RadioButton { padding: 6 spacing: 6 + opacity: enabled ? 1 : 0.2 //! [indicator] indicator: Rectangle { @@ -62,7 +63,7 @@ T.RadioButton { radius: width / 2 border.width: 1 - border.color: control.pressed ? "#26282a" : control.enabled && control.checked ? "#353637" : "#bdbebf" + border.color: (control.pressed ? "#26282a" : "#353637") color: control.pressed ? "#bdbebf" : "#ffffff" Rectangle { @@ -71,7 +72,7 @@ T.RadioButton { width: 20 height: 20 radius: width / 2 - color: control.enabled ? "#353637" : "#bdbebf" + color: control.pressed ? "#26282a" : "#353637" visible: control.checked } } @@ -86,7 +87,7 @@ T.RadioButton { text: control.text font: control.font - color: control.enabled ? control.Theme.textColor : control.Theme.disabledColor + color: control.pressed ? "#26282a" : "#353637" elide: Text.ElideRight visible: control.text horizontalAlignment: Text.AlignLeft diff --git a/src/imports/controls/SpinBox.qml b/src/imports/controls/SpinBox.qml index a8b2dbe5..6a157ba9 100644 --- a/src/imports/controls/SpinBox.qml +++ b/src/imports/controls/SpinBox.qml @@ -52,6 +52,7 @@ T.SpinBox { padding: 6 leftPadding: 6 + (control.mirrored ? (up.indicator ? up.indicator.width : 0) : (down.indicator ? down.indicator.width : 0)) rightPadding: 6 + (control.mirrored ? (down.indicator ? down.indicator.width : 0) : (up.indicator ? up.indicator.width : 0)) + opacity: control.enabled ? 1 : 0.3 //! [validator] validator: IntValidator { diff --git a/src/imports/controls/TextField.qml b/src/imports/controls/TextField.qml index 25e1461d..7b778b0e 100644 --- a/src/imports/controls/TextField.qml +++ b/src/imports/controls/TextField.qml @@ -46,10 +46,12 @@ T.TextField { placeholder.implicitHeight + topPadding + bottomPadding) padding: 6 + leftPadding: 10 -// color: enabled ? "" : "#bdbebf" -// selectionColor: Theme.selectionColor -// selectedTextColor: Theme.selectedTextColor + opacity: enabled ? 1 : 0.2 + color: "#353637" + selectionColor: "#fddd5c" + selectedTextColor: color verticalAlignment: TextInput.AlignVCenter Text { @@ -73,7 +75,8 @@ T.TextField { implicitWidth: 200 implicitHeight: 40 // border.width: control.activeFocus ? 2 : 1 - border.color: "#bdbebf" + color: control.enabled ? "transparent" : "#353637" + border.color: control.enabled ? "#bdbebf" : "transparent" } //! [background] } diff --git a/src/imports/controls/images/dial-indicator.png b/src/imports/controls/images/dial-indicator.png new file mode 100644 index 00000000..c5211cda Binary files /dev/null and b/src/imports/controls/images/dial-indicator.png differ diff --git a/src/imports/controls/qtlabscontrolsplugin.qrc b/src/imports/controls/qtlabscontrolsplugin.qrc index d2dc4f4c..ed51e07b 100644 --- a/src/imports/controls/qtlabscontrolsplugin.qrc +++ b/src/imports/controls/qtlabscontrolsplugin.qrc @@ -10,5 +10,6 @@ images/check@2x.png images/check@3x.png images/check@4x.png + images/dial-indicator.png -- cgit v1.2.3