diff --git a/Widgets/SidePanel/Music.qml b/Widgets/SidePanel/Music.qml index b066bda..65867e5 100644 --- a/Widgets/SidePanel/Music.qml +++ b/Widgets/SidePanel/Music.qml @@ -14,7 +14,7 @@ Rectangle { id: card anchors.fill: parent color: Theme.surface - radius: 18 + radius: 18 * Theme.scale(Screen) // Show fallback UI if no player is available Item { @@ -67,7 +67,7 @@ Rectangle { color: Theme.surfaceVariant border.color: playerSelector.activeFocus ? Theme.accentPrimary : Theme.outline border.width: 1 * Theme.scale(screen) - radius: 16 + radius: 16 * Theme.scale(Screen) } contentItem: Text { @@ -165,7 +165,7 @@ Rectangle { width: 60 * Theme.scale(screen) height: 60 * Theme.scale(screen) anchors.centerIn: parent - radius: 30 // circle + radius: width * 0.5 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) @@ -290,7 +290,7 @@ Rectangle { id: progressHandle width: 12 * Theme.scale(screen) height: 12 * Theme.scale(screen) - radius: 6 + radius: width * 0.5 color: Theme.accentPrimary border.color: Qt.lighter(Theme.accentPrimary, 1.3) border.width: 1 * Theme.scale(screen) @@ -340,7 +340,7 @@ Rectangle { Rectangle { width: 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) border.color: Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.3) border.width: 1 * Theme.scale(screen) @@ -367,7 +367,7 @@ Rectangle { Rectangle { width: 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) border.color: Theme.accentPrimary border.width: 2 * Theme.scale(screen) @@ -394,7 +394,7 @@ Rectangle { Rectangle { width: 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) border.color: Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.3) border.width: 1 * Theme.scale(screen) diff --git a/Widgets/SidePanel/PanelPopup.qml b/Widgets/SidePanel/PanelPopup.qml index 69e1998..3cd7ea0 100644 --- a/Widgets/SidePanel/PanelPopup.qml +++ b/Widgets/SidePanel/PanelPopup.qml @@ -245,6 +245,7 @@ PanelWithOverlay { } + RowLayout { spacing: 8 * Theme.scale(screen) Layout.fillWidth: true @@ -256,113 +257,11 @@ PanelWithOverlay { Layout.alignment: Qt.AlignVCenter } - // Record and Wallpaper card - Rectangle { + Shortcuts { width: 206 * Theme.scale(screen) height: 70 * Theme.scale(screen) 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 { diff --git a/Widgets/SidePanel/PowerProfile.qml b/Widgets/SidePanel/PowerProfile.qml index e34cb22..c650c42 100644 --- a/Widgets/SidePanel/PowerProfile.qml +++ b/Widgets/SidePanel/PowerProfile.qml @@ -8,7 +8,7 @@ import qs.Components Rectangle { id: card color: Theme.surface - radius: 16 + radius: 18 * Theme.scale(Screen) Row { anchors.horizontalCenter: parent.horizontalCenter @@ -18,7 +18,7 @@ Rectangle { Rectangle { width: 36 * Theme.scale(screen); height: 36 * Theme.scale(screen) - radius: 16 + radius: width * 0.5 border.color: Theme.accentPrimary border.width: 1 * Theme.scale(screen) color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.Performance) @@ -64,7 +64,7 @@ Rectangle { Rectangle { width: 36 * Theme.scale(screen); height: 36 * Theme.scale(screen) - radius: 18 + radius: width * 0.5 border.color: Theme.accentPrimary border.width: 1 * Theme.scale(screen) color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.Balanced) @@ -110,7 +110,7 @@ Rectangle { Rectangle { width: 36 * Theme.scale(screen); height: 36 * Theme.scale(screen) - radius: 18 + radius: width * 0.5 border.color: Theme.accentPrimary border.width: 1 * Theme.scale(screen) color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.PowerSaver) diff --git a/Widgets/SidePanel/Shortcuts.qml b/Widgets/SidePanel/Shortcuts.qml new file mode 100644 index 0000000..b6f1e8f --- /dev/null +++ b/Widgets/SidePanel/Shortcuts.qml @@ -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 + } + + } + + } + + } + diff --git a/Widgets/SidePanel/System.qml b/Widgets/SidePanel/System.qml index a929afb..fe5d9eb 100644 --- a/Widgets/SidePanel/System.qml +++ b/Widgets/SidePanel/System.qml @@ -82,7 +82,7 @@ Rectangle { Rectangle { anchors.fill: parent color: "transparent" - radius: 24 * Theme.scale(Screen) + radius: width * 0.5 border.color: Theme.accentPrimary border.width: 2 * Theme.scale(Screen) z: 2 @@ -123,7 +123,7 @@ Rectangle { width: 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" border.color: Theme.accentPrimary border.width: 1 * Theme.scale(Screen) @@ -166,7 +166,7 @@ Rectangle { width: 32 * Theme.scale(Screen) height: 32 * Theme.scale(Screen) - radius: width / 2 + radius: width * 0.5 color: systemButtonArea.containsMouse || systemButtonArea.pressed ? Theme.accentPrimary : "transparent" border.color: Theme.accentPrimary border.width: 1 * Theme.scale(Screen) diff --git a/Widgets/SidePanel/SystemMonitor.qml b/Widgets/SidePanel/SystemMonitor.qml index 31bd698..2440e95 100644 --- a/Widgets/SidePanel/SystemMonitor.qml +++ b/Widgets/SidePanel/SystemMonitor.qml @@ -17,7 +17,7 @@ Rectangle { id: card anchors.fill: parent color: Theme.surface - radius: 18 + radius: 18 * Theme.scale(Screen) ColumnLayout { anchors.fill: parent @@ -28,7 +28,8 @@ Rectangle { // 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