overte/scripts/system/settings/qml_widgets/SettingNumber.qml

import QtQuick 2.7
import QtQuick.Controls 2.5
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.3

// TODO: Numpad Enter key support

Item {
	id: root;
	property string settingText: "";
	property var settingValue: 0;

	property real minValue: 0;
	property real maxValue: 9;
	property string suffixText: "";
	property real stepSize: 1;

	signal valueChanged(int value);

	height: 50;
	width: parent.width;

	RowLayout {
		width: parent.width - 10;
		height: parent.height;
		anchors.horizontalCenter: parent.horizontalCenter;
		Layout.alignment: Qt.AlignTop;

		Text {
			id: settingTextElem
			height: parent.height;
			text: settingText;
			color: "white";
			font.pointSize: 14;
			width: parent.width - 200;
		}

		Item {
			Layout.alignment: Qt.AlignRight;
			width: 225;
			height: parent.height;

			SpinBox {
				id: spinbox;
				value: settingValue;
				from: minValue;
				to: maxValue;
				stepSize: stepSize;
				Layout.alignment: Qt.AlignRight;
				implicitWidth: 200;
				implicitHeight: parent.height;

				contentItem: TextField {
					id: spinboxText;
					color: "white";
					text: parent.value;
					verticalAlignment: Qt.AlignVCenter
					horizontalAlignment: TextInput.AlignHCenter
					width: parent.width;
					clip: true;
					font.pointSize: 14
					validator: RegExpValidator { regExp: /[0-9]*/ }

					background: Rectangle {
						color: "transparent";
						border.width: 1;
						border.color: "white";
						radius: 10;
					}

					onTextChanged: {
						valueChanged(spinbox.value);
					}

					Keys.onPressed: {
						if (event.key === Qt.Key_Return) {
							event.accepted = true;
							valueChanged(spinboxText.text);
						}
					}
				}

				up.indicator: Button {
					height: parent.height - 15;
					width: parent.height;
					x: parent.width - width;
					anchors.verticalCenter: parent.verticalCenter;

					background: Rectangle {
						color: "transparent";
						border.color: "white";
						border.width: 1;
						radius: 10;
					}

					Text {
						text: "+";
						color: "white";
						font.pointSize: 20;
						verticalAlignment: Qt.AlignVCenter	
						anchors.horizontalCenter: parent.horizontalCenter;
						anchors.verticalCenter: parent.verticalCenter;
					}

					onClicked: {
						spinbox.value += stepSize;
						valueChanged(spinbox.value);
					}
				}

				down.indicator: Button {
					height: parent.height - 15;
					width: parent.height;
					anchors.verticalCenter: parent.verticalCenter;

					background: Rectangle {
						color: "transparent";
						border.color: "white";
						border.width: 1;
						radius: 10;
					}

					Text {
						text: "-";
						color: "white";
						font.pointSize: 20;
						anchors.horizontalCenter: parent.horizontalCenter;
						anchors.verticalCenter: parent.verticalCenter;
					}

					onClicked: {
						spinbox.value -= stepSize;
						valueChanged(spinbox.value);
					}
				}

				background: Rectangle {
					color: "transparent";
				}


			}

			Text {
				visible: suffixText != "";
				text: suffixText;
				color: "white";
				height: parent.height;
				verticalAlignment: Qt.AlignVCenter
				x: spinbox.width + 10;
			}
		}
	}
}