diff --git a/Widgets/SettingsWindow/Tabs/Wallpaper.qml b/Widgets/SettingsWindow/Tabs/Wallpaper.qml index 2debf46..228ff38 100644 --- a/Widgets/SettingsWindow/Tabs/Wallpaper.qml +++ b/Widgets/SettingsWindow/Tabs/Wallpaper.qml @@ -5,313 +5,710 @@ import qs.Components import qs.Services import qs.Settings -ScrollView { +ColumnLayout { + id: root + + spacing: 0 anchors.fill: parent - ColumnLayout { - id: root + anchors.margins: 0 - spacing: 0 - anchors.fill: parent - anchors.margins: 0 + ScrollView { + id: scrollView - ScrollView { - id: scrollView + Layout.fillWidth: true + Layout.fillHeight: true + padding: 16 + rightPadding: 12 + clip: true + ScrollBar.horizontal.policy: ScrollBar.AlwaysOff + ScrollBar.vertical.policy: ScrollBar.AsNeeded - Layout.fillWidth: true - Layout.fillHeight: true - padding: 16 - rightPadding: 12 - clip: true - ScrollBar.horizontal.policy: ScrollBar.AlwaysOff - ScrollBar.vertical.policy: ScrollBar.AsNeeded + ColumnLayout { + width: scrollView.availableWidth + spacing: 0 + + Item { + Layout.fillWidth: true + Layout.preferredHeight: 0 + } ColumnLayout { - width: scrollView.availableWidth - spacing: 0 + spacing: 4 + Layout.fillWidth: true - Item { - Layout.fillWidth: true - Layout.preferredHeight: 0 + Text { + text: "Wallpaper Settings" + font.pixelSize: 18 + font.bold: true + color: Theme.textPrimary + Layout.bottomMargin: 8 } + // Wallpaper Settings Category ColumnLayout { - spacing: 4 + spacing: 8 Layout.fillWidth: true + Layout.topMargin: 8 - Text { - text: "Wallpaper Settings" - font.pixelSize: 18 - font.bold: true - color: Theme.textPrimary - Layout.bottomMargin: 8 - } - - // Wallpaper Settings Category + // Wallpaper Folder ColumnLayout { spacing: 8 Layout.fillWidth: true - Layout.topMargin: 8 - - // Wallpaper Folder - ColumnLayout { - spacing: 8 - Layout.fillWidth: true - - Text { - text: "Wallpaper Folder" - font.pixelSize: 13 - font.bold: true - color: Theme.textPrimary - } - - Text { - text: "Path to your wallpaper folder" - font.pixelSize: 12 - color: Theme.textSecondary - wrapMode: Text.WordWrap - Layout.fillWidth: true - } - - RowLayout { - spacing: 8 - Layout.fillWidth: true - - Rectangle { - Layout.fillWidth: true - Layout.preferredHeight: 40 - radius: 16 - color: Theme.surfaceVariant - border.color: folderInput.activeFocus ? Theme.accentPrimary : Theme.outline - border.width: 1 - - TextInput { - id: folderInput - - anchors.fill: parent - anchors.leftMargin: 12 - anchors.rightMargin: 12 - anchors.topMargin: 6 - anchors.bottomMargin: 6 - text: Settings.settings.wallpaperFolder !== undefined ? Settings.settings.wallpaperFolder : "" - font.family: Theme.fontFamily - font.pixelSize: 13 - color: Theme.textPrimary - verticalAlignment: TextInput.AlignVCenter - clip: true - selectByMouse: true - activeFocusOnTab: true - inputMethodHints: Qt.ImhUrlCharactersOnly - onTextChanged: { - Settings.settings.wallpaperFolder = text; - } - } - - MouseArea { - anchors.fill: parent - cursorShape: Qt.IBeamCursor - onClicked: folderInput.forceActiveFocus() - } - - } - - } - - } - - } - - } - - Rectangle { - Layout.fillWidth: true - Layout.topMargin: 26 - Layout.bottomMargin: 18 - height: 1 - color: Theme.outline - opacity: 0.3 - } - - ColumnLayout { - spacing: 4 - Layout.fillWidth: true - - Text { - text: "Automation" - font.pixelSize: 18 - font.bold: true - color: Theme.textPrimary - Layout.bottomMargin: 8 - } - - // Random Wallpaper - ColumnLayout { - spacing: 8 - Layout.fillWidth: true - Layout.topMargin: 8 - - RowLayout { - spacing: 8 - Layout.fillWidth: true - - ColumnLayout { - spacing: 4 - Layout.fillWidth: true - - Text { - text: "Random Wallpaper" - font.pixelSize: 13 - font.bold: true - color: Theme.textPrimary - } - - Text { - text: "Automatically select random wallpapers from the folder" - font.pixelSize: 12 - color: Theme.textSecondary - wrapMode: Text.WordWrap - Layout.fillWidth: true - } - - } - - Rectangle { - id: randomWallpaperSwitch - - width: 52 - height: 32 - radius: 16 - color: Settings.settings.randomWallpaper ? Theme.accentPrimary : Theme.surfaceVariant - border.color: Settings.settings.randomWallpaper ? Theme.accentPrimary : Theme.outline - border.width: 2 - - Rectangle { - id: randomWallpaperThumb - - width: 28 - height: 28 - radius: 14 - color: Theme.surface - border.color: Theme.outline - border.width: 1 - y: 2 - x: Settings.settings.randomWallpaper ? randomWallpaperSwitch.width - width - 2 : 2 - - Behavior on x { - NumberAnimation { - duration: 200 - easing.type: Easing.OutCubic - } - - } - - } - - MouseArea { - anchors.fill: parent - cursorShape: Qt.PointingHandCursor - onClicked: { - Settings.settings.randomWallpaper = !Settings.settings.randomWallpaper; - } - } - - } - - } - - } - - // Use Wallpaper Theme - ColumnLayout { - spacing: 8 - Layout.fillWidth: true - Layout.topMargin: 8 - - RowLayout { - spacing: 8 - Layout.fillWidth: true - - ColumnLayout { - spacing: 4 - Layout.fillWidth: true - - Text { - text: "Use Wallpaper Theme" - font.pixelSize: 13 - font.bold: true - color: Theme.textPrimary - } - - Text { - text: "Automatically adjust theme colors based on wallpaper" - font.pixelSize: 12 - color: Theme.textSecondary - wrapMode: Text.WordWrap - Layout.fillWidth: true - } - - } - - Rectangle { - id: wallpaperThemeSwitch - - width: 52 - height: 32 - radius: 16 - color: Settings.settings.useWallpaperTheme ? Theme.accentPrimary : Theme.surfaceVariant - border.color: Settings.settings.useWallpaperTheme ? Theme.accentPrimary : Theme.outline - border.width: 2 - - Rectangle { - id: wallpaperThemeThumb - - width: 28 - height: 28 - radius: 14 - color: Theme.surface - border.color: Theme.outline - border.width: 1 - y: 2 - x: Settings.settings.useWallpaperTheme ? wallpaperThemeSwitch.width - width - 2 : 2 - - Behavior on x { - NumberAnimation { - duration: 200 - easing.type: Easing.OutCubic - } - - } - - } - - MouseArea { - anchors.fill: parent - cursorShape: Qt.PointingHandCursor - onClicked: { - Settings.settings.useWallpaperTheme = !Settings.settings.useWallpaperTheme; - } - } - - } - - } - - } - - // Wallpaper Interval - ColumnLayout { - spacing: 8 - Layout.fillWidth: true - Layout.topMargin: 8 Text { - text: "Wallpaper Interval" + text: "Wallpaper Folder" font.pixelSize: 13 font.bold: true color: Theme.textPrimary } Text { - text: "How often to change wallpapers automatically (in seconds)" + text: "Path to your wallpaper folder" + font.pixelSize: 12 + color: Theme.textSecondary + wrapMode: Text.WordWrap + Layout.fillWidth: true + } + + RowLayout { + spacing: 8 + Layout.fillWidth: true + + Rectangle { + Layout.fillWidth: true + Layout.preferredHeight: 40 + radius: 16 + color: Theme.surfaceVariant + border.color: folderInput.activeFocus ? Theme.accentPrimary : Theme.outline + border.width: 1 + + TextInput { + id: folderInput + + anchors.fill: parent + anchors.leftMargin: 12 + anchors.rightMargin: 12 + anchors.topMargin: 6 + anchors.bottomMargin: 6 + text: Settings.settings.wallpaperFolder !== undefined ? Settings.settings.wallpaperFolder : "" + font.family: Theme.fontFamily + font.pixelSize: 13 + color: Theme.textPrimary + verticalAlignment: TextInput.AlignVCenter + clip: true + selectByMouse: true + activeFocusOnTab: true + inputMethodHints: Qt.ImhUrlCharactersOnly + onTextChanged: { + Settings.settings.wallpaperFolder = text; + } + } + + MouseArea { + anchors.fill: parent + cursorShape: Qt.IBeamCursor + onClicked: folderInput.forceActiveFocus() + } + + } + + } + + } + + } + + } + + Rectangle { + Layout.fillWidth: true + Layout.topMargin: 26 + Layout.bottomMargin: 18 + height: 1 + color: Theme.outline + opacity: 0.3 + } + + ColumnLayout { + spacing: 4 + Layout.fillWidth: true + + Text { + text: "Automation" + font.pixelSize: 18 + font.bold: true + color: Theme.textPrimary + Layout.bottomMargin: 8 + } + + // Random Wallpaper + ColumnLayout { + spacing: 8 + Layout.fillWidth: true + Layout.topMargin: 8 + + RowLayout { + spacing: 8 + Layout.fillWidth: true + + ColumnLayout { + spacing: 4 + Layout.fillWidth: true + + Text { + text: "Random Wallpaper" + font.pixelSize: 13 + font.bold: true + color: Theme.textPrimary + } + + Text { + text: "Automatically select random wallpapers from the folder" + font.pixelSize: 12 + color: Theme.textSecondary + wrapMode: Text.WordWrap + Layout.fillWidth: true + } + + } + + Rectangle { + id: randomWallpaperSwitch + + width: 52 + height: 32 + radius: 16 + color: Settings.settings.randomWallpaper ? Theme.accentPrimary : Theme.surfaceVariant + border.color: Settings.settings.randomWallpaper ? Theme.accentPrimary : Theme.outline + border.width: 2 + + Rectangle { + id: randomWallpaperThumb + + width: 28 + height: 28 + radius: 14 + color: Theme.surface + border.color: Theme.outline + border.width: 1 + y: 2 + x: Settings.settings.randomWallpaper ? randomWallpaperSwitch.width - width - 2 : 2 + + Behavior on x { + NumberAnimation { + duration: 200 + easing.type: Easing.OutCubic + } + + } + + } + + MouseArea { + anchors.fill: parent + cursorShape: Qt.PointingHandCursor + onClicked: { + Settings.settings.randomWallpaper = !Settings.settings.randomWallpaper; + } + } + + } + + } + + } + + // Use Wallpaper Theme + ColumnLayout { + spacing: 8 + Layout.fillWidth: true + Layout.topMargin: 8 + + RowLayout { + spacing: 8 + Layout.fillWidth: true + + ColumnLayout { + spacing: 4 + Layout.fillWidth: true + + Text { + text: "Use Wallpaper Theme" + font.pixelSize: 13 + font.bold: true + color: Theme.textPrimary + } + + Text { + text: "Automatically adjust theme colors based on wallpaper" + font.pixelSize: 12 + color: Theme.textSecondary + wrapMode: Text.WordWrap + Layout.fillWidth: true + } + + } + + Rectangle { + id: wallpaperThemeSwitch + + width: 52 + height: 32 + radius: 16 + color: Settings.settings.useWallpaperTheme ? Theme.accentPrimary : Theme.surfaceVariant + border.color: Settings.settings.useWallpaperTheme ? Theme.accentPrimary : Theme.outline + border.width: 2 + + Rectangle { + id: wallpaperThemeThumb + + width: 28 + height: 28 + radius: 14 + color: Theme.surface + border.color: Theme.outline + border.width: 1 + y: 2 + x: Settings.settings.useWallpaperTheme ? wallpaperThemeSwitch.width - width - 2 : 2 + + Behavior on x { + NumberAnimation { + duration: 200 + easing.type: Easing.OutCubic + } + + } + + } + + MouseArea { + anchors.fill: parent + cursorShape: Qt.PointingHandCursor + onClicked: { + Settings.settings.useWallpaperTheme = !Settings.settings.useWallpaperTheme; + } + } + + } + + } + + } + + // Wallpaper Interval + ColumnLayout { + spacing: 8 + Layout.fillWidth: true + Layout.topMargin: 8 + + Text { + text: "Wallpaper Interval" + font.pixelSize: 13 + font.bold: true + color: Theme.textPrimary + } + + Text { + text: "How often to change wallpapers automatically (in seconds)" + font.pixelSize: 12 + color: Theme.textSecondary + wrapMode: Text.WordWrap + Layout.fillWidth: true + } + + RowLayout { + Layout.fillWidth: true + + Text { + text: Settings.settings.wallpaperInterval + " seconds" + font.pixelSize: 13 + color: Theme.textPrimary + } + + Item { + Layout.fillWidth: true + } + + } + + Slider { + id: intervalSlider + + Layout.fillWidth: true + from: 10 + to: 900 + stepSize: 10 + value: Settings.settings.wallpaperInterval + snapMode: Slider.SnapAlways + onMoved: { + Settings.settings.wallpaperInterval = Math.round(value); + } + + background: Rectangle { + x: intervalSlider.leftPadding + y: intervalSlider.topPadding + intervalSlider.availableHeight / 2 - height / 2 + implicitWidth: 200 + implicitHeight: 4 + width: intervalSlider.availableWidth + height: implicitHeight + radius: 2 + color: Theme.surfaceVariant + + Rectangle { + width: intervalSlider.visualPosition * parent.width + height: parent.height + color: Theme.accentPrimary + radius: 2 + } + + } + + handle: Rectangle { + x: intervalSlider.leftPadding + intervalSlider.visualPosition * (intervalSlider.availableWidth - width) + y: intervalSlider.topPadding + intervalSlider.availableHeight / 2 - height / 2 + implicitWidth: 20 + implicitHeight: 20 + radius: 10 + color: intervalSlider.pressed ? Theme.surfaceVariant : Theme.surface + border.color: Theme.accentPrimary + border.width: 2 + } + + } + + } + + } + + Rectangle { + Layout.fillWidth: true + Layout.topMargin: 26 + Layout.bottomMargin: 18 + height: 1 + color: Theme.outline + opacity: 0.3 + } + + ColumnLayout { + spacing: 4 + Layout.fillWidth: true + + Text { + text: "SWWW" + font.pixelSize: 18 + font.bold: true + color: Theme.textPrimary + Layout.bottomMargin: 8 + } + + // Use SWWW + ColumnLayout { + spacing: 8 + Layout.fillWidth: true + Layout.topMargin: 8 + + RowLayout { + spacing: 8 + Layout.fillWidth: true + + ColumnLayout { + spacing: 4 + Layout.fillWidth: true + + Text { + text: "Use SWWW" + font.pixelSize: 13 + font.bold: true + color: Theme.textPrimary + } + + Text { + text: "Use SWWW daemon for advanced wallpaper management" + font.pixelSize: 12 + color: Theme.textSecondary + wrapMode: Text.WordWrap + Layout.fillWidth: true + } + + } + + Rectangle { + id: swwwSwitch + + width: 52 + height: 32 + radius: 16 + color: Settings.settings.useSWWW ? Theme.accentPrimary : Theme.surfaceVariant + border.color: Settings.settings.useSWWW ? Theme.accentPrimary : Theme.outline + border.width: 2 + + Rectangle { + id: swwwThumb + + width: 28 + height: 28 + radius: 14 + color: Theme.surface + border.color: Theme.outline + border.width: 1 + y: 2 + x: Settings.settings.useSWWW ? swwwSwitch.width - width - 2 : 2 + + Behavior on x { + NumberAnimation { + duration: 200 + easing.type: Easing.OutCubic + } + + } + + } + + MouseArea { + anchors.fill: parent + cursorShape: Qt.PointingHandCursor + onClicked: { + Settings.settings.useSWWW = !Settings.settings.useSWWW; + } + } + + } + + } + + } + + // SWWW Settings (only visible when useSWWW is enabled) + ColumnLayout { + spacing: 8 + Layout.fillWidth: true + Layout.topMargin: 8 + visible: Settings.settings.useSWWW + + // Resize Mode + ColumnLayout { + spacing: 8 + Layout.fillWidth: true + + Text { + text: "Resize Mode" + font.pixelSize: 13 + font.bold: true + color: Theme.textPrimary + } + + Text { + text: "How SWWW should resize wallpapers to fit the screen" + font.pixelSize: 12 + color: Theme.textSecondary + wrapMode: Text.WordWrap + Layout.fillWidth: true + } + + Rectangle { + Layout.fillWidth: true + Layout.preferredHeight: 40 + radius: 16 + color: Theme.surfaceVariant + border.color: resizeComboBox.activeFocus ? Theme.accentPrimary : Theme.outline + border.width: 1 + + ComboBox { + id: resizeComboBox + + anchors.fill: parent + anchors.leftMargin: 12 + anchors.rightMargin: 12 + anchors.topMargin: 6 + anchors.bottomMargin: 6 + model: ["no", "crop", "fit", "stretch"] + currentIndex: model.indexOf(Settings.settings.wallpaperResize) + onActivated: { + Settings.settings.wallpaperResize = model[index]; + } + + background: Rectangle { + color: "transparent" + } + + contentItem: Text { + text: resizeComboBox.displayText + font: resizeComboBox.font + color: Theme.textPrimary + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignLeft + } + + popup: Popup { + y: resizeComboBox.height + width: resizeComboBox.width + implicitHeight: contentItem.implicitHeight + padding: 1 + + contentItem: ListView { + clip: true + implicitHeight: contentHeight + model: resizeComboBox.popup.visible ? resizeComboBox.delegateModel : null + currentIndex: resizeComboBox.highlightedIndex + + ScrollIndicator.vertical: ScrollIndicator { + } + + } + + background: Rectangle { + color: Theme.surface + border.color: Theme.outline + border.width: 1 + radius: 8 + } + + } + + delegate: ItemDelegate { + width: resizeComboBox.width + highlighted: resizeComboBox.highlightedIndex === index + + contentItem: Text { + text: modelData + color: Theme.textPrimary + font: resizeComboBox.font + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignLeft + } + + background: Rectangle { + color: parent.highlighted ? Theme.accentPrimary : "transparent" + } + + } + + } + + } + + } + + // Transition Type + ColumnLayout { + spacing: 8 + Layout.fillWidth: true + Layout.topMargin: 8 + + Text { + text: "Transition Type" + font.pixelSize: 13 + font.bold: true + color: Theme.textPrimary + } + + Text { + text: "Animation type when switching between wallpapers" + font.pixelSize: 12 + color: Theme.textSecondary + wrapMode: Text.WordWrap + Layout.fillWidth: true + } + + Rectangle { + Layout.fillWidth: true + Layout.preferredHeight: 40 + radius: 16 + color: Theme.surfaceVariant + border.color: transitionTypeComboBox.activeFocus ? Theme.accentPrimary : Theme.outline + border.width: 1 + + ComboBox { + id: transitionTypeComboBox + + anchors.fill: parent + anchors.leftMargin: 12 + anchors.rightMargin: 12 + anchors.topMargin: 6 + anchors.bottomMargin: 6 + model: ["none", "simple", "fade", "left", "right", "top", "bottom", "wipe", "wave", "grow", "center", "any", "outer", "random"] + currentIndex: model.indexOf(Settings.settings.transitionType) + onActivated: { + Settings.settings.transitionType = model[index]; + } + + background: Rectangle { + color: "transparent" + } + + contentItem: Text { + text: transitionTypeComboBox.displayText + font: transitionTypeComboBox.font + color: Theme.textPrimary + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignLeft + } + + popup: Popup { + y: transitionTypeComboBox.height + width: transitionTypeComboBox.width + implicitHeight: contentItem.implicitHeight + padding: 1 + + contentItem: ListView { + clip: true + implicitHeight: contentHeight + model: transitionTypeComboBox.popup.visible ? transitionTypeComboBox.delegateModel : null + currentIndex: transitionTypeComboBox.highlightedIndex + + ScrollIndicator.vertical: ScrollIndicator { + } + + } + + background: Rectangle { + color: Theme.surface + border.color: Theme.outline + border.width: 1 + radius: 8 + } + + } + + delegate: ItemDelegate { + width: transitionTypeComboBox.width + highlighted: transitionTypeComboBox.highlightedIndex === index + + contentItem: Text { + text: modelData + color: Theme.textPrimary + font: transitionTypeComboBox.font + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignLeft + } + + background: Rectangle { + color: parent.highlighted ? Theme.accentPrimary : "transparent" + } + + } + + } + + } + + } + + // Transition FPS + ColumnLayout { + spacing: 8 + Layout.fillWidth: true + Layout.topMargin: 8 + + Text { + text: "Transition FPS" + font.pixelSize: 13 + font.bold: true + color: Theme.textPrimary + } + + Text { + text: "Frames per second for transition animations" font.pixelSize: 12 color: Theme.textSecondary wrapMode: Text.WordWrap @@ -322,7 +719,7 @@ ScrollView { Layout.fillWidth: true Text { - text: Settings.settings.wallpaperInterval + " seconds" + text: Settings.settings.transitionFps + " FPS" font.pixelSize: 13 color: Theme.textPrimary } @@ -334,30 +731,30 @@ ScrollView { } Slider { - id: intervalSlider + id: fpsSlider Layout.fillWidth: true - from: 10 - to: 900 - stepSize: 10 - value: Settings.settings.wallpaperInterval + from: 30 + to: 500 + stepSize: 5 + value: Settings.settings.transitionFps snapMode: Slider.SnapAlways onMoved: { - Settings.settings.wallpaperInterval = Math.round(value); + Settings.settings.transitionFps = Math.round(value); } background: Rectangle { - x: intervalSlider.leftPadding - y: intervalSlider.topPadding + intervalSlider.availableHeight / 2 - height / 2 + x: fpsSlider.leftPadding + y: fpsSlider.topPadding + fpsSlider.availableHeight / 2 - height / 2 implicitWidth: 200 implicitHeight: 4 - width: intervalSlider.availableWidth + width: fpsSlider.availableWidth height: implicitHeight radius: 2 color: Theme.surfaceVariant Rectangle { - width: intervalSlider.visualPosition * parent.width + width: fpsSlider.visualPosition * parent.width height: parent.height color: Theme.accentPrimary radius: 2 @@ -366,12 +763,12 @@ ScrollView { } handle: Rectangle { - x: intervalSlider.leftPadding + intervalSlider.visualPosition * (intervalSlider.availableWidth - width) - y: intervalSlider.topPadding + intervalSlider.availableHeight / 2 - height / 2 + x: fpsSlider.leftPadding + fpsSlider.visualPosition * (fpsSlider.availableWidth - width) + y: fpsSlider.topPadding + fpsSlider.availableHeight / 2 - height / 2 implicitWidth: 20 implicitHeight: 20 radius: 10 - color: intervalSlider.pressed ? Theme.surfaceVariant : Theme.surface + color: fpsSlider.pressed ? Theme.surfaceVariant : Theme.surface border.color: Theme.accentPrimary border.width: 2 } @@ -380,484 +777,83 @@ ScrollView { } - } - - Rectangle { - Layout.fillWidth: true - Layout.topMargin: 26 - Layout.bottomMargin: 18 - height: 1 - color: Theme.outline - opacity: 0.3 - } - - ColumnLayout { - spacing: 4 - Layout.fillWidth: true - - Text { - text: "SWWW" - font.pixelSize: 18 - font.bold: true - color: Theme.textPrimary - Layout.bottomMargin: 8 - } - - // Use SWWW + // Transition Duration ColumnLayout { spacing: 8 Layout.fillWidth: true Layout.topMargin: 8 + Text { + text: "Transition Duration" + font.pixelSize: 13 + font.bold: true + color: Theme.textPrimary + } + + Text { + text: "Duration of transition animations in seconds" + font.pixelSize: 12 + color: Theme.textSecondary + wrapMode: Text.WordWrap + Layout.fillWidth: true + } + RowLayout { - spacing: 8 Layout.fillWidth: true - ColumnLayout { - spacing: 4 - Layout.fillWidth: true - - Text { - text: "Use SWWW" - font.pixelSize: 13 - font.bold: true - color: Theme.textPrimary - } - - Text { - text: "Use SWWW daemon for advanced wallpaper management" - font.pixelSize: 12 - color: Theme.textSecondary - wrapMode: Text.WordWrap - Layout.fillWidth: true - } - + Text { + text: Settings.settings.transitionDuration.toFixed(3) + " seconds" + font.pixelSize: 13 + color: Theme.textPrimary } - Rectangle { - id: swwwSwitch + Item { + Layout.fillWidth: true + } - width: 52 - height: 32 - radius: 16 - color: Settings.settings.useSWWW ? Theme.accentPrimary : Theme.surfaceVariant - border.color: Settings.settings.useSWWW ? Theme.accentPrimary : Theme.outline - border.width: 2 + } + + Slider { + id: durationSlider + + Layout.fillWidth: true + from: 0.25 + to: 10 + stepSize: 0.05 + value: Settings.settings.transitionDuration + snapMode: Slider.SnapAlways + onMoved: { + Settings.settings.transitionDuration = value; + } + + background: Rectangle { + x: durationSlider.leftPadding + y: durationSlider.topPadding + durationSlider.availableHeight / 2 - height / 2 + implicitWidth: 200 + implicitHeight: 4 + width: durationSlider.availableWidth + height: implicitHeight + radius: 2 + color: Theme.surfaceVariant Rectangle { - id: swwwThumb - - width: 28 - height: 28 - radius: 14 - color: Theme.surface - border.color: Theme.outline - border.width: 1 - y: 2 - x: Settings.settings.useSWWW ? swwwSwitch.width - width - 2 : 2 - - Behavior on x { - NumberAnimation { - duration: 200 - easing.type: Easing.OutCubic - } - - } - - } - - MouseArea { - anchors.fill: parent - cursorShape: Qt.PointingHandCursor - onClicked: { - Settings.settings.useSWWW = !Settings.settings.useSWWW; - } - } - - } - - } - - } - - // SWWW Settings (only visible when useSWWW is enabled) - ColumnLayout { - spacing: 8 - Layout.fillWidth: true - Layout.topMargin: 8 - visible: Settings.settings.useSWWW - - // Resize Mode - ColumnLayout { - spacing: 8 - Layout.fillWidth: true - - Text { - text: "Resize Mode" - font.pixelSize: 13 - font.bold: true - color: Theme.textPrimary - } - - Text { - text: "How SWWW should resize wallpapers to fit the screen" - font.pixelSize: 12 - color: Theme.textSecondary - wrapMode: Text.WordWrap - Layout.fillWidth: true - } - - Rectangle { - Layout.fillWidth: true - Layout.preferredHeight: 40 - radius: 16 - color: Theme.surfaceVariant - border.color: resizeComboBox.activeFocus ? Theme.accentPrimary : Theme.outline - border.width: 1 - - ComboBox { - id: resizeComboBox - - anchors.fill: parent - anchors.leftMargin: 12 - anchors.rightMargin: 12 - anchors.topMargin: 6 - anchors.bottomMargin: 6 - model: ["no", "crop", "fit", "stretch"] - currentIndex: model.indexOf(Settings.settings.wallpaperResize) - onActivated: { - Settings.settings.wallpaperResize = model[index]; - } - - background: Rectangle { - color: "transparent" - } - - contentItem: Text { - text: resizeComboBox.displayText - font: resizeComboBox.font - color: Theme.textPrimary - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignLeft - } - - popup: Popup { - y: resizeComboBox.height - width: resizeComboBox.width - implicitHeight: contentItem.implicitHeight - padding: 1 - - contentItem: ListView { - clip: true - implicitHeight: contentHeight - model: resizeComboBox.popup.visible ? resizeComboBox.delegateModel : null - currentIndex: resizeComboBox.highlightedIndex - - ScrollIndicator.vertical: ScrollIndicator { - } - - } - - background: Rectangle { - color: Theme.surface - border.color: Theme.outline - border.width: 1 - radius: 8 - } - - } - - delegate: ItemDelegate { - width: resizeComboBox.width - highlighted: resizeComboBox.highlightedIndex === index - - contentItem: Text { - text: modelData - color: Theme.textPrimary - font: resizeComboBox.font - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignLeft - } - - background: Rectangle { - color: parent.highlighted ? Theme.accentPrimary : "transparent" - } - - } - - } - - } - - } - - // Transition Type - ColumnLayout { - spacing: 8 - Layout.fillWidth: true - Layout.topMargin: 8 - - Text { - text: "Transition Type" - font.pixelSize: 13 - font.bold: true - color: Theme.textPrimary - } - - Text { - text: "Animation type when switching between wallpapers" - font.pixelSize: 12 - color: Theme.textSecondary - wrapMode: Text.WordWrap - Layout.fillWidth: true - } - - Rectangle { - Layout.fillWidth: true - Layout.preferredHeight: 40 - radius: 16 - color: Theme.surfaceVariant - border.color: transitionTypeComboBox.activeFocus ? Theme.accentPrimary : Theme.outline - border.width: 1 - - ComboBox { - id: transitionTypeComboBox - - anchors.fill: parent - anchors.leftMargin: 12 - anchors.rightMargin: 12 - anchors.topMargin: 6 - anchors.bottomMargin: 6 - model: ["none", "simple", "fade", "left", "right", "top", "bottom", "wipe", "wave", "grow", "center", "any", "outer", "random"] - currentIndex: model.indexOf(Settings.settings.transitionType) - onActivated: { - Settings.settings.transitionType = model[index]; - } - - background: Rectangle { - color: "transparent" - } - - contentItem: Text { - text: transitionTypeComboBox.displayText - font: transitionTypeComboBox.font - color: Theme.textPrimary - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignLeft - } - - popup: Popup { - y: transitionTypeComboBox.height - width: transitionTypeComboBox.width - implicitHeight: contentItem.implicitHeight - padding: 1 - - contentItem: ListView { - clip: true - implicitHeight: contentHeight - model: transitionTypeComboBox.popup.visible ? transitionTypeComboBox.delegateModel : null - currentIndex: transitionTypeComboBox.highlightedIndex - - ScrollIndicator.vertical: ScrollIndicator { - } - - } - - background: Rectangle { - color: Theme.surface - border.color: Theme.outline - border.width: 1 - radius: 8 - } - - } - - delegate: ItemDelegate { - width: transitionTypeComboBox.width - highlighted: transitionTypeComboBox.highlightedIndex === index - - contentItem: Text { - text: modelData - color: Theme.textPrimary - font: transitionTypeComboBox.font - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignLeft - } - - background: Rectangle { - color: parent.highlighted ? Theme.accentPrimary : "transparent" - } - - } - - } - - } - - } - - // Transition FPS - ColumnLayout { - spacing: 8 - Layout.fillWidth: true - Layout.topMargin: 8 - - Text { - text: "Transition FPS" - font.pixelSize: 13 - font.bold: true - color: Theme.textPrimary - } - - Text { - text: "Frames per second for transition animations" - font.pixelSize: 12 - color: Theme.textSecondary - wrapMode: Text.WordWrap - Layout.fillWidth: true - } - - RowLayout { - Layout.fillWidth: true - - Text { - text: Settings.settings.transitionFps + " FPS" - font.pixelSize: 13 - color: Theme.textPrimary - } - - Item { - Layout.fillWidth: true - } - - } - - Slider { - id: fpsSlider - - Layout.fillWidth: true - from: 30 - to: 500 - stepSize: 5 - value: Settings.settings.transitionFps - snapMode: Slider.SnapAlways - onMoved: { - Settings.settings.transitionFps = Math.round(value); - } - - background: Rectangle { - x: fpsSlider.leftPadding - y: fpsSlider.topPadding + fpsSlider.availableHeight / 2 - height / 2 - implicitWidth: 200 - implicitHeight: 4 - width: fpsSlider.availableWidth - height: implicitHeight + width: durationSlider.visualPosition * parent.width + height: parent.height + color: Theme.accentPrimary radius: 2 - color: Theme.surfaceVariant - - Rectangle { - width: fpsSlider.visualPosition * parent.width - height: parent.height - color: Theme.accentPrimary - radius: 2 - } - - } - - handle: Rectangle { - x: fpsSlider.leftPadding + fpsSlider.visualPosition * (fpsSlider.availableWidth - width) - y: fpsSlider.topPadding + fpsSlider.availableHeight / 2 - height / 2 - implicitWidth: 20 - implicitHeight: 20 - radius: 10 - color: fpsSlider.pressed ? Theme.surfaceVariant : Theme.surface - border.color: Theme.accentPrimary - border.width: 2 } } - } - - // Transition Duration - ColumnLayout { - spacing: 8 - Layout.fillWidth: true - Layout.topMargin: 8 - - Text { - text: "Transition Duration" - font.pixelSize: 13 - font.bold: true - color: Theme.textPrimary - } - - Text { - text: "Duration of transition animations in seconds" - font.pixelSize: 12 - color: Theme.textSecondary - wrapMode: Text.WordWrap - Layout.fillWidth: true - } - - RowLayout { - Layout.fillWidth: true - - Text { - text: Settings.settings.transitionDuration.toFixed(3) + " seconds" - font.pixelSize: 13 - color: Theme.textPrimary - } - - Item { - Layout.fillWidth: true - } - - } - - Slider { - id: durationSlider - - Layout.fillWidth: true - from: 0.25 - to: 10 - stepSize: 0.05 - value: Settings.settings.transitionDuration - snapMode: Slider.SnapAlways - onMoved: { - Settings.settings.transitionDuration = value; - } - - background: Rectangle { - x: durationSlider.leftPadding - y: durationSlider.topPadding + durationSlider.availableHeight / 2 - height / 2 - implicitWidth: 200 - implicitHeight: 4 - width: durationSlider.availableWidth - height: implicitHeight - radius: 2 - color: Theme.surfaceVariant - - Rectangle { - width: durationSlider.visualPosition * parent.width - height: parent.height - color: Theme.accentPrimary - radius: 2 - } - - } - - handle: Rectangle { - x: durationSlider.leftPadding + durationSlider.visualPosition * (durationSlider.availableWidth - width) - y: durationSlider.topPadding + durationSlider.availableHeight / 2 - height / 2 - implicitWidth: 20 - implicitHeight: 20 - radius: 10 - color: durationSlider.pressed ? Theme.surfaceVariant : Theme.surface - border.color: Theme.accentPrimary - border.width: 2 - } - + handle: Rectangle { + x: durationSlider.leftPadding + durationSlider.visualPosition * (durationSlider.availableWidth - width) + y: durationSlider.topPadding + durationSlider.availableHeight / 2 - height / 2 + implicitWidth: 20 + implicitHeight: 20 + radius: 10 + color: durationSlider.pressed ? Theme.surfaceVariant : Theme.surface + border.color: Theme.accentPrimary + border.width: 2 } } @@ -872,9 +868,4 @@ ScrollView { } - Item { - Layout.fillWidth: true - Layout.fillHeight: true - } - }