refactor: add page base component

Also put page content inside flickable
This commit is contained in:
2 * r + 2 * t 2026-06-05 17:13:31 +10:00
parent 45c97074b7
commit 550eb0bf1a
2 changed files with 212 additions and 159 deletions

View file

@ -0,0 +1,64 @@
pragma ComponentBehavior: Bound
import QtQuick
import QtQuick.Layouts
import Caelestia.Config
import qs.components
import qs.components.containers
import qs.components.controls
import qs.services
import qs.modules.nexus
ColumnLayout {
id: root
required property string title
required property NexusState nState
property bool isSubPage
readonly property int cappedWidth: Math.min(800, width)
default property Item contentChild
signal close
spacing: Tokens.spacing.extraExtraLarge
RowLayout {
spacing: Tokens.spacing.largeIncreased
Loader {
visible: active
active: root.isSubPage
asynchronous: true
sourceComponent: IconButton {
icon: "arrow_back"
font: Tokens.font.icon.medium
type: IconButton.Tonal
isRound: true
inactiveColour: Colours.tPalette.m3surfaceContainerHigh
inactiveOnColour: Colours.palette.m3onSurface
onClicked: root.close()
}
}
StyledText {
text: root.title
font: Tokens.font.title.large
}
}
VerticalFadeFlickable {
id: flickable
Layout.fillWidth: true
Layout.fillHeight: true
Layout.topMargin: -topMargin
Layout.bottomMargin: -bottomMargin
topMargin: Tokens.padding.large
bottomMargin: Tokens.padding.large
contentHeight: root.contentChild?.implicitHeight ?? 0
contentItem.children: [root.contentChild]
}
}

View file

@ -2,34 +2,29 @@ pragma ComponentBehavior: Bound
import QtQuick
import QtQuick.Layouts
import Quickshell
import Caelestia.Components
import Caelestia.Config
import qs.components
import qs.components.controls
import qs.components.images
import qs.services
import qs.modules.nexus
import qs.modules.nexus.common
ColumnLayout {
PageBase {
id: root
required property NexusState nState
readonly property int cappedWidth: Math.min(800, width)
title: qsTr("Wallpaper & style")
ColumnLayout {
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
width: root.cappedWidth
spacing: Tokens.spacing.large
StyledText {
text: qsTr("Wallpaper & style")
font: Tokens.font.title.large
}
StyledClippingRect {
id: wallWrapper
Layout.alignment: Qt.AlignHCenter
Layout.topMargin: Tokens.spacing.extraLarge
implicitWidth: {
const screen = root.nState.screen;
return implicitHeight / screen.height * screen.width;
@ -175,8 +170,7 @@ ColumnLayout {
}
ToggleRow {
Layout.alignment: Qt.AlignHCenter
implicitWidth: root.cappedWidth
Layout.fillWidth: true
first: true
text: qsTr("Display wallpaper")
@ -186,8 +180,7 @@ ColumnLayout {
ToggleRow {
Layout.topMargin: Tokens.spacing.extraSmall / 2 - parent.spacing
Layout.alignment: Qt.AlignHCenter
implicitWidth: root.cappedWidth
Layout.fillWidth: true
text: qsTr("Transparency")
subtext: qsTr("Base %1, layers %2").arg(Colours.transparency.base).arg(Colours.transparency.layers)
@ -197,16 +190,12 @@ ColumnLayout {
ToggleRow {
Layout.topMargin: Tokens.spacing.extraSmall / 2 - parent.spacing
Layout.alignment: Qt.AlignHCenter
implicitWidth: root.cappedWidth
Layout.fillWidth: true
last: true
text: qsTr("Dark theme")
checked: !Colours.light
onToggled: Colours.setMode(checked ? "dark" : "light")
}
Item {
Layout.fillHeight: true
}
}