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 <jan@casacondor.com>
Signed-off-by: Dirk Hohndel <dirk@hohndel.org>

1 files changed, 61 insertions, 1 deletions

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
+	}
 }