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

New Toggle Component and Adapted the General Settings Tab

Browse source
This commit is contained in:
quadbyte 2025-08-07 11:04:39 -04:00
parent bd4d28f02f
commit 34148f4676
2 changed files with 199 additions and 322 deletions
Download patch file Download diff file Expand all files Collapse all files

88
Components/Toggle.qml Normal file
View file

@ -0,0 +1,88 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import qs.Components
import qs.Settings
ColumnLayout {
id: root
property string label: ""
property string description: ""
property bool value: false
property var onToggled: function() {
}
Layout.fillWidth: true
RowLayout {
Layout.fillWidth: true
ColumnLayout {
spacing: 4 * Theme.uiScale
Layout.fillWidth: true
Text {
text: label
font.pixelSize: 13 * Theme.uiScale
font.bold: true
color: Theme.textPrimary
}
Text {
text: description
font.pixelSize: 12 * Theme.uiScale
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
}
}
Rectangle {
id: switcher
width: 52 * Theme.uiScale
height: 32 * Theme.uiScale
radius: 16 * Theme.uiScale
color: value ? Theme.accentPrimary : Theme.surfaceVariant
border.color: value ? Theme.accentPrimary : Theme.outline
border.width: 2 * Theme.uiScale
Rectangle {
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: value ? switcher.width - width - 2 : 2
Behavior on x {
NumberAnimation {
duration: 200
easing.type: Easing.OutCubic
}
}
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
root.onToggled();
}
}
}
}
Rectangle {
height: 8 * Theme.uiScale
}
}

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

@ -4,47 +4,42 @@ import QtQuick.Layouts
import qs.Components
import qs.Settings
ScrollView {
ColumnLayout {
id: root
spacing: 0
anchors.fill: parent
padding: 0
anchors.margins: 0
ScrollView {
id: scrollView
Layout.fillWidth: true
Layout.fillHeight: true
padding: 16
rightPadding: 12
clip: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: ScrollBar.AsNeeded
ColumnLayout {
id: root
width: parent.availableWidth
spacing: 0 * Theme.uiScale
anchors.top: parent.top
anchors.margins: 0 * Theme.uiScale
Item {
Layout.fillWidth: true
Layout.preferredHeight: 0
}
ColumnLayout {
spacing: 4 * Theme.uiScale
Layout.fillWidth: true
width: scrollView.availableWidth
spacing: 0
Text {
text: "Profile"
font.pixelSize: 18 * Theme.uiScale
font.bold: true
color: Theme.textPrimary
Layout.bottomMargin: 8
Layout.bottomMargin: 16 * Theme.uiScale
}
ColumnLayout {
spacing: 2 * Theme.uiScale
Layout.fillWidth: true
Text {
text: "Profile Image"
font.pixelSize: 13 * Theme.uiScale
font.bold: true
color: Theme.textPrimary
Layout.bottomMargin: 4 * Theme.uiScale
}
Text {
@ -119,10 +114,7 @@ ScrollView {
}
}
}
// Separator
Rectangle {
Layout.fillWidth: true
Layout.topMargin: 26 * Theme.uiScale
@ -132,246 +124,43 @@ ScrollView {
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
Layout.bottomMargin: 16 * Theme.uiScale
}
ColumnLayout {
spacing: 4 * Theme.uiScale
Layout.fillWidth: true
RowLayout {
spacing: 8 * Theme.uiScale
Layout.fillWidth: true
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
}
}
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
Toggle {
label: "Show Corners"
description: "Display rounded corners"
value: Settings.settings.showCorners
onToggled: function() {
Settings.settings.showCorners = !Settings.settings.showCorners;
}
}
}
}
}
ColumnLayout {
spacing: 8 * Theme.uiScale
Layout.fillWidth: true
Layout.topMargin: 4 * Theme.uiScale
RowLayout {
spacing: 8 * Theme.uiScale
Layout.fillWidth: true
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: dockSwitch
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
}
}
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
Toggle {
label: "Show Dock"
description: "Display a dock at the bottom of the screen for quick access to applications"
value: Settings.settings.showDock
onToggled: function() {
Settings.settings.showDock = !Settings.settings.showDock;
}
}
}
}
}
ColumnLayout {
spacing: 8 * Theme.uiScale
Layout.fillWidth: true
Layout.topMargin: 4 * Theme.uiScale
RowLayout {
spacing: 8 * Theme.uiScale
Layout.fillWidth: true
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: dimSwitch
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
}
}
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
Toggle {
label: "Dim Desktop"
description: "Dim the desktop when panels or menus are open"
value: Settings.settings.dimPanels
onToggled: function() {
Settings.settings.dimPanels = !Settings.settings.dimPanels;
}
}
}
}
}
}
}
}