From fe6a3944481d45f06a2fed301fe1df61ec844d19 Mon Sep 17 00:00:00 2001 From: quadbyte Date: Wed, 13 Aug 2025 00:50:53 -0400 Subject: [PATCH] Settings: Harmonized display tab --- Modules/Settings/Tabs/Display.qml | 160 +++++++++++--------- Modules/Settings/Tabs/WallpaperSelector.qml | 13 +- 2 files changed, 94 insertions(+), 79 deletions(-) diff --git a/Modules/Settings/Tabs/Display.qml b/Modules/Settings/Tabs/Display.qml index ea587d7..66f4a72 100644 --- a/Modules/Settings/Tabs/Display.qml +++ b/Modules/Settings/Tabs/Display.qml @@ -1,5 +1,6 @@ import QtQuick import QtQuick.Layouts +import QtQuick.Controls import Quickshell import qs.Services import qs.Widgets @@ -25,95 +26,108 @@ Item { }) } - ColumnLayout { + ScrollView { anchors.fill: parent - spacing: Style.marginMedium * scaling + clip: true + ScrollBar.vertical.policy: ScrollBar.AsNeeded + ScrollBar.horizontal.policy: ScrollBar.AsNeeded + contentWidth: parent.width - NText { - text: "Per‑monitor configuration" - font.weight: Style.fontWeightBold - color: Colors.accentSecondary - } - - Repeater { - model: Quickshell.screens || [] - delegate: Rectangle { + ColumnLayout { + width: parent.width + ColumnLayout { + spacing: Style.marginLarge * scaling + Layout.margins: Style.marginLarge * scaling Layout.fillWidth: true - radius: Style.radiusMedium * scaling - color: Colors.surface - border.color: Colors.outline - border.width: Math.max(1, Style.borderThin * scaling) - implicitHeight: contentCol.implicitHeight + Style.marginLarge * scaling - ColumnLayout { - id: contentCol - anchors.fill: parent - anchors.margins: Style.marginMedium * scaling - spacing: Style.marginSmall * scaling + NText { + text: "Per‑monitor configuration" + font.pointSize: Style.fontSizeXL * scaling + font.weight: Style.fontWeightBold + color: Colors.textPrimary + } - NText { - text: (modelData.name || "Unknown") - font.weight: Style.fontWeightBold - color: Colors.accentPrimary - } + Repeater { + model: Quickshell.screens || [] + delegate: Rectangle { + Layout.fillWidth: true + radius: Style.radiusMedium * scaling + color: Colors.surface + border.color: Colors.outline + border.width: Math.max(1, Style.borderThin * scaling) + implicitHeight: contentCol.implicitHeight + Style.marginXL * 2 * scaling - RowLayout { - spacing: Style.marginMedium * scaling - NText { - text: `Resolution: ${modelData.width}x${modelData.height}` - color: Colors.textSecondary - } - NText { - text: `Position: (${modelData.x}, ${modelData.y})` - color: Colors.textSecondary - } - } + ColumnLayout { + id: contentCol + anchors.fill: parent + anchors.margins: Style.marginLarge * scaling + spacing: Style.marginTiniest * scaling - NToggle { - label: "Bar" - description: "Display the top bar on this monitor" - value: (Settings.data.bar.monitors || []).indexOf(modelData.name) !== -1 - onToggled: function (newValue) { - if (newValue) { - Settings.data.bar.monitors = addMonitor(Settings.data.bar.monitors, modelData.name) - } else { - Settings.data.bar.monitors = removeMonitor(Settings.data.bar.monitors, modelData.name) + NText { + text: (modelData.name || "Unknown") + font.pointSize: Style.fontSizeLarge * scaling + font.weight: Style.fontWeightBold + color: Colors.accentSecondary } - } - } - NToggle { - label: "Dock" - description: "Display the dock on this monitor" - value: (Settings.data.dock.monitors || []).indexOf(modelData.name) !== -1 - onToggled: function (newValue) { - if (newValue) { - Settings.data.dock.monitors = addMonitor(Settings.data.dock.monitors, modelData.name) - } else { - Settings.data.dock.monitors = removeMonitor(Settings.data.dock.monitors, modelData.name) + NText { + text: `Resolution: ${modelData.width}x${modelData.height} - Position: (${modelData.x}, ${modelData.y})` + font.pointSize: Style.fontSizeSmall * scaling + color: Colors.textSecondary } - } - } - NToggle { - label: "Notifications" - description: "Display notifications on this monitor" - value: (Settings.data.notifications.monitors || []).indexOf(modelData.name) !== -1 - onToggled: function (newValue) { - if (newValue) { - Settings.data.notifications.monitors = addMonitor(Settings.data.notifications.monitors, modelData.name) - } else { - Settings.data.notifications.monitors = removeMonitor(Settings.data.notifications.monitors, - modelData.name) + ColumnLayout { + spacing: Style.marginLarge * scaling + + NToggle { + label: "Bar" + description: "Display the top bar on this monitor" + value: (Settings.data.bar.monitors || []).indexOf(modelData.name) !== -1 + onToggled: function (newValue) { + if (newValue) { + Settings.data.bar.monitors = addMonitor(Settings.data.bar.monitors, modelData.name) + } else { + Settings.data.bar.monitors = removeMonitor(Settings.data.bar.monitors, modelData.name) + } + } + } + + NToggle { + label: "Dock" + description: "Display the dock on this monitor" + value: (Settings.data.dock.monitors || []).indexOf(modelData.name) !== -1 + onToggled: function (newValue) { + if (newValue) { + Settings.data.dock.monitors = addMonitor(Settings.data.dock.monitors, modelData.name) + } else { + Settings.data.dock.monitors = removeMonitor(Settings.data.dock.monitors, modelData.name) + } + } + } + + NToggle { + label: "Notifications" + description: "Display notifications on this monitor" + value: (Settings.data.notifications.monitors || []).indexOf(modelData.name) !== -1 + onToggled: function (newValue) { + if (newValue) { + Settings.data.notifications.monitors = addMonitor(Settings.data.notifications.monitors, + modelData.name) + } else { + Settings.data.notifications.monitors = removeMonitor(Settings.data.notifications.monitors, + modelData.name) + } + } + } } } } } - } - } - Item { - Layout.fillHeight: true + Item { + Layout.fillHeight: true + } + } } } } diff --git a/Modules/Settings/Tabs/WallpaperSelector.qml b/Modules/Settings/Tabs/WallpaperSelector.qml index e96fede..ecfaba5 100644 --- a/Modules/Settings/Tabs/WallpaperSelector.qml +++ b/Modules/Settings/Tabs/WallpaperSelector.qml @@ -30,6 +30,7 @@ Item { // Current wallpaper display NText { text: "Current Wallpaper" + font.pointSize: Style.fontSizeXL * scaling font.weight: Style.fontWeightBold color: Colors.textPrimary } @@ -55,12 +56,11 @@ Item { } } - NDivider { - Layout.fillWidth: true - Layout.topMargin: Style.marginLarge * scaling - Layout.bottomMargin: Style.marginLarge * scaling - } - + NDivider { + Layout.fillWidth: true + Layout.topMargin: Style.marginLarge * scaling + Layout.bottomMargin: Style.marginLarge * scaling + } RowLayout { Layout.fillWidth: true @@ -71,6 +71,7 @@ Item { // Wallpaper grid NText { text: "Wallpaper Selector" + font.pointSize: Style.fontSizeXL * scaling font.weight: Style.fontWeightBold color: Colors.textPrimary }