195 lines
6.2 KiB
QML
195 lines
6.2 KiB
QML
import QtQuick
|
|
import QtQuick.Layouts
|
|
import QtQuick.Controls
|
|
import Quickshell
|
|
import Quickshell.Wayland
|
|
import qs.Settings
|
|
import qs.Services
|
|
import qs.Components
|
|
|
|
PanelWindow {
|
|
id: settingsModal
|
|
implicitWidth: 480
|
|
implicitHeight: 800
|
|
visible: false
|
|
color: "transparent"
|
|
anchors.top: true
|
|
anchors.right: true
|
|
margins.right: 0
|
|
margins.top: 0
|
|
//z: 100
|
|
//border.color: Theme.outline
|
|
//border.width: 1
|
|
WlrLayershell.keyboardFocus: WlrKeyboardFocus.OnDemand
|
|
|
|
Rectangle {
|
|
anchors.fill: parent
|
|
color: Theme.backgroundPrimary
|
|
radius: 24
|
|
//border.color: Theme.outline
|
|
//border.width: 1
|
|
z: 0
|
|
|
|
ColumnLayout {
|
|
id: content
|
|
anchors.fill: parent
|
|
anchors.leftMargin: 32
|
|
anchors.rightMargin: 32
|
|
anchors.topMargin: 32
|
|
|
|
spacing: 24
|
|
|
|
// Header
|
|
ColumnLayout {
|
|
id: header
|
|
Layout.fillWidth: true
|
|
spacing: 4
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
spacing: 20
|
|
Text {
|
|
text: "settings"
|
|
font.family: "Material Symbols Outlined"
|
|
font.pixelSize: 32
|
|
color: Theme.accentPrimary
|
|
}
|
|
Text {
|
|
text: "Settings"
|
|
font.pixelSize: 26
|
|
font.bold: true
|
|
color: Theme.textPrimary
|
|
Layout.fillWidth: true
|
|
}
|
|
Rectangle {
|
|
width: 36
|
|
height: 36
|
|
radius: 18
|
|
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: 20
|
|
color: closeButtonArea.containsMouse ? Theme.onAccent : Theme.accentPrimary
|
|
}
|
|
MouseArea {
|
|
id: closeButtonArea
|
|
anchors.fill: parent
|
|
hoverEnabled: true
|
|
onClicked: settingsModal.closeSettings()
|
|
}
|
|
}
|
|
}
|
|
Rectangle {
|
|
Layout.fillWidth: true
|
|
height: 1
|
|
color: Theme.outline
|
|
opacity: 0.12
|
|
}
|
|
}
|
|
|
|
// 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
|
|
Layout.preferredHeight: content.height - settingsTabs.height - header.height - 128
|
|
color: "transparent"
|
|
border.width: 0
|
|
radius: 20
|
|
|
|
Flickable {
|
|
id: flick
|
|
anchors.fill: parent
|
|
contentWidth: width
|
|
contentHeight: tabContentLoader.item ? tabContentLoader.item.implicitHeight : 0
|
|
clip: true
|
|
|
|
Loader {
|
|
id: tabContentLoader
|
|
anchors.top: parent.top
|
|
width: parent.width
|
|
sourceComponent: settingsTabs.currentIndex === 0 ? weatherTab : settingsTabs.currentIndex === 1 ? systemTab : wallpaperTab
|
|
}
|
|
}
|
|
|
|
Component {
|
|
id: weatherTab
|
|
ColumnLayout {
|
|
anchors.fill: parent
|
|
WeatherSettings {
|
|
Layout.fillWidth: true
|
|
Layout.alignment: Qt.AlignTop
|
|
anchors.margins: 16
|
|
}
|
|
}
|
|
}
|
|
Component {
|
|
id: systemTab
|
|
ColumnLayout {
|
|
anchors.fill: parent
|
|
ProfileSettings {
|
|
Layout.fillWidth: true
|
|
Layout.alignment: Qt.AlignTop
|
|
anchors.margins: 16
|
|
}
|
|
}
|
|
}
|
|
Component {
|
|
id: wallpaperTab
|
|
ColumnLayout {
|
|
anchors.fill: parent
|
|
WallpaperSettings {
|
|
id: wallpaperSettings
|
|
Layout.fillWidth: true
|
|
Layout.alignment: Qt.AlignTop
|
|
anchors.margins: 16
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Function to open the modal and initialize temp values
|
|
function openSettings() {
|
|
visible = true;
|
|
// Force focus on the text input after a short delay
|
|
focusTimer.start();
|
|
}
|
|
|
|
// Function to close the modal and release focus
|
|
function closeSettings() {
|
|
visible = false;
|
|
}
|
|
|
|
Timer {
|
|
id: focusTimer
|
|
interval: 100
|
|
repeat: false
|
|
onTriggered: {
|
|
if (visible)
|
|
// Focus will be handled by the individual components
|
|
{}
|
|
}
|
|
}
|
|
|
|
// Release focus when modal becomes invisible
|
|
onVisibleChanged: {
|
|
if (!visible)
|
|
// Focus will be handled by the individual components
|
|
{}
|
|
}
|
|
}
|
|
|