try that out

This commit is contained in:
Benjamin Palko 2025-09-04 19:59:52 -04:00
parent 3074bcae38
commit 11d0e4a838
3 changed files with 152 additions and 168 deletions

View file

@ -6,9 +6,10 @@ import Quickshell.Hyprland
PopupWindow { PopupWindow {
id: root id: root
implicitWidth: background.implicitWidth implicitWidth: contentItem.children.reduce((prev, child) => Math.max(prev, child.width), 0)
implicitHeight: background.implicitHeight implicitHeight: contentItem.children.reduce((prev, child) => prev + child.height, 0)
color: "transparent" color: "transparent"
contentItem.focus: visible
function open() { function open() {
visible = true; visible = true;
@ -18,19 +19,19 @@ PopupWindow {
visible = false; visible = false;
} }
// WlrLayershell.layer: WlrLayer.Top
// WlrLayershell.keyboardFocus: root.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
HyprlandFocusGrab { HyprlandFocusGrab {
id: grab active: root.visible
windows: [root] windows: [root]
onCleared: { onCleared: {
root.close(); root.close();
} }
} }
Rectangle { Rectangle {
id: background id: background
anchors.centerIn: root anchors.fill: parent
implicitWidth: root.contentItem.children.reduce((prev, child) => Math.max(prev, child.width), 0)
implicitHeight: root.contentItem.children.reduce((prev, child) => prev + child.height, 0)
color: Theme.palette.base200 color: Theme.palette.base200
radius: 8 radius: 8
} }

View file

@ -78,7 +78,11 @@ Variants {
Launcher {} Launcher {}
Pomodoro {} Pomodoro {}
PowerMenu {} PowerMenu {}
Storybook {} Storybook {
anchor.window: topWindow
anchor.rect.x: topWindow.width / 2 - width / 2
anchor.rect.y: topWindow.height / 4
}
Drawers {} Drawers {}
} }
} }

View file

@ -4,8 +4,6 @@ import qs.components
import qs.config import qs.config
import qs.constants import qs.constants
import qs.services import qs.services
import Quickshell.Hyprland
import Quickshell.Wayland
import QtQuick import QtQuick
import QtQuick.Controls import QtQuick.Controls
import QtQuick.Layouts import QtQuick.Layouts
@ -14,184 +12,165 @@ StyledPopupWindow {
id: root id: root
visible: Visibility.storybook visible: Visibility.storybook
implicitWidth: rect.width
implicitHeight: rect.height
WlrLayershell.layer: WlrLayer.Top GridLayout {
WlrLayershell.keyboardFocus: root.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None id: grid
HyprlandFocusGrab { flow: GridLayout.TopToBottom
active: Visibility.storybook columns: 2
windows: [root] rows: 10
onCleared: {
Visibility.storybook = false; StyledText {
Layout.columnSpan: grid.columns
Layout.alignment: Qt.AlignHCenter
text: "Components"
font.pixelSize: 24
font.bold: true
font.underline: true
bottomPadding: 24
} }
}
StyledWrapperRectangle {
id: rect
margin: 48
GridLayout {
id: grid
flow: GridLayout.TopToBottom
columns: 2
rows: 10
ColumnLayout {
StyledText { StyledText {
Layout.columnSpan: grid.columns text: "Icon Button"
Layout.alignment: Qt.AlignHCenter font.pixelSize: 18
text: "Components" }
font.pixelSize: 24 StyledIconButton {
font.bold: true text: Icons.square
font.underline: true }
bottomPadding: 24 }
ColumnLayout {
StyledText {
text: "Switch"
font.pixelSize: 18
} }
ColumnLayout { StyledSwitch {
StyledText { text: "Enable"
text: "Icon Button" }
font.pixelSize: 18 }
}
StyledIconButton { ColumnLayout {
text: Icons.square StyledText {
text: "ToolTip"
font.pixelSize: 18
}
Button {
id: toolTipButton
text: "Hello world!"
StyledToolTip {
visible: toolTipButton.hovered
text: qsTr("Save the active project")
} }
} }
}
ColumnLayout { ColumnLayout {
StyledText { StyledText {
text: "Switch" text: "Slider"
font.pixelSize: 18 font.pixelSize: 18
} }
StyledSlider {
id: slider
from: 0
to: 100
value: 50
}
}
StyledSwitch { ColumnLayout {
text: "Enable" StyledText {
text: "ProgressBar"
font.pixelSize: 18
}
StyledProgressBar {
id: progressBar
indeterminate: true
implicitHeight: 10
from: 0
to: 100
value: 50
}
}
ColumnLayout {
StyledText {
text: "ListView"
font.pixelSize: 18
}
StyledWrapperRectangle {
border.color: Theme.palette.base100
border.width: 2
StyledListView {
implicitWidth: 200
implicitHeight: 100
model: 10
delegate: StyledText {
text: "Hello world!"
}
} }
} }
}
ColumnLayout { ColumnLayout {
StyledText { StyledText {
text: "ToolTip" text: "Mpris Player Selector"
font.pixelSize: 18 font.pixelSize: 18
}
MprisPlayerSelector {}
}
ColumnLayout {
StyledText {
text: "Mpris Controller"
font.pixelSize: 18
}
MprisController {
player: Mpris.active ?? null
}
}
ColumnLayout {
StyledText {
text: "Drawer"
font.pixelSize: 18
}
RowLayout {
Button {
text: "Top"
onClicked: {
drawer.x = root.width / 2 - drawer.width / 2;
drawer.y = 0;
drawer.edge = Qt.TopEdge;
drawer.open();
}
} }
Button { Button {
id: toolTipButton text: "Left"
text: "Hello world!" onClicked: {
StyledToolTip { drawer.y = root.height / 2 - drawer.height / 2;
visible: toolTipButton.hovered drawer.x = 0;
text: qsTr("Save the active project") drawer.edge = Qt.LeftEdge;
drawer.open();
} }
} }
} Button {
text: "Right"
ColumnLayout { onClicked: {
StyledText { drawer.y = root.height / 2 - drawer.height / 2;
text: "Slider" drawer.x = 0;
font.pixelSize: 18 drawer.edge = Qt.RightEdge;
} drawer.open();
StyledSlider {
id: slider
from: 0
to: 100
value: 50
}
}
ColumnLayout {
StyledText {
text: "ProgressBar"
font.pixelSize: 18
}
StyledProgressBar {
id: progressBar
indeterminate: true
implicitHeight: 10
from: 0
to: 100
value: 50
}
}
ColumnLayout {
StyledText {
text: "ListView"
font.pixelSize: 18
}
StyledWrapperRectangle {
border.color: Theme.palette.base100
border.width: 2
StyledListView {
implicitWidth: 200
implicitHeight: 100
model: 10
delegate: StyledText {
text: "Hello world!"
}
} }
} }
} Button {
text: "Bottom"
ColumnLayout { onClicked: {
StyledText { drawer.x = root.width / 2 - drawer.width / 2;
text: "Mpris Player Selector" drawer.y = 0;
font.pixelSize: 18 drawer.edge = Qt.BottomEdge;
} drawer.open();
MprisPlayerSelector {}
}
ColumnLayout {
StyledText {
text: "Mpris Controller"
font.pixelSize: 18
}
MprisController {
player: Mpris.active ?? null
}
}
ColumnLayout {
StyledText {
text: "Drawer"
font.pixelSize: 18
}
RowLayout {
Button {
text: "Top"
onClicked: {
drawer.x = root.width / 2 - drawer.width / 2;
drawer.y = 0;
drawer.edge = Qt.TopEdge;
drawer.open();
}
}
Button {
text: "Left"
onClicked: {
drawer.y = root.height / 2 - drawer.height / 2;
drawer.x = 0;
drawer.edge = Qt.LeftEdge;
drawer.open();
}
}
Button {
text: "Right"
onClicked: {
drawer.y = root.height / 2 - drawer.height / 2;
drawer.x = 0;
drawer.edge = Qt.RightEdge;
drawer.open();
}
}
Button {
text: "Bottom"
onClicked: {
drawer.x = root.width / 2 - drawer.width / 2;
drawer.y = 0;
drawer.edge = Qt.BottomEdge;
drawer.open();
}
} }
} }
} }