366 lines
10 KiB
QML
366 lines
10 KiB
QML
import QtQuick
|
|
import QtQuick.Controls
|
|
import QtQuick.Layouts
|
|
import Quickshell
|
|
import Quickshell.Wayland
|
|
import qs.Commons
|
|
import qs.Services
|
|
import qs.Widgets
|
|
|
|
NLoader {
|
|
id: root
|
|
|
|
content: Component {
|
|
NPanel {
|
|
id: demoPanel
|
|
|
|
// Override hide function to animate first
|
|
function hide() {
|
|
// Start hide animation
|
|
bgRect.scaleValue = 0.8
|
|
bgRect.opacityValue = 0.0
|
|
|
|
// Hide after animation completes
|
|
hideTimer.start()
|
|
}
|
|
|
|
// Connect to NPanel's dismissed signal to handle external close events
|
|
Connections {
|
|
target: demoPanel
|
|
function onDismissed() {
|
|
// Start hide animation
|
|
bgRect.scaleValue = 0.8
|
|
bgRect.opacityValue = 0.0
|
|
|
|
// Hide after animation completes
|
|
hideTimer.start()
|
|
}
|
|
}
|
|
|
|
// Also handle visibility changes from external sources
|
|
onVisibleChanged: {
|
|
if (!visible && bgRect.opacityValue > 0) {
|
|
// Start hide animation
|
|
bgRect.scaleValue = 0.8
|
|
bgRect.opacityValue = 0.0
|
|
|
|
// Hide after animation completes
|
|
hideTimer.start()
|
|
}
|
|
}
|
|
|
|
// Timer to hide panel after animation
|
|
Timer {
|
|
id: hideTimer
|
|
interval: Style.animationSlow
|
|
repeat: false
|
|
onTriggered: {
|
|
demoPanel.visible = false
|
|
demoPanel.dismissed()
|
|
}
|
|
}
|
|
|
|
// Ensure panel shows itself once created
|
|
Component.onCompleted: {
|
|
show()
|
|
}
|
|
|
|
Rectangle {
|
|
id: bgRect
|
|
color: Colors.mSurfaceVariant
|
|
radius: Style.radiusMedium * scaling
|
|
border.color: Colors.mOutlineVariant
|
|
border.width: Math.max(1, Style.borderThin * scaling)
|
|
width: 500 * scaling
|
|
height: 900 * scaling
|
|
anchors.centerIn: parent
|
|
|
|
// Animation properties
|
|
property real scaleValue: 0.8
|
|
property real opacityValue: 0.0
|
|
|
|
scale: scaleValue
|
|
opacity: opacityValue
|
|
|
|
// Animate in when component is completed
|
|
Component.onCompleted: {
|
|
scaleValue = 1.0
|
|
opacityValue = 1.0
|
|
}
|
|
|
|
// Prevent closing when clicking in the panel bg
|
|
MouseArea {
|
|
anchors.fill: parent
|
|
}
|
|
|
|
// Animation behaviors
|
|
Behavior on scale {
|
|
NumberAnimation {
|
|
duration: Style.animationSlow
|
|
easing.type: Easing.OutExpo
|
|
}
|
|
}
|
|
|
|
Behavior on opacity {
|
|
NumberAnimation {
|
|
duration: Style.animationNormal
|
|
easing.type: Easing.OutQuad
|
|
}
|
|
}
|
|
|
|
ColumnLayout {
|
|
anchors.fill: parent
|
|
anchors.margins: Style.marginXL * scaling
|
|
|
|
NText {
|
|
text: "DemoPanel"
|
|
color: Colors.mPrimary
|
|
font.pointSize: Style.fontSizeXL * scaling
|
|
font.weight: Style.fontWeightBold
|
|
Layout.alignment: Qt.AlignHCenter
|
|
}
|
|
|
|
ColumnLayout {
|
|
|
|
spacing: Style.marginMedium * scaling
|
|
|
|
// NSlider
|
|
ColumnLayout {
|
|
spacing: Style.marginLarge * scaling
|
|
NText {
|
|
text: "Scaling"
|
|
color: Colors.mSecondary
|
|
font.weight: Style.fontWeightBold
|
|
}
|
|
NText {
|
|
text: `${Math.round(ScalingService.overrideScale * 100)}%`
|
|
Layout.alignment: Qt.AlignVCenter
|
|
}
|
|
RowLayout {
|
|
spacing: Style.marginSmall * scaling
|
|
NSlider {
|
|
id: scaleSlider
|
|
from: 0.6
|
|
to: 1.8
|
|
stepSize: 0.01
|
|
value: ScalingService.overrideScale
|
|
implicitWidth: bgRect.width * 0.75
|
|
onMoved: {
|
|
|
|
}
|
|
onPressedChanged: {
|
|
ScalingService.overrideScale = value
|
|
ScalingService.overrideEnabled = true
|
|
}
|
|
}
|
|
NIconButton {
|
|
icon: "refresh"
|
|
tooltipText: "Reset Scaling"
|
|
fontPointSize: Style.fontSizeLarge * scaling
|
|
onClicked: {
|
|
ScalingService.overrideEnabled = false
|
|
ScalingService.overrideScale = 1.0
|
|
}
|
|
}
|
|
}
|
|
NDivider {
|
|
Layout.fillWidth: true
|
|
}
|
|
}
|
|
|
|
// NIconButton
|
|
ColumnLayout {
|
|
spacing: Style.marginLarge * scaling
|
|
NText {
|
|
text: "NIconButton"
|
|
color: Colors.mSecondary
|
|
font.weight: Style.fontWeightBold
|
|
}
|
|
|
|
NIconButton {
|
|
id: myIconButton
|
|
icon: "celebration"
|
|
tooltipText: "A nice tooltip"
|
|
fontPointSize: Style.fontSizeLarge * scaling
|
|
}
|
|
|
|
NDivider {
|
|
Layout.fillWidth: true
|
|
}
|
|
}
|
|
|
|
// NToggle
|
|
ColumnLayout {
|
|
spacing: Style.marginMedium * scaling
|
|
NText {
|
|
text: "NToggle"
|
|
color: Colors.mSecondary
|
|
font.weight: Style.fontWeightBold
|
|
}
|
|
|
|
NToggle {
|
|
label: "Label"
|
|
description: "Description"
|
|
onToggled: checked => {
|
|
Logger.log("DemoPanel", "NToggle:", checked)
|
|
}
|
|
}
|
|
|
|
NDivider {
|
|
Layout.fillWidth: true
|
|
}
|
|
}
|
|
|
|
// NComboBox
|
|
ColumnLayout {
|
|
spacing: Style.marginMedium * scaling
|
|
NText {
|
|
text: "NComboBox"
|
|
color: Colors.mSecondary
|
|
font.weight: Style.fontWeightBold
|
|
}
|
|
|
|
NComboBox {
|
|
label: "Animal"
|
|
description: "What's your favorite?"
|
|
model: ListModel {
|
|
ListElement {
|
|
key: "cat"
|
|
name: "Cat"
|
|
}
|
|
ListElement {
|
|
key: "dog"
|
|
name: "Dog"
|
|
}
|
|
ListElement {
|
|
key: "bird"
|
|
name: "Bird"
|
|
}
|
|
ListElement {
|
|
key: "fish"
|
|
name: "Fish"
|
|
}
|
|
ListElement {
|
|
key: "turtle"
|
|
name: "Turtle"
|
|
}
|
|
ListElement {
|
|
key: "elephant"
|
|
name: "Elephant"
|
|
}
|
|
ListElement {
|
|
key: "tiger"
|
|
name: "Tiger"
|
|
}
|
|
}
|
|
currentKey: "dog"
|
|
onSelected: function (key) {
|
|
Logger.log("DemoPanel", "NComboBox: selected ", key)
|
|
}
|
|
}
|
|
|
|
NDivider {
|
|
Layout.fillWidth: true
|
|
}
|
|
}
|
|
|
|
// NTextInput
|
|
ColumnLayout {
|
|
spacing: Style.marginMedium * scaling
|
|
NText {
|
|
text: "NTextInput"
|
|
color: Colors.mSecondary
|
|
font.weight: Style.fontWeightBold
|
|
}
|
|
|
|
NTextInput {
|
|
label: "Input label"
|
|
description: "A cool description"
|
|
text: "Type anything"
|
|
Layout.fillWidth: true
|
|
onEditingFinished: {
|
|
|
|
}
|
|
}
|
|
NDivider {
|
|
Layout.fillWidth: true
|
|
}
|
|
}
|
|
|
|
// NBusyIndicator
|
|
ColumnLayout {
|
|
spacing: Style.marginMedium * scaling
|
|
NText {
|
|
text: "NBusyIndicator"
|
|
color: Colors.mSecondary
|
|
font.weight: Style.fontWeightBold
|
|
}
|
|
|
|
NBusyIndicator {}
|
|
|
|
NDivider {
|
|
Layout.fillWidth: true
|
|
}
|
|
}
|
|
|
|
// Brightness Control
|
|
ColumnLayout {
|
|
spacing: Style.marginMedium * scaling
|
|
NText {
|
|
text: "Brightness Control"
|
|
color: Colors.mSecondary
|
|
font.weight: Style.fontWeightBold
|
|
}
|
|
|
|
NText {
|
|
text: `Brightness: ${Math.round(BrightnessService.brightness)}%`
|
|
Layout.alignment: Qt.AlignVCenter
|
|
}
|
|
|
|
RowLayout {
|
|
spacing: Style.marginSmall * scaling
|
|
NIconButton {
|
|
icon: "brightness_low"
|
|
tooltipText: "Decrease Brightness"
|
|
fontPointSize: Style.fontSizeLarge * scaling
|
|
onClicked: {
|
|
BrightnessService.decreaseBrightness()
|
|
}
|
|
}
|
|
NSlider {
|
|
from: 0
|
|
to: 100
|
|
stepSize: 1
|
|
value: BrightnessService.brightness
|
|
implicitWidth: bgRect.width * 0.5
|
|
onMoved: {
|
|
BrightnessService.setBrightnessDebounced(value)
|
|
}
|
|
}
|
|
NIconButton {
|
|
icon: "brightness_high"
|
|
tooltipText: "Increase Brightness"
|
|
fontPointSize: Style.fontSizeLarge * scaling
|
|
onClicked: {
|
|
BrightnessService.increaseBrightness()
|
|
}
|
|
}
|
|
}
|
|
|
|
NText {
|
|
text: `Method: ${BrightnessService.currentMethod} | Available: ${BrightnessService.available}`
|
|
color: Colors.mOnSurfaceVariant
|
|
font.pointSize: Style.fontSizeSmall * scaling
|
|
Layout.alignment: Qt.AlignHCenter
|
|
}
|
|
|
|
NDivider {
|
|
Layout.fillWidth: true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|