From 2034662233631980e047c2e3da2d026236593507 Mon Sep 17 00:00:00 2001
From: armored-dragon <publicmail@armoreddragon.com>
Date: Fri, 20 Sep 2024 05:04:52 -0500
Subject: [PATCH] Added list view for all subcategories. Split elements into
 their own widgets.

---
 scripts/system/settings/img/back_arrow.png    | Bin 0 -> 501 bytes
 scripts/system/settings/img/back_arrow.svg    |  39 +++++++++++++++
 .../settings/qml_widgets/HeaderElement.qml    |  45 ++++++++++++++++++
 .../qml_widgets/SettingSubviewListElement.qml |  28 +++++++++++
 scripts/system/settings/settings.qml          |  40 +++++++++-------
 5 files changed, 135 insertions(+), 17 deletions(-)
 create mode 100644 scripts/system/settings/img/back_arrow.png
 create mode 100644 scripts/system/settings/img/back_arrow.svg
 create mode 100644 scripts/system/settings/qml_widgets/HeaderElement.qml
 create mode 100644 scripts/system/settings/qml_widgets/SettingSubviewListElement.qml

diff --git a/scripts/system/settings/img/back_arrow.png b/scripts/system/settings/img/back_arrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..fd50127d1921cdd9689f2385a9871c64895e3af5
GIT binary patch
literal 501
zcmV<R0Sf+!P)<h;3K|Lk000e1NJLTq001%o001%w1^@s69zTe&00009a7bBm0017s
z0017s0dCNBJ^%m!8FWQhbW?9;ba!ELWdL_~cP?peYja~^aAhuUa%Y?FJQ@H10fI?H
zK~!jg?b*L-R6!I6;BPGqC<J_#RGZF7iV!T)2==~}O?nF(iINoQk}A&<6b!f!jzw6}
zO*Y&=b9RP!f3VHv!kLe`yZ6l5SwwgWc~*M?r7}TU%LHjH6Qs3l0y4*Lc9Cqz9N%z?
z*O`SfAxp$IUg8VhWEIPT{Eb-V1wJIzBO*$F<`MBd?&l;Twi4=zh~hi)&`!Wt9N|~t
zdVf+9QVl^lNL2)7Ak`6!hctm;9Hbcp!y!!}7zSw$L4Qb-2$=PlqO3!l<2@Dy*R`4j
zem-_XSI9cVrt%5z9=oB-qg5NxDP157+-5IiY`Q?Mu#fBHwT#Mt_hnyZ2WNP-a=rS`
zZ{PRGy2tDQpRrY9QA0B1&E6ztXs^{AW=!|n6lUysq!~<!6JisXQfKz+n37YJs+iJq
zt!kKzk?9o<@nhxs0ge;uA#e73i9P@B%nd#!)$84B_06(3dycp68qAbrL%8djXSm2L
rvI)pWGX00xS|&(qnINs@$v}Ps({T*ns*dC~00000NkvXXu0mjfgl5=U

literal 0
HcmV?d00001

diff --git a/scripts/system/settings/img/back_arrow.svg b/scripts/system/settings/img/back_arrow.svg
new file mode 100644
index 0000000000..029fdbae23
--- /dev/null
+++ b/scripts/system/settings/img/back_arrow.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="24px"
+   viewBox="0 -960 960 960"
+   width="24px"
+   fill="#5f6368"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="back_arrow.svg"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="48.541667"
+     inkscape:cx="11.9897"
+     inkscape:cy="12"
+     inkscape:window-width="2560"
+     inkscape:window-height="1363"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1" />
+  <path
+     d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z"
+     id="path1"
+     style="fill:#ffffff" />
+</svg>
diff --git a/scripts/system/settings/qml_widgets/HeaderElement.qml b/scripts/system/settings/qml_widgets/HeaderElement.qml
new file mode 100644
index 0000000000..84b12a4d4d
--- /dev/null
+++ b/scripts/system/settings/qml_widgets/HeaderElement.qml
@@ -0,0 +1,45 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+
+Item {
+	height: 60
+	width: parent.width
+	id: root
+	z: 1 // FIXME: Layout issue? Shouldn't need to adjust the z-index but I do.
+
+	Rectangle {
+		anchors.fill: parent;
+		color: "black"
+	}
+
+	Image {
+		source: "../img/back_arrow.png"
+		anchors.verticalCenter: parent.verticalCenter
+		height: 40
+		width: 40
+		x: current_page == "Settings" ? -40 : 10
+
+		Behavior on x {
+			NumberAnimation {
+				duration: 200
+				easing.type: Easing.InOutCubic
+			}
+		}
+
+		MouseArea {
+			anchors.fill: parent
+			onClicked: {
+				current_page = "Settings";
+			}
+		}
+	}
+
+	Text {
+		text: current_page
+		color: "white"
+		font.pointSize: 18
+		anchors.horizontalCenter: parent.horizontalCenter
+		anchors.verticalCenter: parent.verticalCenter
+		horizontalAlignment: Text.AlignHCenter
+	}
+}
diff --git a/scripts/system/settings/qml_widgets/SettingSubviewListElement.qml b/scripts/system/settings/qml_widgets/SettingSubviewListElement.qml
new file mode 100644
index 0000000000..b891516f6d
--- /dev/null
+++ b/scripts/system/settings/qml_widgets/SettingSubviewListElement.qml
@@ -0,0 +1,28 @@
+import QtQuick 2.15
+
+Item {
+	width: parent.width
+	height: 60
+
+	Rectangle {
+		width: parent.width
+		height: parent.height
+		color: index % 2 === 0 ? Qt.rgba(0,0,0,0) : Qt.rgba(0.15,0.15,0.15,1)
+		anchors.fill: parent
+	}
+
+	Text {
+		text: page_name
+		color: "white"
+		font.pointSize: 16
+		anchors.verticalCenter: parent.verticalCenter
+		x: 10
+	}
+
+	MouseArea {
+		anchors.fill: parent
+		onClicked: {
+			current_page = page_name;
+		}
+	}
+}
\ No newline at end of file
diff --git a/scripts/system/settings/settings.qml b/scripts/system/settings/settings.qml
index b73d0c9f91..c68e44717a 100644
--- a/scripts/system/settings/settings.qml
+++ b/scripts/system/settings/settings.qml
@@ -1,7 +1,8 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.3
-import controlsUit 1.0 as HifiControlsUit
+import "./qml_widgets"
+
 
 // TODO: Some default values wait until component is completed. Is this necessary? 
 
@@ -13,27 +14,31 @@ Rectangle {
 	anchors.horizontalCenter: parent.horizontalCenter
     id: root
 
-    property string current_page: "Graphics"
+	property var pages: ["Graphics", "Audio", "Controls", "Privacy and Security"]
+    property string current_page: "Settings"
 
 	// Navigation Header
-	Item {
-		height: 60
+	HeaderElement {
+		id: header
+	}
+
+	// Home page
+	ScrollView {
 		width: parent.width
+		id: home_page
 
-		Rectangle {
-			anchors.fill: parent;
-			color: "black"
-		}
-
-		Text {
-			y: 10
-			text: current_page
-			color: "white"
-			font.pointSize: 18
+		ColumnLayout {
+			width: parent.width
+			visible: current_page == "Settings"
 			anchors.horizontalCenter: parent.horizontalCenter
-			anchors.verticalCenter: parent.verticalCenter
-			horizontalAlignment: Text.AlignHCenter
-			width: parent.width - 10
+			y: header.height
+			spacing: 0
+			Repeater {
+				model: pages.length
+				delegate: SettingSubviewListElement {
+					property string page_name: pages[index];
+				}
+			}
 		}
 	}
 
@@ -409,6 +414,7 @@ Rectangle {
 				color: "white"
 			}
 
+			// FIXME: QML Slider binding loop
 			Slider {
 				id: fov_slider
 				from: 20