From f9daf2a45c43baeca31b5357cb36251db0432103 Mon Sep 17 00:00:00 2001
From: Cameron Gutman <aicommander@gmail.com>
Date: Sat, 6 Oct 2018 12:12:05 -0700
Subject: [PATCH] Resize settings combo boxes to match their contents

---
 app/gui/AutoResizingComboBox.qml | 27 +++++++++++++++++++++++++++
 app/gui/SettingsView.qml         | 18 ++++++------------
 app/qml.qrc                      |  1 +
 3 files changed, 34 insertions(+), 12 deletions(-)
 create mode 100644 app/gui/AutoResizingComboBox.qml

diff --git a/app/gui/AutoResizingComboBox.qml b/app/gui/AutoResizingComboBox.qml
new file mode 100644
index 00000000..3f14c199
--- /dev/null
+++ b/app/gui/AutoResizingComboBox.qml
@@ -0,0 +1,27 @@
+import QtQuick 2.11
+import QtQuick.Controls 2.2
+
+// https://stackoverflow.com/questions/45029968/how-do-i-set-the-combobox-width-to-fit-the-largest-item
+ComboBox {
+    property int modelWidth
+
+    width: modelWidth + 2*leftPadding + 2*rightPadding
+
+    TextMetrics {
+        id: textMetrics
+        font: parent.font
+    }
+
+    onFontChanged: {
+        textMetrics.font = font
+    }
+
+    // We call this every time the options change (and init)
+    // so we can adjust the combo box width here too
+    onActivated: {
+        for (var i = 0; i < count; i++){
+            textMetrics.text = textAt(i)
+            modelWidth = Math.max(textMetrics.width, modelWidth)
+        }
+    }
+}
diff --git a/app/gui/SettingsView.qml b/app/gui/SettingsView.qml
index 9c27e390..42f640c5 100644
--- a/app/gui/SettingsView.qml
+++ b/app/gui/SettingsView.qml
@@ -73,7 +73,7 @@ ScrollView {
                 Row {
                     spacing: 5
 
-                    ComboBox {
+                    AutoResizingComboBox {
                         // ignore setting the index at first, and actually set it when the component is loaded
                         Component.onCompleted: {
                             // Add native resolutions for all attached displays
@@ -145,7 +145,6 @@ ScrollView {
                         }
 
                         id: resolutionComboBox
-                        width: 200
                         textRole: "text"
                         model: ListModel {
                             id: resolutionListModel
@@ -188,7 +187,7 @@ ScrollView {
                         }
                     }
 
-                    ComboBox {
+                    AutoResizingComboBox {
                         function createModel() {
                             var fpsListModel = Qt.createQmlObject('import QtQuick 2.0; ListModel {}', parent, '')
 
@@ -253,7 +252,6 @@ ScrollView {
 
                         id: fpsComboBox
                         textRole: "text"
-                        width: 250
                         // ::onActivated must be used, as it only listens for when the index is changed by a human
                         onActivated : {
                             var selectedFps = parseInt(model.get(currentIndex).video_fps)
@@ -315,7 +313,7 @@ ScrollView {
                     color: "white"
                 }
 
-                ComboBox {
+                AutoResizingComboBox {
                     // ignore setting the index at first, and actually set it when the component is loaded
                     Component.onCompleted: {
                         var savedWm = prefs.windowMode
@@ -331,7 +329,6 @@ ScrollView {
                     }
 
                     id: windowModeComboBox
-                    width: Math.min(bitrateDesc.implicitWidth, parent.width)
                     textRole: "text"
                     model: ListModel {
                         id: windowModeListModel
@@ -386,7 +383,7 @@ ScrollView {
                     color: "white"
                 }
 
-                ComboBox {
+                AutoResizingComboBox {
                     // ignore setting the index at first, and actually set it when the component is loaded
                     Component.onCompleted: {
                         var saved_audio = prefs.audioConfig
@@ -402,7 +399,6 @@ ScrollView {
                     }
 
                     id: audioComboBox
-                    width: Math.min(bitrateDesc.implicitWidth, parent.width)
                     textRole: "text"
                     model: ListModel {
                         id: audioListModel
@@ -519,7 +515,7 @@ ScrollView {
                     color: "white"
                 }
 
-                ComboBox {
+                AutoResizingComboBox {
                     // ignore setting the index at first, and actually set it when the component is loaded
                     Component.onCompleted: {
                         var saved_vds = prefs.videoDecoderSelection
@@ -535,7 +531,6 @@ ScrollView {
                     }
 
                     id: decoderComboBox
-                    width: Math.min(bitrateDesc.implicitWidth, parent.width)
                     textRole: "text"
                     model: ListModel {
                         id: decoderListModel
@@ -567,7 +562,7 @@ ScrollView {
                     color: "white"
                 }
 
-                ComboBox {
+                AutoResizingComboBox {
                     // ignore setting the index at first, and actually set it when the component is loaded
                     Component.onCompleted: {
                         var saved_vcc = prefs.videoCodecConfig
@@ -583,7 +578,6 @@ ScrollView {
                     }
 
                     id: codecComboBox
-                    width: Math.min(bitrateDesc.implicitWidth, parent.width)
                     textRole: "text"
                     model: ListModel {
                         id: codecListModel
diff --git a/app/qml.qrc b/app/qml.qrc
index 28d69339..4d73e388 100644
--- a/app/qml.qrc
+++ b/app/qml.qrc
@@ -11,5 +11,6 @@
         <file>gui/NavigableItemDelegate.qml</file>
         <file>gui/NavigableMenuItem.qml</file>
         <file>gui/CliStartStreamSegue.qml</file>
+        <file>gui/AutoResizingComboBox.qml</file>
     </qresource>
 </RCC>