diff --git a/modules/nexus/NavPane.qml b/modules/nexus/NavPane.qml new file mode 100644 index 00000000..e8c47dcc --- /dev/null +++ b/modules/nexus/NavPane.qml @@ -0,0 +1,119 @@ +pragma ComponentBehavior: Bound + +import QtQuick +import QtQuick.Layouts +import Caelestia.Config +import qs.components +import qs.components.controls +import qs.services +import qs.modules.nexus + +ColumnLayout { + id: root + + required property NexusState nState + + spacing: Tokens.spacing.extraSmall + + Repeater { + id: list + + model: PageRegistry.pages + + StyledRect { + id: item + + required property var modelData + required property int index + + readonly property bool isCurrentPage: index === root.nState.currentPageIdx + readonly property bool isCategoryStart: index === 0 || PageRegistry.pages[index - 1].category !== modelData.category + readonly property bool isCategoryEnd: index === list.model.length - 1 || PageRegistry.pages[index + 1].category !== modelData.category + + Layout.fillWidth: true + Layout.topMargin: index !== 0 && isCategoryStart ? Tokens.spacing.medium : 0 + implicitHeight: { + const h = layout.implicitHeight + layout.anchors.margins * 2; + return h % 2 === 0 ? h : h + 1; + } + + color: isCurrentPage ? Colours.palette.m3secondaryContainer : Colours.palette.m3surfaceContainerHigh + + topLeftRadius: stateLayer.pressed ? Tokens.rounding.medium : isCurrentPage ? Tokens.rounding.extraLargeIncreased : isCategoryStart ? Tokens.rounding.extraLarge : Tokens.rounding.extraSmall + topRightRadius: stateLayer.pressed ? Tokens.rounding.medium : isCurrentPage ? Tokens.rounding.extraLargeIncreased : isCategoryStart ? Tokens.rounding.extraLarge : Tokens.rounding.extraSmall + bottomLeftRadius: stateLayer.pressed ? Tokens.rounding.medium : isCurrentPage ? Tokens.rounding.extraLargeIncreased : isCategoryEnd ? Tokens.rounding.extraLarge : Tokens.rounding.extraSmall + bottomRightRadius: stateLayer.pressed ? Tokens.rounding.medium : isCurrentPage ? Tokens.rounding.extraLargeIncreased : isCategoryEnd ? Tokens.rounding.extraLarge : Tokens.rounding.extraSmall + + RadiusBehavior on topLeftRadius {} + RadiusBehavior on topRightRadius {} + RadiusBehavior on bottomLeftRadius {} + RadiusBehavior on bottomRightRadius {} + + StateLayer { + id: stateLayer + + anchors.fill: parent + topLeftRadius: parent.topLeftRadius + topRightRadius: parent.topRightRadius + bottomLeftRadius: parent.bottomLeftRadius + bottomRightRadius: parent.bottomRightRadius + + onClicked: root.nState.currentPageIdx = item.index + } + + RowLayout { + id: layout + + anchors.fill: parent + anchors.margins: Tokens.padding.large + spacing: Tokens.spacing.medium + + StyledRect { + Layout.fillHeight: true + Layout.topMargin: -1 + Layout.bottomMargin: -1 + implicitWidth: height + + radius: Tokens.rounding.full + color: item.isCurrentPage ? Colours.palette.m3primary : Colours.palette.m3secondaryContainer + + MaterialIcon { + anchors.centerIn: parent + anchors.verticalCenterOffset: 1 + + text: item.modelData.icon + color: item.isCurrentPage ? Colours.palette.m3onPrimary : Colours.palette.m3onSecondaryContainer + fontStyle: Tokens.font.icon.medium + fill: 1 + } + } + + ColumnLayout { + Layout.fillWidth: true + spacing: 0 //Tokens.spacing.extraSmall + + StyledText { + Layout.fillWidth: true + text: item.modelData.label + font: Tokens.font.title.small + elide: Text.ElideRight + } + + StyledText { + Layout.fillWidth: true + text: item.modelData.description + color: Colours.palette.m3onSurfaceVariant + font: Tokens.font.label.small + elide: Text.ElideRight + } + } + } + } + } + + component RadiusBehavior: Behavior { + Anim { + type: Anim.DefaultEffects + } + } +} diff --git a/modules/nexus/Nexus.qml b/modules/nexus/Nexus.qml index 5ffec404..0a87f1f3 100644 --- a/modules/nexus/Nexus.qml +++ b/modules/nexus/Nexus.qml @@ -6,6 +6,7 @@ import Caelestia.Config import qs.components import qs.components.controls import qs.services +import qs.modules.nexus Item { id: root @@ -25,7 +26,7 @@ Item { id: blobGroup smoothing: root.Tokens.rounding.largeIncreased - color: Colours.palette.m3surfaceContainer + color: Colours.palette.m3surfaceContainerLow } BlobInvertedRect { @@ -33,7 +34,7 @@ Item { group: blobGroup radius: Tokens.rounding.large - borderLeft: navPane.implicitWidth + Tokens.padding.medium + borderLeft: navPane.width + navPane.anchors.margins * 2 borderRight: Tokens.padding.medium borderTop: Tokens.padding.medium borderBottom: Tokens.padding.medium @@ -72,9 +73,15 @@ Item { } } - Item { + NavPane { id: navPane // TODO - implicitWidth: 400 + anchors.top: parent.top + anchors.bottom: parent.bottom + anchors.left: parent.left + anchors.margins: Tokens.padding.large + + nState: nState + width: Math.round(root.width / 3) } } diff --git a/modules/nexus/PageRegistry.qml b/modules/nexus/PageRegistry.qml index 73955208..134ab7f5 100644 --- a/modules/nexus/PageRegistry.qml +++ b/modules/nexus/PageRegistry.qml @@ -6,106 +6,87 @@ QtObject { id: root readonly property list pages: [ + // Appearance { - label: qsTr("Appearance"), + label: qsTr("Look & feel"), icon: "palette", - description: qsTr("Customise the look and feel of your desktop") + description: qsTr("Fonts, colours, transparency"), + category: "appearance" }, { - label: qsTr("Taskbar"), - icon: "dock_to_bottom", - description: qsTr("Configure your taskbar appearance and behavior") - }, - { - label: qsTr("Launcher"), - icon: "apps", - description: qsTr("Customize application launcher settings") - }, - { - label: qsTr("Dashboard"), - icon: "dashboard", - description: qsTr("Configure dashboard widgets and layout") - }, - { - label: qsTr("Sidebar"), - icon: "side_navigation", - description: qsTr("Sidebar panel settings") - }, - { - label: qsTr("Utilities"), - icon: "handyman", - description: qsTr("Quick access utilities and tools") - }, - { - label: qsTr("Notifications"), - icon: "notifications", - description: qsTr("Manage notification settings and behavior") - }, - { - label: qsTr("Session"), - icon: "account_circle", - description: qsTr("User session and power menu settings") - }, - { - label: qsTr("Lockscreen"), - icon: "lock", - description: qsTr("Lock screen appearance and security") - }, - { - label: qsTr("Display"), - icon: "monitor", - title: "Display", - description: qsTr("Monitor configuration and display settings") + label: qsTr("Wallpaper & widgets"), + icon: "wallpaper", + description: qsTr("Wallpaper, desktop widgets"), + category: "appearance" }, + + // Connectivity + // TODO + // { + // label: qsTr("Display"), + // icon: "monitor", + // description: qsTr("Output configuration"), + // category: "connectivity" + // }, { label: qsTr("Network"), icon: "wifi", - description: qsTr("Network connections and settings") - }, - { - label: qsTr("Audio"), - icon: "volume_up", - description: qsTr("Sound devices and volume control") + description: qsTr("Wi-Fi, ethernet"), + category: "connectivity" }, { label: qsTr("Bluetooth"), icon: "bluetooth", - description: qsTr("Bluetooth device management") + description: qsTr("Bluetooth pairing"), + category: "connectivity" }, { - label: qsTr("Location"), - icon: "location_on", - description: qsTr("Location access and privacy") + label: qsTr("Audio"), + icon: "volume_up", + description: qsTr("App volumes, sound devices"), + category: "connectivity" }, + + // System { - label: qsTr("Screen recorder"), - icon: "screen_record", - description: qsTr("Screen recording settings") - }, - { - label: qsTr("Power"), - icon: "power_settings_new", - description: qsTr("Power management and battery settings") + label: qsTr("Updates"), + icon: "update", + description: qsTr("System updates"), + category: "system" }, { label: qsTr("Plugins"), icon: "extension", - description: qsTr("Manage and configure plugins") + description: qsTr("Manage plugins"), + category: "system" + }, + + // Shell + { + label: qsTr("Panels"), + icon: "dock_to_bottom", + description: qsTr("Dashboard, taskbar, launcher, sidebar"), + category: "shell" }, { - label: qsTr("Hooks"), - icon: "link", - description: qsTr("System hooks and automation") + label: qsTr("Services"), + icon: "build", + description: qsTr("Poll intervals, lyrics backend"), + category: "shell" }, + { + label: qsTr("Language & region"), + icon: "build", + description: qsTr("UI language, weather location, display units"), + category: "shell" + }, + + // About { label: qsTr("About"), icon: "info", - description: qsTr("System information and credits") + description: qsTr("System information, credits"), + category: "about" }, - { - label: qsTr("Updates"), - icon: "update", - description: qsTr("System updates and changelog") - } ] }