qmlformat
This commit is contained in:
quadbyte
parent
ff7dff8a6d
commit
0c044c7b81
9 changed files with 338 additions and 333 deletions
|
|
@ -14,7 +14,8 @@ PanelWindow {
|
|||
screen: modelData
|
||||
implicitHeight: Style.barHeight * scaling
|
||||
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 {
|
||||
top: true
|
||||
|
|
@ -56,7 +57,6 @@ PanelWindow {
|
|||
spacing: Style.marginMedium * scaling
|
||||
|
||||
Workspace {}
|
||||
|
||||
}
|
||||
|
||||
Row {
|
||||
|
|
@ -79,7 +79,9 @@ PanelWindow {
|
|||
NIconButton {
|
||||
id: demoPanelToggler
|
||||
icon: "experiment"
|
||||
onClicked: function () { demoPanel.isLoaded = !demoPanel.isLoaded }
|
||||
onClicked: function () {
|
||||
demoPanel.isLoaded = !demoPanel.isLoaded
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,12 +17,12 @@ NClock {
|
|||
visible: false
|
||||
}
|
||||
|
||||
onEntered: function (){
|
||||
onEntered: function () {
|
||||
if (!calendar.visible) {
|
||||
tooltip.show()
|
||||
}
|
||||
}
|
||||
onExited: function (){
|
||||
onExited: function () {
|
||||
tooltip.hide()
|
||||
}
|
||||
onClicked: function () {
|
||||
|
|
|
|||
|
|
@ -8,260 +8,263 @@ import Quickshell.Io
|
|||
import qs.Services
|
||||
|
||||
Item {
|
||||
id: root
|
||||
property bool isDestroying: false
|
||||
property bool hovered: false
|
||||
id: root
|
||||
property bool isDestroying: false
|
||||
property bool hovered: false
|
||||
|
||||
readonly property real scaling: Scaling.scale(screen)
|
||||
property var modelData
|
||||
readonly property real scaling: Scaling.scale(screen)
|
||||
property var modelData
|
||||
|
||||
signal workspaceChanged(int workspaceId, color accentColor)
|
||||
signal workspaceChanged(int workspaceId, color accentColor)
|
||||
|
||||
property ListModel localWorkspaces: ListModel {}
|
||||
property real masterProgress: 0.0
|
||||
property bool effectsActive: false
|
||||
property color effectColor: Colors.accentPrimary
|
||||
property ListModel localWorkspaces: ListModel {}
|
||||
property real masterProgress: 0.0
|
||||
property bool effectsActive: false
|
||||
property color effectColor: Colors.accentPrimary
|
||||
|
||||
// Unified scale
|
||||
property real s: scale
|
||||
property int horizontalPadding: Math.round(16 * s)
|
||||
property int spacingBetweenPills: Math.round(8 * s)
|
||||
// Unified scale
|
||||
property real s: scale
|
||||
property int horizontalPadding: Math.round(16 * s)
|
||||
property int spacingBetweenPills: Math.round(8 * s)
|
||||
|
||||
width: {
|
||||
let total = 0;
|
||||
for (let i = 0; i < localWorkspaces.count; i++) {
|
||||
const ws = localWorkspaces.get(i);
|
||||
if (ws.isFocused)
|
||||
total += Math.round(44 * s);
|
||||
else if (ws.isActive)
|
||||
total += Math.round(28 * s);
|
||||
width: {
|
||||
let total = 0
|
||||
for (var i = 0; i < localWorkspaces.count; i++) {
|
||||
const ws = localWorkspaces.get(i)
|
||||
if (ws.isFocused)
|
||||
total += Math.round(44 * s)
|
||||
else if (ws.isActive)
|
||||
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
|
||||
total += Math.round(16 * s);
|
||||
}
|
||||
total += Math.max(localWorkspaces.count - 1, 0) * spacingBetweenPills;
|
||||
total += horizontalPadding * 2;
|
||||
return total;
|
||||
}
|
||||
// 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
|
||||
|
||||
height: Math.round(36 * s)
|
||||
return Colors.outline
|
||||
}
|
||||
scale: model.isFocused ? 1.0 : 0.9
|
||||
z: 0
|
||||
|
||||
Component.onCompleted: {
|
||||
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);
|
||||
MouseArea {
|
||||
id: pillMouseArea
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
Workspaces.switchToWorkspace(model.idx)
|
||||
}
|
||||
}
|
||||
workspaceRepeater.model = localWorkspaces;
|
||||
updateWorkspaceFocus();
|
||||
}
|
||||
|
||||
Connections {
|
||||
target: Workspaces
|
||||
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);
|
||||
}
|
||||
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
|
||||
}
|
||||
|
||||
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 (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 height {
|
||||
NumberAnimation {
|
||||
duration: 350
|
||||
easing.type: Easing.OutBack
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
// 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 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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Component.onDestruction: {
|
||||
root.isDestroying = true;
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Component.onDestruction: {
|
||||
root.isDestroying = true
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue