From d3be5b760b58cd630caf1b5a62a17b341addd85d Mon Sep 17 00:00:00 2001 From: quadbyte Date: Thu, 7 Aug 2025 23:18:05 -0400 Subject: [PATCH] Scaling: many improvements and fixes - radius are not pixels, they should not be scaled - use "screen" instead of "Screen" which helps a lot in some places --- Bar/Bar.qml | 11 +- Bar/Modules/ActiveWindow.qml | 2 +- Bar/Modules/Applauncher.qml | 14 +- Bar/Modules/AudioDeviceSelector.qml | 20 +-- Bar/Modules/Calendar.qml | 6 +- Bar/Modules/ClockWidget.qml | 2 +- Bar/Modules/CustomTrayMenu.qml | 8 +- Bar/Modules/Media.qml | 2 +- Bar/Modules/SettingsButton.qml | 2 +- Bar/Modules/SystemTray.qml | 2 +- Bar/Modules/Workspace.qml | 18 +-- Components/Avatar.qml | 2 +- Components/CircularProgressBar.qml | 4 +- Components/Corner.qml | 6 +- Components/IconButton.qml | 4 +- Components/Spinner.qml | 2 +- Components/StyledTooltip.qml | 14 +- Components/Tabs.qml | 14 +- Components/ToggleOption.qml | 24 +-- Settings/Theme.qml | 13 +- Widgets/Dock.qml | 4 +- Widgets/LockScreen/BatteryCharge.qml | 4 +- Widgets/LockScreen/LockScreen.qml | 90 ++++++------ Widgets/SettingsWindow/SettingsWindow.qml | 86 +++++------ Widgets/SettingsWindow/Tabs/About.qml | 30 ++-- Widgets/SettingsWindow/Tabs/Bar.qml | 4 +- .../Tabs/Components/UnitSelector.qml | 18 +-- .../Tabs/Components/WallpaperSelector.qml | 16 +- Widgets/SettingsWindow/Tabs/Display.qml | 28 ++-- Widgets/SettingsWindow/Tabs/General.qml | 48 +++--- Widgets/SettingsWindow/Tabs/Misc.qml | 8 +- Widgets/SettingsWindow/Tabs/Network.qml | 8 +- .../SettingsWindow/Tabs/ScreenRecorder.qml | 68 ++++----- Widgets/SettingsWindow/Tabs/TimeWeather.qml | 20 +-- Widgets/SidePanel/Button.qml | 2 +- Widgets/SidePanel/Music.qml | 120 ++++++++------- Widgets/SidePanel/PanelPopup.qml | 84 +++++------ Widgets/SidePanel/PowerProfile.qml | 30 ++-- Widgets/SidePanel/SettingsIcon.qml | 4 +- Widgets/SidePanel/SettingsModal.qml | 4 +- Widgets/SidePanel/System.qml | 137 +++++++++--------- Widgets/SidePanel/SystemMonitor.qml | 40 +++-- Widgets/SidePanel/Weather.qml | 47 +++--- 43 files changed, 532 insertions(+), 538 deletions(-) diff --git a/Bar/Bar.qml b/Bar/Bar.qml index f5e5953..be1194f 100644 --- a/Bar/Bar.qml +++ b/Bar/Bar.qml @@ -47,19 +47,20 @@ Scope { id: barBackground width: parent.width - height: 36 * Theme.scale(Screen) + height: 36 * Theme.scale(panel.screen) color: Theme.backgroundPrimary anchors.top: parent.top anchors.left: parent.left } + Row { id: leftWidgetsRow anchors.verticalCenter: barBackground.verticalCenter anchors.left: barBackground.left - anchors.leftMargin: 18 * Theme.scale(Screen) - spacing: 12 * Theme.scale(Screen) + anchors.leftMargin: 18 * Theme.scale(panel.screen) + spacing: 12 * Theme.scale(panel.screen) SystemInfo { anchors.verticalCenter: parent.verticalCenter @@ -92,8 +93,8 @@ Scope { anchors.verticalCenter: barBackground.verticalCenter anchors.right: barBackground.right - anchors.rightMargin: 18 * Theme.scale(Screen) - spacing: 12 * Theme.scale(Screen) + anchors.rightMargin: 18 * Theme.scale(panel.screen) + spacing: 12 * Theme.scale(panel.screen) SystemTray { id: systemTrayModule diff --git a/Bar/Modules/ActiveWindow.qml b/Bar/Modules/ActiveWindow.qml index 00c2f9c..c0a0435 100644 --- a/Bar/Modules/ActiveWindow.qml +++ b/Bar/Modules/ActiveWindow.qml @@ -128,7 +128,7 @@ PanelWindow { Text { id: activeWindowTitle text: ToplevelManager?.activeToplevel?.title && ToplevelManager?.activeToplevel?.title.length > 60 ? ToplevelManager?.activeToplevel?.title.substring(0, 60) + "..." : ToplevelManager?.activeToplevel?.title || "" - font.pixelSize: 12 * Theme.scale(Screen) + font.pixelSize: 12 * Theme.scale(screen) color: Theme.textSecondary anchors.left: icon.right anchors.leftMargin: Settings.settings.showActiveWindowIcon ? 4 : 6 diff --git a/Bar/Modules/Applauncher.qml b/Bar/Modules/Applauncher.qml index 8e58320..e3f15c9 100644 --- a/Bar/Modules/Applauncher.qml +++ b/Bar/Modules/Applauncher.qml @@ -532,7 +532,7 @@ PanelWithOverlay { Text { text: "search" font.family: "Material Symbols Outlined" - font.pixelSize: Theme.fontSizeHeader * Theme.scale(Screen) + font.pixelSize: Theme.fontSizeHeader * Theme.scale(screen) color: searchField.activeFocus ? Theme.accentPrimary : Theme.textSecondary verticalAlignment: Text.AlignVCenter Layout.alignment: Qt.AlignVCenter @@ -545,7 +545,7 @@ PanelWithOverlay { placeholderTextColor: Theme.textSecondary background: null font.family: Theme.fontFamily - font.pixelSize: Theme.fontSizeBody * Theme.scale(Screen) + font.pixelSize: Theme.fontSizeBody * Theme.scale(screen) Layout.fillWidth: true Layout.alignment: Qt.AlignVCenter onTextChanged: root.updateFilter() @@ -689,7 +689,7 @@ PanelWithOverlay { visible: !modelData.isCalculator && !modelData.isClipboard && !modelData.isCommand && !parent.iconLoaded && modelData.type !== 'image' text: "broken_image" font.family: "Material Symbols Outlined" - font.pixelSize: Theme.fontSizeHeader * Theme.scale(Screen) + font.pixelSize: Theme.fontSizeHeader * Theme.scale(screen) color: Theme.accentPrimary } } @@ -702,7 +702,7 @@ PanelWithOverlay { text: modelData.name color: (hovered || isSelected) ? Theme.onAccent : (appLauncherPanel.isPinned(modelData) ? Theme.textPrimary : Theme.textPrimary) font.family: Theme.fontFamily - font.pixelSize: Theme.fontSizeSmall * Theme.scale(Screen) + font.pixelSize: Theme.fontSizeSmall * Theme.scale(screen) font.bold: hovered || isSelected verticalAlignment: Text.AlignVCenter elide: Text.ElideRight @@ -716,7 +716,7 @@ PanelWithOverlay { (modelData.comment || modelData.genericName || "No description available") color: (hovered || isSelected) ? Theme.onAccent : (appLauncherPanel.isPinned(modelData) ? Theme.textSecondary : Theme.textSecondary) font.family: Theme.fontFamily - font.pixelSize: Theme.fontSizeCaption * Theme.scale(Screen) + font.pixelSize: Theme.fontSizeCaption * Theme.scale(screen) font.italic: !(modelData.comment || modelData.genericName) opacity: modelData.isClipboard ? 0.8 : modelData.isCommand ? 0.9 : ((modelData.comment || modelData.genericName) ? 1.0 : 0.6) elide: Text.ElideRight @@ -734,7 +734,7 @@ PanelWithOverlay { Text { text: modelData.isCalculator ? "content_copy" : "chevron_right" font.family: "Material Symbols Outlined" - font.pixelSize: Theme.fontSizeBody * Theme.scale(Screen) + font.pixelSize: Theme.fontSizeBody * Theme.scale(screen) color: (hovered || isSelected) ? Theme.onAccent : (appLauncherPanel.isPinned(modelData) ? Theme.textPrimary : Theme.textSecondary) @@ -818,7 +818,7 @@ PanelWithOverlay { anchors.centerIn: parent text: "star" font.family: "Material Symbols Outlined" - font.pixelSize: Theme.fontSizeSmall * Theme.scale(Screen) + font.pixelSize: Theme.fontSizeSmall * Theme.scale(screen) color: (parent.MouseArea.containsMouse || hovered || isSelected) ? Theme.onAccent : (appLauncherPanel.isPinned(modelData) ? Theme.textPrimary : Theme.textDisabled) diff --git a/Bar/Modules/AudioDeviceSelector.qml b/Bar/Modules/AudioDeviceSelector.qml index 3d45d92..5c44ba3 100644 --- a/Bar/Modules/AudioDeviceSelector.qml +++ b/Bar/Modules/AudioDeviceSelector.qml @@ -155,7 +155,7 @@ PanelWithOverlay { Text { text: "volume_up" font.family: "Material Symbols Outlined" - font.pixelSize: 16 * Theme.scale(Screen) + font.pixelSize: 16 * Theme.scale(screen) color: (Pipewire.defaultAudioSink && Pipewire.defaultAudioSink.id === modelData.id) ? Theme.accentPrimary : Theme.textPrimary Layout.alignment: Qt.AlignVCenter } @@ -168,7 +168,7 @@ PanelWithOverlay { Text { text: modelData.nickname || modelData.description || modelData.name font.bold: true - font.pixelSize: 12 * Theme.scale(Screen) + font.pixelSize: 12 * Theme.scale(screen) color: (Pipewire.defaultAudioSink && Pipewire.defaultAudioSink.id === modelData.id) ? Theme.accentPrimary : Theme.textPrimary elide: Text.ElideRight maximumLineCount: 1 @@ -177,7 +177,7 @@ PanelWithOverlay { Text { text: modelData.description !== modelData.nickname ? modelData.description : "" - font.pixelSize: 10 * Theme.scale(Screen) + font.pixelSize: 10 * Theme.scale(screen) color: Theme.textSecondary elide: Text.ElideRight maximumLineCount: 1 @@ -200,7 +200,7 @@ PanelWithOverlay { anchors.centerIn: parent text: "Set" color: Theme.onAccent - font.pixelSize: 10 * Theme.scale(Screen) + font.pixelSize: 10 * Theme.scale(screen) font.bold: true } @@ -216,7 +216,7 @@ PanelWithOverlay { text: "(Current)" visible: Pipewire.defaultAudioSink && Pipewire.defaultAudioSink.id === modelData.id color: Theme.accentPrimary - font.pixelSize: 10 * Theme.scale(Screen) + font.pixelSize: 10 * Theme.scale(screen) Layout.alignment: Qt.AlignVCenter } @@ -267,7 +267,7 @@ PanelWithOverlay { Text { text: "mic" font.family: "Material Symbols Outlined" - font.pixelSize: 16 * Theme.scale(Screen) + font.pixelSize: 16 * Theme.scale(screen) color: (Pipewire.defaultAudioSource && Pipewire.defaultAudioSource.id === modelData.id) ? Theme.accentPrimary : Theme.textPrimary Layout.alignment: Qt.AlignVCenter } @@ -280,7 +280,7 @@ PanelWithOverlay { Text { text: modelData.nickname || modelData.description || modelData.name font.bold: true - font.pixelSize: 12 * Theme.scale(Screen) + font.pixelSize: 12 * Theme.scale(screen) color: (Pipewire.defaultAudioSource && Pipewire.defaultAudioSource.id === modelData.id) ? Theme.accentPrimary : Theme.textPrimary elide: Text.ElideRight maximumLineCount: 1 @@ -289,7 +289,7 @@ PanelWithOverlay { Text { text: modelData.description !== modelData.nickname ? modelData.description : "" - font.pixelSize: 10 * Theme.scale(Screen) + font.pixelSize: 10 * Theme.scale(screen) color: Theme.textSecondary elide: Text.ElideRight maximumLineCount: 1 @@ -312,7 +312,7 @@ PanelWithOverlay { anchors.centerIn: parent text: "Set" color: Theme.onAccent - font.pixelSize: 10 * Theme.scale(Screen) + font.pixelSize: 10 * Theme.scale(screen) font.bold: true } @@ -328,7 +328,7 @@ PanelWithOverlay { text: "(Current)" visible: Pipewire.defaultAudioSource && Pipewire.defaultAudioSource.id === modelData.id color: Theme.accentPrimary - font.pixelSize: 10 * Theme.scale(Screen) + font.pixelSize: 10 * Theme.scale(screen) Layout.alignment: Qt.AlignVCenter } diff --git a/Bar/Modules/Calendar.qml b/Bar/Modules/Calendar.qml index 47757fa..1330b8d 100644 --- a/Bar/Modules/Calendar.qml +++ b/Bar/Modules/Calendar.qml @@ -52,7 +52,7 @@ PanelWithOverlay { text: calendar.title color: Theme.textPrimary opacity: 0.7 - font.pixelSize: 13 * Theme.scale(Screen) + font.pixelSize: 13 * Theme.scale(screen) font.family: Theme.fontFamily font.bold: true } @@ -78,7 +78,7 @@ PanelWithOverlay { text: shortName color: Theme.textPrimary opacity: 0.8 - font.pixelSize: 13 * Theme.scale(Screen) + font.pixelSize: 13 * Theme.scale(screen) font.family: Theme.fontFamily font.bold: true horizontalAlignment: Text.AlignHCenter @@ -161,7 +161,7 @@ PanelWithOverlay { text: model.day color: model.today ? Theme.onAccent : Theme.textPrimary opacity: model.month === calendar.month ? (mouseArea2.containsMouse ? 1 : 0.7) : 0.3 - font.pixelSize: 13 * Theme.scale(Screen) + font.pixelSize: 13 * Theme.scale(screen) font.family: Theme.fontFamily font.bold: model.today ? true : false } diff --git a/Bar/Modules/ClockWidget.qml b/Bar/Modules/ClockWidget.qml index bff0d35..5add57f 100644 --- a/Bar/Modules/ClockWidget.qml +++ b/Bar/Modules/ClockWidget.qml @@ -15,7 +15,7 @@ Rectangle { text: Time.time font.family: Theme.fontFamily font.weight: Font.Bold - font.pixelSize: Theme.fontSizeSmall * Theme.scale(Screen) + font.pixelSize: Theme.fontSizeSmall * Theme.scale(screen) color: Theme.textPrimary anchors.centerIn: parent } diff --git a/Bar/Modules/CustomTrayMenu.qml b/Bar/Modules/CustomTrayMenu.qml index e575648..d43badf 100644 --- a/Bar/Modules/CustomTrayMenu.qml +++ b/Bar/Modules/CustomTrayMenu.qml @@ -128,7 +128,7 @@ PopupWindow { color: (modelData?.enabled ?? true) ? bg.hoverTextColor : Theme.textDisabled; text: modelData?.text ?? ""; font.family: Theme.fontFamily; - font.pixelSize: Theme.fontSizeSmall * Theme.scale(Screen); + font.pixelSize: Theme.fontSizeSmall * Theme.scale(screen); verticalAlignment: Text.AlignVCenter; elide: Text.ElideRight; } @@ -145,7 +145,7 @@ PopupWindow { // Material Symbols Outlined chevron right for submenu text: modelData?.hasChildren ? "menu" : ""; font.family: "Material Symbols Outlined"; - font.pixelSize: 18 * Theme.scale(Screen); + font.pixelSize: 18 * Theme.scale(screen); verticalAlignment: Text.AlignVCenter; visible: modelData?.hasChildren ?? false; color: Theme.textPrimary; @@ -362,7 +362,7 @@ PopupWindow { color: (modelData?.enabled ?? true) ? bg.hoverTextColor : Theme.textDisabled; text: modelData?.text ?? ""; font.family: Theme.fontFamily; - font.pixelSize: Theme.fontSizeSmall * Theme.scale(Screen); + font.pixelSize: Theme.fontSizeSmall * Theme.scale(screen); verticalAlignment: Text.AlignVCenter; elide: Text.ElideRight; } @@ -378,7 +378,7 @@ PopupWindow { Text { text: modelData?.hasChildren ? "\uE5CC" : ""; font.family: "Material Symbols Outlined"; - font.pixelSize: 18 * Theme.scale(Screen); + font.pixelSize: 18 * Theme.scale(screen); verticalAlignment: Text.AlignVCenter; visible: modelData?.hasChildren ?? false; color: Theme.textPrimary; diff --git a/Bar/Modules/Media.qml b/Bar/Modules/Media.qml index d9da9f3..a524370 100644 --- a/Bar/Modules/Media.qml +++ b/Bar/Modules/Media.qml @@ -43,7 +43,7 @@ Item { width: 20 * Theme.scale(Screen) height: 20 * Theme.scale(Screen) anchors.centerIn: parent - radius: 12 * Theme.scale(Screen) // circle + radius: 12 // circle color: Qt.darker(Theme.surface, 1.1) border.color: Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.3) border.width: 1 diff --git a/Bar/Modules/SettingsButton.qml b/Bar/Modules/SettingsButton.qml index c832bd8..b0d1f5c 100644 --- a/Bar/Modules/SettingsButton.qml +++ b/Bar/Modules/SettingsButton.qml @@ -21,7 +21,7 @@ Item { anchors.centerIn: parent text: "settings" font.family: "Material Symbols Outlined" - font.pixelSize: 16 * Theme.scale(Screen) + font.pixelSize: 16 * Theme.scale(screen) color: mouseArea.containsMouse ? Theme.accentPrimary : Theme.textPrimary } diff --git a/Bar/Modules/SystemTray.qml b/Bar/Modules/SystemTray.qml index da6e04c..88c095e 100644 --- a/Bar/Modules/SystemTray.qml +++ b/Bar/Modules/SystemTray.qml @@ -33,7 +33,7 @@ Row { anchors.centerIn: parent width: 16 * Theme.scale(Screen) height: 16 * Theme.scale(Screen) - radius: 6 * Theme.scale(Screen) + radius: 6 color: "transparent" clip: true diff --git a/Bar/Modules/Workspace.qml b/Bar/Modules/Workspace.qml index 6198985..39dd774 100644 --- a/Bar/Modules/Workspace.qml +++ b/Bar/Modules/Workspace.qml @@ -40,7 +40,7 @@ Item { return total; } - height: 36 * Theme.scale(Screen) + height: 36 * Theme.scale(screen) Component.onCompleted: { localWorkspaces.clear(); @@ -115,14 +115,14 @@ Item { Rectangle { id: workspaceBackground - width: parent.width - 15 * Theme.scale(Screen) - height: 26 * Theme.scale(Screen) + width: parent.width - 15 * Theme.scale(screen) + height: 26 * Theme.scale(screen) anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter - radius: 12 * Theme.scale(Screen) + radius: 12 color: Theme.surfaceVariant border.color: Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.1) - border.width: 1 * Theme.scale(Screen) + border.width: 1 * Theme.scale(screen) layer.enabled: true layer.effect: MultiEffect { shadowColor: "black" @@ -145,7 +145,7 @@ Item { model: localWorkspaces Item { id: workspacePillContainer - height: 12 * Theme.scale(Screen) + height: 12 * Theme.scale(screen) width: { if (model.isFocused) return 44; @@ -245,12 +245,12 @@ Item { Rectangle { id: pillBurst anchors.centerIn: workspacePillContainer - width: workspacePillContainer.width + 18 * root.masterProgress * Theme.scale(Screen) - height: workspacePillContainer.height + 18 * root.masterProgress * Theme.scale(Screen) + width: workspacePillContainer.width + 18 * root.masterProgress * Theme.scale(screen) + height: workspacePillContainer.height + 18 * root.masterProgress * Theme.scale(screen) radius: width / 2 color: "transparent" border.color: root.effectColor - border.width: (2 + 6 * (1.0 - root.masterProgress)) * Theme.scale(Screen) + border.width: (2 + 6 * (1.0 - root.masterProgress)) * Theme.scale(screen) opacity: root.effectsActive && model.isFocused ? (1.0 - root.masterProgress) * 0.7 : 0 visible: root.effectsActive && model.isFocused z: 1 diff --git a/Components/Avatar.qml b/Components/Avatar.qml index b2c29a2..f706e8c 100644 --- a/Components/Avatar.qml +++ b/Components/Avatar.qml @@ -43,7 +43,7 @@ Item { anchors.centerIn: parent text: "person" font.family: "Material Symbols Outlined" - font.pixelSize: 24 * Theme.scale(Screen) + font.pixelSize: 24 * Theme.scale(screen) color: Theme.onAccent visible: Settings.settings.profileImage === undefined || Settings.settings.profileImage === "" z: 0 diff --git a/Components/CircularProgressBar.qml b/Components/CircularProgressBar.qml index a38bb1b..9b51791 100644 --- a/Components/CircularProgressBar.qml +++ b/Components/CircularProgressBar.qml @@ -9,11 +9,11 @@ Rectangle { property int size: 80 property color backgroundColor: Theme.surfaceVariant property color progressColor: Theme.accentPrimary - property int strokeWidth: 6 * Theme.scale(Screen) + property int strokeWidth: 6 * Theme.scale(screen) property bool showText: true property string units: "%" property string text: Math.round(progress * 100) + units - property int textSize: 10 * Theme.scale(Screen) + property int textSize: 10 * Theme.scale(screen) property color textColor: Theme.textPrimary // Notch properties diff --git a/Components/Corner.qml b/Components/Corner.qml index 47b5972..2653c04 100644 --- a/Components/Corner.qml +++ b/Components/Corner.qml @@ -6,11 +6,11 @@ Shape { id: root property string position: "topleft" // Corner position: topleft/topright/bottomleft/bottomright - property real size: 1.0 * Theme.scale(Screen) // Scale multiplier for entire corner + property real size: 1.0 * Theme.scale(screen) // Scale multiplier for entire corner property int concaveWidth: 100 * size property int concaveHeight: 60 * size - property int offsetX: -20 * Theme.scale(Screen) - property int offsetY: -20 * Theme.scale(Screen) + property int offsetX: -20 * Theme.scale(screen) + property int offsetY: -20 * Theme.scale(screen) property color fillColor: Theme.accentPrimary property int arcRadius: 20 * size diff --git a/Components/IconButton.qml b/Components/IconButton.qml index 93d623d..9947da4 100644 --- a/Components/IconButton.qml +++ b/Components/IconButton.qml @@ -19,7 +19,7 @@ MouseArea { Rectangle { anchors.fill: parent - radius: 8 * Theme.scale(Screen) + radius: 8 color: root.hovering ? Theme.accentPrimary : "transparent" } Text { @@ -27,7 +27,7 @@ MouseArea { anchors.centerIn: parent text: root.icon font.family: "Material Symbols Outlined" - font.pixelSize: 24 * Theme.scale(Screen) + font.pixelSize: 24 * Theme.scale(screen) color: root.hovering ? Theme.onAccent : Theme.textPrimary horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter diff --git a/Components/Spinner.qml b/Components/Spinner.qml index 73c8104..809b162 100644 --- a/Components/Spinner.qml +++ b/Components/Spinner.qml @@ -7,7 +7,7 @@ Item { property bool running: false property color color: "white" property int size: 16 - property int strokeWidth: 2 * Theme.scale(Screen) + property int strokeWidth: 2 * Theme.scale(screen) property int duration: 1000 implicitWidth: size diff --git a/Components/StyledTooltip.qml b/Components/StyledTooltip.qml index ecf7ffd..c206cf4 100644 --- a/Components/StyledTooltip.qml +++ b/Components/StyledTooltip.qml @@ -33,8 +33,8 @@ Window { } function _showNow() { - width = Math.max(50 * Theme.scale(Screen), tooltipText.implicitWidth + 24 * Theme.scale(Screen)) - height = Math.max(50 * Theme.scale(Screen), tooltipText.implicitHeight + 16 * Theme.scale(Screen)) + width = Math.max(50 * Theme.scale(screen), tooltipText.implicitWidth + 24 * Theme.scale(screen)) + height = Math.max(50 * Theme.scale(screen), tooltipText.implicitHeight + 16 * Theme.scale(screen)) if (!targetItem) return; @@ -75,10 +75,10 @@ Window { Rectangle { anchors.fill: parent - radius: 20 * Theme.scale(Screen) + radius: 18 color: Theme.backgroundTertiary || "#222" border.color: Theme.outline || "#444" - border.width: 1 * Theme.scale(Screen) + border.width: 1 * Theme.scale(screen) opacity: 0.97 z: 1 } @@ -88,7 +88,7 @@ Window { text: tooltipWindow.text color: Theme.textPrimary font.family: Theme.fontFamily - font.pixelSize: Theme.fontSizeSmall * Theme.scale(Screen) + font.pixelSize: Theme.fontSizeSmall * Theme.scale(screen) anchors.centerIn: parent horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter @@ -105,7 +105,7 @@ Window { } onTextChanged: { - width = Math.max(minimumWidth * Theme.scale(Screen), tooltipText.implicitWidth + 24 * Theme.scale(Screen)); - height = Math.max(minimumHeight * Theme.scale(Screen), tooltipText.implicitHeight + 16 * Theme.scale(Screen)); + width = Math.max(minimumWidth * Theme.scale(screen), tooltipText.implicitWidth + 24 * Theme.scale(screen)); + height = Math.max(minimumHeight * Theme.scale(screen), tooltipText.implicitHeight + 16 * Theme.scale(screen)); } } \ No newline at end of file diff --git a/Components/Tabs.qml b/Components/Tabs.qml index 0f7f74a..fe87603 100644 --- a/Components/Tabs.qml +++ b/Components/Tabs.qml @@ -17,8 +17,8 @@ Item { model: root.tabsModel delegate: Rectangle { id: tabWrapper - implicitHeight: tab.height * Theme.scale(Screen) - implicitWidth: 56 * Theme.scale(Screen) + implicitHeight: tab.height * Theme.scale(screen) + implicitWidth: 56 * Theme.scale(screen) color: "transparent" property bool hovered: false @@ -48,7 +48,7 @@ Item { Text { text: modelData.icon font.family: "Material Symbols Outlined" - font.pixelSize: 22 * Theme.scale(Screen) + font.pixelSize: 22 * Theme.scale(screen) color: index === root.currentIndex ? (Theme ? Theme.accentPrimary : "#7C3AED") : tabWrapper.hovered ? (Theme ? Theme.accentPrimary : "#7C3AED") : (Theme ? Theme.textSecondary : "#444") Layout.alignment: Qt.AlignCenter } @@ -56,7 +56,7 @@ Item { // Label Text { text: modelData.label - font.pixelSize: 12 * Theme.scale(Screen) + font.pixelSize: 12 * Theme.scale(screen) font.bold: index === root.currentIndex color: index === root.currentIndex ? (Theme ? Theme.accentPrimary : "#7C3AED") : tabWrapper.hovered ? (Theme ? Theme.accentPrimary : "#7C3AED") : (Theme ? Theme.textSecondary : "#444") Layout.alignment: Qt.AlignCenter @@ -64,9 +64,9 @@ Item { // Underline for active tab Rectangle { - width: 24 * Theme.scale(Screen) - height: 2 * Theme.scale(Screen) - radius: 1 * Theme.scale(Screen) + width: 24 * Theme.scale(screen) + height: 2 * Theme.scale(screen) + radius: 1 color: index === root.currentIndex ? (Theme ? Theme.accentPrimary : "#7C3AED") : "transparent" Layout.alignment: Qt.AlignCenter } diff --git a/Components/ToggleOption.qml b/Components/ToggleOption.qml index e99c727..bf2f881 100644 --- a/Components/ToggleOption.qml +++ b/Components/ToggleOption.qml @@ -19,19 +19,19 @@ ColumnLayout { Layout.fillWidth: true ColumnLayout { - spacing: 4 * Theme.scale(Screen) + spacing: 4 * Theme.scale(screen) Layout.fillWidth: true Text { text: label - font.pixelSize: 13 * Theme.scale(Screen) + font.pixelSize: 13 * Theme.scale(screen) font.bold: true color: Theme.textPrimary } Text { text: description - font.pixelSize: 12 * Theme.scale(Screen) + font.pixelSize: 12 * Theme.scale(screen) color: Theme.textSecondary wrapMode: Text.WordWrap Layout.fillWidth: true @@ -42,20 +42,20 @@ ColumnLayout { Rectangle { id: switcher - width: 52 * Theme.scale(Screen) - height: 32 * Theme.scale(Screen) - radius: 16 * Theme.scale(Screen) + width: 52 * Theme.scale(screen) + height: 32 * Theme.scale(screen) + radius: 16 color: value ? Theme.accentPrimary : Theme.surfaceVariant border.color: value ? Theme.accentPrimary : Theme.outline - border.width: 2 * Theme.scale(Screen) + border.width: 2 * Theme.scale(screen) Rectangle { - width: 28 * Theme.scale(Screen) - height: 28 * Theme.scale(Screen) - radius: 14 * Theme.scale(Screen) + width: 28 * Theme.scale(screen) + height: 28 * Theme.scale(screen) + radius: 14 color: Theme.surface border.color: Theme.outline - border.width: 1 * Theme.scale(Screen) + border.width: 1 * Theme.scale(screen) y: 2 x: value ? switcher.width - width - 2 : 2 @@ -82,7 +82,7 @@ ColumnLayout { } Rectangle { - height: 8 * Theme.scale(Screen) + height: 8 * Theme.scale(screen) } } diff --git a/Settings/Theme.qml b/Settings/Theme.qml index 68d8955..746ee38 100644 --- a/Settings/Theme.qml +++ b/Settings/Theme.qml @@ -9,17 +9,14 @@ Singleton { id: root // Design screen width - readonly property int designScreenWidth: 1920 - - // Scaling dampening factor - reduces the scaling effect for higher resolutions - readonly property real scalingDampening: 0.2 + readonly property int designScreenWidth: 2560 // Automatic scaling based on screen width function scale(currentScreen) { - if (currentScreen !== undefined) { - var rawRatio = currentScreen.width / designScreenWidth; - // Apply dampening to reduce scaling for higher resolutions - return Math.min(2.0, 1.0 + (rawRatio - 1.0) * scalingDampening); + if (currentScreen.width != 0) { + var ratio = currentScreen.width / designScreenWidth; + // Limit the final scale range between [0.8...2] + return Math.max(0.8, Math.min(2.0, ratio)); } return 1.0; } diff --git a/Widgets/Dock.qml b/Widgets/Dock.qml index a806346..580ef18 100644 --- a/Widgets/Dock.qml +++ b/Widgets/Dock.qml @@ -310,7 +310,7 @@ Variants { anchors.verticalCenter: parent.verticalCenter text: "close" font.family: "Material Symbols Outlined" - font.pixelSize: 14 * Theme.scale(Screen) + font.pixelSize: 14 * Theme.scale(dockWindow.screen) color: Theme.textPrimary } @@ -318,7 +318,7 @@ Variants { anchors.verticalCenter: parent.verticalCenter text: "Close" font.family: Theme.fontFamily - font.pixelSize: 14 * Theme.scale(Screen) + font.pixelSize: 14 * Theme.scale(dockWindow.screen) color: Theme.textPrimary } } diff --git a/Widgets/LockScreen/BatteryCharge.qml b/Widgets/LockScreen/BatteryCharge.qml index ad00d45..75337ad 100644 --- a/Widgets/LockScreen/BatteryCharge.qml +++ b/Widgets/LockScreen/BatteryCharge.qml @@ -58,7 +58,7 @@ Item { Text { text: batteryIcon() font.family: "Material Symbols Outlined" - font.pixelSize: 28 * Theme.scale(Screen) + font.pixelSize: 28 * Theme.scale(screen) color: charging ? Theme.accentPrimary : Theme.textSecondary verticalAlignment: Text.AlignVBottom } @@ -66,7 +66,7 @@ Item { Text { text: Math.round(percent) + "%" font.family: Theme.fontFamily - font.pixelSize: 18 * Theme.scale(Screen) + font.pixelSize: 18 * Theme.scale(screen) color: Theme.textSecondary verticalAlignment: Text.AlignVBottom } diff --git a/Widgets/LockScreen/LockScreen.qml b/Widgets/LockScreen/LockScreen.qml index adf524c..9453590 100644 --- a/Widgets/LockScreen/LockScreen.qml +++ b/Widgets/LockScreen/LockScreen.qml @@ -152,21 +152,21 @@ WlSessionLock { ColumnLayout { anchors.centerIn: parent spacing: 30 - width: Math.min(parent.width * 0.8, 400 * Theme.scale(Screen)) + width: Math.min(parent.width * 0.8, 400 * Theme.scale(screen)) Rectangle { Layout.alignment: Qt.AlignHCenter - width: 80 * Theme.scale(Screen) - height: 80 * Theme.scale(Screen) - radius: 40 * Theme.scale(Screen) + width: 80 * Theme.scale(screen) + height: 80 * Theme.scale(screen) + radius: 40 color: Theme.accentPrimary Rectangle { anchors.fill: parent color: "transparent" - radius: 40 * Theme.scale(Screen) + radius: 40 border.color: Theme.accentPrimary - border.width: 3 * Theme.scale(Screen) + border.width: 3 * Theme.scale(screen) z: 2 } @@ -183,28 +183,28 @@ WlSessionLock { Layout.alignment: Qt.AlignHCenter text: Quickshell.env("USER") font.family: Theme.fontFamily - font.pixelSize: 24 * Theme.scale(Screen) + font.pixelSize: 24 * Theme.scale(screen) font.weight: Font.Medium color: Theme.textPrimary } Rectangle { Layout.fillWidth: true - height: 50 * Theme.scale(Screen) - radius: 25 * Theme.scale(Screen) + height: 50 * Theme.scale(screen) + radius: 25 color: Theme.surface opacity: passwordInput.activeFocus ? 0.8 : 0.3 border.color: passwordInput.activeFocus ? Theme.accentPrimary : Theme.outline - border.width: 2 * Theme.scale(Screen) + border.width: 2 * Theme.scale(screen) TextInput { id: passwordInput anchors.fill: parent - anchors.margins: 15 * Theme.scale(Screen) + anchors.margins: 15 * Theme.scale(screen) verticalAlignment: TextInput.AlignVCenter horizontalAlignment: TextInput.AlignHCenter font.family: Theme.fontFamily - font.pixelSize: 16 * Theme.scale(Screen) + font.pixelSize: 16 * Theme.scale(screen) color: Theme.textPrimary echoMode: TextInput.Password passwordCharacter: "●" @@ -218,7 +218,7 @@ WlSessionLock { text: "Enter password..." color: Theme.textSecondary font.family: Theme.fontFamily - font.pixelSize: 16 * Theme.scale(Screen) + font.pixelSize: 16 * Theme.scale(screen) visible: !passwordInput.text && !passwordInput.activeFocus } @@ -238,9 +238,9 @@ WlSessionLock { id: errorMessageRect Layout.alignment: Qt.AlignHCenter width: parent.width * 0.8 - height: 44 * Theme.scale(Screen) + height: 44 * Theme.scale(screen) color: Theme.overlay - radius: 20 * Theme.scale(Screen) + radius: 18 visible: lock.errorMessage !== "" Text { @@ -248,7 +248,7 @@ WlSessionLock { text: lock.errorMessage color: Theme.error font.family: Theme.fontFamily - font.pixelSize: 14 * Theme.scale(Screen) + font.pixelSize: 14 * Theme.scale(screen) opacity: 1 visible: lock.errorMessage !== "" } @@ -256,13 +256,13 @@ WlSessionLock { Rectangle { Layout.alignment: Qt.AlignHCenter - width: 120 * Theme.scale(Screen) - height: 44 * Theme.scale(Screen) - radius: 20 * Theme.scale(Screen) + width: 120 * Theme.scale(screen) + height: 44 * Theme.scale(screen) + radius: 18 opacity: unlockButtonArea.containsMouse ? 0.8 : 0.5 color: unlockButtonArea.containsMouse ? Theme.accentPrimary : Theme.surface border.color: Theme.accentPrimary - border.width: 2 * Theme.scale(Screen) + border.width: 2 * Theme.scale(screen) enabled: !lock.authenticating Text { @@ -270,7 +270,7 @@ WlSessionLock { anchors.centerIn: parent text: lock.authenticating ? "..." : "Unlock" font.family: Theme.fontFamily - font.pixelSize: 16 * Theme.scale(Screen) + font.pixelSize: 16 * Theme.scale(screen) font.bold: true color: unlockButtonArea.containsMouse ? Theme.onAccent : Theme.accentPrimary } @@ -295,12 +295,12 @@ WlSessionLock { } Rectangle { - width: infoColumn.width + 32 * Theme.scale(Screen) - height: infoColumn.height + 8 * Theme.scale(Screen) + width: infoColumn.width + 32 * Theme.scale(screen) + height: infoColumn.height + 8 * Theme.scale(screen) color: (Theme.backgroundPrimary !== undefined && Theme.backgroundPrimary !== null) ? Theme.backgroundPrimary : "#222" anchors.horizontalCenter: parent.horizontalCenter - bottomLeftRadius: 20 * Theme.scale(Screen) - bottomRightRadius: 20 * Theme.scale(Screen) + bottomLeftRadius: 20 * Theme.scale(screen) + bottomRightRadius: 20 * Theme.scale(screen) ColumnLayout { id: infoColumn @@ -314,7 +314,7 @@ WlSessionLock { id: timeText text: Qt.formatDateTime(new Date(), "HH:mm") font.family: Theme.fontFamily - font.pixelSize: 48 * Theme.scale(Screen) + font.pixelSize: 48 * Theme.scale(screen) font.bold: true color: Theme.textPrimary horizontalAlignment: Text.AlignHCenter @@ -324,7 +324,7 @@ WlSessionLock { id: dateText text: Qt.formatDateTime(new Date(), "dddd, MMMM d") font.family: Theme.fontFamily - font.pixelSize: 16 * Theme.scale(Screen) + font.pixelSize: 16 * Theme.scale(screen) color: Theme.textSecondary opacity: 0.8 horizontalAlignment: Text.AlignHCenter @@ -340,7 +340,7 @@ WlSessionLock { Text { text: weatherData && weatherData.current_weather ? materialSymbolForCode(weatherData.current_weather.weathercode) : "cloud" font.family: "Material Symbols Outlined" - font.pixelSize: 28 * Theme.scale(Screen) + font.pixelSize: 28 * Theme.scale(screen) color: Theme.accentPrimary verticalAlignment: Text.AlignVCenter } @@ -348,7 +348,7 @@ WlSessionLock { Text { text: weatherData && weatherData.current_weather ? ((Settings.settings.useFahrenheit !== undefined ? Settings.settings.useFahrenheit : false) ? `${Math.round(weatherData.current_weather.temperature * 9 / 5 + 32)}°F` : `${Math.round(weatherData.current_weather.temperature)}°C`) : ((Settings.settings.useFahrenheit !== undefined ? Settings.settings.useFahrenheit : false) ? "--°F" : "--°C") font.family: Theme.fontFamily - font.pixelSize: 18 * Theme.scale(Screen) + font.pixelSize: 18 * Theme.scale(screen) color: Theme.textSecondary verticalAlignment: Text.AlignVCenter } @@ -359,7 +359,7 @@ WlSessionLock { color: Theme.error visible: weatherError !== "" font.family: Theme.fontFamily - font.pixelSize: 10 * Theme.scale(Screen) + font.pixelSize: 10 * Theme.scale(screen) horizontalAlignment: Text.AlignHCenter Layout.alignment: Qt.AlignHCenter } @@ -401,12 +401,12 @@ WlSessionLock { spacing: 12 Rectangle { - width: 48 * Theme.scale(Screen) - height: 48 * Theme.scale(Screen) - radius: 24 * Theme.scale(Screen) + width: 48 * Theme.scale(screen) + height: 48 * Theme.scale(screen) + radius: 24 color: shutdownArea.containsMouse ? Theme.error : "transparent" border.color: Theme.error - border.width: 1 * Theme.scale(Screen) + border.width: 1 * Theme.scale(screen) MouseArea { id: shutdownArea @@ -421,18 +421,18 @@ WlSessionLock { anchors.centerIn: parent text: "power_settings_new" font.family: "Material Symbols Outlined" - font.pixelSize: 24 * Theme.scale(Screen) + font.pixelSize: 24 * Theme.scale(screen) color: shutdownArea.containsMouse ? Theme.onAccent : Theme.error } } Rectangle { - width: 48 * Theme.scale(Screen) - height: 48 * Theme.scale(Screen) - radius: 24 * Theme.scale(Screen) + width: 48 * Theme.scale(screen) + height: 48 * Theme.scale(screen) + radius: 24 color: rebootArea.containsMouse ? Theme.accentPrimary : "transparent" border.color: Theme.accentPrimary - border.width: 1 * Theme.scale(Screen) + border.width: 1 * Theme.scale(screen) MouseArea { id: rebootArea @@ -447,18 +447,18 @@ WlSessionLock { anchors.centerIn: parent text: "refresh" font.family: "Material Symbols Outlined" - font.pixelSize: 24 * Theme.scale(Screen) + font.pixelSize: 24 * Theme.scale(screen) color: rebootArea.containsMouse ? Theme.onAccent : Theme.accentPrimary } } Rectangle { - width: 48 * Theme.scale(Screen) - height: 48 * Theme.scale(Screen) - radius: 24 * Theme.scale(Screen) + width: 48 * Theme.scale(screen) + height: 48 * Theme.scale(screen) + radius: 24 color: logoutArea.containsMouse ? Theme.accentSecondary : "transparent" border.color: Theme.accentSecondary - border.width: 1 * Theme.scale(Screen) + border.width: 1 * Theme.scale(screen) MouseArea { id: logoutArea @@ -473,7 +473,7 @@ WlSessionLock { anchors.centerIn: parent text: "exit_to_app" font.family: "Material Symbols Outlined" - font.pixelSize: 24 * Theme.scale(Screen) + font.pixelSize: 24 * Theme.scale(screen) color: logoutArea.containsMouse ? Theme.onAccent : Theme.accentSecondary } } diff --git a/Widgets/SettingsWindow/SettingsWindow.qml b/Widgets/SettingsWindow/SettingsWindow.qml index 9884d3a..f816653 100644 --- a/Widgets/SettingsWindow/SettingsWindow.qml +++ b/Widgets/SettingsWindow/SettingsWindow.qml @@ -148,8 +148,8 @@ PanelWithOverlay { Rectangle { id: settingsWindowRect - implicitWidth: Quickshell.screens.length > 0 ? Math.min(Quickshell.screens[0].width * 2 / 3, 1200) * Theme.scale(Screen) : 600 * Theme.scale(Screen) - implicitHeight: Quickshell.screens.length > 0 ? Math.min(Quickshell.screens[0].height * 2 / 3, 800) * Theme.scale(Screen) : 400 * Theme.scale(Screen) + implicitWidth: Quickshell.screens.length > 0 ? Math.min(Quickshell.screens[0].width * 2 / 3, 1200) * Theme.scale(screen) : 600 * Theme.scale(screen) + implicitHeight: Quickshell.screens.length > 0 ? Math.min(Quickshell.screens[0].height * 2 / 3, 800) * Theme.scale(screen) : 400 * Theme.scale(screen) visible: parent.visible color: "transparent" // Center the settings window on screen @@ -166,9 +166,9 @@ PanelWithOverlay { color: Theme.backgroundPrimary anchors.fill: parent - radius: 20 * Theme.scale(Screen) + radius: 18 border.color: Theme.outline - border.width: 1 * Theme.scale(Screen) + border.width: 1 * Theme.scale(screen) MultiEffect { source: background @@ -188,8 +188,8 @@ PanelWithOverlay { clip: true color: Theme.backgroundPrimary - topRightRadius: 20 * Theme.scale(Screen) - bottomRightRadius: 20 * Theme.scale(Screen) + topRightRadius: 20 * Theme.scale(screen) + bottomRightRadius: 20 * Theme.scale(screen) anchors { left: tabs.right @@ -202,7 +202,7 @@ PanelWithOverlay { Rectangle { id: headerArea - height: 48 * Theme.scale(Screen) + height: 48 * Theme.scale(screen) color: "transparent" anchors { @@ -214,13 +214,13 @@ PanelWithOverlay { RowLayout { anchors.fill: parent - spacing: 12 * Theme.scale(Screen) + spacing: 12 * Theme.scale(screen) Text { id: tabName text: wallpaperSelector.visible ? "Select Wallpaper" : (activeTabIndex === 0 ? "General" : activeTabIndex === 1 ? "Bar" : activeTabIndex === 2 ? "Time & Weather" : activeTabIndex === 3 ? "Screen Recorder" : activeTabIndex === 4 ? "Network" : activeTabIndex === 5 ? "Display" : activeTabIndex === 6 ? "Wallpaper" : activeTabIndex === 7 ? "Misc" : activeTabIndex === 8 ? "About" : "General") - font.pixelSize: 18 * Theme.scale(Screen) + font.pixelSize: 18 * Theme.scale(screen) font.bold: true color: Theme.textPrimary Layout.fillWidth: true @@ -228,29 +228,29 @@ PanelWithOverlay { // Wallpaper Selection Button (only visible on Wallpaper tab) Rectangle { - width: 160 * Theme.scale(Screen) - height: 32 * Theme.scale(Screen) - radius: 16 * Theme.scale(Screen) + width: 160 * Theme.scale(screen) + height: 32 * Theme.scale(screen) + radius: 16 color: wallpaperButtonArea.containsMouse ? Theme.accentPrimary : "transparent" border.color: Theme.accentPrimary - border.width: 1 * Theme.scale(Screen) + border.width: 1 * Theme.scale(screen) visible: activeTabIndex === 6 // Wallpaper tab index Row { anchors.centerIn: parent - spacing: 6 * Theme.scale(Screen) + spacing: 6 * Theme.scale(screen) Text { text: "image" font.family: wallpaperButtonArea.containsMouse ? "Material Symbols Rounded" : "Material Symbols Outlined" - font.pixelSize: 16 * Theme.scale(Screen) + font.pixelSize: 16 * Theme.scale(screen) color: wallpaperButtonArea.containsMouse ? Theme.onAccent : Theme.accentPrimary anchors.verticalCenter: parent.verticalCenter } Text { text: "Select Wallpaper" - font.pixelSize: 13 * Theme.scale(Screen) + font.pixelSize: 13 * Theme.scale(screen) font.bold: true color: wallpaperButtonArea.containsMouse ? Theme.onAccent : Theme.accentPrimary anchors.verticalCenter: parent.verticalCenter @@ -273,18 +273,18 @@ PanelWithOverlay { } Rectangle { - width: 32 * Theme.scale(Screen) - height: 32 * Theme.scale(Screen) - radius: 16 * Theme.scale(Screen) + width: 32 * Theme.scale(screen) + height: 32 * Theme.scale(screen) + radius: 16 color: closeButtonArea.containsMouse ? Theme.accentPrimary : "transparent" border.color: Theme.accentPrimary - border.width: 1 * Theme.scale(Screen) + border.width: 1 * Theme.scale(screen) Text { anchors.centerIn: parent text: "close" font.family: closeButtonArea.containsMouse ? "Material Symbols Rounded" : "Material Symbols Outlined" - font.pixelSize: 18 * Theme.scale(Screen) + font.pixelSize: 18 * Theme.scale(screen) color: closeButtonArea.containsMouse ? Theme.onAccent : Theme.accentPrimary } @@ -311,7 +311,7 @@ PanelWithOverlay { } Rectangle { - height: 1 * Theme.scale(Screen) + height: 1 * Theme.scale(screen) color: Theme.outline opacity: 0.3 @@ -360,16 +360,16 @@ PanelWithOverlay { color: Theme.surface width: parent.width * 0.25 height: settingsWindowRect.height - topLeftRadius: 20 * Theme.scale(Screen) - bottomLeftRadius: 20 * Theme.scale(Screen) + topLeftRadius: 20 * Theme.scale(screen) + bottomLeftRadius: 20 * Theme.scale(screen) border.color: Theme.outline - border.width: 1 * Theme.scale(Screen) + border.width: 1 * Theme.scale(screen) Column { width: parent.width - spacing: 0 * Theme.scale(Screen) - topPadding: 8 * Theme.scale(Screen) - bottomPadding: 8 * Theme.scale(Screen) + spacing: 0 * Theme.scale(screen) + topPadding: 8 * Theme.scale(screen) + bottomPadding: 8 * Theme.scale(screen) Repeater { id: repeater @@ -405,21 +405,21 @@ PanelWithOverlay { delegate: Rectangle { width: tabs.width - height: 48 * Theme.scale(Screen) + height: 48 * Theme.scale(screen) color: "transparent" RowLayout { anchors.fill: parent - spacing: 8 * Theme.scale(Screen) + spacing: 8 * Theme.scale(screen) Rectangle { id: activeIndicator - Layout.leftMargin: 8 * Theme.scale(Screen) - Layout.preferredWidth: 3 * Theme.scale(Screen) - Layout.preferredHeight: 24 * Theme.scale(Screen) + Layout.leftMargin: 8 * Theme.scale(screen) + Layout.preferredWidth: 3 * Theme.scale(screen) + Layout.preferredHeight: 24 * Theme.scale(screen) Layout.alignment: Qt.AlignVCenter - radius: 2 * Theme.scale(Screen) + radius: 2 color: Theme.accentPrimary opacity: index === activeTabIndex ? 1 : 0 @@ -437,12 +437,12 @@ PanelWithOverlay { text: modelData.icon font.family: "Material Symbols Outlined" - font.pixelSize: 24 * Theme.scale(Screen) + font.pixelSize: 24 * Theme.scale(screen) color: index === activeTabIndex ? Theme.accentPrimary : Theme.textPrimary opacity: index === activeTabIndex ? 1 : 0.8 - Layout.leftMargin: 20 * Theme.scale(Screen) - Layout.preferredWidth: 24 * Theme.scale(Screen) - Layout.preferredHeight: 24 * Theme.scale(Screen) + Layout.leftMargin: 20 * Theme.scale(screen) + Layout.preferredWidth: 24 * Theme.scale(screen) + Layout.preferredHeight: 24 * Theme.scale(screen) Layout.alignment: Qt.AlignVCenter horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter @@ -453,14 +453,14 @@ PanelWithOverlay { id: label text: modelData.text - font.pixelSize: 16 * Theme.scale(Screen) + font.pixelSize: 16 * Theme.scale(screen) color: index === activeTabIndex ? Theme.accentPrimary : (tabMouseArea.containsMouse ? Theme.accentPrimary : Theme.textSecondary) font.weight: index === activeTabIndex ? Font.DemiBold : (tabMouseArea.containsMouse ? Font.DemiBold : Font.Normal) Layout.fillWidth: true - Layout.preferredHeight: 24 * Theme.scale(Screen) + Layout.preferredHeight: 24 * Theme.scale(screen) Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter - Layout.leftMargin: 4 * Theme.scale(Screen) - Layout.rightMargin: 16 * Theme.scale(Screen) + Layout.leftMargin: 4 * Theme.scale(screen) + Layout.rightMargin: 16 * Theme.scale(screen) verticalAlignment: Text.AlignVCenter } @@ -484,7 +484,7 @@ PanelWithOverlay { Rectangle { width: parent.width - height: 1 * Theme.scale(Screen) + height: 1 * Theme.scale(screen) color: Theme.outline opacity: 0.6 visible: index < (repeater.count - 1) diff --git a/Widgets/SettingsWindow/Tabs/About.qml b/Widgets/SettingsWindow/Tabs/About.qml index a1b3244..35a6170 100644 --- a/Widgets/SettingsWindow/Tabs/About.qml +++ b/Widgets/SettingsWindow/Tabs/About.qml @@ -168,19 +168,19 @@ ColumnLayout { Text { text: "Noctalia: quiet by design" - font.pixelSize: 24 * Theme.scale(Screen) + font.pixelSize: 24 * Theme.scale(screen) font.bold: true color: Theme.textPrimary Layout.alignment: Qt.AlignCenter - Layout.bottomMargin: 8 * Theme.scale(Screen) + Layout.bottomMargin: 8 * Theme.scale(screen) } Text { text: "It may just be another quickshell setup but it won't get in your way." - font.pixelSize: 14 * Theme.scale(Screen) + font.pixelSize: 14 * Theme.scale(screen) color: Theme.textSecondary Layout.alignment: Qt.AlignCenter - Layout.bottomMargin: 16 * Theme.scale(Screen) + Layout.bottomMargin: 16 * Theme.scale(screen) } GridLayout { @@ -191,28 +191,28 @@ ColumnLayout { Text { text: "Latest Version:" - font.pixelSize: 16 * Theme.scale(Screen) + font.pixelSize: 16 * Theme.scale(screen) color: Theme.textSecondary Layout.alignment: Qt.AlignRight } Text { text: root.latestVersion - font.pixelSize: 16 * Theme.scale(Screen) + font.pixelSize: 16 * Theme.scale(screen) color: Theme.textPrimary font.bold: true } Text { text: "Installed Version:" - font.pixelSize: 16 * Theme.scale(Screen) + font.pixelSize: 16 * Theme.scale(screen) color: Theme.textSecondary Layout.alignment: Qt.AlignRight } Text { text: root.currentVersion - font.pixelSize: 16 * Theme.scale(Screen) + font.pixelSize: 16 * Theme.scale(screen) color: Theme.textPrimary font.bold: true } @@ -254,7 +254,7 @@ ColumnLayout { Text { text: "system_update" font.family: "Material Symbols Outlined" - font.pixelSize: 18 * Theme.scale(Screen) + font.pixelSize: 18 * Theme.scale(screen) color: updateArea.containsMouse ? Theme.backgroundPrimary : Theme.accentPrimary } @@ -262,7 +262,7 @@ ColumnLayout { id: updateText text: "Download latest release" - font.pixelSize: 14 * Theme.scale(Screen) + font.pixelSize: 14 * Theme.scale(screen) color: updateArea.containsMouse ? Theme.backgroundPrimary : Theme.accentPrimary } @@ -305,14 +305,14 @@ ColumnLayout { Text { text: "Contributors" - font.pixelSize: 18 * Theme.scale(Screen) + font.pixelSize: 18 * Theme.scale(screen) font.bold: true color: Theme.textPrimary } Text { text: "(" + root.contributors.length + ")" - font.pixelSize: 14 * Theme.scale(Screen) + font.pixelSize: 14 * Theme.scale(screen) color: Theme.textSecondary } @@ -385,7 +385,7 @@ ColumnLayout { anchors.centerIn: parent text: "person" font.family: "Material Symbols Outlined" - font.pixelSize: 24 * Theme.scale(Screen) + font.pixelSize: 24 * Theme.scale(screen) color: contributorArea.containsMouse ? Theme.backgroundPrimary : Theme.textPrimary visible: !avatarImage.source || avatarImage.status !== Image.Ready } @@ -399,7 +399,7 @@ ColumnLayout { Text { text: modelData.login || "Unknown" - font.pixelSize: 13 * Theme.scale(Screen) + font.pixelSize: 13 * Theme.scale(screen) color: contributorArea.containsMouse ? Theme.backgroundPrimary : Theme.textPrimary elide: Text.ElideRight Layout.fillWidth: true @@ -407,7 +407,7 @@ ColumnLayout { Text { text: (modelData.contributions || 0) + " commits" - font.pixelSize: 11 * Theme.scale(Screen) + font.pixelSize: 11 * Theme.scale(screen) color: contributorArea.containsMouse ? Theme.backgroundPrimary : Theme.textSecondary } diff --git a/Widgets/SettingsWindow/Tabs/Bar.qml b/Widgets/SettingsWindow/Tabs/Bar.qml index f37af0f..eb54b83 100644 --- a/Widgets/SettingsWindow/Tabs/Bar.qml +++ b/Widgets/SettingsWindow/Tabs/Bar.qml @@ -28,10 +28,10 @@ ColumnLayout { Text { text: "Elements" - font.pixelSize: 18 * Theme.scale(Screen) + font.pixelSize: 18 * Theme.scale(screen) font.bold: true color: Theme.textPrimary - Layout.bottomMargin: 16 * Theme.scale(Screen) + Layout.bottomMargin: 16 * Theme.scale(screen) } ToggleOption { diff --git a/Widgets/SettingsWindow/Tabs/Components/UnitSelector.qml b/Widgets/SettingsWindow/Tabs/Components/UnitSelector.qml index 5ef776d..019b969 100644 --- a/Widgets/SettingsWindow/Tabs/Components/UnitSelector.qml +++ b/Widgets/SettingsWindow/Tabs/Components/UnitSelector.qml @@ -7,20 +7,20 @@ import qs.Settings Rectangle { id: root - width: 64 * Theme.scale(Screen) - height: 32 * Theme.scale(Screen) - radius: 16 * Theme.scale(Screen) + width: 64 * Theme.scale(screen) + height: 32 * Theme.scale(screen) + radius: 16 color: Theme.surfaceVariant border.color: Theme.outline - border.width: 1 * Theme.scale(Screen) + border.width: 1 * Theme.scale(screen) property bool useFahrenheit: Settings.settings.useFahrenheit Rectangle { id: slider - width: parent.width / 2 - 4 * Theme.scale(Screen) - height: parent.height - 4 * Theme.scale(Screen) - radius: 14 * Theme.scale(Screen) + width: parent.width / 2 - 4 * Theme.scale(screen) + height: parent.height - 4 * Theme.scale(screen) + radius: 14 color: Theme.accentPrimary x: 2 + (useFahrenheit ? parent.width / 2 : 0) y: 2 @@ -46,7 +46,7 @@ Rectangle { Text { anchors.centerIn: parent text: "°C" - font.pixelSize: 13 * Theme.scale(Screen) + font.pixelSize: 13 * Theme.scale(screen) font.bold: !useFahrenheit color: !useFahrenheit ? Theme.onAccent : Theme.textPrimary @@ -74,7 +74,7 @@ Rectangle { Text { anchors.centerIn: parent text: "°F" - font.pixelSize: 13 * Theme.scale(Screen) + font.pixelSize: 13 * Theme.scale(screen) font.bold: useFahrenheit color: useFahrenheit ? Theme.onAccent : Theme.textPrimary diff --git a/Widgets/SettingsWindow/Tabs/Components/WallpaperSelector.qml b/Widgets/SettingsWindow/Tabs/Components/WallpaperSelector.qml index 74486e4..8fee56c 100644 --- a/Widgets/SettingsWindow/Tabs/Components/WallpaperSelector.qml +++ b/Widgets/SettingsWindow/Tabs/Components/WallpaperSelector.qml @@ -74,7 +74,7 @@ Rectangle { id: wallpaperGrid anchors.fill: parent - cellWidth: Math.max(120 * Theme.scale(Screen), (parent.width / 3) - 12 * Theme.scale(Screen)) + cellWidth: Math.max(120 * Theme.scale(screen), (parent.width / 3) - 12 * Theme.scale(screen)) cellHeight: cellWidth * 0.6 model: WallpaperManager.wallpaperList cacheBuffer: 64 @@ -84,8 +84,8 @@ Rectangle { bottomMargin: 8 delegate: Item { - width: wallpaperGrid.cellWidth - 8 * Theme.scale(Screen) - height: wallpaperGrid.cellHeight - 8 * Theme.scale(Screen) + width: wallpaperGrid.cellWidth - 8 * Theme.scale(screen) + height: wallpaperGrid.cellHeight - 8 * Theme.scale(screen) Rectangle { id: wallpaperItem @@ -93,9 +93,9 @@ Rectangle { anchors.fill: parent anchors.margins: 3 color: Theme.surface - radius: 12 * Theme.scale(Screen) + radius: 12 border.color: Settings.settings.currentWallpaper === modelData ? Theme.accentPrimary : Theme.outline - border.width: 2 * Theme.scale(Screen) + border.width: 2 * Theme.scale(screen) Image { id: wallpaperImage @@ -108,8 +108,8 @@ Rectangle { cache: true smooth: true mipmap: true - sourceSize.width: Math.min(width, 480 * Theme.scale(Screen)) - sourceSize.height: Math.min(height, 270 * Theme.scale(Screen)) + sourceSize.width: Math.min(width, 480 * Theme.scale(screen)) + sourceSize.height: Math.min(height, 270 * Theme.scale(screen)) opacity: (wallpaperImage.status == Image.Ready) ? 1 : 0 // Apply circular mask for rounded corners layer.enabled: true @@ -139,7 +139,7 @@ Rectangle { Rectangle { width: wallpaperImage.width height: wallpaperImage.height - radius: 12 * Theme.scale(Screen) + radius: 12 } } diff --git a/Widgets/SettingsWindow/Tabs/Display.qml b/Widgets/SettingsWindow/Tabs/Display.qml index 85e2623..6ec4236 100644 --- a/Widgets/SettingsWindow/Tabs/Display.qml +++ b/Widgets/SettingsWindow/Tabs/Display.qml @@ -43,10 +43,10 @@ ColumnLayout { Text { text: "Monitor Selection" - font.pixelSize: 18 * Theme.scale(Screen) + font.pixelSize: 18 * Theme.scale(screen) font.bold: true color: Theme.textPrimary - Layout.bottomMargin: 16 * Theme.scale(Screen) + Layout.bottomMargin: 16 * Theme.scale(screen) } ColumnLayout { @@ -65,14 +65,14 @@ ColumnLayout { Text { text: "Bar Monitors" - font.pixelSize: 13 * Theme.scale(Screen) + font.pixelSize: 13 * Theme.scale(screen) font.bold: true color: Theme.textPrimary } Text { text: "Select which monitors to display the top panel/bar on" - font.pixelSize: 12 * Theme.scale(Screen) + font.pixelSize: 12 * Theme.scale(screen) color: Theme.textSecondary wrapMode: Text.WordWrap Layout.fillWidth: true @@ -112,14 +112,14 @@ ColumnLayout { Text { text: barCheckbox.isChecked ? "check" : "" font.family: "Material Symbols Outlined" - font.pixelSize: 14 * Theme.scale(Screen) + font.pixelSize: 14 * Theme.scale(screen) color: barCheckbox.isChecked ? Theme.onAccent : Theme.textSecondary visible: barCheckbox.isChecked } Text { text: modelData.name || "Unknown" - font.pixelSize: 12 * Theme.scale(Screen) + font.pixelSize: 12 * Theme.scale(screen) color: barCheckbox.isChecked ? Theme.onAccent : Theme.textPrimary } } @@ -169,14 +169,14 @@ ColumnLayout { Text { text: "Dock Monitors" - font.pixelSize: 13 * Theme.scale(Screen) + font.pixelSize: 13 * Theme.scale(screen) font.bold: true color: Theme.textPrimary } Text { text: "Select which monitors to display the application dock on" - font.pixelSize: 12 * Theme.scale(Screen) + font.pixelSize: 12 * Theme.scale(screen) color: Theme.textSecondary wrapMode: Text.WordWrap Layout.fillWidth: true @@ -216,14 +216,14 @@ ColumnLayout { Text { text: dockCheckbox.isChecked ? "check" : "" font.family: "Material Symbols Outlined" - font.pixelSize: 14 * Theme.scale(Screen) + font.pixelSize: 14 * Theme.scale(screen) color: dockCheckbox.isChecked ? Theme.onAccent : Theme.textSecondary visible: dockCheckbox.isChecked } Text { text: modelData.name || "Unknown" - font.pixelSize: 12 * Theme.scale(Screen) + font.pixelSize: 12 * Theme.scale(screen) color: dockCheckbox.isChecked ? Theme.onAccent : Theme.textPrimary } } @@ -276,14 +276,14 @@ ColumnLayout { Text { text: "Notification Monitors" - font.pixelSize: 13 * Theme.scale(Screen) + font.pixelSize: 13 * Theme.scale(screen) font.bold: true color: Theme.textPrimary } Text { text: "Select which monitors to display system notifications on" - font.pixelSize: 12 * Theme.scale(Screen) + font.pixelSize: 12 * Theme.scale(screen) color: Theme.textSecondary wrapMode: Text.WordWrap Layout.fillWidth: true @@ -323,14 +323,14 @@ ColumnLayout { Text { text: notificationCheckbox.isChecked ? "check" : "" font.family: "Material Symbols Outlined" - font.pixelSize: 14 * Theme.scale(Screen) + font.pixelSize: 14 * Theme.scale(screen) color: notificationCheckbox.isChecked ? Theme.onAccent : Theme.textSecondary visible: notificationCheckbox.isChecked } Text { text: modelData.name || "Unknown" - font.pixelSize: 12 * Theme.scale(Screen) + font.pixelSize: 12 * Theme.scale(screen) color: notificationCheckbox.isChecked ? Theme.onAccent : Theme.textPrimary } } diff --git a/Widgets/SettingsWindow/Tabs/General.qml b/Widgets/SettingsWindow/Tabs/General.qml index 5600558..d75687e 100644 --- a/Widgets/SettingsWindow/Tabs/General.qml +++ b/Widgets/SettingsWindow/Tabs/General.qml @@ -28,23 +28,23 @@ ColumnLayout { Text { text: "Profile" - font.pixelSize: 18 * Theme.scale(Screen) + font.pixelSize: 18 * Theme.scale(screen) font.bold: true color: Theme.textPrimary - Layout.bottomMargin: 16 * Theme.scale(Screen) + Layout.bottomMargin: 16 * Theme.scale(screen) } Text { text: "Profile Image" - font.pixelSize: 13 * Theme.scale(Screen) + font.pixelSize: 13 * Theme.scale(screen) font.bold: true color: Theme.textPrimary - Layout.bottomMargin: 4 * Theme.scale(Screen) + Layout.bottomMargin: 4 * Theme.scale(screen) } Text { text: "Your profile picture displayed in various places throughout the shell" - font.pixelSize: 12 * Theme.scale(Screen) + font.pixelSize: 12 * Theme.scale(screen) color: Theme.textSecondary wrapMode: Text.WordWrap Layout.fillWidth: true @@ -52,20 +52,20 @@ ColumnLayout { } RowLayout { - spacing: 8 * Theme.scale(Screen) + spacing: 8 * Theme.scale(screen) Layout.fillWidth: true Rectangle { - width: 48 * Theme.scale(Screen) - height: 48 * Theme.scale(Screen) - radius: 24 * Theme.scale(Screen) + width: 48 * Theme.scale(screen) + height: 48 * Theme.scale(screen) + radius: 24 Rectangle { anchors.fill: parent color: "transparent" - radius: 24 * Theme.scale(Screen) + radius: 24 border.color: profileImageInput.activeFocus ? Theme.accentPrimary : Theme.outline - border.width: 2 * Theme.scale(Screen) + border.width: 2 * Theme.scale(screen) z: 2 } @@ -76,22 +76,22 @@ ColumnLayout { Rectangle { Layout.fillWidth: true - Layout.preferredHeight: 40 * Theme.scale(Screen) - radius: 16 * Theme.scale(Screen) + Layout.preferredHeight: 40 * Theme.scale(screen) + radius: 16 color: Theme.surfaceVariant border.color: profileImageInput.activeFocus ? Theme.accentPrimary : Theme.outline - border.width: 1 * Theme.scale(Screen) + border.width: 1 * Theme.scale(screen) TextInput { id: profileImageInput anchors.fill: parent - anchors.leftMargin: 12 * Theme.scale(Screen) - anchors.rightMargin: 12 * Theme.scale(Screen) - anchors.topMargin: 6 * Theme.scale(Screen) - anchors.bottomMargin: 6 * Theme.scale(Screen) + anchors.leftMargin: 12 * Theme.scale(screen) + anchors.rightMargin: 12 * Theme.scale(screen) + anchors.topMargin: 6 * Theme.scale(screen) + anchors.bottomMargin: 6 * Theme.scale(screen) text: Settings.settings.profileImage - font.pixelSize: 13 * Theme.scale(Screen) + font.pixelSize: 13 * Theme.scale(screen) color: Theme.textPrimary verticalAlignment: TextInput.AlignVCenter clip: true @@ -117,19 +117,19 @@ ColumnLayout { // Separator Rectangle { Layout.fillWidth: true - Layout.topMargin: 26 * Theme.scale(Screen) - Layout.bottomMargin: 18 * Theme.scale(Screen) - height: 1 * Theme.scale(Screen) + Layout.topMargin: 26 * Theme.scale(screen) + Layout.bottomMargin: 18 * Theme.scale(screen) + height: 1 * Theme.scale(screen) color: Theme.outline opacity: 0.3 } Text { text: "User Interface" - font.pixelSize: 18 * Theme.scale(Screen) + font.pixelSize: 18 * Theme.scale(screen) font.bold: true color: Theme.textPrimary - Layout.bottomMargin: 16 * Theme.scale(Screen) + Layout.bottomMargin: 16 * Theme.scale(screen) } ToggleOption { diff --git a/Widgets/SettingsWindow/Tabs/Misc.qml b/Widgets/SettingsWindow/Tabs/Misc.qml index 4281e25..0d9c15e 100644 --- a/Widgets/SettingsWindow/Tabs/Misc.qml +++ b/Widgets/SettingsWindow/Tabs/Misc.qml @@ -28,10 +28,10 @@ ColumnLayout { Text { text: "Media" - font.pixelSize: 18 * Theme.scale(Screen) + font.pixelSize: 18 * Theme.scale(screen) font.bold: true color: Theme.textPrimary - Layout.bottomMargin: 16 * Theme.scale(Screen) + Layout.bottomMargin: 16 * Theme.scale(screen) } ColumnLayout { @@ -40,14 +40,14 @@ ColumnLayout { Text { text: "Visualizer Type" - font.pixelSize: 13 * Theme.scale(Screen) + font.pixelSize: 13 * Theme.scale(screen) font.bold: true color: Theme.textPrimary } Text { text: "Choose the style of the audio visualizer" - font.pixelSize: 12 * Theme.scale(Screen) + font.pixelSize: 12 * Theme.scale(screen) color: Theme.textSecondary wrapMode: Text.WordWrap Layout.fillWidth: true diff --git a/Widgets/SettingsWindow/Tabs/Network.qml b/Widgets/SettingsWindow/Tabs/Network.qml index 84710a3..f3a0188 100644 --- a/Widgets/SettingsWindow/Tabs/Network.qml +++ b/Widgets/SettingsWindow/Tabs/Network.qml @@ -30,10 +30,10 @@ ColumnLayout { Text { text: "Wi-Fi" - font.pixelSize: 18 * Theme.scale(Screen) + font.pixelSize: 18 * Theme.scale(screen) font.bold: true color: Theme.textPrimary - Layout.bottomMargin: 16 * Theme.scale(Screen) + Layout.bottomMargin: 16 * Theme.scale(screen) } ToggleOption { @@ -58,10 +58,10 @@ ColumnLayout { Text { text: "Bluetooth" - font.pixelSize: 18 * Theme.scale(Screen) + font.pixelSize: 18 * Theme.scale(screen) font.bold: true color: Theme.textPrimary - Layout.bottomMargin: 16 * Theme.scale(Screen) + Layout.bottomMargin: 16 * Theme.scale(screen) } ToggleOption { diff --git a/Widgets/SettingsWindow/Tabs/ScreenRecorder.qml b/Widgets/SettingsWindow/Tabs/ScreenRecorder.qml index 166bf06..3d71359 100644 --- a/Widgets/SettingsWindow/Tabs/ScreenRecorder.qml +++ b/Widgets/SettingsWindow/Tabs/ScreenRecorder.qml @@ -34,7 +34,7 @@ ColumnLayout { ColumnLayout { // Text { // text: "Screen Recording" - // font.pixelSize: 18 * Theme.scale(Screen) + // font.pixelSize: 18 * Theme.scale(screen) // font.bold: true // color: Theme.textPrimary // Layout.bottomMargin: 8 @@ -49,14 +49,14 @@ ColumnLayout { Text { text: "Output Directory" - font.pixelSize: 13 * Theme.scale(Screen) + font.pixelSize: 13 * Theme.scale(screen) font.bold: true color: Theme.textPrimary } Text { text: "Directory where screen recordings will be saved" - font.pixelSize: 12 * Theme.scale(Screen) + font.pixelSize: 12 * Theme.scale(screen) color: Theme.textSecondary Layout.bottomMargin: 4 } @@ -78,7 +78,7 @@ ColumnLayout { anchors.topMargin: 6 anchors.bottomMargin: 6 text: Settings.settings.videoPath !== undefined ? Settings.settings.videoPath : "" - font.pixelSize: 13 * Theme.scale(Screen) + font.pixelSize: 13 * Theme.scale(screen) color: Theme.textPrimary verticalAlignment: TextInput.AlignVCenter clip: true @@ -108,14 +108,14 @@ ColumnLayout { Text { text: "Frame Rate" - font.pixelSize: 13 * Theme.scale(Screen) + font.pixelSize: 13 * Theme.scale(screen) font.bold: true color: Theme.textPrimary } Text { text: "Target frame rate for screen recordings (default: 60)" - font.pixelSize: 12 * Theme.scale(Screen) + font.pixelSize: 12 * Theme.scale(screen) color: Theme.textSecondary Layout.bottomMargin: 4 } @@ -144,7 +144,7 @@ ColumnLayout { contentItem: TextInput { text: frameRateSpinBox.textFromValue(frameRateSpinBox.value, frameRateSpinBox.locale) - font.pixelSize: 13 * Theme.scale(Screen) + font.pixelSize: 13 * Theme.scale(screen) color: Theme.textPrimary selectionColor: Theme.accentPrimary selectedTextColor: Theme.onAccent @@ -183,7 +183,7 @@ ColumnLayout { Text { text: "add" font.family: "Material Symbols Outlined" - font.pixelSize: 20 * Theme.scale(Screen) + font.pixelSize: 20 * Theme.scale(screen) color: Theme.textPrimary anchors.centerIn: parent } @@ -200,7 +200,7 @@ ColumnLayout { Text { text: "remove" font.family: "Material Symbols Outlined" - font.pixelSize: 20 * Theme.scale(Screen) + font.pixelSize: 20 * Theme.scale(screen) color: Theme.textPrimary anchors.centerIn: parent } @@ -218,14 +218,14 @@ ColumnLayout { Text { text: "Audio Source" - font.pixelSize: 13 * Theme.scale(Screen) + font.pixelSize: 13 * Theme.scale(screen) font.bold: true color: Theme.textPrimary } Text { text: "Audio source to capture during recording" - font.pixelSize: 12 * Theme.scale(Screen) + font.pixelSize: 12 * Theme.scale(screen) color: Theme.textSecondary Layout.bottomMargin: 4 } @@ -265,7 +265,7 @@ ColumnLayout { return audioSourceComboBox.currentText; } } - font.pixelSize: 13 * Theme.scale(Screen) + font.pixelSize: 13 * Theme.scale(screen) color: Theme.textPrimary verticalAlignment: Text.AlignVCenter elide: Text.ElideRight @@ -276,7 +276,7 @@ ColumnLayout { y: audioSourceComboBox.topPadding + (audioSourceComboBox.availableHeight - height) / 2 text: "arrow_drop_down" font.family: "Material Symbols Outlined" - font.pixelSize: 24 * Theme.scale(Screen) + font.pixelSize: 24 * Theme.scale(screen) color: Theme.textPrimary } @@ -323,7 +323,7 @@ ColumnLayout { return modelData; } } - font.pixelSize: 13 * Theme.scale(Screen) + font.pixelSize: 13 * Theme.scale(screen) color: Theme.textPrimary verticalAlignment: Text.AlignVCenter elide: Text.ElideRight @@ -346,14 +346,14 @@ ColumnLayout { Text { text: "Video Quality" - font.pixelSize: 13 * Theme.scale(Screen) + font.pixelSize: 13 * Theme.scale(screen) font.bold: true color: Theme.textPrimary } Text { text: "Higher quality results in larger file sizes" - font.pixelSize: 12 * Theme.scale(Screen) + font.pixelSize: 12 * Theme.scale(screen) color: Theme.textSecondary Layout.bottomMargin: 4 } @@ -395,7 +395,7 @@ ColumnLayout { return qualityComboBox.currentText; } } - font.pixelSize: 13 * Theme.scale(Screen) + font.pixelSize: 13 * Theme.scale(screen) color: Theme.textPrimary verticalAlignment: Text.AlignVCenter elide: Text.ElideRight @@ -406,7 +406,7 @@ ColumnLayout { y: qualityComboBox.topPadding + (qualityComboBox.availableHeight - height) / 2 text: "arrow_drop_down" font.family: "Material Symbols Outlined" - font.pixelSize: 24 * Theme.scale(Screen) + font.pixelSize: 24 * Theme.scale(screen) color: Theme.textPrimary } @@ -455,7 +455,7 @@ ColumnLayout { return modelData; } } - font.pixelSize: 13 * Theme.scale(Screen) + font.pixelSize: 13 * Theme.scale(screen) color: Theme.textPrimary verticalAlignment: Text.AlignVCenter elide: Text.ElideRight @@ -478,14 +478,14 @@ ColumnLayout { Text { text: "Video Codec" - font.pixelSize: 13 * Theme.scale(Screen) + font.pixelSize: 13 * Theme.scale(screen) font.bold: true color: Theme.textPrimary } Text { text: "Different codecs offer different compression and compatibility" - font.pixelSize: 12 * Theme.scale(Screen) + font.pixelSize: 12 * Theme.scale(screen) color: Theme.textSecondary Layout.bottomMargin: 4 } @@ -514,7 +514,7 @@ ColumnLayout { leftPadding: 12 rightPadding: codecComboBox.indicator.width + codecComboBox.spacing text: codecComboBox.currentText.toUpperCase() - font.pixelSize: 13 * Theme.scale(Screen) + font.pixelSize: 13 * Theme.scale(screen) color: Theme.textPrimary verticalAlignment: Text.AlignVCenter elide: Text.ElideRight @@ -525,7 +525,7 @@ ColumnLayout { y: codecComboBox.topPadding + (codecComboBox.availableHeight - height) / 2 text: "arrow_drop_down" font.family: "Material Symbols Outlined" - font.pixelSize: 24 * Theme.scale(Screen) + font.pixelSize: 24 * Theme.scale(screen) color: Theme.textPrimary } @@ -561,7 +561,7 @@ ColumnLayout { contentItem: Text { text: modelData.toUpperCase() - font.pixelSize: 13 * Theme.scale(Screen) + font.pixelSize: 13 * Theme.scale(screen) color: Theme.textPrimary verticalAlignment: Text.AlignVCenter elide: Text.ElideRight @@ -584,14 +584,14 @@ ColumnLayout { Text { text: "Audio Codec" - font.pixelSize: 13 * Theme.scale(Screen) + font.pixelSize: 13 * Theme.scale(screen) font.bold: true color: Theme.textPrimary } Text { text: "Opus is recommended for best performance and smallest audio size" - font.pixelSize: 12 * Theme.scale(Screen) + font.pixelSize: 12 * Theme.scale(screen) color: Theme.textSecondary Layout.bottomMargin: 4 } @@ -620,7 +620,7 @@ ColumnLayout { leftPadding: 12 rightPadding: audioCodecComboBox.indicator.width + audioCodecComboBox.spacing text: audioCodecComboBox.currentText.toUpperCase() - font.pixelSize: 13 * Theme.scale(Screen) + font.pixelSize: 13 * Theme.scale(screen) color: Theme.textPrimary verticalAlignment: Text.AlignVCenter elide: Text.ElideRight @@ -631,7 +631,7 @@ ColumnLayout { y: audioCodecComboBox.topPadding + (audioCodecComboBox.availableHeight - height) / 2 text: "arrow_drop_down" font.family: "Material Symbols Outlined" - font.pixelSize: 24 * Theme.scale(Screen) + font.pixelSize: 24 * Theme.scale(screen) color: Theme.textPrimary } @@ -667,7 +667,7 @@ ColumnLayout { contentItem: Text { text: modelData.toUpperCase() - font.pixelSize: 13 * Theme.scale(Screen) + font.pixelSize: 13 * Theme.scale(screen) color: Theme.textPrimary verticalAlignment: Text.AlignVCenter elide: Text.ElideRight @@ -691,14 +691,14 @@ ColumnLayout { Text { text: "Color Range" - font.pixelSize: 13 * Theme.scale(Screen) + font.pixelSize: 13 * Theme.scale(screen) font.bold: true color: Theme.textPrimary } Text { text: "Limited is recommended for better compatibility" - font.pixelSize: 12 * Theme.scale(Screen) + font.pixelSize: 12 * Theme.scale(screen) color: Theme.textSecondary Layout.bottomMargin: 4 } @@ -727,7 +727,7 @@ ColumnLayout { leftPadding: 12 rightPadding: colorRangeComboBox.indicator.width + colorRangeComboBox.spacing text: colorRangeComboBox.currentText.charAt(0).toUpperCase() + colorRangeComboBox.currentText.slice(1) - font.pixelSize: 13 * Theme.scale(Screen) + font.pixelSize: 13 * Theme.scale(screen) color: Theme.textPrimary verticalAlignment: Text.AlignVCenter elide: Text.ElideRight @@ -738,7 +738,7 @@ ColumnLayout { y: colorRangeComboBox.topPadding + (colorRangeComboBox.availableHeight - height) / 2 text: "arrow_drop_down" font.family: "Material Symbols Outlined" - font.pixelSize: 24 * Theme.scale(Screen) + font.pixelSize: 24 * Theme.scale(screen) color: Theme.textPrimary } @@ -774,7 +774,7 @@ ColumnLayout { contentItem: Text { text: modelData.charAt(0).toUpperCase() + modelData.slice(1) - font.pixelSize: 13 * Theme.scale(Screen) + font.pixelSize: 13 * Theme.scale(screen) color: Theme.textPrimary verticalAlignment: Text.AlignVCenter elide: Text.ElideRight diff --git a/Widgets/SettingsWindow/Tabs/TimeWeather.qml b/Widgets/SettingsWindow/Tabs/TimeWeather.qml index e228df6..640f8ba 100644 --- a/Widgets/SettingsWindow/Tabs/TimeWeather.qml +++ b/Widgets/SettingsWindow/Tabs/TimeWeather.qml @@ -29,10 +29,10 @@ ColumnLayout { Text { text: "Time" - font.pixelSize: 18 * Theme.scale(Screen) + font.pixelSize: 18 * Theme.scale(screen) font.bold: true color: Theme.textPrimary - Layout.bottomMargin: 16 * Theme.scale(Screen) + Layout.bottomMargin: 16 * Theme.scale(screen) } ToggleOption { @@ -64,27 +64,27 @@ ColumnLayout { Text { text: "Weather" - font.pixelSize: 18 * Theme.scale(Screen) + font.pixelSize: 18 * Theme.scale(screen) font.bold: true color: Theme.textPrimary - Layout.bottomMargin: 16 * Theme.scale(Screen) + Layout.bottomMargin: 16 * Theme.scale(screen) } ColumnLayout { spacing: 8 Layout.fillWidth: true - Layout.bottomMargin: 8 * Theme.scale(Screen) + Layout.bottomMargin: 8 * Theme.scale(screen) Text { text: "City" - font.pixelSize: 13 * Theme.scale(Screen) + font.pixelSize: 13 * Theme.scale(screen) font.bold: true color: Theme.textPrimary } Text { text: "Your city name for weather information" - font.pixelSize: 12 * Theme.scale(Screen) + font.pixelSize: 12 * Theme.scale(screen) color: Theme.textSecondary Layout.fillWidth: true } @@ -106,7 +106,7 @@ ColumnLayout { anchors.topMargin: 6 anchors.bottomMargin: 6 text: Settings.settings.weatherCity - font.pixelSize: 13 * Theme.scale(Screen) + font.pixelSize: 13 * Theme.scale(screen) color: Theme.textPrimary verticalAlignment: TextInput.AlignVCenter clip: true @@ -147,14 +147,14 @@ ColumnLayout { Text { text: "Temperature Unit" - font.pixelSize: 13 * Theme.scale(Screen) + font.pixelSize: 13 * Theme.scale(screen) font.bold: true color: Theme.textPrimary } Text { text: "Choose between Celsius and Fahrenheit" - font.pixelSize: 12 * Theme.scale(Screen) + font.pixelSize: 12 * Theme.scale(screen) color: Theme.textSecondary wrapMode: Text.WordWrap Layout.fillWidth: true diff --git a/Widgets/SidePanel/Button.qml b/Widgets/SidePanel/Button.qml index d4b2b51..a0f8013 100644 --- a/Widgets/SidePanel/Button.qml +++ b/Widgets/SidePanel/Button.qml @@ -44,7 +44,7 @@ Item { id: iconText text: "dashboard" font.family: isActive ? "Material Symbols Rounded" : "Material Symbols Outlined" - font.pixelSize: 16 * Theme.scale(Screen) + font.pixelSize: 16 * Theme.scale(screen) color: sidebarPopup.visible ? Theme.accentPrimary : Theme.textPrimary anchors.centerIn: parent z: 1 diff --git a/Widgets/SidePanel/Music.qml b/Widgets/SidePanel/Music.qml index 95ec4e4..b066bda 100644 --- a/Widgets/SidePanel/Music.qml +++ b/Widgets/SidePanel/Music.qml @@ -8,15 +8,13 @@ import qs.Services Rectangle { id: musicCard - width: 360 * Theme.scale(Screen) - height: 250 * Theme.scale(Screen) color: "transparent" Rectangle { id: card anchors.fill: parent color: Theme.surface - radius: 18 * Theme.scale(Screen) + radius: 18 // Show fallback UI if no player is available Item { @@ -26,12 +24,12 @@ Rectangle { ColumnLayout { anchors.centerIn: parent - spacing: 16 * Theme.scale(Screen) + spacing: 16 * Theme.scale(screen) Text { text: "music_note" font.family: "Material Symbols Outlined" - font.pixelSize: Theme.fontSizeHeader * Theme.scale(Screen) + font.pixelSize: Theme.fontSizeHeader * Theme.scale(screen) color: Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.3) Layout.alignment: Qt.AlignHCenter } @@ -40,7 +38,7 @@ Rectangle { text: MusicManager.hasPlayer ? "No controllable player selected" : "No music player detected" color: Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.6) font.family: Theme.fontFamily - font.pixelSize: Theme.fontSizeSmall * Theme.scale(Screen) + font.pixelSize: Theme.fontSizeSmall * Theme.scale(screen) Layout.alignment: Qt.AlignHCenter } } @@ -49,45 +47,45 @@ Rectangle { // Main player UI ColumnLayout { anchors.fill: parent - anchors.margins: 18 * Theme.scale(Screen) - spacing: 12 * Theme.scale(Screen) + anchors.margins: 18 * Theme.scale(screen) + spacing: 12 * Theme.scale(screen) visible: !!MusicManager.currentPlayer // Player selector ComboBox { id: playerSelector Layout.fillWidth: true - Layout.preferredHeight: 40 * Theme.scale(Screen) + Layout.preferredHeight: 40 * Theme.scale(screen) visible: MusicManager.getAvailablePlayers().length > 1 model: MusicManager.getAvailablePlayers() textRole: "identity" currentIndex: MusicManager.selectedPlayerIndex background: Rectangle { - implicitWidth: 120 * Theme.scale(Screen) - implicitHeight: 40 * Theme.scale(Screen) + implicitWidth: 120 * Theme.scale(screen) + implicitHeight: 40 * Theme.scale(screen) color: Theme.surfaceVariant border.color: playerSelector.activeFocus ? Theme.accentPrimary : Theme.outline - border.width: 1 * Theme.scale(Screen) - radius: 16 * Theme.scale(Screen) + border.width: 1 * Theme.scale(screen) + radius: 16 } contentItem: Text { - leftPadding: 12 * Theme.scale(Screen) + leftPadding: 12 * Theme.scale(screen) rightPadding: playerSelector.indicator.width + playerSelector.spacing text: playerSelector.displayText - font.pixelSize: 13 * Theme.scale(Screen) + font.pixelSize: 13 * Theme.scale(screen) color: Theme.textPrimary verticalAlignment: Text.AlignVCenter elide: Text.ElideRight } indicator: Text { - x: playerSelector.width - width - 12 * Theme.scale(Screen) + x: playerSelector.width - width - 12 * Theme.scale(screen) y: playerSelector.topPadding + (playerSelector.availableHeight - height) / 2 text: "arrow_drop_down" font.family: "Material Symbols Outlined" - font.pixelSize: 24 * Theme.scale(Screen) + font.pixelSize: 24 * Theme.scale(screen) color: Theme.textPrimary } @@ -95,7 +93,7 @@ Rectangle { y: playerSelector.height width: playerSelector.width implicitHeight: contentItem.implicitHeight - padding: 1 * Theme.scale(Screen) + padding: 1 * Theme.scale(screen) contentItem: ListView { clip: true @@ -109,8 +107,8 @@ Rectangle { background: Rectangle { color: Theme.surfaceVariant border.color: Theme.outline - border.width: 1 * Theme.scale(Screen) - radius: 16 * Theme.scale(Screen) + border.width: 1 * Theme.scale(screen) + radius: 16 } } @@ -118,7 +116,7 @@ Rectangle { width: playerSelector.width contentItem: Text { text: modelData.identity - font.pixelSize: 13 * Theme.scale(Screen) + font.pixelSize: 13 * Theme.scale(screen) color: Theme.textPrimary verticalAlignment: Text.AlignVCenter elide: Text.ElideRight @@ -138,14 +136,14 @@ Rectangle { // Album art with spectrum visualizer RowLayout { - spacing: 12 * Theme.scale(Screen) + spacing: 12 * Theme.scale(screen) Layout.fillWidth: true // Album art container with circular spectrum overlay Item { id: albumArtContainer - width: 96 * Theme.scale(Screen) - height: 96 * Theme.scale(Screen) // enough for spectrum and art (will adjust if needed) + width: 96 * Theme.scale(screen) + height: 96 * Theme.scale(screen) // enough for spectrum and art (will adjust if needed) Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter // Circular spectrum visualizer around album art @@ -153,36 +151,36 @@ Rectangle { id: spectrum values: MusicManager.cavaValues anchors.centerIn: parent - innerRadius: 30 * Theme.scale(Screen) // Position just outside 60x60 album art - outerRadius: 48 * Theme.scale(Screen) // Extend bars outward from album art + innerRadius: 30 * Theme.scale(screen) // Position just outside 60x60 album art + outerRadius: 48 * Theme.scale(screen) // Extend bars outward from album art fillColor: Theme.accentPrimary strokeColor: Theme.accentPrimary - strokeWidth: 0 * Theme.scale(Screen) + strokeWidth: 0 * Theme.scale(screen) z: 0 } // Album art image Rectangle { id: albumArtwork - width: 60 * Theme.scale(Screen) - height: 60 * Theme.scale(Screen) + width: 60 * Theme.scale(screen) + height: 60 * Theme.scale(screen) anchors.centerIn: parent - radius: 30 * Theme.scale(Screen) // circle + radius: 30 // circle color: Qt.darker(Theme.surface, 1.1) border.color: Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.3) - border.width: 1 * Theme.scale(Screen) + border.width: 1 * Theme.scale(screen) Image { id: albumArt anchors.fill: parent - anchors.margins: 2 * Theme.scale(Screen) + anchors.margins: 2 * Theme.scale(screen) fillMode: Image.PreserveAspectCrop smooth: true mipmap: true cache: false asynchronous: true - sourceSize.width: 60 * Theme.scale(Screen) - sourceSize.height: 60 * Theme.scale(Screen) + sourceSize.width: 60 * Theme.scale(screen) + sourceSize.height: 60 * Theme.scale(screen) source: MusicManager.trackArtUrl visible: source.toString() !== "" @@ -213,7 +211,7 @@ Rectangle { anchors.centerIn: parent text: "album" font.family: "Material Symbols Outlined" - font.pixelSize: Theme.fontSizeBody * Theme.scale(Screen) + font.pixelSize: Theme.fontSizeBody * Theme.scale(screen) color: Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.4) visible: !albumArt.visible } @@ -223,13 +221,13 @@ Rectangle { // Track metadata ColumnLayout { Layout.fillWidth: true - spacing: 4 * Theme.scale(Screen) + spacing: 4 * Theme.scale(screen) Text { text: MusicManager.trackTitle color: Theme.textPrimary font.family: Theme.fontFamily - font.pixelSize: Theme.fontSizeSmall * Theme.scale(Screen) + font.pixelSize: Theme.fontSizeSmall * Theme.scale(screen) font.bold: true elide: Text.ElideRight wrapMode: Text.Wrap @@ -241,7 +239,7 @@ Rectangle { text: MusicManager.trackArtist color: Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.8) font.family: Theme.fontFamily - font.pixelSize: Theme.fontSizeCaption * Theme.scale(Screen) + font.pixelSize: Theme.fontSizeCaption * Theme.scale(screen) elide: Text.ElideRight Layout.fillWidth: true } @@ -250,7 +248,7 @@ Rectangle { text: MusicManager.trackAlbum color: Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.6) font.family: Theme.fontFamily - font.pixelSize: Theme.fontSizeCaption * Theme.scale(Screen) + font.pixelSize: Theme.fontSizeCaption * Theme.scale(screen) elide: Text.ElideRight Layout.fillWidth: true } @@ -261,8 +259,8 @@ Rectangle { Rectangle { id: progressBarBackground width: parent.width - height: 6 * Theme.scale(Screen) - radius: 3 * Theme.scale(Screen) + height: 6 * Theme.scale(screen) + radius: 3 color: Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.15) Layout.fillWidth: true @@ -290,12 +288,12 @@ Rectangle { // Interactive progress handle Rectangle { id: progressHandle - width: 12 * Theme.scale(Screen) - height: 12 * Theme.scale(Screen) - radius: 6 * Theme.scale(Screen) + width: 12 * Theme.scale(screen) + height: 12 * Theme.scale(screen) + radius: 6 color: Theme.accentPrimary border.color: Qt.lighter(Theme.accentPrimary, 1.3) - border.width: 1 * Theme.scale(Screen) + border.width: 1 * Theme.scale(screen) x: Math.max(0, Math.min(parent.width - width, progressFill.width - width / 2)) anchors.verticalCenter: parent.verticalCenter @@ -334,18 +332,18 @@ Rectangle { // Media controls RowLayout { - spacing: 4 * Theme.scale(Screen) + spacing: 4 * Theme.scale(screen) Layout.fillWidth: true Layout.alignment: Qt.AlignHCenter // Previous button Rectangle { - width: 28 * Theme.scale(Screen) - height: 28 * Theme.scale(Screen) - radius: 14 * Theme.scale(Screen) + width: 28 * Theme.scale(screen) + height: 28 * Theme.scale(screen) + radius: 14 color: previousButton.containsMouse ? Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.2) : Qt.darker(Theme.surface, 1.1) border.color: Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.3) - border.width: 1 * Theme.scale(Screen) + border.width: 1 * Theme.scale(screen) MouseArea { id: previousButton @@ -360,19 +358,19 @@ Rectangle { anchors.centerIn: parent text: "skip_previous" font.family: "Material Symbols Outlined" - font.pixelSize: Theme.fontSizeCaption * Theme.scale(Screen) + font.pixelSize: Theme.fontSizeCaption * Theme.scale(screen) color: previousButton.enabled ? Theme.accentPrimary : Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.3) } } // Play/Pause button Rectangle { - width: 36 * Theme.scale(Screen) - height: 36 * Theme.scale(Screen) - radius: 18 * Theme.scale(Screen) + width: 36 * Theme.scale(screen) + height: 36 * Theme.scale(screen) + radius: 18 color: playButton.containsMouse ? Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.2) : Qt.darker(Theme.surface, 1.1) border.color: Theme.accentPrimary - border.width: 2 * Theme.scale(Screen) + border.width: 2 * Theme.scale(screen) MouseArea { id: playButton @@ -387,19 +385,19 @@ Rectangle { anchors.centerIn: parent text: MusicManager.isPlaying ? "pause" : "play_arrow" font.family: "Material Symbols Outlined" - font.pixelSize: Theme.fontSizeBody * Theme.scale(Screen) + font.pixelSize: Theme.fontSizeBody * Theme.scale(screen) color: playButton.enabled ? Theme.accentPrimary : Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.3) } } // Next button Rectangle { - width: 28 * Theme.scale(Screen) - height: 28 * Theme.scale(Screen) - radius: 14 * Theme.scale(Screen) + width: 28 * Theme.scale(screen) + height: 28 * Theme.scale(screen) + radius: 14 color: nextButton.containsMouse ? Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.2) : Qt.darker(Theme.surface, 1.1) border.color: Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.3) - border.width: 1 * Theme.scale(Screen) + border.width: 1 * Theme.scale(screen) MouseArea { id: nextButton @@ -414,7 +412,7 @@ Rectangle { anchors.centerIn: parent text: "skip_next" font.family: "Material Symbols Outlined" - font.pixelSize: Theme.fontSizeCaption * Theme.scale(Screen) + font.pixelSize: Theme.fontSizeCaption * Theme.scale(screen) color: nextButton.enabled ? Theme.accentPrimary : Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.3) } } diff --git a/Widgets/SidePanel/PanelPopup.qml b/Widgets/SidePanel/PanelPopup.qml index ac8c100..d03521c 100644 --- a/Widgets/SidePanel/PanelPopup.qml +++ b/Widgets/SidePanel/PanelPopup.qml @@ -44,8 +44,8 @@ PanelWithOverlay { property real slideOffset: width property bool isAnimating: false - property int leftPadding: 20 * Theme.scale(Screen) - property int bottomPadding: 20 * Theme.scale(Screen) + property int leftPadding: 20 * Theme.scale(screen) + property int bottomPadding: 20 * Theme.scale(screen) // Recording properties property bool isRecording: false @@ -113,10 +113,8 @@ PanelWithOverlay { isRecording = false; } - // Necessary for the scaling to work on smaller screens - width: 526 - implicitWidth: 500 * Theme.scale(Screen) - implicitHeight: 700 * Theme.scale(Screen) + width: 480 * Theme.scale(screen) + height: 660 * Theme.scale(screen) visible: parent.visible color: "transparent" anchors.top: parent.top @@ -172,15 +170,13 @@ PanelWithOverlay { Rectangle { id: mainRectangle - anchors.top: sidebarPopupRect.top + // anchors.top: sidebarPopupRect.top width: sidebarPopupRect.width - sidebarPopupRect.leftPadding height: sidebarPopupRect.height - sidebarPopupRect.bottomPadding x: sidebarPopupRect.leftPadding + sidebarPopupRect.slideOffset - y: 0 - z: 0 color: Theme.backgroundPrimary - anchors.fill: parent - bottomLeftRadius: 20 * Theme.scale(Screen) + // anchors.fill: parent + bottomLeftRadius: 20 Behavior on x { enabled: !sidebarPopupRect.isAnimating @@ -212,83 +208,84 @@ PanelWithOverlay { ColumnLayout { anchors.fill: parent - anchors.margins: 20 * Theme.scale(Screen) - spacing: 8 * Theme.scale(Screen) + spacing: 8 * Theme.scale(screen) System { id: systemWidget + width: 420 * Theme.scale(screen) + height: 80 * Theme.scale(screen) settingsModal: settingsModal Layout.alignment: Qt.AlignHCenter - z: 3 } Weather { id: weather + width: 420 * Theme.scale(screen) + height: 180 * Theme.scale(screen) Layout.alignment: Qt.AlignHCenter - z: 2 } // Music and System Monitor row RowLayout { - spacing: 8 * Theme.scale(Screen) + spacing: 8 * Theme.scale(screen) Layout.fillWidth: true Layout.alignment: Qt.AlignHCenter Music { - z: 2 + width: 332 * Theme.scale(screen) + height: 250 * Theme.scale(screen) } SystemMonitor { - id: systemMonitor - - z: 2 + width: 80 * Theme.scale(screen) + height: 250 * Theme.scale(screen) } } - // Power profile, Record and Wallpaper row RowLayout { - Layout.alignment: Qt.AlignVCenter - spacing: 10 * Theme.scale(Screen) - Layout.preferredHeight: 80 * Theme.scale(Screen) - z: 3 + spacing: 8 * Theme.scale(screen) + Layout.fillWidth: true + Layout.alignment: Qt.AlignHCenter PowerProfile { + width: 206 * Theme.scale(screen) + height: 70 * Theme.scale(screen) Layout.alignment: Qt.AlignVCenter - Layout.preferredHeight: 80 * Theme.scale(Screen) } // Record and Wallpaper card Rectangle { - Layout.preferredHeight: 80 * Theme.scale(Screen) - Layout.preferredWidth: 140 * Theme.scale(Screen) - Layout.fillWidth: false + width: 206 * Theme.scale(screen) + height: 70 * Theme.scale(screen) + Layout.alignment: Qt.AlignVCenter + color: Theme.surface - radius: 18 * Theme.scale(Screen) + radius: 16 Row { anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter - spacing: 20 * Theme.scale(Screen) + spacing: 20 * Theme.scale(screen) // Record button Rectangle { id: recordButton - width: 36 * Theme.scale(Screen) - height: 36 * Theme.scale(Screen) - radius: 18 * Theme.scale(Screen) + width: 36 * Theme.scale(screen) + height: 36 * Theme.scale(screen) + radius: 18 border.color: Theme.accentPrimary - border.width: 1 * Theme.scale(Screen) + border.width: 1 * Theme.scale(screen) color: sidebarPopupRect.isRecording ? Theme.accentPrimary : (recordButtonArea.containsMouse ? Theme.accentPrimary : "transparent") Text { anchors.centerIn: parent text: "photo_camera" font.family: "Material Symbols Outlined" - font.pixelSize: 22 * Theme.scale(Screen) + font.pixelSize: 22 * Theme.scale(screen) color: sidebarPopupRect.isRecording || recordButtonArea.containsMouse ? Theme.backgroundPrimary : Theme.accentPrimary verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter @@ -323,18 +320,18 @@ PanelWithOverlay { Rectangle { id: wallpaperButton - width: 36 * Theme.scale(Screen) - height: 36 * Theme.scale(Screen) - radius: 18 * Theme.scale(Screen) + width: 36 * Theme.scale(screen) + height: 36 * Theme.scale(screen) + radius: 18 border.color: Theme.accentPrimary - border.width: 1 * Theme.scale(Screen) + border.width: 1 * Theme.scale(screen) color: wallpaperButtonArea.containsMouse ? Theme.accentPrimary : "transparent" Text { anchors.centerIn: parent text: "image" font.family: "Material Symbols Outlined" - font.pixelSize: 22 * Theme.scale(Screen) + font.pixelSize: 22 * Theme.scale(screen) color: wallpaperButtonArea.containsMouse ? Theme.backgroundPrimary : Theme.accentPrimary verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter @@ -368,6 +365,11 @@ PanelWithOverlay { } + Rectangle { + height: 8 * Theme.scale(screen) + color: "transparent" + } + } Behavior on x { diff --git a/Widgets/SidePanel/PowerProfile.qml b/Widgets/SidePanel/PowerProfile.qml index 409ebac..e34cb22 100644 --- a/Widgets/SidePanel/PowerProfile.qml +++ b/Widgets/SidePanel/PowerProfile.qml @@ -7,22 +7,20 @@ import qs.Components Rectangle { id: card - width: 200 * Theme.scale(Screen) - height: 70 * Theme.scale(Screen) color: Theme.surface - radius: 18 * Theme.scale(Screen) + radius: 16 Row { anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter - spacing: 20 * Theme.scale(Screen) + spacing: 20 * Theme.scale(screen) Rectangle { - width: 36 * Theme.scale(Screen); height: 36 * Theme.scale(Screen) - radius: 18 * Theme.scale(Screen) + width: 36 * Theme.scale(screen); height: 36 * Theme.scale(screen) + radius: 16 border.color: Theme.accentPrimary - border.width: 1 * Theme.scale(Screen) + border.width: 1 * Theme.scale(screen) color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.Performance) ? Theme.accentPrimary : (perfMouseArea.containsMouse ? Theme.accentPrimary : "transparent") @@ -33,7 +31,7 @@ Rectangle { anchors.centerIn: parent text: "speed" font.family: "Material Symbols Outlined" - font.pixelSize: 22 * Theme.scale(Screen) + font.pixelSize: 22 * Theme.scale(screen) color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.Performance) || perfMouseArea.containsMouse ? Theme.backgroundPrimary : Theme.accentPrimary @@ -65,10 +63,10 @@ Rectangle { Rectangle { - width: 36 * Theme.scale(Screen); height: 36 * Theme.scale(Screen) - radius: 18 * Theme.scale(Screen) + width: 36 * Theme.scale(screen); height: 36 * Theme.scale(screen) + radius: 18 border.color: Theme.accentPrimary - border.width: 1 * Theme.scale(Screen) + border.width: 1 * Theme.scale(screen) color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.Balanced) ? Theme.accentPrimary : (balMouseArea.containsMouse ? Theme.accentPrimary : "transparent") @@ -79,7 +77,7 @@ Rectangle { anchors.centerIn: parent text: "balance" font.family: "Material Symbols Outlined" - font.pixelSize: 22 * Theme.scale(Screen) + font.pixelSize: 22 * Theme.scale(screen) color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.Balanced) || balMouseArea.containsMouse ? Theme.backgroundPrimary : Theme.accentPrimary @@ -111,10 +109,10 @@ Rectangle { Rectangle { - width: 36 * Theme.scale(Screen); height: 36 * Theme.scale(Screen) - radius: 18 * Theme.scale(Screen) + width: 36 * Theme.scale(screen); height: 36 * Theme.scale(screen) + radius: 18 border.color: Theme.accentPrimary - border.width: 1 * Theme.scale(Screen) + border.width: 1 * Theme.scale(screen) color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.PowerSaver) ? Theme.accentPrimary : (saveMouseArea.containsMouse ? Theme.accentPrimary : "transparent") @@ -125,7 +123,7 @@ Rectangle { anchors.centerIn: parent text: "eco" font.family: "Material Symbols Outlined" - font.pixelSize: 22 * Theme.scale(Screen) + font.pixelSize: 22 * Theme.scale(screen) color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.PowerSaver) || saveMouseArea.containsMouse ? Theme.backgroundPrimary : Theme.accentPrimary diff --git a/Widgets/SidePanel/SettingsIcon.qml b/Widgets/SidePanel/SettingsIcon.qml index bdae248..f93adbd 100644 --- a/Widgets/SidePanel/SettingsIcon.qml +++ b/Widgets/SidePanel/SettingsIcon.qml @@ -10,8 +10,8 @@ import qs.Components PanelWindow { id: settingsModal - implicitWidth: 480 * Theme.scale(Screen) - implicitHeight: 780 * Theme.scale(Screen) + implicitWidth: 480 * Theme.scale(screen) + implicitHeight: 780 * Theme.scale(screen) visible: false color: "transparent" anchors.top: true diff --git a/Widgets/SidePanel/SettingsModal.qml b/Widgets/SidePanel/SettingsModal.qml index 5a47ecf..84ba5c4 100644 --- a/Widgets/SidePanel/SettingsModal.qml +++ b/Widgets/SidePanel/SettingsModal.qml @@ -10,8 +10,8 @@ import qs.Components PanelWindow { id: settingsModal - implicitWidth: 480 * Theme.scale(Screen) - implicitHeight: 780 * Theme.scale(Screen) + implicitWidth: 480 * Theme.scale(screen) + implicitHeight: 780 * Theme.scale(screen) visible: false color: "transparent" anchors.top: true diff --git a/Widgets/SidePanel/System.qml b/Widgets/SidePanel/System.qml index 1b2a740..d004469 100644 --- a/Widgets/SidePanel/System.qml +++ b/Widgets/SidePanel/System.qml @@ -44,10 +44,8 @@ Rectangle { uptimeProcess.running = true; } - width: 440 * Theme.scale(Screen) - height: 80 * Theme.scale(Screen) color: "transparent" - anchors.horizontalCenterOffset: -2 + // anchors.horizontalCenterOffset: -2 onPanelVisibleChanged: { if (panelVisible) updateSystemInfo(); @@ -62,29 +60,29 @@ Rectangle { anchors.fill: parent color: Theme.surface - radius: 18 * Theme.scale(Screen) + radius: 18 ColumnLayout { anchors.fill: parent - anchors.margins: 18 * Theme.scale(Screen) - spacing: 12 * Theme.scale(Screen) + anchors.margins: 18 * Theme.scale(screen) + spacing: 12 * Theme.scale(screen) RowLayout { Layout.fillWidth: true - spacing: 12 * Theme.scale(Screen) + spacing: 12 * Theme.scale(screen) Rectangle { - width: 48 * Theme.scale(Screen) - height: 48 * Theme.scale(Screen) - radius: 24 * Theme.scale(Screen) + width: 48 * Theme.scale(screen) + height: 48 * Theme.scale(screen) + radius: 24 color: Theme.accentPrimary Rectangle { anchors.fill: parent color: "transparent" - radius: 24 * Theme.scale(Screen) + radius: 24 border.color: Theme.accentPrimary - border.width: 2 * Theme.scale(Screen) + border.width: 2 * Theme.scale(screen) z: 2 } @@ -94,13 +92,13 @@ Rectangle { } ColumnLayout { - spacing: 4 * Theme.scale(Screen) + spacing: 4 * Theme.scale(screen) Layout.fillWidth: true Text { text: Quickshell.env("USER") font.family: Theme.fontFamily - font.pixelSize: 16 * Theme.scale(Screen) + font.pixelSize: 16 * Theme.scale(screen) font.bold: true color: Theme.textPrimary } @@ -108,7 +106,7 @@ Rectangle { Text { text: "System Uptime: " + uptimeText font.family: Theme.fontFamily - font.pixelSize: 12 * Theme.scale(Screen) + font.pixelSize: 12 * Theme.scale(screen) color: Theme.textSecondary } @@ -121,21 +119,23 @@ Rectangle { Rectangle { id: settingsButton - width: 32 * Theme.scale(Screen) - height: 32 * Theme.scale(Screen) - radius: 16 * Theme.scale(Screen) + width: 32 * Theme.scale(screen) + height: 32 * Theme.scale(screen) + radius: 16 color: settingsButtonArea.containsMouse || settingsButtonArea.pressed ? Theme.accentPrimary : "transparent" border.color: Theme.accentPrimary - border.width: 1 * Theme.scale(Screen) + border.width: 1 * Theme.scale(screen) Text { anchors.centerIn: parent - anchors.horizontalCenterOffset: -0.5 * Theme.scale(Screen) + anchors.horizontalCenterOffset: -0.5 * Theme.scale(screen) text: "settings" font.family: "Material Symbols Outlined" - font.pixelSize: 16 * Theme.scale(Screen) + font.pixelSize: 16 * Theme.scale(screen) color: settingsButtonArea.containsMouse || settingsButtonArea.pressed ? Theme.backgroundPrimary : Theme.accentPrimary - font.variableAxes: { "wght": (Font.Normal + Font.Bold) / 2.0 } + font.variableAxes: { + "wght": (Font.Normal + Font.Bold) / 2 + } } MouseArea { @@ -164,21 +164,23 @@ Rectangle { Rectangle { id: systemButton - width: 32 * Theme.scale(Screen) - height: 32 * Theme.scale(Screen) - radius: 16 * Theme.scale(Screen) + width: 32 * Theme.scale(screen) + height: 32 * Theme.scale(screen) + radius: 16 color: systemButtonArea.containsMouse || systemButtonArea.pressed ? Theme.accentPrimary : "transparent" border.color: Theme.accentPrimary - border.width: 1 * Theme.scale(Screen) + border.width: 1 * Theme.scale(screen) Text { anchors.centerIn: parent - anchors.horizontalCenterOffset: -0.5 * Theme.scale(Screen) + anchors.horizontalCenterOffset: -0.5 * Theme.scale(screen) text: "power_settings_new" font.family: "Material Symbols Outlined" - font.pixelSize: 16 * Theme.scale(Screen) + font.pixelSize: 16 * Theme.scale(screen) color: systemButtonArea.containsMouse || systemButtonArea.pressed ? Theme.backgroundPrimary : Theme.accentPrimary - font.variableAxes: { "wght": (Font.Normal + Font.Bold) / 2.0 } + font.variableAxes: { + "wght": (Font.Normal + Font.Bold) / 2 + } } MouseArea { @@ -215,18 +217,18 @@ Rectangle { anchors.right: systemButton.right Rectangle { - width: 160 * Theme.scale(Screen) - height: 220 * Theme.scale(Screen) + width: 160 * Theme.scale(screen) + height: 220 * Theme.scale(screen) color: Theme.surface - radius: 8 * Theme.scale(Screen) + radius: 8 border.color: Theme.outline - border.width: 1 * Theme.scale(Screen) + border.width: 1 * Theme.scale(screen) visible: true z: 9999 anchors.top: parent.top anchors.right: parent.right - anchors.rightMargin: 32 * Theme.scale(Screen) - anchors.topMargin: systemButton.y + systemButton.height + 48 * Theme.scale(Screen) + anchors.rightMargin: 32 * Theme.scale(screen) + anchors.topMargin: systemButton.y + systemButton.height + 48 * Theme.scale(screen) // Prevent closing when clicking in the panel bg MouseArea { @@ -235,31 +237,31 @@ Rectangle { ColumnLayout { anchors.fill: parent - anchors.margins: 8 * Theme.scale(Screen) - spacing: 4 * Theme.scale(Screen) + anchors.margins: 8 * Theme.scale(screen) + spacing: 4 * Theme.scale(screen) Rectangle { Layout.fillWidth: true - Layout.preferredHeight: 36 * Theme.scale(Screen) - radius: 6 * Theme.scale(Screen) + Layout.preferredHeight: 36 * Theme.scale(screen) + radius: 6 color: lockButtonArea.containsMouse ? Theme.accentPrimary : "transparent" RowLayout { anchors.fill: parent - anchors.margins: 12 * Theme.scale(Screen) - spacing: 8 * Theme.scale(Screen) + anchors.margins: 12 * Theme.scale(screen) + spacing: 8 * Theme.scale(screen) Text { text: "lock_outline" font.family: "Material Symbols Outlined" - font.pixelSize: 16 * Theme.scale(Screen) + font.pixelSize: 16 * Theme.scale(screen) color: lockButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary } Text { text: "Lock Screen" font.family: Theme.fontFamily - font.pixelSize: 14 * Theme.scale(Screen) + font.pixelSize: 14 * Theme.scale(screen) color: lockButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary Layout.fillWidth: true } @@ -282,25 +284,25 @@ Rectangle { Rectangle { Layout.fillWidth: true - Layout.preferredHeight: 36 * Theme.scale(Screen) - radius: 6 * Theme.scale(Screen) + Layout.preferredHeight: 36 * Theme.scale(screen) + radius: 6 color: suspendButtonArea.containsMouse ? Theme.accentPrimary : "transparent" RowLayout { anchors.fill: parent - anchors.margins: 12 * Theme.scale(Screen) - spacing: 8 * Theme.scale(Screen) + anchors.margins: 12 * Theme.scale(screen) + spacing: 8 * Theme.scale(screen) Text { text: "bedtime" font.family: "Material Symbols Outlined" - font.pixelSize: 16 * Theme.scale(Screen) + font.pixelSize: 16 * Theme.scale(screen) color: suspendButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary } Text { text: "Suspend" - font.pixelSize: 14 * Theme.scale(Screen) + font.pixelSize: 14 * Theme.scale(screen) color: suspendButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary Layout.fillWidth: true } @@ -323,26 +325,26 @@ Rectangle { Rectangle { Layout.fillWidth: true - Layout.preferredHeight: 36 * Theme.scale(Screen) - radius: 6 * Theme.scale(Screen) + Layout.preferredHeight: 36 * Theme.scale(screen) + radius: 6 color: rebootButtonArea.containsMouse ? Theme.accentPrimary : "transparent" RowLayout { anchors.fill: parent - anchors.margins: 12 * Theme.scale(Screen) - spacing: 8 * Theme.scale(Screen) + anchors.margins: 12 * Theme.scale(screen) + spacing: 8 * Theme.scale(screen) Text { text: "refresh" font.family: "Material Symbols Outlined" - font.pixelSize: 16 * Theme.scale(Screen) + font.pixelSize: 16 * Theme.scale(screen) color: rebootButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary } Text { text: "Reboot" font.family: Theme.fontFamily - font.pixelSize: 14 * Theme.scale(Screen) + font.pixelSize: 14 * Theme.scale(screen) color: rebootButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary Layout.fillWidth: true } @@ -365,25 +367,25 @@ Rectangle { Rectangle { Layout.fillWidth: true - Layout.preferredHeight: 36 * Theme.scale(Screen) - radius: 6 * Theme.scale(Screen) + Layout.preferredHeight: 36 * Theme.scale(screen) + radius: 6 color: logoutButtonArea.containsMouse ? Theme.accentPrimary : "transparent" RowLayout { anchors.fill: parent - anchors.margins: 12 * Theme.scale(Screen) - spacing: 8 * Theme.scale(Screen) + anchors.margins: 12 * Theme.scale(screen) + spacing: 8 * Theme.scale(screen) Text { text: "exit_to_app" font.family: "Material Symbols Outlined" - font.pixelSize: 16 * Theme.scale(Screen) + font.pixelSize: 16 * Theme.scale(screen) color: logoutButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary } Text { text: "Logout" - font.pixelSize: 14 * Theme.scale(Screen) + font.pixelSize: 14 * Theme.scale(screen) color: logoutButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary Layout.fillWidth: true } @@ -406,25 +408,25 @@ Rectangle { Rectangle { Layout.fillWidth: true - Layout.preferredHeight: 36 * Theme.scale(Screen) - radius: 6 * Theme.scale(Screen) + Layout.preferredHeight: 36 * Theme.scale(screen) + radius: 6 color: shutdownButtonArea.containsMouse ? Theme.accentPrimary : "transparent" RowLayout { anchors.fill: parent - anchors.margins: 12 * Theme.scale(Screen) - spacing: 8 * Theme.scale(Screen) + anchors.margins: 12 * Theme.scale(screen) + spacing: 8 * Theme.scale(screen) Text { text: "power_settings_new" font.family: "Material Symbols Outlined" - font.pixelSize: 16 * Theme.scale(Screen) + font.pixelSize: 16 * Theme.scale(screen) color: shutdownButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary } Text { text: "Shutdown" - font.pixelSize: 14 * Theme.scale(Screen) + font.pixelSize: 14 * Theme.scale(screen) color: shutdownButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary Layout.fillWidth: true } @@ -514,4 +516,5 @@ Rectangle { running: panelVisible onTriggered: updateSystemInfo() } + } diff --git a/Widgets/SidePanel/SystemMonitor.qml b/Widgets/SidePanel/SystemMonitor.qml index dd0464a..31bd698 100644 --- a/Widgets/SidePanel/SystemMonitor.qml +++ b/Widgets/SidePanel/SystemMonitor.qml @@ -8,8 +8,6 @@ import qs.Settings Rectangle { id: systemMonitor - width: 70 * Theme.scale(Screen) - height: 250 * Theme.scale(Screen) color: "transparent" // Track visibility state for panel integration @@ -19,26 +17,26 @@ Rectangle { id: card anchors.fill: parent color: Theme.surface - radius: 18 * Theme.scale(Screen) + radius: 18 ColumnLayout { anchors.fill: parent - anchors.margins: 8 * Theme.scale(Screen) - spacing: 12 * Theme.scale(Screen) + anchors.margins: 8 * Theme.scale(screen) + spacing: 12 * Theme.scale(screen) Layout.alignment: Qt.AlignVCenter // CPU usage indicator with circular progress bar Item { - width: 50 * Theme.scale(Screen); height: 50 * Theme.scale(Screen) + width: 50 * Theme.scale(screen); height: 50 * Theme.scale(screen) CircularProgressBar { id: cpuBar progress: Sysinfo.cpuUsage / 100 - size: 50 * Theme.scale(Screen) - strokeWidth: 4 * Theme.scale(Screen) + size: 50 * Theme.scale(screen) + strokeWidth: 4 * Theme.scale(screen) hasNotch: true notchIcon: "speed" - notchIconSize: 14 * Theme.scale(Screen) + notchIconSize: 14 * Theme.scale(screen) Layout.alignment: Qt.AlignHCenter } MouseArea { @@ -60,16 +58,16 @@ Rectangle { // CPU temperature indicator with circular progress bar Item { - width: 50 * Theme.scale(Screen); height: 50 * Theme.scale(Screen) + width: 50 * Theme.scale(screen); height: 50 * Theme.scale(screen) CircularProgressBar { id: tempBar progress: Sysinfo.cpuTemp / 100 - size: 50 * Theme.scale(Screen) - strokeWidth: 4 * Theme.scale(Screen) + size: 50 * Theme.scale(screen) + strokeWidth: 4 * Theme.scale(screen) hasNotch: true units: "°C" notchIcon: "thermometer" - notchIconSize: 14 * Theme.scale(Screen) + notchIconSize: 14 * Theme.scale(screen) Layout.alignment: Qt.AlignHCenter } MouseArea { @@ -91,15 +89,15 @@ Rectangle { // Memory usage indicator with circular progress bar Item { - width: 50 * Theme.scale(Screen); height: 50 * Theme.scale(Screen) + width: 50 * Theme.scale(screen); height: 50 * Theme.scale(screen) CircularProgressBar { id: memBar progress: Sysinfo.memoryUsagePer / 100 - size: 50 * Theme.scale(Screen) - strokeWidth: 4 * Theme.scale(Screen) + size: 50 * Theme.scale(screen) + strokeWidth: 4 * Theme.scale(screen) hasNotch: true notchIcon: "memory" - notchIconSize: 14 * Theme.scale(Screen) + notchIconSize: 14 * Theme.scale(screen) Layout.alignment: Qt.AlignHCenter } MouseArea { @@ -121,15 +119,15 @@ Rectangle { // Disk usage indicator with circular progress bar Item { - width: 50 * Theme.scale(Screen); height: 50 * Theme.scale(Screen) + width: 50 * Theme.scale(screen); height: 50 * Theme.scale(screen) CircularProgressBar { id: diskBar progress: Sysinfo.diskUsage / 100 - size: 50 * Theme.scale(Screen) - strokeWidth: 4 * Theme.scale(Screen) + size: 50 * Theme.scale(screen) + strokeWidth: 4 * Theme.scale(screen) hasNotch: true notchIcon: "storage" - notchIconSize: 14 * Theme.scale(Screen) + notchIconSize: 14 * Theme.scale(screen) Layout.alignment: Qt.AlignHCenter } MouseArea { diff --git a/Widgets/SidePanel/Weather.qml b/Widgets/SidePanel/Weather.qml index 3927e93..37ddd98 100644 --- a/Widgets/SidePanel/Weather.qml +++ b/Widgets/SidePanel/Weather.qml @@ -6,10 +6,7 @@ import "../../Helpers/Weather.js" as WeatherHelper Rectangle { id: weatherRoot - width: 440 * Theme.scale(Screen) - height: 180 * Theme.scale(Screen) color: "transparent" - anchors.horizontalCenterOffset: -2 property string city: Settings.settings.weatherCity !== undefined ? Settings.settings.weatherCity : "" property var weatherData: null @@ -83,29 +80,29 @@ Rectangle { id: card anchors.fill: parent color: Theme.surface - radius: 18 * Theme.scale(Screen) + radius: 18 ColumnLayout { anchors.fill: parent - anchors.margins: 18 * Theme.scale(Screen) - spacing: 12 * Theme.scale(Screen) + anchors.margins: 18 * Theme.scale(screen) + spacing: 12 * Theme.scale(screen) RowLayout { - spacing: 12 * Theme.scale(Screen) + spacing: 12 * Theme.scale(screen) Layout.fillWidth: true RowLayout { - spacing: 12 * Theme.scale(Screen) - Layout.preferredWidth: 140 * Theme.scale(Screen) + spacing: 12 * Theme.scale(screen) + Layout.preferredWidth: 140 * Theme.scale(screen) Text { id: weatherIcon text: isLoading ? "sync" : (weatherData && weatherData.current_weather ? materialSymbolForCode(weatherData.current_weather.weathercode) : "cloud") font.family: "Material Symbols Outlined" - font.pixelSize: 28 * Theme.scale(Screen) + font.pixelSize: 28 * Theme.scale(screen) verticalAlignment: Text.AlignVCenter color: isLoading ? Theme.accentPrimary : Theme.accentPrimary Layout.alignment: Qt.AlignVCenter @@ -121,28 +118,28 @@ Rectangle { } ColumnLayout { - spacing: 2 * Theme.scale(Screen) + spacing: 2 * Theme.scale(screen) RowLayout { - spacing: 4 * Theme.scale(Screen) + spacing: 4 * Theme.scale(screen) Text { text: city font.family: Theme.fontFamily - font.pixelSize: 14 * Theme.scale(Screen) + font.pixelSize: 14 * Theme.scale(screen) font.bold: true color: Theme.textPrimary } Text { text: weatherData && weatherData.timezone_abbreviation ? `(${weatherData.timezone_abbreviation})` : "" font.family: Theme.fontFamily - font.pixelSize: 10 * Theme.scale(Screen) + font.pixelSize: 10 * Theme.scale(screen) color: Theme.textSecondary - leftPadding: 2 * Theme.scale(Screen) + leftPadding: 2 * Theme.scale(screen) } } Text { text: weatherData && weatherData.current_weather ? ((Settings.settings.useFahrenheit !== undefined ? Settings.settings.useFahrenheit : false) ? `${Math.round(weatherData.current_weather.temperature * 9/5 + 32)}°F` : `${Math.round(weatherData.current_weather.temperature)}°C`) : ((Settings.settings.useFahrenheit !== undefined ? Settings.settings.useFahrenheit : false) ? "--°F" : "--°C") font.family: Theme.fontFamily - font.pixelSize: 24 * Theme.scale(Screen) + font.pixelSize: 24 * Theme.scale(screen) font.bold: true color: Theme.textPrimary } @@ -157,16 +154,16 @@ Rectangle { Rectangle { width: parent.width - height: 1 * Theme.scale(Screen) + height: 1 * Theme.scale(screen) color: Qt.rgba(Theme.textSecondary.g, Theme.textSecondary.g, Theme.textSecondary.b, 0.12) Layout.fillWidth: true - Layout.topMargin: 2 * Theme.scale(Screen) - Layout.bottomMargin: 2 * Theme.scale(Screen) + Layout.topMargin: 2 * Theme.scale(screen) + Layout.bottomMargin: 2 * Theme.scale(screen) } RowLayout { - spacing: 12 * Theme.scale(Screen) + spacing: 12 * Theme.scale(screen) Layout.fillWidth: true Layout.alignment: Qt.AlignHCenter visible: weatherData && weatherData.daily && weatherData.daily.time @@ -174,13 +171,13 @@ Rectangle { Repeater { model: weatherData && weatherData.daily && weatherData.daily.time ? 5 : 0 delegate: ColumnLayout { - spacing: 2 * Theme.scale(Screen) + spacing: 2 * Theme.scale(screen) Layout.alignment: Qt.AlignHCenter Text { text: Qt.formatDateTime(new Date(weatherData.daily.time[index]), "ddd") font.family: Theme.fontFamily - font.pixelSize: 12 * Theme.scale(Screen) + font.pixelSize: 12 * Theme.scale(screen) color: Theme.textSecondary horizontalAlignment: Text.AlignHCenter Layout.alignment: Qt.AlignHCenter @@ -189,7 +186,7 @@ Rectangle { text: materialSymbolForCode(weatherData.daily.weathercode[index]) font.family: "Material Symbols Outlined" - font.pixelSize: 22 * Theme.scale(Screen) + font.pixelSize: 22 * Theme.scale(screen) color: Theme.accentPrimary horizontalAlignment: Text.AlignHCenter Layout.alignment: Qt.AlignHCenter @@ -198,7 +195,7 @@ Rectangle { text: weatherData && weatherData.daily ? ((Settings.settings.useFahrenheit !== undefined ? Settings.settings.useFahrenheit : false) ? `${Math.round(weatherData.daily.temperature_2m_max[index] * 9/5 + 32)}° / ${Math.round(weatherData.daily.temperature_2m_min[index] * 9/5 + 32)}°` : `${Math.round(weatherData.daily.temperature_2m_max[index])}° / ${Math.round(weatherData.daily.temperature_2m_min[index])}°`) : ((Settings.settings.useFahrenheit !== undefined ? Settings.settings.useFahrenheit : false) ? "--° / --°" : "--° / --°") font.family: Theme.fontFamily - font.pixelSize: 12 * Theme.scale(Screen) + font.pixelSize: 12 * Theme.scale(screen) color: Theme.textPrimary horizontalAlignment: Text.AlignHCenter Layout.alignment: Qt.AlignHCenter @@ -213,7 +210,7 @@ Rectangle { color: Theme.error visible: errorString !== "" font.family: Theme.fontFamily - font.pixelSize: 10 * Theme.scale(Screen) + font.pixelSize: 10 * Theme.scale(screen) horizontalAlignment: Text.AlignHCenter Layout.alignment: Qt.AlignHCenter }