Add scaling to everything, edit SidePanel
This commit is contained in:
Ly-sec
parent
68d7add474
commit
0b49aff13d
52 changed files with 3138 additions and 3043 deletions
|
|
@ -5,361 +5,371 @@ import Quickshell
|
|||
import qs.Settings
|
||||
import qs.Components
|
||||
|
||||
ColumnLayout {
|
||||
id: root
|
||||
spacing: 0
|
||||
ScrollView {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 0
|
||||
|
||||
// Get list of available monitors/screens
|
||||
property var monitors: Quickshell.screens || []
|
||||
padding: 0
|
||||
rightPadding: 12
|
||||
clip: true
|
||||
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
|
||||
ScrollBar.vertical.policy: ScrollBar.AsNeeded
|
||||
|
||||
// Sorted monitors by name
|
||||
property var sortedMonitors: {
|
||||
let sorted = [...monitors];
|
||||
sorted.sort((a, b) => {
|
||||
let nameA = a.name || "Unknown";
|
||||
let nameB = b.name || "Unknown";
|
||||
return nameA.localeCompare(nameB);
|
||||
});
|
||||
return sorted;
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 0
|
||||
}
|
||||
|
||||
|
||||
ColumnLayout {
|
||||
spacing: 12
|
||||
Layout.fillWidth: true
|
||||
id: root
|
||||
width: parent.availableWidth
|
||||
spacing: 0
|
||||
anchors.top: parent.top
|
||||
anchors.margins: 0
|
||||
|
||||
Text {
|
||||
text: "Monitor Selection"
|
||||
font.pixelSize: 18
|
||||
font.bold: true
|
||||
color: Theme.textPrimary
|
||||
Layout.bottomMargin: 8
|
||||
// Get list of available monitors/screens
|
||||
property var monitors: Quickshell.screens || []
|
||||
|
||||
// Sorted monitors by name
|
||||
property var sortedMonitors: {
|
||||
let sorted = [...monitors];
|
||||
sorted.sort((a, b) => {
|
||||
let nameA = a.name || "Unknown";
|
||||
let nameB = b.name || "Unknown";
|
||||
return nameA.localeCompare(nameB);
|
||||
});
|
||||
return sorted;
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 0
|
||||
}
|
||||
|
||||
|
||||
ColumnLayout {
|
||||
spacing: 8
|
||||
spacing: 12
|
||||
Layout.fillWidth: true
|
||||
|
||||
RowLayout {
|
||||
spacing: 8
|
||||
Layout.fillWidth: true
|
||||
|
||||
ColumnLayout {
|
||||
spacing: 4
|
||||
Layout.fillWidth: true
|
||||
|
||||
Text {
|
||||
text: "Bar Monitors"
|
||||
font.pixelSize: 13
|
||||
font.bold: true
|
||||
color: Theme.textPrimary
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "Select which monitors to display the top panel/bar on"
|
||||
font.pixelSize: 12
|
||||
color: Theme.textSecondary
|
||||
wrapMode: Text.WordWrap
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
}
|
||||
Text {
|
||||
text: "Monitor Selection"
|
||||
font.pixelSize: 18 * Theme.uiScale
|
||||
font.bold: true
|
||||
color: Theme.textPrimary
|
||||
Layout.bottomMargin: 8
|
||||
}
|
||||
|
||||
|
||||
Flow {
|
||||
Layout.fillWidth: true
|
||||
|
||||
ColumnLayout {
|
||||
spacing: 8
|
||||
Layout.fillWidth: true
|
||||
|
||||
Repeater {
|
||||
model: root.sortedMonitors
|
||||
delegate: Rectangle {
|
||||
id: barCheckbox
|
||||
property bool isChecked: false
|
||||
|
||||
Component.onCompleted: {
|
||||
// Initialize checkbox state from settings
|
||||
let monitors = Settings.settings.barMonitors || [];
|
||||
isChecked = monitors.includes(modelData.name);
|
||||
}
|
||||
|
||||
width: checkboxContent.implicitWidth + 16
|
||||
height: 32
|
||||
radius: 16
|
||||
color: isChecked ? Theme.accentPrimary : Theme.surfaceVariant
|
||||
border.color: isChecked ? Theme.accentPrimary : Theme.outline
|
||||
border.width: 1
|
||||
RowLayout {
|
||||
spacing: 8
|
||||
Layout.fillWidth: true
|
||||
|
||||
RowLayout {
|
||||
id: checkboxContent
|
||||
anchors.centerIn: parent
|
||||
spacing: 6
|
||||
ColumnLayout {
|
||||
spacing: 4
|
||||
Layout.fillWidth: true
|
||||
|
||||
Text {
|
||||
text: barCheckbox.isChecked ? "check" : ""
|
||||
font.family: "Material Symbols Outlined"
|
||||
font.pixelSize: 14
|
||||
color: barCheckbox.isChecked ? Theme.onAccent : Theme.textSecondary
|
||||
visible: barCheckbox.isChecked
|
||||
}
|
||||
|
||||
Text {
|
||||
text: modelData.name || "Unknown"
|
||||
font.pixelSize: 12
|
||||
color: barCheckbox.isChecked ? Theme.onAccent : Theme.textPrimary
|
||||
}
|
||||
Text {
|
||||
text: "Bar Monitors"
|
||||
font.pixelSize: 13 * Theme.uiScale
|
||||
font.bold: true
|
||||
color: Theme.textPrimary
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
isChecked = !isChecked;
|
||||
|
||||
// Update settings array when checkbox is toggled
|
||||
Text {
|
||||
text: "Select which monitors to display the top panel/bar on"
|
||||
font.pixelSize: 12 * Theme.uiScale
|
||||
color: Theme.textSecondary
|
||||
wrapMode: Text.WordWrap
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Flow {
|
||||
Layout.fillWidth: true
|
||||
spacing: 8
|
||||
|
||||
Repeater {
|
||||
model: root.sortedMonitors
|
||||
delegate: Rectangle {
|
||||
id: barCheckbox
|
||||
property bool isChecked: false
|
||||
|
||||
Component.onCompleted: {
|
||||
// Initialize checkbox state from settings
|
||||
let monitors = Settings.settings.barMonitors || [];
|
||||
monitors = [...monitors]; // Create copy to trigger reactivity
|
||||
|
||||
if (isChecked) {
|
||||
if (!monitors.includes(modelData.name)) {
|
||||
monitors.push(modelData.name);
|
||||
}
|
||||
} else {
|
||||
monitors = monitors.filter(name => name !== modelData.name);
|
||||
isChecked = monitors.includes(modelData.name);
|
||||
}
|
||||
|
||||
width: checkboxContent.implicitWidth + 16
|
||||
height: 32
|
||||
radius: 16
|
||||
color: isChecked ? Theme.accentPrimary : Theme.surfaceVariant
|
||||
border.color: isChecked ? Theme.accentPrimary : Theme.outline
|
||||
border.width: 1
|
||||
|
||||
RowLayout {
|
||||
id: checkboxContent
|
||||
anchors.centerIn: parent
|
||||
spacing: 6
|
||||
|
||||
Text {
|
||||
text: barCheckbox.isChecked ? "check" : ""
|
||||
font.family: "Material Symbols Outlined"
|
||||
font.pixelSize: 14 * Theme.uiScale
|
||||
color: barCheckbox.isChecked ? Theme.onAccent : Theme.textSecondary
|
||||
visible: barCheckbox.isChecked
|
||||
}
|
||||
|
||||
Text {
|
||||
text: modelData.name || "Unknown"
|
||||
font.pixelSize: 12 * Theme.uiScale
|
||||
color: barCheckbox.isChecked ? Theme.onAccent : Theme.textPrimary
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
isChecked = !isChecked;
|
||||
|
||||
// Update settings array when checkbox is toggled
|
||||
let monitors = Settings.settings.barMonitors || [];
|
||||
monitors = [...monitors]; // Create copy to trigger reactivity
|
||||
|
||||
if (isChecked) {
|
||||
if (!monitors.includes(modelData.name)) {
|
||||
monitors.push(modelData.name);
|
||||
}
|
||||
} else {
|
||||
monitors = monitors.filter(name => name !== modelData.name);
|
||||
}
|
||||
|
||||
Settings.settings.barMonitors = monitors;
|
||||
console.log("Bar monitors updated:", JSON.stringify(monitors));
|
||||
}
|
||||
|
||||
Settings.settings.barMonitors = monitors;
|
||||
console.log("Bar monitors updated:", JSON.stringify(monitors));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
ColumnLayout {
|
||||
spacing: 8
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 8
|
||||
|
||||
RowLayout {
|
||||
ColumnLayout {
|
||||
spacing: 8
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 8
|
||||
|
||||
ColumnLayout {
|
||||
spacing: 4
|
||||
RowLayout {
|
||||
spacing: 8
|
||||
Layout.fillWidth: true
|
||||
|
||||
Text {
|
||||
text: "Dock Monitors"
|
||||
font.pixelSize: 13
|
||||
font.bold: true
|
||||
color: Theme.textPrimary
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "Select which monitors to display the application dock on"
|
||||
font.pixelSize: 12
|
||||
color: Theme.textSecondary
|
||||
wrapMode: Text.WordWrap
|
||||
ColumnLayout {
|
||||
spacing: 4
|
||||
Layout.fillWidth: true
|
||||
|
||||
Text {
|
||||
text: "Dock Monitors"
|
||||
font.pixelSize: 13 * Theme.uiScale
|
||||
font.bold: true
|
||||
color: Theme.textPrimary
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "Select which monitors to display the application dock on"
|
||||
font.pixelSize: 12 * Theme.uiScale
|
||||
color: Theme.textSecondary
|
||||
wrapMode: Text.WordWrap
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Flow {
|
||||
Layout.fillWidth: true
|
||||
spacing: 8
|
||||
Flow {
|
||||
Layout.fillWidth: true
|
||||
spacing: 8
|
||||
|
||||
Repeater {
|
||||
model: root.sortedMonitors
|
||||
delegate: Rectangle {
|
||||
id: dockCheckbox
|
||||
property bool isChecked: false
|
||||
|
||||
Component.onCompleted: {
|
||||
// Initialize with current settings
|
||||
let monitors = Settings.settings.dockMonitors || [];
|
||||
isChecked = monitors.includes(modelData.name);
|
||||
}
|
||||
|
||||
width: checkboxContent.implicitWidth + 16
|
||||
height: 32
|
||||
radius: 16
|
||||
color: isChecked ? Theme.accentPrimary : Theme.surfaceVariant
|
||||
border.color: isChecked ? Theme.accentPrimary : Theme.outline
|
||||
border.width: 1
|
||||
|
||||
RowLayout {
|
||||
id: checkboxContent
|
||||
anchors.centerIn: parent
|
||||
spacing: 6
|
||||
|
||||
Text {
|
||||
text: dockCheckbox.isChecked ? "check" : ""
|
||||
font.family: "Material Symbols Outlined"
|
||||
font.pixelSize: 14
|
||||
color: dockCheckbox.isChecked ? Theme.onAccent : Theme.textSecondary
|
||||
visible: dockCheckbox.isChecked
|
||||
}
|
||||
|
||||
Text {
|
||||
text: modelData.name || "Unknown"
|
||||
font.pixelSize: 12
|
||||
color: dockCheckbox.isChecked ? Theme.onAccent : Theme.textPrimary
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
// Toggle state immediately for UI responsiveness
|
||||
isChecked = !isChecked;
|
||||
|
||||
// Update settings
|
||||
Repeater {
|
||||
model: root.sortedMonitors
|
||||
delegate: Rectangle {
|
||||
id: dockCheckbox
|
||||
property bool isChecked: false
|
||||
|
||||
Component.onCompleted: {
|
||||
// Initialize with current settings
|
||||
let monitors = Settings.settings.dockMonitors || [];
|
||||
monitors = [...monitors]; // Copy array
|
||||
|
||||
if (isChecked) {
|
||||
// Add to array if not already there
|
||||
if (!monitors.includes(modelData.name)) {
|
||||
monitors.push(modelData.name);
|
||||
}
|
||||
} else {
|
||||
// Remove from array
|
||||
monitors = monitors.filter(name => name !== modelData.name);
|
||||
isChecked = monitors.includes(modelData.name);
|
||||
}
|
||||
|
||||
width: checkboxContent.implicitWidth + 16
|
||||
height: 32
|
||||
radius: 16
|
||||
color: isChecked ? Theme.accentPrimary : Theme.surfaceVariant
|
||||
border.color: isChecked ? Theme.accentPrimary : Theme.outline
|
||||
border.width: 1
|
||||
|
||||
RowLayout {
|
||||
id: checkboxContent
|
||||
anchors.centerIn: parent
|
||||
spacing: 6
|
||||
|
||||
Text {
|
||||
text: dockCheckbox.isChecked ? "check" : ""
|
||||
font.family: "Material Symbols Outlined"
|
||||
font.pixelSize: 14 * Theme.uiScale
|
||||
color: dockCheckbox.isChecked ? Theme.onAccent : Theme.textSecondary
|
||||
visible: dockCheckbox.isChecked
|
||||
}
|
||||
|
||||
Text {
|
||||
text: modelData.name || "Unknown"
|
||||
font.pixelSize: 12 * Theme.uiScale
|
||||
color: dockCheckbox.isChecked ? Theme.onAccent : Theme.textPrimary
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
// Toggle state immediately for UI responsiveness
|
||||
isChecked = !isChecked;
|
||||
|
||||
// Update settings
|
||||
let monitors = Settings.settings.dockMonitors || [];
|
||||
monitors = [...monitors]; // Copy array
|
||||
|
||||
if (isChecked) {
|
||||
// Add to array if not already there
|
||||
if (!monitors.includes(modelData.name)) {
|
||||
monitors.push(modelData.name);
|
||||
}
|
||||
} else {
|
||||
// Remove from array
|
||||
monitors = monitors.filter(name => name !== modelData.name);
|
||||
}
|
||||
|
||||
Settings.settings.dockMonitors = monitors;
|
||||
console.log("Dock monitors updated:", JSON.stringify(monitors));
|
||||
}
|
||||
|
||||
Settings.settings.dockMonitors = monitors;
|
||||
console.log("Dock monitors updated:", JSON.stringify(monitors));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
ColumnLayout {
|
||||
spacing: 8
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 8
|
||||
|
||||
RowLayout {
|
||||
ColumnLayout {
|
||||
spacing: 8
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 8
|
||||
|
||||
ColumnLayout {
|
||||
spacing: 4
|
||||
RowLayout {
|
||||
spacing: 8
|
||||
Layout.fillWidth: true
|
||||
|
||||
Text {
|
||||
text: "Notification Monitors"
|
||||
font.pixelSize: 13
|
||||
font.bold: true
|
||||
color: Theme.textPrimary
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "Select which monitors to display system notifications on"
|
||||
font.pixelSize: 12
|
||||
color: Theme.textSecondary
|
||||
wrapMode: Text.WordWrap
|
||||
ColumnLayout {
|
||||
spacing: 4
|
||||
Layout.fillWidth: true
|
||||
|
||||
Text {
|
||||
text: "Notification Monitors"
|
||||
font.pixelSize: 13 * Theme.uiScale
|
||||
font.bold: true
|
||||
color: Theme.textPrimary
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "Select which monitors to display system notifications on"
|
||||
font.pixelSize: 12 * Theme.uiScale
|
||||
color: Theme.textSecondary
|
||||
wrapMode: Text.WordWrap
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Flow {
|
||||
Layout.fillWidth: true
|
||||
spacing: 8
|
||||
Flow {
|
||||
Layout.fillWidth: true
|
||||
spacing: 8
|
||||
|
||||
Repeater {
|
||||
model: root.sortedMonitors
|
||||
delegate: Rectangle {
|
||||
id: notificationCheckbox
|
||||
property bool isChecked: false
|
||||
|
||||
Component.onCompleted: {
|
||||
// Initialize with current settings
|
||||
let monitors = Settings.settings.notificationMonitors || [];
|
||||
isChecked = monitors.includes(modelData.name);
|
||||
}
|
||||
|
||||
width: checkboxContent.implicitWidth + 16
|
||||
height: 32
|
||||
radius: 16
|
||||
color: isChecked ? Theme.accentPrimary : Theme.surfaceVariant
|
||||
border.color: isChecked ? Theme.accentPrimary : Theme.outline
|
||||
border.width: 1
|
||||
|
||||
RowLayout {
|
||||
id: checkboxContent
|
||||
anchors.centerIn: parent
|
||||
spacing: 6
|
||||
|
||||
Text {
|
||||
text: notificationCheckbox.isChecked ? "check" : ""
|
||||
font.family: "Material Symbols Outlined"
|
||||
font.pixelSize: 14
|
||||
color: notificationCheckbox.isChecked ? Theme.onAccent : Theme.textSecondary
|
||||
visible: notificationCheckbox.isChecked
|
||||
}
|
||||
|
||||
Text {
|
||||
text: modelData.name || "Unknown"
|
||||
font.pixelSize: 12
|
||||
color: notificationCheckbox.isChecked ? Theme.onAccent : Theme.textPrimary
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
// Toggle state immediately for UI responsiveness
|
||||
isChecked = !isChecked;
|
||||
|
||||
// Update settings
|
||||
Repeater {
|
||||
model: root.sortedMonitors
|
||||
delegate: Rectangle {
|
||||
id: notificationCheckbox
|
||||
property bool isChecked: false
|
||||
|
||||
Component.onCompleted: {
|
||||
// Initialize with current settings
|
||||
let monitors = Settings.settings.notificationMonitors || [];
|
||||
monitors = [...monitors]; // Copy array
|
||||
|
||||
if (isChecked) {
|
||||
// Add to array if not already there
|
||||
if (!monitors.includes(modelData.name)) {
|
||||
monitors.push(modelData.name);
|
||||
}
|
||||
} else {
|
||||
// Remove from array
|
||||
monitors = monitors.filter(name => name !== modelData.name);
|
||||
isChecked = monitors.includes(modelData.name);
|
||||
}
|
||||
|
||||
width: checkboxContent.implicitWidth + 16
|
||||
height: 32
|
||||
radius: 16
|
||||
color: isChecked ? Theme.accentPrimary : Theme.surfaceVariant
|
||||
border.color: isChecked ? Theme.accentPrimary : Theme.outline
|
||||
border.width: 1
|
||||
|
||||
RowLayout {
|
||||
id: checkboxContent
|
||||
anchors.centerIn: parent
|
||||
spacing: 6
|
||||
|
||||
Text {
|
||||
text: notificationCheckbox.isChecked ? "check" : ""
|
||||
font.family: "Material Symbols Outlined"
|
||||
font.pixelSize: 14 * Theme.uiScale
|
||||
color: notificationCheckbox.isChecked ? Theme.onAccent : Theme.textSecondary
|
||||
visible: notificationCheckbox.isChecked
|
||||
}
|
||||
|
||||
Text {
|
||||
text: modelData.name || "Unknown"
|
||||
font.pixelSize: 12 * Theme.uiScale
|
||||
color: notificationCheckbox.isChecked ? Theme.onAccent : Theme.textPrimary
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
// Toggle state immediately for UI responsiveness
|
||||
isChecked = !isChecked;
|
||||
|
||||
// Update settings
|
||||
let monitors = Settings.settings.notificationMonitors || [];
|
||||
monitors = [...monitors]; // Copy array
|
||||
|
||||
if (isChecked) {
|
||||
// Add to array if not already there
|
||||
if (!monitors.includes(modelData.name)) {
|
||||
monitors.push(modelData.name);
|
||||
}
|
||||
} else {
|
||||
// Remove from array
|
||||
monitors = monitors.filter(name => name !== modelData.name);
|
||||
}
|
||||
|
||||
Settings.settings.notificationMonitors = monitors;
|
||||
console.log("Notification monitors updated:", JSON.stringify(monitors));
|
||||
}
|
||||
|
||||
Settings.settings.notificationMonitors = monitors;
|
||||
console.log("Notification monitors updated:", JSON.stringify(monitors));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue