diff --git a/components/composite/WallpaperItem.qml b/components/composite/WallpaperItem.qml new file mode 100644 index 0000000..779fb62 --- /dev/null +++ b/components/composite/WallpaperItem.qml @@ -0,0 +1,14 @@ +import QtQuick + +Image { + asynchronous: true + fillMode: Image.PreserveAspectCrop + sourceSize.width: parent.width + sourceSize.height: parent.height + + Behavior on scale { + NumberAnimation { + duration: 200 + } + } +} diff --git a/components/composite/WallpaperList.qml b/components/composite/WallpaperList.qml new file mode 100644 index 0000000..2a67f31 --- /dev/null +++ b/components/composite/WallpaperList.qml @@ -0,0 +1,65 @@ +pragma ComponentBehavior: Bound + +import qs.config +import qs.services +import QtQuick +import Qt.labs.folderlistmodel 2.9 +import Quickshell.Widgets + +ListView { + id: list + + orientation: ListView.Horizontal + + clip: true + spacing: 8 + snapMode: ListView.SnapToItem + + implicitWidth: 160 * 3 + implicitHeight: 90 + model: FolderListModel { + nameFilters: ["*.jpg"] + folder: `${Paths.home}/Wallpapers` + showDirs: false + } + delegate: Item { + id: delegate + + required property url fileUrl + required property int index + property bool hovered: ListView.isCurrentItem + + implicitWidth: 160 + implicitHeight: 90 + + Rectangle { + color: Styling.theme.base200 + anchors.fill: parent + radius: 12 + scale: delegate.hovered ? 1.0 : 0.9 + Behavior on scale { + NumberAnimation { + duration: Styling.animations.veryFast + } + } + + Image { + id: image + + asynchronous: true + anchors.fill: parent + fillMode: Image.PreserveAspectCrop + source: delegate.fileUrl + } + + MouseArea { + anchors.fill: image + + cursorShape: Qt.PointingHandCursor + hoverEnabled: true + onEntered: list.currentIndex = delegate.index + onClicked: WallpaperService.currentWallpaper = delegate.fileUrl + } + } + } +} diff --git a/modules/Shell.qml b/modules/Shell.qml index b25fbe3..be31896 100644 --- a/modules/Shell.qml +++ b/modules/Shell.qml @@ -5,6 +5,7 @@ import "launcher" import "pomodoro" import "powermenu" import "storybook" +import "wallpaper" import QtQuick import Quickshell import Quickshell.Wayland @@ -17,6 +18,23 @@ Variants { required property ShellScreen modelData + PanelWindow { + id: background + + // visible: false + anchors.top: true + anchors.left: true + anchors.right: true + anchors.bottom: true + + color: "transparent" + + WlrLayershell.exclusionMode: ExclusionMode.Ignore + WlrLayershell.layer: WlrLayer.Background + + Wallpaper {} + } + PanelWindow { id: exclusionZone diff --git a/modules/configuration/StylingView.qml b/modules/configuration/StylingView.qml index 5454953..02461a3 100644 --- a/modules/configuration/StylingView.qml +++ b/modules/configuration/StylingView.qml @@ -1,19 +1,40 @@ +pragma ComponentBehavior: Bound + import qs.components import qs.components.composite import qs.config +import qs.services import QtQuick import QtQuick.Layouts +import Qt.labs.folderlistmodel 2.9 +import Quickshell.Widgets -StyledPane { - GridLayout { +ColumnLayout { + StyledPane { + GridLayout { - columnSpacing: Styling.layout.spacing.xl + columnSpacing: Styling.layout.spacing.xl - StyledText { - text: "Theme" - font.pixelSize: Styling.typography.textSize.lg + StyledText { + text: "Theme" + font.pixelSize: Styling.typography.textSize.lg + } + + ThemeComboBox {} } + } + // StyledPane { + // WallpaperList {} + // } - ThemeComboBox {} + StyledPane { + padding: 2 + ClippingWrapperRectangle { + + radius: Styling.theme.radiusBox + color: "transparent" + + WallpaperList {} + } } } diff --git a/modules/wallpaper/Wallpaper.qml b/modules/wallpaper/Wallpaper.qml new file mode 100644 index 0000000..d396074 --- /dev/null +++ b/modules/wallpaper/Wallpaper.qml @@ -0,0 +1,32 @@ +import qs.services +import QtQuick +import QtQuick.Controls + +StackView { + id: stack + property url wallpaper: WallpaperService.currentWallpaper + + anchors.fill: parent + + replaceEnter: Transition { + OpacityAnimator { + from: 0.0 + to: 1.0 + duration: 1000 + } + } + replaceExit: Transition { + PauseAnimation { + duration: 1100 + } + } + + Component { + id: img + Image {} + } + + onWallpaperChanged: stack.replace(img, { + "source": stack.wallpaper + }) +}