qmlformat

This commit is contained in:
quadbyte 2025-08-10 08:13:58 -04:00
parent ff7dff8a6d
commit 0c044c7b81
9 changed files with 338 additions and 333 deletions

View file

@ -4,42 +4,41 @@ import Quickshell.Wayland
import qs.Services import qs.Services
ShellRoot { ShellRoot {
property var modelData
property string wallpaperSource: Qt.resolvedUrl("../../Assets/Tests/wallpaper.png")
Variants { property var modelData
model: Quickshell.screens property string wallpaperSource: Qt.resolvedUrl(
"../../Assets/Tests/wallpaper.png")
PanelWindow { Variants {
required property ShellScreen modelData model: Quickshell.screens
visible: wallpaperSource !== "" PanelWindow {
anchors { required property ShellScreen modelData
bottom: true
top: true visible: wallpaperSource !== ""
right: true anchors {
left: true bottom: true
} top: true
margins { right: true
top: 0 left: true
} }
color: "transparent" margins {
screen: modelData top: 0
WlrLayershell.layer: WlrLayer.Background }
WlrLayershell.exclusionMode: ExclusionMode.Ignore color: "transparent"
WlrLayershell.namespace: "quickshell-wallpaper" screen: modelData
Image { WlrLayershell.layer: WlrLayer.Background
anchors.fill: parent WlrLayershell.exclusionMode: ExclusionMode.Ignore
fillMode: Image.PreserveAspectCrop WlrLayershell.namespace: "quickshell-wallpaper"
source: wallpaperSource Image {
visible: wallpaperSource !== "" anchors.fill: parent
cache: true fillMode: Image.PreserveAspectCrop
smooth: true source: wallpaperSource
mipmap: false visible: wallpaperSource !== ""
} cache: true
} smooth: true
mipmap: false
}
} }
}
}
}

View file

@ -5,52 +5,51 @@ import Quickshell.Wayland
import qs.Services import qs.Services
ShellRoot { ShellRoot {
property string wallpaperSource: Qt.resolvedUrl("../../Assets/Tests/wallpaper.png") property string wallpaperSource: Qt.resolvedUrl(
property var modelData "../../Assets/Tests/wallpaper.png")
property var modelData
Variants { Variants {
model: Quickshell.screens model: Quickshell.screens
PanelWindow { PanelWindow {
required property ShellScreen modelData required property ShellScreen modelData
visible: wallpaperSource !== "" visible: wallpaperSource !== ""
anchors { anchors {
top: true top: true
bottom: true bottom: true
right: true right: true
left: true left: true
} }
color: "transparent" color: "transparent"
screen: modelData screen: modelData
WlrLayershell.layer: WlrLayer.Background WlrLayershell.layer: WlrLayer.Background
WlrLayershell.exclusionMode: ExclusionMode.Ignore WlrLayershell.exclusionMode: ExclusionMode.Ignore
WlrLayershell.namespace: "quickshell-overview" WlrLayershell.namespace: "quickshell-overview"
Image { Image {
id: bgImage id: bgImage
anchors.fill: parent anchors.fill: parent
fillMode: Image.PreserveAspectCrop fillMode: Image.PreserveAspectCrop
source: wallpaperSource source: wallpaperSource
cache: true cache: true
smooth: true smooth: true
mipmap: false mipmap: false
visible: wallpaperSource !== "" visible: wallpaperSource !== ""
} }
MultiEffect { MultiEffect {
id: overviewBgBlur id: overviewBgBlur
anchors.fill: parent anchors.fill: parent
source: bgImage source: bgImage
blurEnabled: true blurEnabled: true
blur: 0.48 blur: 0.48
blurMax: 128 blurMax: 128
} }
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
color: Qt.rgba( color: Qt.rgba(Colors.backgroundPrimary.r, Colors.backgroundPrimary.g,
Colors.backgroundPrimary.r, Colors.backgroundPrimary.b, 0.5)
Colors.backgroundPrimary.g, }
Colors.backgroundPrimary.b, 0.5)
}
}
} }
}
} }

View file

@ -14,7 +14,8 @@ PanelWindow {
screen: modelData screen: modelData
implicitHeight: Style.barHeight * scaling implicitHeight: Style.barHeight * scaling
color: "transparent" color: "transparent"
visible: Settings.settings.barMonitors.includes(modelData.name) || (Settings.settings.barMonitors.length === 0) visible: Settings.settings.barMonitors.includes(modelData.name)
|| (Settings.settings.barMonitors.length === 0)
anchors { anchors {
top: true top: true
@ -56,7 +57,6 @@ PanelWindow {
spacing: Style.marginMedium * scaling spacing: Style.marginMedium * scaling
Workspace {} Workspace {}
} }
Row { Row {
@ -79,7 +79,9 @@ PanelWindow {
NIconButton { NIconButton {
id: demoPanelToggler id: demoPanelToggler
icon: "experiment" icon: "experiment"
onClicked: function () { demoPanel.isLoaded = !demoPanel.isLoaded } onClicked: function () {
demoPanel.isLoaded = !demoPanel.isLoaded
}
} }
} }
} }

View file

@ -17,12 +17,12 @@ NClock {
visible: false visible: false
} }
onEntered: function (){ onEntered: function () {
if (!calendar.visible) { if (!calendar.visible) {
tooltip.show() tooltip.show()
} }
} }
onExited: function (){ onExited: function () {
tooltip.hide() tooltip.hide()
} }
onClicked: function () { onClicked: function () {

View file

@ -8,260 +8,263 @@ import Quickshell.Io
import qs.Services import qs.Services
Item { Item {
id: root id: root
property bool isDestroying: false property bool isDestroying: false
property bool hovered: false property bool hovered: false
readonly property real scaling: Scaling.scale(screen) readonly property real scaling: Scaling.scale(screen)
property var modelData property var modelData
signal workspaceChanged(int workspaceId, color accentColor) signal workspaceChanged(int workspaceId, color accentColor)
property ListModel localWorkspaces: ListModel {} property ListModel localWorkspaces: ListModel {}
property real masterProgress: 0.0 property real masterProgress: 0.0
property bool effectsActive: false property bool effectsActive: false
property color effectColor: Colors.accentPrimary property color effectColor: Colors.accentPrimary
// Unified scale // Unified scale
property real s: scale property real s: scale
property int horizontalPadding: Math.round(16 * s) property int horizontalPadding: Math.round(16 * s)
property int spacingBetweenPills: Math.round(8 * s) property int spacingBetweenPills: Math.round(8 * s)
width: { width: {
let total = 0; let total = 0
for (let i = 0; i < localWorkspaces.count; i++) { for (var i = 0; i < localWorkspaces.count; i++) {
const ws = localWorkspaces.get(i); const ws = localWorkspaces.get(i)
if (ws.isFocused) if (ws.isFocused)
total += Math.round(44 * s); total += Math.round(44 * s)
else if (ws.isActive) else if (ws.isActive)
total += Math.round(28 * s); total += Math.round(28 * s)
else
total += Math.round(16 * s)
}
total += Math.max(localWorkspaces.count - 1, 0) * spacingBetweenPills
total += horizontalPadding * 2
return total
}
height: Math.round(36 * s)
Component.onCompleted: {
localWorkspaces.clear()
for (var i = 0; i < Workspaces.workspaces.count; i++) {
const ws = Workspaces.workspaces.get(i)
if (ws.output.toLowerCase() === screen.name.toLowerCase()) {
localWorkspaces.append(ws)
}
}
workspaceRepeater.model = localWorkspaces
updateWorkspaceFocus()
}
Connections {
target: Workspaces
function onWorkspacesChanged() {
localWorkspaces.clear()
for (var i = 0; i < Workspaces.workspaces.count; i++) {
const ws = Workspaces.workspaces.get(i)
if (ws.output.toLowerCase() === screen.name.toLowerCase()) {
localWorkspaces.append(ws)
}
}
workspaceRepeater.model = localWorkspaces
updateWorkspaceFocus()
}
}
function triggerUnifiedWave() {
effectColor = Colors.accentPrimary
masterAnimation.restart()
}
SequentialAnimation {
id: masterAnimation
PropertyAction {
target: root
property: "effectsActive"
value: true
}
NumberAnimation {
target: root
property: "masterProgress"
from: 0.0
to: 1.0
duration: 1000
easing.type: Easing.OutQuint
}
PropertyAction {
target: root
property: "effectsActive"
value: false
}
PropertyAction {
target: root
property: "masterProgress"
value: 0.0
}
}
function updateWorkspaceFocus() {
for (var i = 0; i < localWorkspaces.count; i++) {
const ws = localWorkspaces.get(i)
if (ws.isFocused === true) {
root.triggerUnifiedWave()
root.workspaceChanged(ws.id, Colors.accentPrimary)
break
}
}
}
Rectangle {
id: workspaceBackground
width: parent.width - Math.round(15 * s)
height: Math.round(26 * s)
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
radius: Math.round(12 * s)
color: Colors.surfaceVariant
border.color: Qt.rgba(Colors.textPrimary.r, Colors.textPrimary.g,
Colors.textPrimary.b, 0.1)
border.width: Math.max(1, Math.round(1 * s))
layer.enabled: true
layer.effect: MultiEffect {
shadowColor: "black"
// radius: 12
shadowVerticalOffset: 0
shadowHorizontalOffset: 0
shadowOpacity: 0.10
}
}
Row {
id: pillRow
spacing: spacingBetweenPills
anchors.verticalCenter: workspaceBackground.verticalCenter
width: root.width - horizontalPadding * 2
x: horizontalPadding
Repeater {
id: workspaceRepeater
model: localWorkspaces
Item {
id: workspacePillContainer
height: Math.round(12 * s)
width: {
if (model.isFocused)
return Math.round(44 * s)
else if (model.isActive)
return Math.round(28 * s)
else
return Math.round(16 * s)
}
Rectangle {
id: workspacePill
anchors.fill: parent
radius: {
if (model.isFocused)
return Math.round(12 * s)
else else
total += Math.round(16 * s); // half of focused height (if you want to animate this too)
} return Math.round(6 * s)
total += Math.max(localWorkspaces.count - 1, 0) * spacingBetweenPills; }
total += horizontalPadding * 2; color: {
return total; if (model.isFocused)
} return Colors.accentPrimary
if (model.isUrgent)
return Colors.error
if (model.isActive || model.isOccupied)
return Colors.accentTertiary
if (model.isUrgent)
return Colors.error
height: Math.round(36 * s) return Colors.outline
}
scale: model.isFocused ? 1.0 : 0.9
z: 0
Component.onCompleted: { MouseArea {
localWorkspaces.clear(); id: pillMouseArea
for (let i = 0; i < Workspaces.workspaces.count; i++) { anchors.fill: parent
const ws = Workspaces.workspaces.get(i); cursorShape: Qt.PointingHandCursor
if (ws.output.toLowerCase() === screen.name.toLowerCase()) { onClicked: {
localWorkspaces.append(ws); Workspaces.switchToWorkspace(model.idx)
} }
} hoverEnabled: true
workspaceRepeater.model = localWorkspaces; }
updateWorkspaceFocus(); // Material 3-inspired smooth animation for width, height, scale, color, opacity, and radius
} Behavior on width {
NumberAnimation {
Connections { duration: 350
target: Workspaces easing.type: Easing.OutBack
function onWorkspacesChanged() {
localWorkspaces.clear();
for (let i = 0; i < Workspaces.workspaces.count; i++) {
const ws = Workspaces.workspaces.get(i);
if (ws.output.toLowerCase() === screen.name.toLowerCase()) {
localWorkspaces.append(ws);
}
} }
}
workspaceRepeater.model = localWorkspaces; Behavior on height {
updateWorkspaceFocus(); NumberAnimation {
} duration: 350
} easing.type: Easing.OutBack
function triggerUnifiedWave() {
effectColor = Colors.accentPrimary;
masterAnimation.restart();
}
SequentialAnimation {
id: masterAnimation
PropertyAction {
target: root
property: "effectsActive"
value: true
}
NumberAnimation {
target: root
property: "masterProgress"
from: 0.0
to: 1.0
duration: 1000
easing.type: Easing.OutQuint
}
PropertyAction {
target: root
property: "effectsActive"
value: false
}
PropertyAction {
target: root
property: "masterProgress"
value: 0.0
}
}
function updateWorkspaceFocus() {
for (let i = 0; i < localWorkspaces.count; i++) {
const ws = localWorkspaces.get(i);
if (ws.isFocused === true) {
root.triggerUnifiedWave();
root.workspaceChanged(ws.id, Colors.accentPrimary);
break;
} }
} }
} Behavior on scale {
NumberAnimation {
Rectangle { duration: 300
id: workspaceBackground easing.type: Easing.OutBack
width: parent.width - Math.round(15 * s)
height: Math.round(26 * s)
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
radius: Math.round(12 * s)
color: Colors.surfaceVariant
border.color: Qt.rgba(Colors.textPrimary.r, Colors.textPrimary.g, Colors.textPrimary.b, 0.1)
border.width: Math.max(1, Math.round(1 * s))
layer.enabled: true
layer.effect: MultiEffect {
shadowColor: "black"
// radius: 12
shadowVerticalOffset: 0
shadowHorizontalOffset: 0
shadowOpacity: 0.10
}
}
Row {
id: pillRow
spacing: spacingBetweenPills
anchors.verticalCenter: workspaceBackground.verticalCenter
width: root.width - horizontalPadding * 2
x: horizontalPadding
Repeater {
id: workspaceRepeater
model: localWorkspaces
Item {
id: workspacePillContainer
height: Math.round(12 * s)
width: {
if (model.isFocused)
return Math.round(44 * s);
else if (model.isActive)
return Math.round(28 * s);
else
return Math.round(16 * s);
}
Rectangle {
id: workspacePill
anchors.fill: parent
radius: {
if (model.isFocused)
return Math.round(12 * s);
else
// half of focused height (if you want to animate this too)
return Math.round(6 * s);
}
color: {
if (model.isFocused)
return Colors.accentPrimary;
if (model.isUrgent)
return Colors.error;
if (model.isActive || model.isOccupied)
return Colors.accentTertiary;
if (model.isUrgent)
return Colors.error;
return Colors.outline;
}
scale: model.isFocused ? 1.0 : 0.9
z: 0
MouseArea {
id: pillMouseArea
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
Workspaces.switchToWorkspace(model.idx);
}
hoverEnabled: true
}
// Material 3-inspired smooth animation for width, height, scale, color, opacity, and radius
Behavior on width {
NumberAnimation {
duration: 350
easing.type: Easing.OutBack
}
}
Behavior on height {
NumberAnimation {
duration: 350
easing.type: Easing.OutBack
}
}
Behavior on scale {
NumberAnimation {
duration: 300
easing.type: Easing.OutBack
}
}
Behavior on color {
ColorAnimation {
duration: 200
easing.type: Easing.InOutCubic
}
}
Behavior on opacity {
NumberAnimation {
duration: 200
easing.type: Easing.InOutCubic
}
}
Behavior on radius {
NumberAnimation {
duration: 350
easing.type: Easing.OutBack
}
}
}
Behavior on width {
NumberAnimation {
duration: 350
easing.type: Easing.OutBack
}
}
Behavior on height {
NumberAnimation {
duration: 350
easing.type: Easing.OutBack
}
}
// Burst effect overlay for focused pill (smaller outline)
Rectangle {
id: pillBurst
anchors.centerIn: workspacePillContainer
width: workspacePillContainer.width + 18 * root.masterProgress * scale
height: workspacePillContainer.height + 18 * root.masterProgress * scale
radius: width / 2
color: "transparent"
border.color: root.effectColor
border.width: Math.max(1, Math.round((2 + 6 * (1.0 - root.masterProgress)) * s))
opacity: root.effectsActive && model.isFocused ? (1.0 - root.masterProgress) * 0.7 : 0
visible: root.effectsActive && model.isFocused
z: 1
}
} }
}
Behavior on color {
ColorAnimation {
duration: 200
easing.type: Easing.InOutCubic
}
}
Behavior on opacity {
NumberAnimation {
duration: 200
easing.type: Easing.InOutCubic
}
}
Behavior on radius {
NumberAnimation {
duration: 350
easing.type: Easing.OutBack
}
}
} }
}
Component.onDestruction: { Behavior on width {
root.isDestroying = true; NumberAnimation {
duration: 350
easing.type: Easing.OutBack
}
}
Behavior on height {
NumberAnimation {
duration: 350
easing.type: Easing.OutBack
}
}
// Burst effect overlay for focused pill (smaller outline)
Rectangle {
id: pillBurst
anchors.centerIn: workspacePillContainer
width: workspacePillContainer.width + 18 * root.masterProgress * scale
height: workspacePillContainer.height + 18 * root.masterProgress * scale
radius: width / 2
color: "transparent"
border.color: root.effectColor
border.width: Math.max(1, Math.round(
(2 + 6 * (1.0 - root.masterProgress)) * s))
opacity: root.effectsActive
&& model.isFocused ? (1.0 - root.masterProgress) * 0.7 : 0
visible: root.effectsActive && model.isFocused
z: 1
}
}
} }
}
Component.onDestruction: {
root.isDestroying = true
}
} }

View file

@ -25,7 +25,7 @@ Rectangle {
anchors.fill: parent anchors.fill: parent
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
hoverEnabled: true hoverEnabled: true
onEntered: root.onEntered() onEntered: root.onEntered()
onExited: root.onExited() onExited: root.onExited()
onClicked: root.onClicked() onClicked: root.onClicked()
} }

View file

@ -16,16 +16,19 @@ Loader {
sourceComponent: panel sourceComponent: panel
onActiveChanged: { onActiveChanged: {
if (active && item && item.show) item.show() if (active && item && item.show)
item.show()
} }
onItemChanged: { onItemChanged: {
if (active && item && item.show) item.show() if (active && item && item.show)
item.show()
} }
Connections { Connections {
target: loader.item target: loader.item
function onDismissed() { loader.isLoaded = false } function onDismissed() {
loader.isLoaded = false
}
} }
} }

View file

@ -10,7 +10,7 @@ PanelWindow {
property bool showOverlay: Settings.settings.dimPanels property bool showOverlay: Settings.settings.dimPanels
property int topMargin: Style.barHeight * scaling property int topMargin: Style.barHeight * scaling
property color overlayColor: showOverlay ? Colors.overlay : "transparent" property color overlayColor: showOverlay ? Colors.overlay : "transparent"
signal dismissed() signal dismissed
function hide() { function hide() {
visible = false visible = false

View file

@ -1,6 +1,6 @@
// Disable reload popup // Disable reload popup
//@ pragma Env QS_NO_RELOAD_POPUP=1 //@ pragma Env QS_NO_RELOAD_POPUP=1
import QtQuick import QtQuick
import Quickshell import Quickshell
import Quickshell.Io import Quickshell.Io
@ -12,7 +12,6 @@ import qs.Modules.Background
ShellRoot { ShellRoot {
id: root id: root
Variants { Variants {
model: Quickshell.screens model: Quickshell.screens