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

Switch Settings tab based system

Browse source
This commit is contained in:
ly-sec 2025-07-15 13:35:41 +02:00
parent 66f11eaa1f
commit ffc4db9d0f
4 changed files with 223 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

77
Components/Tabs.qml Normal file
View file

@ -0,0 +1,77 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import qs.Settings
Item {
id: root
property var tabsModel: [] // [{icon: "videocam", label: "Video"}, ...]
property int currentIndex: 0
signal tabChanged(int index)
RowLayout {
id: tabBar
anchors.horizontalCenter: parent.horizontalCenter
spacing: 16
Repeater {
model: root.tabsModel
delegate: Column {
width: 56
spacing: 2
property bool hovered: false
MouseArea {
anchors.fill: parent
onClicked: {
if (root.currentIndex !== index) {
root.currentIndex = index;
root.tabChanged(index);
}
}
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
onEntered: parent.hovered = true
onExited: parent.hovered = false
}
// Icon
Text {
text: modelData.icon
font.family: "Material Icons"
font.pixelSize: 22
color: index === root.currentIndex
? (Theme ? Theme.accentPrimary : "#7C3AED")
: parent.hovered
? (Theme ? Theme.accentPrimary : "#7C3AED")
: (Theme ? Theme.textSecondary : "#444")
anchors.horizontalCenter: parent.horizontalCenter
}
// Label
Text {
text: modelData.label
font.pixelSize: 12
font.bold: index === root.currentIndex
color: index === root.currentIndex
? (Theme ? Theme.accentPrimary : "#7C3AED")
: parent.hovered
? (Theme ? Theme.accentPrimary : "#7C3AED")
: (Theme ? Theme.textSecondary : "#444")
anchors.horizontalCenter: parent.horizontalCenter
}
// Underline for active tab
Rectangle {
width: 24
height: 2
radius: 1
color: index === root.currentIndex
? (Theme ? Theme.accentPrimary : "#7C3AED")
: "transparent"
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
}
}

38
Settings/Theme.json
View file

@ -1,28 +1,28 @@
{
"backgroundPrimary": "#0E0F10",
"backgroundSecondary": "#1A1B1C",
"backgroundTertiary": "#262728",
"backgroundPrimary": "#0F1012",
"backgroundSecondary": "#1B1C1E",
"backgroundTertiary": "#27282A",
"surface": "#212223",
"surfaceVariant": "#323334",
"surface": "#222325",
"surfaceVariant": "#333436",
"textPrimary": "#F0F1E0",
"textSecondary": "#D8D9CA",
"textDisabled": "#909186",
"textPrimary": "#DBF7F5",
"textSecondary": "#C5DEDD",
"textDisabled": "#839493",
"accentPrimary": "#A3A485",
"accentSecondary": "#B5B69D",
"accentTertiary": "#82836A",
"accentPrimary": "#5D9BEC",
"accentSecondary": "#7DAFF0",
"accentTertiary": "#4A7CBD",
"error": "#8C8FD4",
"warning": "#A5A9ED",
"error": "#D687D8",
"warning": "#DFA2E1",
"highlight": "#DDDEB8",
"rippleEffect": "#DDDEB8",
"highlight": "#9EC3F4",
"rippleEffect": "#6DA5EE",
"onAccent": "#0E0F10",
"outline": "#565758",
"onAccent": "#0F1012",
"outline": "#575859",
"shadow": "#0E0F10",
"overlay": "#0E0F10"
"shadow": "#0F1012",
"overlay": "#0F1012"
}

188
Widgets/Sidebar/Config/SettingsModal.qml
View file

@ -5,6 +5,7 @@ import Quickshell
import Quickshell.Wayland
import qs.Settings
import qs.Services
import qs.Components
PanelWindow {
id: settingsModal
@ -102,6 +103,17 @@ PanelWindow {
}
}
// Tabs bar (moved here)
Tabs {
id: settingsTabs
Layout.fillWidth: true
tabsModel: [
{ icon: "cloud", label: "Weather" },
{ icon: "settings", label: "System" },
{ icon: "wallpaper", label: "Wallpaper" }
]
}
// Scrollable settings area
Rectangle {
Layout.fillWidth: true
@ -109,96 +121,112 @@ PanelWindow {
color: "transparent"
border.width: 0
radius: 20
Flickable {
id: flick
anchors.fill: parent
contentWidth: width
contentHeight: column.implicitHeight
contentHeight: tabContentLoader.item ? tabContentLoader.item.implicitHeight : 0
clip: true
interactive: true
boundsBehavior: Flickable.StopAtBounds
Loader {
id: tabContentLoader
anchors.top: parent.top
width: parent.width
sourceComponent: settingsTabs.currentIndex === 0 ? weatherTab : settingsTabs.currentIndex === 1 ? systemTab : wallpaperTab
}
}
Component {
id: weatherTab
ColumnLayout {
id: column
width: flick.width
spacing: 24
// CollapsibleCategory sections here
CollapsibleCategory {
title: "Weather"
expanded: false
WeatherSettings {
weatherCity: (typeof tempWeatherCity !== 'undefined' && tempWeatherCity !== null) ? tempWeatherCity : ""
useFahrenheit: tempUseFahrenheit
onCityChanged: function (city) {
tempWeatherCity = city;
}
onTemperatureUnitChanged: function (useFahrenheit) {
tempUseFahrenheit = useFahrenheit;
}
anchors.fill: parent
WeatherSettings {
Layout.fillWidth: true
Layout.alignment: Qt.AlignTop
anchors.margins: 16
weatherCity: (typeof tempWeatherCity !== 'undefined' && tempWeatherCity !== null) ? tempWeatherCity : ""
useFahrenheit: tempUseFahrenheit
onCityChanged: function (city) {
tempWeatherCity = city;
}
onTemperatureUnitChanged: function (useFahrenheit) {
tempUseFahrenheit = useFahrenheit;
}
}
CollapsibleCategory {
title: "System"
expanded: false
ProfileSettings {
showActiveWindowIcon: tempShowActiveWindowIcon
onShowAWIconChanged: function (showActiveWindowIcon) {
tempShowActiveWindowIcon = showActiveWindowIcon;
}
showSystemInfoInBar: tempShowSystemInfoInBar
onShowSystemInfoChanged: function (showSystemInfoInBar) {
tempShowSystemInfoInBar = showSystemInfoInBar;
}
showMediaInBar: tempShowMediaInBar
onShowMediaChanged: function (showMediaInBar) {
tempShowMediaInBar = showMediaInBar;
}
visualizerType: tempVisualizerType
onVisualizerTypeUpdated: function (type) {
tempVisualizerType = type;
}
}
}
Component {
id: systemTab
ColumnLayout {
anchors.fill: parent
ProfileSettings {
Layout.fillWidth: true
Layout.alignment: Qt.AlignTop
anchors.margins: 16
showActiveWindowIcon: tempShowActiveWindowIcon
onShowAWIconChanged: function (showActiveWindowIcon) {
tempShowActiveWindowIcon = showActiveWindowIcon;
}
showSystemInfoInBar: tempShowSystemInfoInBar
onShowSystemInfoChanged: function (showSystemInfoInBar) {
tempShowSystemInfoInBar = showSystemInfoInBar;
}
showMediaInBar: tempShowMediaInBar
onShowMediaChanged: function (showMediaInBar) {
tempShowMediaInBar = showMediaInBar;
}
visualizerType: tempVisualizerType
onVisualizerTypeUpdated: function (type) {
tempVisualizerType = type;
}
}
CollapsibleCategory {
title: "Wallpaper"
expanded: false
WallpaperSettings {
id: wallpaperSettings
wallpaperFolder: (typeof tempWallpaperFolder !== 'undefined' && tempWallpaperFolder !== null) ? tempWallpaperFolder : ""
useSWWW: tempUseSWWW
randomWallpaper: tempRandomWallpaper
useWallpaperTheme: tempUseWallpaperTheme
wallpaperInterval: tempWallpaperInterval
wallpaperResize: tempWallpaperResize
transitionFps: tempTransitionFps
transitionType: tempTransitionType
transitionDuration: tempTransitionDuration
onWallpaperFolderEdited: function (folder) {
tempWallpaperFolder = folder;
}
onUseSWWWChangedUpdated: function(useSWWW) {
tempUseSWWW = useSWWW;
}
onRandomWallpaperChangedUpdated: function(randomWallpaper) {
tempRandomWallpaper = randomWallpaper;
}
onUseWallpaperThemeChangedUpdated: function(useWallpaperTheme) {
tempUseWallpaperTheme = useWallpaperTheme;
}
onWallpaperIntervalChangedUpdated: function(wallpaperInterval) {
tempWallpaperInterval = wallpaperInterval;
}
onWallpaperResizeChangedUpdated: function(resize) {
tempWallpaperResize = resize;
}
onTransitionFpsChangedUpdated: function(fps) {
tempTransitionFps = fps;
}
onTransitionTypeChangedUpdated: function(type) {
tempTransitionType = type;
}
onTransitionDurationChangedUpdated: function(duration) {
tempTransitionDuration = duration;
}
}
}
Component {
id: wallpaperTab
ColumnLayout {
anchors.fill: parent
WallpaperSettings {
id: wallpaperSettings
Layout.fillWidth: true
Layout.alignment: Qt.AlignTop
anchors.margins: 16
wallpaperFolder: (typeof tempWallpaperFolder !== 'undefined' && tempWallpaperFolder !== null) ? tempWallpaperFolder : ""
useSWWW: tempUseSWWW
randomWallpaper: tempRandomWallpaper
useWallpaperTheme: tempUseWallpaperTheme
wallpaperInterval: tempWallpaperInterval
wallpaperResize: tempWallpaperResize
transitionFps: tempTransitionFps
transitionType: tempTransitionType
transitionDuration: tempTransitionDuration
onWallpaperFolderEdited: function (folder) {
tempWallpaperFolder = folder;
}
onUseSWWWChangedUpdated: function(useSWWW) {
tempUseSWWW = useSWWW;
}
onRandomWallpaperChangedUpdated: function(randomWallpaper) {
tempRandomWallpaper = randomWallpaper;
}
onUseWallpaperThemeChangedUpdated: function(useWallpaperTheme) {
tempUseWallpaperTheme = useWallpaperTheme;
}
onWallpaperIntervalChangedUpdated: function(wallpaperInterval) {
tempWallpaperInterval = wallpaperInterval;
}
onWallpaperResizeChangedUpdated: function(resize) {
tempWallpaperResize = resize;
}
onTransitionFpsChangedUpdated: function(fps) {
tempTransitionFps = fps;
}
onTransitionTypeChangedUpdated: function(type) {
tempTransitionType = type;
}
onTransitionDurationChangedUpdated: function(duration) {
tempTransitionDuration = duration;
}
}
}

19
quickshell.conf Normal file
View file

@ -0,0 +1,19 @@
[quickshell]
currentWallpaper=/home/lysec/nixos/assets/wallpapers/wallhaven-po8ow9.png
profileImage=/home/lysec/.face
randomWallpaperFlag=true
showActiveWindowIconFlag=false
showMediaInBarFlag=true
showSystemInfoInBarFlag=true
transitionDuration=1.1
transitionFps=360
transitionType=random
useSWWWFlag=true
useWallpaperThemeFlag=true
videoPath=~/Videos/
visualizerType=diamond
wallpaperFolder=/home/lysec/nixos/assets/wallpapers
wallpaperInterval=300
wallpaperResize=crop
weatherCity=Dinslaken
weatherTempUnit=celsius