Switch Settings tab based system
This commit is contained in:
ly-sec
parent
66f11eaa1f
commit
ffc4db9d0f
4 changed files with 223 additions and 99 deletions
77
Components/Tabs.qml
Normal file
77
Components/Tabs.qml
Normal 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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,28 +1,28 @@
|
||||||
{
|
{
|
||||||
"backgroundPrimary": "#0E0F10",
|
"backgroundPrimary": "#0F1012",
|
||||||
"backgroundSecondary": "#1A1B1C",
|
"backgroundSecondary": "#1B1C1E",
|
||||||
"backgroundTertiary": "#262728",
|
"backgroundTertiary": "#27282A",
|
||||||
|
|
||||||
"surface": "#212223",
|
"surface": "#222325",
|
||||||
"surfaceVariant": "#323334",
|
"surfaceVariant": "#333436",
|
||||||
|
|
||||||
"textPrimary": "#F0F1E0",
|
"textPrimary": "#DBF7F5",
|
||||||
"textSecondary": "#D8D9CA",
|
"textSecondary": "#C5DEDD",
|
||||||
"textDisabled": "#909186",
|
"textDisabled": "#839493",
|
||||||
|
|
||||||
"accentPrimary": "#A3A485",
|
"accentPrimary": "#5D9BEC",
|
||||||
"accentSecondary": "#B5B69D",
|
"accentSecondary": "#7DAFF0",
|
||||||
"accentTertiary": "#82836A",
|
"accentTertiary": "#4A7CBD",
|
||||||
|
|
||||||
"error": "#8C8FD4",
|
"error": "#D687D8",
|
||||||
"warning": "#A5A9ED",
|
"warning": "#DFA2E1",
|
||||||
|
|
||||||
"highlight": "#DDDEB8",
|
"highlight": "#9EC3F4",
|
||||||
"rippleEffect": "#DDDEB8",
|
"rippleEffect": "#6DA5EE",
|
||||||
|
|
||||||
"onAccent": "#0E0F10",
|
"onAccent": "#0F1012",
|
||||||
"outline": "#565758",
|
"outline": "#575859",
|
||||||
|
|
||||||
"shadow": "#0E0F10",
|
"shadow": "#0F1012",
|
||||||
"overlay": "#0E0F10"
|
"overlay": "#0F1012"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@ import Quickshell
|
||||||
import Quickshell.Wayland
|
import Quickshell.Wayland
|
||||||
import qs.Settings
|
import qs.Settings
|
||||||
import qs.Services
|
import qs.Services
|
||||||
|
import qs.Components
|
||||||
|
|
||||||
PanelWindow {
|
PanelWindow {
|
||||||
id: settingsModal
|
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
|
// Scrollable settings area
|
||||||
Rectangle {
|
Rectangle {
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
|
|
@ -109,96 +121,112 @@ PanelWindow {
|
||||||
color: "transparent"
|
color: "transparent"
|
||||||
border.width: 0
|
border.width: 0
|
||||||
radius: 20
|
radius: 20
|
||||||
|
|
||||||
Flickable {
|
Flickable {
|
||||||
id: flick
|
id: flick
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
contentWidth: width
|
contentWidth: width
|
||||||
contentHeight: column.implicitHeight
|
contentHeight: tabContentLoader.item ? tabContentLoader.item.implicitHeight : 0
|
||||||
clip: true
|
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 {
|
ColumnLayout {
|
||||||
id: column
|
anchors.fill: parent
|
||||||
width: flick.width
|
WeatherSettings {
|
||||||
spacing: 24
|
Layout.fillWidth: true
|
||||||
// CollapsibleCategory sections here
|
Layout.alignment: Qt.AlignTop
|
||||||
CollapsibleCategory {
|
anchors.margins: 16
|
||||||
title: "Weather"
|
weatherCity: (typeof tempWeatherCity !== 'undefined' && tempWeatherCity !== null) ? tempWeatherCity : ""
|
||||||
expanded: false
|
useFahrenheit: tempUseFahrenheit
|
||||||
WeatherSettings {
|
onCityChanged: function (city) {
|
||||||
weatherCity: (typeof tempWeatherCity !== 'undefined' && tempWeatherCity !== null) ? tempWeatherCity : ""
|
tempWeatherCity = city;
|
||||||
useFahrenheit: tempUseFahrenheit
|
}
|
||||||
onCityChanged: function (city) {
|
onTemperatureUnitChanged: function (useFahrenheit) {
|
||||||
tempWeatherCity = city;
|
tempUseFahrenheit = useFahrenheit;
|
||||||
}
|
|
||||||
onTemperatureUnitChanged: function (useFahrenheit) {
|
|
||||||
tempUseFahrenheit = useFahrenheit;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
CollapsibleCategory {
|
}
|
||||||
title: "System"
|
}
|
||||||
expanded: false
|
Component {
|
||||||
ProfileSettings {
|
id: systemTab
|
||||||
showActiveWindowIcon: tempShowActiveWindowIcon
|
ColumnLayout {
|
||||||
onShowAWIconChanged: function (showActiveWindowIcon) {
|
anchors.fill: parent
|
||||||
tempShowActiveWindowIcon = showActiveWindowIcon;
|
ProfileSettings {
|
||||||
}
|
Layout.fillWidth: true
|
||||||
showSystemInfoInBar: tempShowSystemInfoInBar
|
Layout.alignment: Qt.AlignTop
|
||||||
onShowSystemInfoChanged: function (showSystemInfoInBar) {
|
anchors.margins: 16
|
||||||
tempShowSystemInfoInBar = showSystemInfoInBar;
|
showActiveWindowIcon: tempShowActiveWindowIcon
|
||||||
}
|
onShowAWIconChanged: function (showActiveWindowIcon) {
|
||||||
showMediaInBar: tempShowMediaInBar
|
tempShowActiveWindowIcon = showActiveWindowIcon;
|
||||||
onShowMediaChanged: function (showMediaInBar) {
|
}
|
||||||
tempShowMediaInBar = showMediaInBar;
|
showSystemInfoInBar: tempShowSystemInfoInBar
|
||||||
}
|
onShowSystemInfoChanged: function (showSystemInfoInBar) {
|
||||||
visualizerType: tempVisualizerType
|
tempShowSystemInfoInBar = showSystemInfoInBar;
|
||||||
onVisualizerTypeUpdated: function (type) {
|
}
|
||||||
tempVisualizerType = type;
|
showMediaInBar: tempShowMediaInBar
|
||||||
}
|
onShowMediaChanged: function (showMediaInBar) {
|
||||||
|
tempShowMediaInBar = showMediaInBar;
|
||||||
|
}
|
||||||
|
visualizerType: tempVisualizerType
|
||||||
|
onVisualizerTypeUpdated: function (type) {
|
||||||
|
tempVisualizerType = type;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
CollapsibleCategory {
|
}
|
||||||
title: "Wallpaper"
|
}
|
||||||
expanded: false
|
Component {
|
||||||
WallpaperSettings {
|
id: wallpaperTab
|
||||||
id: wallpaperSettings
|
ColumnLayout {
|
||||||
wallpaperFolder: (typeof tempWallpaperFolder !== 'undefined' && tempWallpaperFolder !== null) ? tempWallpaperFolder : ""
|
anchors.fill: parent
|
||||||
useSWWW: tempUseSWWW
|
WallpaperSettings {
|
||||||
randomWallpaper: tempRandomWallpaper
|
id: wallpaperSettings
|
||||||
useWallpaperTheme: tempUseWallpaperTheme
|
Layout.fillWidth: true
|
||||||
wallpaperInterval: tempWallpaperInterval
|
Layout.alignment: Qt.AlignTop
|
||||||
wallpaperResize: tempWallpaperResize
|
anchors.margins: 16
|
||||||
transitionFps: tempTransitionFps
|
wallpaperFolder: (typeof tempWallpaperFolder !== 'undefined' && tempWallpaperFolder !== null) ? tempWallpaperFolder : ""
|
||||||
transitionType: tempTransitionType
|
useSWWW: tempUseSWWW
|
||||||
transitionDuration: tempTransitionDuration
|
randomWallpaper: tempRandomWallpaper
|
||||||
onWallpaperFolderEdited: function (folder) {
|
useWallpaperTheme: tempUseWallpaperTheme
|
||||||
tempWallpaperFolder = folder;
|
wallpaperInterval: tempWallpaperInterval
|
||||||
}
|
wallpaperResize: tempWallpaperResize
|
||||||
onUseSWWWChangedUpdated: function(useSWWW) {
|
transitionFps: tempTransitionFps
|
||||||
tempUseSWWW = useSWWW;
|
transitionType: tempTransitionType
|
||||||
}
|
transitionDuration: tempTransitionDuration
|
||||||
onRandomWallpaperChangedUpdated: function(randomWallpaper) {
|
onWallpaperFolderEdited: function (folder) {
|
||||||
tempRandomWallpaper = randomWallpaper;
|
tempWallpaperFolder = folder;
|
||||||
}
|
}
|
||||||
onUseWallpaperThemeChangedUpdated: function(useWallpaperTheme) {
|
onUseSWWWChangedUpdated: function(useSWWW) {
|
||||||
tempUseWallpaperTheme = useWallpaperTheme;
|
tempUseSWWW = useSWWW;
|
||||||
}
|
}
|
||||||
onWallpaperIntervalChangedUpdated: function(wallpaperInterval) {
|
onRandomWallpaperChangedUpdated: function(randomWallpaper) {
|
||||||
tempWallpaperInterval = wallpaperInterval;
|
tempRandomWallpaper = randomWallpaper;
|
||||||
}
|
}
|
||||||
onWallpaperResizeChangedUpdated: function(resize) {
|
onUseWallpaperThemeChangedUpdated: function(useWallpaperTheme) {
|
||||||
tempWallpaperResize = resize;
|
tempUseWallpaperTheme = useWallpaperTheme;
|
||||||
}
|
}
|
||||||
onTransitionFpsChangedUpdated: function(fps) {
|
onWallpaperIntervalChangedUpdated: function(wallpaperInterval) {
|
||||||
tempTransitionFps = fps;
|
tempWallpaperInterval = wallpaperInterval;
|
||||||
}
|
}
|
||||||
onTransitionTypeChangedUpdated: function(type) {
|
onWallpaperResizeChangedUpdated: function(resize) {
|
||||||
tempTransitionType = type;
|
tempWallpaperResize = resize;
|
||||||
}
|
}
|
||||||
onTransitionDurationChangedUpdated: function(duration) {
|
onTransitionFpsChangedUpdated: function(fps) {
|
||||||
tempTransitionDuration = duration;
|
tempTransitionFps = fps;
|
||||||
}
|
}
|
||||||
|
onTransitionTypeChangedUpdated: function(type) {
|
||||||
|
tempTransitionType = type;
|
||||||
|
}
|
||||||
|
onTransitionDurationChangedUpdated: function(duration) {
|
||||||
|
tempTransitionDuration = duration;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
19
quickshell.conf
Normal file
19
quickshell.conf
Normal 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
|
||||||
Loading…
Add table
Add a link
Reference in a new issue