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

535
Widgets/SettingsWindow/SettingsWindow.qml
View file

@ -148,8 +148,8 @@ PanelWithOverlay {
Rectangle {
id: settingsWindowRect
implicitWidth: Quickshell.screens.length > 0 ? Quickshell.screens[0].width * 2 / 3 : 600
implicitHeight: Quickshell.screens.length > 0 ? Quickshell.screens[0].height * 2 / 3 : 400
implicitWidth: Quickshell.screens.length > 0 ? Math.min(Quickshell.screens[0].width * 2 / 3, 1200) * Theme.uiScale : 600 * Theme.uiScale
implicitHeight: Quickshell.screens.length > 0 ? Math.min(Quickshell.screens[0].height * 2 / 3, 800) * Theme.uiScale : 400 * Theme.uiScale
visible: parent.visible
color: "transparent"
// Center the settings window on screen
@ -160,14 +160,15 @@ PanelWithOverlay {
anchors.fill: parent
}
// Background rectangle
Rectangle {
id: background
color: Theme.backgroundPrimary
anchors.fill: parent
radius: 20
radius: 20 * Theme.uiScale
border.color: Theme.outline
border.width: 1
border.width: 1 * Theme.uiScale
MultiEffect {
source: background
@ -184,10 +185,11 @@ PanelWithOverlay {
Rectangle {
id: settings
clip: true
color: Theme.backgroundPrimary
topRightRadius: 20
bottomRightRadius: 20
topRightRadius: 20 * Theme.uiScale
bottomRightRadius: 20 * Theme.uiScale
anchors {
left: tabs.right
@ -197,285 +199,288 @@ PanelWithOverlay {
margins: 12
}
Rectangle {
id: headerArea
Rectangle {
id: headerArea
height: 48
color: "transparent"
height: 48 * Theme.uiScale
color: "transparent"
anchors {
top: parent.top
left: parent.left
right: parent.right
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
anchors {
top: parent.top
left: parent.left
right: parent.right
margins: 16
}
// Wallpaper Selection Button (only visible on Wallpaper tab)
Rectangle {
width: 160
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
RowLayout {
anchors.fill: parent
spacing: 12 * Theme.uiScale
Text {
anchors.centerIn: parent
text: "close"
font.family: closeButtonArea.containsMouse ? "Material Symbols Rounded" : "Material Symbols Outlined"
font.pixelSize: 18
color: closeButtonArea.containsMouse ? Theme.onAccent : Theme.accentPrimary
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 * Theme.uiScale
font.bold: true
color: Theme.textPrimary
Layout.fillWidth: true
}
MouseArea {
id: closeButtonArea
// Wallpaper Selection Button (only visible on Wallpaper tab)
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
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: panelMain.dismiss()
}
Row {
anchors.centerIn: parent
spacing: 6 * Theme.uiScale
}
}
}
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: "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
}
Text {
text: "Select Wallpaper"
font.pixelSize: 13 * Theme.uiScale
font.bold: true
color: wallpaperButtonArea.containsMouse ? Theme.onAccent : Theme.accentPrimary
anchors.verticalCenter: parent.verticalCenter
}
}
Label {
id: icon
MouseArea {
id: wallpaperButtonArea
text: modelData.icon
font.family: "Material Symbols Outlined"
font.pixelSize: 24
color: index === activeTabIndex ? Theme.accentPrimary : Theme.textPrimary
opacity: index === activeTabIndex ? 1 : 0.8
Layout.leftMargin: 20
Layout.preferredWidth: 24
Layout.preferredHeight: 24
Layout.alignment: Qt.AlignVCenter
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
// Show the wallpaper selector
wallpaperSelector.show();
}
}
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 {
width: parent.width
height: 1
color: Theme.outline
opacity: 0.6
visible: index < (repeater.count - 1)
anchors.bottom: parent.bottom
width: 32 * Theme.uiScale
height: 32 * Theme.uiScale
radius: 16 * Theme.uiScale
color: closeButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
border.color: Theme.accentPrimary
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
padding: 0
rightPadding: 12
clip: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: ScrollBar.AsNeeded
ColumnLayout {
id: mainLayout
anchors.left: parent.left
anchors.right: parent.right
width: parent.availableWidth
anchors.top: parent.top
spacing: 8
@ -165,7 +169,7 @@ Item {
Text {
text: "Noctalia"
font.pixelSize: 24
font.pixelSize: 24 * Theme.uiScale
font.bold: true
color: Theme.textPrimary
Layout.alignment: Qt.AlignCenter
@ -179,28 +183,28 @@ Item {
Text {
text: "Latest Version:"
font.pixelSize: 16
font.pixelSize: 16 * Theme.uiScale
color: Theme.textSecondary
Layout.alignment: Qt.AlignRight
}
Text {
text: root.latestVersion
font.pixelSize: 16
font.pixelSize: 16 * Theme.uiScale
color: Theme.textPrimary
font.bold: true
}
Text {
text: "Installed Version:"
font.pixelSize: 16
font.pixelSize: 16 * Theme.uiScale
color: Theme.textSecondary
Layout.alignment: Qt.AlignRight
}
Text {
text: root.currentVersion
font.pixelSize: 16
font.pixelSize: 16 * Theme.uiScale
color: Theme.textPrimary
font.bold: true
}
@ -242,7 +246,7 @@ Item {
Text {
text: "system_update"
font.family: "Material Symbols Outlined"
font.pixelSize: 18
font.pixelSize: 18 * Theme.uiScale
color: updateArea.containsMouse ? Theme.backgroundPrimary : Theme.accentPrimary
}
@ -250,7 +254,7 @@ Item {
id: updateText
text: "Download latest release"
font.pixelSize: 14
font.pixelSize: 14 * Theme.uiScale
color: updateArea.containsMouse ? Theme.backgroundPrimary : Theme.accentPrimary
}
@ -271,7 +275,7 @@ Item {
Text {
text: "Description something something <.< I hate writing text..."
font.pixelSize: 14
font.pixelSize: 14 * Theme.uiScale
color: Theme.textSecondary
Layout.alignment: Qt.AlignCenter
Layout.topMargin: 24
@ -298,14 +302,14 @@ Item {
Text {
text: "Contributors"
font.pixelSize: 18
font.pixelSize: 18 * Theme.uiScale
font.bold: true
color: Theme.textPrimary
}
Text {
text: "(" + root.contributors.length + ")"
font.pixelSize: 14
font.pixelSize: 14 * Theme.uiScale
color: Theme.textSecondary
}
@ -384,7 +388,7 @@ Item {
anchors.centerIn: parent
text: "person"
font.family: "Material Symbols Outlined"
font.pixelSize: 24
font.pixelSize: 24 * Theme.uiScale
color: contributorArea.containsMouse ? Theme.backgroundPrimary : Theme.textPrimary
visible: !avatarImage.source || avatarImage.status !== Image.Ready
}
@ -398,7 +402,7 @@ Item {
Text {
text: modelData.login || "Unknown"
font.pixelSize: 13
font.pixelSize: 13 * Theme.uiScale
color: contributorArea.containsMouse ? Theme.backgroundPrimary : Theme.textPrimary
elide: Text.ElideRight
Layout.fillWidth: true
@ -406,7 +410,7 @@ Item {
Text {
text: (modelData.contributions || 0) + " commits"
font.pixelSize: 11
font.pixelSize: 11 * Theme.uiScale
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.Components
ColumnLayout {
id: root
spacing: 0
ScrollView {
anchors.fill: parent
anchors.margins: 0
Item {
Layout.fillWidth: true
Layout.preferredHeight: 0
}
padding: 0
rightPadding: 12
clip: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: ScrollBar.AsNeeded
ColumnLayout {
spacing: 4
Layout.fillWidth: true
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 {
id: root
width: parent.availableWidth
spacing: 0
Layout.fillWidth: 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 {
id: root
width: 64
height: 32
radius: 16
width: 64 * Theme.uiScale
height: 32 * Theme.uiScale
radius: 16 * Theme.uiScale
color: Theme.surfaceVariant
border.color: Theme.outline
border.width: 1
border.width: 1 * Theme.uiScale
property bool useFahrenheit: Settings.settings.useFahrenheit
Rectangle {
id: slider
width: parent.width / 2 - 4
height: parent.height - 4
radius: 14
width: parent.width / 2 - 4 * Theme.uiScale
height: parent.height - 4 * Theme.uiScale
radius: 14 * Theme.uiScale
color: Theme.accentPrimary
x: 2 + (useFahrenheit ? parent.width / 2 : 0)
y: 2
@ -46,7 +46,7 @@ Rectangle {
Text {
anchors.centerIn: parent
text: "°C"
font.pixelSize: 13
font.pixelSize: 13 * Theme.uiScale
font.bold: !useFahrenheit
color: !useFahrenheit ? Theme.onAccent : Theme.textPrimary
@ -74,7 +74,7 @@ Rectangle {
Text {
anchors.centerIn: parent
text: "°F"
font.pixelSize: 13
font.pixelSize: 13 * Theme.uiScale
font.bold: useFahrenheit
color: useFahrenheit ? Theme.onAccent : Theme.textPrimary

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

@ -58,7 +58,7 @@ Rectangle {
id: wallpaperGrid
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
model: WallpaperManager.wallpaperList
cacheBuffer: 64
@ -68,8 +68,8 @@ Rectangle {
bottomMargin: 8
delegate: Item {
width: wallpaperGrid.cellWidth - 8
height: wallpaperGrid.cellHeight - 8
width: wallpaperGrid.cellWidth - 8 * Theme.uiScale
height: wallpaperGrid.cellHeight - 8 * Theme.uiScale
Rectangle {
id: wallpaperItem
@ -77,9 +77,9 @@ Rectangle {
anchors.fill: parent
anchors.margins: 3
color: Theme.surface
radius: 12
radius: 12 * Theme.uiScale
border.color: Settings.settings.currentWallpaper === modelData ? Theme.accentPrimary : Theme.outline
border.width: 2
border.width: 2 * Theme.uiScale
Image {
id: wallpaperImage
@ -92,8 +92,8 @@ Rectangle {
cache: true
smooth: true
mipmap: true
sourceSize.width: Math.min(width, 480)
sourceSize.height: Math.min(height, 270)
sourceSize.width: Math.min(width, 480 * Theme.uiScale)
sourceSize.height: Math.min(height, 270 * Theme.uiScale)
opacity: (wallpaperImage.status == Image.Ready) ? 1 : 0
// Apply circular mask for rounded corners
layer.enabled: true
@ -123,7 +123,7 @@ Rectangle {
Rectangle {
width: wallpaperImage.width
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.Components
ColumnLayout {
id: root
spacing: 0
ScrollView {
anchors.fill: parent
anchors.margins: 0
// Get list of available monitors/screens
property var monitors: Quickshell.screens || []
padding: 0
rightPadding: 12
clip: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: ScrollBar.AsNeeded
// Sorted monitors by name
property var sortedMonitors: {
let sorted = [...monitors];
sorted.sort((a, b) => {
let nameA = a.name || "Unknown";
let nameB = b.name || "Unknown";
return nameA.localeCompare(nameB);
});
return sorted;
}
Item {
Layout.fillWidth: true
Layout.preferredHeight: 0
}
ColumnLayout {
spacing: 12
Layout.fillWidth: true
id: root
width: parent.availableWidth
spacing: 0
anchors.top: parent.top
anchors.margins: 0
Text {
text: "Monitor Selection"
font.pixelSize: 18
font.bold: true
color: Theme.textPrimary
Layout.bottomMargin: 8
// Get list of available monitors/screens
property var monitors: Quickshell.screens || []
// Sorted monitors by name
property var sortedMonitors: {
let sorted = [...monitors];
sorted.sort((a, b) => {
let nameA = a.name || "Unknown";
let nameB = b.name || "Unknown";
return nameA.localeCompare(nameB);
});
return sorted;
}
Item {
Layout.fillWidth: true
Layout.preferredHeight: 0
}
ColumnLayout {
spacing: 8
spacing: 12
Layout.fillWidth: true
RowLayout {
spacing: 8
Layout.fillWidth: true
ColumnLayout {
spacing: 4
Layout.fillWidth: true
Text {
text: "Bar Monitors"
font.pixelSize: 13
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Select which monitors to display the top panel/bar on"
font.pixelSize: 12
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
}
}
Text {
text: "Monitor Selection"
font.pixelSize: 18 * Theme.uiScale
font.bold: true
color: Theme.textPrimary
Layout.bottomMargin: 8
}
Flow {
Layout.fillWidth: true
ColumnLayout {
spacing: 8
Layout.fillWidth: true
Repeater {
model: root.sortedMonitors
delegate: Rectangle {
id: barCheckbox
property bool isChecked: false
Component.onCompleted: {
// Initialize checkbox state from settings
let monitors = Settings.settings.barMonitors || [];
isChecked = monitors.includes(modelData.name);
}
width: checkboxContent.implicitWidth + 16
height: 32
radius: 16
color: isChecked ? Theme.accentPrimary : Theme.surfaceVariant
border.color: isChecked ? Theme.accentPrimary : Theme.outline
border.width: 1
RowLayout {
spacing: 8
Layout.fillWidth: true
RowLayout {
id: checkboxContent
anchors.centerIn: parent
spacing: 6
ColumnLayout {
spacing: 4
Layout.fillWidth: true
Text {
text: barCheckbox.isChecked ? "check" : ""
font.family: "Material Symbols Outlined"
font.pixelSize: 14
color: barCheckbox.isChecked ? Theme.onAccent : Theme.textSecondary
visible: barCheckbox.isChecked
}
Text {
text: modelData.name || "Unknown"
font.pixelSize: 12
color: barCheckbox.isChecked ? Theme.onAccent : Theme.textPrimary
}
Text {
text: "Bar Monitors"
font.pixelSize: 13 * Theme.uiScale
font.bold: true
color: Theme.textPrimary
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
isChecked = !isChecked;
// Update settings array when checkbox is toggled
Text {
text: "Select which monitors to display the top panel/bar on"
font.pixelSize: 12 * Theme.uiScale
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
}
}
}
Flow {
Layout.fillWidth: true
spacing: 8
Repeater {
model: root.sortedMonitors
delegate: Rectangle {
id: barCheckbox
property bool isChecked: false
Component.onCompleted: {
// Initialize checkbox state from settings
let monitors = Settings.settings.barMonitors || [];
monitors = [...monitors]; // Create copy to trigger reactivity
if (isChecked) {
if (!monitors.includes(modelData.name)) {
monitors.push(modelData.name);
}
} else {
monitors = monitors.filter(name => name !== modelData.name);
isChecked = monitors.includes(modelData.name);
}
width: checkboxContent.implicitWidth + 16
height: 32
radius: 16
color: isChecked ? Theme.accentPrimary : Theme.surfaceVariant
border.color: isChecked ? Theme.accentPrimary : Theme.outline
border.width: 1
RowLayout {
id: checkboxContent
anchors.centerIn: parent
spacing: 6
Text {
text: barCheckbox.isChecked ? "check" : ""
font.family: "Material Symbols Outlined"
font.pixelSize: 14 * Theme.uiScale
color: barCheckbox.isChecked ? Theme.onAccent : Theme.textSecondary
visible: barCheckbox.isChecked
}
Text {
text: modelData.name || "Unknown"
font.pixelSize: 12 * Theme.uiScale
color: barCheckbox.isChecked ? Theme.onAccent : Theme.textPrimary
}
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
isChecked = !isChecked;
// Update settings array when checkbox is toggled
let monitors = Settings.settings.barMonitors || [];
monitors = [...monitors]; // Create copy to trigger reactivity
if (isChecked) {
if (!monitors.includes(modelData.name)) {
monitors.push(modelData.name);
}
} else {
monitors = monitors.filter(name => name !== modelData.name);
}
Settings.settings.barMonitors = monitors;
console.log("Bar monitors updated:", JSON.stringify(monitors));
}
Settings.settings.barMonitors = monitors;
console.log("Bar monitors updated:", JSON.stringify(monitors));
}
}
}
}
}
}
ColumnLayout {
spacing: 8
Layout.fillWidth: true
Layout.topMargin: 8
RowLayout {
ColumnLayout {
spacing: 8
Layout.fillWidth: true
Layout.topMargin: 8
ColumnLayout {
spacing: 4
RowLayout {
spacing: 8
Layout.fillWidth: true
Text {
text: "Dock Monitors"
font.pixelSize: 13
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Select which monitors to display the application dock on"
font.pixelSize: 12
color: Theme.textSecondary
wrapMode: Text.WordWrap
ColumnLayout {
spacing: 4
Layout.fillWidth: true
Text {
text: "Dock Monitors"
font.pixelSize: 13 * Theme.uiScale
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Select which monitors to display the application dock on"
font.pixelSize: 12 * Theme.uiScale
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
}
}
}
}
Flow {
Layout.fillWidth: true
spacing: 8
Flow {
Layout.fillWidth: true
spacing: 8
Repeater {
model: root.sortedMonitors
delegate: Rectangle {
id: dockCheckbox
property bool isChecked: false
Component.onCompleted: {
// Initialize with current settings
let monitors = Settings.settings.dockMonitors || [];
isChecked = monitors.includes(modelData.name);
}
width: checkboxContent.implicitWidth + 16
height: 32
radius: 16
color: isChecked ? Theme.accentPrimary : Theme.surfaceVariant
border.color: isChecked ? Theme.accentPrimary : Theme.outline
border.width: 1
RowLayout {
id: checkboxContent
anchors.centerIn: parent
spacing: 6
Text {
text: dockCheckbox.isChecked ? "check" : ""
font.family: "Material Symbols Outlined"
font.pixelSize: 14
color: dockCheckbox.isChecked ? Theme.onAccent : Theme.textSecondary
visible: dockCheckbox.isChecked
}
Text {
text: modelData.name || "Unknown"
font.pixelSize: 12
color: dockCheckbox.isChecked ? Theme.onAccent : Theme.textPrimary
}
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
// Toggle state immediately for UI responsiveness
isChecked = !isChecked;
// Update settings
Repeater {
model: root.sortedMonitors
delegate: Rectangle {
id: dockCheckbox
property bool isChecked: false
Component.onCompleted: {
// Initialize with current settings
let monitors = Settings.settings.dockMonitors || [];
monitors = [...monitors]; // Copy array
if (isChecked) {
// Add to array if not already there
if (!monitors.includes(modelData.name)) {
monitors.push(modelData.name);
}
} else {
// Remove from array
monitors = monitors.filter(name => name !== modelData.name);
isChecked = monitors.includes(modelData.name);
}
width: checkboxContent.implicitWidth + 16
height: 32
radius: 16
color: isChecked ? Theme.accentPrimary : Theme.surfaceVariant
border.color: isChecked ? Theme.accentPrimary : Theme.outline
border.width: 1
RowLayout {
id: checkboxContent
anchors.centerIn: parent
spacing: 6
Text {
text: dockCheckbox.isChecked ? "check" : ""
font.family: "Material Symbols Outlined"
font.pixelSize: 14 * Theme.uiScale
color: dockCheckbox.isChecked ? Theme.onAccent : Theme.textSecondary
visible: dockCheckbox.isChecked
}
Text {
text: modelData.name || "Unknown"
font.pixelSize: 12 * Theme.uiScale
color: dockCheckbox.isChecked ? Theme.onAccent : Theme.textPrimary
}
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
// Toggle state immediately for UI responsiveness
isChecked = !isChecked;
// Update settings
let monitors = Settings.settings.dockMonitors || [];
monitors = [...monitors]; // Copy array
if (isChecked) {
// Add to array if not already there
if (!monitors.includes(modelData.name)) {
monitors.push(modelData.name);
}
} else {
// Remove from array
monitors = monitors.filter(name => name !== modelData.name);
}
Settings.settings.dockMonitors = monitors;
console.log("Dock monitors updated:", JSON.stringify(monitors));
}
Settings.settings.dockMonitors = monitors;
console.log("Dock monitors updated:", JSON.stringify(monitors));
}
}
}
}
}
}
ColumnLayout {
spacing: 8
Layout.fillWidth: true
Layout.topMargin: 8
RowLayout {
ColumnLayout {
spacing: 8
Layout.fillWidth: true
Layout.topMargin: 8
ColumnLayout {
spacing: 4
RowLayout {
spacing: 8
Layout.fillWidth: true
Text {
text: "Notification Monitors"
font.pixelSize: 13
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Select which monitors to display system notifications on"
font.pixelSize: 12
color: Theme.textSecondary
wrapMode: Text.WordWrap
ColumnLayout {
spacing: 4
Layout.fillWidth: true
Text {
text: "Notification Monitors"
font.pixelSize: 13 * Theme.uiScale
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Select which monitors to display system notifications on"
font.pixelSize: 12 * Theme.uiScale
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
}
}
}
}
Flow {
Layout.fillWidth: true
spacing: 8
Flow {
Layout.fillWidth: true
spacing: 8
Repeater {
model: root.sortedMonitors
delegate: Rectangle {
id: notificationCheckbox
property bool isChecked: false
Component.onCompleted: {
// Initialize with current settings
let monitors = Settings.settings.notificationMonitors || [];
isChecked = monitors.includes(modelData.name);
}
width: checkboxContent.implicitWidth + 16
height: 32
radius: 16
color: isChecked ? Theme.accentPrimary : Theme.surfaceVariant
border.color: isChecked ? Theme.accentPrimary : Theme.outline
border.width: 1
RowLayout {
id: checkboxContent
anchors.centerIn: parent
spacing: 6
Text {
text: notificationCheckbox.isChecked ? "check" : ""
font.family: "Material Symbols Outlined"
font.pixelSize: 14
color: notificationCheckbox.isChecked ? Theme.onAccent : Theme.textSecondary
visible: notificationCheckbox.isChecked
}
Text {
text: modelData.name || "Unknown"
font.pixelSize: 12
color: notificationCheckbox.isChecked ? Theme.onAccent : Theme.textPrimary
}
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
// Toggle state immediately for UI responsiveness
isChecked = !isChecked;
// Update settings
Repeater {
model: root.sortedMonitors
delegate: Rectangle {
id: notificationCheckbox
property bool isChecked: false
Component.onCompleted: {
// Initialize with current settings
let monitors = Settings.settings.notificationMonitors || [];
monitors = [...monitors]; // Copy array
if (isChecked) {
// Add to array if not already there
if (!monitors.includes(modelData.name)) {
monitors.push(modelData.name);
}
} else {
// Remove from array
monitors = monitors.filter(name => name !== modelData.name);
isChecked = monitors.includes(modelData.name);
}
width: checkboxContent.implicitWidth + 16
height: 32
radius: 16
color: isChecked ? Theme.accentPrimary : Theme.surfaceVariant
border.color: isChecked ? Theme.accentPrimary : Theme.outline
border.width: 1
RowLayout {
id: checkboxContent
anchors.centerIn: parent
spacing: 6
Text {
text: notificationCheckbox.isChecked ? "check" : ""
font.family: "Material Symbols Outlined"
font.pixelSize: 14 * Theme.uiScale
color: notificationCheckbox.isChecked ? Theme.onAccent : Theme.textSecondary
visible: notificationCheckbox.isChecked
}
Text {
text: modelData.name || "Unknown"
font.pixelSize: 12 * Theme.uiScale
color: notificationCheckbox.isChecked ? Theme.onAccent : Theme.textPrimary
}
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
// Toggle state immediately for UI responsiveness
isChecked = !isChecked;
// Update settings
let monitors = Settings.settings.notificationMonitors || [];
monitors = [...monitors]; // Copy array
if (isChecked) {
// Add to array if not already there
if (!monitors.includes(modelData.name)) {
monitors.push(modelData.name);
}
} else {
// Remove from array
monitors = monitors.filter(name => name !== modelData.name);
}
Settings.settings.notificationMonitors = monitors;
console.log("Notification monitors updated:", JSON.stringify(monitors));
}
Settings.settings.notificationMonitors = monitors;
console.log("Notification monitors updated:", JSON.stringify(monitors));
}
}
}
}
}
}
}
Item {
Layout.fillWidth: true
Layout.fillHeight: true
Item {
Layout.fillWidth: true
Layout.fillHeight: true
}
}
}

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

@ -4,105 +4,215 @@ import QtQuick.Layouts
import qs.Components
import qs.Settings
ColumnLayout {
id: root
spacing: 0
ScrollView {
anchors.fill: parent
anchors.margins: 0
Item {
Layout.fillWidth: true
Layout.preferredHeight: 0
}
padding: 0
rightPadding: 12
clip: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: ScrollBar.AsNeeded
ColumnLayout {
spacing: 4
Layout.fillWidth: true
id: root
width: parent.availableWidth
spacing: 0 * Theme.uiScale
anchors.top: parent.top
anchors.margins: 0 * Theme.uiScale
Text {
text: "Profile"
font.pixelSize: 18
font.bold: true
color: Theme.textPrimary
Layout.bottomMargin: 8
Item {
Layout.fillWidth: true
Layout.preferredHeight: 0
}
ColumnLayout {
spacing: 2
spacing: 4 * Theme.uiScale
Layout.fillWidth: true
Text {
text: "Profile Image"
font.pixelSize: 13
text: "Profile"
font.pixelSize: 18 * Theme.uiScale
font.bold: true
color: Theme.textPrimary
Layout.bottomMargin: 8
}
Text {
text: "Your profile picture displayed in various places throughout the shell"
font.pixelSize: 12
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
Layout.bottomMargin: 4
}
RowLayout {
spacing: 8
ColumnLayout {
spacing: 2 * Theme.uiScale
Layout.fillWidth: true
Rectangle {
width: 48
height: 48
radius: 24
Text {
text: "Profile Image"
font.pixelSize: 13 * Theme.uiScale
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 {
anchors.fill: parent
color: "transparent"
radius: 24
border.color: profileImageInput.activeFocus ? Theme.accentPrimary : Theme.outline
border.width: 2
z: 2
width: 48 * Theme.uiScale
height: 48 * Theme.uiScale
radius: 24 * Theme.uiScale
Rectangle {
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.preferredHeight: 40
radius: 16
color: Theme.surfaceVariant
border.color: profileImageInput.activeFocus ? Theme.accentPrimary : Theme.outline
border.width: 1
TextInput {
id: profileImageInput
ColumnLayout {
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 {
anchors.fill: parent
cursorShape: Qt.IBeamCursor
onClicked: profileImageInput.forceActiveFocus()
cursorShape: Qt.PointingHandCursor
onClicked: {
Settings.settings.showCorners = !Settings.settings.showCorners;
}
}
}
@ -111,252 +221,154 @@ ColumnLayout {
}
}
}
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
ColumnLayout {
spacing: 8 * Theme.uiScale
Layout.fillWidth: true
Layout.topMargin: 4 * Theme.uiScale
ColumnLayout {
spacing: 4
RowLayout {
spacing: 8 * Theme.uiScale
Layout.fillWidth: true
Text {
text: "Show Corners"
font.pixelSize: 13
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Display rounded corners"
font.pixelSize: 12
color: Theme.textSecondary
wrapMode: Text.WordWrap
ColumnLayout {
spacing: 4 * Theme.uiScale
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 {
id: cornersThumb
id: dockSwitch
width: 28
height: 28
radius: 14
color: Theme.surface
border.color: Theme.outline
border.width: 1
y: 2
x: Settings.settings.showCorners ? cornersSwitch.width - width - 2 : 2
width: 52 * Theme.uiScale
height: 32 * Theme.uiScale
radius: 16 * Theme.uiScale
color: Settings.settings.showDock ? Theme.accentPrimary : Theme.surfaceVariant
border.color: Settings.settings.showDock ? Theme.accentPrimary : Theme.outline
border.width: 2 * Theme.uiScale
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
cursorShape: Qt.PointingHandCursor
onClicked: {
Settings.settings.showCorners = !Settings.settings.showCorners;
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
Settings.settings.showDock = !Settings.settings.showDock;
}
}
}
}
}
}
ColumnLayout {
spacing: 8
Layout.fillWidth: true
Layout.topMargin: 4
RowLayout {
spacing: 8
ColumnLayout {
spacing: 8 * Theme.uiScale
Layout.fillWidth: true
Layout.topMargin: 4 * Theme.uiScale
ColumnLayout {
spacing: 4
RowLayout {
spacing: 8 * Theme.uiScale
Layout.fillWidth: true
Text {
text: "Show Dock"
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
ColumnLayout {
spacing: 4 * Theme.uiScale
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 {
id: dockThumb
id: dimSwitch
width: 28
height: 28
radius: 14
color: Theme.surface
border.color: Theme.outline
border.width: 1
y: 2
x: Settings.settings.showDock ? dockSwitch.width - width - 2 : 2
width: 52 * Theme.uiScale
height: 32 * Theme.uiScale
radius: 16 * Theme.uiScale
color: Settings.settings.dimPanels ? Theme.accentPrimary : Theme.surfaceVariant
border.color: Settings.settings.dimPanels ? Theme.accentPrimary : Theme.outline
border.width: 2 * Theme.uiScale
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
cursorShape: Qt.PointingHandCursor
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;
}
}
}
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.Components
ColumnLayout {
id: root
spacing: 0
ScrollView {
anchors.fill: parent
anchors.margins: 0
Item {
Layout.fillWidth: true
Layout.preferredHeight: 0
}
padding: 0
rightPadding: 12
clip: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: ScrollBar.AsNeeded
ColumnLayout {
spacing: 4
Layout.fillWidth: true
id: root
width: parent.availableWidth
spacing: 0
anchors.top: parent.top
anchors.margins: 0
Text {
text: "Media"
font.pixelSize: 18
font.bold: true
color: Theme.textPrimary
Layout.bottomMargin: 8
Item {
Layout.fillWidth: true
Layout.preferredHeight: 0
}
ColumnLayout {
spacing: 8
spacing: 4
Layout.fillWidth: true
Text {
text: "Visualizer Type"
font.pixelSize: 13
text: "Media"
font.pixelSize: 18 * Theme.uiScale
font.bold: true
color: Theme.textPrimary
Layout.bottomMargin: 8
}
Text {
text: "Choose the style of the audio visualizer"
font.pixelSize: 12
color: Theme.textSecondary
wrapMode: Text.WordWrap
ColumnLayout {
spacing: 8
Layout.fillWidth: true
Layout.bottomMargin: 4
}
ComboBox {
id: visualizerTypeComboBox
Layout.fillWidth: true
Layout.preferredHeight: 40
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
Text {
text: "Visualizer Type"
font.pixelSize: 13 * Theme.uiScale
font.bold: true
color: Theme.textPrimary
}
popup: Popup {
y: visualizerTypeComboBox.height
width: visualizerTypeComboBox.width
implicitHeight: contentItem.implicitHeight
padding: 1
Text {
text: "Choose the style of the audio visualizer"
font.pixelSize: 12 * Theme.uiScale
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
Layout.bottomMargin: 4
}
contentItem: ListView {
clip: true
implicitHeight: contentHeight
model: visualizerTypeComboBox.popup.visible ? visualizerTypeComboBox.delegateModel : null
currentIndex: visualizerTypeComboBox.highlightedIndex
ScrollIndicator.vertical: ScrollIndicator {}
}
ComboBox {
id: visualizerTypeComboBox
Layout.fillWidth: true
Layout.preferredHeight: 40
model: ["radial", "fire", "diamond"]
currentIndex: model.indexOf(Settings.settings.visualizerType)
background: Rectangle {
implicitWidth: 120
implicitHeight: 40
color: Theme.surfaceVariant
border.color: Theme.outline
border.color: visualizerTypeComboBox.activeFocus ? Theme.accentPrimary : Theme.outline
border.width: 1
radius: 16
}
}
delegate: ItemDelegate {
width: visualizerTypeComboBox.width
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
color: Theme.textPrimary
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
highlighted: visualizerTypeComboBox.highlightedIndex === index
background: Rectangle {
color: highlighted ? Theme.accentPrimary.toString().replace(/#/, "#1A") : "transparent"
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
}
}
onActivated: {
Settings.settings.visualizerType = model[index];
popup: Popup {
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 {
Layout.fillWidth: true
Layout.fillHeight: true
Item {
Layout.fillWidth: true
Layout.fillHeight: true
}
}
}

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

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

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

@ -5,258 +5,268 @@ import qs.Components
import qs.Settings
import qs.Widgets.SettingsWindow.Tabs.Components
ColumnLayout {
id: root
spacing: 0
ScrollView {
anchors.fill: parent
anchors.margins: 0
Item {
Layout.fillWidth: true
Layout.preferredHeight: 0
}
padding: 0
rightPadding: 12
clip: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: ScrollBar.AsNeeded
ColumnLayout {
spacing: 4
Layout.fillWidth: true
id: root
width: parent.availableWidth
spacing: 0
anchors.top: parent.top
anchors.margins: 0
Text {
text: "Time"
font.pixelSize: 18
font.bold: true
color: Theme.textPrimary
Layout.bottomMargin: 8
}
ColumnLayout {
spacing: 8
Item {
Layout.fillWidth: true
Layout.topMargin: 8
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;
}
}
}
}
Layout.preferredHeight: 0
}
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
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
spacing: 4
Layout.fillWidth: true
Text {
text: "City"
font.pixelSize: 13
text: "Time"
font.pixelSize: 18 * Theme.uiScale
font.bold: true
color: Theme.textPrimary
Layout.bottomMargin: 8
}
Text {
text: "Your city name for weather information"
font.pixelSize: 12
color: Theme.textSecondary
ColumnLayout {
spacing: 8
Layout.fillWidth: true
}
Layout.topMargin: 8
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 40
radius: 16
color: Theme.surfaceVariant
border.color: cityInput.activeFocus ? Theme.accentPrimary : Theme.outline
border.width: 1
RowLayout {
spacing: 8
Layout.fillWidth: true
TextInput {
id: cityInput
ColumnLayout {
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 {
anchors.fill: parent
cursorShape: Qt.IBeamCursor
onClicked: {
cityInput.forceActiveFocus();
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 {
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: "Temperature Unit"
font.pixelSize: 13
font.pixelSize: 13 * Theme.uiScale
font.bold: true
color: Theme.textPrimary
}
Text {
text: "Choose between Celsius and Fahrenheit"
font.pixelSize: 12
font.pixelSize: 12 * Theme.uiScale
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
@ -308,5 +318,4 @@ ColumnLayout {
Layout.fillWidth: true
Layout.fillHeight: true
}
}

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

File diff suppressed because it is too large Load diff