never/noctalia-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add scaling to everything, edit SidePanel

Browse source
This commit is contained in:
Ly-sec 2025-08-07 15:38:27 +02:00
parent 68d7add474
commit 0b49aff13d
52 changed files with 3138 additions and 3043 deletions
Download patch file Download diff file Expand all files Collapse all files

10
Bar/Bar.qml
View file

@ -48,7 +48,7 @@ Scope {
id: barBackground id: barBackground
width: parent.width width: parent.width
height: 36 height: 36 * Theme.uiScale
color: Theme.backgroundPrimary color: Theme.backgroundPrimary
anchors.top: parent.top anchors.top: parent.top
anchors.left: parent.left anchors.left: parent.left
@ -59,8 +59,8 @@ Scope {
anchors.verticalCenter: barBackground.verticalCenter anchors.verticalCenter: barBackground.verticalCenter
anchors.left: barBackground.left anchors.left: barBackground.left
anchors.leftMargin: 18 anchors.leftMargin: 18 * Theme.uiScale
spacing: 12 spacing: 12 * Theme.uiScale
SystemInfo { SystemInfo {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
@ -93,8 +93,8 @@ Scope {
anchors.verticalCenter: barBackground.verticalCenter anchors.verticalCenter: barBackground.verticalCenter
anchors.right: barBackground.right anchors.right: barBackground.right
anchors.rightMargin: 18 anchors.rightMargin: 18 * Theme.uiScale
spacing: 12 spacing: 12 * Theme.uiScale
SystemTray { SystemTray {
id: systemTrayModule id: systemTrayModule

4
Bar/Modules/ActiveWindow.qml
View file

@ -17,7 +17,7 @@ PanelWindow {
visible: Settings.settings.showActiveWindow && !activeWindowWrapper.finallyHidden visible: Settings.settings.showActiveWindow && !activeWindowWrapper.finallyHidden
implicitHeight: activeWindowTitleContainer.height implicitHeight: activeWindowTitleContainer.height
implicitWidth: 0 implicitWidth: 0
property int barHeight: 36 property int barHeight: 36 * Theme.uiScale
color: "transparent" color: "transparent"
function getIcon() { function getIcon() {
@ -127,7 +127,7 @@ PanelWindow {
Text { Text {
id: activeWindowTitle id: activeWindowTitle
text: ToplevelManager?.activeToplevel?.title && ToplevelManager?.activeToplevel?.title.length > 60 ? ToplevelManager?.activeToplevel?.title.substring(0, 60) + "..." : ToplevelManager?.activeToplevel?.title || "" text: ToplevelManager?.activeToplevel?.title && ToplevelManager?.activeToplevel?.title.length > 60 ? ToplevelManager?.activeToplevel?.title.substring(0, 60) + "..." : ToplevelManager?.activeToplevel?.title || ""
font.pixelSize: 12 font.pixelSize: 12 * Theme.uiScale
color: Theme.textSecondary color: Theme.textSecondary
anchors.left: icon.right anchors.left: icon.right
anchors.leftMargin: Settings.settings.showActiveWindowIcon ? 4 : 6 anchors.leftMargin: Settings.settings.showActiveWindowIcon ? 4 : 6

14
Bar/Modules/Applauncher.qml
View file

@ -532,7 +532,7 @@ PanelWithOverlay {
Text { Text {
text: "search" text: "search"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: Theme.fontSizeHeader font.pixelSize: Theme.fontSizeHeader * Theme.uiScale
color: searchField.activeFocus ? Theme.accentPrimary : Theme.textSecondary color: searchField.activeFocus ? Theme.accentPrimary : Theme.textSecondary
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
@ -545,7 +545,7 @@ PanelWithOverlay {
placeholderTextColor: Theme.textSecondary placeholderTextColor: Theme.textSecondary
background: null background: null
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: Theme.fontSizeBody font.pixelSize: Theme.fontSizeBody * Theme.uiScale
Layout.fillWidth: true Layout.fillWidth: true
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
onTextChanged: root.updateFilter() onTextChanged: root.updateFilter()
@ -689,7 +689,7 @@ PanelWithOverlay {
visible: !modelData.isCalculator && !modelData.isClipboard && !modelData.isCommand && !parent.iconLoaded && modelData.type !== 'image' visible: !modelData.isCalculator && !modelData.isClipboard && !modelData.isCommand && !parent.iconLoaded && modelData.type !== 'image'
text: "broken_image" text: "broken_image"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: Theme.fontSizeHeader font.pixelSize: Theme.fontSizeHeader * Theme.uiScale
color: Theme.accentPrimary color: Theme.accentPrimary
} }
} }
@ -702,7 +702,7 @@ PanelWithOverlay {
text: modelData.name text: modelData.name
color: (hovered || isSelected) ? Theme.onAccent : (appLauncherPanel.isPinned(modelData) ? Theme.textPrimary : Theme.textPrimary) color: (hovered || isSelected) ? Theme.onAccent : (appLauncherPanel.isPinned(modelData) ? Theme.textPrimary : Theme.textPrimary)
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: Theme.fontSizeSmall font.pixelSize: Theme.fontSizeSmall * Theme.uiScale
font.bold: hovered || isSelected font.bold: hovered || isSelected
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight elide: Text.ElideRight
@ -716,7 +716,7 @@ PanelWithOverlay {
(modelData.comment || modelData.genericName || "No description available") (modelData.comment || modelData.genericName || "No description available")
color: (hovered || isSelected) ? Theme.onAccent : (appLauncherPanel.isPinned(modelData) ? Theme.textSecondary : Theme.textSecondary) color: (hovered || isSelected) ? Theme.onAccent : (appLauncherPanel.isPinned(modelData) ? Theme.textSecondary : Theme.textSecondary)
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: Theme.fontSizeCaption font.pixelSize: Theme.fontSizeCaption * Theme.uiScale
font.italic: !(modelData.comment || modelData.genericName) font.italic: !(modelData.comment || modelData.genericName)
opacity: modelData.isClipboard ? 0.8 : modelData.isCommand ? 0.9 : ((modelData.comment || modelData.genericName) ? 1.0 : 0.6) opacity: modelData.isClipboard ? 0.8 : modelData.isCommand ? 0.9 : ((modelData.comment || modelData.genericName) ? 1.0 : 0.6)
elide: Text.ElideRight elide: Text.ElideRight
@ -734,7 +734,7 @@ PanelWithOverlay {
Text { Text {
text: modelData.isCalculator ? "content_copy" : "chevron_right" text: modelData.isCalculator ? "content_copy" : "chevron_right"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: Theme.fontSizeBody font.pixelSize: Theme.fontSizeBody * Theme.uiScale
color: (hovered || isSelected) color: (hovered || isSelected)
? Theme.onAccent ? Theme.onAccent
: (appLauncherPanel.isPinned(modelData) ? Theme.textPrimary : Theme.textSecondary) : (appLauncherPanel.isPinned(modelData) ? Theme.textPrimary : Theme.textSecondary)
@ -818,7 +818,7 @@ PanelWithOverlay {
anchors.centerIn: parent anchors.centerIn: parent
text: "star" text: "star"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: Theme.fontSizeSmall font.pixelSize: Theme.fontSizeSmall * Theme.uiScale
color: (parent.MouseArea.containsMouse || hovered || isSelected) color: (parent.MouseArea.containsMouse || hovered || isSelected)
? Theme.onAccent ? Theme.onAccent
: (appLauncherPanel.isPinned(modelData) ? Theme.textPrimary : Theme.textDisabled) : (appLauncherPanel.isPinned(modelData) ? Theme.textPrimary : Theme.textDisabled)

20
Bar/Modules/AudioDeviceSelector.qml
View file

@ -155,7 +155,7 @@ PanelWithOverlay {
Text { Text {
text: "volume_up" text: "volume_up"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 16 font.pixelSize: 16 * Theme.uiScale
color: (Pipewire.defaultAudioSink && Pipewire.defaultAudioSink.id === modelData.id) ? Theme.accentPrimary : Theme.textPrimary color: (Pipewire.defaultAudioSink && Pipewire.defaultAudioSink.id === modelData.id) ? Theme.accentPrimary : Theme.textPrimary
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
} }
@ -168,7 +168,7 @@ PanelWithOverlay {
Text { Text {
text: modelData.nickname || modelData.description || modelData.name text: modelData.nickname || modelData.description || modelData.name
font.bold: true font.bold: true
font.pixelSize: 12 font.pixelSize: 12 * Theme.uiScale
color: (Pipewire.defaultAudioSink && Pipewire.defaultAudioSink.id === modelData.id) ? Theme.accentPrimary : Theme.textPrimary color: (Pipewire.defaultAudioSink && Pipewire.defaultAudioSink.id === modelData.id) ? Theme.accentPrimary : Theme.textPrimary
elide: Text.ElideRight elide: Text.ElideRight
maximumLineCount: 1 maximumLineCount: 1
@ -177,7 +177,7 @@ PanelWithOverlay {
Text { Text {
text: modelData.description !== modelData.nickname ? modelData.description : "" text: modelData.description !== modelData.nickname ? modelData.description : ""
font.pixelSize: 10 font.pixelSize: 10 * Theme.uiScale
color: Theme.textSecondary color: Theme.textSecondary
elide: Text.ElideRight elide: Text.ElideRight
maximumLineCount: 1 maximumLineCount: 1
@ -200,7 +200,7 @@ PanelWithOverlay {
anchors.centerIn: parent anchors.centerIn: parent
text: "Set" text: "Set"
color: Theme.onAccent color: Theme.onAccent
font.pixelSize: 10 font.pixelSize: 10 * Theme.uiScale
font.bold: true font.bold: true
} }
@ -216,7 +216,7 @@ PanelWithOverlay {
text: "(Current)" text: "(Current)"
visible: Pipewire.defaultAudioSink && Pipewire.defaultAudioSink.id === modelData.id visible: Pipewire.defaultAudioSink && Pipewire.defaultAudioSink.id === modelData.id
color: Theme.accentPrimary color: Theme.accentPrimary
font.pixelSize: 10 font.pixelSize: 10 * Theme.uiScale
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
} }
@ -267,7 +267,7 @@ PanelWithOverlay {
Text { Text {
text: "mic" text: "mic"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 16 font.pixelSize: 16 * Theme.uiScale
color: (Pipewire.defaultAudioSource && Pipewire.defaultAudioSource.id === modelData.id) ? Theme.accentPrimary : Theme.textPrimary color: (Pipewire.defaultAudioSource && Pipewire.defaultAudioSource.id === modelData.id) ? Theme.accentPrimary : Theme.textPrimary
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
} }
@ -280,7 +280,7 @@ PanelWithOverlay {
Text { Text {
text: modelData.nickname || modelData.description || modelData.name text: modelData.nickname || modelData.description || modelData.name
font.bold: true font.bold: true
font.pixelSize: 12 font.pixelSize: 12 * Theme.uiScale
color: (Pipewire.defaultAudioSource && Pipewire.defaultAudioSource.id === modelData.id) ? Theme.accentPrimary : Theme.textPrimary color: (Pipewire.defaultAudioSource && Pipewire.defaultAudioSource.id === modelData.id) ? Theme.accentPrimary : Theme.textPrimary
elide: Text.ElideRight elide: Text.ElideRight
maximumLineCount: 1 maximumLineCount: 1
@ -289,7 +289,7 @@ PanelWithOverlay {
Text { Text {
text: modelData.description !== modelData.nickname ? modelData.description : "" text: modelData.description !== modelData.nickname ? modelData.description : ""
font.pixelSize: 10 font.pixelSize: 10 * Theme.uiScale
color: Theme.textSecondary color: Theme.textSecondary
elide: Text.ElideRight elide: Text.ElideRight
maximumLineCount: 1 maximumLineCount: 1
@ -312,7 +312,7 @@ PanelWithOverlay {
anchors.centerIn: parent anchors.centerIn: parent
text: "Set" text: "Set"
color: Theme.onAccent color: Theme.onAccent
font.pixelSize: 10 font.pixelSize: 10 * Theme.uiScale
font.bold: true font.bold: true
} }
@ -328,7 +328,7 @@ PanelWithOverlay {
text: "(Current)" text: "(Current)"
visible: Pipewire.defaultAudioSource && Pipewire.defaultAudioSource.id === modelData.id visible: Pipewire.defaultAudioSource && Pipewire.defaultAudioSource.id === modelData.id
color: Theme.accentPrimary color: Theme.accentPrimary
font.pixelSize: 10 font.pixelSize: 10 * Theme.uiScale
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
} }

14
Bar/Modules/Bluetooth.qml
View file

@ -45,7 +45,7 @@ Item {
} }
} }
font.family: mouseAreaBluetooth.containsMouse ? "Material Symbols Rounded" : "Material Symbols Outlined" font.family: mouseAreaBluetooth.containsMouse ? "Material Symbols Rounded" : "Material Symbols Outlined"
font.pixelSize: 16 font.pixelSize: 16 * Theme.uiScale
color: mouseAreaBluetooth.containsMouse ? Theme.accentPrimary : Theme.textPrimary color: mouseAreaBluetooth.containsMouse ? Theme.accentPrimary : Theme.textPrimary
} }
@ -125,13 +125,13 @@ Item {
Text { Text {
text: "bluetooth" text: "bluetooth"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 24 font.pixelSize: 24 * Theme.uiScale
color: Theme.accentPrimary color: Theme.accentPrimary
} }
Text { Text {
text: "Bluetooth Devices" text: "Bluetooth Devices"
font.pixelSize: 18 font.pixelSize: 18 * Theme.uiScale
font.bold: true font.bold: true
color: Theme.textPrimary color: Theme.textPrimary
Layout.fillWidth: true Layout.fillWidth: true
@ -180,7 +180,7 @@ Item {
Text { Text {
text: modelData.connected ? "bluetooth" : "bluetooth_disabled" text: modelData.connected ? "bluetooth" : "bluetooth_disabled"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 18 font.pixelSize: 18 * Theme.uiScale
color: deviceMouseArea.containsMouse ? Theme.backgroundPrimary : (modelData.connected ? Theme.accentPrimary : Theme.textSecondary) color: deviceMouseArea.containsMouse ? Theme.backgroundPrimary : (modelData.connected ? Theme.accentPrimary : Theme.textSecondary)
} }
@ -199,7 +199,7 @@ Item {
return deviceName; return deviceName;
} }
color: deviceMouseArea.containsMouse ? Theme.backgroundPrimary : (modelData.connected ? Theme.accentPrimary : Theme.textPrimary) color: deviceMouseArea.containsMouse ? Theme.backgroundPrimary : (modelData.connected ? Theme.accentPrimary : Theme.textPrimary)
font.pixelSize: 14 font.pixelSize: 14 * Theme.uiScale
elide: Text.ElideRight elide: Text.ElideRight
Layout.fillWidth: true Layout.fillWidth: true
} }
@ -217,7 +217,7 @@ Item {
} }
} }
color: deviceMouseArea.containsMouse ? Theme.backgroundPrimary : (modelData.connected ? Theme.accentPrimary : Theme.textSecondary) color: deviceMouseArea.containsMouse ? Theme.backgroundPrimary : (modelData.connected ? Theme.accentPrimary : Theme.textSecondary)
font.pixelSize: 11 font.pixelSize: 11 * Theme.uiScale
elide: Text.ElideRight elide: Text.ElideRight
Layout.fillWidth: true Layout.fillWidth: true
} }
@ -265,7 +265,7 @@ Item {
Text { Text {
text: "Scanning for devices..." text: "Scanning for devices..."
font.pixelSize: 12 font.pixelSize: 12 * Theme.uiScale
color: Theme.textSecondary color: Theme.textSecondary
} }

6
Bar/Modules/Calendar.qml
View file

@ -52,7 +52,7 @@ PanelWithOverlay {
text: calendar.title text: calendar.title
color: Theme.textPrimary color: Theme.textPrimary
opacity: 0.7 opacity: 0.7
font.pixelSize: 13 font.pixelSize: 13 * Theme.uiScale
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.bold: true font.bold: true
} }
@ -78,7 +78,7 @@ PanelWithOverlay {
text: shortName text: shortName
color: Theme.textPrimary color: Theme.textPrimary
opacity: 0.8 opacity: 0.8
font.pixelSize: 13 font.pixelSize: 13 * Theme.uiScale
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.bold: true font.bold: true
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
@ -161,7 +161,7 @@ PanelWithOverlay {
text: model.day text: model.day
color: model.today ? Theme.onAccent : Theme.textPrimary color: model.today ? Theme.onAccent : Theme.textPrimary
opacity: model.month === calendar.month ? (mouseArea2.containsMouse ? 1 : 0.7) : 0.3 opacity: model.month === calendar.month ? (mouseArea2.containsMouse ? 1 : 0.7) : 0.3
font.pixelSize: 13 font.pixelSize: 13 * Theme.uiScale
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.bold: model.today ? true : false font.bold: model.today ? true : false
} }

2
Bar/Modules/ClockWidget.qml
View file

@ -15,7 +15,7 @@ Rectangle {
text: Time.time text: Time.time
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.weight: Font.Bold font.weight: Font.Bold
font.pixelSize: Theme.fontSizeSmall font.pixelSize: Theme.fontSizeSmall * Theme.uiScale
color: Theme.textPrimary color: Theme.textPrimary
anchors.centerIn: parent anchors.centerIn: parent
} }

8
Bar/Modules/CustomTrayMenu.qml
View file

@ -128,7 +128,7 @@ PopupWindow {
color: (modelData?.enabled ?? true) ? bg.hoverTextColor : Theme.textDisabled; color: (modelData?.enabled ?? true) ? bg.hoverTextColor : Theme.textDisabled;
text: modelData?.text ?? ""; text: modelData?.text ?? "";
font.family: Theme.fontFamily; font.family: Theme.fontFamily;
font.pixelSize: Theme.fontSizeSmall; font.pixelSize: Theme.fontSizeSmall * Theme.uiScale;
verticalAlignment: Text.AlignVCenter; verticalAlignment: Text.AlignVCenter;
elide: Text.ElideRight; elide: Text.ElideRight;
} }
@ -145,7 +145,7 @@ PopupWindow {
// Material Symbols Outlined chevron right for submenu // Material Symbols Outlined chevron right for submenu
text: modelData?.hasChildren ? "menu" : ""; text: modelData?.hasChildren ? "menu" : "";
font.family: "Material Symbols Outlined"; font.family: "Material Symbols Outlined";
font.pixelSize: 18; font.pixelSize: 18 * Theme.uiScale;
verticalAlignment: Text.AlignVCenter; verticalAlignment: Text.AlignVCenter;
visible: modelData?.hasChildren ?? false; visible: modelData?.hasChildren ?? false;
color: Theme.textPrimary; color: Theme.textPrimary;
@ -362,7 +362,7 @@ PopupWindow {
color: (modelData?.enabled ?? true) ? bg.hoverTextColor : Theme.textDisabled; color: (modelData?.enabled ?? true) ? bg.hoverTextColor : Theme.textDisabled;
text: modelData?.text ?? ""; text: modelData?.text ?? "";
font.family: Theme.fontFamily; font.family: Theme.fontFamily;
font.pixelSize: Theme.fontSizeSmall; font.pixelSize: Theme.fontSizeSmall * Theme.uiScale;
verticalAlignment: Text.AlignVCenter; verticalAlignment: Text.AlignVCenter;
elide: Text.ElideRight; elide: Text.ElideRight;
} }
@ -378,7 +378,7 @@ PopupWindow {
Text { Text {
text: modelData?.hasChildren ? "\uE5CC" : ""; text: modelData?.hasChildren ? "\uE5CC" : "";
font.family: "Material Symbols Outlined"; font.family: "Material Symbols Outlined";
font.pixelSize: 18; font.pixelSize: 18 * Theme.uiScale;
verticalAlignment: Text.AlignVCenter; verticalAlignment: Text.AlignVCenter;
visible: modelData?.hasChildren ?? false; visible: modelData?.hasChildren ?? false;
color: Theme.textPrimary; color: Theme.textPrimary;

22
Bar/Modules/Media.qml
View file

@ -10,7 +10,7 @@ import qs.Components
Item { Item {
id: mediaControl id: mediaControl
width: visible ? mediaRow.width : 0 width: visible ? mediaRow.width : 0
height: 36 height: 36 * Theme.uiScale
visible: Settings.settings.showMediaInBar && MusicManager.currentPlayer visible: Settings.settings.showMediaInBar && MusicManager.currentPlayer
RowLayout { RowLayout {
@ -20,8 +20,8 @@ Item {
Item { Item {
id: albumArtContainer id: albumArtContainer
width: 24 width: 24 * Theme.uiScale
height: 24 height: 24 * Theme.uiScale
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
// Circular spectrum visualizer // Circular spectrum visualizer
@ -29,8 +29,8 @@ Item {
id: spectrum id: spectrum
values: MusicManager.cavaValues values: MusicManager.cavaValues
anchors.centerIn: parent anchors.centerIn: parent
innerRadius: 10 innerRadius: 10 * Theme.uiScale
outerRadius: 18 outerRadius: 18 * Theme.uiScale
fillColor: Theme.accentPrimary fillColor: Theme.accentPrimary
strokeColor: Theme.accentPrimary strokeColor: Theme.accentPrimary
strokeWidth: 0 strokeWidth: 0
@ -40,10 +40,10 @@ Item {
// Album art image // Album art image
Rectangle { Rectangle {
id: albumArtwork id: albumArtwork
width: 20 width: 20 * Theme.uiScale
height: 20 height: 20 * Theme.uiScale
anchors.centerIn: parent anchors.centerIn: parent
radius: 12 // circle radius: 12 * Theme.uiScale // circle
color: Qt.darker(Theme.surface, 1.1) color: Qt.darker(Theme.surface, 1.1)
border.color: Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.3) border.color: Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.3)
border.width: 1 border.width: 1
@ -79,7 +79,7 @@ Item {
anchors.centerIn: parent anchors.centerIn: parent
text: "music_note" text: "music_note"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 14 font.pixelSize: 14 * Theme.uiScale
color: Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.4) color: Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.4)
visible: !albumArt.visible visible: !albumArt.visible
} }
@ -96,7 +96,7 @@ Item {
anchors.centerIn: parent anchors.centerIn: parent
text: MusicManager.isPlaying ? "pause" : "play_arrow" text: MusicManager.isPlaying ? "pause" : "play_arrow"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 14 font.pixelSize: 14 * Theme.uiScale
color: "white" color: "white"
} }
} }
@ -117,7 +117,7 @@ Item {
text: MusicManager.trackTitle + " - " + MusicManager.trackArtist text: MusicManager.trackTitle + " - " + MusicManager.trackArtist
color: Theme.textPrimary color: Theme.textPrimary
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: 12 font.pixelSize: 12 * Theme.uiScale
elide: Text.ElideRight elide: Text.ElideRight
Layout.maximumWidth: 300 Layout.maximumWidth: 300
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter

2
Bar/Modules/SettingsButton.qml
View file

@ -21,7 +21,7 @@ Item {
anchors.centerIn: parent anchors.centerIn: parent
text: "settings" text: "settings"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 16 font.pixelSize: 16 * Theme.uiScale
color: mouseArea.containsMouse ? Theme.accentPrimary : Theme.textPrimary color: mouseArea.containsMouse ? Theme.accentPrimary : Theme.textPrimary
} }

12
Bar/Modules/SystemInfo.qml
View file

@ -17,7 +17,7 @@ Row {
Text { Text {
id: cpuUsageIcon id: cpuUsageIcon
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: Theme.fontSizeBody font.pixelSize: Theme.fontSizeBody * Theme.uiScale
text: "speed" text: "speed"
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
@ -27,7 +27,7 @@ Row {
Text { Text {
id: cpuUsageText id: cpuUsageText
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: Theme.fontSizeSmall font.pixelSize: Theme.fontSizeSmall * Theme.uiScale
color: Theme.textPrimary color: Theme.textPrimary
text: Sysinfo.cpuUsageStr text: Sysinfo.cpuUsageStr
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
@ -41,7 +41,7 @@ Row {
spacing: 3 spacing: 3
Text { Text {
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: Theme.fontSizeBody font.pixelSize: Theme.fontSizeBody * Theme.uiScale
text: "thermometer" text: "thermometer"
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
@ -50,7 +50,7 @@ Row {
Text { Text {
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: Theme.fontSizeSmall font.pixelSize: Theme.fontSizeSmall * Theme.uiScale
color: Theme.textPrimary color: Theme.textPrimary
text: Sysinfo.cpuTempStr text: Sysinfo.cpuTempStr
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
@ -64,7 +64,7 @@ Row {
spacing: 3 spacing: 3
Text { Text {
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: Theme.fontSizeBody font.pixelSize: Theme.fontSizeBody * Theme.uiScale
text: "memory" text: "memory"
color: Theme.accentPrimary color: Theme.accentPrimary
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
@ -73,7 +73,7 @@ Row {
Text { Text {
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: Theme.fontSizeSmall font.pixelSize: Theme.fontSizeSmall * Theme.uiScale
color: Theme.textPrimary color: Theme.textPrimary
text: Sysinfo.memoryUsageStr text: Sysinfo.memoryUsageStr
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter

16
Bar/Modules/SystemTray.qml
View file

@ -21,8 +21,8 @@ Row {
Repeater { Repeater {
model: systemTray.items model: systemTray.items
delegate: Item { delegate: Item {
width: 24 width: 24 * Theme.uiScale
height: 24 height: 24 * Theme.uiScale
// Hide Spotify icon, or adjust to your liking // Hide Spotify icon, or adjust to your liking
visible: modelData && modelData.id !== "spotify" visible: modelData && modelData.id !== "spotify"
property bool isHovered: trayMouseArea.containsMouse property bool isHovered: trayMouseArea.containsMouse
@ -47,17 +47,17 @@ Row {
Rectangle { Rectangle {
anchors.centerIn: parent anchors.centerIn: parent
width: 16 width: 16 * Theme.uiScale
height: 16 height: 16 * Theme.uiScale
radius: 6 radius: 6 * Theme.uiScale
color: "transparent" color: "transparent"
clip: true clip: true
IconImage { IconImage {
id: trayIcon id: trayIcon
anchors.centerIn: parent anchors.centerIn: parent
width: 16 width: 16 * Theme.uiScale
height: 16 height: 16 * Theme.uiScale
smooth: false smooth: false
asynchronous: true asynchronous: true
backer.fillMode: Image.PreserveAspectFit backer.fillMode: Image.PreserveAspectFit
@ -122,7 +122,7 @@ Row {
if (modelData.hasMenu && modelData.menu && trayMenu) { if (modelData.hasMenu && modelData.menu && trayMenu) {
// Anchor the menu to the tray icon item (parent) and position it below the icon // Anchor the menu to the tray icon item (parent) and position it below the icon
const menuX = (width / 2) - (trayMenu.width / 2); const menuX = (width / 2) - (trayMenu.width / 2);
const menuY = height + 20; const menuY = height + 20 * Theme.uiScale;
trayMenu.menu = modelData.menu; trayMenu.menu = modelData.menu;
trayMenu.showAt(parent, menuX, menuY); trayMenu.showAt(parent, menuX, menuY);
} else } else

2
Bar/Modules/Taskbar.qml
View file

@ -83,7 +83,7 @@ Item {
visible: !appIcon.visible visible: !appIcon.visible
text: appButton.appId ? appButton.appId.charAt(0).toUpperCase() : "?" text: appButton.appId ? appButton.appId.charAt(0).toUpperCase() : "?"
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: Math.max(10, Settings.settings.taskbarIconSize * 0.4375) font.pixelSize: Math.max(10, Settings.settings.taskbarIconSize * 0.4375 * Theme.uiScale)
font.bold: true font.bold: true
color: appButton.isActive ? Theme.onAccent : Theme.textPrimary color: appButton.isActive ? Theme.onAccent : Theme.textPrimary
} }

24
Bar/Modules/Wifi.qml
View file

@ -51,7 +51,7 @@ Item {
return connected ? network.signalIcon(parent.currentSignal) : "wifi_off" return connected ? network.signalIcon(parent.currentSignal) : "wifi_off"
} }
font.family: mouseAreaWifi.containsMouse ? "Material Symbols Rounded" : "Material Symbols Outlined" font.family: mouseAreaWifi.containsMouse ? "Material Symbols Rounded" : "Material Symbols Outlined"
font.pixelSize: 16 font.pixelSize: 16 * Theme.uiScale
color: mouseAreaWifi.containsMouse ? Theme.accentPrimary : Theme.textPrimary color: mouseAreaWifi.containsMouse ? Theme.accentPrimary : Theme.textPrimary
} }
@ -120,13 +120,13 @@ Item {
Text { Text {
text: "wifi" text: "wifi"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 24 font.pixelSize: 24 * Theme.uiScale
color: Theme.accentPrimary color: Theme.accentPrimary
} }
Text { Text {
text: "WiFi Networks" text: "WiFi Networks"
font.pixelSize: 18 font.pixelSize: 18 * Theme.uiScale
font.bold: true font.bold: true
color: Theme.textPrimary color: Theme.textPrimary
Layout.fillWidth: true Layout.fillWidth: true
@ -183,7 +183,7 @@ Item {
Text { Text {
text: network.signalIcon(modelData.signal) text: network.signalIcon(modelData.signal)
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 18 font.pixelSize: 18 * Theme.uiScale
color: networkMouseArea.containsMouse ? Theme.backgroundPrimary : (modelData.connected ? Theme.accentPrimary : Theme.textSecondary) color: networkMouseArea.containsMouse ? Theme.backgroundPrimary : (modelData.connected ? Theme.accentPrimary : Theme.textSecondary)
} }
@ -194,7 +194,7 @@ Item {
Text { Text {
text: modelData.ssid || "Unknown Network" text: modelData.ssid || "Unknown Network"
color: networkMouseArea.containsMouse ? Theme.backgroundPrimary : (modelData.connected ? Theme.accentPrimary : Theme.textPrimary) color: networkMouseArea.containsMouse ? Theme.backgroundPrimary : (modelData.connected ? Theme.accentPrimary : Theme.textPrimary)
font.pixelSize: 14 font.pixelSize: 14 * Theme.uiScale
elide: Text.ElideRight elide: Text.ElideRight
Layout.fillWidth: true Layout.fillWidth: true
} }
@ -202,7 +202,7 @@ Item {
Text { Text {
text: modelData.security && modelData.security !== "--" ? modelData.security : "Open" text: modelData.security && modelData.security !== "--" ? modelData.security : "Open"
color: networkMouseArea.containsMouse ? Theme.backgroundPrimary : (modelData.connected ? Theme.accentPrimary : Theme.textSecondary) color: networkMouseArea.containsMouse ? Theme.backgroundPrimary : (modelData.connected ? Theme.accentPrimary : Theme.textSecondary)
font.pixelSize: 11 font.pixelSize: 11 * Theme.uiScale
elide: Text.ElideRight elide: Text.ElideRight
Layout.fillWidth: true Layout.fillWidth: true
} }
@ -211,7 +211,7 @@ Item {
visible: network.connectStatusSsid === modelData.ssid && network.connectStatus === "error" && network.connectError.length > 0 visible: network.connectStatusSsid === modelData.ssid && network.connectStatus === "error" && network.connectError.length > 0
text: network.connectError text: network.connectError
color: Theme.error color: Theme.error
font.pixelSize: 11 font.pixelSize: 11 * Theme.uiScale
elide: Text.ElideRight elide: Text.ElideRight
Layout.fillWidth: true Layout.fillWidth: true
} }
@ -234,7 +234,7 @@ Item {
visible: network.connectStatus === "success" && !network.connectingSsid visible: network.connectStatus === "success" && !network.connectingSsid
text: "check_circle" text: "check_circle"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 18 font.pixelSize: 18 * Theme.uiScale
color: "#43a047" color: "#43a047"
anchors.centerIn: parent anchors.centerIn: parent
} }
@ -243,7 +243,7 @@ Item {
visible: network.connectStatus === "error" && !network.connectingSsid visible: network.connectStatus === "error" && !network.connectingSsid
text: "error" text: "error"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 18 font.pixelSize: 18 * Theme.uiScale
color: Theme.error color: Theme.error
anchors.centerIn: parent anchors.centerIn: parent
} }
@ -253,7 +253,7 @@ Item {
visible: modelData.connected visible: modelData.connected
text: "connected" text: "connected"
color: networkMouseArea.containsMouse ? Theme.backgroundPrimary : Theme.accentPrimary color: networkMouseArea.containsMouse ? Theme.backgroundPrimary : Theme.accentPrimary
font.pixelSize: 11 font.pixelSize: 11 * Theme.uiScale
} }
} }
@ -309,7 +309,7 @@ Item {
anchors.fill: parent anchors.fill: parent
anchors.margins: 12 anchors.margins: 12
text: passwordInput text: passwordInput
font.pixelSize: 13 font.pixelSize: 13 * Theme.uiScale
color: Theme.textPrimary color: Theme.textPrimary
verticalAlignment: TextInput.AlignVCenter verticalAlignment: TextInput.AlignVCenter
clip: true clip: true
@ -364,7 +364,7 @@ Item {
anchors.centerIn: parent anchors.centerIn: parent
text: "Connect" text: "Connect"
color: Theme.backgroundPrimary color: Theme.backgroundPrimary
font.pixelSize: 14 font.pixelSize: 14 * Theme.uiScale
font.bold: true font.bold: true
} }
} }

18
Bar/Modules/Workspace.qml
View file

@ -40,7 +40,7 @@ Item {
return total; return total;
} }
height: 36 height: 36 * Theme.uiScale
Component.onCompleted: { Component.onCompleted: {
localWorkspaces.clear(); localWorkspaces.clear();
@ -115,14 +115,14 @@ Item {
Rectangle { Rectangle {
id: workspaceBackground id: workspaceBackground
width: parent.width - 15 width: parent.width - 15 * Theme.uiScale
height: 26 height: 26 * Theme.uiScale
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
radius: 12 radius: 12 * Theme.uiScale
color: Theme.surfaceVariant color: Theme.surfaceVariant
border.color: Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.1) border.color: Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.1)
border.width: 1 border.width: 1 * Theme.uiScale
layer.enabled: true layer.enabled: true
layer.effect: MultiEffect { layer.effect: MultiEffect {
shadowColor: "black" shadowColor: "black"
@ -145,7 +145,7 @@ Item {
model: localWorkspaces model: localWorkspaces
Item { Item {
id: workspacePillContainer id: workspacePillContainer
height: 12 height: 12 * Theme.uiScale
width: { width: {
if (model.isFocused) if (model.isFocused)
return 44; return 44;
@ -245,12 +245,12 @@ Item {
Rectangle { Rectangle {
id: pillBurst id: pillBurst
anchors.centerIn: workspacePillContainer anchors.centerIn: workspacePillContainer
width: workspacePillContainer.width + 18 * root.masterProgress width: workspacePillContainer.width + 18 * root.masterProgress * Theme.uiScale
height: workspacePillContainer.height + 18 * root.masterProgress height: workspacePillContainer.height + 18 * root.masterProgress * Theme.uiScale
radius: width / 2 radius: width / 2
color: "transparent" color: "transparent"
border.color: root.effectColor border.color: root.effectColor
border.width: 2 + 6 * (1.0 - root.masterProgress) border.width: (2 + 6 * (1.0 - root.masterProgress)) * Theme.uiScale
opacity: root.effectsActive && model.isFocused ? (1.0 - root.masterProgress) * 0.7 : 0 opacity: root.effectsActive && model.isFocused ? (1.0 - root.masterProgress) * 0.7 : 0
visible: root.effectsActive && model.isFocused visible: root.effectsActive && model.isFocused
z: 1 z: 1

2
Components/Avatar.qml
View file

@ -43,7 +43,7 @@ Item {
anchors.centerIn: parent anchors.centerIn: parent
text: "person" text: "person"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 24 font.pixelSize: 24 * Theme.uiScale
color: Theme.onAccent color: Theme.onAccent
visible: Settings.settings.profileImage === undefined || Settings.settings.profileImage === "" visible: Settings.settings.profileImage === undefined || Settings.settings.profileImage === ""
z: 0 z: 0

4
Components/CircularProgressBar.qml
View file

@ -9,11 +9,11 @@ Rectangle {
property int size: 80 property int size: 80
property color backgroundColor: Theme.surfaceVariant property color backgroundColor: Theme.surfaceVariant
property color progressColor: Theme.accentPrimary property color progressColor: Theme.accentPrimary
property int strokeWidth: 6 property int strokeWidth: 6 * Theme.uiScale
property bool showText: true property bool showText: true
property string units: "%" property string units: "%"
property string text: Math.round(progress * 100) + units property string text: Math.round(progress * 100) + units
property int textSize: 10 property int textSize: 10 * Theme.uiScale
property color textColor: Theme.textPrimary property color textColor: Theme.textPrimary
// Notch properties // Notch properties

8
Components/CircularSpectrum.qml
View file

@ -4,11 +4,11 @@ import qs.Settings
Item { Item {
id: root id: root
property int innerRadius: 34 property int innerRadius: 34 * Theme.uiScale
property int outerRadius: 48 property int outerRadius: 48 * Theme.uiScale
property color fillColor: "#fff" property color fillColor: "#fff"
property color strokeColor: "#fff" property color strokeColor: "#fff"
property int strokeWidth: 0 property int strokeWidth: 0 * Theme.uiScale
property var values: [] property var values: []
property int usableOuter: 48 property int usableOuter: 48
@ -24,7 +24,7 @@ Item {
Rectangle { Rectangle {
property real value: root.values[index] property real value: root.values[index]
property real angle: (index / root.values.length) * 360 property real angle: (index / root.values.length) * 360
width: Math.max(2, (root.innerRadius * 2 * Math.PI) / root.values.length - 4) width: Math.max(2 * Theme.uiScale, (root.innerRadius * 2 * Math.PI) / root.values.length - 4 * Theme.uiScale)
height: Settings.settings.visualizerType === "diamond" ? value * 2 * (usableOuter - root.innerRadius) : value * (usableOuter - root.innerRadius) height: Settings.settings.visualizerType === "diamond" ? value * 2 * (usableOuter - root.innerRadius) : value * (usableOuter - root.innerRadius)
radius: width / 2 radius: width / 2
color: root.fillColor color: root.fillColor

6
Components/Corners.qml
View file

@ -6,11 +6,11 @@ Shape {
id: root id: root
property string position: "topleft" // Corner position: topleft/topright/bottomleft/bottomright property string position: "topleft" // Corner position: topleft/topright/bottomleft/bottomright
property real size: 1.0 // Scale multiplier for entire corner property real size: 1.0 * Theme.uiScale // Scale multiplier for entire corner
property int concaveWidth: 100 * size property int concaveWidth: 100 * size
property int concaveHeight: 60 * size property int concaveHeight: 60 * size
property int offsetX: -20 property int offsetX: -20 * Theme.uiScale
property int offsetY: -20 property int offsetY: -20 * Theme.uiScale
property color fillColor: Theme.accentPrimary property color fillColor: Theme.accentPrimary
property int arcRadius: 20 * size property int arcRadius: 20 * size

4
Components/IconButton.qml
View file

@ -19,7 +19,7 @@ MouseArea {
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
radius: 8 radius: 8 * Theme.uiScale
color: root.hovering ? Theme.accentPrimary : "transparent" color: root.hovering ? Theme.accentPrimary : "transparent"
} }
Text { Text {
@ -27,7 +27,7 @@ MouseArea {
anchors.centerIn: parent anchors.centerIn: parent
text: root.icon text: root.icon
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 24 font.pixelSize: 24 * Theme.uiScale
color: root.hovering ? Theme.onAccent : Theme.textPrimary color: root.hovering ? Theme.onAccent : Theme.textPrimary
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter

8
Components/PillIndicator.qml
View file

@ -13,8 +13,8 @@ Item {
property color iconCircleColor: Theme.accentPrimary property color iconCircleColor: Theme.accentPrimary
property color iconTextColor: Theme.backgroundPrimary property color iconTextColor: Theme.backgroundPrimary
property color collapsedIconColor: Theme.textPrimary property color collapsedIconColor: Theme.textPrimary
property int pillHeight: 22 property int pillHeight: 22 * Theme.uiScale
property int iconSize: 22 property int iconSize: 22 * Theme.uiScale
property int pillPaddingHorizontal: 14 property int pillPaddingHorizontal: 14
property bool autoHide: false property bool autoHide: false
@ -47,7 +47,7 @@ Item {
id: textItem id: textItem
anchors.centerIn: parent anchors.centerIn: parent
text: revealPill.text text: revealPill.text
font.pixelSize: Theme.fontSizeSmall font.pixelSize: Theme.fontSizeSmall * Theme.uiScale
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.weight: Font.Bold font.weight: Font.Bold
color: textColor color: textColor
@ -89,7 +89,7 @@ Item {
Text { Text {
anchors.centerIn: parent anchors.centerIn: parent
font.family: showPill ? "Material Symbols Rounded" : "Material Symbols Outlined" font.family: showPill ? "Material Symbols Rounded" : "Material Symbols Outlined"
font.pixelSize: Theme.fontSizeSmall font.pixelSize: Theme.fontSizeSmall * Theme.uiScale
text: revealPill.icon text: revealPill.icon
color: showPill ? iconTextColor : collapsedIconColor color: showPill ? iconTextColor : collapsedIconColor
} }

3
Components/Spinner.qml
View file

@ -1,4 +1,5 @@
import QtQuick import QtQuick
import qs.Settings
Item { Item {
id: root id: root
@ -6,7 +7,7 @@ Item {
property bool running: false property bool running: false
property color color: "white" property color color: "white"
property int size: 16 property int size: 16
property int strokeWidth: 2 property int strokeWidth: 2 * Theme.uiScale
property int duration: 1000 property int duration: 1000
implicitWidth: size implicitWidth: size

14
Components/StyledTooltip.qml
View file

@ -33,8 +33,8 @@ Window {
} }
function _showNow() { function _showNow() {
width = Math.max(50, tooltipText.implicitWidth + 24) width = Math.max(50 * Theme.uiScale, tooltipText.implicitWidth + 24 * Theme.uiScale)
height = Math.max(50, tooltipText.implicitHeight + 16) height = Math.max(50 * Theme.uiScale, tooltipText.implicitHeight + 16 * Theme.uiScale)
if (!targetItem) return; if (!targetItem) return;
@ -75,10 +75,10 @@ Window {
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
radius: 20 radius: 20 * Theme.uiScale
color: Theme.backgroundTertiary || "#222" color: Theme.backgroundTertiary || "#222"
border.color: Theme.outline || "#444" border.color: Theme.outline || "#444"
border.width: 1 border.width: 1 * Theme.uiScale
opacity: 0.97 opacity: 0.97
z: 1 z: 1
} }
@ -88,7 +88,7 @@ Window {
text: tooltipWindow.text text: tooltipWindow.text
color: Theme.textPrimary color: Theme.textPrimary
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: Theme.fontSizeSmall font.pixelSize: Theme.fontSizeSmall * Theme.uiScale
anchors.centerIn: parent anchors.centerIn: parent
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
@ -105,7 +105,7 @@ Window {
} }
onTextChanged: { onTextChanged: {
width = Math.max(minimumWidth, tooltipText.implicitWidth + 24); width = Math.max(minimumWidth * Theme.uiScale, tooltipText.implicitWidth + 24 * Theme.uiScale);
height = Math.max(minimumHeight, tooltipText.implicitHeight + 16); height = Math.max(minimumHeight * Theme.uiScale, tooltipText.implicitHeight + 16 * Theme.uiScale);
} }
} }

14
Components/Tabs.qml
View file

@ -17,8 +17,8 @@ Item {
model: root.tabsModel model: root.tabsModel
delegate: Rectangle { delegate: Rectangle {
id: tabWrapper id: tabWrapper
implicitHeight: tab.height implicitHeight: tab.height * Theme.uiScale
implicitWidth: 56 implicitWidth: 56 * Theme.uiScale
color: "transparent" color: "transparent"
property bool hovered: false property bool hovered: false
@ -48,7 +48,7 @@ Item {
Text { Text {
text: modelData.icon text: modelData.icon
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 22 font.pixelSize: 22 * Theme.uiScale
color: index === root.currentIndex ? (Theme ? Theme.accentPrimary : "#7C3AED") : tabWrapper.hovered ? (Theme ? Theme.accentPrimary : "#7C3AED") : (Theme ? Theme.textSecondary : "#444") color: index === root.currentIndex ? (Theme ? Theme.accentPrimary : "#7C3AED") : tabWrapper.hovered ? (Theme ? Theme.accentPrimary : "#7C3AED") : (Theme ? Theme.textSecondary : "#444")
Layout.alignment: Qt.AlignCenter Layout.alignment: Qt.AlignCenter
} }
@ -56,7 +56,7 @@ Item {
// Label // Label
Text { Text {
text: modelData.label text: modelData.label
font.pixelSize: 12 font.pixelSize: 12 * Theme.uiScale
font.bold: index === root.currentIndex font.bold: index === root.currentIndex
color: index === root.currentIndex ? (Theme ? Theme.accentPrimary : "#7C3AED") : tabWrapper.hovered ? (Theme ? Theme.accentPrimary : "#7C3AED") : (Theme ? Theme.textSecondary : "#444") color: index === root.currentIndex ? (Theme ? Theme.accentPrimary : "#7C3AED") : tabWrapper.hovered ? (Theme ? Theme.accentPrimary : "#7C3AED") : (Theme ? Theme.textSecondary : "#444")
Layout.alignment: Qt.AlignCenter Layout.alignment: Qt.AlignCenter
@ -64,9 +64,9 @@ Item {
// Underline for active tab // Underline for active tab
Rectangle { Rectangle {
width: 24 width: 24 * Theme.uiScale
height: 2 height: 2 * Theme.uiScale
radius: 1 radius: 1 * Theme.uiScale
color: index === root.currentIndex ? (Theme ? Theme.accentPrimary : "#7C3AED") : "transparent" color: index === root.currentIndex ? (Theme ? Theme.accentPrimary : "#7C3AED") : "transparent"
Layout.alignment: Qt.AlignCenter Layout.alignment: Qt.AlignCenter
} }

2
README.md
View file

@ -226,4 +226,4 @@ Thank you to everyone who supports me and this project 💜!
## License ## License
This project is licensed under the terms of the [MIT License](./LICENSE). This project is licensed under the terms of the [MIT License](./LICENSE).

20
Settings/Theme.qml
View file

@ -8,6 +8,23 @@ import qs.Settings
Singleton { Singleton {
id: root id: root
// Design screen width
readonly property int designScreenWidth: 1920
// Scaling dampening factor - reduces the scaling effect for higher resolutions
readonly property real scalingDampening: 0.2
// Automatic scaling based on screen width
function screenWidthRatio() {
// Get the primary screen width
if (Quickshell.screens && Quickshell.screens.length > 0) {
var rawRatio = Quickshell.screens[0].width / designScreenWidth
// Apply dampening to reduce scaling for higher resolutions
return Math.min(2.0, 1.0 + (rawRatio - 1.0) * scalingDampening)
}
return 1.0
}
function applyOpacity(color, opacity) { function applyOpacity(color, opacity) {
return color.replace("#", "#" + opacity); return color.replace("#", "#" + opacity);
} }
@ -100,6 +117,9 @@ Singleton {
property color shadow: applyOpacity(themeData.shadow, "B3") property color shadow: applyOpacity(themeData.shadow, "B3")
property color overlay: applyOpacity(themeData.overlay, "66") property color overlay: applyOpacity(themeData.overlay, "66")
// Global UI scale factor - automatically calculated based on screen width
property real uiScale: screenWidthRatio()
// Font Properties // Font Properties
property string fontFamily: "Roboto" // Family for all text property string fontFamily: "Roboto" // Family for all text

4
Widgets/Dock.qml
View file

@ -302,7 +302,7 @@ PanelWindow {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
text: "close" text: "close"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 14 font.pixelSize: 14 * Theme.uiScale
color: Theme.textPrimary color: Theme.textPrimary
} }
@ -310,7 +310,7 @@ PanelWindow {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
text: "Close" text: "Close"
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: 14 font.pixelSize: 14 * Theme.uiScale
color: Theme.textPrimary color: Theme.textPrimary
} }
} }

4
Widgets/LockScreen/BatteryCharge.qml
View file

@ -58,7 +58,7 @@ Item {
Text { Text {
text: batteryIcon() text: batteryIcon()
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 28 font.pixelSize: 28 * Theme.uiScale
color: charging ? Theme.accentPrimary : Theme.textSecondary color: charging ? Theme.accentPrimary : Theme.textSecondary
verticalAlignment: Text.AlignVBottom verticalAlignment: Text.AlignVBottom
} }
@ -66,7 +66,7 @@ Item {
Text { Text {
text: Math.round(percent) + "%" text: Math.round(percent) + "%"
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: 18 font.pixelSize: 18 * Theme.uiScale
color: Theme.textSecondary color: Theme.textSecondary
verticalAlignment: Text.AlignVBottom verticalAlignment: Text.AlignVBottom
} }

90
Widgets/LockScreen/LockScreen.qml
View file

@ -152,21 +152,21 @@ WlSessionLock {
ColumnLayout { ColumnLayout {
anchors.centerIn: parent anchors.centerIn: parent
spacing: 30 spacing: 30
width: Math.min(parent.width * 0.8, 400) width: Math.min(parent.width * 0.8, 400 * Theme.uiScale)
Rectangle { Rectangle {
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
width: 80 width: 80 * Theme.uiScale
height: 80 height: 80 * Theme.uiScale
radius: 40 radius: 40 * Theme.uiScale
color: Theme.accentPrimary color: Theme.accentPrimary
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
color: "transparent" color: "transparent"
radius: 40 radius: 40 * Theme.uiScale
border.color: Theme.accentPrimary border.color: Theme.accentPrimary
border.width: 3 border.width: 3 * Theme.uiScale
z: 2 z: 2
} }
@ -183,28 +183,28 @@ WlSessionLock {
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
text: Quickshell.env("USER") text: Quickshell.env("USER")
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: 24 font.pixelSize: 24 * Theme.uiScale
font.weight: Font.Medium font.weight: Font.Medium
color: Theme.textPrimary color: Theme.textPrimary
} }
Rectangle { Rectangle {
Layout.fillWidth: true Layout.fillWidth: true
height: 50 height: 50 * Theme.uiScale
radius: 25 radius: 25 * Theme.uiScale
color: Theme.surface color: Theme.surface
opacity: passwordInput.activeFocus ? 0.8 : 0.3 opacity: passwordInput.activeFocus ? 0.8 : 0.3
border.color: passwordInput.activeFocus ? Theme.accentPrimary : Theme.outline border.color: passwordInput.activeFocus ? Theme.accentPrimary : Theme.outline
border.width: 2 border.width: 2 * Theme.uiScale
TextInput { TextInput {
id: passwordInput id: passwordInput
anchors.fill: parent anchors.fill: parent
anchors.margins: 15 anchors.margins: 15 * Theme.uiScale
verticalAlignment: TextInput.AlignVCenter verticalAlignment: TextInput.AlignVCenter
horizontalAlignment: TextInput.AlignHCenter horizontalAlignment: TextInput.AlignHCenter
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: 16 font.pixelSize: 16 * Theme.uiScale
color: Theme.textPrimary color: Theme.textPrimary
echoMode: TextInput.Password echoMode: TextInput.Password
passwordCharacter: "●" passwordCharacter: "●"
@ -218,7 +218,7 @@ WlSessionLock {
text: "Enter password..." text: "Enter password..."
color: Theme.textSecondary color: Theme.textSecondary
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: 16 font.pixelSize: 16 * Theme.uiScale
visible: !passwordInput.text && !passwordInput.activeFocus visible: !passwordInput.text && !passwordInput.activeFocus
} }
@ -238,9 +238,9 @@ WlSessionLock {
id: errorMessageRect id: errorMessageRect
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
width: parent.width * 0.8 width: parent.width * 0.8
height: 44 height: 44 * Theme.uiScale
color: Theme.overlay color: Theme.overlay
radius: 20 radius: 20 * Theme.uiScale
visible: lock.errorMessage !== "" visible: lock.errorMessage !== ""
Text { Text {
@ -248,7 +248,7 @@ WlSessionLock {
text: lock.errorMessage text: lock.errorMessage
color: Theme.error color: Theme.error
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: 14 font.pixelSize: 14 * Theme.uiScale
opacity: 1 opacity: 1
visible: lock.errorMessage !== "" visible: lock.errorMessage !== ""
} }
@ -256,13 +256,13 @@ WlSessionLock {
Rectangle { Rectangle {
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
width: 120 width: 120 * Theme.uiScale
height: 44 height: 44 * Theme.uiScale
radius: 20 radius: 20 * Theme.uiScale
opacity: unlockButtonArea.containsMouse ? 0.8 : 0.5 opacity: unlockButtonArea.containsMouse ? 0.8 : 0.5
color: unlockButtonArea.containsMouse ? Theme.accentPrimary : Theme.surface color: unlockButtonArea.containsMouse ? Theme.accentPrimary : Theme.surface
border.color: Theme.accentPrimary border.color: Theme.accentPrimary
border.width: 2 border.width: 2 * Theme.uiScale
enabled: !lock.authenticating enabled: !lock.authenticating
Text { Text {
@ -270,7 +270,7 @@ WlSessionLock {
anchors.centerIn: parent anchors.centerIn: parent
text: lock.authenticating ? "..." : "Unlock" text: lock.authenticating ? "..." : "Unlock"
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: 16 font.pixelSize: 16 * Theme.uiScale
font.bold: true font.bold: true
color: unlockButtonArea.containsMouse ? Theme.onAccent : Theme.accentPrimary color: unlockButtonArea.containsMouse ? Theme.onAccent : Theme.accentPrimary
} }
@ -324,12 +324,12 @@ WlSessionLock {
} }
Rectangle { Rectangle {
width: infoColumn.width + 32 width: infoColumn.width + 32 * Theme.uiScale
height: infoColumn.height + 8 height: infoColumn.height + 8 * Theme.uiScale
color: (Theme.backgroundPrimary !== undefined && Theme.backgroundPrimary !== null) ? Theme.backgroundPrimary : "#222" color: (Theme.backgroundPrimary !== undefined && Theme.backgroundPrimary !== null) ? Theme.backgroundPrimary : "#222"
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
bottomLeftRadius: 20 bottomLeftRadius: 20 * Theme.uiScale
bottomRightRadius: 20 bottomRightRadius: 20 * Theme.uiScale
ColumnLayout { ColumnLayout {
id: infoColumn id: infoColumn
@ -343,7 +343,7 @@ WlSessionLock {
id: timeText id: timeText
text: Qt.formatDateTime(new Date(), "HH:mm") text: Qt.formatDateTime(new Date(), "HH:mm")
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: 48 font.pixelSize: 48 * Theme.uiScale
font.bold: true font.bold: true
color: Theme.textPrimary color: Theme.textPrimary
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
@ -353,7 +353,7 @@ WlSessionLock {
id: dateText id: dateText
text: Qt.formatDateTime(new Date(), "dddd, MMMM d") text: Qt.formatDateTime(new Date(), "dddd, MMMM d")
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: 16 font.pixelSize: 16 * Theme.uiScale
color: Theme.textSecondary color: Theme.textSecondary
opacity: 0.8 opacity: 0.8
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
@ -369,7 +369,7 @@ WlSessionLock {
Text { Text {
text: weatherData && weatherData.current_weather ? materialSymbolForCode(weatherData.current_weather.weathercode) : "cloud" text: weatherData && weatherData.current_weather ? materialSymbolForCode(weatherData.current_weather.weathercode) : "cloud"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 28 font.pixelSize: 28 * Theme.uiScale
color: Theme.accentPrimary color: Theme.accentPrimary
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
} }
@ -377,7 +377,7 @@ WlSessionLock {
Text { Text {
text: weatherData && weatherData.current_weather ? ((Settings.settings.useFahrenheit !== undefined ? Settings.settings.useFahrenheit : false) ? `${Math.round(weatherData.current_weather.temperature * 9 / 5 + 32)}°F` : `${Math.round(weatherData.current_weather.temperature)}°C`) : ((Settings.settings.useFahrenheit !== undefined ? Settings.settings.useFahrenheit : false) ? "--°F" : "--°C") text: weatherData && weatherData.current_weather ? ((Settings.settings.useFahrenheit !== undefined ? Settings.settings.useFahrenheit : false) ? `${Math.round(weatherData.current_weather.temperature * 9 / 5 + 32)}°F` : `${Math.round(weatherData.current_weather.temperature)}°C`) : ((Settings.settings.useFahrenheit !== undefined ? Settings.settings.useFahrenheit : false) ? "--°F" : "--°C")
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: 18 font.pixelSize: 18 * Theme.uiScale
color: Theme.textSecondary color: Theme.textSecondary
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
} }
@ -388,7 +388,7 @@ WlSessionLock {
color: Theme.error color: Theme.error
visible: weatherError !== "" visible: weatherError !== ""
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: 10 font.pixelSize: 10 * Theme.uiScale
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
} }
@ -430,12 +430,12 @@ WlSessionLock {
spacing: 12 spacing: 12
Rectangle { Rectangle {
width: 48 width: 48 * Theme.uiScale
height: 48 height: 48 * Theme.uiScale
radius: 24 radius: 24 * Theme.uiScale
color: shutdownArea.containsMouse ? Theme.error : "transparent" color: shutdownArea.containsMouse ? Theme.error : "transparent"
border.color: Theme.error border.color: Theme.error
border.width: 1 border.width: 1 * Theme.uiScale
MouseArea { MouseArea {
id: shutdownArea id: shutdownArea
@ -450,18 +450,18 @@ WlSessionLock {
anchors.centerIn: parent anchors.centerIn: parent
text: "power_settings_new" text: "power_settings_new"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 24 font.pixelSize: 24 * Theme.uiScale
color: shutdownArea.containsMouse ? Theme.onAccent : Theme.error color: shutdownArea.containsMouse ? Theme.onAccent : Theme.error
} }
} }
Rectangle { Rectangle {
width: 48 width: 48 * Theme.uiScale
height: 48 height: 48 * Theme.uiScale
radius: 24 radius: 24 * Theme.uiScale
color: rebootArea.containsMouse ? Theme.accentPrimary : "transparent" color: rebootArea.containsMouse ? Theme.accentPrimary : "transparent"
border.color: Theme.accentPrimary border.color: Theme.accentPrimary
border.width: 1 border.width: 1 * Theme.uiScale
MouseArea { MouseArea {
id: rebootArea id: rebootArea
@ -476,18 +476,18 @@ WlSessionLock {
anchors.centerIn: parent anchors.centerIn: parent
text: "refresh" text: "refresh"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 24 font.pixelSize: 24 * Theme.uiScale
color: rebootArea.containsMouse ? Theme.onAccent : Theme.accentPrimary color: rebootArea.containsMouse ? Theme.onAccent : Theme.accentPrimary
} }
} }
Rectangle { Rectangle {
width: 48 width: 48 * Theme.uiScale
height: 48 height: 48 * Theme.uiScale
radius: 24 radius: 24 * Theme.uiScale
color: logoutArea.containsMouse ? Theme.accentSecondary : "transparent" color: logoutArea.containsMouse ? Theme.accentSecondary : "transparent"
border.color: Theme.accentSecondary border.color: Theme.accentSecondary
border.width: 1 border.width: 1 * Theme.uiScale
MouseArea { MouseArea {
id: logoutArea id: logoutArea
@ -502,7 +502,7 @@ WlSessionLock {
anchors.centerIn: parent anchors.centerIn: parent
text: "exit_to_app" text: "exit_to_app"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 24 font.pixelSize: 24 * Theme.uiScale
color: logoutArea.containsMouse ? Theme.onAccent : Theme.accentSecondary color: logoutArea.containsMouse ? Theme.onAccent : Theme.accentSecondary
} }
} }

2
Widgets/Notification/NotificationIcon.qml
View file

@ -42,7 +42,7 @@ Item {
} }
} }
font.family: mouseAreaBell.containsMouse ? "Material Symbols Rounded" : "Material Symbols Outlined" font.family: mouseAreaBell.containsMouse ? "Material Symbols Rounded" : "Material Symbols Outlined"
font.pixelSize: 16 font.pixelSize: 16 * Theme.uiScale
font.weight: { font.weight: {
if (shell && shell.notificationHistoryWin && shell.notificationHistoryWin.hasUnread) { if (shell && shell.notificationHistoryWin && shell.notificationHistoryWin.hasUnread) {
return Font.Bold; return Font.Bold;

535
Widgets/SettingsWindow/SettingsWindow.qml
View file

@ -148,8 +148,8 @@ PanelWithOverlay {
Rectangle { Rectangle {
id: settingsWindowRect id: settingsWindowRect
implicitWidth: Quickshell.screens.length > 0 ? Quickshell.screens[0].width * 2 / 3 : 600 implicitWidth: Quickshell.screens.length > 0 ? Math.min(Quickshell.screens[0].width * 2 / 3, 1200) * Theme.uiScale : 600 * Theme.uiScale
implicitHeight: Quickshell.screens.length > 0 ? Quickshell.screens[0].height * 2 / 3 : 400 implicitHeight: Quickshell.screens.length > 0 ? Math.min(Quickshell.screens[0].height * 2 / 3, 800) * Theme.uiScale : 400 * Theme.uiScale
visible: parent.visible visible: parent.visible
color: "transparent" color: "transparent"
// Center the settings window on screen // Center the settings window on screen
@ -160,14 +160,15 @@ PanelWithOverlay {
anchors.fill: parent anchors.fill: parent
} }
// Background rectangle
Rectangle { Rectangle {
id: background id: background
color: Theme.backgroundPrimary color: Theme.backgroundPrimary
anchors.fill: parent anchors.fill: parent
radius: 20 radius: 20 * Theme.uiScale
border.color: Theme.outline border.color: Theme.outline
border.width: 1 border.width: 1 * Theme.uiScale
MultiEffect { MultiEffect {
source: background source: background
@ -184,10 +185,11 @@ PanelWithOverlay {
Rectangle { Rectangle {
id: settings id: settings
clip: true
color: Theme.backgroundPrimary color: Theme.backgroundPrimary
topRightRadius: 20 topRightRadius: 20 * Theme.uiScale
bottomRightRadius: 20 bottomRightRadius: 20 * Theme.uiScale
anchors { anchors {
left: tabs.right left: tabs.right
@ -197,285 +199,288 @@ PanelWithOverlay {
margins: 12 margins: 12
} }
Rectangle { Rectangle {
id: headerArea id: headerArea
height: 48 height: 48 * Theme.uiScale
color: "transparent" color: "transparent"
anchors { anchors {
top: parent.top top: parent.top
left: parent.left left: parent.left
right: parent.right right: parent.right
margins: 16 margins: 16
}
RowLayout {
anchors.fill: parent
spacing: 12
Text {
id: tabName
text: wallpaperSelector.visible ? "Select Wallpaper" : (activeTabIndex === 0 ? "General" : activeTabIndex === 1 ? "Bar" : activeTabIndex === 2 ? "Time & Weather" : activeTabIndex === 3 ? "Screen Recorder" : activeTabIndex === 4 ? "Network" : activeTabIndex === 5 ? "Display" : activeTabIndex === 6 ? "Wallpaper" : activeTabIndex === 7 ? "Misc" : activeTabIndex === 8 ? "About" : "General")
font.pixelSize: 18
font.bold: true
color: Theme.textPrimary
Layout.fillWidth: true
} }
// Wallpaper Selection Button (only visible on Wallpaper tab) RowLayout {
Rectangle { anchors.fill: parent
width: 160 spacing: 12 * Theme.uiScale
height: 32
radius: 16
color: wallpaperButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
border.color: Theme.accentPrimary
border.width: 1
visible: activeTabIndex === 6 // Wallpaper tab index
Row {
anchors.centerIn: parent
spacing: 6
Text {
text: "image"
font.family: wallpaperButtonArea.containsMouse ? "Material Symbols Rounded" : "Material Symbols Outlined"
font.pixelSize: 16
color: wallpaperButtonArea.containsMouse ? Theme.onAccent : Theme.accentPrimary
anchors.verticalCenter: parent.verticalCenter
}
Text {
text: "Select Wallpaper"
font.pixelSize: 13
font.bold: true
color: wallpaperButtonArea.containsMouse ? Theme.onAccent : Theme.accentPrimary
anchors.verticalCenter: parent.verticalCenter
}
}
MouseArea {
id: wallpaperButtonArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
// Show the wallpaper selector
wallpaperSelector.show();
}
}
}
Rectangle {
width: 32
height: 32
radius: 16
color: closeButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
border.color: Theme.accentPrimary
border.width: 1
Text { Text {
anchors.centerIn: parent id: tabName
text: "close"
font.family: closeButtonArea.containsMouse ? "Material Symbols Rounded" : "Material Symbols Outlined" text: wallpaperSelector.visible ? "Select Wallpaper" : (activeTabIndex === 0 ? "General" : activeTabIndex === 1 ? "Bar" : activeTabIndex === 2 ? "Time & Weather" : activeTabIndex === 3 ? "Screen Recorder" : activeTabIndex === 4 ? "Network" : activeTabIndex === 5 ? "Display" : activeTabIndex === 6 ? "Wallpaper" : activeTabIndex === 7 ? "Misc" : activeTabIndex === 8 ? "About" : "General")
font.pixelSize: 18 font.pixelSize: 18 * Theme.uiScale
color: closeButtonArea.containsMouse ? Theme.onAccent : Theme.accentPrimary font.bold: true
color: Theme.textPrimary
Layout.fillWidth: true
} }
MouseArea { // Wallpaper Selection Button (only visible on Wallpaper tab)
id: closeButtonArea Rectangle {
width: 160 * Theme.uiScale
height: 32 * Theme.uiScale
radius: 16 * Theme.uiScale
color: wallpaperButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
border.color: Theme.accentPrimary
border.width: 1 * Theme.uiScale
visible: activeTabIndex === 6 // Wallpaper tab index
anchors.fill: parent Row {
hoverEnabled: true anchors.centerIn: parent
cursorShape: Qt.PointingHandCursor spacing: 6 * Theme.uiScale
onClicked: panelMain.dismiss()
}
} Text {
text: "image"
} font.family: wallpaperButtonArea.containsMouse ? "Material Symbols Rounded" : "Material Symbols Outlined"
font.pixelSize: 16 * Theme.uiScale
} color: wallpaperButtonArea.containsMouse ? Theme.onAccent : Theme.accentPrimary
anchors.verticalCenter: parent.verticalCenter
Rectangle { }
height: 1
color: Theme.outline
opacity: 0.3
anchors {
top: headerArea.bottom
left: parent.left
right: parent.right
margins: 16
}
}
Item {
id: settingsContainer
anchors {
top: headerArea.bottom
left: parent.left
right: parent.right
bottom: parent.bottom
margins: 16
topMargin: 32
}
// Simplified single loader approach
Loader {
id: settingsLoader
anchors.fill: parent
sourceComponent: generalSettings
}
// Wallpaper Selector Component
WallpaperSelector {
id: wallpaperSelector
anchors.fill: parent
}
}
}
Rectangle {
id: tabs
color: Theme.surface
width: parent.width * 0.25
height: settingsWindowRect.height
topLeftRadius: 20
bottomLeftRadius: 20
border.color: Theme.outline
border.width: 1
Column {
width: parent.width
spacing: 0
topPadding: 8
bottomPadding: 8
Repeater {
id: repeater
model: [{
"icon": "tune",
"text": "General"
}, {
"icon": "space_dashboard",
"text": "Bar"
}, {
"icon": "schedule",
"text": "Time & Weather"
}, {
"icon": "photo_camera",
"text": "Screen Recorder"
}, {
"icon": "wifi",
"text": "Network"
}, {
"icon": "monitor",
"text": "Display"
}, {
"icon": "wallpaper",
"text": "Wallpaper"
}, {
"icon": "settings_suggest",
"text": "Misc"
}, {
"icon": "info",
"text": "About"
}]
delegate: Rectangle {
width: tabs.width
height: 48
color: "transparent"
RowLayout {
anchors.fill: parent
spacing: 8
Rectangle {
id: activeIndicator
Layout.leftMargin: 8
Layout.preferredWidth: 3
Layout.preferredHeight: 24
Layout.alignment: Qt.AlignVCenter
radius: 2
color: Theme.accentPrimary
opacity: index === activeTabIndex ? 1 : 0
Behavior on opacity {
NumberAnimation {
duration: 200
}
Text {
text: "Select Wallpaper"
font.pixelSize: 13 * Theme.uiScale
font.bold: true
color: wallpaperButtonArea.containsMouse ? Theme.onAccent : Theme.accentPrimary
anchors.verticalCenter: parent.verticalCenter
} }
} }
Label { MouseArea {
id: icon id: wallpaperButtonArea
text: modelData.icon anchors.fill: parent
font.family: "Material Symbols Outlined" hoverEnabled: true
font.pixelSize: 24 cursorShape: Qt.PointingHandCursor
color: index === activeTabIndex ? Theme.accentPrimary : Theme.textPrimary onClicked: {
opacity: index === activeTabIndex ? 1 : 0.8 // Show the wallpaper selector
Layout.leftMargin: 20 wallpaperSelector.show();
Layout.preferredWidth: 24 }
Layout.preferredHeight: 24
Layout.alignment: Qt.AlignVCenter
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
} }
Label {
id: label
text: modelData.text
font.pixelSize: 16
color: index === activeTabIndex ? Theme.accentPrimary : (tabMouseArea.containsMouse ? Theme.accentPrimary : Theme.textSecondary)
font.weight: index === activeTabIndex ? Font.DemiBold : (tabMouseArea.containsMouse ? Font.DemiBold : Font.Normal)
Layout.fillWidth: true
Layout.preferredHeight: 24
Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
Layout.leftMargin: 4
Layout.rightMargin: 16
verticalAlignment: Text.AlignVCenter
}
}
MouseArea {
id: tabMouseArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
activeTabIndex = index;
loadComponentForTab(index);
}
} }
Rectangle { Rectangle {
width: parent.width width: 32 * Theme.uiScale
height: 1 height: 32 * Theme.uiScale
color: Theme.outline radius: 16 * Theme.uiScale
opacity: 0.6 color: closeButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
visible: index < (repeater.count - 1) border.color: Theme.accentPrimary
anchors.bottom: parent.bottom border.width: 1 * Theme.uiScale
Text {
anchors.centerIn: parent
text: "close"
font.family: closeButtonArea.containsMouse ? "Material Symbols Rounded" : "Material Symbols Outlined"
font.pixelSize: 18 * Theme.uiScale
color: closeButtonArea.containsMouse ? Theme.onAccent : Theme.accentPrimary
}
MouseArea {
id: closeButtonArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: panelMain.dismiss()
}
}
}
}
Rectangle {
height: 1 * Theme.uiScale
color: Theme.outline
opacity: 0.3
anchors {
top: headerArea.bottom
left: parent.left
right: parent.right
margins: 16
}
}
ColumnLayout {
id: settingsContainer
anchors {
top: headerArea.bottom
left: parent.left
right: parent.right
bottom: parent.bottom
topMargin: 32
}
// Simplified single loader approach
Loader {
id: settingsLoader
Layout.fillWidth: true
Layout.fillHeight: true
sourceComponent: generalSettings
active: true
}
// Wallpaper Selector Component
WallpaperSelector {
id: wallpaperSelector
anchors.fill: parent
}
}
}
Rectangle {
id: tabs
color: Theme.surface
width: parent.width * 0.25
height: settingsWindowRect.height
topLeftRadius: 20 * Theme.uiScale
bottomLeftRadius: 20 * Theme.uiScale
border.color: Theme.outline
border.width: 1 * Theme.uiScale
Column {
width: parent.width
spacing: 0 * Theme.uiScale
topPadding: 8 * Theme.uiScale
bottomPadding: 8 * Theme.uiScale
Repeater {
id: repeater
model: [{
"icon": "tune",
"text": "General"
}, {
"icon": "space_dashboard",
"text": "Bar"
}, {
"icon": "schedule",
"text": "Time & Weather"
}, {
"icon": "photo_camera",
"text": "Screen Recorder"
}, {
"icon": "wifi",
"text": "Network"
}, {
"icon": "monitor",
"text": "Display"
}, {
"icon": "wallpaper",
"text": "Wallpaper"
}, {
"icon": "settings_suggest",
"text": "Misc"
}, {
"icon": "info",
"text": "About"
}]
delegate: Rectangle {
width: tabs.width
height: 48 * Theme.uiScale
color: "transparent"
RowLayout {
anchors.fill: parent
spacing: 8 * Theme.uiScale
Rectangle {
id: activeIndicator
Layout.leftMargin: 8 * Theme.uiScale
Layout.preferredWidth: 3 * Theme.uiScale
Layout.preferredHeight: 24 * Theme.uiScale
Layout.alignment: Qt.AlignVCenter
radius: 2 * Theme.uiScale
color: Theme.accentPrimary
opacity: index === activeTabIndex ? 1 : 0
Behavior on opacity {
NumberAnimation {
duration: 200
}
}
}
Label {
id: icon
text: modelData.icon
font.family: "Material Symbols Outlined"
font.pixelSize: 24 * Theme.uiScale
color: index === activeTabIndex ? Theme.accentPrimary : Theme.textPrimary
opacity: index === activeTabIndex ? 1 : 0.8
Layout.leftMargin: 20 * Theme.uiScale
Layout.preferredWidth: 24 * Theme.uiScale
Layout.preferredHeight: 24 * Theme.uiScale
Layout.alignment: Qt.AlignVCenter
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
Label {
id: label
text: modelData.text
font.pixelSize: 16 * Theme.uiScale
color: index === activeTabIndex ? Theme.accentPrimary : (tabMouseArea.containsMouse ? Theme.accentPrimary : Theme.textSecondary)
font.weight: index === activeTabIndex ? Font.DemiBold : (tabMouseArea.containsMouse ? Font.DemiBold : Font.Normal)
Layout.fillWidth: true
Layout.preferredHeight: 24 * Theme.uiScale
Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
Layout.leftMargin: 4 * Theme.uiScale
Layout.rightMargin: 16 * Theme.uiScale
verticalAlignment: Text.AlignVCenter
}
}
MouseArea {
id: tabMouseArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
activeTabIndex = index;
loadComponentForTab(index);
}
}
Rectangle {
width: parent.width
height: 1 * Theme.uiScale
color: Theme.outline
opacity: 0.6
visible: index < (repeater.count - 1)
anchors.bottom: parent.bottom
}
} }
} }
@ -487,5 +492,3 @@ PanelWithOverlay {
} }
} }
}

36
Widgets/SettingsWindow/Tabs/About.qml
View file

@ -147,14 +147,18 @@ Item {
} }
Item { ScrollView {
anchors.fill: parent anchors.fill: parent
padding: 0
rightPadding: 12
clip: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: ScrollBar.AsNeeded
ColumnLayout { ColumnLayout {
id: mainLayout id: mainLayout
anchors.left: parent.left width: parent.availableWidth
anchors.right: parent.right
anchors.top: parent.top anchors.top: parent.top
spacing: 8 spacing: 8
@ -165,7 +169,7 @@ Item {
Text { Text {
text: "Noctalia" text: "Noctalia"
font.pixelSize: 24 font.pixelSize: 24 * Theme.uiScale
font.bold: true font.bold: true
color: Theme.textPrimary color: Theme.textPrimary
Layout.alignment: Qt.AlignCenter Layout.alignment: Qt.AlignCenter
@ -179,28 +183,28 @@ Item {
Text { Text {
text: "Latest Version:" text: "Latest Version:"
font.pixelSize: 16 font.pixelSize: 16 * Theme.uiScale
color: Theme.textSecondary color: Theme.textSecondary
Layout.alignment: Qt.AlignRight Layout.alignment: Qt.AlignRight
} }
Text { Text {
text: root.latestVersion text: root.latestVersion
font.pixelSize: 16 font.pixelSize: 16 * Theme.uiScale
color: Theme.textPrimary color: Theme.textPrimary
font.bold: true font.bold: true
} }
Text { Text {
text: "Installed Version:" text: "Installed Version:"
font.pixelSize: 16 font.pixelSize: 16 * Theme.uiScale
color: Theme.textSecondary color: Theme.textSecondary
Layout.alignment: Qt.AlignRight Layout.alignment: Qt.AlignRight
} }
Text { Text {
text: root.currentVersion text: root.currentVersion
font.pixelSize: 16 font.pixelSize: 16 * Theme.uiScale
color: Theme.textPrimary color: Theme.textPrimary
font.bold: true font.bold: true
} }
@ -242,7 +246,7 @@ Item {
Text { Text {
text: "system_update" text: "system_update"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 18 font.pixelSize: 18 * Theme.uiScale
color: updateArea.containsMouse ? Theme.backgroundPrimary : Theme.accentPrimary color: updateArea.containsMouse ? Theme.backgroundPrimary : Theme.accentPrimary
} }
@ -250,7 +254,7 @@ Item {
id: updateText id: updateText
text: "Download latest release" text: "Download latest release"
font.pixelSize: 14 font.pixelSize: 14 * Theme.uiScale
color: updateArea.containsMouse ? Theme.backgroundPrimary : Theme.accentPrimary color: updateArea.containsMouse ? Theme.backgroundPrimary : Theme.accentPrimary
} }
@ -271,7 +275,7 @@ Item {
Text { Text {
text: "Description something something <.< I hate writing text..." text: "Description something something <.< I hate writing text..."
font.pixelSize: 14 font.pixelSize: 14 * Theme.uiScale
color: Theme.textSecondary color: Theme.textSecondary
Layout.alignment: Qt.AlignCenter Layout.alignment: Qt.AlignCenter
Layout.topMargin: 24 Layout.topMargin: 24
@ -298,14 +302,14 @@ Item {
Text { Text {
text: "Contributors" text: "Contributors"
font.pixelSize: 18 font.pixelSize: 18 * Theme.uiScale
font.bold: true font.bold: true
color: Theme.textPrimary color: Theme.textPrimary
} }
Text { Text {
text: "(" + root.contributors.length + ")" text: "(" + root.contributors.length + ")"
font.pixelSize: 14 font.pixelSize: 14 * Theme.uiScale
color: Theme.textSecondary color: Theme.textSecondary
} }
@ -384,7 +388,7 @@ Item {
anchors.centerIn: parent anchors.centerIn: parent
text: "person" text: "person"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 24 font.pixelSize: 24 * Theme.uiScale
color: contributorArea.containsMouse ? Theme.backgroundPrimary : Theme.textPrimary color: contributorArea.containsMouse ? Theme.backgroundPrimary : Theme.textPrimary
visible: !avatarImage.source || avatarImage.status !== Image.Ready visible: !avatarImage.source || avatarImage.status !== Image.Ready
} }
@ -398,7 +402,7 @@ Item {
Text { Text {
text: modelData.login || "Unknown" text: modelData.login || "Unknown"
font.pixelSize: 13 font.pixelSize: 13 * Theme.uiScale
color: contributorArea.containsMouse ? Theme.backgroundPrimary : Theme.textPrimary color: contributorArea.containsMouse ? Theme.backgroundPrimary : Theme.textPrimary
elide: Text.ElideRight elide: Text.ElideRight
Layout.fillWidth: true Layout.fillWidth: true
@ -406,7 +410,7 @@ Item {
Text { Text {
text: (modelData.contributions || 0) + " commits" text: (modelData.contributions || 0) + " commits"
font.pixelSize: 11 font.pixelSize: 11 * Theme.uiScale
color: contributorArea.containsMouse ? Theme.backgroundPrimary : Theme.textSecondary color: contributorArea.containsMouse ? Theme.backgroundPrimary : Theme.textSecondary
} }

746
Widgets/SettingsWindow/Tabs/Bar.qml
View file

@ -4,377 +4,387 @@ import QtQuick.Layouts
import qs.Settings import qs.Settings
import qs.Components import qs.Components
ColumnLayout { ScrollView {
id: root
spacing: 0
anchors.fill: parent anchors.fill: parent
anchors.margins: 0 padding: 0
rightPadding: 12
Item { clip: true
Layout.fillWidth: true ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
Layout.preferredHeight: 0 ScrollBar.vertical.policy: ScrollBar.AsNeeded
}
ColumnLayout { ColumnLayout {
spacing: 4 id: root
Layout.fillWidth: true width: parent.availableWidth
spacing: 0
Text {
text: "Elements"
font.pixelSize: 18
font.bold: true
color: Theme.textPrimary
Layout.bottomMargin: 8
}
ColumnLayout {
spacing: 8
Layout.fillWidth: true
RowLayout {
spacing: 8
Layout.fillWidth: true
ColumnLayout {
spacing: 4
Layout.fillWidth: true
Text {
text: "Show Active Window Icon"
font.pixelSize: 13
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Display the icon of the currently focused window in the bar"
font.pixelSize: 12
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
}
}
Rectangle {
id: activeWindowIconSwitch
width: 52
height: 32
radius: 16
color: Settings.settings.showActiveWindowIcon ? Theme.accentPrimary : Theme.surfaceVariant
border.color: Settings.settings.showActiveWindowIcon ? Theme.accentPrimary : Theme.outline
border.width: 2
Rectangle {
id: activeWindowIconThumb
width: 28
height: 28
radius: 14
color: Theme.surface
border.color: Theme.outline
border.width: 1
y: 2
x: Settings.settings.showActiveWindowIcon ? activeWindowIconSwitch.width - width - 2 : 2
Behavior on x {
NumberAnimation {
duration: 200
easing.type: Easing.OutCubic
}
}
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
Settings.settings.showActiveWindowIcon = !Settings.settings.showActiveWindowIcon;
}
}
}
}
}
ColumnLayout {
spacing: 8
Layout.fillWidth: true
Layout.topMargin: 8
RowLayout {
spacing: 8
Layout.fillWidth: true
ColumnLayout {
spacing: 4
Layout.fillWidth: true
Text {
text: "Show Active Window"
font.pixelSize: 13
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Display the title of the currently focused window below the bar"
font.pixelSize: 12
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
}
}
Rectangle {
id: activeWindowSwitch
width: 52
height: 32
radius: 16
color: Settings.settings.showActiveWindow ? Theme.accentPrimary : Theme.surfaceVariant
border.color: Settings.settings.showActiveWindow ? Theme.accentPrimary : Theme.outline
border.width: 2
Rectangle {
id: activeWindowThumb
width: 28
height: 28
radius: 14
color: Theme.surface
border.color: Theme.outline
border.width: 1
y: 2
x: Settings.settings.showActiveWindow ? activeWindowSwitch.width - width - 2 : 2
Behavior on x {
NumberAnimation {
duration: 200
easing.type: Easing.OutCubic
}
}
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
Settings.settings.showActiveWindow = !Settings.settings.showActiveWindow;
}
}
}
}
}
ColumnLayout {
spacing: 8
Layout.fillWidth: true
Layout.topMargin: 8
RowLayout {
spacing: 8
Layout.fillWidth: true
ColumnLayout {
spacing: 4
Layout.fillWidth: true
Text {
text: "Show System Info"
font.pixelSize: 13
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Display system information (CPU, RAM, etc.) in the bar"
font.pixelSize: 12
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
}
}
Rectangle {
id: systemInfoSwitch
width: 52
height: 32
radius: 16
color: Settings.settings.showSystemInfoInBar ? Theme.accentPrimary : Theme.surfaceVariant
border.color: Settings.settings.showSystemInfoInBar ? Theme.accentPrimary : Theme.outline
border.width: 2
Rectangle {
id: systemInfoThumb
width: 28
height: 28
radius: 14
color: Theme.surface
border.color: Theme.outline
border.width: 1
y: 2
x: Settings.settings.showSystemInfoInBar ? systemInfoSwitch.width - width - 2 : 2
Behavior on x {
NumberAnimation {
duration: 200
easing.type: Easing.OutCubic
}
}
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
Settings.settings.showSystemInfoInBar = !Settings.settings.showSystemInfoInBar;
}
}
}
}
}
ColumnLayout {
spacing: 8
Layout.fillWidth: true
Layout.topMargin: 8
RowLayout {
spacing: 8
Layout.fillWidth: true
ColumnLayout {
spacing: 4
Layout.fillWidth: true
Text {
text: "Show Taskbar"
font.pixelSize: 13
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Display a taskbar showing currently open windows"
font.pixelSize: 12
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
}
}
Rectangle {
id: taskbarSwitch
width: 52
height: 32
radius: 16
color: Settings.settings.showTaskbar ? Theme.accentPrimary : Theme.surfaceVariant
border.color: Settings.settings.showTaskbar ? Theme.accentPrimary : Theme.outline
border.width: 2
Rectangle {
id: taskbarThumb
width: 28
height: 28
radius: 14
color: Theme.surface
border.color: Theme.outline
border.width: 1
y: 2
x: Settings.settings.showTaskbar ? taskbarSwitch.width - width - 2 : 2
Behavior on x {
NumberAnimation {
duration: 200
easing.type: Easing.OutCubic
}
}
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
Settings.settings.showTaskbar = !Settings.settings.showTaskbar;
}
}
}
}
}
ColumnLayout {
spacing: 8
Layout.fillWidth: true
Layout.topMargin: 8
RowLayout {
spacing: 8
Layout.fillWidth: true
ColumnLayout {
spacing: 4
Layout.fillWidth: true
Text {
text: "Show Media"
font.pixelSize: 13
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Display media controls and information in the bar"
font.pixelSize: 12
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
}
}
Rectangle {
id: mediaSwitch
width: 52
height: 32
radius: 16
color: Settings.settings.showMediaInBar ? Theme.accentPrimary : Theme.surfaceVariant
border.color: Settings.settings.showMediaInBar ? Theme.accentPrimary : Theme.outline
border.width: 2
Rectangle {
id: mediaThumb
width: 28
height: 28
radius: 14
color: Theme.surface
border.color: Theme.outline
border.width: 1
y: 2
x: Settings.settings.showMediaInBar ? mediaSwitch.width - width - 2 : 2
Behavior on x {
NumberAnimation {
duration: 200
easing.type: Easing.OutCubic
}
}
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
Settings.settings.showMediaInBar = !Settings.settings.showMediaInBar;
}
}
}
}
}
}
Item {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
Item {
Layout.fillWidth: true
Layout.preferredHeight: 0
}
ColumnLayout {
spacing: 4
Layout.fillWidth: true
Text {
text: "Elements"
font.pixelSize: 18 * Theme.uiScale
font.bold: true
color: Theme.textPrimary
Layout.bottomMargin: 8
}
ColumnLayout {
spacing: 8
Layout.fillWidth: true
RowLayout {
spacing: 8
Layout.fillWidth: true
ColumnLayout {
spacing: 4
Layout.fillWidth: true
Text {
text: "Show Active Window Icon"
font.pixelSize: 13 * Theme.uiScale
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Display the icon of the currently focused window in the bar"
font.pixelSize: 12 * Theme.uiScale
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
}
}
Rectangle {
id: activeWindowIconSwitch
width: 52
height: 32
radius: 16
color: Settings.settings.showActiveWindowIcon ? Theme.accentPrimary : Theme.surfaceVariant
border.color: Settings.settings.showActiveWindowIcon ? Theme.accentPrimary : Theme.outline
border.width: 2
Rectangle {
id: activeWindowIconThumb
width: 28
height: 28
radius: 14
color: Theme.surface
border.color: Theme.outline
border.width: 1
y: 2
x: Settings.settings.showActiveWindowIcon ? activeWindowIconSwitch.width - width - 2 : 2
Behavior on x {
NumberAnimation {
duration: 200
easing.type: Easing.OutCubic
}
}
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
Settings.settings.showActiveWindowIcon = !Settings.settings.showActiveWindowIcon;
}
}
}
}
}
ColumnLayout {
spacing: 8
Layout.fillWidth: true
Layout.topMargin: 8
RowLayout {
spacing: 8
Layout.fillWidth: true
ColumnLayout {
spacing: 4
Layout.fillWidth: true
Text {
text: "Show Active Window"
font.pixelSize: 13 * Theme.uiScale
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Display the title of the currently focused window below the bar"
font.pixelSize: 12 * Theme.uiScale
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
}
}
Rectangle {
id: activeWindowSwitch
width: 52
height: 32
radius: 16
color: Settings.settings.showActiveWindow ? Theme.accentPrimary : Theme.surfaceVariant
border.color: Settings.settings.showActiveWindow ? Theme.accentPrimary : Theme.outline
border.width: 2
Rectangle {
id: activeWindowThumb
width: 28
height: 28
radius: 14
color: Theme.surface
border.color: Theme.outline
border.width: 1
y: 2
x: Settings.settings.showActiveWindow ? activeWindowSwitch.width - width - 2 : 2
Behavior on x {
NumberAnimation {
duration: 200
easing.type: Easing.OutCubic
}
}
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
Settings.settings.showActiveWindow = !Settings.settings.showActiveWindow;
}
}
}
}
}
ColumnLayout {
spacing: 8
Layout.fillWidth: true
Layout.topMargin: 8
RowLayout {
spacing: 8
Layout.fillWidth: true
ColumnLayout {
spacing: 4
Layout.fillWidth: true
Text {
text: "Show System Info"
font.pixelSize: 13 * Theme.uiScale
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Display system information (CPU, RAM, etc.) in the bar"
font.pixelSize: 12 * Theme.uiScale
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
}
}
Rectangle {
id: systemInfoSwitch
width: 52
height: 32
radius: 16
color: Settings.settings.showSystemInfoInBar ? Theme.accentPrimary : Theme.surfaceVariant
border.color: Settings.settings.showSystemInfoInBar ? Theme.accentPrimary : Theme.outline
border.width: 2
Rectangle {
id: systemInfoThumb
width: 28
height: 28
radius: 14
color: Theme.surface
border.color: Theme.outline
border.width: 1
y: 2
x: Settings.settings.showSystemInfoInBar ? systemInfoSwitch.width - width - 2 : 2
Behavior on x {
NumberAnimation {
duration: 200
easing.type: Easing.OutCubic
}
}
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
Settings.settings.showSystemInfoInBar = !Settings.settings.showSystemInfoInBar;
}
}
}
}
}
ColumnLayout {
spacing: 8
Layout.fillWidth: true
Layout.topMargin: 8
RowLayout {
spacing: 8
Layout.fillWidth: true
ColumnLayout {
spacing: 4
Layout.fillWidth: true
Text {
text: "Show Taskbar"
font.pixelSize: 13 * Theme.uiScale
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Display a taskbar showing currently open windows"
font.pixelSize: 12 * Theme.uiScale
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
}
}
Rectangle {
id: taskbarSwitch
width: 52
height: 32
radius: 16
color: Settings.settings.showTaskbar ? Theme.accentPrimary : Theme.surfaceVariant
border.color: Settings.settings.showTaskbar ? Theme.accentPrimary : Theme.outline
border.width: 2
Rectangle {
id: taskbarThumb
width: 28
height: 28
radius: 14
color: Theme.surface
border.color: Theme.outline
border.width: 1
y: 2
x: Settings.settings.showTaskbar ? taskbarSwitch.width - width - 2 : 2
Behavior on x {
NumberAnimation {
duration: 200
easing.type: Easing.OutCubic
}
}
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
Settings.settings.showTaskbar = !Settings.settings.showTaskbar;
}
}
}
}
}
ColumnLayout {
spacing: 8
Layout.fillWidth: true
Layout.topMargin: 8
RowLayout {
spacing: 8
Layout.fillWidth: true
ColumnLayout {
spacing: 4
Layout.fillWidth: true
Text {
text: "Show Media"
font.pixelSize: 13 * Theme.uiScale
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Display media controls and information in the bar"
font.pixelSize: 12 * Theme.uiScale
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
}
}
Rectangle {
id: mediaSwitch
width: 52
height: 32
radius: 16
color: Settings.settings.showMediaInBar ? Theme.accentPrimary : Theme.surfaceVariant
border.color: Settings.settings.showMediaInBar ? Theme.accentPrimary : Theme.outline
border.width: 2
Rectangle {
id: mediaThumb
width: 28
height: 28
radius: 14
color: Theme.surface
border.color: Theme.outline
border.width: 1
y: 2
x: Settings.settings.showMediaInBar ? mediaSwitch.width - width - 2 : 2
Behavior on x {
NumberAnimation {
duration: 200
easing.type: Easing.OutCubic
}
}
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
Settings.settings.showMediaInBar = !Settings.settings.showMediaInBar;
}
}
}
}
}
}
Item {
Layout.fillWidth: true
Layout.fillHeight: true
}
} }
} }

18
Widgets/SettingsWindow/Tabs/Components/UnitSelector.qml
View file

@ -6,21 +6,21 @@ import qs.Components
Rectangle { Rectangle {
id: root id: root
width: 64 width: 64 * Theme.uiScale
height: 32 height: 32 * Theme.uiScale
radius: 16 radius: 16 * Theme.uiScale
color: Theme.surfaceVariant color: Theme.surfaceVariant
border.color: Theme.outline border.color: Theme.outline
border.width: 1 border.width: 1 * Theme.uiScale
property bool useFahrenheit: Settings.settings.useFahrenheit property bool useFahrenheit: Settings.settings.useFahrenheit
Rectangle { Rectangle {
id: slider id: slider
width: parent.width / 2 - 4 width: parent.width / 2 - 4 * Theme.uiScale
height: parent.height - 4 height: parent.height - 4 * Theme.uiScale
radius: 14 radius: 14 * Theme.uiScale
color: Theme.accentPrimary color: Theme.accentPrimary
x: 2 + (useFahrenheit ? parent.width / 2 : 0) x: 2 + (useFahrenheit ? parent.width / 2 : 0)
y: 2 y: 2
@ -46,7 +46,7 @@ Rectangle {
Text { Text {
anchors.centerIn: parent anchors.centerIn: parent
text: "°C" text: "°C"
font.pixelSize: 13 font.pixelSize: 13 * Theme.uiScale
font.bold: !useFahrenheit font.bold: !useFahrenheit
color: !useFahrenheit ? Theme.onAccent : Theme.textPrimary color: !useFahrenheit ? Theme.onAccent : Theme.textPrimary
@ -74,7 +74,7 @@ Rectangle {
Text { Text {
anchors.centerIn: parent anchors.centerIn: parent
text: "°F" text: "°F"
font.pixelSize: 13 font.pixelSize: 13 * Theme.uiScale
font.bold: useFahrenheit font.bold: useFahrenheit
color: useFahrenheit ? Theme.onAccent : Theme.textPrimary color: useFahrenheit ? Theme.onAccent : Theme.textPrimary

16
Widgets/SettingsWindow/Tabs/Components/WallpaperSelector.qml
View file

@ -58,7 +58,7 @@ Rectangle {
id: wallpaperGrid id: wallpaperGrid
anchors.fill: parent anchors.fill: parent
cellWidth: Math.max(120, (parent.width / 3) - 12) cellWidth: Math.max(120 * Theme.uiScale, (parent.width / 3) - 12 * Theme.uiScale)
cellHeight: cellWidth * 0.6 cellHeight: cellWidth * 0.6
model: WallpaperManager.wallpaperList model: WallpaperManager.wallpaperList
cacheBuffer: 64 cacheBuffer: 64
@ -68,8 +68,8 @@ Rectangle {
bottomMargin: 8 bottomMargin: 8
delegate: Item { delegate: Item {
width: wallpaperGrid.cellWidth - 8 width: wallpaperGrid.cellWidth - 8 * Theme.uiScale
height: wallpaperGrid.cellHeight - 8 height: wallpaperGrid.cellHeight - 8 * Theme.uiScale
Rectangle { Rectangle {
id: wallpaperItem id: wallpaperItem
@ -77,9 +77,9 @@ Rectangle {
anchors.fill: parent anchors.fill: parent
anchors.margins: 3 anchors.margins: 3
color: Theme.surface color: Theme.surface
radius: 12 radius: 12 * Theme.uiScale
border.color: Settings.settings.currentWallpaper === modelData ? Theme.accentPrimary : Theme.outline border.color: Settings.settings.currentWallpaper === modelData ? Theme.accentPrimary : Theme.outline
border.width: 2 border.width: 2 * Theme.uiScale
Image { Image {
id: wallpaperImage id: wallpaperImage
@ -92,8 +92,8 @@ Rectangle {
cache: true cache: true
smooth: true smooth: true
mipmap: true mipmap: true
sourceSize.width: Math.min(width, 480) sourceSize.width: Math.min(width, 480 * Theme.uiScale)
sourceSize.height: Math.min(height, 270) sourceSize.height: Math.min(height, 270 * Theme.uiScale)
opacity: (wallpaperImage.status == Image.Ready) ? 1 : 0 opacity: (wallpaperImage.status == Image.Ready) ? 1 : 0
// Apply circular mask for rounded corners // Apply circular mask for rounded corners
layer.enabled: true layer.enabled: true
@ -123,7 +123,7 @@ Rectangle {
Rectangle { Rectangle {
width: wallpaperImage.width width: wallpaperImage.width
height: wallpaperImage.height height: wallpaperImage.height
radius: 12 radius: 12 * Theme.uiScale
} }
} }

588
Widgets/SettingsWindow/Tabs/Display.qml
View file

@ -5,361 +5,371 @@ import Quickshell
import qs.Settings import qs.Settings
import qs.Components import qs.Components
ColumnLayout { ScrollView {
id: root
spacing: 0
anchors.fill: parent anchors.fill: parent
anchors.margins: 0 padding: 0
rightPadding: 12
// Get list of available monitors/screens clip: true
property var monitors: Quickshell.screens || [] 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 { ColumnLayout {
spacing: 12 id: root
Layout.fillWidth: true width: parent.availableWidth
spacing: 0
anchors.top: parent.top
anchors.margins: 0
Text { // Get list of available monitors/screens
text: "Monitor Selection" property var monitors: Quickshell.screens || []
font.pixelSize: 18
font.bold: true // Sorted monitors by name
color: Theme.textPrimary property var sortedMonitors: {
Layout.bottomMargin: 8 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 { ColumnLayout {
spacing: 8 spacing: 12
Layout.fillWidth: true Layout.fillWidth: true
RowLayout { Text {
spacing: 8 text: "Monitor Selection"
Layout.fillWidth: true font.pixelSize: 18 * Theme.uiScale
font.bold: true
ColumnLayout { color: Theme.textPrimary
spacing: 4 Layout.bottomMargin: 8
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
}
}
} }
Flow { ColumnLayout {
Layout.fillWidth: true
spacing: 8 spacing: 8
Layout.fillWidth: true
Repeater { RowLayout {
model: root.sortedMonitors spacing: 8
delegate: Rectangle { Layout.fillWidth: true
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 { ColumnLayout {
id: checkboxContent spacing: 4
anchors.centerIn: parent Layout.fillWidth: true
spacing: 6
Text { Text {
text: barCheckbox.isChecked ? "check" : "" text: "Bar Monitors"
font.family: "Material Symbols Outlined" font.pixelSize: 13 * Theme.uiScale
font.pixelSize: 14 font.bold: true
color: barCheckbox.isChecked ? Theme.onAccent : Theme.textSecondary color: Theme.textPrimary
visible: barCheckbox.isChecked
}
Text {
text: modelData.name || "Unknown"
font.pixelSize: 12
color: barCheckbox.isChecked ? Theme.onAccent : Theme.textPrimary
}
} }
MouseArea { Text {
anchors.fill: parent text: "Select which monitors to display the top panel/bar on"
hoverEnabled: true font.pixelSize: 12 * Theme.uiScale
cursorShape: Qt.PointingHandCursor color: Theme.textSecondary
onClicked: { wrapMode: Text.WordWrap
isChecked = !isChecked; Layout.fillWidth: true
}
// Update settings array when checkbox is toggled }
}
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 || []; let monitors = Settings.settings.barMonitors || [];
monitors = [...monitors]; // Create copy to trigger reactivity isChecked = monitors.includes(modelData.name);
}
if (isChecked) {
if (!monitors.includes(modelData.name)) { width: checkboxContent.implicitWidth + 16
monitors.push(modelData.name); height: 32
} radius: 16
} else { color: isChecked ? Theme.accentPrimary : Theme.surfaceVariant
monitors = monitors.filter(name => name !== modelData.name); 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 { ColumnLayout {
spacing: 8
Layout.fillWidth: true
Layout.topMargin: 8
RowLayout {
spacing: 8 spacing: 8
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: 8
ColumnLayout { RowLayout {
spacing: 4 spacing: 8
Layout.fillWidth: true Layout.fillWidth: true
Text { ColumnLayout {
text: "Dock Monitors" spacing: 4
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
Layout.fillWidth: true 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 { Flow {
Layout.fillWidth: true Layout.fillWidth: true
spacing: 8 spacing: 8
Repeater { Repeater {
model: root.sortedMonitors model: root.sortedMonitors
delegate: Rectangle { delegate: Rectangle {
id: dockCheckbox id: dockCheckbox
property bool isChecked: false property bool isChecked: false
Component.onCompleted: { Component.onCompleted: {
// Initialize with current settings // 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
let monitors = Settings.settings.dockMonitors || []; let monitors = Settings.settings.dockMonitors || [];
monitors = [...monitors]; // Copy array isChecked = monitors.includes(modelData.name);
}
if (isChecked) {
// Add to array if not already there width: checkboxContent.implicitWidth + 16
if (!monitors.includes(modelData.name)) { height: 32
monitors.push(modelData.name); radius: 16
} color: isChecked ? Theme.accentPrimary : Theme.surfaceVariant
} else { border.color: isChecked ? Theme.accentPrimary : Theme.outline
// Remove from array border.width: 1
monitors = monitors.filter(name => name !== modelData.name);
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 { ColumnLayout {
spacing: 8
Layout.fillWidth: true
Layout.topMargin: 8
RowLayout {
spacing: 8 spacing: 8
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: 8
ColumnLayout { RowLayout {
spacing: 4 spacing: 8
Layout.fillWidth: true Layout.fillWidth: true
Text { ColumnLayout {
text: "Notification Monitors" spacing: 4
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
Layout.fillWidth: true 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 { Flow {
Layout.fillWidth: true Layout.fillWidth: true
spacing: 8 spacing: 8
Repeater { Repeater {
model: root.sortedMonitors model: root.sortedMonitors
delegate: Rectangle { delegate: Rectangle {
id: notificationCheckbox id: notificationCheckbox
property bool isChecked: false property bool isChecked: false
Component.onCompleted: { Component.onCompleted: {
// Initialize with current settings // 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
let monitors = Settings.settings.notificationMonitors || []; let monitors = Settings.settings.notificationMonitors || [];
monitors = [...monitors]; // Copy array isChecked = monitors.includes(modelData.name);
}
if (isChecked) {
// Add to array if not already there width: checkboxContent.implicitWidth + 16
if (!monitors.includes(modelData.name)) { height: 32
monitors.push(modelData.name); radius: 16
} color: isChecked ? Theme.accentPrimary : Theme.surfaceVariant
} else { border.color: isChecked ? Theme.accentPrimary : Theme.outline
// Remove from array border.width: 1
monitors = monitors.filter(name => name !== modelData.name);
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 { Item {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
}
} }
} }

568
Widgets/SettingsWindow/Tabs/General.qml
View file

@ -4,105 +4,215 @@ import QtQuick.Layouts
import qs.Components import qs.Components
import qs.Settings import qs.Settings
ColumnLayout { ScrollView {
id: root
spacing: 0
anchors.fill: parent anchors.fill: parent
anchors.margins: 0 padding: 0
rightPadding: 12
Item { clip: true
Layout.fillWidth: true ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
Layout.preferredHeight: 0 ScrollBar.vertical.policy: ScrollBar.AsNeeded
}
ColumnLayout { ColumnLayout {
spacing: 4 id: root
Layout.fillWidth: true width: parent.availableWidth
spacing: 0 * Theme.uiScale
anchors.top: parent.top
anchors.margins: 0 * Theme.uiScale
Text { Item {
text: "Profile" Layout.fillWidth: true
font.pixelSize: 18 Layout.preferredHeight: 0
font.bold: true
color: Theme.textPrimary
Layout.bottomMargin: 8
} }
ColumnLayout { ColumnLayout {
spacing: 2 spacing: 4 * Theme.uiScale
Layout.fillWidth: true Layout.fillWidth: true
Text { Text {
text: "Profile Image" text: "Profile"
font.pixelSize: 13 font.pixelSize: 18 * Theme.uiScale
font.bold: true font.bold: true
color: Theme.textPrimary color: Theme.textPrimary
Layout.bottomMargin: 8
} }
Text { ColumnLayout {
text: "Your profile picture displayed in various places throughout the shell" spacing: 2 * Theme.uiScale
font.pixelSize: 12
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
Layout.bottomMargin: 4
}
RowLayout {
spacing: 8
Layout.fillWidth: true Layout.fillWidth: true
Rectangle { Text {
width: 48 text: "Profile Image"
height: 48 font.pixelSize: 13 * Theme.uiScale
radius: 24 font.bold: true
color: Theme.textPrimary
}
Text {
text: "Your profile picture displayed in various places throughout the shell"
font.pixelSize: 12 * Theme.uiScale
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
Layout.bottomMargin: 4
}
RowLayout {
spacing: 8 * Theme.uiScale
Layout.fillWidth: true
Rectangle { Rectangle {
anchors.fill: parent width: 48 * Theme.uiScale
color: "transparent" height: 48 * Theme.uiScale
radius: 24 radius: 24 * Theme.uiScale
border.color: profileImageInput.activeFocus ? Theme.accentPrimary : Theme.outline
border.width: 2 Rectangle {
z: 2 anchors.fill: parent
color: "transparent"
radius: 24 * Theme.uiScale
border.color: profileImageInput.activeFocus ? Theme.accentPrimary : Theme.outline
border.width: 2 * Theme.uiScale
z: 2
}
Avatar {
}
} }
Avatar { Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 40 * Theme.uiScale
radius: 16 * Theme.uiScale
color: Theme.surfaceVariant
border.color: profileImageInput.activeFocus ? Theme.accentPrimary : Theme.outline
border.width: 1 * Theme.uiScale
TextInput {
id: profileImageInput
anchors.fill: parent
anchors.leftMargin: 12 * Theme.uiScale
anchors.rightMargin: 12 * Theme.uiScale
anchors.topMargin: 6 * Theme.uiScale
anchors.bottomMargin: 6 * Theme.uiScale
text: Settings.settings.profileImage
font.pixelSize: 13 * Theme.uiScale
color: Theme.textPrimary
verticalAlignment: TextInput.AlignVCenter
clip: true
selectByMouse: true
activeFocusOnTab: true
inputMethodHints: Qt.ImhUrlCharactersOnly
onTextChanged: {
Settings.settings.profileImage = text;
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.IBeamCursor
onClicked: profileImageInput.forceActiveFocus()
}
}
} }
} }
Rectangle { }
}
Rectangle {
Layout.fillWidth: true
Layout.topMargin: 26 * Theme.uiScale
Layout.bottomMargin: 18 * Theme.uiScale
height: 1 * Theme.uiScale
color: Theme.outline
opacity: 0.3
}
ColumnLayout {
spacing: 4 * Theme.uiScale
Layout.fillWidth: true
Text {
text: "User Interface"
font.pixelSize: 18 * Theme.uiScale
font.bold: true
color: Theme.textPrimary
Layout.bottomMargin: 8
}
ColumnLayout {
spacing: 4 * Theme.uiScale
Layout.fillWidth: true
RowLayout {
spacing: 8 * Theme.uiScale
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 40
radius: 16
color: Theme.surfaceVariant
border.color: profileImageInput.activeFocus ? Theme.accentPrimary : Theme.outline
border.width: 1
TextInput { ColumnLayout {
id: profileImageInput spacing: 4 * Theme.uiScale
Layout.fillWidth: true
Text {
text: "Show Corners"
font.pixelSize: 13 * Theme.uiScale
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Display rounded corners"
font.pixelSize: 12 * Theme.uiScale
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
}
}
Rectangle {
id: cornersSwitch
width: 52 * Theme.uiScale
height: 32 * Theme.uiScale
radius: 16 * Theme.uiScale
color: Settings.settings.showCorners ? Theme.accentPrimary : Theme.surfaceVariant
border.color: Settings.settings.showCorners ? Theme.accentPrimary : Theme.outline
border.width: 2 * Theme.uiScale
Rectangle {
id: cornersThumb
width: 28 * Theme.uiScale
height: 28 * Theme.uiScale
radius: 14 * Theme.uiScale
color: Theme.surface
border.color: Theme.outline
border.width: 1 * Theme.uiScale
y: 2
x: Settings.settings.showCorners ? cornersSwitch.width - width - 2 : 2
Behavior on x {
NumberAnimation {
duration: 200
easing.type: Easing.OutCubic
}
}
anchors.fill: parent
anchors.leftMargin: 12
anchors.rightMargin: 12
anchors.topMargin: 6
anchors.bottomMargin: 6
text: Settings.settings.profileImage
font.pixelSize: 13
color: Theme.textPrimary
verticalAlignment: TextInput.AlignVCenter
clip: true
selectByMouse: true
activeFocusOnTab: true
inputMethodHints: Qt.ImhUrlCharactersOnly
onTextChanged: {
Settings.settings.profileImage = text;
} }
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
cursorShape: Qt.IBeamCursor cursorShape: Qt.PointingHandCursor
onClicked: profileImageInput.forceActiveFocus() onClicked: {
Settings.settings.showCorners = !Settings.settings.showCorners;
}
} }
} }
@ -111,252 +221,154 @@ ColumnLayout {
} }
} ColumnLayout {
spacing: 8 * Theme.uiScale
}
Rectangle {
Layout.fillWidth: true
Layout.topMargin: 26
Layout.bottomMargin: 18
height: 1
color: Theme.outline
opacity: 0.3
}
ColumnLayout {
spacing: 4
Layout.fillWidth: true
Text {
text: "User Interface"
font.pixelSize: 18
font.bold: true
color: Theme.textPrimary
Layout.bottomMargin: 8
}
ColumnLayout {
spacing: 4
Layout.fillWidth: true
RowLayout {
spacing: 8
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: 4 * Theme.uiScale
ColumnLayout { RowLayout {
spacing: 4 spacing: 8 * Theme.uiScale
Layout.fillWidth: true Layout.fillWidth: true
Text { ColumnLayout {
text: "Show Corners" spacing: 4 * Theme.uiScale
font.pixelSize: 13
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Display rounded corners"
font.pixelSize: 12
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true Layout.fillWidth: true
Text {
text: "Show Dock"
font.pixelSize: 13 * Theme.uiScale
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Display a dock at the bottom of the screen for quick access to applications"
font.pixelSize: 12 * Theme.uiScale
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
}
} }
}
Rectangle {
id: cornersSwitch
width: 52
height: 32
radius: 16
color: Settings.settings.showCorners ? Theme.accentPrimary : Theme.surfaceVariant
border.color: Settings.settings.showCorners ? Theme.accentPrimary : Theme.outline
border.width: 2
Rectangle { Rectangle {
id: cornersThumb id: dockSwitch
width: 28 width: 52 * Theme.uiScale
height: 28 height: 32 * Theme.uiScale
radius: 14 radius: 16 * Theme.uiScale
color: Theme.surface color: Settings.settings.showDock ? Theme.accentPrimary : Theme.surfaceVariant
border.color: Theme.outline border.color: Settings.settings.showDock ? Theme.accentPrimary : Theme.outline
border.width: 1 border.width: 2 * Theme.uiScale
y: 2
x: Settings.settings.showCorners ? cornersSwitch.width - width - 2 : 2 Rectangle {
id: dockThumb
width: 28 * Theme.uiScale
height: 28 * Theme.uiScale
radius: 14 * Theme.uiScale
color: Theme.surface
border.color: Theme.outline
border.width: 1 * Theme.uiScale
y: 2
x: Settings.settings.showDock ? dockSwitch.width - width - 2 : 2
Behavior on x {
NumberAnimation {
duration: 200
easing.type: Easing.OutCubic
}
Behavior on x {
NumberAnimation {
duration: 200
easing.type: Easing.OutCubic
} }
} }
} MouseArea {
anchors.fill: parent
MouseArea { cursorShape: Qt.PointingHandCursor
anchors.fill: parent onClicked: {
cursorShape: Qt.PointingHandCursor Settings.settings.showDock = !Settings.settings.showDock;
onClicked: { }
Settings.settings.showCorners = !Settings.settings.showCorners;
} }
} }
} }
} }
} ColumnLayout {
spacing: 8 * Theme.uiScale
ColumnLayout {
spacing: 8
Layout.fillWidth: true
Layout.topMargin: 4
RowLayout {
spacing: 8
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: 4 * Theme.uiScale
ColumnLayout { RowLayout {
spacing: 4 spacing: 8 * Theme.uiScale
Layout.fillWidth: true Layout.fillWidth: true
Text { ColumnLayout {
text: "Show Dock" spacing: 4 * Theme.uiScale
font.pixelSize: 13
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Display a dock at the bottom of the screen for quick access to applications"
font.pixelSize: 12
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true Layout.fillWidth: true
Text {
text: "Dim Desktop"
font.pixelSize: 13 * Theme.uiScale
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Dim the desktop when panels or menus are open"
font.pixelSize: 12 * Theme.uiScale
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
}
} }
}
Rectangle {
id: dockSwitch
width: 52
height: 32
radius: 16
color: Settings.settings.showDock ? Theme.accentPrimary : Theme.surfaceVariant
border.color: Settings.settings.showDock ? Theme.accentPrimary : Theme.outline
border.width: 2
Rectangle { Rectangle {
id: dockThumb id: dimSwitch
width: 28 width: 52 * Theme.uiScale
height: 28 height: 32 * Theme.uiScale
radius: 14 radius: 16 * Theme.uiScale
color: Theme.surface color: Settings.settings.dimPanels ? Theme.accentPrimary : Theme.surfaceVariant
border.color: Theme.outline border.color: Settings.settings.dimPanels ? Theme.accentPrimary : Theme.outline
border.width: 1 border.width: 2 * Theme.uiScale
y: 2
x: Settings.settings.showDock ? dockSwitch.width - width - 2 : 2 Rectangle {
id: dimThumb
width: 28 * Theme.uiScale
height: 28 * Theme.uiScale
radius: 14 * Theme.uiScale
color: Theme.surface
border.color: Theme.outline
border.width: 1 * Theme.uiScale
y: 2
x: Settings.settings.dimPanels ? dimSwitch.width - width - 2 : 2
Behavior on x {
NumberAnimation {
duration: 200
easing.type: Easing.OutCubic
}
Behavior on x {
NumberAnimation {
duration: 200
easing.type: Easing.OutCubic
} }
} }
} MouseArea {
anchors.fill: parent
MouseArea { cursorShape: Qt.PointingHandCursor
anchors.fill: parent onClicked: {
cursorShape: Qt.PointingHandCursor Settings.settings.dimPanels = !Settings.settings.dimPanels;
onClicked: {
Settings.settings.showDock = !Settings.settings.showDock;
}
}
}
}
}
ColumnLayout {
spacing: 8
Layout.fillWidth: true
Layout.topMargin: 4
RowLayout {
spacing: 8
Layout.fillWidth: true
ColumnLayout {
spacing: 4
Layout.fillWidth: true
Text {
text: "Dim Desktop"
font.pixelSize: 13
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Dim the desktop when panels or menus are open"
font.pixelSize: 12
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
}
}
Rectangle {
id: dimSwitch
width: 52
height: 32
radius: 16
color: Settings.settings.dimPanels ? Theme.accentPrimary : Theme.surfaceVariant
border.color: Settings.settings.dimPanels ? Theme.accentPrimary : Theme.outline
border.width: 2
Rectangle {
id: dimThumb
width: 28
height: 28
radius: 14
color: Theme.surface
border.color: Theme.outline
border.width: 1
y: 2
x: Settings.settings.dimPanels ? dimSwitch.width - width - 2 : 2
Behavior on x {
NumberAnimation {
duration: 200
easing.type: Easing.OutCubic
} }
} }
} }
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
Settings.settings.dimPanels = !Settings.settings.dimPanels;
}
}
} }
} }
@ -364,10 +376,4 @@ ColumnLayout {
} }
} }
Item {
Layout.fillWidth: true
Layout.fillHeight: true
}
} }

188
Widgets/SettingsWindow/Tabs/Misc.qml
View file

@ -4,134 +4,144 @@ import QtQuick.Layouts
import qs.Settings import qs.Settings
import qs.Components import qs.Components
ColumnLayout { ScrollView {
id: root
spacing: 0
anchors.fill: parent anchors.fill: parent
anchors.margins: 0 padding: 0
rightPadding: 12
Item { clip: true
Layout.fillWidth: true ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
Layout.preferredHeight: 0 ScrollBar.vertical.policy: ScrollBar.AsNeeded
}
ColumnLayout { ColumnLayout {
spacing: 4 id: root
Layout.fillWidth: true width: parent.availableWidth
spacing: 0
anchors.top: parent.top
anchors.margins: 0
Text { Item {
text: "Media" Layout.fillWidth: true
font.pixelSize: 18 Layout.preferredHeight: 0
font.bold: true
color: Theme.textPrimary
Layout.bottomMargin: 8
} }
ColumnLayout { ColumnLayout {
spacing: 8 spacing: 4
Layout.fillWidth: true Layout.fillWidth: true
Text { Text {
text: "Visualizer Type" text: "Media"
font.pixelSize: 13 font.pixelSize: 18 * Theme.uiScale
font.bold: true font.bold: true
color: Theme.textPrimary color: Theme.textPrimary
Layout.bottomMargin: 8
} }
Text {
text: "Choose the style of the audio visualizer" ColumnLayout {
font.pixelSize: 12 spacing: 8
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true Layout.fillWidth: true
Layout.bottomMargin: 4
}
ComboBox { Text {
id: visualizerTypeComboBox text: "Visualizer Type"
Layout.fillWidth: true font.pixelSize: 13 * Theme.uiScale
Layout.preferredHeight: 40 font.bold: true
model: ["radial", "fire", "diamond"]
currentIndex: model.indexOf(Settings.settings.visualizerType)
background: Rectangle {
implicitWidth: 120
implicitHeight: 40
color: Theme.surfaceVariant
border.color: visualizerTypeComboBox.activeFocus ? Theme.accentPrimary : Theme.outline
border.width: 1
radius: 16
}
contentItem: Text {
leftPadding: 12
rightPadding: visualizerTypeComboBox.indicator.width + visualizerTypeComboBox.spacing
text: visualizerTypeComboBox.displayText.charAt(0).toUpperCase() + visualizerTypeComboBox.displayText.slice(1)
font.pixelSize: 13
color: Theme.textPrimary
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
indicator: Text {
x: visualizerTypeComboBox.width - width - 12
y: visualizerTypeComboBox.topPadding + (visualizerTypeComboBox.availableHeight - height) / 2
text: "arrow_drop_down"
font.family: "Material Symbols Outlined"
font.pixelSize: 24
color: Theme.textPrimary color: Theme.textPrimary
} }
popup: Popup { Text {
y: visualizerTypeComboBox.height text: "Choose the style of the audio visualizer"
width: visualizerTypeComboBox.width font.pixelSize: 12 * Theme.uiScale
implicitHeight: contentItem.implicitHeight color: Theme.textSecondary
padding: 1 wrapMode: Text.WordWrap
Layout.fillWidth: true
Layout.bottomMargin: 4
}
contentItem: ListView { ComboBox {
clip: true id: visualizerTypeComboBox
implicitHeight: contentHeight Layout.fillWidth: true
model: visualizerTypeComboBox.popup.visible ? visualizerTypeComboBox.delegateModel : null Layout.preferredHeight: 40
currentIndex: visualizerTypeComboBox.highlightedIndex model: ["radial", "fire", "diamond"]
currentIndex: model.indexOf(Settings.settings.visualizerType)
ScrollIndicator.vertical: ScrollIndicator {}
}
background: Rectangle { background: Rectangle {
implicitWidth: 120
implicitHeight: 40
color: Theme.surfaceVariant color: Theme.surfaceVariant
border.color: Theme.outline border.color: visualizerTypeComboBox.activeFocus ? Theme.accentPrimary : Theme.outline
border.width: 1 border.width: 1
radius: 16 radius: 16
} }
}
delegate: ItemDelegate {
width: visualizerTypeComboBox.width
contentItem: Text { contentItem: Text {
text: modelData.charAt(0).toUpperCase() + modelData.slice(1) leftPadding: 12
rightPadding: visualizerTypeComboBox.indicator.width + visualizerTypeComboBox.spacing
text: visualizerTypeComboBox.displayText.charAt(0).toUpperCase() + visualizerTypeComboBox.displayText.slice(1)
font.pixelSize: 13 font.pixelSize: 13
color: Theme.textPrimary color: Theme.textPrimary
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight elide: Text.ElideRight
} }
highlighted: visualizerTypeComboBox.highlightedIndex === index
background: Rectangle { indicator: Text {
color: highlighted ? Theme.accentPrimary.toString().replace(/#/, "#1A") : "transparent" x: visualizerTypeComboBox.width - width - 12
y: visualizerTypeComboBox.topPadding + (visualizerTypeComboBox.availableHeight - height) / 2
text: "arrow_drop_down"
font.family: "Material Symbols Outlined"
font.pixelSize: 24
color: Theme.textPrimary
} }
}
onActivated: { popup: Popup {
Settings.settings.visualizerType = model[index]; y: visualizerTypeComboBox.height
width: visualizerTypeComboBox.width
implicitHeight: contentItem.implicitHeight
padding: 1
contentItem: ListView {
clip: true
implicitHeight: contentHeight
model: visualizerTypeComboBox.popup.visible ? visualizerTypeComboBox.delegateModel : null
currentIndex: visualizerTypeComboBox.highlightedIndex
ScrollIndicator.vertical: ScrollIndicator {}
}
background: Rectangle {
color: Theme.surfaceVariant
border.color: Theme.outline
border.width: 1
radius: 16
}
}
delegate: ItemDelegate {
width: visualizerTypeComboBox.width
contentItem: Text {
text: modelData.charAt(0).toUpperCase() + modelData.slice(1)
font.pixelSize: 13
color: Theme.textPrimary
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
highlighted: visualizerTypeComboBox.highlightedIndex === index
background: Rectangle {
color: highlighted ? Theme.accentPrimary.toString().replace(/#/, "#1A") : "transparent"
}
}
onActivated: {
Settings.settings.visualizerType = model[index];
}
} }
} }
} }
}
Item { Item {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
}
} }
} }

420
Widgets/SettingsWindow/Tabs/Network.qml
View file

@ -6,213 +6,223 @@ import Quickshell.Bluetooth
import qs.Components import qs.Components
import qs.Settings import qs.Settings
ColumnLayout { ScrollView {
id: root anchors.fill: parent
padding: 0
spacing: 24 rightPadding: 12
Component.onCompleted: { clip: true
Quickshell.execDetached(["nmcli", "-t", "-f", "WIFI", "radio"]); ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
} ScrollBar.vertical.policy: ScrollBar.AsNeeded
ColumnLayout { ColumnLayout {
spacing: 16 id: root
Layout.fillWidth: true width: parent.availableWidth
Text {
text: "Wi-Fi"
font.pixelSize: 18
font.bold: true
color: Theme.textPrimary
}
ColumnLayout {
spacing: 8
Layout.fillWidth: true
RowLayout {
spacing: 8
Layout.fillWidth: true
ColumnLayout {
spacing: 4
Layout.fillWidth: true
Text {
text: "Enable Wi-Fi"
font.pixelSize: 13
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Turn Wi-Fi radio on or off"
font.pixelSize: 12
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
}
}
Rectangle {
id: wifiSwitch
property bool checked: Settings.settings.wifiEnabled
width: 52
height: 32
radius: 16
color: checked ? Theme.accentPrimary : Theme.surfaceVariant
border.color: checked ? Theme.accentPrimary : Theme.outline
border.width: 2
Rectangle {
id: wifiThumb
width: 28
height: 28
radius: 14
color: Theme.surface
border.color: Theme.outline
border.width: 1
y: 2
x: wifiSwitch.checked ? wifiSwitch.width - width - 2 : 2
Behavior on x {
NumberAnimation {
duration: 200
easing.type: Easing.OutCubic
}
}
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
Settings.settings.wifiEnabled = !Settings.settings.wifiEnabled;
Quickshell.execDetached(["nmcli", "radio", "wifi", Settings.settings.wifiEnabled ? "on" : "off"]);
}
}
}
}
}
}
Rectangle {
Layout.fillWidth: true
Layout.topMargin: 26
Layout.bottomMargin: 0
height: 1
color: Theme.outline
opacity: 0.3
}
ColumnLayout {
spacing: 16
Layout.fillWidth: true
Text {
text: "Bluetooth"
font.pixelSize: 18
font.bold: true
color: Theme.textPrimary
}
ColumnLayout {
spacing: 8
Layout.fillWidth: true
RowLayout {
spacing: 8
Layout.fillWidth: true
ColumnLayout {
spacing: 4
Layout.fillWidth: true
Text {
text: "Enable Bluetooth"
font.pixelSize: 13
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Turn Bluetooth radio on or off"
font.pixelSize: 12
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
}
}
Rectangle {
id: bluetoothSwitch
property bool checked: Settings.settings.bluetoothEnabled
width: 52
height: 32
radius: 16
color: checked ? Theme.accentPrimary : Theme.surfaceVariant
border.color: checked ? Theme.accentPrimary : Theme.outline
border.width: 2
Rectangle {
id: bluetoothThumb
width: 28
height: 28
radius: 14
color: Theme.surface
border.color: Theme.outline
border.width: 1
y: 2
x: bluetoothSwitch.checked ? bluetoothSwitch.width - width - 2 : 2
Behavior on x {
NumberAnimation {
duration: 200
easing.type: Easing.OutCubic
}
}
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
if (Bluetooth.defaultAdapter) {
Settings.settings.bluetoothEnabled = !Settings.settings.bluetoothEnabled;
Bluetooth.defaultAdapter.enabled = Settings.settings.bluetoothEnabled;
if (Bluetooth.defaultAdapter.enabled)
Bluetooth.defaultAdapter.discovering = true;
}
}
}
}
}
}
}
Item {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
} spacing: 24
Component.onCompleted: {
Quickshell.execDetached(["nmcli", "-t", "-f", "WIFI", "radio"]);
}
ColumnLayout {
spacing: 16
Layout.fillWidth: true
Text {
text: "Wi-Fi"
font.pixelSize: 18 * Theme.uiScale
font.bold: true
color: Theme.textPrimary
}
ColumnLayout {
spacing: 8
Layout.fillWidth: true
RowLayout {
spacing: 8
Layout.fillWidth: true
ColumnLayout {
spacing: 4
Layout.fillWidth: true
Text {
text: "Enable Wi-Fi"
font.pixelSize: 13 * Theme.uiScale
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Turn Wi-Fi radio on or off"
font.pixelSize: 12 * Theme.uiScale
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
}
}
Rectangle {
id: wifiSwitch
property bool checked: Settings.settings.wifiEnabled
width: 52
height: 32
radius: 16
color: checked ? Theme.accentPrimary : Theme.surfaceVariant
border.color: checked ? Theme.accentPrimary : Theme.outline
border.width: 2
Rectangle {
id: wifiThumb
width: 28
height: 28
radius: 14
color: Theme.surface
border.color: Theme.outline
border.width: 1
y: 2
x: wifiSwitch.checked ? wifiSwitch.width - width - 2 : 2
Behavior on x {
NumberAnimation {
duration: 200
easing.type: Easing.OutCubic
}
}
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
Settings.settings.wifiEnabled = !Settings.settings.wifiEnabled;
Quickshell.execDetached(["nmcli", "radio", "wifi", Settings.settings.wifiEnabled ? "on" : "off"]);
}
}
}
}
}
}
Rectangle {
Layout.fillWidth: true
Layout.topMargin: 26
Layout.bottomMargin: 0
height: 1
color: Theme.outline
opacity: 0.3
}
ColumnLayout {
spacing: 16
Layout.fillWidth: true
Text {
text: "Bluetooth"
font.pixelSize: 18 * Theme.uiScale
font.bold: true
color: Theme.textPrimary
}
ColumnLayout {
spacing: 8
Layout.fillWidth: true
RowLayout {
spacing: 8
Layout.fillWidth: true
ColumnLayout {
spacing: 4
Layout.fillWidth: true
Text {
text: "Enable Bluetooth"
font.pixelSize: 13 * Theme.uiScale
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Turn Bluetooth radio on or off"
font.pixelSize: 12 * Theme.uiScale
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
}
}
Rectangle {
id: bluetoothSwitch
property bool checked: Settings.settings.bluetoothEnabled
width: 52
height: 32
radius: 16
color: checked ? Theme.accentPrimary : Theme.surfaceVariant
border.color: checked ? Theme.accentPrimary : Theme.outline
border.width: 2
Rectangle {
id: bluetoothThumb
width: 28
height: 28
radius: 14
color: Theme.surface
border.color: Theme.outline
border.width: 1
y: 2
x: bluetoothSwitch.checked ? bluetoothSwitch.width - width - 2 : 2
Behavior on x {
NumberAnimation {
duration: 200
easing.type: Easing.OutCubic
}
}
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
if (Bluetooth.defaultAdapter) {
Settings.settings.bluetoothEnabled = !Settings.settings.bluetoothEnabled;
Bluetooth.defaultAdapter.enabled = Settings.settings.bluetoothEnabled;
if (Bluetooth.defaultAdapter.enabled)
Bluetooth.defaultAdapter.discovering = true;
}
}
}
}
}
}
}
Item {
Layout.fillWidth: true
Layout.fillHeight: true
}
}
} }

72
Widgets/SettingsWindow/Tabs/Recording.qml
View file

@ -34,7 +34,7 @@ ColumnLayout {
ColumnLayout { ColumnLayout {
// Text { // Text {
// text: "Screen Recording" // text: "Screen Recording"
// font.pixelSize: 18 // font.pixelSize: 18 * Theme.uiScale
// font.bold: true // font.bold: true
// color: Theme.textPrimary // color: Theme.textPrimary
// Layout.bottomMargin: 8 // Layout.bottomMargin: 8
@ -49,14 +49,14 @@ ColumnLayout {
Text { Text {
text: "Output Directory" text: "Output Directory"
font.pixelSize: 13 font.pixelSize: 13 * Theme.uiScale
font.bold: true font.bold: true
color: Theme.textPrimary color: Theme.textPrimary
} }
Text { Text {
text: "Directory where screen recordings will be saved" text: "Directory where screen recordings will be saved"
font.pixelSize: 12 font.pixelSize: 12 * Theme.uiScale
color: Theme.textSecondary color: Theme.textSecondary
Layout.bottomMargin: 4 Layout.bottomMargin: 4
} }
@ -78,7 +78,7 @@ ColumnLayout {
anchors.topMargin: 6 anchors.topMargin: 6
anchors.bottomMargin: 6 anchors.bottomMargin: 6
text: Settings.settings.videoPath !== undefined ? Settings.settings.videoPath : "" text: Settings.settings.videoPath !== undefined ? Settings.settings.videoPath : ""
font.pixelSize: 13 font.pixelSize: 13 * Theme.uiScale
color: Theme.textPrimary color: Theme.textPrimary
verticalAlignment: TextInput.AlignVCenter verticalAlignment: TextInput.AlignVCenter
clip: true clip: true
@ -108,14 +108,14 @@ ColumnLayout {
Text { Text {
text: "Frame Rate" text: "Frame Rate"
font.pixelSize: 13 font.pixelSize: 13 * Theme.uiScale
font.bold: true font.bold: true
color: Theme.textPrimary color: Theme.textPrimary
} }
Text { Text {
text: "Target frame rate for screen recordings (default: 60)" text: "Target frame rate for screen recordings (default: 60)"
font.pixelSize: 12 font.pixelSize: 12 * Theme.uiScale
color: Theme.textSecondary color: Theme.textSecondary
Layout.bottomMargin: 4 Layout.bottomMargin: 4
} }
@ -144,7 +144,7 @@ ColumnLayout {
contentItem: TextInput { contentItem: TextInput {
text: frameRateSpinBox.textFromValue(frameRateSpinBox.value, frameRateSpinBox.locale) text: frameRateSpinBox.textFromValue(frameRateSpinBox.value, frameRateSpinBox.locale)
font.pixelSize: 13 font.pixelSize: 13 * Theme.uiScale
color: Theme.textPrimary color: Theme.textPrimary
selectionColor: Theme.accentPrimary selectionColor: Theme.accentPrimary
selectedTextColor: Theme.onAccent selectedTextColor: Theme.onAccent
@ -183,7 +183,7 @@ ColumnLayout {
Text { Text {
text: "add" text: "add"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 20 font.pixelSize: 20 * Theme.uiScale
color: Theme.textPrimary color: Theme.textPrimary
anchors.centerIn: parent anchors.centerIn: parent
} }
@ -200,7 +200,7 @@ ColumnLayout {
Text { Text {
text: "remove" text: "remove"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 20 font.pixelSize: 20 * Theme.uiScale
color: Theme.textPrimary color: Theme.textPrimary
anchors.centerIn: parent anchors.centerIn: parent
} }
@ -218,14 +218,14 @@ ColumnLayout {
Text { Text {
text: "Audio Source" text: "Audio Source"
font.pixelSize: 13 font.pixelSize: 13 * Theme.uiScale
font.bold: true font.bold: true
color: Theme.textPrimary color: Theme.textPrimary
} }
Text { Text {
text: "Audio source to capture during recording" text: "Audio source to capture during recording"
font.pixelSize: 12 font.pixelSize: 12 * Theme.uiScale
color: Theme.textSecondary color: Theme.textSecondary
Layout.bottomMargin: 4 Layout.bottomMargin: 4
} }
@ -265,7 +265,7 @@ ColumnLayout {
return audioSourceComboBox.currentText; return audioSourceComboBox.currentText;
} }
} }
font.pixelSize: 13 font.pixelSize: 13 * Theme.uiScale
color: Theme.textPrimary color: Theme.textPrimary
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight elide: Text.ElideRight
@ -276,7 +276,7 @@ ColumnLayout {
y: audioSourceComboBox.topPadding + (audioSourceComboBox.availableHeight - height) / 2 y: audioSourceComboBox.topPadding + (audioSourceComboBox.availableHeight - height) / 2
text: "arrow_drop_down" text: "arrow_drop_down"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 24 font.pixelSize: 24 * Theme.uiScale
color: Theme.textPrimary color: Theme.textPrimary
} }
@ -323,7 +323,7 @@ ColumnLayout {
return modelData; return modelData;
} }
} }
font.pixelSize: 13 font.pixelSize: 13 * Theme.uiScale
color: Theme.textPrimary color: Theme.textPrimary
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight elide: Text.ElideRight
@ -346,14 +346,14 @@ ColumnLayout {
Text { Text {
text: "Video Quality" text: "Video Quality"
font.pixelSize: 13 font.pixelSize: 13 * Theme.uiScale
font.bold: true font.bold: true
color: Theme.textPrimary color: Theme.textPrimary
} }
Text { Text {
text: "Higher quality results in larger file sizes" text: "Higher quality results in larger file sizes"
font.pixelSize: 12 font.pixelSize: 12 * Theme.uiScale
color: Theme.textSecondary color: Theme.textSecondary
Layout.bottomMargin: 4 Layout.bottomMargin: 4
} }
@ -395,7 +395,7 @@ ColumnLayout {
return qualityComboBox.currentText; return qualityComboBox.currentText;
} }
} }
font.pixelSize: 13 font.pixelSize: 13 * Theme.uiScale
color: Theme.textPrimary color: Theme.textPrimary
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight elide: Text.ElideRight
@ -406,7 +406,7 @@ ColumnLayout {
y: qualityComboBox.topPadding + (qualityComboBox.availableHeight - height) / 2 y: qualityComboBox.topPadding + (qualityComboBox.availableHeight - height) / 2
text: "arrow_drop_down" text: "arrow_drop_down"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 24 font.pixelSize: 24 * Theme.uiScale
color: Theme.textPrimary color: Theme.textPrimary
} }
@ -455,7 +455,7 @@ ColumnLayout {
return modelData; return modelData;
} }
} }
font.pixelSize: 13 font.pixelSize: 13 * Theme.uiScale
color: Theme.textPrimary color: Theme.textPrimary
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight elide: Text.ElideRight
@ -478,14 +478,14 @@ ColumnLayout {
Text { Text {
text: "Video Codec" text: "Video Codec"
font.pixelSize: 13 font.pixelSize: 13 * Theme.uiScale
font.bold: true font.bold: true
color: Theme.textPrimary color: Theme.textPrimary
} }
Text { Text {
text: "Different codecs offer different compression and compatibility" text: "Different codecs offer different compression and compatibility"
font.pixelSize: 12 font.pixelSize: 12 * Theme.uiScale
color: Theme.textSecondary color: Theme.textSecondary
Layout.bottomMargin: 4 Layout.bottomMargin: 4
} }
@ -514,7 +514,7 @@ ColumnLayout {
leftPadding: 12 leftPadding: 12
rightPadding: codecComboBox.indicator.width + codecComboBox.spacing rightPadding: codecComboBox.indicator.width + codecComboBox.spacing
text: codecComboBox.currentText.toUpperCase() text: codecComboBox.currentText.toUpperCase()
font.pixelSize: 13 font.pixelSize: 13 * Theme.uiScale
color: Theme.textPrimary color: Theme.textPrimary
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight elide: Text.ElideRight
@ -525,7 +525,7 @@ ColumnLayout {
y: codecComboBox.topPadding + (codecComboBox.availableHeight - height) / 2 y: codecComboBox.topPadding + (codecComboBox.availableHeight - height) / 2
text: "arrow_drop_down" text: "arrow_drop_down"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 24 font.pixelSize: 24 * Theme.uiScale
color: Theme.textPrimary color: Theme.textPrimary
} }
@ -561,7 +561,7 @@ ColumnLayout {
contentItem: Text { contentItem: Text {
text: modelData.toUpperCase() text: modelData.toUpperCase()
font.pixelSize: 13 font.pixelSize: 13 * Theme.uiScale
color: Theme.textPrimary color: Theme.textPrimary
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight elide: Text.ElideRight
@ -584,14 +584,14 @@ ColumnLayout {
Text { Text {
text: "Audio Codec" text: "Audio Codec"
font.pixelSize: 13 font.pixelSize: 13 * Theme.uiScale
font.bold: true font.bold: true
color: Theme.textPrimary color: Theme.textPrimary
} }
Text { Text {
text: "Opus is recommended for best performance and smallest audio size" text: "Opus is recommended for best performance and smallest audio size"
font.pixelSize: 12 font.pixelSize: 12 * Theme.uiScale
color: Theme.textSecondary color: Theme.textSecondary
Layout.bottomMargin: 4 Layout.bottomMargin: 4
} }
@ -620,7 +620,7 @@ ColumnLayout {
leftPadding: 12 leftPadding: 12
rightPadding: audioCodecComboBox.indicator.width + audioCodecComboBox.spacing rightPadding: audioCodecComboBox.indicator.width + audioCodecComboBox.spacing
text: audioCodecComboBox.currentText.toUpperCase() text: audioCodecComboBox.currentText.toUpperCase()
font.pixelSize: 13 font.pixelSize: 13 * Theme.uiScale
color: Theme.textPrimary color: Theme.textPrimary
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight elide: Text.ElideRight
@ -631,7 +631,7 @@ ColumnLayout {
y: audioCodecComboBox.topPadding + (audioCodecComboBox.availableHeight - height) / 2 y: audioCodecComboBox.topPadding + (audioCodecComboBox.availableHeight - height) / 2
text: "arrow_drop_down" text: "arrow_drop_down"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 24 font.pixelSize: 24 * Theme.uiScale
color: Theme.textPrimary color: Theme.textPrimary
} }
@ -667,7 +667,7 @@ ColumnLayout {
contentItem: Text { contentItem: Text {
text: modelData.toUpperCase() text: modelData.toUpperCase()
font.pixelSize: 13 font.pixelSize: 13 * Theme.uiScale
color: Theme.textPrimary color: Theme.textPrimary
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight elide: Text.ElideRight
@ -690,14 +690,14 @@ ColumnLayout {
Text { Text {
text: "Color Range" text: "Color Range"
font.pixelSize: 13 font.pixelSize: 13 * Theme.uiScale
font.bold: true font.bold: true
color: Theme.textPrimary color: Theme.textPrimary
} }
Text { Text {
text: "Limited is recommended for better compatibility" text: "Limited is recommended for better compatibility"
font.pixelSize: 12 font.pixelSize: 12 * Theme.uiScale
color: Theme.textSecondary color: Theme.textSecondary
Layout.bottomMargin: 4 Layout.bottomMargin: 4
} }
@ -726,7 +726,7 @@ ColumnLayout {
leftPadding: 12 leftPadding: 12
rightPadding: colorRangeComboBox.indicator.width + colorRangeComboBox.spacing rightPadding: colorRangeComboBox.indicator.width + colorRangeComboBox.spacing
text: colorRangeComboBox.currentText.charAt(0).toUpperCase() + colorRangeComboBox.currentText.slice(1) text: colorRangeComboBox.currentText.charAt(0).toUpperCase() + colorRangeComboBox.currentText.slice(1)
font.pixelSize: 13 font.pixelSize: 13 * Theme.uiScale
color: Theme.textPrimary color: Theme.textPrimary
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight elide: Text.ElideRight
@ -737,7 +737,7 @@ ColumnLayout {
y: colorRangeComboBox.topPadding + (colorRangeComboBox.availableHeight - height) / 2 y: colorRangeComboBox.topPadding + (colorRangeComboBox.availableHeight - height) / 2
text: "arrow_drop_down" text: "arrow_drop_down"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 24 font.pixelSize: 24 * Theme.uiScale
color: Theme.textPrimary color: Theme.textPrimary
} }
@ -773,7 +773,7 @@ ColumnLayout {
contentItem: Text { contentItem: Text {
text: modelData.charAt(0).toUpperCase() + modelData.slice(1) text: modelData.charAt(0).toUpperCase() + modelData.slice(1)
font.pixelSize: 13 font.pixelSize: 13 * Theme.uiScale
color: Theme.textPrimary color: Theme.textPrimary
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight elide: Text.ElideRight
@ -804,14 +804,14 @@ ColumnLayout {
Text { Text {
text: "Show Cursor" text: "Show Cursor"
font.pixelSize: 13 font.pixelSize: 13 * Theme.uiScale
font.bold: true font.bold: true
color: Theme.textPrimary color: Theme.textPrimary
} }
Text { Text {
text: "Record mouse cursor in the video" text: "Record mouse cursor in the video"
font.pixelSize: 12 font.pixelSize: 12 * Theme.uiScale
color: Theme.textSecondary color: Theme.textSecondary
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
Layout.fillWidth: true Layout.fillWidth: true

477
Widgets/SettingsWindow/Tabs/TimeWeather.qml
View file

@ -5,258 +5,268 @@ import qs.Components
import qs.Settings import qs.Settings
import qs.Widgets.SettingsWindow.Tabs.Components import qs.Widgets.SettingsWindow.Tabs.Components
ColumnLayout { ScrollView {
id: root
spacing: 0
anchors.fill: parent anchors.fill: parent
anchors.margins: 0 padding: 0
rightPadding: 12
Item { clip: true
Layout.fillWidth: true ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
Layout.preferredHeight: 0 ScrollBar.vertical.policy: ScrollBar.AsNeeded
}
ColumnLayout { ColumnLayout {
spacing: 4 id: root
Layout.fillWidth: true width: parent.availableWidth
spacing: 0
anchors.top: parent.top
anchors.margins: 0
Text { Item {
text: "Time"
font.pixelSize: 18
font.bold: true
color: Theme.textPrimary
Layout.bottomMargin: 8
}
ColumnLayout {
spacing: 8
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: 8 Layout.preferredHeight: 0
RowLayout {
spacing: 8
Layout.fillWidth: true
ColumnLayout {
spacing: 4
Layout.fillWidth: true
Text {
text: "Use 12 Hour Clock"
font.pixelSize: 13
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Display time in 12-hour format (e.g., 2:30 PM) instead of 24-hour format"
font.pixelSize: 12
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
}
}
Rectangle {
id: use12HourClockSwitch
width: 52
height: 32
radius: 16
color: Settings.settings.use12HourClock ? Theme.accentPrimary : Theme.surfaceVariant
border.color: Settings.settings.use12HourClock ? Theme.accentPrimary : Theme.outline
border.width: 2
Rectangle {
id: use12HourClockThumb
width: 28
height: 28
radius: 14
color: Theme.surface
border.color: Theme.outline
border.width: 1
y: 2
x: Settings.settings.use12HourClock ? use12HourClockSwitch.width - width - 2 : 2
Behavior on x {
NumberAnimation {
duration: 200
easing.type: Easing.OutCubic
}
}
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
Settings.settings.use12HourClock = !Settings.settings.use12HourClock;
}
}
}
}
} }
ColumnLayout { ColumnLayout {
spacing: 8 spacing: 4
Layout.fillWidth: true
Layout.topMargin: 8
RowLayout {
spacing: 8
Layout.fillWidth: true
ColumnLayout {
spacing: 4
Layout.fillWidth: true
Text {
text: "US Style Date"
font.pixelSize: 13
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Display dates in MM/DD/YYYY format instead of DD/MM/YYYY"
font.pixelSize: 12
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
}
}
Rectangle {
id: reverseDayMonthSwitch
width: 52
height: 32
radius: 16
color: Settings.settings.reverseDayMonth ? Theme.accentPrimary : Theme.surfaceVariant
border.color: Settings.settings.reverseDayMonth ? Theme.accentPrimary : Theme.outline
border.width: 2
Rectangle {
id: reverseDayMonthThumb
width: 28
height: 28
radius: 14
color: Theme.surface
border.color: Theme.outline
border.width: 1
y: 2
x: Settings.settings.reverseDayMonth ? reverseDayMonthSwitch.width - width - 2 : 2
Behavior on x {
NumberAnimation {
duration: 200
easing.type: Easing.OutCubic
}
}
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
Settings.settings.reverseDayMonth = !Settings.settings.reverseDayMonth;
}
}
}
}
}
}
Rectangle {
Layout.fillWidth: true
Layout.topMargin: 26
Layout.bottomMargin: 18
height: 1
color: Theme.outline
opacity: 0.3
}
ColumnLayout {
spacing: 4
Layout.fillWidth: true
Text {
text: "Weather"
font.pixelSize: 18
font.bold: true
color: Theme.textPrimary
Layout.bottomMargin: 8
}
ColumnLayout {
spacing: 8
Layout.fillWidth: true Layout.fillWidth: true
Text { Text {
text: "City" text: "Time"
font.pixelSize: 13 font.pixelSize: 18 * Theme.uiScale
font.bold: true font.bold: true
color: Theme.textPrimary color: Theme.textPrimary
Layout.bottomMargin: 8
} }
Text { ColumnLayout {
text: "Your city name for weather information" spacing: 8
font.pixelSize: 12
color: Theme.textSecondary
Layout.fillWidth: true Layout.fillWidth: true
} Layout.topMargin: 8
Rectangle { RowLayout {
Layout.fillWidth: true spacing: 8
Layout.preferredHeight: 40 Layout.fillWidth: true
radius: 16
color: Theme.surfaceVariant
border.color: cityInput.activeFocus ? Theme.accentPrimary : Theme.outline
border.width: 1
TextInput { ColumnLayout {
id: cityInput spacing: 4
Layout.fillWidth: true
Text {
text: "Use 12 Hour Clock"
font.pixelSize: 13 * Theme.uiScale
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Display time in 12-hour format (e.g., 2:30 PM) instead of 24-hour format"
font.pixelSize: 12 * Theme.uiScale
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
}
anchors.fill: parent
anchors.leftMargin: 12
anchors.rightMargin: 12
anchors.topMargin: 6
anchors.bottomMargin: 6
text: Settings.settings.weatherCity
font.pixelSize: 13
color: Theme.textPrimary
verticalAlignment: TextInput.AlignVCenter
clip: true
focus: true
selectByMouse: true
activeFocusOnTab: true
inputMethodHints: Qt.ImhNone
onTextChanged: {
Settings.settings.weatherCity = text;
} }
MouseArea { Rectangle {
anchors.fill: parent id: use12HourClockSwitch
cursorShape: Qt.IBeamCursor
onClicked: { width: 52
cityInput.forceActiveFocus(); height: 32
radius: 16
color: Settings.settings.use12HourClock ? Theme.accentPrimary : Theme.surfaceVariant
border.color: Settings.settings.use12HourClock ? Theme.accentPrimary : Theme.outline
border.width: 2
Rectangle {
id: use12HourClockThumb
width: 28
height: 28
radius: 14
color: Theme.surface
border.color: Theme.outline
border.width: 1
y: 2
x: Settings.settings.use12HourClock ? use12HourClockSwitch.width - width - 2 : 2
Behavior on x {
NumberAnimation {
duration: 200
easing.type: Easing.OutCubic
}
}
} }
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
Settings.settings.use12HourClock = !Settings.settings.use12HourClock;
}
}
}
}
}
ColumnLayout {
spacing: 8
Layout.fillWidth: true
Layout.topMargin: 8
RowLayout {
spacing: 8
Layout.fillWidth: true
ColumnLayout {
spacing: 4
Layout.fillWidth: true
Text {
text: "US Style Date"
font.pixelSize: 13 * Theme.uiScale
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Display dates in MM/DD/YYYY format instead of DD/MM/YYYY"
font.pixelSize: 12 * Theme.uiScale
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
}
}
Rectangle {
id: reverseDayMonthSwitch
width: 52
height: 32
radius: 16
color: Settings.settings.reverseDayMonth ? Theme.accentPrimary : Theme.surfaceVariant
border.color: Settings.settings.reverseDayMonth ? Theme.accentPrimary : Theme.outline
border.width: 2
Rectangle {
id: reverseDayMonthThumb
width: 28
height: 28
radius: 14
color: Theme.surface
border.color: Theme.outline
border.width: 1
y: 2
x: Settings.settings.reverseDayMonth ? reverseDayMonthSwitch.width - width - 2 : 2
Behavior on x {
NumberAnimation {
duration: 200
easing.type: Easing.OutCubic
}
}
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
Settings.settings.reverseDayMonth = !Settings.settings.reverseDayMonth;
}
}
}
}
}
}
Rectangle {
Layout.fillWidth: true
Layout.topMargin: 26
Layout.bottomMargin: 18
height: 1
color: Theme.outline
opacity: 0.3
}
ColumnLayout {
spacing: 4
Layout.fillWidth: true
Text {
text: "Weather"
font.pixelSize: 18 * Theme.uiScale
font.bold: true
color: Theme.textPrimary
Layout.bottomMargin: 8
}
ColumnLayout {
spacing: 8
Layout.fillWidth: true
Text {
text: "City"
font.pixelSize: 13 * Theme.uiScale
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Your city name for weather information"
font.pixelSize: 12 * Theme.uiScale
color: Theme.textSecondary
Layout.fillWidth: true
}
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 40
radius: 16
color: Theme.surfaceVariant
border.color: cityInput.activeFocus ? Theme.accentPrimary : Theme.outline
border.width: 1
TextInput {
id: cityInput
anchors.fill: parent
anchors.leftMargin: 12
anchors.rightMargin: 12
anchors.topMargin: 6
anchors.bottomMargin: 6
text: Settings.settings.weatherCity
font.pixelSize: 13 * Theme.uiScale
color: Theme.textPrimary
verticalAlignment: TextInput.AlignVCenter
clip: true
focus: true
selectByMouse: true
activeFocusOnTab: true
inputMethodHints: Qt.ImhNone
onTextChanged: {
Settings.settings.weatherCity = text;
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.IBeamCursor
onClicked: {
cityInput.forceActiveFocus();
}
}
} }
} }
@ -280,14 +290,14 @@ ColumnLayout {
Text { Text {
text: "Temperature Unit" text: "Temperature Unit"
font.pixelSize: 13 font.pixelSize: 13 * Theme.uiScale
font.bold: true font.bold: true
color: Theme.textPrimary color: Theme.textPrimary
} }
Text { Text {
text: "Choose between Celsius and Fahrenheit" text: "Choose between Celsius and Fahrenheit"
font.pixelSize: 12 font.pixelSize: 12 * Theme.uiScale
color: Theme.textSecondary color: Theme.textSecondary
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
Layout.fillWidth: true Layout.fillWidth: true
@ -308,5 +318,4 @@ ColumnLayout {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
} }
} }

1538
Widgets/SettingsWindow/Tabs/Wallpaper.qml
View file

File diff suppressed because it is too large Load diff

2
Widgets/SidePanel/Button.qml
View file

@ -44,7 +44,7 @@ Item {
id: iconText id: iconText
text: "dashboard" text: "dashboard"
font.family: isActive ? "Material Symbols Rounded" : "Material Symbols Outlined" font.family: isActive ? "Material Symbols Rounded" : "Material Symbols Outlined"
font.pixelSize: 16 font.pixelSize: 16 * Theme.uiScale
color: sidebarPopup.visible ? Theme.accentPrimary : Theme.textPrimary color: sidebarPopup.visible ? Theme.accentPrimary : Theme.textPrimary
anchors.centerIn: parent anchors.centerIn: parent
z: 1 z: 1

122
Widgets/SidePanel/Music.qml
View file

@ -8,15 +8,15 @@ import qs.Services
Rectangle { Rectangle {
id: musicCard id: musicCard
width: 360 width: 360 * Theme.uiScale
height: 250 height: 250 * Theme.uiScale
color: "transparent" color: "transparent"
Rectangle { Rectangle {
id: card id: card
anchors.fill: parent anchors.fill: parent
color: Theme.surface color: Theme.surface
radius: 18 radius: 18 * Theme.uiScale
// Show fallback UI if no player is available // Show fallback UI if no player is available
Item { Item {
@ -26,12 +26,12 @@ Rectangle {
ColumnLayout { ColumnLayout {
anchors.centerIn: parent anchors.centerIn: parent
spacing: 16 spacing: 16 * Theme.uiScale
Text { Text {
text: "music_note" text: "music_note"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: Theme.fontSizeHeader font.pixelSize: Theme.fontSizeHeader * Theme.uiScale
color: Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.3) color: Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.3)
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
} }
@ -40,7 +40,7 @@ Rectangle {
text: MusicManager.hasPlayer ? "No controllable player selected" : "No music player detected" text: MusicManager.hasPlayer ? "No controllable player selected" : "No music player detected"
color: Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.6) color: Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.6)
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: Theme.fontSizeSmall font.pixelSize: Theme.fontSizeSmall * Theme.uiScale
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
} }
} }
@ -49,45 +49,45 @@ Rectangle {
// Main player UI // Main player UI
ColumnLayout { ColumnLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: 18 anchors.margins: 18 * Theme.uiScale
spacing: 12 spacing: 12 * Theme.uiScale
visible: !!MusicManager.currentPlayer visible: !!MusicManager.currentPlayer
// Player selector // Player selector
ComboBox { ComboBox {
id: playerSelector id: playerSelector
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 40 Layout.preferredHeight: 40 * Theme.uiScale
visible: MusicManager.getAvailablePlayers().length > 1 visible: MusicManager.getAvailablePlayers().length > 1
model: MusicManager.getAvailablePlayers() model: MusicManager.getAvailablePlayers()
textRole: "identity" textRole: "identity"
currentIndex: MusicManager.selectedPlayerIndex currentIndex: MusicManager.selectedPlayerIndex
background: Rectangle { background: Rectangle {
implicitWidth: 120 implicitWidth: 120 * Theme.uiScale
implicitHeight: 40 implicitHeight: 40 * Theme.uiScale
color: Theme.surfaceVariant color: Theme.surfaceVariant
border.color: playerSelector.activeFocus ? Theme.accentPrimary : Theme.outline border.color: playerSelector.activeFocus ? Theme.accentPrimary : Theme.outline
border.width: 1 border.width: 1 * Theme.uiScale
radius: 16 radius: 16 * Theme.uiScale
} }
contentItem: Text { contentItem: Text {
leftPadding: 12 leftPadding: 12 * Theme.uiScale
rightPadding: playerSelector.indicator.width + playerSelector.spacing rightPadding: playerSelector.indicator.width + playerSelector.spacing
text: playerSelector.displayText text: playerSelector.displayText
font.pixelSize: 13 font.pixelSize: 13 * Theme.uiScale
color: Theme.textPrimary color: Theme.textPrimary
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight elide: Text.ElideRight
} }
indicator: Text { indicator: Text {
x: playerSelector.width - width - 12 x: playerSelector.width - width - 12 * Theme.uiScale
y: playerSelector.topPadding + (playerSelector.availableHeight - height) / 2 y: playerSelector.topPadding + (playerSelector.availableHeight - height) / 2
text: "arrow_drop_down" text: "arrow_drop_down"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 24 font.pixelSize: 24 * Theme.uiScale
color: Theme.textPrimary color: Theme.textPrimary
} }
@ -95,7 +95,7 @@ Rectangle {
y: playerSelector.height y: playerSelector.height
width: playerSelector.width width: playerSelector.width
implicitHeight: contentItem.implicitHeight implicitHeight: contentItem.implicitHeight
padding: 1 padding: 1 * Theme.uiScale
contentItem: ListView { contentItem: ListView {
clip: true clip: true
@ -109,8 +109,8 @@ Rectangle {
background: Rectangle { background: Rectangle {
color: Theme.surfaceVariant color: Theme.surfaceVariant
border.color: Theme.outline border.color: Theme.outline
border.width: 1 border.width: 1 * Theme.uiScale
radius: 16 radius: 16 * Theme.uiScale
} }
} }
@ -118,7 +118,7 @@ Rectangle {
width: playerSelector.width width: playerSelector.width
contentItem: Text { contentItem: Text {
text: modelData.identity text: modelData.identity
font.pixelSize: 13 font.pixelSize: 13 * Theme.uiScale
color: Theme.textPrimary color: Theme.textPrimary
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight elide: Text.ElideRight
@ -138,14 +138,14 @@ Rectangle {
// Album art with spectrum visualizer // Album art with spectrum visualizer
RowLayout { RowLayout {
spacing: 12 spacing: 12 * Theme.uiScale
Layout.fillWidth: true Layout.fillWidth: true
// Album art container with circular spectrum overlay // Album art container with circular spectrum overlay
Item { Item {
id: albumArtContainer id: albumArtContainer
width: 96 width: 96 * Theme.uiScale
height: 96 // enough for spectrum and art (will adjust if needed) height: 96 * Theme.uiScale // enough for spectrum and art (will adjust if needed)
Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
// Circular spectrum visualizer around album art // Circular spectrum visualizer around album art
@ -153,36 +153,36 @@ Rectangle {
id: spectrum id: spectrum
values: MusicManager.cavaValues values: MusicManager.cavaValues
anchors.centerIn: parent anchors.centerIn: parent
innerRadius: 30 // Position just outside 60x60 album art innerRadius: 30 * Theme.uiScale // Position just outside 60x60 album art
outerRadius: 48 // Extend bars outward from album art outerRadius: 48 * Theme.uiScale // Extend bars outward from album art
fillColor: Theme.accentPrimary fillColor: Theme.accentPrimary
strokeColor: Theme.accentPrimary strokeColor: Theme.accentPrimary
strokeWidth: 0 strokeWidth: 0 * Theme.uiScale
z: 0 z: 0
} }
// Album art image // Album art image
Rectangle { Rectangle {
id: albumArtwork id: albumArtwork
width: 60 width: 60 * Theme.uiScale
height: 60 height: 60 * Theme.uiScale
anchors.centerIn: parent anchors.centerIn: parent
radius: 30 // circle radius: 30 * Theme.uiScale // circle
color: Qt.darker(Theme.surface, 1.1) color: Qt.darker(Theme.surface, 1.1)
border.color: Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.3) border.color: Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.3)
border.width: 1 border.width: 1 * Theme.uiScale
Image { Image {
id: albumArt id: albumArt
anchors.fill: parent anchors.fill: parent
anchors.margins: 2 anchors.margins: 2 * Theme.uiScale
fillMode: Image.PreserveAspectCrop fillMode: Image.PreserveAspectCrop
smooth: true smooth: true
mipmap: true mipmap: true
cache: false cache: false
asynchronous: true asynchronous: true
sourceSize.width: 60 sourceSize.width: 60 * Theme.uiScale
sourceSize.height: 60 sourceSize.height: 60 * Theme.uiScale
source: MusicManager.trackArtUrl source: MusicManager.trackArtUrl
visible: source.toString() !== "" visible: source.toString() !== ""
@ -213,7 +213,7 @@ Rectangle {
anchors.centerIn: parent anchors.centerIn: parent
text: "album" text: "album"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: Theme.fontSizeBody font.pixelSize: Theme.fontSizeBody * Theme.uiScale
color: Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.4) color: Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.4)
visible: !albumArt.visible visible: !albumArt.visible
} }
@ -223,13 +223,13 @@ Rectangle {
// Track metadata // Track metadata
ColumnLayout { ColumnLayout {
Layout.fillWidth: true Layout.fillWidth: true
spacing: 4 spacing: 4 * Theme.uiScale
Text { Text {
text: MusicManager.trackTitle text: MusicManager.trackTitle
color: Theme.textPrimary color: Theme.textPrimary
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: Theme.fontSizeSmall font.pixelSize: Theme.fontSizeSmall * Theme.uiScale
font.bold: true font.bold: true
elide: Text.ElideRight elide: Text.ElideRight
wrapMode: Text.Wrap wrapMode: Text.Wrap
@ -241,7 +241,7 @@ Rectangle {
text: MusicManager.trackArtist text: MusicManager.trackArtist
color: Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.8) color: Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.8)
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: Theme.fontSizeCaption font.pixelSize: Theme.fontSizeCaption * Theme.uiScale
elide: Text.ElideRight elide: Text.ElideRight
Layout.fillWidth: true Layout.fillWidth: true
} }
@ -250,7 +250,7 @@ Rectangle {
text: MusicManager.trackAlbum text: MusicManager.trackAlbum
color: Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.6) color: Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.6)
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: Theme.fontSizeCaption font.pixelSize: Theme.fontSizeCaption * Theme.uiScale
elide: Text.ElideRight elide: Text.ElideRight
Layout.fillWidth: true Layout.fillWidth: true
} }
@ -261,8 +261,8 @@ Rectangle {
Rectangle { Rectangle {
id: progressBarBackground id: progressBarBackground
width: parent.width width: parent.width
height: 6 height: 6 * Theme.uiScale
radius: 3 radius: 3 * Theme.uiScale
color: Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.15) color: Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.15)
Layout.fillWidth: true Layout.fillWidth: true
@ -290,12 +290,12 @@ Rectangle {
// Interactive progress handle // Interactive progress handle
Rectangle { Rectangle {
id: progressHandle id: progressHandle
width: 12 width: 12 * Theme.uiScale
height: 12 height: 12 * Theme.uiScale
radius: 6 radius: 6 * Theme.uiScale
color: Theme.accentPrimary color: Theme.accentPrimary
border.color: Qt.lighter(Theme.accentPrimary, 1.3) border.color: Qt.lighter(Theme.accentPrimary, 1.3)
border.width: 1 border.width: 1 * Theme.uiScale
x: Math.max(0, Math.min(parent.width - width, progressFill.width - width / 2)) x: Math.max(0, Math.min(parent.width - width, progressFill.width - width / 2))
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
@ -334,18 +334,18 @@ Rectangle {
// Media controls // Media controls
RowLayout { RowLayout {
spacing: 4 spacing: 4 * Theme.uiScale
Layout.fillWidth: true Layout.fillWidth: true
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
// Previous button // Previous button
Rectangle { Rectangle {
width: 28 width: 28 * Theme.uiScale
height: 28 height: 28 * Theme.uiScale
radius: 14 radius: 14 * Theme.uiScale
color: previousButton.containsMouse ? Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.2) : Qt.darker(Theme.surface, 1.1) color: previousButton.containsMouse ? Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.2) : Qt.darker(Theme.surface, 1.1)
border.color: Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.3) border.color: Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.3)
border.width: 1 border.width: 1 * Theme.uiScale
MouseArea { MouseArea {
id: previousButton id: previousButton
@ -360,19 +360,19 @@ Rectangle {
anchors.centerIn: parent anchors.centerIn: parent
text: "skip_previous" text: "skip_previous"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: Theme.fontSizeCaption font.pixelSize: Theme.fontSizeCaption * Theme.uiScale
color: previousButton.enabled ? Theme.accentPrimary : Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.3) color: previousButton.enabled ? Theme.accentPrimary : Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.3)
} }
} }
// Play/Pause button // Play/Pause button
Rectangle { Rectangle {
width: 36 width: 36 * Theme.uiScale
height: 36 height: 36 * Theme.uiScale
radius: 18 radius: 18 * Theme.uiScale
color: playButton.containsMouse ? Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.2) : Qt.darker(Theme.surface, 1.1) color: playButton.containsMouse ? Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.2) : Qt.darker(Theme.surface, 1.1)
border.color: Theme.accentPrimary border.color: Theme.accentPrimary
border.width: 2 border.width: 2 * Theme.uiScale
MouseArea { MouseArea {
id: playButton id: playButton
@ -387,19 +387,19 @@ Rectangle {
anchors.centerIn: parent anchors.centerIn: parent
text: MusicManager.isPlaying ? "pause" : "play_arrow" text: MusicManager.isPlaying ? "pause" : "play_arrow"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: Theme.fontSizeBody font.pixelSize: Theme.fontSizeBody * Theme.uiScale
color: playButton.enabled ? Theme.accentPrimary : Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.3) color: playButton.enabled ? Theme.accentPrimary : Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.3)
} }
} }
// Next button // Next button
Rectangle { Rectangle {
width: 28 width: 28 * Theme.uiScale
height: 28 height: 28 * Theme.uiScale
radius: 14 radius: 14 * Theme.uiScale
color: nextButton.containsMouse ? Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.2) : Qt.darker(Theme.surface, 1.1) color: nextButton.containsMouse ? Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.2) : Qt.darker(Theme.surface, 1.1)
border.color: Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.3) border.color: Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.3)
border.width: 1 border.width: 1 * Theme.uiScale
MouseArea { MouseArea {
id: nextButton id: nextButton
@ -414,7 +414,7 @@ Rectangle {
anchors.centerIn: parent anchors.centerIn: parent
text: "skip_next" text: "skip_next"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: Theme.fontSizeCaption font.pixelSize: Theme.fontSizeCaption * Theme.uiScale
color: nextButton.enabled ? Theme.accentPrimary : Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.3) color: nextButton.enabled ? Theme.accentPrimary : Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.3)
} }
} }

196
Widgets/SidePanel/PanelPopup.qml
View file

@ -45,11 +45,28 @@ PanelWithOverlay {
property real slideOffset: width property real slideOffset: width
property bool isAnimating: false property bool isAnimating: false
property int leftPadding: 20 property int leftPadding: 20 * Theme.uiScale
property int bottomPadding: 20 property int bottomPadding: 20 * Theme.uiScale
// Recording properties // Recording properties
property bool isRecording: false property bool isRecording: false
Process {
id: checkRecordingProcess
command: ["pgrep", "-f", "gpu-screen-recorder.*portal"]
onExited: function(exitCode, exitStatus) {
var isActuallyRecording = exitCode === 0
if (isRecording && !isActuallyRecording) {
isRecording = isActuallyRecording
}
}
}
function checkRecordingStatus() {
if (isRecording) {
checkRecordingProcess.running = true
}
}
function showAt() { function showAt() {
if (!sidebarPopup.visible) { if (!sidebarPopup.visible) {
sidebarPopup.visible = true; sidebarPopup.visible = true;
@ -73,11 +90,7 @@ PanelWithOverlay {
if (shell && shell.settingsWindow && shell.settingsWindow.visible) if (shell && shell.settingsWindow && shell.settingsWindow.visible)
shell.settingsWindow.visible = false; shell.settingsWindow.visible = false;
if (wifiPanelLoader.active && wifiPanelLoader.item && wifiPanelLoader.item.visible)
wifiPanelLoader.item.visible = false;
if (bluetoothPanelLoader.active && bluetoothPanelLoader.item && bluetoothPanelLoader.item.visible)
bluetoothPanelLoader.item.visible = false;
if (sidebarPopup.visible) { if (sidebarPopup.visible) {
slideAnim.from = 0; slideAnim.from = 0;
@ -119,8 +132,8 @@ PanelWithOverlay {
quickAccessWidget.isRecording = false; quickAccessWidget.isRecording = false;
} }
implicitWidth: 500 implicitWidth: 500 * Theme.uiScale
implicitHeight: 800 implicitHeight: 700 * Theme.uiScale
visible: parent.visible visible: parent.visible
color: "transparent" color: "transparent"
anchors.top: parent.top anchors.top: parent.top
@ -173,7 +186,7 @@ PanelWithOverlay {
x: sidebarPopupRect.leftPadding + sidebarPopupRect.slideOffset x: sidebarPopupRect.leftPadding + sidebarPopupRect.slideOffset
y: 0 y: 0
color: Theme.backgroundPrimary color: Theme.backgroundPrimary
bottomLeftRadius: 20 bottomLeftRadius: 20 * Theme.uiScale
z: 0 z: 0
Behavior on x { Behavior on x {
@ -188,27 +201,7 @@ PanelWithOverlay {
} }
// LazyLoader for WifiPanel
LazyLoader {
id: wifiPanelLoader
loading: false
component: WifiPanel {
}
}
// LazyLoader for BluetoothPanel
LazyLoader {
id: bluetoothPanelLoader
loading: false
component: BluetoothPanel {
}
}
// SettingsIcon component // SettingsIcon component
SettingsIcon { SettingsIcon {
@ -228,11 +221,12 @@ PanelWithOverlay {
ColumnLayout { ColumnLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: 20 anchors.margins: 20 * Theme.uiScale
spacing: 16 spacing: 4 * Theme.uiScale
PowerMenu { PowerMenu {
id: systemWidget id: systemWidget
settingsModal: settingsModal
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
z: 3 z: 3
@ -240,14 +234,13 @@ PanelWithOverlay {
Weather { Weather {
id: weather id: weather
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
z: 2 z: 2
} }
// Music and System Monitor row // Music and System Monitor row
RowLayout { RowLayout {
spacing: 12 spacing: 12 * Theme.uiScale
Layout.fillWidth: true Layout.fillWidth: true
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
@ -257,123 +250,118 @@ PanelWithOverlay {
SystemMonitor { SystemMonitor {
id: systemMonitor id: systemMonitor
z: 2 z: 2
} }
} }
// Power profile, Wifi and Bluetooth row // Power profile, Record and Wallpaper row
RowLayout { RowLayout {
Layout.alignment: Qt.AlignLeft Layout.alignment: Qt.AlignVCenter
Layout.preferredHeight: 80 spacing: 10 * Theme.uiScale
spacing: 16 Layout.preferredHeight: 80 * Theme.uiScale
z: 3 z: 3
PowerProfile { PowerProfile {
Layout.alignment: Qt.AlignLeft Layout.alignment: Qt.AlignVCenter
Layout.preferredHeight: 80 Layout.preferredHeight: 80 * Theme.uiScale
} }
// Network card containing Wifi and Bluetooth // Record and Wallpaper card
Rectangle { Rectangle {
Layout.preferredHeight: 80 Layout.preferredHeight: 80 * Theme.uiScale
Layout.preferredWidth: 140 Layout.preferredWidth: 140 * Theme.uiScale
Layout.fillWidth: false Layout.fillWidth: false
color: Theme.surface color: Theme.surface
radius: 18 radius: 18 * Theme.uiScale
Row { Row {
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
spacing: 20 spacing: 20 * Theme.uiScale
// Wifi button // Record button
Rectangle { Rectangle {
id: wifiButton id: recordButton
width: 36 width: 36 * Theme.uiScale
height: 36 height: 36 * Theme.uiScale
radius: 18 radius: 18 * Theme.uiScale
border.color: Theme.accentPrimary border.color: Theme.accentPrimary
border.width: 1 border.width: 1 * Theme.uiScale
color: wifiButtonArea.containsMouse ? Theme.accentPrimary : "transparent" color: sidebarPopupRect.isRecording ? Theme.accentPrimary :
(recordButtonArea.containsMouse ? Theme.accentPrimary : "transparent")
Text { Text {
anchors.centerIn: parent anchors.centerIn: parent
text: "wifi" text: "photo_camera"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 22 font.pixelSize: 22 * Theme.uiScale
color: wifiButtonArea.containsMouse ? Theme.backgroundPrimary : Theme.accentPrimary color: sidebarPopupRect.isRecording || recordButtonArea.containsMouse ? Theme.backgroundPrimary : Theme.accentPrimary
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
} }
MouseArea { MouseArea {
id: wifiButtonArea id: recordButtonArea
anchors.fill: parent anchors.fill: parent
hoverEnabled: true hoverEnabled: true
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
onClicked: { onClicked: {
if (!wifiPanelLoader.active) if (sidebarPopupRect.isRecording) {
wifiPanelLoader.loading = true; sidebarPopupRect.stopRecording();
} else {
if (wifiPanelLoader.item) sidebarPopupRect.startRecording();
wifiPanelLoader.item.showAt(); }
} }
} }
StyledTooltip { StyledTooltip {
text: "Wifi" text: sidebarPopupRect.isRecording ? "Stop Recording" : "Start Recording"
targetItem: wifiButtonArea targetItem: recordButtonArea
tooltipVisible: wifiButtonArea.containsMouse tooltipVisible: recordButtonArea.containsMouse
} }
} }
// Bluetooth button // Wallpaper button
Rectangle { Rectangle {
id: bluetoothButton id: wallpaperButton
width: 36 width: 36 * Theme.uiScale
height: 36 height: 36 * Theme.uiScale
radius: 18 radius: 18 * Theme.uiScale
border.color: Theme.accentPrimary border.color: Theme.accentPrimary
border.width: 1 border.width: 1 * Theme.uiScale
color: bluetoothButtonArea.containsMouse ? Theme.accentPrimary : "transparent" color: wallpaperButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
Text { Text {
anchors.centerIn: parent anchors.centerIn: parent
text: "bluetooth" text: "image"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 22 font.pixelSize: 22 * Theme.uiScale
color: bluetoothButtonArea.containsMouse ? Theme.backgroundPrimary : Theme.accentPrimary color: wallpaperButtonArea.containsMouse ? Theme.backgroundPrimary : Theme.accentPrimary
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
} }
MouseArea { MouseArea {
id: bluetoothButtonArea id: wallpaperButtonArea
anchors.fill: parent anchors.fill: parent
hoverEnabled: true hoverEnabled: true
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
onClicked: { onClicked: {
if (!bluetoothPanelLoader.active) if (typeof settingsModal !== 'undefined' && settingsModal && settingsModal.openSettings)
bluetoothPanelLoader.loading = true; settingsModal.openSettings(6);
if (bluetoothPanelLoader.item)
bluetoothPanelLoader.item.showAt();
} }
} }
StyledTooltip { StyledTooltip {
text: "Bluetooth" text: "Wallpaper"
targetItem: bluetoothButtonArea targetItem: wallpaperButtonArea
tooltipVisible: bluetoothButtonArea.containsMouse tooltipVisible: wallpaperButtonArea.containsMouse
} }
} }
@ -384,43 +372,7 @@ PanelWithOverlay {
} }
Item {
Layout.fillHeight: true
}
// QuickAccess widget
QuickAccess {
// 6 is the wallpaper tab index
id: quickAccessWidget
Layout.alignment: Qt.AlignHCenter
Layout.topMargin: -16
z: 2
isRecording: sidebarPopupRect.isRecording
onRecordingRequested: {
sidebarPopupRect.startRecording();
}
onStopRecordingRequested: {
sidebarPopupRect.stopRecording();
}
onRecordingStateMismatch: function(actualState) {
isRecording = actualState;
quickAccessWidget.isRecording = actualState;
}
onSettingsRequested: {
// Use the SettingsModal's openSettings function
if (typeof settingsModal !== 'undefined' && settingsModal && settingsModal.openSettings)
settingsModal.openSettings();
}
onWallpaperSelectorRequested: {
// Use the SettingsModal's openSettings function with wallpaper tab (index 6)
if (typeof settingsModal !== 'undefined' && settingsModal && settingsModal.openSettings)
settingsModal.openSettings(6);
}
}
} }
@ -448,7 +400,7 @@ PanelWithOverlay {
size: 1.1 size: 1.1
fillColor: Theme.backgroundPrimary fillColor: Theme.backgroundPrimary
anchors.top: parent.top anchors.top: parent.top
offsetX: -447 + sidebarPopupRect.slideOffset offsetX: -464 + sidebarPopupRect.slideOffset
offsetY: 0 offsetY: 0
Behavior on offsetX { Behavior on offsetX {

156
Widgets/SidePanel/PowerMenu.qml
View file

@ -17,6 +17,7 @@ Rectangle {
property string uptimeText: "--:--" property string uptimeText: "--:--"
property bool panelVisible: false property bool panelVisible: false
property var settingsModal: null
function logout() { function logout() {
if (WorkspaceManager.isNiri) if (WorkspaceManager.isNiri)
@ -43,8 +44,8 @@ Rectangle {
uptimeProcess.running = true; uptimeProcess.running = true;
} }
width: 440 width: 440 * Theme.uiScale
height: 80 height: 80 * Theme.uiScale
color: "transparent" color: "transparent"
anchors.horizontalCenterOffset: -2 anchors.horizontalCenterOffset: -2
onPanelVisibleChanged: { onPanelVisibleChanged: {
@ -61,29 +62,29 @@ Rectangle {
anchors.fill: parent anchors.fill: parent
color: Theme.surface color: Theme.surface
radius: 18 radius: 18 * Theme.uiScale
ColumnLayout { ColumnLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: 18 anchors.margins: 18 * Theme.uiScale
spacing: 12 spacing: 12 * Theme.uiScale
RowLayout { RowLayout {
Layout.fillWidth: true Layout.fillWidth: true
spacing: 12 spacing: 12 * Theme.uiScale
Rectangle { Rectangle {
width: 48 width: 48 * Theme.uiScale
height: 48 height: 48 * Theme.uiScale
radius: 24 radius: 24 * Theme.uiScale
color: Theme.accentPrimary color: Theme.accentPrimary
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
color: "transparent" color: "transparent"
radius: 24 radius: 24 * Theme.uiScale
border.color: Theme.accentPrimary border.color: Theme.accentPrimary
border.width: 2 border.width: 2 * Theme.uiScale
z: 2 z: 2
} }
@ -93,13 +94,13 @@ Rectangle {
} }
ColumnLayout { ColumnLayout {
spacing: 4 spacing: 4 * Theme.uiScale
Layout.fillWidth: true Layout.fillWidth: true
Text { Text {
text: Quickshell.env("USER") text: Quickshell.env("USER")
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: 16 font.pixelSize: 16 * Theme.uiScale
font.bold: true font.bold: true
color: Theme.textPrimary color: Theme.textPrimary
} }
@ -107,7 +108,7 @@ Rectangle {
Text { Text {
text: "System Uptime: " + uptimeText text: "System Uptime: " + uptimeText
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: 12 font.pixelSize: 12 * Theme.uiScale
color: Theme.textSecondary color: Theme.textSecondary
} }
@ -117,21 +118,62 @@ Rectangle {
Layout.fillWidth: true Layout.fillWidth: true
} }
Rectangle {
id: settingsButton
width: 32 * Theme.uiScale
height: 32 * Theme.uiScale
radius: 16 * Theme.uiScale
color: settingsButtonArea.containsMouse || settingsButtonArea.pressed ? Theme.accentPrimary : "transparent"
border.color: Theme.accentPrimary
border.width: 1 * Theme.uiScale
Text {
anchors.centerIn: parent
anchors.horizontalCenterOffset: -1
text: "settings"
font.family: "Material Symbols Outlined"
font.pixelSize: 16 * Theme.uiScale
color: settingsButtonArea.containsMouse || settingsButtonArea.pressed ? Theme.backgroundPrimary : Theme.accentPrimary
}
MouseArea {
id: settingsButtonArea
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
onClicked: {
if (typeof settingsModal !== 'undefined' && settingsModal && settingsModal.openSettings)
settingsModal.openSettings();
}
}
StyledTooltip {
id: settingsTooltip
text: "Settings"
targetItem: settingsButton
tooltipVisible: settingsButtonArea.containsMouse
}
}
Rectangle { Rectangle {
id: systemButton id: systemButton
width: 32 width: 32 * Theme.uiScale
height: 32 height: 32 * Theme.uiScale
radius: 16 radius: 16 * Theme.uiScale
color: systemButtonArea.containsMouse || systemButtonArea.pressed ? Theme.accentPrimary : "transparent" color: systemButtonArea.containsMouse || systemButtonArea.pressed ? Theme.accentPrimary : "transparent"
border.color: Theme.accentPrimary border.color: Theme.accentPrimary
border.width: 1 border.width: 1 * Theme.uiScale
Text { Text {
anchors.centerIn: parent anchors.centerIn: parent
text: "power_settings_new" text: "power_settings_new"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 16 font.pixelSize: 16 * Theme.uiScale
color: systemButtonArea.containsMouse || systemButtonArea.pressed ? Theme.backgroundPrimary : Theme.accentPrimary color: systemButtonArea.containsMouse || systemButtonArea.pressed ? Theme.backgroundPrimary : Theme.accentPrimary
} }
@ -169,18 +211,18 @@ Rectangle {
anchors.right: systemButton.right anchors.right: systemButton.right
Rectangle { Rectangle {
width: 160 width: 160 * Theme.uiScale
height: 220 height: 220 * Theme.uiScale
color: Theme.surface color: Theme.surface
radius: 8 radius: 8 * Theme.uiScale
border.color: Theme.outline border.color: Theme.outline
border.width: 1 border.width: 1 * Theme.uiScale
visible: true visible: true
z: 9999 z: 9999
anchors.top: parent.top anchors.top: parent.top
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 32 anchors.rightMargin: 32 * Theme.uiScale
anchors.topMargin: systemButton.y + systemButton.height + 48 anchors.topMargin: systemButton.y + systemButton.height + 48 * Theme.uiScale
// Prevent closing when clicking in the panel bg // Prevent closing when clicking in the panel bg
MouseArea { MouseArea {
@ -189,31 +231,31 @@ Rectangle {
ColumnLayout { ColumnLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: 8 anchors.margins: 8 * Theme.uiScale
spacing: 4 spacing: 4 * Theme.uiScale
Rectangle { Rectangle {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 36 Layout.preferredHeight: 36 * Theme.uiScale
radius: 6 radius: 6 * Theme.uiScale
color: lockButtonArea.containsMouse ? Theme.accentPrimary : "transparent" color: lockButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
RowLayout { RowLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: 12 anchors.margins: 12 * Theme.uiScale
spacing: 8 spacing: 8 * Theme.uiScale
Text { Text {
text: "lock_outline" text: "lock_outline"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 16 font.pixelSize: 16 * Theme.uiScale
color: lockButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary color: lockButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
} }
Text { Text {
text: "Lock Screen" text: "Lock Screen"
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: 14 font.pixelSize: 14 * Theme.uiScale
color: lockButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary color: lockButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
Layout.fillWidth: true Layout.fillWidth: true
} }
@ -236,25 +278,25 @@ Rectangle {
Rectangle { Rectangle {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 36 Layout.preferredHeight: 36 * Theme.uiScale
radius: 6 radius: 6 * Theme.uiScale
color: suspendButtonArea.containsMouse ? Theme.accentPrimary : "transparent" color: suspendButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
RowLayout { RowLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: 12 anchors.margins: 12 * Theme.uiScale
spacing: 8 spacing: 8 * Theme.uiScale
Text { Text {
text: "bedtime" text: "bedtime"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 16 font.pixelSize: 16 * Theme.uiScale
color: suspendButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary color: suspendButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
} }
Text { Text {
text: "Suspend" text: "Suspend"
font.pixelSize: 14 font.pixelSize: 14 * Theme.uiScale
color: suspendButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary color: suspendButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
Layout.fillWidth: true Layout.fillWidth: true
} }
@ -277,26 +319,26 @@ Rectangle {
Rectangle { Rectangle {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 36 Layout.preferredHeight: 36 * Theme.uiScale
radius: 6 radius: 6 * Theme.uiScale
color: rebootButtonArea.containsMouse ? Theme.accentPrimary : "transparent" color: rebootButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
RowLayout { RowLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: 12 anchors.margins: 12 * Theme.uiScale
spacing: 8 spacing: 8 * Theme.uiScale
Text { Text {
text: "refresh" text: "refresh"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 16 font.pixelSize: 16 * Theme.uiScale
color: rebootButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary color: rebootButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
} }
Text { Text {
text: "Reboot" text: "Reboot"
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: 14 font.pixelSize: 14 * Theme.uiScale
color: rebootButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary color: rebootButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
Layout.fillWidth: true Layout.fillWidth: true
} }
@ -319,25 +361,25 @@ Rectangle {
Rectangle { Rectangle {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 36 Layout.preferredHeight: 36 * Theme.uiScale
radius: 6 radius: 6 * Theme.uiScale
color: logoutButtonArea.containsMouse ? Theme.accentPrimary : "transparent" color: logoutButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
RowLayout { RowLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: 12 anchors.margins: 12 * Theme.uiScale
spacing: 8 spacing: 8 * Theme.uiScale
Text { Text {
text: "exit_to_app" text: "exit_to_app"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 16 font.pixelSize: 16 * Theme.uiScale
color: logoutButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary color: logoutButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
} }
Text { Text {
text: "Logout" text: "Logout"
font.pixelSize: 14 font.pixelSize: 14 * Theme.uiScale
color: logoutButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary color: logoutButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
Layout.fillWidth: true Layout.fillWidth: true
} }
@ -360,25 +402,25 @@ Rectangle {
Rectangle { Rectangle {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 36 Layout.preferredHeight: 36 * Theme.uiScale
radius: 6 radius: 6 * Theme.uiScale
color: shutdownButtonArea.containsMouse ? Theme.accentPrimary : "transparent" color: shutdownButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
RowLayout { RowLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: 12 anchors.margins: 12 * Theme.uiScale
spacing: 8 spacing: 8 * Theme.uiScale
Text { Text {
text: "power_settings_new" text: "power_settings_new"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 16 font.pixelSize: 16 * Theme.uiScale
color: shutdownButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary color: shutdownButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
} }
Text { Text {
text: "Shutdown" text: "Shutdown"
font.pixelSize: 14 font.pixelSize: 14 * Theme.uiScale
color: shutdownButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary color: shutdownButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
Layout.fillWidth: true Layout.fillWidth: true
} }

32
Widgets/SidePanel/PowerProfile.qml
View file

@ -7,22 +7,22 @@ import qs.Components
Rectangle { Rectangle {
id: card id: card
width: 200 width: 200 * Theme.uiScale
height: 70 height: 70 * Theme.uiScale
color: Theme.surface color: Theme.surface
radius: 18 radius: 18 * Theme.uiScale
Row { Row {
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
spacing: 20 spacing: 20 * Theme.uiScale
Rectangle { Rectangle {
width: 36; height: 36 width: 36 * Theme.uiScale; height: 36 * Theme.uiScale
radius: 18 radius: 18 * Theme.uiScale
border.color: Theme.accentPrimary border.color: Theme.accentPrimary
border.width: 1 border.width: 1 * Theme.uiScale
color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.Performance) color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.Performance)
? Theme.accentPrimary ? Theme.accentPrimary
: (perfMouseArea.containsMouse ? Theme.accentPrimary : "transparent") : (perfMouseArea.containsMouse ? Theme.accentPrimary : "transparent")
@ -33,7 +33,7 @@ Rectangle {
anchors.centerIn: parent anchors.centerIn: parent
text: "speed" text: "speed"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 22 font.pixelSize: 22 * Theme.uiScale
color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.Performance) || perfMouseArea.containsMouse color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.Performance) || perfMouseArea.containsMouse
? Theme.backgroundPrimary ? Theme.backgroundPrimary
: Theme.accentPrimary : Theme.accentPrimary
@ -65,10 +65,10 @@ Rectangle {
Rectangle { Rectangle {
width: 36; height: 36 width: 36 * Theme.uiScale; height: 36 * Theme.uiScale
radius: 18 radius: 18 * Theme.uiScale
border.color: Theme.accentPrimary border.color: Theme.accentPrimary
border.width: 1 border.width: 1 * Theme.uiScale
color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.Balanced) color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.Balanced)
? Theme.accentPrimary ? Theme.accentPrimary
: (balMouseArea.containsMouse ? Theme.accentPrimary : "transparent") : (balMouseArea.containsMouse ? Theme.accentPrimary : "transparent")
@ -79,7 +79,7 @@ Rectangle {
anchors.centerIn: parent anchors.centerIn: parent
text: "balance" text: "balance"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 22 font.pixelSize: 22 * Theme.uiScale
color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.Balanced) || balMouseArea.containsMouse color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.Balanced) || balMouseArea.containsMouse
? Theme.backgroundPrimary ? Theme.backgroundPrimary
: Theme.accentPrimary : Theme.accentPrimary
@ -111,10 +111,10 @@ Rectangle {
Rectangle { Rectangle {
width: 36; height: 36 width: 36 * Theme.uiScale; height: 36 * Theme.uiScale
radius: 18 radius: 18 * Theme.uiScale
border.color: Theme.accentPrimary border.color: Theme.accentPrimary
border.width: 1 border.width: 1 * Theme.uiScale
color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.PowerSaver) color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.PowerSaver)
? Theme.accentPrimary ? Theme.accentPrimary
: (saveMouseArea.containsMouse ? Theme.accentPrimary : "transparent") : (saveMouseArea.containsMouse ? Theme.accentPrimary : "transparent")
@ -125,7 +125,7 @@ Rectangle {
anchors.centerIn: parent anchors.centerIn: parent
text: "eco" text: "eco"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 22 font.pixelSize: 22 * Theme.uiScale
color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.PowerSaver) || saveMouseArea.containsMouse color: (typeof PowerProfiles !== 'undefined' && PowerProfiles.profile === PowerProfile.PowerSaver) || saveMouseArea.containsMouse
? Theme.backgroundPrimary ? Theme.backgroundPrimary
: Theme.accentPrimary : Theme.accentPrimary

4
Widgets/SidePanel/SettingsIcon.qml
View file

@ -10,8 +10,8 @@ import qs.Components
PanelWindow { PanelWindow {
id: settingsModal id: settingsModal
implicitWidth: 480 implicitWidth: 480 * Theme.uiScale
implicitHeight: 780 implicitHeight: 780 * Theme.uiScale
visible: false visible: false
color: "transparent" color: "transparent"
anchors.top: true anchors.top: true

4
Widgets/SidePanel/SettingsModal.qml
View file

@ -10,8 +10,8 @@ import qs.Components
PanelWindow { PanelWindow {
id: settingsModal id: settingsModal
implicitWidth: 480 implicitWidth: 480 * Theme.uiScale
implicitHeight: 780 implicitHeight: 780 * Theme.uiScale
visible: false visible: false
color: "transparent" color: "transparent"
anchors.top: true anchors.top: true

42
Widgets/SidePanel/SystemMonitor.qml
View file

@ -8,8 +8,8 @@ import qs.Settings
Rectangle { Rectangle {
id: systemMonitor id: systemMonitor
width: 70 width: 70 * Theme.uiScale
height: 250 height: 250 * Theme.uiScale
color: "transparent" color: "transparent"
// Track visibility state for panel integration // Track visibility state for panel integration
@ -19,26 +19,26 @@ Rectangle {
id: card id: card
anchors.fill: parent anchors.fill: parent
color: Theme.surface color: Theme.surface
radius: 18 radius: 18 * Theme.uiScale
ColumnLayout { ColumnLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: 8 anchors.margins: 8 * Theme.uiScale
spacing: 12 spacing: 12 * Theme.uiScale
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
// CPU usage indicator with circular progress bar // CPU usage indicator with circular progress bar
Item { Item {
width: 50; height: 50 width: 50 * Theme.uiScale; height: 50 * Theme.uiScale
CircularProgressBar { CircularProgressBar {
id: cpuBar id: cpuBar
progress: Sysinfo.cpuUsage / 100 progress: Sysinfo.cpuUsage / 100
size: 50 size: 50 * Theme.uiScale
strokeWidth: 4 strokeWidth: 4 * Theme.uiScale
hasNotch: true hasNotch: true
notchIcon: "speed" notchIcon: "speed"
notchIconSize: 14 notchIconSize: 14 * Theme.uiScale
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
} }
MouseArea { MouseArea {
@ -60,16 +60,16 @@ Rectangle {
// CPU temperature indicator with circular progress bar // CPU temperature indicator with circular progress bar
Item { Item {
width: 50; height: 50 width: 50 * Theme.uiScale; height: 50 * Theme.uiScale
CircularProgressBar { CircularProgressBar {
id: tempBar id: tempBar
progress: Sysinfo.cpuTemp / 100 progress: Sysinfo.cpuTemp / 100
size: 50 size: 50 * Theme.uiScale
strokeWidth: 4 strokeWidth: 4 * Theme.uiScale
hasNotch: true hasNotch: true
units: "°C" units: "°C"
notchIcon: "thermometer" notchIcon: "thermometer"
notchIconSize: 14 notchIconSize: 14 * Theme.uiScale
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
} }
MouseArea { MouseArea {
@ -91,15 +91,15 @@ Rectangle {
// Memory usage indicator with circular progress bar // Memory usage indicator with circular progress bar
Item { Item {
width: 50; height: 50 width: 50 * Theme.uiScale; height: 50 * Theme.uiScale
CircularProgressBar { CircularProgressBar {
id: memBar id: memBar
progress: Sysinfo.memoryUsagePer / 100 progress: Sysinfo.memoryUsagePer / 100
size: 50 size: 50 * Theme.uiScale
strokeWidth: 4 strokeWidth: 4 * Theme.uiScale
hasNotch: true hasNotch: true
notchIcon: "memory" notchIcon: "memory"
notchIconSize: 14 notchIconSize: 14 * Theme.uiScale
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
} }
MouseArea { MouseArea {
@ -121,15 +121,15 @@ Rectangle {
// Disk usage indicator with circular progress bar // Disk usage indicator with circular progress bar
Item { Item {
width: 50; height: 50 width: 50 * Theme.uiScale; height: 50 * Theme.uiScale
CircularProgressBar { CircularProgressBar {
id: diskBar id: diskBar
progress: Sysinfo.diskUsage / 100 progress: Sysinfo.diskUsage / 100
size: 50 size: 50 * Theme.uiScale
strokeWidth: 4 strokeWidth: 4 * Theme.uiScale
hasNotch: true hasNotch: true
notchIcon: "storage" notchIcon: "storage"
notchIconSize: 14 notchIconSize: 14 * Theme.uiScale
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
} }
MouseArea { MouseArea {

48
Widgets/SidePanel/Weather.qml
View file

@ -6,8 +6,8 @@ import "../../Helpers/Weather.js" as WeatherHelper
Rectangle { Rectangle {
id: weatherRoot id: weatherRoot
width: 440 width: 440 * Theme.uiScale
height: 180 height: 180 * Theme.uiScale
color: "transparent" color: "transparent"
anchors.horizontalCenterOffset: -2 anchors.horizontalCenterOffset: -2
@ -83,29 +83,29 @@ Rectangle {
id: card id: card
anchors.fill: parent anchors.fill: parent
color: Theme.surface color: Theme.surface
radius: 18 radius: 18 * Theme.uiScale
ColumnLayout { ColumnLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: 18 anchors.margins: 18 * Theme.uiScale
spacing: 12 spacing: 12 * Theme.uiScale
RowLayout { RowLayout {
spacing: 12 spacing: 12 * Theme.uiScale
Layout.fillWidth: true Layout.fillWidth: true
RowLayout { RowLayout {
spacing: 12 spacing: 12 * Theme.uiScale
Layout.preferredWidth: 140 Layout.preferredWidth: 140 * Theme.uiScale
Text { Text {
id: weatherIcon id: weatherIcon
text: isLoading ? "sync" : (weatherData && weatherData.current_weather ? materialSymbolForCode(weatherData.current_weather.weathercode) : "cloud") text: isLoading ? "sync" : (weatherData && weatherData.current_weather ? materialSymbolForCode(weatherData.current_weather.weathercode) : "cloud")
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 28 font.pixelSize: 28 * Theme.uiScale
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
color: isLoading ? Theme.accentPrimary : Theme.accentPrimary color: isLoading ? Theme.accentPrimary : Theme.accentPrimary
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
@ -121,28 +121,28 @@ Rectangle {
} }
ColumnLayout { ColumnLayout {
spacing: 2 spacing: 2 * Theme.uiScale
RowLayout { RowLayout {
spacing: 4 spacing: 4 * Theme.uiScale
Text { Text {
text: city text: city
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: 14 font.pixelSize: 14 * Theme.uiScale
font.bold: true font.bold: true
color: Theme.textPrimary color: Theme.textPrimary
} }
Text { Text {
text: weatherData && weatherData.timezone_abbreviation ? `(${weatherData.timezone_abbreviation})` : "" text: weatherData && weatherData.timezone_abbreviation ? `(${weatherData.timezone_abbreviation})` : ""
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: 10 font.pixelSize: 10 * Theme.uiScale
color: Theme.textSecondary color: Theme.textSecondary
leftPadding: 2 leftPadding: 2 * Theme.uiScale
} }
} }
Text { Text {
text: weatherData && weatherData.current_weather ? ((Settings.settings.useFahrenheit !== undefined ? Settings.settings.useFahrenheit : false) ? `${Math.round(weatherData.current_weather.temperature * 9/5 + 32)}°F` : `${Math.round(weatherData.current_weather.temperature)}°C`) : ((Settings.settings.useFahrenheit !== undefined ? Settings.settings.useFahrenheit : false) ? "--°F" : "--°C") text: weatherData && weatherData.current_weather ? ((Settings.settings.useFahrenheit !== undefined ? Settings.settings.useFahrenheit : false) ? `${Math.round(weatherData.current_weather.temperature * 9/5 + 32)}°F` : `${Math.round(weatherData.current_weather.temperature)}°C`) : ((Settings.settings.useFahrenheit !== undefined ? Settings.settings.useFahrenheit : false) ? "--°F" : "--°C")
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: 24 font.pixelSize: 24 * Theme.uiScale
font.bold: true font.bold: true
color: Theme.textPrimary color: Theme.textPrimary
} }
@ -157,16 +157,16 @@ Rectangle {
Rectangle { Rectangle {
width: parent.width width: parent.width
height: 1 height: 1 * Theme.uiScale
color: Qt.rgba(Theme.textSecondary.g, Theme.textSecondary.g, Theme.textSecondary.b, 0.12) color: Qt.rgba(Theme.textSecondary.g, Theme.textSecondary.g, Theme.textSecondary.b, 0.12)
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: 2 Layout.topMargin: 2 * Theme.uiScale
Layout.bottomMargin: 2 Layout.bottomMargin: 2 * Theme.uiScale
} }
RowLayout { RowLayout {
spacing: 12 spacing: 12 * Theme.uiScale
Layout.fillWidth: true Layout.fillWidth: true
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
visible: weatherData && weatherData.daily && weatherData.daily.time visible: weatherData && weatherData.daily && weatherData.daily.time
@ -174,13 +174,13 @@ Rectangle {
Repeater { Repeater {
model: weatherData && weatherData.daily && weatherData.daily.time ? 5 : 0 model: weatherData && weatherData.daily && weatherData.daily.time ? 5 : 0
delegate: ColumnLayout { delegate: ColumnLayout {
spacing: 2 spacing: 2 * Theme.uiScale
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
Text { Text {
text: Qt.formatDateTime(new Date(weatherData.daily.time[index]), "ddd") text: Qt.formatDateTime(new Date(weatherData.daily.time[index]), "ddd")
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: 12 font.pixelSize: 12 * Theme.uiScale
color: Theme.textSecondary color: Theme.textSecondary
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
@ -189,7 +189,7 @@ Rectangle {
text: materialSymbolForCode(weatherData.daily.weathercode[index]) text: materialSymbolForCode(weatherData.daily.weathercode[index])
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pixelSize: 22 font.pixelSize: 22 * Theme.uiScale
color: Theme.accentPrimary color: Theme.accentPrimary
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
@ -198,7 +198,7 @@ Rectangle {
text: weatherData && weatherData.daily ? ((Settings.settings.useFahrenheit !== undefined ? Settings.settings.useFahrenheit : false) ? `${Math.round(weatherData.daily.temperature_2m_max[index] * 9/5 + 32)}° / ${Math.round(weatherData.daily.temperature_2m_min[index] * 9/5 + 32)}°` : `${Math.round(weatherData.daily.temperature_2m_max[index])}° / ${Math.round(weatherData.daily.temperature_2m_min[index])}°`) : ((Settings.settings.useFahrenheit !== undefined ? Settings.settings.useFahrenheit : false) ? "--° / --°" : "--° / --°") text: weatherData && weatherData.daily ? ((Settings.settings.useFahrenheit !== undefined ? Settings.settings.useFahrenheit : false) ? `${Math.round(weatherData.daily.temperature_2m_max[index] * 9/5 + 32)}° / ${Math.round(weatherData.daily.temperature_2m_min[index] * 9/5 + 32)}°` : `${Math.round(weatherData.daily.temperature_2m_max[index])}° / ${Math.round(weatherData.daily.temperature_2m_min[index])}°`) : ((Settings.settings.useFahrenheit !== undefined ? Settings.settings.useFahrenheit : false) ? "--° / --°" : "--° / --°")
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: 12 font.pixelSize: 12 * Theme.uiScale
color: Theme.textPrimary color: Theme.textPrimary
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
@ -213,7 +213,7 @@ Rectangle {
color: Theme.error color: Theme.error
visible: errorString !== "" visible: errorString !== ""
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.pixelSize: 10 font.pixelSize: 10 * Theme.uiScale
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
} }

14
shell.qml
View file

@ -213,4 +213,18 @@ Scope {
} }
} }
} }
Rectangle {
width: 200 * Theme.uiScale
height: 40 * Theme.uiScale
color: "#333"
anchors.top: parent.top
anchors.left: parent.left
Text {
text: "UI Scale Demo"
anchors.centerIn: parent
font.pixelSize: 16 * Theme.uiScale
color: "white"
}
}
} }