From a97a6d607c5ddced39a47a4385153a54eff7bc47 Mon Sep 17 00:00:00 2001 From: jan Iversen Date: Sat, 11 Jan 2020 09:03:48 +0100 Subject: mobile-widgets: update design of TemplateSpinBox The standard SpinBox uses far too much real estate. The new SpinBox have a smaller footprint, and more visual effect. Changing the TemplateSpinBox, automatically changes all spinboxes in the system, converted to the new layout. The styling would be better in a style/theme class, but subsurfaceTheme is in main.qml and not in a C++ class, so for now use primitive styling. Signed-off-by: jan Iversen Signed-off-by: Dirk Hohndel --- mobile-widgets/qml/TemplateSpinBox.qml | 62 +++++++++++++++++++++++++++++++++- 1 file changed, 61 insertions(+), 1 deletion(-) (limited to 'mobile-widgets/qml/TemplateSpinBox.qml') diff --git a/mobile-widgets/qml/TemplateSpinBox.qml b/mobile-widgets/qml/TemplateSpinBox.qml index d0b6469d2..69e39bea3 100644 --- a/mobile-widgets/qml/TemplateSpinBox.qml +++ b/mobile-widgets/qml/TemplateSpinBox.qml @@ -4,5 +4,65 @@ import QtQuick.Controls 2.4 import QtQuick.Layouts 1.11 SpinBox { - font.pointSize: subsurfaceTheme.regularPointSize; + id: control + editable: true + font.pointSize: subsurfaceTheme.regularPointSize + + contentItem: TextInput { + z: 2 + text: control.textFromValue(control.value, control.locale) + + font: control.font + color: control.enabled ? "black" : "lightgrey" + horizontalAlignment: Qt.AlignHCenter + verticalAlignment: Qt.AlignVCenter + + readOnly: !control.editable + validator: control.validator + inputMethodHints: Qt.ImhFormattedNumbersOnly + } + + up.indicator: Rectangle { + x: control.mirrored ? 0 : parent.width - width + height: control.height + implicitWidth: 30 + implicitHeight: 30 + color: control.enabled ? "grey" : "lightgrey" + border.color: control.enabled ? "grey" : "lightgrey" + + Text { + text: "+" + font.pixelSize: control.font.pixelSize * 2 + color: control.enabled ? "black" : "lightgrey" + anchors.fill: parent + fontSizeMode: Text.Fit + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + } + } + + down.indicator: Rectangle { + x: control.mirrored ? parent.width - width : 0 + height: control.height + implicitWidth: 30 + implicitHeight: 30 + color: control.enabled ? "grey" : "lightgrey" + border.color: control.enabled ? "grey" : "lightgrey" + + Text { + text: "-" + font.pixelSize: control.font.pixelSize * 2 + color: control.enabled ? "black" : "lightgrey" + anchors.fill: parent + fontSizeMode: Text.Fit + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + } + } + + background: Rectangle { + implicitWidth: 140 + color: subsurfaceTheme.backgroundColor + border.color: subsurfaceTheme.backgroundColor + } } -- cgit v1.2.3-70-g09d2