130 lines
3.6 KiB
QML
130 lines
3.6 KiB
QML
pragma ComponentBehavior: Bound
|
|
|
|
import ".."
|
|
import qs.components
|
|
import qs.components.effects
|
|
import qs.components.containers
|
|
import qs.config
|
|
import Quickshell.Widgets
|
|
import QtQuick
|
|
import QtQuick.Layouts
|
|
|
|
/**
|
|
* SplitPaneWithDetails
|
|
*
|
|
* A reusable component that provides a split-pane layout with a list on the left
|
|
* and a details/settings view on the right. The right pane automatically switches
|
|
* between details and settings views based on whether an item is selected.
|
|
*
|
|
* This component eliminates duplication across WirelessPane, EthernetPane, and BtPane
|
|
* by providing a standardized pattern for split-pane layouts with transition animations.
|
|
*
|
|
* Usage:
|
|
* ```qml
|
|
* SplitPaneWithDetails {
|
|
* activeItem: root.session.network.active
|
|
* leftContent: Component {
|
|
* WirelessList {
|
|
* session: root.session
|
|
* }
|
|
* }
|
|
* rightDetailsComponent: Component {
|
|
* WirelessDetails {
|
|
* session: root.session
|
|
* }
|
|
* }
|
|
* rightSettingsComponent: Component {
|
|
* StyledFlickable {
|
|
* WirelessSettings {
|
|
* session: root.session
|
|
* }
|
|
* }
|
|
* }
|
|
* paneIdGenerator: (item) => item ? (item.ssid || item.bssid || "") : ""
|
|
* }
|
|
* ```
|
|
*/
|
|
Item {
|
|
id: root
|
|
|
|
required property Component leftContent
|
|
required property Component rightDetailsComponent
|
|
required property Component rightSettingsComponent
|
|
|
|
property var activeItem: null
|
|
property var paneIdGenerator: function(item) { return item ? String(item) : ""; }
|
|
|
|
// Optional: Additional component to overlay on top (e.g., password dialogs)
|
|
property Component overlayComponent: null
|
|
|
|
SplitPaneLayout {
|
|
id: splitLayout
|
|
|
|
anchors.fill: parent
|
|
|
|
leftContent: root.leftContent
|
|
|
|
rightContent: Component {
|
|
Item {
|
|
id: rightPaneItem
|
|
|
|
property var pane: root.activeItem
|
|
property string paneId: root.paneIdGenerator(pane)
|
|
property Component targetComponent: root.rightSettingsComponent
|
|
property Component nextComponent: root.rightSettingsComponent
|
|
|
|
function getComponentForPane() {
|
|
return pane ? root.rightDetailsComponent : root.rightSettingsComponent;
|
|
}
|
|
|
|
Component.onCompleted: {
|
|
targetComponent = getComponentForPane();
|
|
nextComponent = targetComponent;
|
|
}
|
|
|
|
Loader {
|
|
id: rightLoader
|
|
|
|
anchors.fill: parent
|
|
|
|
opacity: 1
|
|
scale: 1
|
|
transformOrigin: Item.Center
|
|
|
|
clip: false
|
|
asynchronous: true
|
|
sourceComponent: rightPaneItem.targetComponent
|
|
}
|
|
|
|
Behavior on paneId {
|
|
PaneTransition {
|
|
target: rightLoader
|
|
propertyActions: [
|
|
PropertyAction {
|
|
target: rightPaneItem
|
|
property: "targetComponent"
|
|
value: rightPaneItem.nextComponent
|
|
}
|
|
]
|
|
}
|
|
}
|
|
|
|
onPaneChanged: {
|
|
nextComponent = getComponentForPane();
|
|
paneId = root.paneIdGenerator(pane);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Overlay component (e.g., password dialogs)
|
|
Loader {
|
|
id: overlayLoader
|
|
|
|
anchors.fill: parent
|
|
z: 1000
|
|
sourceComponent: root.overlayComponent
|
|
active: root.overlayComponent !== null
|
|
}
|
|
}
|
|
|