settings: raised content pane and surface tier ladder instead of dividers

This commit is contained in:
bbedward committed 2026-10-02 11:53:15 -04:00
1 parent af27f0bac0
commit e4ec3582b4
53 files changed
+155 -163

No files matched your search

@@ -57,7 +57,6 @@ DankFloatingWindow {
anchors.right: parent.right
anchors.top: headerRow.bottom
anchors.bottom: footerRow.top
anchors.topMargin: Theme.spacingS
clip: true
contentHeight: mainColumn.height + Theme.spacingL * 2
contentWidth: width
@@ -103,7 +103,6 @@ ClippingRectangle {
controls: null
horizontalPadding: 0
verticalPadding: 0
showDivider: false
title: I18n.tr("Preview", "noun, clipboard image preview window title")
onCloseRequested: root.closeRequested()
}
+1 -2
View File
@@ -208,7 +208,6 @@ DankFloatingWindow {
anchors.right: parent.right
anchors.top: headerRow.bottom
anchors.bottom: footerRow.top
anchors.topMargin: Theme.spacingS
Loader {
id: pageLoader
@@ -239,7 +238,7 @@ DankFloatingWindow {
Row {
anchors.right: parent.right
anchors.rightMargin: Theme.spacingL
anchors.rightMargin: Theme.windowInset
anchors.verticalCenter: parent.verticalCenter
spacing: Theme.spacingM
+4 -31
View File
@@ -481,7 +481,8 @@ FocusScope {
Item {
anchors.fill: parent
anchors.margins: Theme.spacingL
anchors.margins: Theme.windowInset
anchors.topMargin: 0
// Sidebar
Item {
@@ -590,15 +591,6 @@ FocusScope {
}
}
// Divider between All and specific categories
Rectangle {
width: sidebarCol.width - Theme.spacingS * 2
height: Theme.dividerWidth
anchors.horizontalCenter: parent.horizontalCenter
color: Theme.outlineVariant
opacity: 0.3
}
// Category Tabs
Repeater {
model: content.dataModel.sortedKeys
@@ -656,23 +648,11 @@ FocusScope {
}
}
// Vertical Divider between Sidebar and Main Content
Rectangle {
id: vDivider
anchors.left: sidebar.right
anchors.leftMargin: Theme.spacingM
anchors.top: parent.top
anchors.bottom: parent.bottom
width: Theme.dividerWidth
color: Theme.outlineVariant
opacity: 0.4
}
// Main Content Area
Item {
id: mainArea
anchors.left: vDivider.right
anchors.leftMargin: Theme.spacingM
anchors.left: sidebar.right
anchors.leftMargin: Theme.spacingL
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
@@ -718,13 +698,6 @@ FocusScope {
font.weight: Theme.fontWeightMedium
color: Theme.primary
}
Rectangle {
Layout.fillWidth: true
height: Theme.dividerWidth
color: Theme.outlineVariant
opacity: 0.3
}
}
// Subcategories Repeater
+8 -9
View File
@@ -211,9 +211,8 @@ DankFloatingWindow {
DankNavigationBar {
id: viewNavigation
Layout.fillWidth: true
Layout.topMargin: Theme.spacingS
Layout.leftMargin: Theme.spacingL
Layout.rightMargin: Theme.spacingL
Layout.leftMargin: Theme.windowInset
Layout.rightMargin: Theme.windowInset
nextFocusTarget: currentTab === 0 ? searchField : null
model: [
{
@@ -240,16 +239,16 @@ DankFloatingWindow {
ProcessSummary {
Layout.fillWidth: true
Layout.fillHeight: false
Layout.leftMargin: Theme.spacingL
Layout.rightMargin: Theme.spacingL
Layout.leftMargin: Theme.windowInset
Layout.rightMargin: Theme.windowInset
Layout.topMargin: Theme.spacingS
visible: currentTab === 0
}
RowLayout {
Layout.fillWidth: true
Layout.leftMargin: Theme.spacingL
Layout.rightMargin: Theme.spacingL
Layout.leftMargin: Theme.windowInset
Layout.rightMargin: Theme.windowInset
Layout.topMargin: Theme.spacingS
spacing: Theme.spacingM
visible: currentTab === 0
@@ -327,8 +326,8 @@ DankFloatingWindow {
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: Theme.buttonHeightXS
Layout.leftMargin: Theme.spacingL
Layout.rightMargin: Theme.spacingL
Layout.leftMargin: Theme.windowInset
Layout.rightMargin: Theme.windowInset
Layout.bottomMargin: Theme.spacingM
color: "transparent"
@@ -72,7 +72,7 @@ FocusScope {
currentPageItem.forceActiveFocus(Qt.TabFocusReason);
return;
}
} while (!item.visible || !item.enabled || !_inViewport(item));
} while (!item.visible || !item.enabled || !_inViewport(item))
item.forceActiveFocus(Qt.TabFocusReason);
});
}
@@ -124,7 +124,7 @@ FocusScope {
item = item.nextItemInFocusChain(forward);
if (!item || item === start || !_contains(page, item))
return false;
} while (!item.visible || !item.enabled);
} while (!item.visible || !item.enabled)
item.forceActiveFocus(forward ? Qt.TabFocusReason : Qt.BacktabFocusReason);
_reveal(item);
return true;
@@ -430,13 +430,13 @@ FocusScope {
Column {
anchors.fill: parent
anchors.leftMargin: root.isCompactMode ? Theme.spacingS : SettingsMetrics.scrollGutter
anchors.rightMargin: root.isCompactMode ? Theme.spacingS : SettingsMetrics.scrollGutter
anchors.leftMargin: SettingsMetrics.panePadding
anchors.rightMargin: SettingsMetrics.panePadding
spacing: 0
Item {
id: pageHeader
width: Math.min(root.pageContentMaxWidth, parent.width - Theme.spacingL * 2)
width: Math.min(root.pageContentMaxWidth, parent.width)
anchors.horizontalCenter: parent.horizontalCenter
height: Math.max(SettingsMetrics.pageHeaderHeight, pageHeading.implicitHeight + Theme.spacingM * 2)
+26 -12
View File
@@ -300,19 +300,26 @@ DankFloatingWindow {
onCloseRequested: settingsModal.hide()
}
Rectangle {
Item {
id: readOnlyBanner
property bool showBanner: (SettingsData._isReadOnly && SettingsData._hasUnsavedChanges) || (SessionData._isReadOnly && SessionData._hasUnsavedChanges)
width: parent.width
height: showBanner ? bannerContent.implicitHeight + Theme.spacingM * 2 : 0
color: Theme.floatingWindowNestedSurface
border.width: Theme.layerOutlineWidth
border.color: Theme.outlineMedium
visible: showBanner
clip: true
Rectangle {
anchors.fill: parent
anchors.leftMargin: body.paneInset
anchors.rightMargin: body.paneInset
radius: SettingsMetrics.paneRadius
color: SettingsMetrics.paneColor
border.width: Theme.layerOutlineWidth
border.color: Theme.outlineMedium
}
Behavior on height {
NumberAnimation {
duration: SettingsMetrics.fadeDuration
@@ -326,9 +333,10 @@ DankFloatingWindow {
anchors.left: parent.left
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: Theme.spacingL
anchors.rightMargin: Theme.spacingM
anchors.bottom: parent.bottom
anchors.bottomMargin: Theme.spacingM
anchors.leftMargin: body.paneInset + SettingsMetrics.panePadding
anchors.rightMargin: body.paneInset + SettingsMetrics.panePadding
spacing: Theme.spacingM
DankIcon {
@@ -387,6 +395,9 @@ DankFloatingWindow {
Item {
id: body
readonly property real paneInset: SettingsMetrics.paneMargin
width: parent.width
height: parent.height - titleBar.height - readOnlyBanner.height
clip: true
@@ -414,12 +425,15 @@ DankFloatingWindow {
x: {
const flip = I18n.isRtl ? -1 : 1;
if (settingsModal.isCompactMode)
return settingsModal.menuVisible ? body.width * flip : 0;
return I18n.isRtl ? 0 : sidebar.width;
return (settingsModal.menuVisible ? body.width * flip : 0) + body.paneInset;
return I18n.isRtl ? body.paneInset : sidebar.width;
}
width: settingsModal.isCompactMode ? body.width : body.width - sidebar.width
height: body.height
color: settingsModal.isCompactMode ? Theme.floatingWindowSurface : "transparent"
width: settingsModal.isCompactMode ? body.width - body.paneInset * 2 : body.width - sidebar.width - body.paneInset
height: body.height - body.paneInset
radius: SettingsMetrics.paneRadius
color: SettingsMetrics.paneColor
border.width: Theme.layerOutlineWidth
border.color: Theme.outlineMedium
clip: true
Behavior on x {
+5 -15
View File
@@ -90,7 +90,7 @@ Item {
ancestor = ancestor.parent;
if (!ancestor)
return false;
} while (!item.visible || !item.enabled);
} while (!item.visible || !item.enabled)
keyboardHighlightId = "";
item.forceActiveFocus(forward ? Qt.TabFocusReason : Qt.BacktabFocusReason);
ensureRowVisible(item);
@@ -219,19 +219,10 @@ Item {
Component.onCompleted: GreeterService.refresh()
Rectangle {
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
width: Theme.dividerWidth
color: Theme.outlineVariant
visible: !(root.parentModal?.isCompactMode ?? false)
}
DankSearchField {
id: searchField
property real sideInset: root.searchActive ? Theme.spacingS : Theme.spacingL
property real sideInset: root.searchActive ? Theme.spacingS : SettingsMetrics.paneMargin
Behavior on sideInset {
enabled: Theme.currentAnimationSpeed !== SettingsData.AnimationSpeed.None
@@ -247,7 +238,6 @@ Item {
anchors.top: parent.top
anchors.leftMargin: sideInset
anchors.rightMargin: sideInset
anchors.topMargin: SettingsMetrics.searchBarGap
height: SettingsMetrics.searchBarHeight
placeholderText: I18n.tr("Search settings", "settings search field placeholder")
onFocusStateChanged: hasFocus => {
@@ -342,9 +332,9 @@ Item {
Column {
id: sidebarColumn
width: parent.width
leftPadding: Theme.spacingL
rightPadding: Theme.spacingL
bottomPadding: Theme.spacingL
leftPadding: SettingsMetrics.paneMargin
rightPadding: SettingsMetrics.paneMargin
bottomPadding: SettingsMetrics.paneMargin
spacing: SettingsMetrics.sidebarGroupGap
ProfileSection {