feat: impl nexus nav pane
This commit is contained in:
2 * r + 2 * t
parent
d5b49e5f46
commit
45fbe9e560
3 changed files with 185 additions and 78 deletions
119
modules/nexus/NavPane.qml
Normal file
119
modules/nexus/NavPane.qml
Normal file
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,106 +6,87 @@ QtObject {
|
|||
id: root
|
||||
|
||||
readonly property list<var> 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")
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue