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

Add scaling to everything, edit SidePanel

Browse source
This commit is contained in:
Ly-sec 2025-08-07 15:38:27 +02:00
parent 68d7add474
commit 0b49aff13d
52 changed files with 3138 additions and 3043 deletions
Download patch file Download diff file Expand all files Collapse all files

122
Widgets/SidePanel/Music.qml
View file

@ -8,15 +8,15 @@ import qs.Services
Rectangle {
id: musicCard
width: 360
height: 250
width: 360 * Theme.uiScale
height: 250 * Theme.uiScale
color: "transparent"
Rectangle {
id: card
anchors.fill: parent
color: Theme.surface
radius: 18
radius: 18 * Theme.uiScale
// Show fallback UI if no player is available
Item {
@ -26,12 +26,12 @@ Rectangle {
ColumnLayout {
anchors.centerIn: parent
spacing: 16
spacing: 16 * Theme.uiScale
Text {
text: "music_note"
font.family: "Material Symbols Outlined"
font.pixelSize: Theme.fontSizeHeader
font.pixelSize: Theme.fontSizeHeader * Theme.uiScale
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
font.pixelSize: Theme.fontSizeSmall * Theme.uiScale
Layout.alignment: Qt.AlignHCenter
}
}
@ -49,45 +49,45 @@ Rectangle {
// Main player UI
ColumnLayout {
anchors.fill: parent
anchors.margins: 18
spacing: 12
anchors.margins: 18 * Theme.uiScale
spacing: 12 * Theme.uiScale
visible: !!MusicManager.currentPlayer
// Player selector
ComboBox {
id: playerSelector
Layout.fillWidth: true
Layout.preferredHeight: 40
Layout.preferredHeight: 40 * Theme.uiScale
visible: MusicManager.getAvailablePlayers().length > 1
model: MusicManager.getAvailablePlayers()
textRole: "identity"
currentIndex: MusicManager.selectedPlayerIndex
background: Rectangle {
implicitWidth: 120
implicitHeight: 40
implicitWidth: 120 * Theme.uiScale
implicitHeight: 40 * Theme.uiScale
color: Theme.surfaceVariant
border.color: playerSelector.activeFocus ? Theme.accentPrimary : Theme.outline
border.width: 1
radius: 16
border.width: 1 * Theme.uiScale
radius: 16 * Theme.uiScale
}
contentItem: Text {
leftPadding: 12
leftPadding: 12 * Theme.uiScale
rightPadding: playerSelector.indicator.width + playerSelector.spacing
text: playerSelector.displayText
font.pixelSize: 13
font.pixelSize: 13 * Theme.uiScale
color: Theme.textPrimary
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
indicator: Text {
x: playerSelector.width - width - 12
x: playerSelector.width - width - 12 * Theme.uiScale
y: playerSelector.topPadding + (playerSelector.availableHeight - height) / 2
text: "arrow_drop_down"
font.family: "Material Symbols Outlined"
font.pixelSize: 24
font.pixelSize: 24 * Theme.uiScale
color: Theme.textPrimary
}
@ -95,7 +95,7 @@ Rectangle {
y: playerSelector.height
width: playerSelector.width
implicitHeight: contentItem.implicitHeight
padding: 1
padding: 1 * Theme.uiScale
contentItem: ListView {
clip: true
@ -109,8 +109,8 @@ Rectangle {
background: Rectangle {
color: Theme.surfaceVariant
border.color: Theme.outline
border.width: 1
radius: 16
border.width: 1 * Theme.uiScale
radius: 16 * Theme.uiScale
}
}
@ -118,7 +118,7 @@ Rectangle {
width: playerSelector.width
contentItem: Text {
text: modelData.identity
font.pixelSize: 13
font.pixelSize: 13 * Theme.uiScale
color: Theme.textPrimary
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
@ -138,14 +138,14 @@ Rectangle {
// Album art with spectrum visualizer
RowLayout {
spacing: 12
spacing: 12 * Theme.uiScale
Layout.fillWidth: true
// Album art container with circular spectrum overlay
Item {
id: albumArtContainer
width: 96
height: 96 // enough for spectrum and art (will adjust if needed)
width: 96 * Theme.uiScale
height: 96 * Theme.uiScale // 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 // Position just outside 60x60 album art
outerRadius: 48 // Extend bars outward from album art
innerRadius: 30 * Theme.uiScale // Position just outside 60x60 album art
outerRadius: 48 * Theme.uiScale // Extend bars outward from album art
fillColor: Theme.accentPrimary
strokeColor: Theme.accentPrimary
strokeWidth: 0
strokeWidth: 0 * Theme.uiScale
z: 0
}
// Album art image
Rectangle {
id: albumArtwork
width: 60
height: 60
width: 60 * Theme.uiScale
height: 60 * Theme.uiScale
anchors.centerIn: parent
radius: 30 // circle
radius: 30 * Theme.uiScale // 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
border.width: 1 * Theme.uiScale
Image {
id: albumArt
anchors.fill: parent
anchors.margins: 2
anchors.margins: 2 * Theme.uiScale
fillMode: Image.PreserveAspectCrop
smooth: true
mipmap: true
cache: false
asynchronous: true
sourceSize.width: 60
sourceSize.height: 60
sourceSize.width: 60 * Theme.uiScale
sourceSize.height: 60 * Theme.uiScale
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
font.pixelSize: Theme.fontSizeBody * Theme.uiScale
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
spacing: 4 * Theme.uiScale
Text {
text: MusicManager.trackTitle
color: Theme.textPrimary
font.family: Theme.fontFamily
font.pixelSize: Theme.fontSizeSmall
font.pixelSize: Theme.fontSizeSmall * Theme.uiScale
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
font.pixelSize: Theme.fontSizeCaption * Theme.uiScale
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
font.pixelSize: Theme.fontSizeCaption * Theme.uiScale
elide: Text.ElideRight
Layout.fillWidth: true
}
@ -261,8 +261,8 @@ Rectangle {
Rectangle {
id: progressBarBackground
width: parent.width
height: 6
radius: 3
height: 6 * Theme.uiScale
radius: 3 * Theme.uiScale
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
height: 12
radius: 6
width: 12 * Theme.uiScale
height: 12 * Theme.uiScale
radius: 6 * Theme.uiScale
color: Theme.accentPrimary
border.color: Qt.lighter(Theme.accentPrimary, 1.3)
border.width: 1
border.width: 1 * Theme.uiScale
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
spacing: 4 * Theme.uiScale
Layout.fillWidth: true
Layout.alignment: Qt.AlignHCenter
// Previous button
Rectangle {
width: 28
height: 28
radius: 14
width: 28 * Theme.uiScale
height: 28 * Theme.uiScale
radius: 14 * Theme.uiScale
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
border.width: 1 * Theme.uiScale
MouseArea {
id: previousButton
@ -360,19 +360,19 @@ Rectangle {
anchors.centerIn: parent
text: "skip_previous"
font.family: "Material Symbols Outlined"
font.pixelSize: Theme.fontSizeCaption
font.pixelSize: Theme.fontSizeCaption * Theme.uiScale
color: previousButton.enabled ? Theme.accentPrimary : Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.3)
}
}
// Play/Pause button
Rectangle {
width: 36
height: 36
radius: 18
width: 36 * Theme.uiScale
height: 36 * Theme.uiScale
radius: 18 * Theme.uiScale
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
border.width: 2 * Theme.uiScale
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
font.pixelSize: Theme.fontSizeBody * Theme.uiScale
color: playButton.enabled ? Theme.accentPrimary : Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.3)
}
}
// Next button
Rectangle {
width: 28
height: 28
radius: 14
width: 28 * Theme.uiScale
height: 28 * Theme.uiScale
radius: 14 * Theme.uiScale
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
border.width: 1 * Theme.uiScale
MouseArea {
id: nextButton
@ -414,7 +414,7 @@ Rectangle {
anchors.centerIn: parent
text: "skip_next"
font.family: "Material Symbols Outlined"
font.pixelSize: Theme.fontSizeCaption
font.pixelSize: Theme.fontSizeCaption * Theme.uiScale
color: nextButton.enabled ? Theme.accentPrimary : Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.3)
}
}