actioncenter: stack view setup

This commit is contained in:
end-4
2025-11-18 23:25:29 +01:00
parent 488b3c06d6
commit 64c1b5be0b
5 changed files with 68 additions and 48 deletions
@@ -18,7 +18,7 @@ ColumnLayout {
WPanelIconButton {
color: colBackground
property real animationValue: root.brightnessMonitor.brightness
property real animationValue: root.brightnessMonitor?.brightness ?? 0
rotation: animationValue * 180
scale: 0.8 + animationValue * 0.2
iconName: "weather-sunny"
@@ -30,9 +30,9 @@ ColumnLayout {
WSlider {
Layout.fillWidth: true
value: root.brightnessMonitor.brightness
value: root.brightnessMonitor?.brightness ?? 0
onMoved: {
root.brightnessMonitor.setBrightness(value)
root.brightnessMonitor?.setBrightness(value)
}
}
@@ -1,4 +1,5 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Quickshell
import qs
@@ -10,19 +11,28 @@ import qs.modules.waffle.looks
WBarAttachedPanelContent {
id: root
contentItem: ColumnLayout {
anchors.centerIn: parent
spacing: 0
contentItem: StackView {
implicitWidth: currentItem.implicitWidth
implicitHeight: currentItem.implicitHeight
ActionCenterBody {}
initialItem: ColumnLayout {
anchors.centerIn: parent
spacing: 0
Rectangle {
Layout.fillHeight: false
Layout.fillWidth: true
color: Looks.colors.bgPanelSeparator
implicitHeight: 1
ActionCenterBody {}
Rectangle {
Layout.fillHeight: false
Layout.fillWidth: true
color: Looks.colors.bgPanelSeparator
implicitHeight: 1
}
ActionCenterFooter {}
}
ActionCenterFooter {}
Component.onCompleted: {
ActionCenterContext.stackView = this
}
}
}
@@ -0,0 +1,12 @@
pragma Singleton
pragma ComponentBehavior: Bound
import QtQuick
import QtQuick.Controls
import Quickshell
Singleton {
id: root
property StackView stackView
}
@@ -1,5 +1,6 @@
pragma ComponentBehavior: Bound
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Quickshell
import qs
@@ -9,6 +10,7 @@ import qs.modules.common.models.quickToggles
import qs.modules.common.functions
import qs.modules.common.widgets
import qs.modules.waffle.looks
import qs.modules.waffle.actionCenter
// It should be perfectly fine to use just a Column here, but somehow
// using ColumnLayout prevents weird opening anim stutter
@@ -25,6 +27,7 @@ ColumnLayout {
property var mainAction: toggleModel?.mainAction ?? null
property var altAction: toggleModel?.hasMenu ? (() => root.openMenu()) : (toggleModel?.altAction ?? null)
property bool hasMenu: toggleModel?.hasMenu ?? false
property Item menu
property color colBackground: toggled ? Looks.colors.accent : Looks.colors.bg2
property color colBackgroundHovered: toggled ? Looks.colors.accentHover : Looks.colors.bg2Hover
@@ -46,54 +49,26 @@ ColumnLayout {
anchors.fill: parent
spacing: 0
WButton {
Layout.fillHeight: true
Layout.fillWidth: true
inset: 0
backgroundOpacity: 0.8
checked: root.toggled
border.width: 1
border.color: root.colBorder
ToggleFragment {
topLeftRadius: Looks.radius.medium
bottomLeftRadius: Looks.radius.medium
topRightRadius: root.hasMenu ? 0 : Looks.radius.medium
bottomRightRadius: root.hasMenu ? 0 : Looks.radius.medium
iconName: root.icon
onClicked: root.mainAction && root.mainAction()
contentItem: Item {
anchors.centerIn: parent
FluentIcon {
anchors.centerIn: parent
icon: root.icon
implicitSize: 18
monochrome: true
filled: root.toggled
color: root.colForeground
}
}
}
FadeLoader {
Layout.fillHeight: true
Layout.fillWidth: true
shown: root.hasMenu
sourceComponent: WButton {
inset: 0
backgroundOpacity: 0.8
checked: root.toggled
border.width: 1
border.color: root.colBorder
sourceComponent: ToggleFragment {
topLeftRadius: 0
bottomLeftRadius: 0
topRightRadius: Looks.radius.medium
bottomRightRadius: Looks.radius.medium
contentItem: Item {
anchors.centerIn: parent
FluentIcon {
anchors.centerIn: parent
icon: "chevron-right"
implicitSize: 18
monochrome: true
color: root.colForeground
}
iconName: "chevron-right"
onClicked: {
ActionCenterContext.stackView.push(root.menu)
}
}
}
@@ -115,6 +90,29 @@ ColumnLayout {
elide: Text.ElideRight
text: root.name
}
}
component ToggleFragment: WButton {
id: toggleFragment
required property string iconName
Layout.fillHeight: true
Layout.fillWidth: true
inset: 0
backgroundOpacity: 0.8
checked: root.toggled
border.width: 1
border.color: root.colBorder
contentItem: Item {
anchors.centerIn: parent
FluentIcon {
anchors.centerIn: parent
icon: toggleFragment.iconName
implicitSize: 18
monochrome: true
filled: root.toggled
color: root.colForeground
}
}
}
}
@@ -14,7 +14,7 @@ Kirigami.Icon {
implicitWidth: implicitSize
implicitHeight: implicitSize
source: `${Looks.iconsPath}/${root.icon}${filled ? "-filled" : ""}.svg`
source: icon === "" ? "" : `${Looks.iconsPath}/${root.icon}${filled ? "-filled" : ""}.svg`
fallback: root.icon
roundToIconSize: false
color: Looks.colors.fg