settings window pages replace anims
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
+183
-32
@@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user