Custom ComboBox element.

scripts/system/settings/qml_widgets/SettingComboBox.qml

@@ -0,0 +1,121 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.3
+
+Item {
+	id: root;
+	property string settingText: "";
+	property int optionIndex: 0;
+	property var options: [];
+
+	signal valueChanged(int index);
+
+	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;
+		}
+
+		ComboBox {
+			id: control
+			Layout.alignment: Qt.AlignRight;
+			implicitWidth: 225;
+			implicitHeight: parent.height - 15;
+			model: options;
+			currentIndex: optionIndex;
+
+			onCurrentIndexChanged: {
+				valueChanged(currentIndex);
+			}
+
+			delegate: ItemDelegate {
+				width: control.width
+				contentItem: Text {
+					text: options[index]
+					color: "white"
+					font: control.font
+					elide: Text.ElideRight
+					verticalAlignment: Text.AlignVCenter
+					horizontalAlignment: Text.AlignHCenter
+				}
+				background: Rectangle {
+					color: highlighted ? "gray" : "transparent";
+					radius: 10
+				}
+				highlighted: control.highlightedIndex === index
+			}
+
+			contentItem: Text {
+				text: control.displayText
+				color: "white";
+				verticalAlignment: Text.AlignVCenter
+				horizontalAlignment: Text.AlignHCenter
+				font.pointSize: 14;
+				elide: Text.ElideRight
+				width: parent.width;
+			}
+
+			background: Rectangle {
+				border.color: "white";
+				border.width: 1;
+				color: "transparent";
+				radius: 10;
+				width: parent.width;
+			}
+
+			popup: Popup {
+				width: control.width
+				padding: 1
+
+				contentItem: ListView {
+					clip: true
+					implicitHeight: contentHeight
+					model: control.popup.visible ? control.delegateModel : null
+					currentIndex: control.highlightedIndex
+
+					ScrollIndicator.vertical: ScrollIndicator { }
+				}
+
+				background: Rectangle {
+					color: Qt.rgba(0,0,0,0.9)
+					radius: 10
+				}
+			}
+
+			indicator: Canvas {
+				id: canvas
+				x: control.width - width - control.rightPadding
+				y: control.topPadding + (control.availableHeight - height) / 2
+				width: 12
+				height: 8
+				contextType: "2d"
+
+				Connections {
+					target: control
+					function onPressedChanged() { canvas.requestPaint(); }
+				}
+
+				onPaint: {
+					context.reset();
+					context.moveTo(0, 0);
+					context.lineTo(width, 0);
+					context.lineTo(width / 2, height);
+					context.closePath();
+					context.fillStyle = "white";
+					context.fill();
+				}
+			}
+		}
+	}
+}

scripts/system/settings/settings.qml

@@ -56,33 +56,13 @@ Rectangle {
 				spacing: 10
 
 				// Graphics Presets
-				RowLayout {
+				SettingComboBox {
-					width: parent.width
+					settingText: "Graphics preset";
+					optionIndex: Performance.getPerformancePreset() - 1;
+					options: ["Low Power", "Low", "Medium", "High", "Custom"];
 
-					Text {
+					onValueChanged: {
-						text: "Graphics Preset"
+						Performance.setPerformancePreset(index + 1)
-						color: "white"
-						height: parent.height
-						width: parent.width - 150
-						font.pointSize: 14
-						Layout.fillWidth: true
-					}
-
-					ComboBox {
-						currentIndex: Performance.getPerformancePreset() - 1 // One off error FTW!
-						Layout.fillWidth: true
-						model: ListModel {
-							id: cbItems
-							ListElement { text: "Low Power" }
-							ListElement { text: "Low" }
-							ListElement { text: "Medium" }
-							ListElement { text: "High" }
-							ListElement { text: "Custom" }
-						}
-
-						onCurrentIndexChanged: {
-							Performance.setPerformancePreset(currentIndex + 1)
-						}
 					}
 				}
 
@@ -162,36 +142,17 @@ Rectangle {
 				}
 
 				// FPS
-				RowLayout {
+				SettingComboBox {
-					width: parent.width
+					settingText: "Refresh rate";
+					optionIndex: Performance.getPerformancePreset() - 1;
+					options: ["Economical", "Interactive", "Real-Time", "Custom"];
 
-					Text {
+					Component.onCompleted: {
-						text: "Refresh Rate"
+						optionIndex = Performance.getRefreshRateProfile()
-						color: "white"
-						height: parent.height
-						width: parent.width - 150
-						font.pointSize: 14
-						Layout.fillWidth: true
 					}
 
-					ComboBox {
+					onValueChanged: {
-						id: refresh_rate_cb
+						Performance.setRefreshRateProfile(index)
-						currentIndex: 3
-						Layout.fillWidth: true
-						model: ListModel {
-							ListElement { text: "Economical" }
-							ListElement { text: "Interactive" }
-							ListElement { text: "Real-Time" }
-							ListElement { text: "Custom" }
-						}
-
-						Component.onCompleted: {
-							refresh_rate_cb.currentIndex = Performance.getRefreshRateProfile()
-						}
-
-						onCurrentIndexChanged: {
-							Performance.setRefreshRateProfile(currentIndex)
-						}
 					}
 				}
 
@@ -416,30 +377,13 @@ Rectangle {
 				}
 
 				// Anti Aliasing
-				RowLayout {
+				SettingComboBox {
-					width: parent.width
+					settingText: "Anti-aliasing";
+					optionIndex: Render.antialiasingMode;
+					options: ["None", "TAA", "FXAA"];
 
-					Text {
+					onValueChanged: {
-						text: "Anti-Aliasing"
+						Render.antialiasingMode = index;
-						color: "white"
-						height: parent.height
-						width: parent.width - 150
-						font.pointSize: 14
-						Layout.fillWidth: true
-					}
-
-					ComboBox {
-						currentIndex: Render.antialiasingMode
-						Layout.fillWidth: true
-						model: ListModel {
-							ListElement { text: "None" }
-							ListElement { text: "TAA" }
-							ListElement { text: "FXAA" }
-						}
-
-						onCurrentIndexChanged: {
-							Render.antialiasingMode = currentIndex;
-						}
 					}
 				}
 			}
@@ -451,8 +395,6 @@ Rectangle {
 			visible: current_page == "Audio"
 		}
 
-
-
 		// Templates
 
 		// Messages from script