From adfd353e85fa0b26ae2d41adf675501be87d57c6 Mon Sep 17 00:00:00 2001 From: tux Date: Mon, 24 Aug 2026 15:44:57 +0530 Subject: [PATCH] style: format qml files --- config/BarLayout.qml | 28 +-- modules/bar/AudioWidget.qml | 29 ++-- modules/bar/BatteryIndicator.qml | 8 +- modules/bar/CavaVisualizer.qml | 64 +++---- modules/bar/ClockWidget.qml | 6 +- modules/bar/GhostButton.qml | 4 +- modules/bar/HomeWidget.qml | 8 +- modules/bar/LauncherButton.qml | 6 +- modules/bar/PowerProfileWidget.qml | 8 +- modules/bar/SystemTrayWidget.qml | 32 ++-- modules/bar/Workspaces.qml | 82 ++++----- modules/osd/NotificationCard.qml | 197 +++++++++++---------- services/Cava.qml | 32 ++-- shell.qml | 1 - ui/BarButton.qml | 62 +++---- ui/ExclusionZone.qml | 8 +- ui/RoundedCorner.qml | 96 +++++------ windows/Bar.qml | 268 ++++++++++++++--------------- windows/Notification.qml | 80 ++++----- 19 files changed, 500 insertions(+), 519 deletions(-) diff --git a/config/BarLayout.qml b/config/BarLayout.qml index e449fcf..7bbab10 100644 --- a/config/BarLayout.qml +++ b/config/BarLayout.qml @@ -5,29 +5,15 @@ import qs.ui import qs.services Singleton { - id: root + id: root - function widget(name: string): url { - return `${Quickshell.shellPath("modules/bar")}/${name}.qml`; - } + function widget(name: string): url { + return `${Quickshell.shellPath("modules/bar")}/${name}.qml`; + } - property var left: [ - root.widget("LauncherButton"), - root.widget("PowerProfileWidget"), - root.widget("HomeWidget"), - ] + property var left: [root.widget("LauncherButton"), root.widget("PowerProfileWidget"), root.widget("HomeWidget"),] - property var center: [ - root.widget("CavaVisualizer"), - root.widget("Workspaces"), - root.widget("CavaVisualizer"), - ] + property var center: [root.widget("CavaVisualizer"), root.widget("Workspaces"), root.widget("CavaVisualizer"),] - property var right: [ - root.widget("AudioWidget"), - root.widget("BatteryIndicator"), - root.widget("SystemTrayWidget"), - root.widget("ClockWidget"), - root.widget("GhostButton") - ] + property var right: [root.widget("AudioWidget"), root.widget("BatteryIndicator"), root.widget("SystemTrayWidget"), root.widget("ClockWidget"), root.widget("GhostButton")] } diff --git a/modules/bar/AudioWidget.qml b/modules/bar/AudioWidget.qml index 65d9001..6b65171 100644 --- a/modules/bar/AudioWidget.qml +++ b/modules/bar/AudioWidget.qml @@ -5,20 +5,17 @@ import qs.ui import qs.services RowLayout { -BarButton { - hoverHighlight: false - pointerCursor: false - label: Audio.inputName - iconSource: Audio.inputIcon + BarButton { + hoverHighlight: false + pointerCursor: false + label: Audio.inputName + iconSource: Audio.inputIcon + } + + BarButton { + hoverHighlight: false + pointerCursor: false + label: Audio.outputName + iconSource: Audio.outputIcon + } } - - -BarButton { - hoverHighlight: false - pointerCursor: false - label: Audio.outputName - iconSource: Audio.outputIcon -} - -} - diff --git a/modules/bar/BatteryIndicator.qml b/modules/bar/BatteryIndicator.qml index 691a118..479555a 100644 --- a/modules/bar/BatteryIndicator.qml +++ b/modules/bar/BatteryIndicator.qml @@ -4,8 +4,8 @@ import qs.ui import qs.services BarButton { - hoverHighlight: false - pointerCursor: false - label: `${Battery.percentage}% ${Battery.energyRate}W` - iconSource: Battery.icon + hoverHighlight: false + pointerCursor: false + label: `${Battery.percentage}% ${Battery.energyRate}W` + iconSource: Battery.icon } diff --git a/modules/bar/CavaVisualizer.qml b/modules/bar/CavaVisualizer.qml index fdc75a4..b5ae8ba 100644 --- a/modules/bar/CavaVisualizer.qml +++ b/modules/bar/CavaVisualizer.qml @@ -5,47 +5,47 @@ import qs.config import qs.services Rectangle { - id: root + id: root - property int barCount: 14 - property real maxValue: 100 - readonly property bool shouldVisualize: barCount > 0 && Cava.values.some(v => v >= 0.001) + property int barCount: 14 + property real maxValue: 100 + readonly property bool shouldVisualize: barCount > 0 && Cava.values.some(v => v >= 0.001) - implicitWidth: 96 - implicitHeight: 32 - radius: Appearance.radius - color: Appearance.colors.inActive - visible: shouldVisualize + implicitWidth: 96 + implicitHeight: 32 + radius: Appearance.radius + color: Appearance.colors.inActive + visible: shouldVisualize - Row { - id: barRow + Row { + id: barRow - anchors.fill: parent - anchors.margins: 8 - spacing: 3 + anchors.fill: parent + anchors.margins: 8 + spacing: 3 - Repeater { - model: root.barCount + Repeater { + model: root.barCount - Rectangle { - id: bar + Rectangle { + id: bar - required property int index - readonly property real value: Cava.values[index] ?? 0 + required property int index + readonly property real value: Cava.values[index] ?? 0 - width: (barRow.width - barRow.spacing * (root.barCount - 1)) / root.barCount - height: Math.max(2, (bar.value / root.maxValue) * barRow.height) - anchors.bottom: parent.bottom - radius: bar.width / 2 - color: Appearance.colors.accent - antialiasing: true + width: (barRow.width - barRow.spacing * (root.barCount - 1)) / root.barCount + height: Math.max(2, (bar.value / root.maxValue) * barRow.height) + anchors.bottom: parent.bottom + radius: bar.width / 2 + color: Appearance.colors.accent + antialiasing: true - Behavior on height { - NumberAnimation { - duration: Appearance.duration - } + Behavior on height { + NumberAnimation { + duration: Appearance.duration + } + } + } } - } } - } } diff --git a/modules/bar/ClockWidget.qml b/modules/bar/ClockWidget.qml index 25b4891..4847e8b 100644 --- a/modules/bar/ClockWidget.qml +++ b/modules/bar/ClockWidget.qml @@ -4,7 +4,7 @@ import qs.ui import qs.services BarButton { - hoverHighlight: false - pointerCursor: false - label: Time.time + hoverHighlight: false + pointerCursor: false + label: Time.time } diff --git a/modules/bar/GhostButton.qml b/modules/bar/GhostButton.qml index 457cf36..3ff6ac6 100644 --- a/modules/bar/GhostButton.qml +++ b/modules/bar/GhostButton.qml @@ -4,6 +4,6 @@ import Quickshell import qs.ui BarButton { - iconOnly: true - iconSource: `${Quickshell.shellPath("assets")}/icons/ghost.svg` + iconOnly: true + iconSource: `${Quickshell.shellPath("assets")}/icons/ghost.svg` } diff --git a/modules/bar/HomeWidget.qml b/modules/bar/HomeWidget.qml index 560ab89..d3835d1 100644 --- a/modules/bar/HomeWidget.qml +++ b/modules/bar/HomeWidget.qml @@ -4,8 +4,8 @@ import qs.ui import qs.services BarButton { - hoverHighlight: false - pointerCursor: false - label: Home.latency >= 0 ? `${Home.latency} ms` : "NA" - iconSource: Home.icon + hoverHighlight: false + pointerCursor: false + label: Home.latency >= 0 ? `${Home.latency} ms` : "NA" + iconSource: Home.icon } diff --git a/modules/bar/LauncherButton.qml b/modules/bar/LauncherButton.qml index 2e5595d..efbaae2 100644 --- a/modules/bar/LauncherButton.qml +++ b/modules/bar/LauncherButton.qml @@ -4,7 +4,7 @@ import Quickshell import qs.ui BarButton { - iconOnly: true - iconSource: `${Quickshell.shellPath("assets")}/icons/nix.svg` - onClicked: Quickshell.execDetached(["vicinae", "toggle"]) + iconOnly: true + iconSource: `${Quickshell.shellPath("assets")}/icons/nix.svg` + onClicked: Quickshell.execDetached(["vicinae", "toggle"]) } diff --git a/modules/bar/PowerProfileWidget.qml b/modules/bar/PowerProfileWidget.qml index ed53823..c21414f 100644 --- a/modules/bar/PowerProfileWidget.qml +++ b/modules/bar/PowerProfileWidget.qml @@ -4,8 +4,8 @@ import qs.ui import qs.services BarButton { - hoverHighlight: false - pointerCursor: false - label: PowerProfile.name - iconSource: PowerProfile.icon + hoverHighlight: false + pointerCursor: false + label: PowerProfile.name + iconSource: PowerProfile.icon } diff --git a/modules/bar/SystemTrayWidget.qml b/modules/bar/SystemTrayWidget.qml index 2befefc..e8ba870 100644 --- a/modules/bar/SystemTrayWidget.qml +++ b/modules/bar/SystemTrayWidget.qml @@ -6,27 +6,27 @@ import qs.config import qs.ui BarButton { - id: root + id: root - property int iconSize: 16 + property int iconSize: 16 - hoverHighlight: false - pointerCursor: false - visible: SystemTray.items.values.length > 0 + hoverHighlight: false + pointerCursor: false + visible: SystemTray.items.values.length > 0 - contentItem: Row { - spacing: Appearance.spacing + contentItem: Row { + spacing: Appearance.spacing - Repeater { - model: SystemTray.items.values + Repeater { + model: SystemTray.items.values - Image { - required property var modelData + Image { + required property var modelData - source: modelData.icon - width: root.iconSize - height: root.iconSize - } + source: modelData.icon + width: root.iconSize + height: root.iconSize + } + } } - } } diff --git a/modules/bar/Workspaces.qml b/modules/bar/Workspaces.qml index f73ce9a..b4003d1 100644 --- a/modules/bar/Workspaces.qml +++ b/modules/bar/Workspaces.qml @@ -5,56 +5,56 @@ import Quickshell.Hyprland import qs.config Row { - id: root + id: root - property int count: 7 + property int count: 7 - spacing: Appearance.spacing + spacing: Appearance.spacing - Repeater { - model: root.count + Repeater { + model: root.count - Rectangle { - id: pill + Rectangle { + id: pill - required property int index - property var ws: Hyprland.workspaces.values.find(w => w.id === pill.index + 1) - property bool isActive: Hyprland.focusedWorkspace?.id === (pill.index + 1) + required property int index + property var ws: Hyprland.workspaces.values.find(w => w.id === pill.index + 1) + property bool isActive: Hyprland.focusedWorkspace?.id === (pill.index + 1) - radius: 1000 - implicitHeight: 15 - implicitWidth: pill.isActive ? pill.implicitHeight * 2.3 : pill.implicitHeight - color: { - if (handler.hovered) - return Appearance.colors.accent; - if (pill.isActive || pill.ws) - return Appearance.colors.accent; - return Appearance.colors.inActive; - } + radius: 1000 + implicitHeight: 15 + implicitWidth: pill.isActive ? pill.implicitHeight * 2.3 : pill.implicitHeight + color: { + if (handler.hovered) + return Appearance.colors.accent; + if (pill.isActive || pill.ws) + return Appearance.colors.accent; + return Appearance.colors.inActive; + } - MouseArea { - hoverEnabled: true - anchors.fill: parent - cursorShape: Qt.PointingHandCursor - onClicked: Hyprland.dispatch("workspace " + (pill.index + 1)) - } + MouseArea { + hoverEnabled: true + anchors.fill: parent + cursorShape: Qt.PointingHandCursor + onClicked: Hyprland.dispatch("workspace " + (pill.index + 1)) + } - HoverHandler { - id: handler - } + HoverHandler { + id: handler + } - Behavior on color { - ColorAnimation { - duration: Appearance.duration + Behavior on color { + ColorAnimation { + duration: Appearance.duration + } + } + + Behavior on implicitWidth { + NumberAnimation { + duration: Appearance.duration + easing.type: Easing.OutQuad + } + } } - } - - Behavior on implicitWidth { - NumberAnimation { - duration: Appearance.duration - easing.type: Easing.OutQuad - } - } } - } } diff --git a/modules/osd/NotificationCard.qml b/modules/osd/NotificationCard.qml index 74f07c0..863773f 100644 --- a/modules/osd/NotificationCard.qml +++ b/modules/osd/NotificationCard.qml @@ -7,111 +7,110 @@ import Quickshell.Services.Notifications import qs.config Rectangle { - id: root + id: root - property Notification notif - readonly property bool critical: notif?.urgency === NotificationUrgency.Critical - readonly property int timeoutDuration: { - const seconds = Math.round((notif?.expireTimeout ?? 0) / 1000); - return seconds > 0 ? seconds : 5; - } - readonly property string iconName: { - if (!notif) - return ""; + property Notification notif + readonly property bool critical: notif?.urgency === NotificationUrgency.Critical + readonly property int timeoutDuration: { + const seconds = Math.round((notif?.expireTimeout ?? 0) / 1000); + return seconds > 0 ? seconds : 5; + } + readonly property string iconName: { + if (!notif) + return ""; - const hints = notif.hints ?? {}; - const hinted = String(hints["image-path"] ?? hints["image_path"] ?? hints["icon_path"] ?? ""); - return notif.appIcon || notif.desktopEntry || hinted; - } - readonly property url themedIconUrl: iconName !== "" ? Quickshell.iconPath(iconName, false) : "" - readonly property url iconUrl: `${Quickshell.shellPath("assets")}/icons/notification.svg` + const hints = notif.hints ?? {}; + const hinted = String(hints["image-path"] ?? hints["image_path"] ?? hints["icon_path"] ?? ""); + return notif.appIcon || notif.desktopEntry || hinted; + } + readonly property url themedIconUrl: iconName !== "" ? Quickshell.iconPath(iconName, false) : "" + readonly property url iconUrl: `${Quickshell.shellPath("assets")}/icons/notification.svg` - implicitWidth: 360 - implicitHeight: content.implicitHeight + Appearance.padding * 2 - radius: Appearance.radius - color: Appearance.colors.background - border.width: critical ? 1 : 0 - border.color: Appearance.colors.accent + implicitWidth: 360 + implicitHeight: content.implicitHeight + Appearance.padding * 2 + radius: Appearance.radius + color: Appearance.colors.background + border.width: critical ? 1 : 0 + border.color: Appearance.colors.accent - Timer { - id: countdown + Timer { + id: countdown - interval: root.timeoutDuration * 1000 - repeat: false - running: !root.critical && !hovered.hovered && visible - onTriggered: root.notif.expire() - } - - HoverHandler { - id: hovered - } - - RowLayout { - id: content - - anchors.left: parent.left - anchors.right: parent.right - anchors.top: parent.top - anchors.margins: Appearance.padding - spacing: Appearance.spacing - - Item { - width: 40 - height: 40 - Layout.alignment: Qt.AlignTop - - Image { - anchors.fill: parent - source: root.iconUrl - fillMode: Image.PreserveAspectFit - smooth: true - } - - Image { - anchors.fill: parent - source: root.themedIconUrl - visible: root.themedIconUrl !== "" && status === Image.Ready - fillMode: Image.PreserveAspectFit - smooth: true - } + interval: root.timeoutDuration * 1000 + repeat: false + running: !root.critical && !hovered.hovered && visible + onTriggered: root.notif.expire() } - ColumnLayout { - spacing: 2 - Layout.fillWidth: true - Layout.alignment: Qt.AlignVCenter - - Text { - text: root.notif?.appName ?? "" - color: Appearance.colors.accent - font.family: Appearance.font.family - font.pointSize: Appearance.font.pointSize - 2 - elide: Text.ElideRight - Layout.fillWidth: true - } - Text { - text: root.notif?.summary ?? "" - color: Appearance.colors.foreground - font.family: Appearance.font.family - font.pointSize: Appearance.font.pointSize - font.weight: Font.DemiBold - elide: Text.ElideRight - Layout.fillWidth: true - } - Text { - text: root.notif?.body ?? "" - visible: text !== "" - color: Appearance.colors.foreground - opacity: 0.8 - font.family: Appearance.font.family - font.pointSize: Appearance.font.pointSize - 1 - wrapMode: Text.Wrap - maximumLineCount: 3 - elide: Text.ElideRight - textFormat: Text.PlainText - Layout.fillWidth: true - } + HoverHandler { + id: hovered + } + + RowLayout { + id: content + + anchors.left: parent.left + anchors.right: parent.right + anchors.top: parent.top + anchors.margins: Appearance.padding + spacing: Appearance.spacing + + Item { + width: 40 + height: 40 + Layout.alignment: Qt.AlignTop + + Image { + anchors.fill: parent + source: root.iconUrl + fillMode: Image.PreserveAspectFit + smooth: true + } + + Image { + anchors.fill: parent + source: root.themedIconUrl + visible: root.themedIconUrl !== "" && status === Image.Ready + fillMode: Image.PreserveAspectFit + smooth: true + } + } + + ColumnLayout { + spacing: 2 + Layout.fillWidth: true + Layout.alignment: Qt.AlignVCenter + + Text { + text: root.notif?.appName ?? "" + color: Appearance.colors.accent + font.family: Appearance.font.family + font.pointSize: Appearance.font.pointSize - 2 + elide: Text.ElideRight + Layout.fillWidth: true + } + Text { + text: root.notif?.summary ?? "" + color: Appearance.colors.foreground + font.family: Appearance.font.family + font.pointSize: Appearance.font.pointSize + font.weight: Font.DemiBold + elide: Text.ElideRight + Layout.fillWidth: true + } + Text { + text: root.notif?.body ?? "" + visible: text !== "" + color: Appearance.colors.foreground + opacity: 0.8 + font.family: Appearance.font.family + font.pointSize: Appearance.font.pointSize - 1 + wrapMode: Text.Wrap + maximumLineCount: 3 + elide: Text.ElideRight + textFormat: Text.PlainText + Layout.fillWidth: true + } + } } - } } - diff --git a/services/Cava.qml b/services/Cava.qml index e71ff9b..54f0b69 100644 --- a/services/Cava.qml +++ b/services/Cava.qml @@ -5,22 +5,22 @@ import Quickshell import Quickshell.Io Singleton { - id: root + id: root - readonly property string configPath: { - const url = Quickshell.shellPath("assets/cava.conf").toString(); - return url.startsWith("file://") ? decodeURIComponent(url.substring(7)) : url; - } - property var values: [] - - Process { - running: true - command: ["cava", "-p", root.configPath] - - stdout: SplitParser { - onRead: line => { - root.values = line.split(";").map(Number).filter(v => !Number.isNaN(v)); - } + readonly property string configPath: { + const url = Quickshell.shellPath("assets/cava.conf").toString(); + return url.startsWith("file://") ? decodeURIComponent(url.substring(7)) : url; + } + property var values: [] + + Process { + running: true + command: ["cava", "-p", root.configPath] + + stdout: SplitParser { + onRead: line => { + root.values = line.split(";").map(Number).filter(v => !Number.isNaN(v)); + } + } } - } } diff --git a/shell.qml b/shell.qml index 00ef23a..80b77cb 100644 --- a/shell.qml +++ b/shell.qml @@ -5,4 +5,3 @@ Scope { Bar {} Notification {} } - diff --git a/ui/BarButton.qml b/ui/BarButton.qml index c00e53e..e8742b9 100644 --- a/ui/BarButton.qml +++ b/ui/BarButton.qml @@ -5,42 +5,42 @@ import QtQuick.Controls import qs.config Button { - id: root + id: root - property string label: "" - property url iconSource: "" - property bool iconOnly: false - property bool hoverHighlight: true - property bool pointerCursor: true + property string label: "" + property url iconSource: "" + property bool iconOnly: false + property bool hoverHighlight: true + property bool pointerCursor: true - padding: Appearance.padding - display: iconOnly ? AbstractButton.IconOnly : AbstractButton.TextBesideIcon + padding: Appearance.padding + display: iconOnly ? AbstractButton.IconOnly : AbstractButton.TextBesideIcon - text: label - font.family: Appearance.font.family - font.pointSize: Appearance.font.pointSize - palette.buttonText: Appearance.colors.foreground - icon.color: Appearance.colors.foreground - icon.source: iconSource + text: label + font.family: Appearance.font.family + font.pointSize: Appearance.font.pointSize + palette.buttonText: Appearance.colors.foreground + icon.color: Appearance.colors.foreground + icon.source: iconSource - HoverHandler { - cursorShape: Qt.PointingHandCursor - enabled: root.pointerCursor - } - - background: Rectangle { - anchors.fill: parent - radius: Appearance.radius - color: { - if (!root.hoverHighlight) - return Appearance.colors.inActive; - return root.hovered ? Appearance.colors.inActive : Appearance.colors.background; + HoverHandler { + cursorShape: Qt.PointingHandCursor + enabled: root.pointerCursor } - Behavior on color { - ColorAnimation { - duration: Appearance.duration - } + background: Rectangle { + anchors.fill: parent + radius: Appearance.radius + color: { + if (!root.hoverHighlight) + return Appearance.colors.inActive; + return root.hovered ? Appearance.colors.inActive : Appearance.colors.background; + } + + Behavior on color { + ColorAnimation { + duration: Appearance.duration + } + } } - } } diff --git a/ui/ExclusionZone.qml b/ui/ExclusionZone.qml index 016d2e4..739a8e6 100644 --- a/ui/ExclusionZone.qml +++ b/ui/ExclusionZone.qml @@ -4,9 +4,9 @@ import Quickshell import Quickshell.Wayland PanelWindow { - property string name + property string name - implicitWidth: 0 - implicitHeight: 0 - WlrLayershell.namespace: `quickshell:${name}ExclusionZone` + implicitWidth: 0 + implicitHeight: 0 + WlrLayershell.namespace: `quickshell:${name}ExclusionZone` } diff --git a/ui/RoundedCorner.qml b/ui/RoundedCorner.qml index edc6df8..4075ecd 100644 --- a/ui/RoundedCorner.qml +++ b/ui/RoundedCorner.qml @@ -6,61 +6,61 @@ import Quickshell.Widgets import qs.config WrapperItem { - id: root + id: root - property int corner - property real radius: Appearance.radius - property color color + property int corner + property real radius: Appearance.radius + property color color - Component.onCompleted: { - switch (corner) { - case 0: - anchors.left = parent.left; - anchors.top = parent.top; - break; - case 1: - anchors.top = parent.top; - anchors.right = parent.right; - rotation = 90; - break; - case 2: - anchors.right = parent.right; - anchors.bottom = parent.bottom; - rotation = 180; - break; - case 3: - anchors.left = parent.left; - anchors.bottom = parent.bottom; - rotation = -90; - break; + Component.onCompleted: { + switch (corner) { + case 0: + anchors.left = parent.left; + anchors.top = parent.top; + break; + case 1: + anchors.top = parent.top; + anchors.right = parent.right; + rotation = 90; + break; + case 2: + anchors.right = parent.right; + anchors.bottom = parent.bottom; + rotation = 180; + break; + case 3: + anchors.left = parent.left; + anchors.bottom = parent.bottom; + rotation = -90; + break; + } } - } - Shape { - preferredRendererType: Shape.CurveRenderer + Shape { + preferredRendererType: Shape.CurveRenderer - ShapePath { - strokeWidth: 0 - fillColor: root.color - startX: root.radius + ShapePath { + strokeWidth: 0 + fillColor: root.color + startX: root.radius - PathArc { - relativeX: -root.radius - relativeY: root.radius - radiusX: root.radius - radiusY: radiusX - direction: PathArc.Counterclockwise - } + PathArc { + relativeX: -root.radius + relativeY: root.radius + radiusX: root.radius + radiusY: radiusX + direction: PathArc.Counterclockwise + } - PathLine { - relativeX: 0 - relativeY: -root.radius - } + PathLine { + relativeX: 0 + relativeY: -root.radius + } - PathLine { - relativeX: root.radius - relativeY: 0 - } + PathLine { + relativeX: root.radius + relativeY: 0 + } + } } - } } diff --git a/windows/Bar.qml b/windows/Bar.qml index 2641766..e5e751f 100644 --- a/windows/Bar.qml +++ b/windows/Bar.qml @@ -8,154 +8,154 @@ import qs.config import qs.ui PanelWindow { - id: window + id: window - property color barColor: Appearance.colors.background - - color: "transparent" - exclusionMode: ExclusionMode.Ignore - mask: Region { - item: cornersArea - intersection: Intersection.Subtract - } - - anchors { - left: true - top: true - right: true - bottom: true - } - - component BarSection: Rectangle { - id: section - - property var widgets: [] - property int alignment: Qt.AlignLeft + property color barColor: Appearance.colors.background color: "transparent" - implicitHeight: parent.height - Layout.fillWidth: true + exclusionMode: ExclusionMode.Ignore + mask: Region { + item: cornersArea + intersection: Intersection.Subtract + } - RowLayout { - id: secRow + anchors { + left: true + top: true + right: true + bottom: true + } - anchors.verticalCenter: parent.verticalCenter - x: section.alignment === Qt.AlignLeft ? 0 : section.alignment === Qt.AlignRight ? parent.width - width : (parent.width - width) / 2 - spacing: Appearance.spacing + component BarSection: Rectangle { + id: section - Repeater { - model: section.widgets + property var widgets: [] + property int alignment: Qt.AlignLeft - Loader { - required property var modelData + color: "transparent" + implicitHeight: parent.height + Layout.fillWidth: true - source: modelData - Layout.alignment: Qt.AlignVCenter + RowLayout { + id: secRow + + anchors.verticalCenter: parent.verticalCenter + x: section.alignment === Qt.AlignLeft ? 0 : section.alignment === Qt.AlignRight ? parent.width - width : (parent.width - width) / 2 + spacing: Appearance.spacing + + Repeater { + model: section.widgets + + Loader { + required property var modelData + + source: modelData + Layout.alignment: Qt.AlignVCenter + } + } } - } } - } - // Exclusions - Scope { - ExclusionZone { - name: "left" - exclusiveZone: leftBar.implicitWidth - anchors.left: true + // Exclusions + Scope { + ExclusionZone { + name: "left" + exclusiveZone: leftBar.implicitWidth + anchors.left: true + } + ExclusionZone { + name: "top" + exclusiveZone: topBar.implicitHeight + anchors.top: true + } + ExclusionZone { + name: "right" + exclusiveZone: rightBar.implicitWidth + anchors.right: true + } + ExclusionZone { + name: "bottom" + exclusiveZone: bottomBar.implicitHeight + anchors.bottom: true + } } - ExclusionZone { - name: "top" - exclusiveZone: topBar.implicitHeight - anchors.top: true - } - ExclusionZone { - name: "right" - exclusiveZone: rightBar.implicitWidth - anchors.right: true - } - ExclusionZone { - name: "bottom" - exclusiveZone: bottomBar.implicitHeight - anchors.bottom: true - } - } - // Bars - Rectangle { - id: leftBar + // Bars + Rectangle { + id: leftBar - implicitWidth: 10 - implicitHeight: QsWindow.window?.height ?? 0 - color: window.barColor - anchors.left: parent.left - } - Rectangle { - id: rightBar - - implicitWidth: 10 - implicitHeight: QsWindow.window?.height ?? 0 - color: window.barColor - anchors.right: parent.right - } - Rectangle { - id: bottomBar - - implicitWidth: QsWindow.window?.width ?? 0 - implicitHeight: 10 - color: window.barColor - anchors.bottom: parent.bottom - } - Rectangle { - id: topBar - - implicitWidth: QsWindow.window?.width ?? 0 - implicitHeight: 50 - color: window.barColor - anchors.top: parent.top - - FlexboxLayout { - id: flexLayout - - anchors.fill: parent - anchors.margins: Appearance.margin - - wrap: FlexboxLayout.Wrap - direction: FlexboxLayout.Row - justifyContent: FlexboxLayout.JustifySpaceBetween - - BarSection { - widgets: BarLayout.left - alignment: Qt.AlignLeft - } - BarSection { - widgets: BarLayout.center - alignment: Qt.AlignHCenter - } - BarSection { - widgets: BarLayout.right - alignment: Qt.AlignRight - } - } - } - - Rectangle { - id: cornersArea - - implicitWidth: QsWindow.window?.width - (leftBar.implicitWidth + rightBar.implicitWidth) - implicitHeight: QsWindow.window?.height - (topBar.implicitHeight + bottomBar.implicitHeight) - color: "transparent" - x: leftBar.implicitWidth - y: topBar.implicitHeight - - Repeater { - model: 4 - - RoundedCorner { - required property int modelData - - corner: modelData + implicitWidth: 10 + implicitHeight: QsWindow.window?.height ?? 0 color: window.barColor - } + anchors.left: parent.left + } + Rectangle { + id: rightBar + + implicitWidth: 10 + implicitHeight: QsWindow.window?.height ?? 0 + color: window.barColor + anchors.right: parent.right + } + Rectangle { + id: bottomBar + + implicitWidth: QsWindow.window?.width ?? 0 + implicitHeight: 10 + color: window.barColor + anchors.bottom: parent.bottom + } + Rectangle { + id: topBar + + implicitWidth: QsWindow.window?.width ?? 0 + implicitHeight: 50 + color: window.barColor + anchors.top: parent.top + + FlexboxLayout { + id: flexLayout + + anchors.fill: parent + anchors.margins: Appearance.margin + + wrap: FlexboxLayout.Wrap + direction: FlexboxLayout.Row + justifyContent: FlexboxLayout.JustifySpaceBetween + + BarSection { + widgets: BarLayout.left + alignment: Qt.AlignLeft + } + BarSection { + widgets: BarLayout.center + alignment: Qt.AlignHCenter + } + BarSection { + widgets: BarLayout.right + alignment: Qt.AlignRight + } + } + } + + Rectangle { + id: cornersArea + + implicitWidth: QsWindow.window?.width - (leftBar.implicitWidth + rightBar.implicitWidth) + implicitHeight: QsWindow.window?.height - (topBar.implicitHeight + bottomBar.implicitHeight) + color: "transparent" + x: leftBar.implicitWidth + y: topBar.implicitHeight + + Repeater { + model: 4 + + RoundedCorner { + required property int modelData + + corner: modelData + color: window.barColor + } + } } - } } diff --git a/windows/Notification.qml b/windows/Notification.qml index 789c9b2..924f2a9 100644 --- a/windows/Notification.qml +++ b/windows/Notification.qml @@ -8,48 +8,48 @@ import qs.services import "../modules/osd" PanelWindow { - id: root + id: root - readonly property int cardWidth: 420 + readonly property int cardWidth: 420 - color: "transparent" - exclusionMode: ExclusionMode.Ignore - visible: Notifications.popupCount > 0 - implicitWidth: root.cardWidth - implicitHeight: stack.implicitHeight + color: "transparent" + exclusionMode: ExclusionMode.Ignore + visible: Notifications.popupCount > 0 + implicitWidth: root.cardWidth + implicitHeight: stack.implicitHeight - anchors { - top: true - right: true - } - margins { - top: 50 + Appearance.margin - right: 10 + Appearance.margin - } - - mask: Region { - item: stack - } - - ColumnLayout { - id: stack - - anchors.top: parent.top - anchors.right: parent.right - anchors.left: parent.left - spacing: Appearance.spacing - - Repeater { - model: [...Notifications.popups.values].reverse() - - NotificationCard { - id: card - - required property var modelData - - notif: modelData - Layout.fillWidth: true - } + anchors { + top: true + right: true + } + margins { + top: 50 + Appearance.margin + right: 10 + Appearance.margin + } + + mask: Region { + item: stack + } + + ColumnLayout { + id: stack + + anchors.top: parent.top + anchors.right: parent.right + anchors.left: parent.left + spacing: Appearance.spacing + + Repeater { + model: [...Notifications.popups.values].reverse() + + NotificationCard { + id: card + + required property var modelData + + notif: modelData + Layout.fillWidth: true + } + } } - } }