diff --git a/Modules/Settings/Categories.qml b/Modules/Settings/Categories.qml index 059dfd8..595456f 100644 --- a/Modules/Settings/Categories.qml +++ b/Modules/Settings/Categories.qml @@ -19,23 +19,26 @@ Item { // Function to select category by key function selectCategory(categoryKey: string) { for (let i = 0; i < appearanceCats.count; i++) { - if (appearanceCats.get(i).key === categoryKey) { - clayout.currentIndex = i; - root.content.currentCategory = categoryKey; + const item = appearanceCats.get(i); + if (item.key === categoryKey) { + appearanceView.currentIndex = i; + root.content.setCategory(item.key, item._index); return; } } for (let i = 0; i < systemCats.count; i++) { - if (systemCats.get(i).key === categoryKey) { - clayout.currentIndex = i; - root.content.currentCategory = categoryKey; + const item = systemCats.get(i); + if (item.key === categoryKey) { + sysView.currentIndex = i; + root.content.setCategory(item.key, item._index); return; } } for (let i = 0; i < panelCats.count; i++) { - if (panelCats.get(i).key === categoryKey) { - clayout.currentIndex = i; - root.content.currentCategory = categoryKey; + const item = panelCats.get(i); + if (item.key === categoryKey) { + panelsView.currentIndex = i; + root.content.setCategory(item.key, item._index); return; } } @@ -44,56 +47,39 @@ Item { implicitHeight: searchBar.implicitHeight + Appearance.spacing.smaller + clayout.contentHeight + clayout.anchors.margins * 2 implicitWidth: clayout.contentWidth + clayout.anchors.margins * 2 - ListModel { - id: appearanceCats - - ListElement { - icon: "wallpaper" - key: "wallpaper" - name: "Wallpaper" - } - - ListElement { - icon: "screenshot_region" - key: "screenshot" - name: "Screenshot" - } - - ListElement { - icon: "colors" - key: "appearance" - name: "Appearance" - } - } - ListModel { id: systemCats ListElement { + _index: 0 icon: "settings" key: "general" name: "General" } ListElement { + _index: 1 icon: "build_circle" key: "services" name: "Services" } ListElement { + _index: 2 icon: "notifications" key: "notifications" name: "Notifications" } ListElement { + _index: 3 icon: "handyman" key: "utilities" name: "Utilities" } ListElement { + _index: 4 icon: "cached" key: "updates" name: "Updates" @@ -104,42 +90,73 @@ Item { id: panelCats ListElement { + _index: 5 icon: "settop_component" key: "bar" name: "Bar" } ListElement { + _index: 6 icon: "lock" key: "lockscreen" name: "Lockscreen" } ListElement { + _index: 7 icon: "view_sidebar" key: "sidebar" name: "Sidebar" } ListElement { + _index: 8 icon: "dashboard" key: "dashboard" name: "Dashboard" } ListElement { + _index: 9 icon: "display_settings" key: "osd" name: "On screen display" } ListElement { + _index: 10 icon: "rocket_launch" key: "launcher" name: "Launcher" } } + ListModel { + id: appearanceCats + + ListElement { + _index: 11 + icon: "wallpaper" + key: "wallpaper" + name: "Wallpaper" + } + + ListElement { + _index: 12 + icon: "screenshot_region" + key: "screenshot" + name: "Screenshot" + } + + ListElement { + _index: 13 + icon: "colors" + key: "appearance" + name: "Appearance" + } + } + CustomClippingRect { anchors.fill: parent color: DynamicColors.tPalette.m3surfaceContainer @@ -259,19 +276,23 @@ Item { component Category: CustomRect { id: categoryItem + required property int _index + readonly property bool first: index === 0 required property string icon required property int index required property string key + readonly property bool last: index === view.model.count - 1 required property string name + readonly property bool selected: key === root.content.currentCategory required property ListView view - bottomLeftRadius: key === root.content.currentCategory || index === view.model.count - 1 ? (layer.pressed ? (Appearance.rounding.extraSmall / 2) : Appearance.rounding.normal - clayout.anchors.margins) : (layer.pressed ? (Appearance.rounding.extraSmall / 2) : Appearance.rounding.extraSmall) - bottomRightRadius: key === root.content.currentCategory || index === view.model.count - 1 ? (layer.pressed ? (Appearance.rounding.extraSmall / 2) : Appearance.rounding.normal - clayout.anchors.margins) : (layer.pressed ? (Appearance.rounding.extraSmall / 2) : Appearance.rounding.extraSmall) - color: key === root.content.currentCategory ? DynamicColors.palette.m3primary : DynamicColors.tPalette.m3surfaceContainer - implicitHeight: 42 + bottomLeftRadius: layer.pressed ? Appearance.rounding.smallest : selected || last ? Appearance.rounding.normal - clayout.anchors.margins : Appearance.rounding.extraSmall + bottomRightRadius: layer.pressed ? Appearance.rounding.smallest : selected || last ? Appearance.rounding.normal - clayout.anchors.margins : Appearance.rounding.extraSmall + color: selected ? DynamicColors.palette.m3primary : DynamicColors.tPalette.m3surfaceContainer + implicitHeight: 50 implicitWidth: 256 - topLeftRadius: key === root.content.currentCategory || index === 0 ? (layer.pressed ? (Appearance.rounding.extraSmall / 2) : Appearance.rounding.normal - clayout.anchors.margins) : (layer.pressed ? (Appearance.rounding.extraSmall / 2) : Appearance.rounding.extraSmall) - topRightRadius: key === root.content.currentCategory || index === 0 ? (layer.pressed ? (Appearance.rounding.extraSmall / 2) : Appearance.rounding.normal - clayout.anchors.margins) : (layer.pressed ? (Appearance.rounding.extraSmall / 2) : Appearance.rounding.extraSmall) + topLeftRadius: layer.pressed ? Appearance.rounding.smallest : selected || first ? Appearance.rounding.normal - clayout.anchors.margins : Appearance.rounding.extraSmall + topRightRadius: layer.pressed ? Appearance.rounding.smallest : selected || first ? Appearance.rounding.normal - clayout.anchors.margins : Appearance.rounding.extraSmall Behavior on bottomLeftRadius { Anim { @@ -307,6 +328,7 @@ Item { Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter Layout.fillHeight: true + Layout.leftMargin: Appearance.padding.small Layout.preferredWidth: icon.contentWidth color: categoryItem.key === root.content.currentCategory ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface fill: categoryItem.key === root.content.currentCategory ? 1 : 0 @@ -339,7 +361,7 @@ Item { color: categoryItem.key === root.content.currentCategory ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface onClicked: { - root.content.currentCategory = categoryItem.key; + root.content.setCategory(categoryItem.key, categoryItem._index); categoryItem.view.currentIndex = categoryItem.index; } } diff --git a/Modules/Settings/Content.qml b/Modules/Settings/Content.qml index b9157fb..90f9add 100644 --- a/Modules/Settings/Content.qml +++ b/Modules/Settings/Content.qml @@ -14,6 +14,8 @@ Item { id: root property string currentCategory: "general" + property int currentIndex: 0 + property int lastIndex: 0 readonly property real nonAnimHeight: Math.floor(screen.height / 1.5) + viewWrapper.anchors.margins * 2 readonly property real nonAnimWidth: view.implicitWidth + Math.floor(screen.width / 2) + viewWrapper.anchors.margins * 2 property string pendingSection: "" @@ -27,8 +29,9 @@ Item { scrollTimer.restart(); } - function selectCategory(categoryKey: string) { - layout.selectCategory(categoryKey); + function setCategory(category: string, index: int): void { + currentIndex = index; + currentCategory = category; } implicitHeight: nonAnimHeight @@ -50,35 +53,88 @@ Item { Connections { function onCurrentCategoryChanged() { - stack.pop(); - if (currentCategory === "general") - stack.push(general); - else if (currentCategory === "wallpaper") - stack.push(background); - else if (currentCategory === "bar") - stack.push(bar); - else if (currentCategory === "appearance") - stack.push(appearance); - else if (currentCategory === "lockscreen") - stack.push(lockscreen); - else if (currentCategory === "services") - stack.push(services); - else if (currentCategory === "notifications") - stack.push(notifications); - else if (currentCategory === "sidebar") - stack.push(sidebar); - else if (currentCategory === "utilities") - stack.push(utilities); - else if (currentCategory === "dashboard") - stack.push(dashboard); - else if (currentCategory === "osd") - stack.push(osd); - else if (currentCategory === "launcher") - stack.push(launcher); - else if (currentCategory === "screenshot") - stack.push(screenshot); - else if (currentCategory === "updates") - stack.push(updates); + if (root.currentCategory === "general") { + stack.replaceCurrentItem(general, [], StackView.PopTransition); + root.lastIndex = root.currentIndex; + } else if (root.currentCategory === "wallpaper") { + if (root.currentIndex < root.lastIndex) + stack.replaceCurrentItem(background, [], StackView.PopTransition); + else + stack.replaceCurrentItem(background, [], StackView.PushTransition); + root.lastIndex = root.currentIndex; + } else if (root.currentCategory === "bar") { + if (root.currentIndex < root.lastIndex) + stack.replaceCurrentItem(bar, [], StackView.PopTransition); + else + stack.replaceCurrentItem(bar, [], StackView.PushTransition); + root.lastIndex = root.currentIndex; + } else if (root.currentCategory === "appearance") { + if (root.currentIndex < root.lastIndex) + stack.replaceCurrentItem(appearance, [], StackView.PopTransition); + else + stack.replaceCurrentItem(appearance, [], StackView.PushTransition); + root.lastIndex = root.currentIndex; + } else if (root.currentCategory === "lockscreen") { + if (root.currentIndex < root.lastIndex) + stack.replaceCurrentItem(lockscreen, [], StackView.PopTransition); + else + stack.replaceCurrentItem(lockscreen, [], StackView.PushTransition); + root.lastIndex = root.currentIndex; + } else if (root.currentCategory === "services") { + if (root.currentIndex < root.lastIndex) + stack.replaceCurrentItem(services, [], StackView.PopTransition); + else + stack.replaceCurrentItem(services, [], StackView.PushTransition); + root.lastIndex = root.currentIndex; + } else if (root.currentCategory === "notifications") { + if (root.currentIndex < root.lastIndex) + stack.replaceCurrentItem(notifications, [], StackView.PopTransition); + else + stack.replaceCurrentItem(notifications, [], StackView.PushTransition); + root.lastIndex = root.currentIndex; + } else if (root.currentCategory === "sidebar") { + if (root.currentIndex < root.lastIndex) + stack.replaceCurrentItem(sidebar, [], StackView.PopTransition); + else + stack.replaceCurrentItem(sidebar, [], StackView.PushTransition); + root.lastIndex = root.currentIndex; + } else if (root.currentCategory === "utilities") { + if (root.currentIndex < root.lastIndex) + stack.replaceCurrentItem(utilities, [], StackView.PopTransition); + else + stack.replaceCurrentItem(utilities, [], StackView.PushTransition); + root.lastIndex = root.currentIndex; + } else if (root.currentCategory === "dashboard") { + if (root.currentIndex < root.lastIndex) + stack.replaceCurrentItem(dashboard, [], StackView.PopTransition); + else + stack.replaceCurrentItem(dashboard, [], StackView.PushTransition); + root.lastIndex = root.currentIndex; + } else if (root.currentCategory === "osd") { + if (root.currentIndex < root.lastIndex) + stack.replaceCurrentItem(osd, [], StackView.PopTransition); + else + stack.replaceCurrentItem(osd, [], StackView.PushTransition); + root.lastIndex = root.currentIndex; + } else if (root.currentCategory === "launcher") { + if (root.currentIndex < root.lastIndex) + stack.replaceCurrentItem(launcher, [], StackView.PopTransition); + else + stack.replaceCurrentItem(launcher, [], StackView.PushTransition); + root.lastIndex = root.currentIndex; + } else if (root.currentCategory === "screenshot") { + if (root.currentIndex < root.lastIndex) + stack.replaceCurrentItem(screenshot, [], StackView.PopTransition); + else + stack.replaceCurrentItem(screenshot, [], StackView.PushTransition); + root.lastIndex = root.currentIndex; + } else if (root.currentCategory === "updates") { + if (root.currentIndex < root.lastIndex) + stack.replaceCurrentItem(updates, [], StackView.PopTransition); + else + stack.replaceCurrentItem(updates, [], StackView.PushTransition); + root.lastIndex = root.currentIndex; + } } target: root @@ -99,7 +155,7 @@ Item { anchors.top: parent.top onSettingSelected: (category, section, settingName) => { - root.selectCategory(category); + layout.selectCategory(category); root.scrollToSetting(section, settingName); } } @@ -143,6 +199,101 @@ Item { anchors.fill: parent anchors.margins: Appearance.padding.extraSmall initialItem: general + + popEnter: Transition { + SequentialAnimation { + Anim { + duration: 0 + from: 0 + property: "opacity" + to: 0 + } + + PauseAnimation { + duration: Appearance.anim.durations.expressiveEffects + } + + ParallelAnimation { + Anim { + duration: Appearance.anim.durations.expressiveFastSpatial + from: 0 + property: "opacity" + to: 1 + } + + Anim { + duration: Appearance.anim.durations.expressiveFastSpatial + from: -50 + property: "y" + to: 0 + } + } + } + } + popExit: Transition { + ParallelAnimation { + Anim { + duration: Appearance.anim.durations.expressiveFastSpatial + from: 1 + property: "opacity" + to: 0 + } + + Anim { + duration: Appearance.anim.durations.expressiveFastSpatial + from: 0 + property: "y" + to: 50 + } + } + } + pushEnter: Transition { + SequentialAnimation { + Anim { + duration: 0 + from: 0 + property: "opacity" + to: 0 + } + + PauseAnimation { + duration: Appearance.anim.durations.expressiveEffects + } + + ParallelAnimation { + Anim { + duration: Appearance.anim.durations.expressiveFastSpatial + from: 0 + property: "opacity" + to: 1 + } + + Anim { + duration: Appearance.anim.durations.expressiveFastSpatial + from: 50 + property: "y" + to: 0 + } + } + } + } + pushExit: Transition { + ParallelAnimation { + Anim { + duration: Appearance.anim.durations.expressiveFastSpatial + from: 1 + property: "opacity" + to: 0 + } + + Anim { + duration: Appearance.anim.durations.expressiveFastSpatial + from: 0 + property: "y" + to: -50 + } + } + } } } }