Compare commits

..

No commits in common. "11d0e4a8380c382d44349579bbc5f839edc78ea0" and "75f780753f9cf0ad4cc0ab42bfb86a730f722e2a" have entirely different histories.

6 changed files with 245 additions and 146 deletions

34
components/StyledMenu.qml Normal file
View file

@ -0,0 +1,34 @@
import qs.config
import qs.services
import QtQuick
import QtQuick.Controls
Menu {
id: root
palette.window: Theme.palette.base100
palette.base: Theme.palette.base100
focus: true
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
popupType: Popup.Window
function toggle() {
visible ? close() : open();
}
enter: Transition {
NumberAnimation {
property: "opacity"
from: 0.0
to: 1.0
}
}
exit: Transition {
NumberAnimation {
property: "opacity"
from: 1.0
to: 0.0
}
}
}

View file

@ -0,0 +1,9 @@
import qs.config
import QtQuick
import QtQuick.Controls
MenuItem {
palette.text: Theme.palette.basecontent
palette.highlight: Theme.palette.primary
palette.highlightedText: Theme.palette.primarycontent
}

View file

@ -0,0 +1,9 @@
import qs.config
import QtQuick
import QtQuick.Controls
MenuSeparator {
palette.text: Theme.palette.basecontent
palette.highlight: Theme.palette.primary
palette.highlightedText: Theme.palette.primarycontent
}

View file

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

View file

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

View file

@ -4,173 +4,225 @@ import qs.components
import qs.config
import qs.constants
import qs.services
import Quickshell.Hyprland
import Quickshell.Wayland
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
StyledPopupWindow {
StyledWindow {
id: root
name: "storybook"
visible: Visibility.storybook
implicitWidth: rect.width
implicitHeight: rect.height
GridLayout {
id: grid
WlrLayershell.layer: WlrLayer.Top
WlrLayershell.keyboardFocus: root.visible ? WlrKeyboardFocus.OnDemand : WlrKeyboardFocus.None
flow: GridLayout.TopToBottom
columns: 2
rows: 10
StyledText {
Layout.columnSpan: grid.columns
Layout.alignment: Qt.AlignHCenter
text: "Components"
font.pixelSize: 24
font.bold: true
font.underline: true
bottomPadding: 24
HyprlandFocusGrab {
active: Visibility.storybook
windows: [root]
onCleared: {
Visibility.storybook = false;
}
}
StyledWrapperRectangle {
id: rect
margin: 48
GridLayout {
id: grid
flow: GridLayout.TopToBottom
columns: 2
rows: 10
ColumnLayout {
StyledText {
text: "Icon Button"
font.pixelSize: 18
}
StyledIconButton {
text: Icons.square
}
}
ColumnLayout {
StyledText {
text: "Switch"
font.pixelSize: 18
Layout.columnSpan: grid.columns
Layout.alignment: Qt.AlignHCenter
text: "Components"
font.pixelSize: 24
font.bold: true
font.underline: true
bottomPadding: 24
}
StyledSwitch {
text: "Enable"
}
}
ColumnLayout {
StyledText {
text: "ToolTip"
font.pixelSize: 18
}
Button {
id: toolTipButton
text: "Hello world!"
StyledToolTip {
visible: toolTipButton.hovered
text: qsTr("Save the active project")
ColumnLayout {
StyledText {
text: "Icon Button"
font.pixelSize: 18
}
StyledIconButton {
text: Icons.square
}
}
}
ColumnLayout {
StyledText {
text: "Slider"
font.pixelSize: 18
}
StyledSlider {
id: slider
from: 0
to: 100
value: 50
}
}
ColumnLayout {
StyledText {
text: "Switch"
font.pixelSize: 18
}
ColumnLayout {
StyledText {
text: "ProgressBar"
font.pixelSize: 18
StyledSwitch {
text: "Enable"
}
}
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 {
StyledText {
text: "ToolTip"
font.pixelSize: 18
}
Button {
id: toolTipButton
text: "Hello world!"
StyledToolTip {
visible: toolTipButton.hovered
text: qsTr("Save the active project")
}
}
}
}
ColumnLayout {
StyledText {
text: "Mpris Player Selector"
font.pixelSize: 18
ColumnLayout {
StyledText {
text: "Slider"
font.pixelSize: 18
}
StyledSlider {
id: slider
from: 0
to: 100
value: 50
}
}
MprisPlayerSelector {}
}
ColumnLayout {
StyledText {
text: "Mpris Controller"
font.pixelSize: 18
ColumnLayout {
StyledText {
text: "ProgressBar"
font.pixelSize: 18
}
StyledProgressBar {
id: progressBar
indeterminate: true
implicitHeight: 10
from: 0
to: 100
value: 50
}
}
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();
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: "Left"
onClicked: {
drawer.y = root.height / 2 - drawer.height / 2;
drawer.x = 0;
drawer.edge = Qt.LeftEdge;
drawer.open();
}
}
ColumnLayout {
StyledText {
text: "Mpris Player Selector"
font.pixelSize: 18
}
MprisPlayerSelector {}
}
ColumnLayout {
StyledText {
text: "Mpris Controller"
font.pixelSize: 18
}
MprisController {
player: Mpris.active ?? null
}
}
ColumnLayout {
StyledText {
text: "Popup"
font.pixelSize: 18
}
Button {
text: "Right"
onClicked: {
drawer.y = root.height / 2 - drawer.height / 2;
drawer.x = 0;
drawer.edge = Qt.RightEdge;
drawer.open();
id: fileButton
text: "File"
onPressed: menu.visible ? menu.close() : menu.open()
StyledPopup {
id: menu
anchor.item: fileButton
Column {
StyledButton {
text: "New..."
}
StyledButton {
text: "Open..."
}
StyledText {
text: "Close"
}
}
}
}
Button {
text: "Bottom"
onClicked: {
drawer.x = root.width / 2 - drawer.width / 2;
drawer.y = 0;
drawer.edge = Qt.BottomEdge;
drawer.open();
}
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();
}
}
}
}