feat: actually impl wall selector w/ categories
This commit is contained in:
parent
b01137edf1
commit
0bbb1c04b7
6 changed files with 189 additions and 89 deletions
|
|
@ -8,6 +8,8 @@ QtObject {
|
|||
property list<int> subPageIdxStack
|
||||
property bool searchOpen
|
||||
|
||||
property string selectedWallpaperCategory
|
||||
|
||||
signal close
|
||||
signal subPageOpened(idx: int)
|
||||
signal subPageClosed
|
||||
|
|
|
|||
|
|
@ -18,6 +18,9 @@ QtObject {
|
|||
Component {
|
||||
WallpaperSelect {}
|
||||
}
|
||||
Component {
|
||||
WallpaperCategory {}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
|
|||
105
modules/nexus/common/WallItem.qml
Normal file
105
modules/nexus/common/WallItem.qml
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
pragma ComponentBehavior: Bound
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import Quickshell
|
||||
import Caelestia.Config
|
||||
import qs.components
|
||||
import qs.components.controls
|
||||
import qs.services
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
||||
property alias source: img.source
|
||||
property alias text: label.text
|
||||
property alias radius: imgWrapper.radius
|
||||
property alias imgHeight: imgWrapper.implicitHeight
|
||||
property bool fillLabel: true
|
||||
|
||||
signal clicked
|
||||
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: layout.implicitHeight
|
||||
|
||||
ColumnLayout {
|
||||
id: layout
|
||||
|
||||
anchors.fill: parent
|
||||
spacing: Tokens.spacing.small
|
||||
|
||||
StyledClippingRect {
|
||||
id: imgWrapper
|
||||
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: width
|
||||
radius: Tokens.rounding.largeIncreased
|
||||
color: Colours.tPalette.m3surfaceContainer
|
||||
|
||||
Loader {
|
||||
anchors.centerIn: parent
|
||||
|
||||
opacity: img.status === Image.Ready ? 0 : 1
|
||||
active: opacity > 0
|
||||
|
||||
sourceComponent: StyledRect {
|
||||
implicitWidth: loadingIndicator.implicitSize + Tokens.padding.large * 2
|
||||
implicitHeight: loadingIndicator.implicitSize + Tokens.padding.large * 2
|
||||
|
||||
color: Colours.palette.m3primaryContainer
|
||||
radius: Tokens.rounding.full
|
||||
|
||||
LoadingIndicator {
|
||||
id: loadingIndicator
|
||||
|
||||
anchors.centerIn: parent
|
||||
containsIcon: true
|
||||
implicitSize: Math.min(imgWrapper.width, imgWrapper.height) * 0.3
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on opacity {
|
||||
Anim {
|
||||
type: Anim.DefaultEffects
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Image {
|
||||
id: img
|
||||
|
||||
anchors.fill: parent
|
||||
asynchronous: true
|
||||
fillMode: Image.PreserveAspectCrop
|
||||
sourceSize: {
|
||||
const dpr = (QsWindow.window as QsWindow)?.devicePixelRatio ?? 1;
|
||||
return Qt.size(width * dpr, height * dpr);
|
||||
}
|
||||
retainWhileLoading: true
|
||||
opacity: status === Image.Ready ? 1 : 0
|
||||
|
||||
Behavior on opacity {
|
||||
Anim {
|
||||
type: Anim.SlowEffects
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StyledText {
|
||||
id: label
|
||||
|
||||
Layout.bottomMargin: Tokens.padding.small
|
||||
Layout.fillWidth: true
|
||||
color: Colours.palette.m3onSurfaceVariant
|
||||
font: Tokens.font.label.builders.small.weight(Font.Medium).build()
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
}
|
||||
|
||||
StateLayer {
|
||||
anchors.bottomMargin: root.fillLabel ? 0 : layout.implicitHeight - imgWrapper.implicitHeight
|
||||
onClicked: root.clicked()
|
||||
}
|
||||
}
|
||||
38
modules/nexus/pages/wallandstyle/WallpaperCategory.qml
Normal file
38
modules/nexus/pages/wallandstyle/WallpaperCategory.qml
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import Caelestia.Config
|
||||
import Caelestia.Models
|
||||
import qs.services
|
||||
import qs.modules.nexus.common
|
||||
|
||||
PageBase {
|
||||
id: root
|
||||
|
||||
title: {
|
||||
const c = nState.selectedWallpaperCategory;
|
||||
return c.slice(0, 1).toUpperCase() + c.slice(1);
|
||||
}
|
||||
isSubPage: true
|
||||
|
||||
GridLayout {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.top: parent.top
|
||||
width: root.cappedWidth
|
||||
|
||||
columns: Config.nexus.wallpapersPerRow
|
||||
rowSpacing: Tokens.spacing.medium
|
||||
columnSpacing: Tokens.spacing.large
|
||||
|
||||
Repeater {
|
||||
model: Wallpapers.list.filter(w => Wallpapers.getCategoryFor(w) === root.nState.selectedWallpaperCategory)
|
||||
|
||||
WallItem {
|
||||
required property FileSystemEntry modelData
|
||||
|
||||
source: modelData.path
|
||||
text: modelData.name
|
||||
onClicked: Wallpapers.setWallpaper(modelData.path)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2,12 +2,11 @@ pragma ComponentBehavior: Bound
|
|||
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import Quickshell
|
||||
import Caelestia.Config
|
||||
import Caelestia.Models
|
||||
import qs.components
|
||||
import qs.components.controls
|
||||
import qs.services
|
||||
import qs.utils
|
||||
import qs.modules.nexus.common
|
||||
|
||||
PageBase {
|
||||
|
|
@ -22,17 +21,13 @@ PageBase {
|
|||
width: root.cappedWidth
|
||||
spacing: Tokens.spacing.small
|
||||
|
||||
Wallpaper {
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: Math.round(width * 0.3)
|
||||
WallItem {
|
||||
imgHeight: Math.round(width * 0.3)
|
||||
radius: Tokens.rounding.extraLarge
|
||||
source: Wallpapers.current
|
||||
}
|
||||
|
||||
StyledText {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
text: qsTr("Featured wallpaper")
|
||||
font: Tokens.font.label.medium
|
||||
fillLabel: false
|
||||
onClicked: ; // TODO
|
||||
}
|
||||
|
||||
StyledText {
|
||||
|
|
@ -45,95 +40,45 @@ PageBase {
|
|||
Layout.fillWidth: true
|
||||
|
||||
columns: Config.nexus.wallpapersPerRow
|
||||
rowSpacing: Tokens.spacing.large
|
||||
rowSpacing: Tokens.spacing.medium
|
||||
columnSpacing: Tokens.spacing.large
|
||||
|
||||
Repeater {
|
||||
model: Wallpapers.list
|
||||
|
||||
ColumnLayout {
|
||||
id: wallDelegate
|
||||
model: {
|
||||
const walls = Wallpapers.list;
|
||||
const baseDir = Paths.wallsdir;
|
||||
const categories = {};
|
||||
for (const w of walls) {
|
||||
if (w.parentDir !== baseDir) {
|
||||
const category = Wallpapers.getCategoryFor(w);
|
||||
if (category && !(category in categories))
|
||||
categories[category] = w;
|
||||
}
|
||||
}
|
||||
return Object.values(categories);
|
||||
}
|
||||
|
||||
WallItem {
|
||||
required property FileSystemEntry modelData
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredWidth: 0 // Force uniform size
|
||||
spacing: Tokens.spacing.small
|
||||
|
||||
Wallpaper {
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: width
|
||||
radius: Tokens.rounding.largeIncreased
|
||||
source: wallDelegate.modelData.path
|
||||
source: modelData.path
|
||||
text: {
|
||||
if (modelData.parentDir !== Paths.wallsdir) {
|
||||
const category = Wallpapers.getCategoryFor(modelData);
|
||||
return category.slice(0, 1).toUpperCase() + category.slice(1);
|
||||
}
|
||||
return modelData.name;
|
||||
}
|
||||
|
||||
StyledText {
|
||||
Layout.fillWidth: true
|
||||
text: wallDelegate.modelData.name
|
||||
color: Colours.palette.m3onSurfaceVariant
|
||||
font: Tokens.font.label.builders.small.weight(Font.Medium).build()
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
elide: Text.ElideRight
|
||||
onClicked: {
|
||||
if (modelData.parentDir !== Paths.wallsdir) {
|
||||
root.nState.selectedWallpaperCategory = Wallpapers.getCategoryFor(modelData);
|
||||
root.nState.openSubPage(2);
|
||||
} else {
|
||||
Wallpapers.setWallpaper(modelData.path);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
component Wallpaper: StyledClippingRect {
|
||||
id: wallpaper
|
||||
|
||||
property alias source: img.source
|
||||
|
||||
color: Colours.tPalette.m3surfaceContainer
|
||||
|
||||
Loader {
|
||||
anchors.centerIn: parent
|
||||
|
||||
opacity: img.status === Image.Ready ? 0 : 1
|
||||
active: opacity > 0
|
||||
|
||||
sourceComponent: StyledRect {
|
||||
implicitWidth: loadingIndicator.implicitSize + Tokens.padding.large * 2
|
||||
implicitHeight: loadingIndicator.implicitSize + Tokens.padding.large * 2
|
||||
|
||||
color: Colours.palette.m3primaryContainer
|
||||
radius: Tokens.rounding.full
|
||||
|
||||
LoadingIndicator {
|
||||
id: loadingIndicator
|
||||
|
||||
anchors.centerIn: parent
|
||||
containsIcon: true
|
||||
implicitSize: Math.min(wallpaper.width, wallpaper.height) * 0.3
|
||||
}
|
||||
}
|
||||
|
||||
Behavior on opacity {
|
||||
Anim {
|
||||
type: Anim.DefaultEffects
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Image {
|
||||
id: img
|
||||
|
||||
anchors.fill: parent
|
||||
asynchronous: true
|
||||
fillMode: Image.PreserveAspectCrop
|
||||
sourceSize: {
|
||||
const dpr = (QsWindow.window as QsWindow)?.devicePixelRatio ?? 1;
|
||||
return Qt.size(width * dpr, height * dpr);
|
||||
}
|
||||
retainWhileLoading: true
|
||||
opacity: status === Image.Ready ? 1 : 0
|
||||
|
||||
Behavior on opacity {
|
||||
Anim {
|
||||
type: Anim.SlowEffects
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,6 +20,13 @@ Searcher {
|
|||
property string actualCurrent
|
||||
property bool previewColourLock
|
||||
|
||||
function getCategoryFor(w: FileSystemEntry): string {
|
||||
let category = w.parentDir.slice(Paths.wallsdir.length + 1);
|
||||
if (category.includes("/"))
|
||||
category = category.slice(0, category.indexOf("/"));
|
||||
return category;
|
||||
}
|
||||
|
||||
function setWallpaper(path: string): void {
|
||||
actualCurrent = path;
|
||||
Quickshell.execDetached(["caelestia", "wallpaper", "-f", path, ...smartArg]);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue