Salastil/DankMaterialShell
1
0
Fork 0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2026-01-24 21:42:51 -05:00
Code Packages Releases Activity

settings: make responsive, view-stack style

Browse Source
This commit is contained in:
bbedward
2025-11-23 10:01:26 -05:00
parent 61369cde9e
commit fd20986cf8
2 changed files with 122 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
quickshell/Modals/Settings/SettingsModal.qml
View File

@@ -14,6 +14,9 @@ FloatingWindow {
property bool shouldHaveFocus: visible property bool shouldHaveFocus: visible
property bool allowFocusOverride: false property bool allowFocusOverride: false
property alias shouldBeVisible: settingsModal.visible property alias shouldBeVisible: settingsModal.visible
property bool isCompactMode: width < 700
property bool menuVisible: !isCompactMode
property bool enableAnimations: true
signal closingModal signal closingModal
@@ -29,6 +32,11 @@ FloatingWindow {
visible = !visible; visible = !visible;
} }
function toggleMenu() {
enableAnimations = true;
menuVisible = !menuVisible;
}
objectName: "settingsModal" objectName: "settingsModal"
title: "Settings" title: "Settings"
implicitWidth: 800 implicitWidth: 800
@@ -36,6 +44,16 @@ FloatingWindow {
color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency) color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
visible: false visible: false
onIsCompactModeChanged: {
enableAnimations = false;
if (!isCompactMode) {
menuVisible = true;
}
Qt.callLater(() => {
enableAnimations = true;
});
}
onVisibleChanged: { onVisibleChanged: {
if (!visible) { if (!visible) {
closingModal(); closingModal();
@@ -123,21 +141,37 @@ FloatingWindow {
Column { Column {
anchors.fill: parent anchors.fill: parent
anchors.leftMargin: Theme.spacingL
anchors.rightMargin: Theme.spacingL
anchors.topMargin: Theme.spacingM
anchors.bottomMargin: Theme.spacingL
spacing: 0 spacing: 0
Item { Item {
width: parent.width width: parent.width
height: 35 height: 48
z: 10
Rectangle {
anchors.fill: parent
color: Theme.surfaceContainer
opacity: 0.5
}
Row { Row {
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: Theme.spacingL
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
spacing: Theme.spacingM spacing: Theme.spacingM
DankActionButton {
visible: settingsModal.isCompactMode
circular: false
iconName: "menu"
iconSize: Theme.iconSize - 4
iconColor: Theme.surfaceText
anchors.verticalCenter: parent.verticalCenter
onClicked: () => {
settingsModal.toggleMenu();
}
}
DankIcon { DankIcon {
name: "settings" name: "settings"
size: Theme.iconSize size: Theme.iconSize
@@ -156,7 +190,9 @@ FloatingWindow {
DankActionButton { DankActionButton {
anchors.right: parent.right anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter anchors.rightMargin: Theme.spacingM
anchors.top: parent.top
anchors.topMargin: Theme.spacingM
circular: false circular: false
iconName: "close" iconName: "close"
iconSize: Theme.iconSize - 4 iconSize: Theme.iconSize - 4
@@ -167,34 +203,51 @@ FloatingWindow {
} }
} }
Row { Item {
width: parent.width width: parent.width
height: parent.height - 35 height: parent.height - 48
spacing: 0 clip: true
SettingsSidebar { SettingsSidebar {
id: sidebar id: sidebar
x: 0
width: settingsModal.isCompactMode ? parent.width : 270
visible: settingsModal.isCompactMode ? settingsModal.menuVisible : true
parentModal: settingsModal parentModal: settingsModal
currentIndex: settingsModal.currentTabIndex currentIndex: settingsModal.currentTabIndex
onCurrentIndexChanged: { onCurrentIndexChanged: {
settingsModal.currentTabIndex = currentIndex; settingsModal.currentTabIndex = currentIndex;
if (settingsModal.isCompactMode) {
settingsModal.enableAnimations = true;
settingsModal.menuVisible = false;
}
} }
} }
Item { Item {
width: parent.width - sidebar.width x: settingsModal.isCompactMode ? (settingsModal.menuVisible ? parent.width : 0) : sidebar.width
width: settingsModal.isCompactMode ? parent.width : parent.width - sidebar.width
height: parent.height height: parent.height
clip: true
SettingsContent { SettingsContent {
id: content id: content
width: Math.min(550, parent.width) width: Math.min(550, parent.width - Theme.spacingL * 2)
height: parent.height height: parent.height
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
parentModal: settingsModal parentModal: settingsModal
currentIndex: settingsModal.currentTabIndex currentIndex: settingsModal.currentTabIndex
} }
Behavior on x {
enabled: settingsModal.enableAnimations
NumberAnimation {
duration: Theme.mediumDuration
easing.bezierCurve: Theme.expressiveCurves.emphasizedDecel
}
}
} }
} }
} }

110
quickshell/Modals/Settings/SettingsSidebar.qml
View File

@@ -10,47 +10,59 @@ Rectangle {
property int currentIndex: 0 property int currentIndex: 0
property var parentModal: null property var parentModal: null
readonly property var sidebarItems: [{ readonly property var sidebarItems: [
"text": I18n.tr("Personalization"), {
"icon": "person" "text": I18n.tr("Personalization"),
}, { "icon": "person"
"text": I18n.tr("Time & Weather"), },
"icon": "schedule" {
}, { "text": I18n.tr("Time & Weather"),
"text": I18n.tr("Dank Bar"), "icon": "schedule"
"icon": "toolbar" },
}, { {
"text": I18n.tr("Widgets"), "text": I18n.tr("Dank Bar"),
"icon": "widgets" "icon": "toolbar"
}, { },
"text": I18n.tr("Dock"), {
"icon": "dock_to_bottom" "text": I18n.tr("Widgets"),
}, { "icon": "widgets"
"text": I18n.tr("Displays"), },
"icon": "monitor" {
}, { "text": I18n.tr("Dock"),
"text": I18n.tr("Launcher"), "icon": "dock_to_bottom"
"icon": "apps" },
}, { {
"text": I18n.tr("Theme & Colors"), "text": I18n.tr("Displays"),
"icon": "palette" "icon": "monitor"
}, { },
"text": I18n.tr("Power & Security"), {
"icon": "power" "text": I18n.tr("Launcher"),
}, { "icon": "apps"
"text": I18n.tr("Plugins"), },
"icon": "extension" {
}, { "text": I18n.tr("Theme & Colors"),
"text": I18n.tr("About"), "icon": "palette"
"icon": "info" },
}] {
"text": I18n.tr("Power & Security"),
"icon": "power"
},
{
"text": I18n.tr("Plugins"),
"icon": "extension"
},
{
"text": I18n.tr("About"),
"icon": "info"
}
]
function navigateNext() { function navigateNext() {
currentIndex = (currentIndex + 1) % sidebarItems.length currentIndex = (currentIndex + 1) % sidebarItems.length;
} }
function navigatePrevious() { function navigatePrevious() {
currentIndex = (currentIndex - 1 + sidebarItems.length) % sidebarItems.length currentIndex = (currentIndex - 1 + sidebarItems.length) % sidebarItems.length;
} }
width: 270 width: 270
@@ -61,31 +73,32 @@ Rectangle {
DankFlickable { DankFlickable {
anchors.fill: parent anchors.fill: parent
clip: true clip: true
contentHeight: sidebarColumn.implicitHeight contentHeight: sidebarColumn.height
Column { Column {
id: sidebarColumn id: sidebarColumn
anchors.fill: parent width: parent.width
anchors.leftMargin: Theme.spacingS leftPadding: Theme.spacingS
anchors.rightMargin: Theme.spacingS rightPadding: Theme.spacingS
anchors.bottomMargin: Theme.spacingS bottomPadding: Theme.spacingL
anchors.topMargin: Theme.spacingM + 2 topPadding: Theme.spacingM + 2
spacing: Theme.spacingXS spacing: Theme.spacingXS
ProfileSection { ProfileSection {
width: parent.width - parent.leftPadding - parent.rightPadding
parentModal: sidebarContainer.parentModal parentModal: sidebarContainer.parentModal
} }
Rectangle { Rectangle {
width: parent.width - Theme.spacingS * 2 width: parent.width - parent.leftPadding - parent.rightPadding
height: 1 height: 1
color: Theme.outline color: Theme.outline
opacity: 0.2 opacity: 0.2
} }
Item { Item {
width: parent.width width: parent.width - parent.leftPadding - parent.rightPadding
height: Theme.spacingL height: Theme.spacingL
} }
@@ -100,7 +113,7 @@ Rectangle {
property bool isActive: sidebarContainer.currentIndex === index property bool isActive: sidebarContainer.currentIndex === index
width: parent.width width: parent.width - parent.leftPadding - parent.rightPadding
height: 44 height: 44
radius: Theme.cornerRadius radius: Theme.cornerRadius
color: isActive ? Theme.primary : tabMouseArea.containsMouse ? Theme.surfaceHover : "transparent" color: isActive ? Theme.primary : tabMouseArea.containsMouse ? Theme.surfaceHover : "transparent"
@@ -125,7 +138,6 @@ Rectangle {
font.weight: parent.parent.isActive ? Font.Medium : Font.Normal font.weight: parent.parent.isActive ? Font.Medium : Font.Normal
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
} }
} }
MouseArea { MouseArea {
@@ -144,15 +156,9 @@ Rectangle {
duration: Theme.shortDuration duration: Theme.shortDuration
easing.type: Theme.standardEasing easing.type: Theme.standardEasing
} }
} }
} }
} }
} }
} }
} }