improve dialog dimensions & scaling

Signed-off-by: swurl <[email protected]>
Q-FRC · Jan 17, 2025 · fefa1a2 · fefa1a2
1 parent e4bdb8b
commit fefa1a2
Show file tree

Hide file tree

Showing 18 changed files with 61 additions and 93 deletions.
diff --git a/qml/dialogs/accent/AccentDisplay.qml b/qml/dialogs/accent/AccentDisplay.qml
@@ -7,7 +7,7 @@ import QFRCDashboard
 Rectangle {
     clip: true
 
-    height: 100 * Constants.scalar
+    height: 85 * Constants.scalar
     border {
         color: "white"
         width: 2 * Constants.scalar
@@ -23,16 +23,17 @@ Rectangle {
     }
 
     RowLayout {
+        id: fields
         anchors {
+            top: parent.top
             left: parent.left
             right: parent.right
 
-            margins: 5
+            margins: 5 * Constants.scalar
         }
 
         width: parent.width
         uniformCellSizes: true
-        height: 50 * Constants.scalar
 
         TextField {
             Layout.fillWidth: true
@@ -81,76 +82,57 @@ Rectangle {
             Component.onCompleted: currentIndex = indexOfValue(getQml())
 
             id: qml
-            model: [
-                "Lime",
-                "Green",
-                "Emerald",
-                "Teal",
-                "Cyan",
-                "Cobalt",
-                "Indigo",
-                "Violet",
-                "Pink",
-                "Magenta",
-                "Crimson",
-                "Red",
-                "Orange",
-                "Amber",
-                "Yellow",
-                "Brown",
-                "Olive",
-                "Steel",
-                "Mauve",
-                "Taupe",
-            ]
+            model: ["Lime", "Green", "Emerald", "Teal", "Cyan", "Cobalt", "Indigo", "Violet", "Pink", "Magenta", "Crimson", "Red", "Orange", "Amber", "Yellow", "Brown", "Olive", "Steel", "Mauve", "Taupe"]
 
             font.pixelSize: Math.round(15 * Constants.scalar)
 
-            onActivated: (index) => setQml(currentText)
+            onActivated: index => setQml(currentText)
         }
     }
 
     RowLayout {
         id: preview
         uniformCellSizes: true
-        y: 50 * Constants.scalar
 
         anchors {
             left: parent.left
             right: parent.right
 
+            top: fields.bottom
+
             margins: 8 * Constants.scalar
+            topMargin: 2
         }
 
-        height: 50 * Constants.scalar
-
         Button {
+            font.pixelSize: 18 * Constants.scalar
             text: "Remove"
 
             onClicked: accents.remove(model.idx)
+
+            Layout.alignment: Qt.AlignCenter
         }
 
         Rectangle {
             Layout.fillWidth: true
-            height: 40 * Constants.scalar
+            implicitHeight: 40 * Constants.scalar
 
             color: accent.text
         }
 
         Rectangle {
             Layout.fillWidth: true
-            height: 40 * Constants.scalar
+            implicitHeight: 40 * Constants.scalar
 
             color: light.text
         }
 
         Rectangle {
             Layout.fillWidth: true
 
-            height: 40 * Constants.scalar
+            implicitHeight: 40 * Constants.scalar
 
             color: accents.qmlColor(qml.currentText)
         }
     }
-
 }
diff --git a/qml/dialogs/accent/AccentEditor.qml b/qml/dialogs/accent/AccentEditor.qml
@@ -6,8 +6,8 @@ import QtQuick.Dialogs
 import QFRCDashboard
 
 AnimatedDialog {
-    width: parent.width / 1.5
-    height: parent.height / 1.1
+    width: Math.min(window.width, 625 * Constants.scalar)
+    height: window.height
 
     standardButtons: Dialog.Ok | Dialog.Cancel
     title: "Accent Editor"
@@ -79,13 +79,15 @@ AnimatedDialog {
             uniformCellSizes: true
 
             Button {
+                font.pixelSize: 15 * Constants.scalar
                 Layout.fillWidth: true
                 text: "Add"
 
                 onClicked: accents.add()
             }
 
             Button {
+                font.pixelSize: 15 * Constants.scalar
                 Layout.fillWidth: true
                 text: "Pick Color"
 

diff --git a/qml/widgets/config/BaseConfigDialog.qml b/qml/widgets/config/BaseConfigDialog.qml
@@ -8,7 +8,12 @@ AnimatedDialog {
 
     title: "Configure Widget"
 
-    width: 400 * Constants.scalar
+    height: Math.min(
+                window.height, Math.max(
+                    implicitBackgroundHeight + topInset
+                    + bottomInset, contentHeight + topPadding + bottomPadding
+                    + (implicitHeaderHeight > 0 ? implicitHeaderHeight + spacing : 0) + (implicitFooterHeight > 0 ? implicitFooterHeight + spacing : 0)) + 50 * Constants.scalar)
+    width: Math.min(window.width, 625 * Constants.scalar)
 
     standardButtons: Dialog.Ok | Dialog.Cancel
 }
diff --git a/qml/widgets/config/SectionHeader.qml b/qml/widgets/config/SectionHeader.qml
@@ -13,11 +13,14 @@ Column {
         font.bold: true
         color: Constants.palette.text
         text: label
+
+        width: parent.width
+        horizontalAlignment: Text.AlignHCenter
     }
 
     Rectangle {
         height: 2
-        width: 350 * Constants.scalar
+        width: parent.width
         color: Constants.palette.text
     }
 }
diff --git a/qml/widgets/misc/CameraView.qml b/qml/widgets/misc/CameraView.qml
@@ -104,8 +104,7 @@ BaseWidget {
                                                                  + item_quality + "&" : "")
                                 + (item_fps !== 0 ? "fps=" + item_fps + "&" : "")
                                 + (item_resH !== Qt.size(
-                                       0, 0) ? "resolution=" + item_resW + "x"
-                                               + item_resH : ""))
+                                       0, 0) ? "resolution=" + item_resW + "x" + item_resH : ""))
             }
 
             function reconnect() {
@@ -143,9 +142,6 @@ BaseWidget {
     BaseConfigDialog {
         id: config
 
-        height: 450 * Constants.scalar
-        width: 450 * Constants.scalar
-
         function openDialog() {
             topicField.open()
             titleFontField.open()
@@ -167,7 +163,7 @@ BaseWidget {
         }
 
         ScrollView {
-            contentWidth: 380 * Constants.scalar
+            contentWidth: width - 5 * Constants.scalar - effectiveScrollBarWidth
 
             anchors {
                 top: parent.top
@@ -185,6 +181,7 @@ BaseWidget {
                 spacing: 25 * Constants.scalar
 
                 anchors.fill: parent
+                anchors.leftMargin: 2
 
                 SectionHeader {
                     label: "Font Settings"
@@ -220,8 +217,8 @@ BaseWidget {
                 RowLayout {
                     Layout.fillWidth: true
                     Layout.alignment: Qt.AlignTop
-                    // Layout.preferredWidth: 300
 
+                    // Layout.preferredWidth: 300
                     Text {
                         font.pixelSize: 16 * Constants.scalar
                         text: "Resolution"
@@ -301,5 +298,4 @@ BaseWidget {
             }
         }
     }
-
 }
diff --git a/qml/widgets/misc/ErrorsWidget.qml b/qml/widgets/misc/ErrorsWidget.qml
@@ -79,8 +79,6 @@ BaseWidget {
     BaseConfigDialog {
         id: config
 
-        height: 325 * Constants.scalar
-
         function openDialog() {
             topicField.open()
             titleFontField.open()

diff --git a/qml/widgets/primitive/BoolWidget.qml b/qml/widgets/primitive/BoolWidget.qml
@@ -72,8 +72,6 @@ BaseWidget {
     BaseConfigDialog {
         id: config
 
-        height: 325 * Constants.scalar
-
         function openDialog() {
             topicField.open()
             titleFontField.open()
@@ -99,7 +97,7 @@ BaseWidget {
                 right: parent.right
 
                 topMargin: -20
-                
+
                 rightMargin: 5
             }
 

diff --git a/qml/widgets/primitive/ColorWidget.qml b/qml/widgets/primitive/ColorWidget.qml
@@ -87,8 +87,6 @@ BaseWidget {
     BaseConfigDialog {
         id: config
 
-        height: 500 * Constants.scalar
-
         function openDialog() {
             topicField.open()
             titleFontField.open()
@@ -118,7 +116,7 @@ BaseWidget {
                 right: parent.right
 
                 topMargin: -20
-                
+
                 rightMargin: 5
             }
 

diff --git a/qml/widgets/primitive/DoubleDialWidget.qml b/qml/widgets/primitive/DoubleDialWidget.qml
@@ -173,9 +173,6 @@ BaseWidget {
     BaseConfigDialog {
         id: config
 
-        height: 450 * Constants.scalar
-        width: 450 * Constants.scalar
-
         function openDialog() {
             topicField.open()
             titleFontField.open()
@@ -203,7 +200,7 @@ BaseWidget {
 
         ScrollView {
             id: scroll
-            contentWidth: 380 * Constants.scalar
+            contentWidth: width - 5 * Constants.scalar - effectiveScrollBarWidth
 
             anchors {
                 top: parent.top
@@ -221,6 +218,7 @@ BaseWidget {
                 spacing: 25 * Constants.scalar
 
                 anchors.fill: parent
+                anchors.leftMargin: 2
 
                 SectionHeader {
                     label: "Font Settings"

diff --git a/qml/widgets/primitive/DoubleWidget.qml b/qml/widgets/primitive/DoubleWidget.qml
@@ -85,8 +85,6 @@ BaseWidget {
     BaseConfigDialog {
         id: config
 
-        height: 500 * Constants.scalar
-
         function openDialog() {
             topicField.open()
             titleFontField.open()

diff --git a/qml/widgets/primitive/EnumWidget.qml b/qml/widgets/primitive/EnumWidget.qml
@@ -31,8 +31,8 @@ BaseWidget {
     }
 
     function colorFromMap(value) {
-        for (let i = 0 ; i < item_colorMap.length; ++i) {
-            let obj = item_colorMap[i];
+        for (var i = 0; i < item_colorMap.length; ++i) {
+            let obj = item_colorMap[i]
 
             if (obj["Value"] === value) {
                 return obj["Color"]
@@ -98,9 +98,6 @@ BaseWidget {
     BaseConfigDialog {
         id: config
 
-        height: 450 * Constants.scalar
-        width: 450 * Constants.scalar
-
         function openDialog() {
             topicField.open()
             titleFontField.open()
@@ -120,7 +117,7 @@ BaseWidget {
         ScrollView {
             clip: true
 
-            contentWidth: 380 * Constants.scalar
+            contentWidth: width - 5 * Constants.scalar - effectiveScrollBarWidth
 
             anchors {
                 top: parent.top
@@ -136,7 +133,10 @@ BaseWidget {
             ColumnLayout {
                 id: layout
                 spacing: 25 * Constants.scalar
+
                 anchors.fill: parent
+                anchors.leftMargin: 2
+
                 clip: true
 
                 SectionHeader {

diff --git a/qml/widgets/primitive/IntDialWidget.qml b/qml/widgets/primitive/IntDialWidget.qml
@@ -174,9 +174,6 @@ BaseWidget {
     BaseConfigDialog {
         id: config
 
-        height: 450 * Constants.scalar
-        width: 450 * Constants.scalar
-
         function openDialog() {
             topicField.open()
             titleFontField.open()
@@ -203,7 +200,7 @@ BaseWidget {
         }
 
         ScrollView {
-            contentWidth: 380 * Constants.scalar
+            contentWidth: width - 5 * Constants.scalar - effectiveScrollBarWidth
 
             anchors {
                 top: parent.top
@@ -221,6 +218,7 @@ BaseWidget {
                 spacing: 25 * Constants.scalar
 
                 anchors.fill: parent
+                anchors.leftMargin: 2
 
                 SectionHeader {
                     label: "Font Settings"

diff --git a/qml/widgets/primitive/IntWidget.qml b/qml/widgets/primitive/IntWidget.qml
@@ -83,8 +83,6 @@ BaseWidget {
     BaseConfigDialog {
         id: config
 
-        height: 500 * Constants.scalar
-
         function openDialog() {
             topicField.open()
             titleFontField.open()
@@ -117,7 +115,7 @@ BaseWidget {
                 right: parent.right
 
                 topMargin: -20
-                
+
                 rightMargin: 5
             }