mirror of
https://github.com/AvengeMedia/DankMaterialShell.git
synced 2025-12-05 21:15:38 -05:00
settings: make responsive, view-stack style
This commit is contained in:
bbedward
@@ -14,6 +14,9 @@ FloatingWindow {
|
||||
property bool shouldHaveFocus: visible
|
||||
property bool allowFocusOverride: false
|
||||
property alias shouldBeVisible: settingsModal.visible
|
||||
property bool isCompactMode: width < 700
|
||||
property bool menuVisible: !isCompactMode
|
||||
property bool enableAnimations: true
|
||||
|
||||
signal closingModal
|
||||
|
||||
@@ -29,6 +32,11 @@ FloatingWindow {
|
||||
visible = !visible;
|
||||
}
|
||||
|
||||
function toggleMenu() {
|
||||
enableAnimations = true;
|
||||
menuVisible = !menuVisible;
|
||||
}
|
||||
|
||||
objectName: "settingsModal"
|
||||
title: "Settings"
|
||||
implicitWidth: 800
|
||||
@@ -36,6 +44,16 @@ FloatingWindow {
|
||||
color: Theme.withAlpha(Theme.surfaceContainer, Theme.popupTransparency)
|
||||
visible: false
|
||||
|
||||
onIsCompactModeChanged: {
|
||||
enableAnimations = false;
|
||||
if (!isCompactMode) {
|
||||
menuVisible = true;
|
||||
}
|
||||
Qt.callLater(() => {
|
||||
enableAnimations = true;
|
||||
});
|
||||
}
|
||||
|
||||
onVisibleChanged: {
|
||||
if (!visible) {
|
||||
closingModal();
|
||||
@@ -123,21 +141,37 @@ FloatingWindow {
|
||||
|
||||
Column {
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: Theme.spacingL
|
||||
anchors.rightMargin: Theme.spacingL
|
||||
anchors.topMargin: Theme.spacingM
|
||||
anchors.bottomMargin: Theme.spacingL
|
||||
spacing: 0
|
||||
|
||||
Item {
|
||||
width: parent.width
|
||||
height: 35
|
||||
height: 48
|
||||
z: 10
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
color: Theme.surfaceContainer
|
||||
opacity: 0.5
|
||||
}
|
||||
|
||||
Row {
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Theme.spacingL
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
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 {
|
||||
name: "settings"
|
||||
size: Theme.iconSize
|
||||
@@ -156,7 +190,9 @@ FloatingWindow {
|
||||
|
||||
DankActionButton {
|
||||
anchors.right: parent.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.rightMargin: Theme.spacingM
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: Theme.spacingM
|
||||
circular: false
|
||||
iconName: "close"
|
||||
iconSize: Theme.iconSize - 4
|
||||
@@ -167,34 +203,51 @@ FloatingWindow {
|
||||
}
|
||||
}
|
||||
|
||||
Row {
|
||||
Item {
|
||||
width: parent.width
|
||||
height: parent.height - 35
|
||||
spacing: 0
|
||||
height: parent.height - 48
|
||||
clip: true
|
||||
|
||||
SettingsSidebar {
|
||||
id: sidebar
|
||||
|
||||
x: 0
|
||||
width: settingsModal.isCompactMode ? parent.width : 270
|
||||
visible: settingsModal.isCompactMode ? settingsModal.menuVisible : true
|
||||
parentModal: settingsModal
|
||||
currentIndex: settingsModal.currentTabIndex
|
||||
onCurrentIndexChanged: {
|
||||
settingsModal.currentTabIndex = currentIndex;
|
||||
if (settingsModal.isCompactMode) {
|
||||
settingsModal.enableAnimations = true;
|
||||
settingsModal.menuVisible = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
clip: true
|
||||
|
||||
SettingsContent {
|
||||
id: content
|
||||
|
||||
width: Math.min(550, parent.width)
|
||||
width: Math.min(550, parent.width - Theme.spacingL * 2)
|
||||
height: parent.height
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
parentModal: settingsModal
|
||||
currentIndex: settingsModal.currentTabIndex
|
||||
}
|
||||
|
||||
Behavior on x {
|
||||
enabled: settingsModal.enableAnimations
|
||||
NumberAnimation {
|
||||
duration: Theme.mediumDuration
|
||||
easing.bezierCurve: Theme.expressiveCurves.emphasizedDecel
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,47 +10,59 @@ Rectangle {
|
||||
|
||||
property int currentIndex: 0
|
||||
property var parentModal: null
|
||||
readonly property var sidebarItems: [{
|
||||
"text": I18n.tr("Personalization"),
|
||||
"icon": "person"
|
||||
}, {
|
||||
"text": I18n.tr("Time & Weather"),
|
||||
"icon": "schedule"
|
||||
}, {
|
||||
"text": I18n.tr("Dank Bar"),
|
||||
"icon": "toolbar"
|
||||
}, {
|
||||
"text": I18n.tr("Widgets"),
|
||||
"icon": "widgets"
|
||||
}, {
|
||||
"text": I18n.tr("Dock"),
|
||||
"icon": "dock_to_bottom"
|
||||
}, {
|
||||
"text": I18n.tr("Displays"),
|
||||
"icon": "monitor"
|
||||
}, {
|
||||
"text": I18n.tr("Launcher"),
|
||||
"icon": "apps"
|
||||
}, {
|
||||
"text": I18n.tr("Theme & Colors"),
|
||||
"icon": "palette"
|
||||
}, {
|
||||
"text": I18n.tr("Power & Security"),
|
||||
"icon": "power"
|
||||
}, {
|
||||
"text": I18n.tr("Plugins"),
|
||||
"icon": "extension"
|
||||
}, {
|
||||
"text": I18n.tr("About"),
|
||||
"icon": "info"
|
||||
}]
|
||||
readonly property var sidebarItems: [
|
||||
{
|
||||
"text": I18n.tr("Personalization"),
|
||||
"icon": "person"
|
||||
},
|
||||
{
|
||||
"text": I18n.tr("Time & Weather"),
|
||||
"icon": "schedule"
|
||||
},
|
||||
{
|
||||
"text": I18n.tr("Dank Bar"),
|
||||
"icon": "toolbar"
|
||||
},
|
||||
{
|
||||
"text": I18n.tr("Widgets"),
|
||||
"icon": "widgets"
|
||||
},
|
||||
{
|
||||
"text": I18n.tr("Dock"),
|
||||
"icon": "dock_to_bottom"
|
||||
},
|
||||
{
|
||||
"text": I18n.tr("Displays"),
|
||||
"icon": "monitor"
|
||||
},
|
||||
{
|
||||
"text": I18n.tr("Launcher"),
|
||||
"icon": "apps"
|
||||
},
|
||||
{
|
||||
"text": I18n.tr("Theme & Colors"),
|
||||
"icon": "palette"
|
||||
},
|
||||
{
|
||||
"text": I18n.tr("Power & Security"),
|
||||
"icon": "power"
|
||||
},
|
||||
{
|
||||
"text": I18n.tr("Plugins"),
|
||||
"icon": "extension"
|
||||
},
|
||||
{
|
||||
"text": I18n.tr("About"),
|
||||
"icon": "info"
|
||||
}
|
||||
]
|
||||
|
||||
function navigateNext() {
|
||||
currentIndex = (currentIndex + 1) % sidebarItems.length
|
||||
currentIndex = (currentIndex + 1) % sidebarItems.length;
|
||||
}
|
||||
|
||||
function navigatePrevious() {
|
||||
currentIndex = (currentIndex - 1 + sidebarItems.length) % sidebarItems.length
|
||||
currentIndex = (currentIndex - 1 + sidebarItems.length) % sidebarItems.length;
|
||||
}
|
||||
|
||||
width: 270
|
||||
@@ -61,31 +73,32 @@ Rectangle {
|
||||
DankFlickable {
|
||||
anchors.fill: parent
|
||||
clip: true
|
||||
contentHeight: sidebarColumn.implicitHeight
|
||||
contentHeight: sidebarColumn.height
|
||||
|
||||
Column {
|
||||
id: sidebarColumn
|
||||
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: Theme.spacingS
|
||||
anchors.rightMargin: Theme.spacingS
|
||||
anchors.bottomMargin: Theme.spacingS
|
||||
anchors.topMargin: Theme.spacingM + 2
|
||||
width: parent.width
|
||||
leftPadding: Theme.spacingS
|
||||
rightPadding: Theme.spacingS
|
||||
bottomPadding: Theme.spacingL
|
||||
topPadding: Theme.spacingM + 2
|
||||
spacing: Theme.spacingXS
|
||||
|
||||
ProfileSection {
|
||||
width: parent.width - parent.leftPadding - parent.rightPadding
|
||||
parentModal: sidebarContainer.parentModal
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
width: parent.width - Theme.spacingS * 2
|
||||
width: parent.width - parent.leftPadding - parent.rightPadding
|
||||
height: 1
|
||||
color: Theme.outline
|
||||
opacity: 0.2
|
||||
}
|
||||
|
||||
Item {
|
||||
width: parent.width
|
||||
width: parent.width - parent.leftPadding - parent.rightPadding
|
||||
height: Theme.spacingL
|
||||
}
|
||||
|
||||
@@ -100,7 +113,7 @@ Rectangle {
|
||||
|
||||
property bool isActive: sidebarContainer.currentIndex === index
|
||||
|
||||
width: parent.width
|
||||
width: parent.width - parent.leftPadding - parent.rightPadding
|
||||
height: 44
|
||||
radius: Theme.cornerRadius
|
||||
color: isActive ? Theme.primary : tabMouseArea.containsMouse ? Theme.surfaceHover : "transparent"
|
||||
@@ -125,7 +138,6 @@ Rectangle {
|
||||
font.weight: parent.parent.isActive ? Font.Medium : Font.Normal
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
@@ -144,15 +156,9 @@ Rectangle {
|
||||
duration: Theme.shortDuration
|
||||
easing.type: Theme.standardEasing
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user