never/noctalia-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Scaling: many improvements and fixes

Browse source 
- radius are not pixels, they should not be scaled
- use "screen" instead of "Screen" which helps a lot in some places
This commit is contained in:
quadbyte 2025-08-07 23:18:05 -04:00
parent eda65a9948
commit d3be5b760b
43 changed files with 532 additions and 538 deletions
Download patch file Download diff file Expand all files Collapse all files

11
Bar/Bar.qml
View file

@ -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

2
Bar/Modules/ActiveWindow.qml
View file

@ -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

14
Bar/Modules/Applauncher.qml
View file

@ -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)

20
Bar/Modules/AudioDeviceSelector.qml
View file

@ -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
}

6
Bar/Modules/Calendar.qml
View file

@ -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
}

2
Bar/Modules/ClockWidget.qml
View file

@ -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
}

8
Bar/Modules/CustomTrayMenu.qml
View file

@ -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;

2
Bar/Modules/Media.qml
View file

@ -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

2
Bar/Modules/SettingsButton.qml
View file

@ -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
}

2
Bar/Modules/SystemTray.qml
View file

@ -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

18
Bar/Modules/Workspace.qml
View file

@ -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

2
Components/Avatar.qml
View file

@ -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

4
Components/CircularProgressBar.qml
View file

@ -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

6
Components/Corner.qml
View file

@ -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

4
Components/IconButton.qml
View file

@ -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

2
Components/Spinner.qml
View file

@ -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

14
Components/StyledTooltip.qml
View file

@ -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));
}
}

14
Components/Tabs.qml
View file

@ -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
}

24
Components/ToggleOption.qml
View file

@ -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)
}
}

13
Settings/Theme.qml
View file

@ -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;
}

4
Widgets/Dock.qml
View file

@ -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
}
}

4
Widgets/LockScreen/BatteryCharge.qml
View file

@ -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
}

90
Widgets/LockScreen/LockScreen.qml
View file

@ -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
}
}

86
Widgets/SettingsWindow/SettingsWindow.qml
View file

@ -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)

30
Widgets/SettingsWindow/Tabs/About.qml
View file

@ -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
}

4
Widgets/SettingsWindow/Tabs/Bar.qml
View file

@ -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 {

18
Widgets/SettingsWindow/Tabs/Components/UnitSelector.qml
View file

@ -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

16
Widgets/SettingsWindow/Tabs/Components/WallpaperSelector.qml
View file

@ -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
}
}

28
Widgets/SettingsWindow/Tabs/Display.qml
View file

@ -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
}
}

48
Widgets/SettingsWindow/Tabs/General.qml
View file

@ -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 {

8
Widgets/SettingsWindow/Tabs/Misc.qml
View file

@ -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

8
Widgets/SettingsWindow/Tabs/Network.qml
View file

@ -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 {

68
Widgets/SettingsWindow/Tabs/ScreenRecorder.qml
View file

@ -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

20
Widgets/SettingsWindow/Tabs/TimeWeather.qml
View file

@ -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

2
Widgets/SidePanel/Button.qml
View file

@ -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

120
Widgets/SidePanel/Music.qml
View file

@ -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)
}
}

84
Widgets/SidePanel/PanelPopup.qml
View file

@ -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 {

30
Widgets/SidePanel/PowerProfile.qml
View file

@ -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

4
Widgets/SidePanel/SettingsIcon.qml
View file

@ -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

4
Widgets/SidePanel/SettingsModal.qml
View file

@ -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

137
Widgets/SidePanel/System.qml
View file

@ -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()
}
}

40
Widgets/SidePanel/SystemMonitor.qml
View file

@ -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 {

47
Widgets/SidePanel/Weather.qml
View file

@ -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
}