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

Settings: improved tabs managment so changing the model actually reorder them properly

Browse source 
+ code formatting
This commit is contained in:
quadbyte 2025-08-14 21:25:14 -04:00
parent 92590eada7
commit 2748e02988
8 changed files with 229 additions and 140 deletions
Download patch file Download diff file Expand all files Collapse all files

3
Modules/AppLauncher/AppLauncher.qml
View file

@ -371,8 +371,7 @@ NLoader {
property bool isSelected: index === selectedIndex
color: (appCardArea.containsMouse || isSelected) ? Qt.darker(Colors.mPrimary,
1.1) : Colors.mSurface
border.color: (appCardArea.containsMouse
|| isSelected) ? Colors.mPrimary : "transparent"
border.color: (appCardArea.containsMouse || isSelected) ? Colors.mPrimary : "transparent"
border.width: (appCardArea.containsMouse || isSelected) ? 2 : 0
Behavior on color {

9
Modules/LockScreen/LockScreen.qml
View file

@ -530,8 +530,7 @@ WlSessionLock {
width: 120 * Scaling.scale(screen)
height: 40 * Scaling.scale(screen)
radius: 12
color: executeButtonArea.containsMouse ? Colors.mPrimary : Colors.applyOpacity(
Colors.mPrimary, "33")
color: executeButtonArea.containsMouse ? Colors.mPrimary : Colors.applyOpacity(Colors.mPrimary, "33")
border.color: Colors.mPrimary
border.width: 1
enabled: !lock.authenticating
@ -631,8 +630,7 @@ WlSessionLock {
width: 64 * Scaling.scale(screen)
height: 64 * Scaling.scale(screen)
radius: 32
color: Qt.rgba(Colors.mError.r, Colors.mError.g, Colors.mError.b,
shutdownArea.containsMouse ? 0.9 : 0.2)
color: Qt.rgba(Colors.mError.r, Colors.mError.g, Colors.mError.b, shutdownArea.containsMouse ? 0.9 : 0.2)
border.color: Colors.mError
border.width: 2 * Scaling.scale(screen)
@ -689,8 +687,7 @@ WlSessionLock {
width: 64 * Scaling.scale(screen)
height: 64 * Scaling.scale(screen)
radius: 32
color: Qt.rgba(Colors.mPrimary.r, Colors.mPrimary.g, Colors.mPrimary.b,
rebootArea.containsMouse ? 0.9 : 0.2)
color: Qt.rgba(Colors.mPrimary.r, Colors.mPrimary.g, Colors.mPrimary.b, rebootArea.containsMouse ? 0.9 : 0.2)
border.color: Colors.mPrimary
border.width: 2 * Scaling.scale(screen)

212
Modules/Settings/SettingsPanel.qml
View file

@ -10,18 +10,18 @@ import qs.Widgets
NLoader {
id: root
// Enumerate all the tabs, ordering is NOT relevant
enum Tab {
General,
Bar,
TimeWeather,
ScreenRecorder,
Network,
About,
Audio,
Bar,
Display,
General,
Network,
ScreenRecorder,
TimeWeather,
Wallpaper,
WallpaperSelector,
//Misc,
About
WallpaperSelector
}
property int requestedTab: SettingsPanel.Tab.General
@ -33,6 +33,61 @@ NLoader {
readonly property real scaling: Scaling.scale(screen)
property int currentTabIndex: 0
// List of all the tabs, ordering is relevant.
property var tabsModel: [{
"id": SettingsPanel.Tab.General,
"label": "General",
"icon": "tune",
"source": "Tabs/General.qml"
}, {
"id": SettingsPanel.Tab.Bar,
"label": "Bar",
"icon": "web_asset",
"source": "Tabs/Bar.qml"
}, {
"id": SettingsPanel.Tab.Display,
"label": "Display",
"icon": "monitor",
"source": "Tabs/Display.qml"
}, {
"id": SettingsPanel.Tab.Audio,
"label": "Audio",
"icon": "volume_up",
"source": "Tabs/Audio.qml"
}, {
"id": SettingsPanel.Tab.Network,
"label": "Network",
"icon": "lan",
"source": "Tabs/Network.qml"
}, {
"id": SettingsPanel.Tab.TimeWeather,
"label": "Time & Weather",
"icon": "schedule",
"source": "Tabs/TimeWeather.qml"
}, {
"id": SettingsPanel.Tab.Wallpaper,
"label": "Wallpaper",
"icon": "image",
"source": "Tabs/Wallpaper.qml"
}, {
"id": SettingsPanel.Tab.WallpaperSelector,
"label": "Wallpaper Selector",
"icon": "wallpaper_slideshow",
"source": "Tabs/WallpaperSelector.qml"
}, {
"id": SettingsPanel.Tab.ScreenRecorder,
"label": "Screen Recorder",
"icon": "videocam",
"source": "Tabs/ScreenRecorder.qml"
}, {
"id": SettingsPanel.Tab.About,
"label": "About",
"icon": "info",
"source": "Tabs/About.qml"
}]
WlrLayershell.keyboardFocus: WlrKeyboardFocus.OnDemand
// Override hide function to animate first
function hide() {
// Start hide animation
@ -43,6 +98,69 @@ NLoader {
hideTimer.start()
}
function getTab(tabId) {
switch (tabId) {
case SettingsPanel.Tab.About:
return tabAbount
case SettingsPanel.Tab.Audio:
return tabAudio
case SettingsPanel.Tab.Bar:
return tabBar
case SettingsPanel.Tab.General:
return tabGeneral
case SettingsPanel.Tab.Network:
return tabNetwork
case SettingsPanel.Tab.ScreenRecorder:
return tabScreenRecorder
case SettingsPanel.Tab.TimeWeather:
return tabTimeWeather
case SettingsPanel.Tab.Wallpaper:
return tabWallpaper
case SettingsPanel.Tab.WallpaperSelector:
return tabWallpaperSelector
default:
return tabGeneral
}
}
// Wrap each tab in a Component so we can spawn them with flexibility
Component {
id: tabAbount
Tabs.About {}
}
Component {
id: tabAudio
Tabs.Audio {}
}
Component {
id: tabBar
Tabs.Bar {}
}
Component {
id: tabGeneral
Tabs.General {}
}
Component {
id: tabNetwork
Tabs.Network {}
}
Component {
id: tabScreenRecorder
Tabs.ScreenRecorder {}
}
Component {
id: tabTimeWeather
Tabs.TimeWeather {}
}
Component {
id: tabWallpaper
Tabs.Wallpaper {}
}
Component {
id: tabWallpaperSelector
Tabs.WallpaperSelector {}
}
// Connect to NPanel's dismissed signal to handle external close events
Connections {
target: panel
@ -67,66 +185,6 @@ NLoader {
}
}
WlrLayershell.keyboardFocus: WlrKeyboardFocus.OnDemand
property var tabsModel: [{
"id": SettingsPanel.Tab.General,
"label": "General",
"icon": "tune",
"source": "Tabs/General.qml"
}, {
"id": SettingsPanel.Tab.Bar,
"label": "Bar",
"icon": "web_asset",
"source": "Tabs/Bar.qml"
}, {
"id": SettingsPanel.Tab.TimeWeather,
"label": "Time & Weather",
"icon": "schedule",
"source": "Tabs/TimeWeather.qml"
}, {
"id": SettingsPanel.Tab.ScreenRecorder,
"label": "Screen Recorder",
"icon": "videocam",
"source": "Tabs/ScreenRecorder.qml"
}, {
"id": SettingsPanel.Tab.Network,
"label": "Network",
"icon": "lan",
"source": "Tabs/Network.qml"
}, {
"id": SettingsPanel.Tab.Audio,
"label": "Audio",
"icon": "volume_up",
"source": "Tabs/Audio.qml"
}, {
"id": SettingsPanel.Tab.Display,
"label": "Display",
"icon": "monitor",
"source": "Tabs/Display.qml"
}, {
"id": SettingsPanel.Tab.Wallpaper,
"label": "Wallpaper",
"icon": "image",
"source": "Tabs/Wallpaper.qml"
}, {
"id": SettingsPanel.Tab.WallpaperSelector,
"label": "Wallpaper Selector",
"icon": "wallpaper_slideshow",
"source": "Tabs/WallpaperSelector.qml"
}, // {
// "id": SettingsPanel.Tab.Misc,
// "label": "Misc",
// "icon": "more_horiz",
// "source": "Tabs/Misc.qml"
// },
{
"id": SettingsPanel.Tab.About,
"label": "About",
"icon": "info",
"source": "Tabs/About.qml"
}]
Component.onCompleted: {
show()
}
@ -220,7 +278,6 @@ NLoader {
spacing: Style.marginTiny * 1.5 * scaling // Minimal spacing between tabs
Repeater {
id: sections
model: panel.tabsModel
delegate: Rectangle {
@ -328,17 +385,12 @@ NLoader {
Layout.fillHeight: true
currentIndex: currentTabIndex
Tabs.General {}
Tabs.Bar {}
Tabs.TimeWeather {}
Tabs.ScreenRecorder {}
Tabs.Network {}
Tabs.Audio {}
Tabs.Display {}
Tabs.Wallpaper {}
Tabs.WallpaperSelector {}
//Tabs.Misc {}
Tabs.About {}
Repeater {
model: panel.tabsModel
delegate: Loader {
sourceComponent: getTab(modelData.id)
}
}
}
}
}

89
Modules/Settings/Tabs/ColorScheme.qml Normal file
View file

@ -0,0 +1,89 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import qs.Services
import qs.Widgets
ColumnLayout {
id: root
spacing: 0
ScrollView {
id: scrollView
Layout.fillWidth: true
Layout.fillHeight: true
padding: Style.marginMedium * scaling
clip: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: ScrollBar.AsNeeded
ColumnLayout {
width: scrollView.availableWidth
spacing: 0
Item {
Layout.fillWidth: true
Layout.preferredHeight: 0
}
ColumnLayout {
spacing: Style.marginLarge * scaling
Layout.fillWidth: true
NText {
text: "Components"
font.pointSize: Style.fontSizeXL * scaling
font.weight: Style.fontWeightBold
color: Colors.mOnSurface
}
NToggle {
label: "Show Active Window"
description: "Display the title of the currently focused window below the bar"
value: Settings.data.bar.showActiveWindow
onToggled: function (newValue) {
Settings.data.bar.showActiveWindow = newValue
}
}
NToggle {
label: "Show Active Window Icon"
description: "Display the icon of the currently focused window"
value: Settings.data.bar.showActiveWindowIcon
onToggled: function (newValue) {
Settings.data.bar.showActiveWindowIcon = newValue
}
}
NToggle {
label: "Show System Info"
description: "Display system information (CPU, RAM, Temperature)"
value: Settings.data.bar.showSystemInfo
onToggled: function (newValue) {
Settings.data.bar.showSystemInfo = newValue
}
}
NToggle {
label: "Show Taskbar"
description: "Display a taskbar showing currently open windows"
value: Settings.data.bar.showTaskbar
onToggled: function (newValue) {
Settings.data.bar.showTaskbar = newValue
}
}
NToggle {
label: "Show Media"
description: "Display media controls and information"
value: Settings.data.bar.showMedia
onToggled: function (newValue) {
Settings.data.bar.showMedia = newValue
}
}
}
}
}
}

45
Modules/Settings/Tabs/Misc.qml
View file

@ -1,45 +0,0 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import qs.Services
import qs.Widgets
ColumnLayout {
id: root
spacing: 0
ScrollView {
id: scrollView
Layout.fillWidth: true
Layout.fillHeight: true
padding: Style.marginMedium * scaling
clip: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: ScrollBar.AsNeeded
ColumnLayout {
width: scrollView.availableWidth
spacing: 0
Item {
Layout.fillWidth: true
Layout.preferredHeight: 0
}
ColumnLayout {
spacing: Style.marginLarge * scaling
Layout.fillWidth: true
NText {
text: "Miscellaneous Settings"
font.pointSize: Style.fontSizeXL * scaling
font.weight: Style.fontWeightBold
color: Colors.mOnSurface
Layout.bottomMargin: Style.marginSmall * scaling
}
}
}
}
}

6
Services/Colors.qml
View file

@ -6,10 +6,9 @@ import Quickshell.Io
import qs.Services
// --------------------------------
// Noctalia Colors - Material Design 3
// Noctalia Colors - Material Design 3
// We only use a very small subset of all available m3 colors to avoid complexity
// All color names start with a 'm' to avoid QML assuming some of them are signals (ex: onPrimary)
Singleton {
id: root
@ -58,7 +57,7 @@ Singleton {
property color mError: "#eb6f92"
property color mOnError: "#191724"
property color mSurface: "#191724"
property color mOnSurface: "#e0def4"
property color mSurfaceVariant: "#26233a"
@ -66,7 +65,6 @@ Singleton {
property color mOutline: "#44415a"
property color mOutlineVariant: "#514e6c"
property color mShadow: "#191724"
}
// ----------------------------------------------------------------

3
Widgets/NIconButton.qml
View file

@ -42,8 +42,7 @@ Rectangle {
font.variableAxes: {
"wght": (Font.Normal + Font.Bold) / 2.0
}
color: (root.hovering
|| showFilled) ? Colors.mOnPrimary : showBorder ? Colors.mPrimary : Colors.mOnSurface
color: (root.hovering || showFilled) ? Colors.mOnPrimary : showBorder ? Colors.mPrimary : Colors.mOnSurface
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
opacity: root.enabled ? Style.opacityFull : Style.opacityMedium

2
Widgets/NToggle.qml
View file

@ -53,7 +53,7 @@ RowLayout {
implicitWidth: (root.baseSize - 5) * scaling
implicitHeight: (root.baseSize - 5) * scaling
radius: height * 0.5
color: value ? Colors.mOnPrimary: Colors.mPrimary
color: value ? Colors.mOnPrimary : Colors.mPrimary
border.color: value ? Colors.mSurface : Colors.mSurface
border.width: Math.max(1, Style.borderMedium * scaling)
y: 2 * scaling