diff --git a/Modules/Bar/Bar.qml b/Modules/Bar/Bar.qml index fa14d46..dc3e593 100644 --- a/Modules/Bar/Bar.qml +++ b/Modules/Bar/Bar.qml @@ -79,9 +79,7 @@ PanelWindow { NIconButton { id: demoPanelToggler icon: "experiment" - onClicked: function () { - demoPanel.visible ? demoPanel.hide() : demoPanel.show() - } + onClicked: function () { demoPanel.isLoaded = !demoPanel.isLoaded } } } } diff --git a/Modules/DemoPanel/DemoPanel.qml b/Modules/DemoPanel/DemoPanel.qml index c758c16..62c3959 100644 --- a/Modules/DemoPanel/DemoPanel.qml +++ b/Modules/DemoPanel/DemoPanel.qml @@ -10,100 +10,75 @@ import qs.Widgets An experiment/demo panel to tweaks widgets */ - -NPanel { +NLoader { id: root - readonly property real scaling: Scaling.scale(screen) + panel: Component { + NPanel { + id: demoPanel - Rectangle { - color: Colors.backgroundPrimary - radius: Style.radiusMedium * scaling - border.color: Colors.backgroundTertiary - border.width: Math.min(1, Style.borderMedium * scaling) - width: 500 * scaling - height: 400 - anchors.centerIn: parent + readonly property real scaling: Scaling.scale(screen) + // Ensure panel shows itself once created + Component.onCompleted: show() - // Prevent closing when clicking in the panel bg - MouseArea { - anchors.fill: parent - } + Rectangle { + color: Colors.backgroundPrimary + radius: Style.radiusMedium * scaling + border.color: Colors.backgroundTertiary + border.width: Math.min(1, Style.borderMedium * scaling) + width: 500 * scaling + height: 400 + anchors.centerIn: parent - ColumnLayout { - anchors.fill: parent - anchors.margins: Style.marginXL * scaling - spacing: Style.marginSmall * scaling + // Prevent closing when clicking in the panel bg + MouseArea { anchors.fill: parent } - // NIconButton - ColumnLayout { - spacing: 16 * scaling - NText { - text: "NIconButton + NTooltip" - color: Colors.accentSecondary - } + ColumnLayout { + anchors.fill: parent + anchors.margins: Style.marginXL * scaling + spacing: Style.marginSmall * scaling - NIconButton { - id: myIconButton - icon: "refresh" - onEntered: function() { - myTooltip.show(); + // NIconButton + ColumnLayout { + spacing: 16 * scaling + NText { text: "NIconButton"; color: Colors.accentSecondary } + + NIconButton { + id: myIconButton + icon: "refresh" + onEntered: function() { myTooltip.show() } + onExited: function() { myTooltip.hide() } + } + + NDivider { Layout.fillWidth: true } } - onExited: function() { - myTooltip.hide(); + + // NToggle + ColumnLayout { + spacing: Style.marginLarge * scaling + uniformCellSizes: true + NText { text: "NToggle + NTooltip"; color: Colors.accentSecondary } + + NToggle { + label: "Label" + description: "Description" + onToggled: function(value: bool) { console.log("NToggle: " + value) } + } + + NTooltip { id: myTooltip; target: myIconButton; positionAbove: false; text: "Hello world" } + NDivider { Layout.fillWidth: true } + } + + // NSlider + ColumnLayout { + spacing: 16 * scaling + NText { text: "NSlider"; color: Colors.accentSecondary } + NSlider {} + NDivider { Layout.fillWidth: true } } } - - NTooltip { - id: myTooltip - target: myIconButton - positionAbove: false - text: "Hello world" - } - - NDivider {Layout.fillWidth: true} } - - - // NToggle - ColumnLayout { - spacing: Style.marginLarge * scaling - uniformCellSizes: true - NText { - text: "NToggle" - color: Colors.accentSecondary - } - - NToggle { - label: "Label" - description: "Description" - onToggled: function(value: bool) { - console.log("NToggle: " + value) - } - } - - - NDivider { - Layout.fillWidth: true - } - } - - // NSlider - ColumnLayout { - spacing: 16 * scaling - - NText { - text: "NSlider" - color: Colors.accentSecondary - } - - NSlider {} - NDivider { - Layout.fillWidth: true - } - } - } } } diff --git a/Widgets/NLoader.qml b/Widgets/NLoader.qml new file mode 100644 index 0000000..807d02f --- /dev/null +++ b/Widgets/NLoader.qml @@ -0,0 +1,31 @@ +import QtQuick + +Loader { + id: loader + + // Boolean control to load/unload the item + property bool isLoaded: false + + // Provide the component to load. + // Example usage: + // content: Component { NPanel { /* ... */ } } + property Component panel + + active: isLoaded + asynchronous: true + sourceComponent: panel + + onActiveChanged: { + if (active && item && item.show) item.show() + } + + onItemChanged: { + if (active && item && item.show) item.show() + } + + Connections { + target: loader.item + function onDismissed() { loader.isLoaded = false } + } +} + diff --git a/Widgets/NPanel.qml b/Widgets/NPanel.qml index ac539ee..d912508 100644 --- a/Widgets/NPanel.qml +++ b/Widgets/NPanel.qml @@ -10,9 +10,11 @@ PanelWindow { property bool showOverlay: Settings.settings.dimPanels property int topMargin: Style.barHeight * scaling property color overlayColor: showOverlay ? Colors.overlay : "transparent" + signal dismissed() function hide() { visible = false + dismissed() } function show() { diff --git a/shell.qml b/shell.qml index 1cdc7ad..09568fc 100644 --- a/shell.qml +++ b/shell.qml @@ -24,22 +24,6 @@ ShellRoot { Background {} Overview {} - // Variants { - // model: Quickshell.screens - - // delegate: Background { - // modelData: item - // } - // } - - // Variants { - // model: Quickshell.screens - - // delegate: Overview { - // modelData: item - // } - // } - DemoPanel { id: demoPanel }