From 47ef62beb36a2416f0260f81bf8aa05d61df4a00 Mon Sep 17 00:00:00 2001 From: LemmyCook Date: Mon, 15 Sep 2025 22:33:09 -0400 Subject: [PATCH] Widgets Sizing: reworked our sizing approach to prepare for different bar densities. --- Commons/Style.qml | 14 +++++----- Modules/Bar/Bar.qml | 17 +++--------- Modules/Bar/Widgets/ActiveWindow.qml | 21 ++++++++------- Modules/Bar/Widgets/Bluetooth.qml | 2 +- Modules/Bar/Widgets/Clock.qml | 2 +- Modules/Bar/Widgets/DarkModeToggle.qml | 4 +-- Modules/Bar/Widgets/KeepAwake.qml | 7 ++--- Modules/Bar/Widgets/NightLight.qml | 2 +- Modules/Bar/Widgets/NotificationHistory.qml | 2 +- Modules/Bar/Widgets/PowerProfile.qml | 2 +- Modules/Bar/Widgets/PowerToggle.qml | 2 +- .../Bar/Widgets/ScreenRecorderIndicator.qml | 2 +- Modules/Bar/Widgets/SidePanelToggle.qml | 2 +- Modules/Bar/Widgets/Taskbar.qml | 2 +- Modules/Bar/Widgets/WiFi.qml | 3 +-- Modules/BluetoothPanel/BluetoothPanel.qml | 4 +-- Modules/Notification/Notification.qml | 2 +- .../Notification/NotificationHistoryPanel.qml | 12 ++++----- .../SettingsPanel/Bar/BarSectionEditor.qml | 7 +++-- Modules/SettingsPanel/Tabs/AudioTab.qml | 2 +- Modules/SettingsPanel/Tabs/BarTab.qml | 4 +-- Modules/SettingsPanel/Tabs/DisplayTab.qml | 20 ++++---------- Modules/SettingsPanel/Tabs/DockTab.qml | 4 +-- .../SettingsPanel/Tabs/NotificationTab.qml | 4 +-- Modules/Toast/SimpleToast.qml | 2 +- Modules/WiFiPanel/WiFiPanel.qml | 12 ++++----- Widgets/NIconButton.qml | 9 +++---- Widgets/NPill.qml | 3 --- Widgets/NPillHorizontal.qml | 27 +++++++++---------- Widgets/NPillVertical.qml | 3 +-- Widgets/NWidgetLoader.qml | 2 +- 31 files changed, 88 insertions(+), 113 deletions(-) diff --git a/Commons/Style.qml b/Commons/Style.qml index 97f6258..109400f 100644 --- a/Commons/Style.qml +++ b/Commons/Style.qml @@ -65,14 +65,16 @@ Singleton { property int animationSlow: Math.round(450 / Settings.data.general.animationSpeed) property int animationSlowest: Math.round(750 / Settings.data.general.animationSpeed) - // Dimensions - property int barHeight: (Settings.data.bar.position === "left" || Settings.data.bar.position === "right") ? 39 : 37 - property int capsuleHeight: (barHeight * 0.73) - property int baseWidgetSize: (barHeight * 0.9) - property int sliderWidth: 200 - // Delays property int tooltipDelay: 300 property int tooltipDelayLong: 1200 property int pillDelay: 500 + + // Settings widgets base size + property real baseWidgetSize: 33 + property real sliderWidth: 200 + + // Bar Dimensions + property real barHeight: (Settings.data.bar.position === "left" || Settings.data.bar.position === "right") ? 39 : 37 + property real capsuleHeight: Math.round(barHeight * 0.73) } diff --git a/Modules/Bar/Bar.qml b/Modules/Bar/Bar.qml index 11a618d..fb2257a 100644 --- a/Modules/Bar/Bar.qml +++ b/Modules/Bar/Bar.qml @@ -68,23 +68,13 @@ Variants { radius: Settings.data.bar.floating ? Style.radiusL : 0 } - // For vertical bars, use a single column layout Loader { - id: verticalBarLayout anchors.fill: parent - visible: Settings.data.bar.position === "left" || Settings.data.bar.position === "right" - sourceComponent: verticalBarComponent + active: true + sourceComponent: (Settings.data.bar.position === "left" || Settings.data.bar.position === "right") ? verticalBarComponent : horizontalBarComponent } - // For horizontal bars, use the original three-section layout - Loader { - id: horizontalBarLayout - anchors.fill: parent - visible: Settings.data.bar.position === "top" || Settings.data.bar.position === "bottom" - sourceComponent: horizontalBarComponent - } - - // Main layout components + // For vertical bars Component { id: verticalBarComponent Item { @@ -163,6 +153,7 @@ Variants { } } + // For horizontal bars Component { id: horizontalBarComponent Item { diff --git a/Modules/Bar/Widgets/ActiveWindow.qml b/Modules/Bar/Widgets/ActiveWindow.qml index e9bb66d..4aa8fc4 100644 --- a/Modules/Bar/Widgets/ActiveWindow.qml +++ b/Modules/Bar/Widgets/ActiveWindow.qml @@ -38,7 +38,7 @@ Item { readonly property string barPosition: Settings.data.bar.position implicitHeight: (barPosition === "left" || barPosition === "right") ? calculatedVerticalHeight() : Math.round(Style.barHeight * scaling) - implicitWidth: (barPosition === "left" || barPosition === "right") ? Math.round(Style.baseWidgetSize * 0.8 * scaling) : (horizontalLayout.implicitWidth + Style.marginM * 2 * scaling) + implicitWidth: (barPosition === "left" || barPosition === "right") ? Math.round(Style.capsuleHeight * 0.8 * scaling) : (horizontalLayout.implicitWidth + Style.marginM * 2 * scaling) function getTitle() { try { @@ -60,7 +60,7 @@ Item { let total = Style.marginM * 2 * scaling // internal padding if (showIcon) { - total += Style.baseWidgetSize * 0.5 * scaling + 2 * scaling // icon + spacing + total += Style.capsuleHeight * 0.5 * scaling + 2 * scaling // icon + spacing } // Calculate actual text width more accurately @@ -129,11 +129,13 @@ Item { Rectangle { id: windowTitleRect visible: root.visible - anchors.left: parent.left + anchors.left: (barPosition === "top" || barPosition === "bottom") ? parent.left : undefined + anchors.top: (barPosition === "left" || barPosition === "right") ? parent.top : undefined anchors.verticalCenter: parent.verticalCenter + anchors.horizontalCenter: parent.horizontalCenter width: (barPosition === "left" || barPosition === "right") ? Math.round(Style.capsuleHeight * scaling) : (horizontalLayout.implicitWidth + Style.marginM * 2 * scaling) height: (barPosition === "left" || barPosition === "right") ? Math.round(Style.capsuleHeight * scaling) : Math.round(Style.capsuleHeight * scaling) - radius: Math.round(Style.radiusM * scaling) + radius: width / 2 color: Color.mSurfaceVariant Item { @@ -152,8 +154,8 @@ Item { // Window icon Item { - Layout.preferredWidth: Style.baseWidgetSize * 0.5 * scaling - Layout.preferredHeight: Style.baseWidgetSize * 0.5 * scaling + Layout.preferredWidth: Style.capsuleHeight * 0.75 * scaling + Layout.preferredHeight: Style.capsuleHeight * 0.75 * scaling Layout.alignment: Qt.AlignVCenter visible: getTitle() !== "" && showIcon @@ -217,11 +219,10 @@ Item { // Window icon Item { - width: Style.baseWidgetSize * 0.5 * scaling - height: Style.baseWidgetSize * 0.5 * scaling + width: Style.capsuleHeight * 0.75 * scaling + height: Style.capsuleHeight * 0.75 * scaling anchors.centerIn: parent - visible: getTitle() !== "" && showIcon - + IconImage { id: windowIconVertical anchors.fill: parent diff --git a/Modules/Bar/Widgets/Bluetooth.qml b/Modules/Bar/Widgets/Bluetooth.qml index 41588bf..da69b27 100644 --- a/Modules/Bar/Widgets/Bluetooth.qml +++ b/Modules/Bar/Widgets/Bluetooth.qml @@ -13,7 +13,7 @@ NIconButton { property ShellScreen screen property real scaling: 1.0 - sizeRatio: 0.8 + baseSize: Style.capsuleHeight colorBg: Color.mSurfaceVariant colorFg: Color.mOnSurface colorBorder: Color.transparent diff --git a/Modules/Bar/Widgets/Clock.qml b/Modules/Bar/Widgets/Clock.qml index 45ebece..14fb8cc 100644 --- a/Modules/Bar/Widgets/Clock.qml +++ b/Modules/Bar/Widgets/Clock.qml @@ -39,7 +39,7 @@ Rectangle { readonly property bool verticalMode: barPosition === "left" || barPosition === "right" implicitWidth: verticalMode ? Math.round(Style.capsuleHeight * scaling) : Math.round(layout.implicitWidth + Style.marginM * 2 * scaling) - implicitHeight: verticalMode ? Math.round(Style.capsuleHeight * 2.5 * scaling) : Math.round(Style.baseWidgetSize * 0.8 * scaling) // Match NPill + implicitHeight: verticalMode ? Math.round(Style.capsuleHeight * 2.5 * scaling) : Math.round(Style.capsuleHeight * scaling) // Match NPill radius: Math.round(Style.radiusS * scaling) color: Color.mSurfaceVariant diff --git a/Modules/Bar/Widgets/DarkModeToggle.qml b/Modules/Bar/Widgets/DarkModeToggle.qml index cf68958..92bcf8f 100644 --- a/Modules/Bar/Widgets/DarkModeToggle.qml +++ b/Modules/Bar/Widgets/DarkModeToggle.qml @@ -10,9 +10,9 @@ NIconButton { property real scaling: 1.0 icon: "dark-mode" - tooltipText: "Toggle light/dark mode" - sizeRatio: 0.8 + tooltipText: "Toggle light/dark mode." + baseSize: Style.capsuleHeight colorBg: Settings.data.colorSchemes.darkMode ? Color.mSurfaceVariant : Color.mPrimary colorFg: Settings.data.colorSchemes.darkMode ? Color.mOnSurface : Color.mOnPrimary colorBorder: Color.transparent diff --git a/Modules/Bar/Widgets/KeepAwake.qml b/Modules/Bar/Widgets/KeepAwake.qml index 10a55f2..1345295 100644 --- a/Modules/Bar/Widgets/KeepAwake.qml +++ b/Modules/Bar/Widgets/KeepAwake.qml @@ -11,14 +11,11 @@ NIconButton { property ShellScreen screen property real scaling: 1.0 - sizeRatio: 0.8 - + baseSize: Style.capsuleHeight icon: IdleInhibitorService.isInhibited ? "keep-awake-on" : "keep-awake-off" tooltipText: IdleInhibitorService.isInhibited ? "Disable keep awake" : "Enable keep awake" colorBg: IdleInhibitorService.isInhibited ? Color.mPrimary : Color.mSurfaceVariant colorFg: IdleInhibitorService.isInhibited ? Color.mOnPrimary : Color.mOnSurface colorBorder: Color.transparent - onClicked: { - IdleInhibitorService.manualToggle() - } + onClicked: IdleInhibitorService.manualToggle() } diff --git a/Modules/Bar/Widgets/NightLight.qml b/Modules/Bar/Widgets/NightLight.qml index 43028a1..ee109fa 100644 --- a/Modules/Bar/Widgets/NightLight.qml +++ b/Modules/Bar/Widgets/NightLight.qml @@ -14,7 +14,7 @@ NIconButton { property ShellScreen screen property real scaling: 1.0 - sizeRatio: 0.8 + baseSize: Style.capsuleHeight colorBg: Settings.data.nightLight.forced ? Color.mPrimary : Color.mSurfaceVariant colorFg: Settings.data.nightLight.forced ? Color.mOnPrimary : Color.mOnSurface colorBorder: Color.transparent diff --git a/Modules/Bar/Widgets/NotificationHistory.qml b/Modules/Bar/Widgets/NotificationHistory.qml index 3021b47..2967b71 100644 --- a/Modules/Bar/Widgets/NotificationHistory.qml +++ b/Modules/Bar/Widgets/NotificationHistory.qml @@ -49,7 +49,7 @@ NIconButton { return count } - sizeRatio: 0.8 + baseSize: Style.capsuleHeight icon: Settings.data.notifications.doNotDisturb ? "bell-off" : "bell" tooltipText: Settings.data.notifications.doNotDisturb ? "Notification history.\nRight-click to disable 'Do Not Disturb'." : "Notification history.\nRight-click to enable 'Do Not Disturb'." colorBg: Color.mSurfaceVariant diff --git a/Modules/Bar/Widgets/PowerProfile.qml b/Modules/Bar/Widgets/PowerProfile.qml index 219e907..fafa462 100644 --- a/Modules/Bar/Widgets/PowerProfile.qml +++ b/Modules/Bar/Widgets/PowerProfile.qml @@ -13,7 +13,7 @@ NIconButton { property real scaling: 1.0 readonly property bool hasPP: PowerProfileService.available - sizeRatio: 0.8 + baseSize: Style.capsuleHeight visible: hasPP function profileIcon() { diff --git a/Modules/Bar/Widgets/PowerToggle.qml b/Modules/Bar/Widgets/PowerToggle.qml index eccecf3..799d648 100644 --- a/Modules/Bar/Widgets/PowerToggle.qml +++ b/Modules/Bar/Widgets/PowerToggle.qml @@ -11,7 +11,7 @@ NIconButton { property ShellScreen screen property real scaling: 1.0 - sizeRatio: 0.8 + baseSize: Style.capsuleHeight icon: "power" tooltipText: "Power Settings" diff --git a/Modules/Bar/Widgets/ScreenRecorderIndicator.qml b/Modules/Bar/Widgets/ScreenRecorderIndicator.qml index efa8299..eb0246a 100644 --- a/Modules/Bar/Widgets/ScreenRecorderIndicator.qml +++ b/Modules/Bar/Widgets/ScreenRecorderIndicator.qml @@ -13,7 +13,7 @@ NIconButton { visible: ScreenRecorderService.isRecording icon: "camera-video" tooltipText: "Screen recording is active\nClick to stop recording" - sizeRatio: 0.8 + baseSize: Style.capsuleHeight colorBg: Color.mPrimary colorFg: Color.mOnPrimary onClicked: ScreenRecorderService.toggleRecording() diff --git a/Modules/Bar/Widgets/SidePanelToggle.qml b/Modules/Bar/Widgets/SidePanelToggle.qml index 293a2ca..3f647ab 100644 --- a/Modules/Bar/Widgets/SidePanelToggle.qml +++ b/Modules/Bar/Widgets/SidePanelToggle.qml @@ -33,7 +33,7 @@ NIconButton { icon: useDistroLogo ? "" : "noctalia" tooltipText: "Open side panel." - sizeRatio: 0.85 + baseSize: Style.capsuleHeight colorBg: Color.mSurfaceVariant colorFg: Color.mOnSurface diff --git a/Modules/Bar/Widgets/Taskbar.qml b/Modules/Bar/Widgets/Taskbar.qml index 14fbc55..e6b5435 100644 --- a/Modules/Bar/Widgets/Taskbar.qml +++ b/Modules/Bar/Widgets/Taskbar.qml @@ -15,7 +15,7 @@ Rectangle { property ShellScreen screen property real scaling: 1.0 - readonly property real itemSize: Style.baseWidgetSize * 0.8 * scaling + readonly property real itemSize: Style.capsuleHeight * 0.8 * scaling // Always visible when there are toplevels implicitWidth: taskbarLayout.implicitWidth + Style.marginM * scaling * 2 diff --git a/Modules/Bar/Widgets/WiFi.qml b/Modules/Bar/Widgets/WiFi.qml index 74b3e73..b93dbaa 100644 --- a/Modules/Bar/Widgets/WiFi.qml +++ b/Modules/Bar/Widgets/WiFi.qml @@ -13,8 +13,7 @@ NIconButton { property ShellScreen screen property real scaling: 1.0 - sizeRatio: 0.8 - + baseSize: Style.capsuleHeight colorBg: Color.mSurfaceVariant colorFg: Color.mOnSurface colorBorder: Color.transparent diff --git a/Modules/BluetoothPanel/BluetoothPanel.qml b/Modules/BluetoothPanel/BluetoothPanel.qml index 12a5ce0..aa743f0 100644 --- a/Modules/BluetoothPanel/BluetoothPanel.qml +++ b/Modules/BluetoothPanel/BluetoothPanel.qml @@ -53,7 +53,7 @@ NPanel { enabled: Settings.data.network.bluetoothEnabled icon: BluetoothService.adapter && BluetoothService.adapter.discovering ? "stop" : "refresh" tooltipText: "Refresh Devices" - sizeRatio: 0.8 + baseSize: Style.baseWidgetSize * 0.8 onClicked: { if (BluetoothService.adapter) { BluetoothService.adapter.discovering = !BluetoothService.adapter.discovering @@ -64,7 +64,7 @@ NPanel { NIconButton { icon: "close" tooltipText: "Close." - sizeRatio: 0.8 + baseSize: Style.baseWidgetSize * 0.8 onClicked: { root.close() } diff --git a/Modules/Notification/Notification.qml b/Modules/Notification/Notification.qml index 940c6d6..68d0906 100644 --- a/Modules/Notification/Notification.qml +++ b/Modules/Notification/Notification.qml @@ -326,7 +326,7 @@ Variants { NIconButton { icon: "close" tooltipText: "Close." - sizeRatio: 0.6 + baseSize: Style.baseWidgetSize * 0.6 anchors.top: parent.top anchors.topMargin: Style.marginM * scaling anchors.right: parent.right diff --git a/Modules/Notification/NotificationHistoryPanel.qml b/Modules/Notification/NotificationHistoryPanel.qml index 0a9e852..3d4b8a6 100644 --- a/Modules/Notification/NotificationHistoryPanel.qml +++ b/Modules/Notification/NotificationHistoryPanel.qml @@ -48,15 +48,15 @@ NPanel { NIconButton { icon: Settings.data.notifications.doNotDisturb ? "bell-off" : "bell" tooltipText: Settings.data.notifications.doNotDisturb ? "'Do Not Disturb' is enabled." : "'Do Not Disturb' is disabled." - sizeRatio: 0.8 + baseSize: Style.baseWidgetSize * 0.8 onClicked: Settings.data.notifications.doNotDisturb = !Settings.data.notifications.doNotDisturb onRightClicked: Settings.data.notifications.doNotDisturb = !Settings.data.notifications.doNotDisturb } NIconButton { icon: "trash" - tooltipText: "Clear history" - sizeRatio: 0.8 + tooltipText: "Clear history." + baseSize: Style.baseWidgetSize * 0.8 onClicked: { NotificationService.clearHistory() root.close() @@ -66,7 +66,7 @@ NPanel { NIconButton { icon: "close" tooltipText: "Close." - sizeRatio: 0.8 + baseSize: Style.baseWidgetSize * 0.8 onClicked: { root.close() } @@ -198,8 +198,8 @@ NPanel { // Delete button NIconButton { icon: "trash" - tooltipText: "Delete notification" - sizeRatio: 0.7 + tooltipText: "Delete notification." + baseSize: Style.baseWidgetSize * 0.7 Layout.alignment: Qt.AlignTop onClicked: { diff --git a/Modules/SettingsPanel/Bar/BarSectionEditor.qml b/Modules/SettingsPanel/Bar/BarSectionEditor.qml index 0c1919b..7c9de5e 100644 --- a/Modules/SettingsPanel/Bar/BarSectionEditor.qml +++ b/Modules/SettingsPanel/Bar/BarSectionEditor.qml @@ -14,6 +14,9 @@ NBox { property var widgetModel: [] property var availableWidgets: [] + + readonly property real miniButtonSize: Style.baseWidgetSize * 0.65 + signal addWidget(string widgetId, string section) signal removeWidget(string section, int index) signal reorderWidget(string section, int fromIndex, int toIndex) @@ -178,7 +181,7 @@ NBox { active: BarWidgetRegistry.widgetHasUserSettings(modelData.id) sourceComponent: NIconButton { icon: "settings" - sizeRatio: 0.6 + baseSize: miniButtonSize colorBorder: Qt.alpha(Color.mOutline, Style.opacityLight) colorBg: Color.mOnSurface colorFg: Color.mOnPrimary @@ -218,7 +221,7 @@ NBox { NIconButton { icon: "close" - sizeRatio: 0.6 + baseSize: miniButtonSize colorBorder: Qt.alpha(Color.mOutline, Style.opacityLight) colorBg: Color.mOnSurface colorFg: Color.mOnPrimary diff --git a/Modules/SettingsPanel/Tabs/AudioTab.qml b/Modules/SettingsPanel/Tabs/AudioTab.qml index b0d42ac..463185c 100644 --- a/Modules/SettingsPanel/Tabs/AudioTab.qml +++ b/Modules/SettingsPanel/Tabs/AudioTab.qml @@ -298,7 +298,7 @@ ColumnLayout { NIconButton { icon: "close" - sizeRatio: 0.8 + baseSize: Style.baseWidgetSize * 0.8 Layout.alignment: Qt.AlignVCenter Layout.rightMargin: Style.marginXS * scaling onClicked: { diff --git a/Modules/SettingsPanel/Tabs/BarTab.qml b/Modules/SettingsPanel/Tabs/BarTab.qml index 1b4353c..fb038f1 100644 --- a/Modules/SettingsPanel/Tabs/BarTab.qml +++ b/Modules/SettingsPanel/Tabs/BarTab.qml @@ -177,8 +177,8 @@ ColumnLayout { model: Quickshell.screens || [] delegate: NCheckbox { Layout.fillWidth: true - label: `${modelData.name || "Unknown"}${modelData.model ? `: ${modelData.model}` : ""}` - description: `${modelData.width}x${modelData.height} at (${modelData.x}, ${modelData.y})` + label: modelData.name || "Unknown" + description: `${modelData.model} - ${modelData.width}x${modelData.height} [x:${modelData.x} y:${modelData.y}]` checked: (Settings.data.bar.monitors || []).indexOf(modelData.name) !== -1 onToggled: checked => { if (checked) { diff --git a/Modules/SettingsPanel/Tabs/DisplayTab.qml b/Modules/SettingsPanel/Tabs/DisplayTab.qml index b5e41f8..2d496b6 100644 --- a/Modules/SettingsPanel/Tabs/DisplayTab.qml +++ b/Modules/SettingsPanel/Tabs/DisplayTab.qml @@ -87,19 +87,9 @@ ColumnLayout { anchors.margins: Style.marginL * scaling spacing: Style.marginXXS * scaling - NText { - text: (`${modelData.name}: ${modelData.model}` || "Unknown") - font.pointSize: Style.fontSizeL * scaling - font.weight: Style.fontWeightBold - color: Color.mPrimary - } - - NText { - text: `Resolution: ${modelData.width}x${modelData.height} at (${modelData.x}, ${modelData.y})` - font.pointSize: Style.fontSizeXS * scaling - color: Color.mOnSurfaceVariant - wrapMode: Text.WordWrap - Layout.fillWidth: true + NLabel { + label: modelData.name|| "Unknown" + description: `${modelData.model} - ${modelData.width}x${modelData.height} [x:${modelData.x} y:${modelData.y}]` } // Scale @@ -134,8 +124,8 @@ ColumnLayout { NIconButton { icon: "refresh" - sizeRatio: 0.8 - tooltipText: "Reset scaling" + baseSize: Style.baseWidgetSize * 0.9 + tooltipText: "Reset scaling." onClicked: ScalingService.setScreenScale(modelData, 1.0) anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter diff --git a/Modules/SettingsPanel/Tabs/DockTab.qml b/Modules/SettingsPanel/Tabs/DockTab.qml index 293378c..efc077b 100644 --- a/Modules/SettingsPanel/Tabs/DockTab.qml +++ b/Modules/SettingsPanel/Tabs/DockTab.qml @@ -100,8 +100,8 @@ ColumnLayout { model: Quickshell.screens || [] delegate: NCheckbox { Layout.fillWidth: true - label: `${modelData.name || "Unknown"}${modelData.model ? `: ${modelData.model}` : ""}` - description: `${modelData.width}x${modelData.height} at (${modelData.x}, ${modelData.y})` + label: modelData.name || "Unknown" + description: `${modelData.model} - ${modelData.width}x${modelData.height} [x:${modelData.x} y:${modelData.y}]` checked: (Settings.data.dock.monitors || []).indexOf(modelData.name) !== -1 onToggled: checked => { if (checked) { diff --git a/Modules/SettingsPanel/Tabs/NotificationTab.qml b/Modules/SettingsPanel/Tabs/NotificationTab.qml index fa6d268..1f05bad 100644 --- a/Modules/SettingsPanel/Tabs/NotificationTab.qml +++ b/Modules/SettingsPanel/Tabs/NotificationTab.qml @@ -60,8 +60,8 @@ ColumnLayout { model: Quickshell.screens || [] delegate: NCheckbox { Layout.fillWidth: true - label: `${modelData.name || "Unknown"}${modelData.model ? `: ${modelData.model}` : ""}` - description: `${modelData.width}x${modelData.height} at (${modelData.x}, ${modelData.y})` + label: modelData.name || "Unknown" + description: `${modelData.model} - ${modelData.width}x${modelData.height} [x:${modelData.x} y:${modelData.y}]` checked: (Settings.data.notifications.monitors || []).indexOf(modelData.name) !== -1 onToggled: checked => { if (checked) { diff --git a/Modules/Toast/SimpleToast.qml b/Modules/Toast/SimpleToast.qml index bc51858..90a8416 100644 --- a/Modules/Toast/SimpleToast.qml +++ b/Modules/Toast/SimpleToast.qml @@ -136,7 +136,7 @@ Rectangle { colorBorder: Color.transparent colorBorderHover: Color.mOutline - sizeRatio: 0.8 + baseSize: Style.baseWidgetSize * 0.8 Layout.alignment: Qt.AlignTop onClicked: root.hide() diff --git a/Modules/WiFiPanel/WiFiPanel.qml b/Modules/WiFiPanel/WiFiPanel.qml index bfda627..190110c 100644 --- a/Modules/WiFiPanel/WiFiPanel.qml +++ b/Modules/WiFiPanel/WiFiPanel.qml @@ -57,7 +57,7 @@ NPanel { NIconButton { icon: "refresh" tooltipText: "Refresh" - sizeRatio: 0.8 + baseSize: Style.baseWidgetSize * 0.8 enabled: Settings.data.network.wifiEnabled && !NetworkService.scanning onClicked: NetworkService.scan() } @@ -65,7 +65,7 @@ NPanel { NIconButton { icon: "close" tooltipText: "Close." - sizeRatio: 0.8 + baseSize: Style.baseWidgetSize * 0.8 onClicked: root.close() } } @@ -106,7 +106,7 @@ NPanel { NIconButton { icon: "close" - sizeRatio: 0.6 + baseSize: Style.baseWidgetSize * 0.6 onClicked: NetworkService.lastError = "" } } @@ -368,7 +368,7 @@ NPanel { visible: (modelData.existing || modelData.cached) && !modelData.connected && NetworkService.connectingTo !== modelData.ssid && NetworkService.forgettingNetwork !== modelData.ssid && NetworkService.disconnectingFrom !== modelData.ssid icon: "trash" tooltipText: "Forget network" - sizeRatio: 0.7 + baseSize: Style.baseWidgetSize * 0.8 onClicked: expandedSsid = expandedSsid === modelData.ssid ? "" : modelData.ssid } @@ -478,7 +478,7 @@ NPanel { NIconButton { icon: "close" - sizeRatio: 0.8 + baseSize: Style.baseWidgetSize * 0.8 onClicked: { passwordSsid = "" passwordInput = "" @@ -532,7 +532,7 @@ NPanel { NIconButton { icon: "close" - sizeRatio: 0.8 + baseSize: Style.baseWidgetSize * 0.8 onClicked: expandedSsid = "" } } diff --git a/Widgets/NIconButton.qml b/Widgets/NIconButton.qml index 07f2798..291cde3 100644 --- a/Widgets/NIconButton.qml +++ b/Widgets/NIconButton.qml @@ -7,8 +7,7 @@ import qs.Services Rectangle { id: root - // Multiplier to control how large the button container is relative to Style.baseWidgetSize - property real sizeRatio: 1.0 + property real baseSize: Style.baseWidgetSize property string icon property string tooltipText @@ -29,8 +28,8 @@ Rectangle { signal rightClicked signal middleClicked - implicitWidth: Math.round(Style.baseWidgetSize * scaling * sizeRatio) - implicitHeight: Math.round(Style.baseWidgetSize * scaling * sizeRatio) + implicitWidth: Math.round(baseSize * scaling) + implicitHeight: Math.round(baseSize * scaling) opacity: root.enabled ? Style.opacityFull : Style.opacityMedium color: root.enabled && root.hovering ? colorBgHover : colorBg @@ -47,7 +46,7 @@ Rectangle { NIcon { icon: root.icon - font.pointSize: Math.max(1, root.width * 0.47) + font.pointSize: Math.max(1, root.width * 0.48) color: root.enabled && root.hovering ? colorFgHover : colorFg // Center horizontally x: (root.width - width) / 2 diff --git a/Widgets/NPill.qml b/Widgets/NPill.qml index d6f0fac..b69fdc1 100644 --- a/Widgets/NPill.qml +++ b/Widgets/NPill.qml @@ -10,7 +10,6 @@ Item { property string text: "" property string suffix: "" property string tooltipText: "" - property real sizeRatio: 0.8 property bool autoHide: false property bool forceOpen: false property bool forceClose: false @@ -46,7 +45,6 @@ Item { text: root.text suffix: root.suffix tooltipText: root.tooltipText - sizeRatio: root.sizeRatio autoHide: root.autoHide forceOpen: root.forceOpen forceClose: root.forceClose @@ -71,7 +69,6 @@ Item { text: root.text suffix: root.suffix tooltipText: root.tooltipText - sizeRatio: root.sizeRatio autoHide: root.autoHide forceOpen: root.forceOpen forceClose: root.forceClose diff --git a/Widgets/NPillHorizontal.qml b/Widgets/NPillHorizontal.qml index 89888ba..842714a 100644 --- a/Widgets/NPillHorizontal.qml +++ b/Widgets/NPillHorizontal.qml @@ -10,7 +10,6 @@ Item { property string text: "" property string suffix: "" property string tooltipText: "" - property real sizeRatio: 0.8 property bool autoHide: false property bool forceOpen: false property bool forceClose: false @@ -34,19 +33,17 @@ Item { property bool showPill: false property bool shouldAnimateHide: false - // Exposed width logic - readonly property int iconSize: Math.round(Style.baseWidgetSize * sizeRatio * scaling) - readonly property int pillHeight: iconSize - readonly property int pillPaddingHorizontal: 3 * 2 * scaling // Very precise adjustment don't replace by Style.margin - readonly property int pillOverlap: iconSize * 0.5 - readonly property int maxPillWidth: Math.max(1, textItem.implicitWidth + pillPaddingHorizontal * 2 + pillOverlap) + readonly property int pillHeight: Math.round(Style.capsuleHeight * scaling) + readonly property int pillPaddingHorizontal: Math.round(Style.capsuleHeight * 0.2 * scaling) + readonly property int pillOverlap: Math.round(Style.capsuleHeight * 0.5 * scaling) + readonly property int pillMaxWidth: Math.max(1, textItem.implicitWidth + pillPaddingHorizontal * 2 + pillOverlap) - width: iconSize + Math.max(0, pill.width - pillOverlap) + width: pillHeight + Math.max(0, pill.width - pillOverlap) height: pillHeight Rectangle { id: pill - width: revealed ? maxPillWidth : 1 + width: revealed ? pillMaxWidth : 1 height: pillHeight x: rightOpen ? (iconCircle.x + iconCircle.width / 2) : // Opens right @@ -76,7 +73,7 @@ Item { } text: root.text + root.suffix font.family: Settings.data.ui.fontFixed - font.pointSize: Style.fontSizeXS * scaling + font.pointSize: Math.max(1, root.pillHeight * 0.33) font.weight: Style.fontWeightBold color: forceOpen ? Color.mOnSurface : Color.mPrimary visible: revealed @@ -100,8 +97,8 @@ Item { Rectangle { id: iconCircle - width: iconSize - height: iconSize + width: pillHeight + height: pillHeight radius: width * 0.5 color: hovered ? Color.mTertiary : Color.mSurfaceVariant anchors.verticalCenter: parent.verticalCenter @@ -117,7 +114,7 @@ Item { NIcon { icon: root.icon - font.pointSize: Style.fontSizeM * scaling + font.pointSize: Math.max(1, pillHeight * 0.5) color: hovered ? Color.mOnTertiary : Color.mOnSurface // Center horizontally x: (iconCircle.width - width) / 2 @@ -133,7 +130,7 @@ Item { target: pill property: "width" from: 1 - to: maxPillWidth + to: pillMaxWidth duration: Style.animationNormal easing.type: Easing.OutCubic } @@ -173,7 +170,7 @@ Item { NumberAnimation { target: pill property: "width" - from: maxPillWidth + from: pillMaxWidth to: 1 duration: Style.animationNormal easing.type: Easing.InCubic diff --git a/Widgets/NPillVertical.qml b/Widgets/NPillVertical.qml index fb5037a..a02031a 100644 --- a/Widgets/NPillVertical.qml +++ b/Widgets/NPillVertical.qml @@ -10,7 +10,6 @@ Item { property string text: "" property string suffix: "" property string tooltipText: "" - property real sizeRatio: 0.8 property bool autoHide: false property bool forceOpen: false property bool forceClose: false @@ -43,7 +42,7 @@ Item { property bool shouldAnimateHide: false // Sizing logic for vertical bars - readonly property int iconSize: Math.round(Style.baseWidgetSize * sizeRatio * scaling) + readonly property int iconSize: Math.round(Style.capsuleHeight * scaling) readonly property int pillHeight: iconSize readonly property int pillPaddingVertical: 3 * 2 * scaling // Very precise adjustment don't replace by Style.margin readonly property int pillOverlap: iconSize * 0.5 diff --git a/Widgets/NWidgetLoader.qml b/Widgets/NWidgetLoader.qml index 17bf887..ac4c542 100644 --- a/Widgets/NWidgetLoader.qml +++ b/Widgets/NWidgetLoader.qml @@ -49,7 +49,7 @@ Item { item.onLoaded() } - //Logger.log("NWidgetLoader", "Loaded", widgetId, "on screen", item.screen.name) + Logger.log("NWidgetLoader", "Loaded", widgetId, "on screen", item.screen.name) } }