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

Scaling: Replaced all Theme.uiScale by Theme.scale(Screen) so stuff scale accordingly to the Screen used by the Item/component

Browse source
This commit is contained in:
quadbyte 2025-08-07 14:09:18 -04:00
parent 3148dc62a0
commit cb74b6e5d5
50 changed files with 564 additions and 568 deletions
Download patch file Download diff file Expand all files Collapse all files

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.uiScale
font.pixelSize: 16 * Theme.scale(Screen)
color: sidebarPopup.visible ? Theme.accentPrimary : Theme.textPrimary
anchors.centerIn: parent
z: 1

122
Widgets/SidePanel/Music.qml
View file

@ -8,15 +8,15 @@ import qs.Services
Rectangle {
id: musicCard
width: 360 * Theme.uiScale
height: 250 * Theme.uiScale
width: 360 * Theme.scale(Screen)
height: 250 * Theme.scale(Screen)
color: "transparent"
Rectangle {
id: card
anchors.fill: parent
color: Theme.surface
radius: 18 * Theme.uiScale
radius: 18 * Theme.scale(Screen)
// Show fallback UI if no player is available
Item {
@ -26,12 +26,12 @@ Rectangle {
ColumnLayout {
anchors.centerIn: parent
spacing: 16 * Theme.uiScale
spacing: 16 * Theme.scale(Screen)
Text {
text: "music_note"
font.family: "Material Symbols Outlined"
font.pixelSize: Theme.fontSizeHeader * Theme.uiScale
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 +40,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.uiScale
font.pixelSize: Theme.fontSizeSmall * Theme.scale(Screen)
Layout.alignment: Qt.AlignHCenter
}
}
@ -49,45 +49,45 @@ Rectangle {
// Main player UI
ColumnLayout {
anchors.fill: parent
anchors.margins: 18 * Theme.uiScale
spacing: 12 * Theme.uiScale
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.uiScale
Layout.preferredHeight: 40 * Theme.scale(Screen)
visible: MusicManager.getAvailablePlayers().length > 1
model: MusicManager.getAvailablePlayers()
textRole: "identity"
currentIndex: MusicManager.selectedPlayerIndex
background: Rectangle {
implicitWidth: 120 * Theme.uiScale
implicitHeight: 40 * Theme.uiScale
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.uiScale
radius: 16 * Theme.uiScale
border.width: 1 * Theme.scale(Screen)
radius: 16 * Theme.scale(Screen)
}
contentItem: Text {
leftPadding: 12 * Theme.uiScale
leftPadding: 12 * Theme.scale(Screen)
rightPadding: playerSelector.indicator.width + playerSelector.spacing
text: playerSelector.displayText
font.pixelSize: 13 * Theme.uiScale
font.pixelSize: 13 * Theme.scale(Screen)
color: Theme.textPrimary
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
indicator: Text {
x: playerSelector.width - width - 12 * Theme.uiScale
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.uiScale
font.pixelSize: 24 * Theme.scale(Screen)
color: Theme.textPrimary
}
@ -95,7 +95,7 @@ Rectangle {
y: playerSelector.height
width: playerSelector.width
implicitHeight: contentItem.implicitHeight
padding: 1 * Theme.uiScale
padding: 1 * Theme.scale(Screen)
contentItem: ListView {
clip: true
@ -109,8 +109,8 @@ Rectangle {
background: Rectangle {
color: Theme.surfaceVariant
border.color: Theme.outline
border.width: 1 * Theme.uiScale
radius: 16 * Theme.uiScale
border.width: 1 * Theme.scale(Screen)
radius: 16 * Theme.scale(Screen)
}
}
@ -118,7 +118,7 @@ Rectangle {
width: playerSelector.width
contentItem: Text {
text: modelData.identity
font.pixelSize: 13 * Theme.uiScale
font.pixelSize: 13 * Theme.scale(Screen)
color: Theme.textPrimary
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
@ -138,14 +138,14 @@ Rectangle {
// Album art with spectrum visualizer
RowLayout {
spacing: 12 * Theme.uiScale
spacing: 12 * Theme.scale(Screen)
Layout.fillWidth: true
// Album art container with circular spectrum overlay
Item {
id: albumArtContainer
width: 96 * Theme.uiScale
height: 96 * Theme.uiScale // 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 +153,36 @@ Rectangle {
id: spectrum
values: MusicManager.cavaValues
anchors.centerIn: parent
innerRadius: 30 * Theme.uiScale // Position just outside 60x60 album art
outerRadius: 48 * Theme.uiScale // 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.uiScale
strokeWidth: 0 * Theme.scale(Screen)
z: 0
}
// Album art image
Rectangle {
id: albumArtwork
width: 60 * Theme.uiScale
height: 60 * Theme.uiScale
width: 60 * Theme.scale(Screen)
height: 60 * Theme.scale(Screen)
anchors.centerIn: parent
radius: 30 * Theme.uiScale // circle
radius: 30 * Theme.scale(Screen) // 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.uiScale
border.width: 1 * Theme.scale(Screen)
Image {
id: albumArt
anchors.fill: parent
anchors.margins: 2 * Theme.uiScale
anchors.margins: 2 * Theme.scale(Screen)
fillMode: Image.PreserveAspectCrop
smooth: true
mipmap: true
cache: false
asynchronous: true
sourceSize.width: 60 * Theme.uiScale
sourceSize.height: 60 * Theme.uiScale
sourceSize.width: 60 * Theme.scale(Screen)
sourceSize.height: 60 * Theme.scale(Screen)
source: MusicManager.trackArtUrl
visible: source.toString() !== ""
@ -213,7 +213,7 @@ Rectangle {
anchors.centerIn: parent
text: "album"
font.family: "Material Symbols Outlined"
font.pixelSize: Theme.fontSizeBody * Theme.uiScale
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 +223,13 @@ Rectangle {
// Track metadata
ColumnLayout {
Layout.fillWidth: true
spacing: 4 * Theme.uiScale
spacing: 4 * Theme.scale(Screen)
Text {
text: MusicManager.trackTitle
color: Theme.textPrimary
font.family: Theme.fontFamily
font.pixelSize: Theme.fontSizeSmall * Theme.uiScale
font.pixelSize: Theme.fontSizeSmall * Theme.scale(Screen)
font.bold: true
elide: Text.ElideRight
wrapMode: Text.Wrap
@ -241,7 +241,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.uiScale
font.pixelSize: Theme.fontSizeCaption * Theme.scale(Screen)
elide: Text.ElideRight
Layout.fillWidth: true
}
@ -250,7 +250,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.uiScale
font.pixelSize: Theme.fontSizeCaption * Theme.scale(Screen)
elide: Text.ElideRight
Layout.fillWidth: true
}
@ -261,8 +261,8 @@ Rectangle {
Rectangle {
id: progressBarBackground
width: parent.width
height: 6 * Theme.uiScale
radius: 3 * Theme.uiScale
height: 6 * Theme.scale(Screen)
radius: 3 * Theme.scale(Screen)
color: Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.15)
Layout.fillWidth: true
@ -290,12 +290,12 @@ Rectangle {
// Interactive progress handle
Rectangle {
id: progressHandle
width: 12 * Theme.uiScale
height: 12 * Theme.uiScale
radius: 6 * Theme.uiScale
width: 12 * Theme.scale(Screen)
height: 12 * Theme.scale(Screen)
radius: 6 * Theme.scale(Screen)
color: Theme.accentPrimary
border.color: Qt.lighter(Theme.accentPrimary, 1.3)
border.width: 1 * Theme.uiScale
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 +334,18 @@ Rectangle {
// Media controls
RowLayout {
spacing: 4 * Theme.uiScale
spacing: 4 * Theme.scale(Screen)
Layout.fillWidth: true
Layout.alignment: Qt.AlignHCenter
// Previous button
Rectangle {
width: 28 * Theme.uiScale
height: 28 * Theme.uiScale
radius: 14 * Theme.uiScale
width: 28 * Theme.scale(Screen)
height: 28 * Theme.scale(Screen)
radius: 14 * Theme.scale(Screen)
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.uiScale
border.width: 1 * Theme.scale(Screen)
MouseArea {
id: previousButton
@ -360,19 +360,19 @@ Rectangle {
anchors.centerIn: parent
text: "skip_previous"
font.family: "Material Symbols Outlined"
font.pixelSize: Theme.fontSizeCaption * Theme.uiScale
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.uiScale
height: 36 * Theme.uiScale
radius: 18 * Theme.uiScale
width: 36 * Theme.scale(Screen)
height: 36 * Theme.scale(Screen)
radius: 18 * Theme.scale(Screen)
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.uiScale
border.width: 2 * Theme.scale(Screen)
MouseArea {
id: playButton
@ -387,19 +387,19 @@ Rectangle {
anchors.centerIn: parent
text: MusicManager.isPlaying ? "pause" : "play_arrow"
font.family: "Material Symbols Outlined"
font.pixelSize: Theme.fontSizeBody * Theme.uiScale
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.uiScale
height: 28 * Theme.uiScale
radius: 14 * Theme.uiScale
width: 28 * Theme.scale(Screen)
height: 28 * Theme.scale(Screen)
radius: 14 * Theme.scale(Screen)
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.uiScale
border.width: 1 * Theme.scale(Screen)
MouseArea {
id: nextButton
@ -414,7 +414,7 @@ Rectangle {
anchors.centerIn: parent
text: "skip_next"
font.family: "Material Symbols Outlined"
font.pixelSize: Theme.fontSizeCaption * Theme.uiScale
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)
}
}

50
Widgets/SidePanel/PanelPopup.qml
View file

@ -45,8 +45,8 @@ PanelWithOverlay {
property real slideOffset: width
property bool isAnimating: false
property int leftPadding: 20 * Theme.uiScale
property int bottomPadding: 20 * Theme.uiScale
property int leftPadding: 20 * Theme.scale(Screen)
property int bottomPadding: 20 * Theme.scale(Screen)
// Recording properties
property bool isRecording: false
@ -126,8 +126,8 @@ PanelWithOverlay {
isRecording = false;
}
implicitWidth: 500 * Theme.uiScale
implicitHeight: 700 * Theme.uiScale
implicitWidth: 500 * Theme.scale(Screen)
implicitHeight: 700 * Theme.scale(Screen)
visible: parent.visible
color: "transparent"
anchors.top: parent.top
@ -176,7 +176,7 @@ PanelWithOverlay {
x: sidebarPopupRect.leftPadding + sidebarPopupRect.slideOffset
y: 0
color: Theme.backgroundPrimary
bottomLeftRadius: 20 * Theme.uiScale
bottomLeftRadius: 20 * Theme.scale(Screen)
z: 0
Behavior on x {
@ -211,8 +211,8 @@ PanelWithOverlay {
ColumnLayout {
anchors.fill: parent
anchors.margins: 20 * Theme.uiScale
spacing: 4 * Theme.uiScale
anchors.margins: 20 * Theme.scale(Screen)
spacing: 4 * Theme.scale(Screen)
PowerMenu {
id: systemWidget
@ -230,7 +230,7 @@ PanelWithOverlay {
// Music and System Monitor row
RowLayout {
spacing: 12 * Theme.uiScale
spacing: 12 * Theme.scale(Screen)
Layout.fillWidth: true
Layout.alignment: Qt.AlignHCenter
@ -248,37 +248,37 @@ PanelWithOverlay {
// Power profile, Record and Wallpaper row
RowLayout {
Layout.alignment: Qt.AlignVCenter
spacing: 10 * Theme.uiScale
Layout.preferredHeight: 80 * Theme.uiScale
spacing: 10 * Theme.scale(Screen)
Layout.preferredHeight: 80 * Theme.scale(Screen)
z: 3
PowerProfile {
Layout.alignment: Qt.AlignVCenter
Layout.preferredHeight: 80 * Theme.uiScale
Layout.preferredHeight: 80 * Theme.scale(Screen)
}
// Record and Wallpaper card
Rectangle {
Layout.preferredHeight: 80 * Theme.uiScale
Layout.preferredWidth: 140 * Theme.uiScale
Layout.preferredHeight: 80 * Theme.scale(Screen)
Layout.preferredWidth: 140 * Theme.scale(Screen)
Layout.fillWidth: false
color: Theme.surface
radius: 18 * Theme.uiScale
radius: 18 * Theme.scale(Screen)
Row {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
spacing: 20 * Theme.uiScale
spacing: 20 * Theme.scale(Screen)
// Record button
Rectangle {
id: recordButton
width: 36 * Theme.uiScale
height: 36 * Theme.uiScale
radius: 18 * Theme.uiScale
width: 36 * Theme.scale(Screen)
height: 36 * Theme.scale(Screen)
radius: 18 * Theme.scale(Screen)
border.color: Theme.accentPrimary
border.width: 1 * Theme.uiScale
border.width: 1 * Theme.scale(Screen)
color: sidebarPopupRect.isRecording ? Theme.accentPrimary :
(recordButtonArea.containsMouse ? Theme.accentPrimary : "transparent")
@ -286,7 +286,7 @@ PanelWithOverlay {
anchors.centerIn: parent
text: "photo_camera"
font.family: "Material Symbols Outlined"
font.pixelSize: 22 * Theme.uiScale
font.pixelSize: 22 * Theme.scale(Screen)
color: sidebarPopupRect.isRecording || recordButtonArea.containsMouse ? Theme.backgroundPrimary : Theme.accentPrimary
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
@ -321,18 +321,18 @@ PanelWithOverlay {
Rectangle {
id: wallpaperButton
width: 36 * Theme.uiScale
height: 36 * Theme.uiScale
radius: 18 * Theme.uiScale
width: 36 * Theme.scale(Screen)
height: 36 * Theme.scale(Screen)
radius: 18 * Theme.scale(Screen)
border.color: Theme.accentPrimary
border.width: 1 * Theme.uiScale
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.uiScale
font.pixelSize: 22 * Theme.scale(Screen)
color: wallpaperButtonArea.containsMouse ? Theme.backgroundPrimary : Theme.accentPrimary
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter

124
Widgets/SidePanel/PowerMenu.qml
View file

@ -44,8 +44,8 @@ Rectangle {
uptimeProcess.running = true;
}
width: 440 * Theme.uiScale
height: 80 * Theme.uiScale
width: 440 * Theme.scale(Screen)
height: 80 * Theme.scale(Screen)
color: "transparent"
anchors.horizontalCenterOffset: -2
onPanelVisibleChanged: {
@ -62,29 +62,29 @@ Rectangle {
anchors.fill: parent
color: Theme.surface
radius: 18 * Theme.uiScale
radius: 18 * Theme.scale(Screen)
ColumnLayout {
anchors.fill: parent
anchors.margins: 18 * Theme.uiScale
spacing: 12 * Theme.uiScale
anchors.margins: 18 * Theme.scale(Screen)
spacing: 12 * Theme.scale(Screen)
RowLayout {
Layout.fillWidth: true
spacing: 12 * Theme.uiScale
spacing: 12 * Theme.scale(Screen)
Rectangle {
width: 48 * Theme.uiScale
height: 48 * Theme.uiScale
radius: 24 * Theme.uiScale
width: 48 * Theme.scale(Screen)
height: 48 * Theme.scale(Screen)
radius: 24 * Theme.scale(Screen)
color: Theme.accentPrimary
Rectangle {
anchors.fill: parent
color: "transparent"
radius: 24 * Theme.uiScale
radius: 24 * Theme.scale(Screen)
border.color: Theme.accentPrimary
border.width: 2 * Theme.uiScale
border.width: 2 * Theme.scale(Screen)
z: 2
}
@ -94,13 +94,13 @@ Rectangle {
}
ColumnLayout {
spacing: 4 * Theme.uiScale
spacing: 4 * Theme.scale(Screen)
Layout.fillWidth: true
Text {
text: Quickshell.env("USER")
font.family: Theme.fontFamily
font.pixelSize: 16 * Theme.uiScale
font.pixelSize: 16 * Theme.scale(Screen)
font.bold: true
color: Theme.textPrimary
}
@ -108,7 +108,7 @@ Rectangle {
Text {
text: "System Uptime: " + uptimeText
font.family: Theme.fontFamily
font.pixelSize: 12 * Theme.uiScale
font.pixelSize: 12 * Theme.scale(Screen)
color: Theme.textSecondary
}
@ -121,19 +121,19 @@ Rectangle {
Rectangle {
id: settingsButton
width: 32 * Theme.uiScale
height: 32 * Theme.uiScale
radius: 16 * Theme.uiScale
width: 32 * Theme.scale(Screen)
height: 32 * Theme.scale(Screen)
radius: 16 * Theme.scale(Screen)
color: settingsButtonArea.containsMouse || settingsButtonArea.pressed ? Theme.accentPrimary : "transparent"
border.color: Theme.accentPrimary
border.width: 1 * Theme.uiScale
border.width: 1 * Theme.scale(Screen)
Text {
anchors.centerIn: parent
anchors.horizontalCenterOffset: -1
text: "settings"
font.family: "Material Symbols Outlined"
font.pixelSize: 16 * Theme.uiScale
font.pixelSize: 16 * Theme.scale(Screen)
color: settingsButtonArea.containsMouse || settingsButtonArea.pressed ? Theme.backgroundPrimary : Theme.accentPrimary
}
@ -162,18 +162,18 @@ Rectangle {
Rectangle {
id: systemButton
width: 32 * Theme.uiScale
height: 32 * Theme.uiScale
radius: 16 * Theme.uiScale
width: 32 * Theme.scale(Screen)
height: 32 * Theme.scale(Screen)
radius: 16 * Theme.scale(Screen)
color: systemButtonArea.containsMouse || systemButtonArea.pressed ? Theme.accentPrimary : "transparent"
border.color: Theme.accentPrimary
border.width: 1 * Theme.uiScale
border.width: 1 * Theme.scale(Screen)
Text {
anchors.centerIn: parent
text: "power_settings_new"
font.family: "Material Symbols Outlined"
font.pixelSize: 16 * Theme.uiScale
font.pixelSize: 16 * Theme.scale(Screen)
color: systemButtonArea.containsMouse || systemButtonArea.pressed ? Theme.backgroundPrimary : Theme.accentPrimary
}
@ -211,18 +211,18 @@ Rectangle {
anchors.right: systemButton.right
Rectangle {
width: 160 * Theme.uiScale
height: 220 * Theme.uiScale
width: 160 * Theme.scale(Screen)
height: 220 * Theme.scale(Screen)
color: Theme.surface
radius: 8 * Theme.uiScale
radius: 8 * Theme.scale(Screen)
border.color: Theme.outline
border.width: 1 * Theme.uiScale
border.width: 1 * Theme.scale(Screen)
visible: true
z: 9999
anchors.top: parent.top
anchors.right: parent.right
anchors.rightMargin: 32 * Theme.uiScale
anchors.topMargin: systemButton.y + systemButton.height + 48 * Theme.uiScale
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 {
@ -231,31 +231,31 @@ Rectangle {
ColumnLayout {
anchors.fill: parent
anchors.margins: 8 * Theme.uiScale
spacing: 4 * Theme.uiScale
anchors.margins: 8 * Theme.scale(Screen)
spacing: 4 * Theme.scale(Screen)
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 36 * Theme.uiScale
radius: 6 * Theme.uiScale
Layout.preferredHeight: 36 * Theme.scale(Screen)
radius: 6 * Theme.scale(Screen)
color: lockButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
RowLayout {
anchors.fill: parent
anchors.margins: 12 * Theme.uiScale
spacing: 8 * Theme.uiScale
anchors.margins: 12 * Theme.scale(Screen)
spacing: 8 * Theme.scale(Screen)
Text {
text: "lock_outline"
font.family: "Material Symbols Outlined"
font.pixelSize: 16 * Theme.uiScale
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.uiScale
font.pixelSize: 14 * Theme.scale(Screen)
color: lockButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
Layout.fillWidth: true
}
@ -278,25 +278,25 @@ Rectangle {
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 36 * Theme.uiScale
radius: 6 * Theme.uiScale
Layout.preferredHeight: 36 * Theme.scale(Screen)
radius: 6 * Theme.scale(Screen)
color: suspendButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
RowLayout {
anchors.fill: parent
anchors.margins: 12 * Theme.uiScale
spacing: 8 * Theme.uiScale
anchors.margins: 12 * Theme.scale(Screen)
spacing: 8 * Theme.scale(Screen)
Text {
text: "bedtime"
font.family: "Material Symbols Outlined"
font.pixelSize: 16 * Theme.uiScale
font.pixelSize: 16 * Theme.scale(Screen)
color: suspendButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
}
Text {
text: "Suspend"
font.pixelSize: 14 * Theme.uiScale
font.pixelSize: 14 * Theme.scale(Screen)
color: suspendButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
Layout.fillWidth: true
}
@ -319,26 +319,26 @@ Rectangle {
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 36 * Theme.uiScale
radius: 6 * Theme.uiScale
Layout.preferredHeight: 36 * Theme.scale(Screen)
radius: 6 * Theme.scale(Screen)
color: rebootButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
RowLayout {
anchors.fill: parent
anchors.margins: 12 * Theme.uiScale
spacing: 8 * Theme.uiScale
anchors.margins: 12 * Theme.scale(Screen)
spacing: 8 * Theme.scale(Screen)
Text {
text: "refresh"
font.family: "Material Symbols Outlined"
font.pixelSize: 16 * Theme.uiScale
font.pixelSize: 16 * Theme.scale(Screen)
color: rebootButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
}
Text {
text: "Reboot"
font.family: Theme.fontFamily
font.pixelSize: 14 * Theme.uiScale
font.pixelSize: 14 * Theme.scale(Screen)
color: rebootButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
Layout.fillWidth: true
}
@ -361,25 +361,25 @@ Rectangle {
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 36 * Theme.uiScale
radius: 6 * Theme.uiScale
Layout.preferredHeight: 36 * Theme.scale(Screen)
radius: 6 * Theme.scale(Screen)
color: logoutButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
RowLayout {
anchors.fill: parent
anchors.margins: 12 * Theme.uiScale
spacing: 8 * Theme.uiScale
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.uiScale
font.pixelSize: 16 * Theme.scale(Screen)
color: logoutButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
}
Text {
text: "Logout"
font.pixelSize: 14 * Theme.uiScale
font.pixelSize: 14 * Theme.scale(Screen)
color: logoutButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
Layout.fillWidth: true
}
@ -402,25 +402,25 @@ Rectangle {
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 36 * Theme.uiScale
radius: 6 * Theme.uiScale
Layout.preferredHeight: 36 * Theme.scale(Screen)
radius: 6 * Theme.scale(Screen)
color: shutdownButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
RowLayout {
anchors.fill: parent
anchors.margins: 12 * Theme.uiScale
spacing: 8 * Theme.uiScale
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.uiScale
font.pixelSize: 16 * Theme.scale(Screen)
color: shutdownButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
}
Text {
text: "Shutdown"
font.pixelSize: 14 * Theme.uiScale
font.pixelSize: 14 * Theme.scale(Screen)
color: shutdownButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
Layout.fillWidth: true
}

32
Widgets/SidePanel/PowerProfile.qml
View file

@ -7,22 +7,22 @@ import qs.Components
Rectangle {
id: card
width: 200 * Theme.uiScale
height: 70 * Theme.uiScale
width: 200 * Theme.scale(Screen)
height: 70 * Theme.scale(Screen)
color: Theme.surface
radius: 18 * Theme.uiScale
radius: 18 * Theme.scale(Screen)
Row {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
spacing: 20 * Theme.uiScale
spacing: 20 * Theme.scale(Screen)
Rectangle {
width: 36 * Theme.uiScale; height: 36 * Theme.uiScale
radius: 18 * Theme.uiScale
width: 36 * Theme.scale(Screen); height: 36 * Theme.scale(Screen)
radius: 18 * Theme.scale(Screen)
border.color: Theme.accentPrimary
border.width: 1 * Theme.uiScale
border.width: 1 * Theme.scale(Screen)
color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.Performance)
? Theme.accentPrimary
: (perfMouseArea.containsMouse ? Theme.accentPrimary : "transparent")
@ -33,7 +33,7 @@ Rectangle {
anchors.centerIn: parent
text: "speed"
font.family: "Material Symbols Outlined"
font.pixelSize: 22 * Theme.uiScale
font.pixelSize: 22 * Theme.scale(Screen)
color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.Performance) || perfMouseArea.containsMouse
? Theme.backgroundPrimary
: Theme.accentPrimary
@ -65,10 +65,10 @@ Rectangle {
Rectangle {
width: 36 * Theme.uiScale; height: 36 * Theme.uiScale
radius: 18 * Theme.uiScale
width: 36 * Theme.scale(Screen); height: 36 * Theme.scale(Screen)
radius: 18 * Theme.scale(Screen)
border.color: Theme.accentPrimary
border.width: 1 * Theme.uiScale
border.width: 1 * Theme.scale(Screen)
color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.Balanced)
? Theme.accentPrimary
: (balMouseArea.containsMouse ? Theme.accentPrimary : "transparent")
@ -79,7 +79,7 @@ Rectangle {
anchors.centerIn: parent
text: "balance"
font.family: "Material Symbols Outlined"
font.pixelSize: 22 * Theme.uiScale
font.pixelSize: 22 * Theme.scale(Screen)
color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.Balanced) || balMouseArea.containsMouse
? Theme.backgroundPrimary
: Theme.accentPrimary
@ -111,10 +111,10 @@ Rectangle {
Rectangle {
width: 36 * Theme.uiScale; height: 36 * Theme.uiScale
radius: 18 * Theme.uiScale
width: 36 * Theme.scale(Screen); height: 36 * Theme.scale(Screen)
radius: 18 * Theme.scale(Screen)
border.color: Theme.accentPrimary
border.width: 1 * Theme.uiScale
border.width: 1 * Theme.scale(Screen)
color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.PowerSaver)
? Theme.accentPrimary
: (saveMouseArea.containsMouse ? Theme.accentPrimary : "transparent")
@ -125,7 +125,7 @@ Rectangle {
anchors.centerIn: parent
text: "eco"
font.family: "Material Symbols Outlined"
font.pixelSize: 22 * Theme.uiScale
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.uiScale
implicitHeight: 780 * Theme.uiScale
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.uiScale
implicitHeight: 780 * Theme.uiScale
implicitWidth: 480 * Theme.scale(Screen)
implicitHeight: 780 * Theme.scale(Screen)
visible: false
color: "transparent"
anchors.top: true

42
Widgets/SidePanel/SystemMonitor.qml
View file

@ -8,8 +8,8 @@ import qs.Settings
Rectangle {
id: systemMonitor
width: 70 * Theme.uiScale
height: 250 * Theme.uiScale
width: 70 * Theme.scale(Screen)
height: 250 * Theme.scale(Screen)
color: "transparent"
// Track visibility state for panel integration
@ -19,26 +19,26 @@ Rectangle {
id: card
anchors.fill: parent
color: Theme.surface
radius: 18 * Theme.uiScale
radius: 18 * Theme.scale(Screen)
ColumnLayout {
anchors.fill: parent
anchors.margins: 8 * Theme.uiScale
spacing: 12 * Theme.uiScale
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.uiScale; height: 50 * Theme.uiScale
width: 50 * Theme.scale(Screen); height: 50 * Theme.scale(Screen)
CircularProgressBar {
id: cpuBar
progress: Sysinfo.cpuUsage / 100
size: 50 * Theme.uiScale
strokeWidth: 4 * Theme.uiScale
size: 50 * Theme.scale(Screen)
strokeWidth: 4 * Theme.scale(Screen)
hasNotch: true
notchIcon: "speed"
notchIconSize: 14 * Theme.uiScale
notchIconSize: 14 * Theme.scale(Screen)
Layout.alignment: Qt.AlignHCenter
}
MouseArea {
@ -60,16 +60,16 @@ Rectangle {
// CPU temperature indicator with circular progress bar
Item {
width: 50 * Theme.uiScale; height: 50 * Theme.uiScale
width: 50 * Theme.scale(Screen); height: 50 * Theme.scale(Screen)
CircularProgressBar {
id: tempBar
progress: Sysinfo.cpuTemp / 100
size: 50 * Theme.uiScale
strokeWidth: 4 * Theme.uiScale
size: 50 * Theme.scale(Screen)
strokeWidth: 4 * Theme.scale(Screen)
hasNotch: true
units: "°C"
notchIcon: "thermometer"
notchIconSize: 14 * Theme.uiScale
notchIconSize: 14 * Theme.scale(Screen)
Layout.alignment: Qt.AlignHCenter
}
MouseArea {
@ -91,15 +91,15 @@ Rectangle {
// Memory usage indicator with circular progress bar
Item {
width: 50 * Theme.uiScale; height: 50 * Theme.uiScale
width: 50 * Theme.scale(Screen); height: 50 * Theme.scale(Screen)
CircularProgressBar {
id: memBar
progress: Sysinfo.memoryUsagePer / 100
size: 50 * Theme.uiScale
strokeWidth: 4 * Theme.uiScale
size: 50 * Theme.scale(Screen)
strokeWidth: 4 * Theme.scale(Screen)
hasNotch: true
notchIcon: "memory"
notchIconSize: 14 * Theme.uiScale
notchIconSize: 14 * Theme.scale(Screen)
Layout.alignment: Qt.AlignHCenter
}
MouseArea {
@ -121,15 +121,15 @@ Rectangle {
// Disk usage indicator with circular progress bar
Item {
width: 50 * Theme.uiScale; height: 50 * Theme.uiScale
width: 50 * Theme.scale(Screen); height: 50 * Theme.scale(Screen)
CircularProgressBar {
id: diskBar
progress: Sysinfo.diskUsage / 100
size: 50 * Theme.uiScale
strokeWidth: 4 * Theme.uiScale
size: 50 * Theme.scale(Screen)
strokeWidth: 4 * Theme.scale(Screen)
hasNotch: true
notchIcon: "storage"
notchIconSize: 14 * Theme.uiScale
notchIconSize: 14 * Theme.scale(Screen)
Layout.alignment: Qt.AlignHCenter
}
MouseArea {

48
Widgets/SidePanel/Weather.qml
View file

@ -6,8 +6,8 @@ import "../../Helpers/Weather.js" as WeatherHelper
Rectangle {
id: weatherRoot
width: 440 * Theme.uiScale
height: 180 * Theme.uiScale
width: 440 * Theme.scale(Screen)
height: 180 * Theme.scale(Screen)
color: "transparent"
anchors.horizontalCenterOffset: -2
@ -83,29 +83,29 @@ Rectangle {
id: card
anchors.fill: parent
color: Theme.surface
radius: 18 * Theme.uiScale
radius: 18 * Theme.scale(Screen)
ColumnLayout {
anchors.fill: parent
anchors.margins: 18 * Theme.uiScale
spacing: 12 * Theme.uiScale
anchors.margins: 18 * Theme.scale(Screen)
spacing: 12 * Theme.scale(Screen)
RowLayout {
spacing: 12 * Theme.uiScale
spacing: 12 * Theme.scale(Screen)
Layout.fillWidth: true
RowLayout {
spacing: 12 * Theme.uiScale
Layout.preferredWidth: 140 * Theme.uiScale
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.uiScale
font.pixelSize: 28 * Theme.scale(Screen)
verticalAlignment: Text.AlignVCenter
color: isLoading ? Theme.accentPrimary : Theme.accentPrimary
Layout.alignment: Qt.AlignVCenter
@ -121,28 +121,28 @@ Rectangle {
}
ColumnLayout {
spacing: 2 * Theme.uiScale
spacing: 2 * Theme.scale(Screen)
RowLayout {
spacing: 4 * Theme.uiScale
spacing: 4 * Theme.scale(Screen)
Text {
text: city
font.family: Theme.fontFamily
font.pixelSize: 14 * Theme.uiScale
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.uiScale
font.pixelSize: 10 * Theme.scale(Screen)
color: Theme.textSecondary
leftPadding: 2 * Theme.uiScale
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.uiScale
font.pixelSize: 24 * Theme.scale(Screen)
font.bold: true
color: Theme.textPrimary
}
@ -157,16 +157,16 @@ Rectangle {
Rectangle {
width: parent.width
height: 1 * Theme.uiScale
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.uiScale
Layout.bottomMargin: 2 * Theme.uiScale
Layout.topMargin: 2 * Theme.scale(Screen)
Layout.bottomMargin: 2 * Theme.scale(Screen)
}
RowLayout {
spacing: 12 * Theme.uiScale
spacing: 12 * Theme.scale(Screen)
Layout.fillWidth: true
Layout.alignment: Qt.AlignHCenter
visible: weatherData && weatherData.daily && weatherData.daily.time
@ -174,13 +174,13 @@ Rectangle {
Repeater {
model: weatherData && weatherData.daily && weatherData.daily.time ? 5 : 0
delegate: ColumnLayout {
spacing: 2 * Theme.uiScale
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.uiScale
font.pixelSize: 12 * Theme.scale(Screen)
color: Theme.textSecondary
horizontalAlignment: Text.AlignHCenter
Layout.alignment: Qt.AlignHCenter
@ -189,7 +189,7 @@ Rectangle {
text: materialSymbolForCode(weatherData.daily.weathercode[index])
font.family: "Material Symbols Outlined"
font.pixelSize: 22 * Theme.uiScale
font.pixelSize: 22 * Theme.scale(Screen)
color: Theme.accentPrimary
horizontalAlignment: Text.AlignHCenter
Layout.alignment: Qt.AlignHCenter
@ -198,7 +198,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.uiScale
font.pixelSize: 12 * Theme.scale(Screen)
color: Theme.textPrimary
horizontalAlignment: Text.AlignHCenter
Layout.alignment: Qt.AlignHCenter
@ -213,7 +213,7 @@ Rectangle {
color: Theme.error
visible: errorString !== ""
font.family: Theme.fontFamily
font.pixelSize: 10 * Theme.uiScale
font.pixelSize: 10 * Theme.scale(Screen)
horizontalAlignment: Text.AlignHCenter
Layout.alignment: Qt.AlignHCenter
}