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

Better radius in SidePanel

Browse source
This commit is contained in:
quadbyte 2025-08-08 08:24:24 -04:00
parent d3c9820ddb
commit ab0cda45ea
6 changed files with 133 additions and 119 deletions
Download patch file Download diff file Expand all files Collapse all files

14
Widgets/SidePanel/Music.qml
View file

@ -14,7 +14,7 @@ Rectangle {
id: card id: card
anchors.fill: parent anchors.fill: parent
color: Theme.surface color: Theme.surface
radius: 18 radius: 18 * Theme.scale(Screen)
// Show fallback UI if no player is available // Show fallback UI if no player is available
Item { Item {
@ -67,7 +67,7 @@ Rectangle {
color: Theme.surfaceVariant color: Theme.surfaceVariant
border.color: playerSelector.activeFocus ? Theme.accentPrimary : Theme.outline border.color: playerSelector.activeFocus ? Theme.accentPrimary : Theme.outline
border.width: 1 * Theme.scale(screen) border.width: 1 * Theme.scale(screen)
radius: 16 radius: 16 * Theme.scale(Screen)
} }
contentItem: Text { contentItem: Text {
@ -165,7 +165,7 @@ Rectangle {
width: 60 * Theme.scale(screen) width: 60 * Theme.scale(screen)
height: 60 * Theme.scale(screen) height: 60 * Theme.scale(screen)
anchors.centerIn: parent anchors.centerIn: parent
radius: 30 // circle radius: width * 0.5
color: Qt.darker(Theme.surface, 1.1) color: Qt.darker(Theme.surface, 1.1)
border.color: Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.3) 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)
@ -290,7 +290,7 @@ Rectangle {
id: progressHandle id: progressHandle
width: 12 * Theme.scale(screen) width: 12 * Theme.scale(screen)
height: 12 * Theme.scale(screen) height: 12 * Theme.scale(screen)
radius: 6 radius: width * 0.5
color: Theme.accentPrimary color: Theme.accentPrimary
border.color: Qt.lighter(Theme.accentPrimary, 1.3) border.color: Qt.lighter(Theme.accentPrimary, 1.3)
border.width: 1 * Theme.scale(screen) border.width: 1 * Theme.scale(screen)
@ -340,7 +340,7 @@ Rectangle {
Rectangle { Rectangle {
width: 28 * Theme.scale(screen) width: 28 * Theme.scale(screen)
height: 28 * Theme.scale(screen) height: 28 * Theme.scale(screen)
radius: 14 radius: width * 0.5
color: previousButton.containsMouse ? Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.2) : Qt.darker(Theme.surface, 1.1) 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.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)
@ -367,7 +367,7 @@ Rectangle {
Rectangle { Rectangle {
width: 36 * Theme.scale(screen) width: 36 * Theme.scale(screen)
height: 36 * Theme.scale(screen) height: 36 * Theme.scale(screen)
radius: 18 radius: width * 0.5
color: playButton.containsMouse ? Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.2) : Qt.darker(Theme.surface, 1.1) 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.color: Theme.accentPrimary
border.width: 2 * Theme.scale(screen) border.width: 2 * Theme.scale(screen)
@ -394,7 +394,7 @@ Rectangle {
Rectangle { Rectangle {
width: 28 * Theme.scale(screen) width: 28 * Theme.scale(screen)
height: 28 * Theme.scale(screen) height: 28 * Theme.scale(screen)
radius: 14 radius: width * 0.5
color: nextButton.containsMouse ? Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.2) : Qt.darker(Theme.surface, 1.1) 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.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)

105
Widgets/SidePanel/PanelPopup.qml
View file

@ -245,6 +245,7 @@ PanelWithOverlay {
} }
RowLayout { RowLayout {
spacing: 8 * Theme.scale(screen) spacing: 8 * Theme.scale(screen)
Layout.fillWidth: true Layout.fillWidth: true
@ -256,113 +257,11 @@ PanelWithOverlay {
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
} }
// Record and Wallpaper card Shortcuts {
Rectangle {
width: 206 * Theme.scale(screen) width: 206 * Theme.scale(screen)
height: 70 * Theme.scale(screen) height: 70 * Theme.scale(screen)
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
color: Theme.surface
radius: 16
Row {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
spacing: 20 * Theme.scale(screen)
// Record button
Rectangle {
id: recordButton
width: 36 * Theme.scale(screen)
height: 36 * Theme.scale(screen)
radius: 18
border.color: Theme.accentPrimary
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)
color: sidebarPopupRect.isRecording || recordButtonArea.containsMouse ? Theme.backgroundPrimary : Theme.accentPrimary
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
}
MouseArea {
id: recordButtonArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
if (sidebarPopupRect.isRecording) {
sidebarPopupRect.stopRecording();
sidebarPopup.dismiss();
} else {
sidebarPopupRect.startRecording();
sidebarPopup.dismiss();
}
}
}
StyledTooltip {
text: sidebarPopupRect.isRecording ? "Stop Recording" : "Start Recording"
targetItem: recordButtonArea
tooltipVisible: recordButtonArea.containsMouse
}
}
// Wallpaper button
Rectangle {
id: wallpaperButton
width: 36 * Theme.scale(screen)
height: 36 * Theme.scale(screen)
radius: 18
border.color: Theme.accentPrimary
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)
color: wallpaperButtonArea.containsMouse ? Theme.backgroundPrimary : Theme.accentPrimary
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
}
MouseArea {
id: wallpaperButtonArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
if (typeof settingsModal !== 'undefined' && settingsModal && settingsModal.openSettings) {
settingsModal.openSettings(6);
sidebarPopup.dismiss();
}
}
}
StyledTooltip {
text: "Wallpaper"
targetItem: wallpaperButtonArea
tooltipVisible: wallpaperButtonArea.containsMouse
}
}
}
} }
} }
Rectangle { Rectangle {

8
Widgets/SidePanel/PowerProfile.qml
View file

@ -8,7 +8,7 @@ import qs.Components
Rectangle { Rectangle {
id: card id: card
color: Theme.surface color: Theme.surface
radius: 16 radius: 18 * Theme.scale(Screen)
Row { Row {
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
@ -18,7 +18,7 @@ Rectangle {
Rectangle { Rectangle {
width: 36 * Theme.scale(screen); height: 36 * Theme.scale(screen) width: 36 * Theme.scale(screen); height: 36 * Theme.scale(screen)
radius: 16 radius: width * 0.5
border.color: Theme.accentPrimary border.color: Theme.accentPrimary
border.width: 1 * Theme.scale(screen) border.width: 1 * Theme.scale(screen)
color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.Performance) color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.Performance)
@ -64,7 +64,7 @@ Rectangle {
Rectangle { Rectangle {
width: 36 * Theme.scale(screen); height: 36 * Theme.scale(screen) width: 36 * Theme.scale(screen); height: 36 * Theme.scale(screen)
radius: 18 radius: width * 0.5
border.color: Theme.accentPrimary border.color: Theme.accentPrimary
border.width: 1 * Theme.scale(screen) border.width: 1 * Theme.scale(screen)
color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.Balanced) color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.Balanced)
@ -110,7 +110,7 @@ Rectangle {
Rectangle { Rectangle {
width: 36 * Theme.scale(screen); height: 36 * Theme.scale(screen) width: 36 * Theme.scale(screen); height: 36 * Theme.scale(screen)
radius: 18 radius: width * 0.5
border.color: Theme.accentPrimary border.color: Theme.accentPrimary
border.width: 1 * Theme.scale(screen) border.width: 1 * Theme.scale(screen)
color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.PowerSaver) color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.PowerSaver)

114
Widgets/SidePanel/Shortcuts.qml Normal file
View file

@ -0,0 +1,114 @@
import QtQuick
import QtQuick.Layouts
import Quickshell
import Quickshell.Io
import Quickshell.Wayland
import qs.Components
import qs.Settings
import qs.Widgets.SettingsWindow
// Record and Wallpaper card
Rectangle {
color: Theme.surface
radius: 18 * Theme.scale(Screen)
Row {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
spacing: 20 * Theme.scale(screen)
// Record button
Rectangle {
id: recordButton
width: 36 * Theme.scale(screen)
height: 36 * Theme.scale(screen)
radius: width * 0.5
border.color: Theme.accentPrimary
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)
color: sidebarPopupRect.isRecording || recordButtonArea.containsMouse ? Theme.backgroundPrimary : Theme.accentPrimary
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
}
MouseArea {
id: recordButtonArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
if (sidebarPopupRect.isRecording) {
sidebarPopupRect.stopRecording();
sidebarPopup.dismiss();
} else {
sidebarPopupRect.startRecording();
sidebarPopup.dismiss();
}
}
}
StyledTooltip {
text: sidebarPopupRect.isRecording ? "Stop Recording" : "Start Recording"
targetItem: recordButtonArea
tooltipVisible: recordButtonArea.containsMouse
}
}
// Wallpaper button
Rectangle {
id: wallpaperButton
width: 36 * Theme.scale(screen)
height: 36 * Theme.scale(screen)
radius: width * 0.5
border.color: Theme.accentPrimary
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)
color: wallpaperButtonArea.containsMouse ? Theme.backgroundPrimary : Theme.accentPrimary
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
}
MouseArea {
id: wallpaperButtonArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
if (typeof settingsModal !== 'undefined' && settingsModal && settingsModal.openSettings) {
settingsModal.openSettings(6);
sidebarPopup.dismiss();
}
}
}
StyledTooltip {
text: "Wallpaper"
targetItem: wallpaperButtonArea
tooltipVisible: wallpaperButtonArea.containsMouse
}
}
}
}

6
Widgets/SidePanel/System.qml
View file

@ -82,7 +82,7 @@ Rectangle {
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
color: "transparent" color: "transparent"
radius: 24 * Theme.scale(Screen) radius: width * 0.5
border.color: Theme.accentPrimary border.color: Theme.accentPrimary
border.width: 2 * Theme.scale(Screen) border.width: 2 * Theme.scale(Screen)
z: 2 z: 2
@ -123,7 +123,7 @@ Rectangle {
width: 32 * Theme.scale(Screen) width: 32 * Theme.scale(Screen)
height: 32 * Theme.scale(Screen) height: 32 * Theme.scale(Screen)
radius: 16 * Theme.scale(Screen) radius: width * 0.5
color: settingsButtonArea.containsMouse || settingsButtonArea.pressed ? Theme.accentPrimary : "transparent" color: settingsButtonArea.containsMouse || settingsButtonArea.pressed ? Theme.accentPrimary : "transparent"
border.color: Theme.accentPrimary border.color: Theme.accentPrimary
border.width: 1 * Theme.scale(Screen) border.width: 1 * Theme.scale(Screen)
@ -166,7 +166,7 @@ Rectangle {
width: 32 * Theme.scale(Screen) width: 32 * Theme.scale(Screen)
height: 32 * Theme.scale(Screen) height: 32 * Theme.scale(Screen)
radius: width / 2 radius: width * 0.5
color: systemButtonArea.containsMouse || systemButtonArea.pressed ? Theme.accentPrimary : "transparent" color: systemButtonArea.containsMouse || systemButtonArea.pressed ? Theme.accentPrimary : "transparent"
border.color: Theme.accentPrimary border.color: Theme.accentPrimary
border.width: 1 * Theme.scale(Screen) border.width: 1 * Theme.scale(Screen)

5
Widgets/SidePanel/SystemMonitor.qml
View file

@ -17,7 +17,7 @@ Rectangle {
id: card id: card
anchors.fill: parent anchors.fill: parent
color: Theme.surface color: Theme.surface
radius: 18 radius: 18 * Theme.scale(Screen)
ColumnLayout { ColumnLayout {
anchors.fill: parent anchors.fill: parent
@ -28,7 +28,8 @@ Rectangle {
// CPU usage indicator with circular progress bar // CPU usage indicator with circular progress bar
Item { Item {
width: 50 * Theme.scale(screen); height: 50 * Theme.scale(screen) width: 50 * Theme.scale(screen)
height: 50 * Theme.scale(screen)
CircularProgressBar { CircularProgressBar {
id: cpuBar id: cpuBar
progress: Sysinfo.cpuUsage / 100 progress: Sysinfo.cpuUsage / 100