403 lines
No EOL
13 KiB
QML
403 lines
No EOL
13 KiB
QML
import Quickshell
|
|
import Quickshell.Wayland
|
|
import QtQuick
|
|
import QtQuick.Controls
|
|
import QtQuick.Layouts
|
|
import QtQuick.Effects
|
|
import qs.Settings
|
|
import qs.Widgets.SettingsWindow.Tabs
|
|
import qs.Widgets.SettingsWindow.Tabs.Components
|
|
|
|
PanelWindow {
|
|
id: panelMain
|
|
implicitHeight: screen.height / 2
|
|
implicitWidth: screen.width / 2
|
|
color: "transparent"
|
|
|
|
property int activeTabIndex: 0
|
|
|
|
WlrLayershell.keyboardFocus: WlrKeyboardFocus.OnDemand
|
|
|
|
|
|
Component {
|
|
id: generalSettings
|
|
General {}
|
|
}
|
|
|
|
Component {
|
|
id: barSettings
|
|
Bar {}
|
|
}
|
|
|
|
Component {
|
|
id: timeWeatherSettings
|
|
TimeWeather {}
|
|
}
|
|
|
|
Component {
|
|
id: recordingSettings
|
|
Recording {}
|
|
}
|
|
|
|
Component {
|
|
id: networkSettings
|
|
Network {}
|
|
}
|
|
|
|
Component {
|
|
id: miscSettings
|
|
Misc {}
|
|
}
|
|
|
|
Component {
|
|
id: aboutSettings
|
|
About {}
|
|
}
|
|
|
|
Component {
|
|
id: displaySettings
|
|
Display {}
|
|
}
|
|
|
|
Component {
|
|
id: wallpaperSettings
|
|
Wallpaper {}
|
|
}
|
|
|
|
Rectangle {
|
|
id: background
|
|
color: Theme.backgroundPrimary
|
|
anchors.fill: parent
|
|
radius: 20
|
|
border.color: Theme.outline
|
|
border.width: 1
|
|
|
|
MultiEffect {
|
|
source: background
|
|
anchors.fill: background
|
|
shadowEnabled: true
|
|
shadowColor: Theme.shadow
|
|
shadowOpacity: 0.3
|
|
shadowHorizontalOffset: 0
|
|
shadowVerticalOffset: 2
|
|
shadowBlur: 12
|
|
}
|
|
}
|
|
|
|
|
|
Rectangle {
|
|
id: settings
|
|
color: Theme.backgroundPrimary
|
|
anchors {
|
|
left: tabs.right
|
|
top: parent.top
|
|
bottom: parent.bottom
|
|
right: parent.right
|
|
margins: 12
|
|
}
|
|
topRightRadius: 20
|
|
bottomRightRadius: 20
|
|
|
|
|
|
Rectangle {
|
|
id: headerArea
|
|
anchors {
|
|
top: parent.top
|
|
left: parent.left
|
|
right: parent.right
|
|
margins: 16
|
|
}
|
|
height: 48
|
|
color: "transparent"
|
|
|
|
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 ? "Recording" :
|
|
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
|
|
}
|
|
|
|
// Wallpaper Selection Button (only visible on Wallpaper tab)
|
|
Rectangle {
|
|
width: 32
|
|
height: 32
|
|
radius: 16
|
|
color: wallpaperButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
|
|
border.color: Theme.accentPrimary
|
|
border.width: 1
|
|
visible: activeTabIndex === 6 // Wallpaper tab index
|
|
|
|
Text {
|
|
anchors.centerIn: parent
|
|
text: "image"
|
|
font.family: wallpaperButtonArea.containsMouse ? "Material Symbols Rounded" : "Material Symbols Outlined"
|
|
font.pixelSize: 18
|
|
color: wallpaperButtonArea.containsMouse ? Theme.onAccent : Theme.accentPrimary
|
|
}
|
|
|
|
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
|
|
|
|
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
|
|
}
|
|
|
|
MouseArea {
|
|
id: closeButtonArea
|
|
anchors.fill: parent
|
|
hoverEnabled: true
|
|
cursorShape: Qt.PointingHandCursor
|
|
onClicked: panelMain.visible = false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
Rectangle {
|
|
anchors {
|
|
top: headerArea.bottom
|
|
left: parent.left
|
|
right: parent.right
|
|
margins: 16
|
|
}
|
|
height: 1
|
|
color: Theme.outline
|
|
opacity: 0.3
|
|
}
|
|
|
|
Item {
|
|
id: settingsContainer
|
|
anchors {
|
|
top: headerArea.bottom
|
|
left: parent.left
|
|
right: parent.right
|
|
bottom: parent.bottom
|
|
margins: 24
|
|
topMargin: 32
|
|
}
|
|
|
|
|
|
Loader {
|
|
id: settingsLoader
|
|
anchors.fill: parent
|
|
sourceComponent: generalSettings
|
|
opacity: 1
|
|
visible: opacity > 0
|
|
|
|
Behavior on opacity {
|
|
NumberAnimation {
|
|
duration: 150
|
|
easing.type: Easing.InOutQuad
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
Loader {
|
|
id: settingsLoader2
|
|
anchors.fill: parent
|
|
opacity: 0
|
|
visible: opacity > 0
|
|
|
|
Behavior on opacity {
|
|
NumberAnimation {
|
|
duration: 150
|
|
easing.type: Easing.InOutQuad
|
|
}
|
|
}
|
|
}
|
|
|
|
// Wallpaper Selector Component
|
|
WallpaperSelector {
|
|
id: wallpaperSelector
|
|
anchors.fill: parent
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
Rectangle {
|
|
id: tabs
|
|
color: Theme.surface
|
|
width: screen.width / 9
|
|
height: panelMain.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: "Recording" },
|
|
{ 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 } }
|
|
}
|
|
|
|
Label {
|
|
id: icon
|
|
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
|
|
}
|
|
|
|
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;
|
|
|
|
const newComponent = {
|
|
0: generalSettings,
|
|
1: barSettings,
|
|
2: timeWeatherSettings,
|
|
3: recordingSettings,
|
|
4: networkSettings,
|
|
5: displaySettings,
|
|
6: wallpaperSettings,
|
|
7: miscSettings,
|
|
8: aboutSettings
|
|
}[index];
|
|
|
|
|
|
const tabNames = [
|
|
"General",
|
|
"Bar",
|
|
"Time & Weather",
|
|
"Recording",
|
|
"Network",
|
|
"Display",
|
|
"Wallpaper",
|
|
"Misc",
|
|
"About"
|
|
];
|
|
tabName.text = tabNames[index];
|
|
|
|
|
|
if (settingsLoader.opacity === 1) {
|
|
|
|
settingsLoader2.sourceComponent = newComponent;
|
|
settingsLoader.opacity = 0;
|
|
settingsLoader2.opacity = 1;
|
|
} else {
|
|
|
|
settingsLoader.sourceComponent = newComponent;
|
|
settingsLoader2.opacity = 0;
|
|
settingsLoader.opacity = 1;
|
|
}
|
|
|
|
|
|
// Tab colors and indicators are now handled by property bindings
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
width: parent.width
|
|
height: 1
|
|
color: Theme.outline
|
|
opacity: 0.6
|
|
visible: index < (repeater.count - 1)
|
|
anchors.bottom: parent.bottom
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |