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 + tests/manual/testbench/main.qml | 295 +++++++++++++++++-------- 8 files changed, 236 insertions(+), 116 deletions(-) create mode 100644 src/imports/controls/images/dial-indicator.png 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 diff --git a/tests/manual/testbench/main.qml b/tests/manual/testbench/main.qml index d7b013c9..2a09b541 100644 --- a/tests/manual/testbench/main.qml +++ b/tests/manual/testbench/main.qml @@ -51,12 +51,6 @@ ApplicationWindow { width: 750 height: 1000 - Theme.backgroundColor: themeSwitch.checked ? "#444" : "#fff" - Theme.frameColor: themeSwitch.checked ? "#666" : "#ccc" - Theme.textColor: themeSwitch.checked ? "#eee" : "#111" - Theme.pressColor: themeSwitch.checked ? "#33ffffff" : "#33333333" - Theme.baseColor: themeSwitch.checked ? "#444" : "#eee" - Material.theme: themeSwitch.checked ? Material.Dark : Material.Light Universal.theme: themeSwitch.checked ? Universal.Dark : Universal.Light @@ -125,23 +119,59 @@ ApplicationWindow { text: "Pressed" pressed: true } + Button { + text: "Checked" + checked: true + } + Button { + text: "CH + PR" + checked: true + pressed: true + } Button { text: "Disabled" enabled: false } Button { - text: "Highlighted" + text: "CH + DIS" + enabled: false + checked: true + } + } + + RowLayout { + spacing: window.controlSpacing + + Button { + text: "HI" highlighted: true } Button { - text: "Pressed + HL" + text: "HI + PR" + highlighted: true pressed: true + } + Button { + text: "HI + CH" highlighted: true + checked: true + } + Button { + text: "HI+CH+PR" + highlighted: true + pressed: true + checked: true } Button { - text: "HL + Disabled" + text: "HI + DIS" + highlighted: true enabled: false + } + Button { + text: "HI+CH+DIS" highlighted: true + enabled: false + checked: true } } @@ -158,7 +188,7 @@ ApplicationWindow { checked: true } CheckBox { - text: "Checked + Pressed" + text: "CH + PR" checked: true pressed: true } @@ -166,6 +196,11 @@ ApplicationWindow { text: "Disabled" enabled: false } + CheckBox { + text: "CH + DIS" + checked: true + enabled: false + } } RowLayout { @@ -181,7 +216,7 @@ ApplicationWindow { checked: true } RadioButton { - text: "Checked + Pressed" + text: "CH + PR" checked: true pressed: true } @@ -189,6 +224,11 @@ ApplicationWindow { text: "Disabled" enabled: false } + RadioButton { + text: "CH + DIS" + checked: true + enabled: false + } } RowLayout { @@ -204,7 +244,7 @@ ApplicationWindow { checked: true } Switch { - text: "Checked + Pressed" + text: "CH + PR" checked: true pressed: true } @@ -260,42 +300,97 @@ ApplicationWindow { } RowLayout { - TextArea { - text: "Normal" + Item { + implicitWidth: normalGroupBox.width + implicitHeight: normalTextArea.implicitHeight + + TextArea { + id: normalTextArea + text: "Normal" + } } - TextArea { - text: "Disabled" - enabled: false + Item { + implicitWidth: normalGroupBox.width + implicitHeight: normalTextArea.implicitHeight + + TextArea { + text: "Placeholder" + } + } + Item { + implicitWidth: normalGroupBox.width + implicitHeight: normalTextArea.implicitHeight + + TextArea { + text: "Disabled" + enabled: false + } } } RowLayout { - TextField { - text: "Normal" + Item { + implicitWidth: normalGroupBox.implicitWidth + implicitHeight: normalTextField.implicitHeight + + TextField { + id: normalTextField + text: "Normal" + } } - TextField { - text: "Disabled" - enabled: false + Item { + implicitWidth: normalGroupBox.implicitWidth + implicitHeight: normalTextField.implicitHeight + + TextField { + placeholderText: "Placeholder" + } + } + Item { + implicitWidth: normalGroupBox.implicitWidth + implicitHeight: normalTextField.implicitHeight + + TextField { + text: "Disabled" + enabled: false + } } } RowLayout { - SpinBox { + Item { + implicitWidth: normalGroupBox.implicitWidth + implicitHeight: normalSpinBox.implicitHeight + + SpinBox { + id: normalSpinBox + } } - SpinBox { - up.pressed: true + Item { + implicitWidth: normalGroupBox.implicitWidth + implicitHeight: normalSpinBox.implicitHeight + + SpinBox { + up.pressed: true + } } - SpinBox { - enabled: false + Item { + implicitWidth: normalGroupBox.implicitWidth + implicitHeight: normalSpinBox.implicitHeight + + SpinBox { + enabled: false + } } } RowLayout { GroupBox { + id: normalGroupBox title: "Normal" Item { - implicitWidth: 100 + implicitWidth: 200 implicitHeight: 100 BusyIndicator { @@ -308,7 +403,7 @@ ApplicationWindow { title: "Disabled" Item { - implicitWidth: 100 + implicitWidth: 200 implicitHeight: 100 BusyIndicator { @@ -316,68 +411,90 @@ ApplicationWindow { } } } - } + GroupBox { + enabled: false + title: "." + label.visible: false - RowLayout { - Frame { - Tumbler { - model: 5 - implicitWidth: 100 - implicitHeight: 100 - } - } - Frame { - Tumbler { - model: 5 - implicitWidth: 100 + Item { + implicitWidth: 200 implicitHeight: 100 - enabled: false + + PageIndicator { + count: 5 + enabled: false + anchors.bottom: parent.bottom + anchors.horizontalCenter: parent.horizontalCenter + } } } } RowLayout { Frame { - Layout.preferredWidth: 100 - Layout.preferredHeight: 100 + id: scrollBarFrame - ScrollBar { - size: 0.3 - position: 0.2 - active: true - orientation: Qt.Vertical - height: parent.height - anchors.right: parent.right + Item { + implicitWidth: 200 + implicitHeight: 100 + + Label { + text: "Normal" + anchors.centerIn: parent + } + + ScrollBar { + size: 0.3 + position: 0.2 + active: true + orientation: Qt.Vertical + height: parent.height + anchors.right: parent.right + } } } Frame { - Layout.preferredWidth: 100 - Layout.preferredHeight: 100 + Item { + implicitWidth: 200 + implicitHeight: 100 - ScrollBar { - size: 0.3 - position: 0.2 - active: true - orientation: Qt.Vertical - height: parent.height - anchors.right: parent.right - pressed: true + Label { + text: "Pressed" + anchors.centerIn: parent + } + + ScrollBar { + size: 0.3 + position: 0.2 + active: true + orientation: Qt.Vertical + height: parent.height + anchors.right: parent.right + pressed: true + } } } Frame { - Layout.preferredWidth: 100 - Layout.preferredHeight: 100 - - ScrollBar { - size: 0.3 - position: 0.2 - active: true - orientation: Qt.Vertical - height: parent.height - anchors.right: parent.right + Item { + implicitWidth: 200 + implicitHeight: 100 enabled: false + + Label { + text: "Disabled" + anchors.centerIn: parent + } + + ScrollBar { + size: 0.3 + position: 0.2 + active: true + orientation: Qt.Vertical + height: parent.height + anchors.right: parent.right + } } } } @@ -413,33 +530,29 @@ ApplicationWindow { } } - PageIndicator { - count: 5 - enabled: false - } - RowLayout { - Dial { + Frame { + Tumbler { + model: 5 + implicitWidth: 100 + implicitHeight: 100 + } } - Dial { - enabled: false + Frame { + Tumbler { + model: 5 + implicitWidth: 100 + implicitHeight: 100 + enabled: false + } } } RowLayout { - Frame { - Label { - text: "Normal\nLabel" - horizontalAlignment: Text.AlignHCenter - } + Dial { } - Frame { + Dial { enabled: false - - Label { - text: "Disabled\nLabel" - horizontalAlignment: Text.AlignHCenter - } } } } -- cgit v1.2.3