Bugfix: PanelWithOverlay would close when clicking in the background of the panel.
This commit is contained in:
quadbyte
parent
0b5f1cd9e5
commit
8c7f6e491d
6 changed files with 543 additions and 314 deletions
|
|
@ -7,13 +7,67 @@ import qs.Settings
|
|||
|
||||
PanelWithOverlay {
|
||||
id: ioSelector
|
||||
signal panelClosed()
|
||||
|
||||
property int tabIndex: 0
|
||||
property Item anchorItem: null
|
||||
|
||||
signal panelClosed()
|
||||
|
||||
function sinkNodes() {
|
||||
let nodes = Pipewire.nodes && Pipewire.nodes.values ? Pipewire.nodes.values.filter(function(n) {
|
||||
return n.isSink && n.audio && n.isStream === false;
|
||||
}) : [];
|
||||
if (Pipewire.defaultAudioSink)
|
||||
nodes = nodes.slice().sort(function(a, b) {
|
||||
if (a.id === Pipewire.defaultAudioSink.id)
|
||||
return -1;
|
||||
|
||||
if (b.id === Pipewire.defaultAudioSink.id)
|
||||
return 1;
|
||||
|
||||
return 0;
|
||||
});
|
||||
|
||||
return nodes;
|
||||
}
|
||||
|
||||
function sourceNodes() {
|
||||
let nodes = Pipewire.nodes && Pipewire.nodes.values ? Pipewire.nodes.values.filter(function(n) {
|
||||
return !n.isSink && n.audio && n.isStream === false;
|
||||
}) : [];
|
||||
if (Pipewire.defaultAudioSource)
|
||||
nodes = nodes.slice().sort(function(a, b) {
|
||||
if (a.id === Pipewire.defaultAudioSource.id)
|
||||
return -1;
|
||||
|
||||
if (b.id === Pipewire.defaultAudioSource.id)
|
||||
return 1;
|
||||
|
||||
return 0;
|
||||
});
|
||||
|
||||
return nodes;
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
if (Pipewire.nodes && Pipewire.nodes.values) {
|
||||
for (var i = 0; i < Pipewire.nodes.values.length; ++i) {
|
||||
var n = Pipewire.nodes.values[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
Component.onDestruction: {
|
||||
}
|
||||
onVisibleChanged: {
|
||||
if (!visible)
|
||||
panelClosed();
|
||||
|
||||
}
|
||||
|
||||
// Bind all Pipewire nodes so their properties are valid
|
||||
PwObjectTracker {
|
||||
id: nodeTracker
|
||||
|
||||
objects: Pipewire.nodes
|
||||
}
|
||||
|
||||
|
|
@ -27,6 +81,11 @@ PanelWithOverlay {
|
|||
anchors.topMargin: 4
|
||||
anchors.rightMargin: 4
|
||||
|
||||
// Prevent closing when clicking in the panel bg
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 16
|
||||
|
|
@ -37,48 +96,62 @@ PanelWithOverlay {
|
|||
Layout.fillWidth: true
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
spacing: 0
|
||||
|
||||
|
||||
Tabs {
|
||||
id: ioTabs
|
||||
tabsModel: [
|
||||
{ label: "Output", icon: "volume_up" },
|
||||
{ label: "Input", icon: "mic" }
|
||||
]
|
||||
|
||||
tabsModel: [{
|
||||
"label": "Output",
|
||||
"icon": "volume_up"
|
||||
}, {
|
||||
"label": "Input",
|
||||
"icon": "mic"
|
||||
}]
|
||||
currentIndex: tabIndex
|
||||
onTabChanged: {
|
||||
tabIndex = currentIndex;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Add vertical space between tabs and entries
|
||||
Item { height: 36; Layout.fillWidth: true }
|
||||
Item {
|
||||
height: 36
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
// Output Devices
|
||||
Flickable {
|
||||
id: sinkList
|
||||
|
||||
visible: tabIndex === 0
|
||||
contentHeight: sinkColumn.height
|
||||
clip: true
|
||||
interactive: contentHeight > height
|
||||
width: parent.width
|
||||
height: 220
|
||||
ScrollBar.vertical: ScrollBar {}
|
||||
|
||||
ColumnLayout {
|
||||
id: sinkColumn
|
||||
|
||||
width: sinkList.width
|
||||
spacing: 6
|
||||
|
||||
Repeater {
|
||||
model: ioSelector.sinkNodes()
|
||||
|
||||
Rectangle {
|
||||
width: parent.width
|
||||
height: 36
|
||||
color: "transparent"
|
||||
radius: 6
|
||||
|
||||
RowLayout {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 6
|
||||
spacing: 8
|
||||
|
||||
Text {
|
||||
text: "volume_up"
|
||||
font.family: "Material Symbols Outlined"
|
||||
|
|
@ -86,10 +159,12 @@ PanelWithOverlay {
|
|||
color: (Pipewire.defaultAudioSink && Pipewire.defaultAudioSink.id === modelData.id) ? Theme.accentPrimary : Theme.textPrimary
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
Layout.fillWidth: true
|
||||
spacing: 1
|
||||
Layout.maximumWidth: sinkList.width - 120 // Reserve space for the Set button
|
||||
|
||||
Text {
|
||||
text: modelData.nickname || modelData.description || modelData.name
|
||||
font.bold: true
|
||||
|
|
@ -99,6 +174,7 @@ PanelWithOverlay {
|
|||
maximumLineCount: 1
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
Text {
|
||||
text: modelData.description !== modelData.nickname ? modelData.description : ""
|
||||
font.pixelSize: 10
|
||||
|
|
@ -107,15 +183,19 @@ PanelWithOverlay {
|
|||
maximumLineCount: 1
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
visible: Pipewire.preferredDefaultAudioSink !== modelData
|
||||
width: 60; height: 20
|
||||
width: 60
|
||||
height: 20
|
||||
radius: 4
|
||||
color: Theme.accentPrimary
|
||||
border.color: Theme.accentPrimary
|
||||
border.width: 1
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
text: "Set"
|
||||
|
|
@ -123,12 +203,15 @@ PanelWithOverlay {
|
|||
font.pixelSize: 10
|
||||
font.bold: true
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: Pipewire.preferredDefaultAudioSink = modelData
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "(Current)"
|
||||
visible: Pipewire.defaultAudioSink && Pipewire.defaultAudioSink.id === modelData.id
|
||||
|
|
@ -136,37 +219,51 @@ PanelWithOverlay {
|
|||
font.pixelSize: 10
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ScrollBar.vertical: ScrollBar {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Input Devices
|
||||
Flickable {
|
||||
id: sourceList
|
||||
|
||||
visible: tabIndex === 1
|
||||
contentHeight: sourceColumn.height
|
||||
clip: true
|
||||
interactive: contentHeight > height
|
||||
width: parent.width
|
||||
height: 220
|
||||
ScrollBar.vertical: ScrollBar {}
|
||||
|
||||
ColumnLayout {
|
||||
id: sourceColumn
|
||||
|
||||
width: sourceList.width
|
||||
spacing: 6
|
||||
|
||||
Repeater {
|
||||
model: ioSelector.sourceNodes()
|
||||
|
||||
Rectangle {
|
||||
width: parent.width
|
||||
height: 36
|
||||
color: "transparent"
|
||||
radius: 6
|
||||
|
||||
RowLayout {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 6
|
||||
spacing: 8
|
||||
|
||||
Text {
|
||||
text: "mic"
|
||||
font.family: "Material Symbols Outlined"
|
||||
|
|
@ -174,10 +271,12 @@ PanelWithOverlay {
|
|||
color: (Pipewire.defaultAudioSource && Pipewire.defaultAudioSource.id === modelData.id) ? Theme.accentPrimary : Theme.textPrimary
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
Layout.fillWidth: true
|
||||
spacing: 1
|
||||
Layout.maximumWidth: sourceList.width - 120 // Reserve space for the Set button
|
||||
|
||||
Text {
|
||||
text: modelData.nickname || modelData.description || modelData.name
|
||||
font.bold: true
|
||||
|
|
@ -187,6 +286,7 @@ PanelWithOverlay {
|
|||
maximumLineCount: 1
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
Text {
|
||||
text: modelData.description !== modelData.nickname ? modelData.description : ""
|
||||
font.pixelSize: 10
|
||||
|
|
@ -195,15 +295,19 @@ PanelWithOverlay {
|
|||
maximumLineCount: 1
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
visible: Pipewire.preferredDefaultAudioSource !== modelData
|
||||
width: 60; height: 20
|
||||
width: 60
|
||||
height: 20
|
||||
radius: 4
|
||||
color: Theme.accentPrimary
|
||||
border.color: Theme.accentPrimary
|
||||
border.width: 1
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
text: "Set"
|
||||
|
|
@ -211,12 +315,15 @@ PanelWithOverlay {
|
|||
font.pixelSize: 10
|
||||
font.bold: true
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: Pipewire.preferredDefaultAudioSource = modelData
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "(Current)"
|
||||
visible: Pipewire.defaultAudioSource && Pipewire.defaultAudioSource.id === modelData.id
|
||||
|
|
@ -224,55 +331,25 @@ PanelWithOverlay {
|
|||
font.pixelSize: 10
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function sinkNodes() {
|
||||
let nodes = Pipewire.nodes && Pipewire.nodes.values
|
||||
? Pipewire.nodes.values.filter(function(n) {
|
||||
return n.isSink && n.audio && n.isStream === false;
|
||||
})
|
||||
: [];
|
||||
if (Pipewire.defaultAudioSink) {
|
||||
nodes = nodes.slice().sort(function(a, b) {
|
||||
if (a.id === Pipewire.defaultAudioSink.id) return -1;
|
||||
if (b.id === Pipewire.defaultAudioSink.id) return 1;
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
return nodes;
|
||||
}
|
||||
function sourceNodes() {
|
||||
let nodes = Pipewire.nodes && Pipewire.nodes.values
|
||||
? Pipewire.nodes.values.filter(function(n) {
|
||||
return !n.isSink && n.audio && n.isStream === false;
|
||||
})
|
||||
: [];
|
||||
if (Pipewire.defaultAudioSource) {
|
||||
nodes = nodes.slice().sort(function(a, b) {
|
||||
if (a.id === Pipewire.defaultAudioSource.id) return -1;
|
||||
if (b.id === Pipewire.defaultAudioSource.id) return 1;
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
return nodes;
|
||||
}
|
||||
ScrollBar.vertical: ScrollBar {
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
if (Pipewire.nodes && Pipewire.nodes.values) {
|
||||
for (var i = 0; i < Pipewire.nodes.values.length; ++i) {
|
||||
var n = Pipewire.nodes.values[i];
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Connections {
|
||||
target: Pipewire
|
||||
function onReadyChanged() {
|
||||
if (Pipewire.ready && Pipewire.nodes && Pipewire.nodes.values) {
|
||||
for (var i = 0; i < Pipewire.nodes.values.length; ++i) {
|
||||
|
|
@ -280,15 +357,14 @@ PanelWithOverlay {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onDefaultAudioSinkChanged() {
|
||||
}
|
||||
|
||||
function onDefaultAudioSourceChanged() {
|
||||
}
|
||||
|
||||
target: Pipewire
|
||||
}
|
||||
|
||||
Component.onDestruction: {
|
||||
}
|
||||
onVisibleChanged: {
|
||||
if (!visible) panelClosed();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import "../../Helpers/Holidays.js" as Holidays
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import Quickshell
|
||||
import Quickshell.Wayland
|
||||
import qs.Components
|
||||
import qs.Settings
|
||||
import Quickshell.Wayland
|
||||
import "../../Helpers/Holidays.js" as Holidays
|
||||
|
||||
PanelWithOverlay {
|
||||
id: calendarOverlay
|
||||
|
|
@ -22,6 +22,11 @@ PanelWithOverlay {
|
|||
anchors.topMargin: 4
|
||||
anchors.rightMargin: 4
|
||||
|
||||
// Prevent closing when clicking in the panel bg
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 16
|
||||
|
|
@ -60,13 +65,15 @@ PanelWithOverlay {
|
|||
calendar.month = newDate.getMonth();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
DayOfWeekRow {
|
||||
Layout.fillWidth: true
|
||||
spacing: 0
|
||||
Layout.leftMargin: 8 // Align with grid
|
||||
Layout.leftMargin: 8 // Align with grid
|
||||
Layout.rightMargin: 8
|
||||
|
||||
delegate: Text {
|
||||
text: shortName
|
||||
color: Theme.textPrimary
|
||||
|
|
@ -77,16 +84,11 @@ PanelWithOverlay {
|
|||
horizontalAlignment: Text.AlignHCenter
|
||||
width: 32
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
MonthGrid {
|
||||
id: calendar
|
||||
Layout.fillWidth: true
|
||||
Layout.leftMargin: 8
|
||||
Layout.rightMargin: 8
|
||||
spacing: 0
|
||||
month: Time.date.getMonth()
|
||||
year: Time.date.getFullYear()
|
||||
|
||||
property var holidays: []
|
||||
|
||||
|
|
@ -96,12 +98,19 @@ PanelWithOverlay {
|
|||
calendar.holidays = holidays;
|
||||
});
|
||||
}
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.leftMargin: 8
|
||||
Layout.rightMargin: 8
|
||||
spacing: 0
|
||||
month: Time.date.getMonth()
|
||||
year: Time.date.getFullYear()
|
||||
onMonthChanged: updateHolidays()
|
||||
onYearChanged: updateHolidays()
|
||||
Component.onCompleted: updateHolidays()
|
||||
|
||||
// Optionally, update when the panel becomes visible
|
||||
Connections {
|
||||
target: calendarOverlay
|
||||
function onVisibleChanged() {
|
||||
if (calendarOverlay.visible) {
|
||||
calendar.month = Time.date.getMonth();
|
||||
|
|
@ -109,29 +118,35 @@ PanelWithOverlay {
|
|||
calendar.updateHolidays();
|
||||
}
|
||||
}
|
||||
|
||||
target: calendarOverlay
|
||||
}
|
||||
|
||||
delegate: Rectangle {
|
||||
width: 32
|
||||
height: 32
|
||||
radius: 8
|
||||
property var holidayInfo: calendar.holidays.filter(function(h) {
|
||||
var d = new Date(h.date);
|
||||
return d.getDate() === model.day && d.getMonth() === model.month && d.getFullYear() === model.year;
|
||||
})
|
||||
property bool isHoliday: holidayInfo.length > 0
|
||||
|
||||
width: 32
|
||||
height: 32
|
||||
radius: 8
|
||||
color: {
|
||||
if (model.today)
|
||||
return Theme.accentPrimary;
|
||||
|
||||
if (mouseArea2.containsMouse)
|
||||
return Theme.backgroundTertiary;
|
||||
|
||||
return "transparent";
|
||||
}
|
||||
|
||||
// Holiday dot indicator
|
||||
Rectangle {
|
||||
visible: isHoliday
|
||||
width: 4; height: 4
|
||||
width: 4
|
||||
height: 4
|
||||
radius: 4
|
||||
color: Theme.accentTertiary
|
||||
anchors.top: parent.top
|
||||
|
|
@ -145,7 +160,7 @@ PanelWithOverlay {
|
|||
anchors.centerIn: parent
|
||||
text: model.day
|
||||
color: model.today ? Theme.onAccent : Theme.textPrimary
|
||||
opacity: model.month === calendar.month ? (mouseArea2.containsMouse ? 1.0 : 0.7) : 0.3
|
||||
opacity: model.month === calendar.month ? (mouseArea2.containsMouse ? 1 : 0.7) : 0.3
|
||||
font.pixelSize: 13
|
||||
font.family: Theme.fontFamily
|
||||
font.bold: model.today ? true : false
|
||||
|
|
@ -153,6 +168,7 @@ PanelWithOverlay {
|
|||
|
||||
MouseArea {
|
||||
id: mouseArea2
|
||||
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
onEntered: {
|
||||
|
|
@ -167,21 +183,28 @@ PanelWithOverlay {
|
|||
onExited: holidayTooltip.tooltipVisible = false
|
||||
}
|
||||
|
||||
Behavior on color {
|
||||
ColorAnimation {
|
||||
duration: 150
|
||||
}
|
||||
}
|
||||
|
||||
StyledTooltip {
|
||||
id: holidayTooltip
|
||||
|
||||
text: ""
|
||||
tooltipVisible: false
|
||||
targetItem: null
|
||||
delay: 100
|
||||
}
|
||||
|
||||
Behavior on color {
|
||||
ColorAnimation {
|
||||
duration: 150
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue