Shape the convergence action drawer

Draw a rounded surface behind the quick settings pane that\nfollows the workspace frame instead of layering a second flat panel\non top of it.
This commit is contained in:
Marco Allegretti 2026-05-24 15:49:02 +02:00
parent 2d7e689d8d
commit ea564a0d4e
2 changed files with 42 additions and 1 deletions

View file

@ -4,6 +4,7 @@
import QtQuick import QtQuick
import QtQuick.Controls as QQC2 import QtQuick.Controls as QQC2
import QtQuick.Layouts import QtQuick.Layouts
import QtQuick.Shapes 1.8
import QtQuick.Window import QtQuick.Window
import org.kde.kirigami as Kirigami import org.kde.kirigami as Kirigami
@ -29,7 +30,7 @@ Item {
readonly property real maximizedQuickSettingsOffset: height readonly property real maximizedQuickSettingsOffset: height
readonly property bool isConvergence: ShellSettings.Settings.convergenceModeEnabled readonly property bool isConvergence: ShellSettings.Settings.convergenceModeEnabled
readonly property real convergenceFrameThickness: MobileShell.Constants.convergenceWorkspaceFrameThickness readonly property real convergenceFrameThickness: MobileShell.Constants.convergenceWorkspaceFrameThickness
readonly property real convergenceSurfaceTopInset: MobileShell.Constants.topPanelHeight readonly property real convergenceSurfaceTopInset: MobileShell.Constants.topPanelHeight + convergenceFrameThickness
readonly property real convergenceSurfaceBottomInset: MobileShell.Constants.convergenceDockHeight + convergenceFrameThickness readonly property real convergenceSurfaceBottomInset: MobileShell.Constants.convergenceDockHeight + convergenceFrameThickness
readonly property real convergenceSurfaceSideInset: 0 readonly property real convergenceSurfaceSideInset: 0
readonly property real convergenceSurfaceWidth: Math.max(0, width - convergenceSurfaceSideInset * 2) readonly property real convergenceSurfaceWidth: Math.max(0, width - convergenceSurfaceSideInset * 2)
@ -48,9 +49,48 @@ Item {
// dismiss drawer when background is clicked // dismiss drawer when background is clicked
onClicked: root.actionDrawer.close(); onClicked: root.actionDrawer.close();
Shape {
id: actionDrawerSurface
x: quickSettingsPanel.x - cornerRadius
y: quickSettingsPanel.y
width: bodyWidth + cornerRadius
height: quickSettingsPanel.height
opacity: root.isConvergence ? quickSettingsPanel.opacity * root.brightnessPressedValue : 0
visible: opacity > 0 && bodyWidth > 0 && height > 0
z: 0
preferredRendererType: Shape.CurveRenderer
asynchronous: true
enabled: false
readonly property real bodyWidth: quickSettingsPanel.width
readonly property real cornerRadius: Math.min(MobileShell.Constants.convergenceWorkspaceFrameRadius,
Math.max(0.01, Math.min(bodyWidth, height) / 2))
Kirigami.Theme.inherit: false
Kirigami.Theme.colorSet: Kirigami.Theme.Window
ShapePath {
id: actionDrawerSurfacePath
readonly property real cornerRadius: actionDrawerSurface.cornerRadius
fillColor: Kirigami.Theme.backgroundColor
strokeWidth: 0
startX: actionDrawerSurface.width
startY: 0
PathLine { x: 0; y: 0 }
PathArc { x: actionDrawerSurfacePath.cornerRadius; y: actionDrawerSurfacePath.cornerRadius; radiusX: actionDrawerSurfacePath.cornerRadius; radiusY: actionDrawerSurfacePath.cornerRadius; direction: PathArc.Clockwise }
PathLine { x: actionDrawerSurfacePath.cornerRadius; y: actionDrawerSurface.height - actionDrawerSurfacePath.cornerRadius }
PathArc { x: 0; y: actionDrawerSurface.height; radiusX: actionDrawerSurfacePath.cornerRadius; radiusY: actionDrawerSurfacePath.cornerRadius; direction: PathArc.Clockwise }
PathLine { x: actionDrawerSurface.width; y: actionDrawerSurface.height }
PathLine { x: actionDrawerSurface.width; y: 0 }
}
}
// right sidebar // right sidebar
MobileShell.QuickSettingsPanel { MobileShell.QuickSettingsPanel {
id: quickSettingsPanel id: quickSettingsPanel
z: 1
height: Math.min(quickSettingsPanel.contentImplicitHeight + quickSettingsPanel.topPadding + quickSettingsPanel.bottomPadding, quickSettingsPanel.availableHeight) height: Math.min(quickSettingsPanel.contentImplicitHeight + quickSettingsPanel.topPadding + quickSettingsPanel.bottomPadding, quickSettingsPanel.availableHeight)
width: Math.min(intendedWidth, quickSettingsPanel.availableWidth) width: Math.min(intendedWidth, quickSettingsPanel.availableWidth)

View file

@ -51,6 +51,7 @@ MobileShell.BaseItem {
background: MobileShell.PanelBackground { background: MobileShell.PanelBackground {
anchors.fill: parent anchors.fill: parent
anchors.margins: root.isConvergence ? 0 : Kirigami.Units.largeSpacing anchors.margins: root.isConvergence ? 0 : Kirigami.Units.largeSpacing
visible: !root.isConvergence
panelType: root.isConvergence ? MobileShell.PanelBackground.PanelType.Flat : MobileShell.PanelBackground.PanelType.Base panelType: root.isConvergence ? MobileShell.PanelBackground.PanelType.Flat : MobileShell.PanelBackground.PanelType.Base
radius: root.isConvergence ? 0 : Kirigami.Units.cornerRadius radius: root.isConvergence ? 0 : Kirigami.Units.cornerRadius
opacity: brightnessPressedValue opacity: brightnessPressedValue