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,12 +57,44 @@ MobileShell.BaseItem {
rightPadding: Kirigami.Units.smallSpacing rightPadding: Kirigami.Units.smallSpacing
bottomPadding: Kirigami.Units.smallSpacing * 4 bottomPadding: Kirigami.Units.smallSpacing * 4
background: KSvg.FrameSvgItem { background: Item {
enabledBorders: KSvg.FrameSvgItem.BottomBorder Rectangle {
imagePath: "widgets/background" id: background
anchors.fill: parent
anchors.bottomMargin: shadow.height
color: Kirigami.Theme.backgroundColor
opacity: brightnessPressedValue 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 { contentItem: Item {
id: containerItem id: containerItem
implicitHeight: column.implicitHeight implicitHeight: column.implicitHeight

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.Effects
import org.kde.kirigami 2.12 as Kirigami import org.kde.kirigami 2.12 as Kirigami
import org.kde.ksvg 1.0 as KSvg import org.kde.ksvg 1.0 as KSvg
@ -43,10 +44,31 @@ MobileShell.BaseItem {
rightPadding: Kirigami.Units.smallSpacing * 4 rightPadding: Kirigami.Units.smallSpacing * 4
bottomPadding: Kirigami.Units.smallSpacing * 4 bottomPadding: Kirigami.Units.smallSpacing * 4
background: KSvg.FrameSvgItem { background: Item {
enabledBorders: KSvg.FrameSvgItem.AllBorders Rectangle {
imagePath: "widgets/background" id: background
anchors.fill: parent
anchors.margins: Kirigami.Units.largeSpacing
color: Kirigami.Theme.backgroundColor
opacity: brightnessPressedValue 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 { contentItem: Item {