refactor: add page base component
Also put page content inside flickable
This commit is contained in:
parent
45c97074b7
commit
550eb0bf1a
2 changed files with 212 additions and 159 deletions
64
modules/nexus/common/PageBase.qml
Normal file
64
modules/nexus/common/PageBase.qml
Normal 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]
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue