actiondrawer: Draw our own background

Draw our own background in the action drawer instead of using the svg, because it loads faster when visible: true/false is set, and we do a bunch of resizing animations.
This commit is contained in:
Devin Lin 2025-06-17 05:47:43 -04:00
parent c4f11d2f01
commit 19ea9f5164
2 changed files with 62 additions and 8 deletions

View file

@ -57,10 +57,42 @@ MobileShell.BaseItem {
rightPadding: Kirigami.Units.smallSpacing
bottomPadding: Kirigami.Units.smallSpacing * 4
background: KSvg.FrameSvgItem {
enabledBorders: KSvg.FrameSvgItem.BottomBorder
imagePath: "widgets/background"
opacity: brightnessPressedValue
background: Item {
Rectangle {
id: background
anchors.fill: parent
anchors.bottomMargin: shadow.height
color: Kirigami.Theme.backgroundColor
opacity: brightnessPressedValue
}
Rectangle {
id: separator
anchors.bottom: background.bottom
anchors.left: parent.left
anchors.right: parent.right
antialiasing: true
// Only show separator on dark background
visible: (Kirigami.ColorUtils.brightnessForColor(background.color)) === Kirigami.ColorUtils.Dark ? 1 : 0
height: 1
color: Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.textColor, Kirigami.Theme.backgroundColor, 0.9)
}
Rectangle {
id: shadow
anchors.top: background.bottom
anchors.left: parent.left
anchors.right: parent.right
height: Kirigami.Units.largeSpacing
opacity: 0.1
gradient: Gradient {
orientation: Gradient.Vertical
GradientStop { position: 0.0; color: 'black' }
GradientStop { position: 1.0; color: 'transparent' }
}
}
}
contentItem: Item {

View file

@ -4,6 +4,7 @@
import QtQuick
import QtQuick.Controls as QQC2
import QtQuick.Layouts
import QtQuick.Effects
import org.kde.kirigami 2.12 as Kirigami
import org.kde.ksvg 1.0 as KSvg
@ -43,10 +44,31 @@ MobileShell.BaseItem {
rightPadding: Kirigami.Units.smallSpacing * 4
bottomPadding: Kirigami.Units.smallSpacing * 4
background: KSvg.FrameSvgItem {
enabledBorders: KSvg.FrameSvgItem.AllBorders
imagePath: "widgets/background"
opacity: brightnessPressedValue
background: Item {
Rectangle {
id: background
anchors.fill: parent
anchors.margins: Kirigami.Units.largeSpacing
color: Kirigami.Theme.backgroundColor
opacity: brightnessPressedValue
visible: false
radius: Kirigami.Units.cornerRadius
// Only show border on dark background
border.color: Kirigami.ColorUtils.tintWithAlpha(Kirigami.Theme.textColor, Kirigami.Theme.backgroundColor, 0.9)
border.width: (Kirigami.ColorUtils.brightnessForColor(color)) === Kirigami.ColorUtils.Dark ? 1 : 0
border.pixelAligned: false
}
MultiEffect {
anchors.fill: background
source: background
blurMax: 16
shadowEnabled: true
shadowOpacity: 0.5
shadowColor: Qt.darker(Kirigami.Theme.backgroundColor, 1.9)
}
}
contentItem: Item {