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

This commit is contained in:
bbedward
2026-10-02 11:53:15 -04:00
parent af27f0bac0
commit e4ec3582b4
53 changed files with 155 additions and 163 deletions
Generated
+3 -3
View File
@@ -3,11 +3,11 @@
"dank-qml-common": {
"flake": false,
"locked": {
"lastModified": 1790897239,
"narHash": "sha256-JgDpkgnLeNuLFLcxpo3oLJC7NC7uiM7+w+Jv1e4xlIM=",
"lastModified": 1790956339,
"narHash": "sha256-NxZipAzWqaXTFfa1BL+huPgdIydzdrE9hyk/WKuIXOg=",
"owner": "AvengeMedia",
"repo": "dank-qml-common",
"rev": "fd2f92dc755aebc3ecda4b0ce3e27ce6d6ca9f92",
"rev": "16c01d7c8f55a98552abdb48105724720c19007b",
"type": "github"
},
"original": {
+1
View File
@@ -1245,6 +1245,7 @@ Singleton {
property real spacingM: 12
property real spacingL: 16
property real spacingXL: 24
readonly property real windowInset: spacingM
property real fontSizeSmall: Math.round(fontScale * 12)
property real fontSizeMedium: Math.round(fontScale * 14)
property real fontSizeLarge: Math.round(fontScale * 16)
@@ -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 {
@@ -59,10 +59,9 @@ DankFloatingWindow {
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
anchors.topMargin: Theme.spacingM
anchors.leftMargin: Theme.spacingM
anchors.rightMargin: Theme.spacingM
anchors.bottomMargin: Theme.spacingM
anchors.leftMargin: Theme.windowInset
anchors.rightMargin: Theme.windowInset
anchors.bottomMargin: Theme.windowInset
inPopout: true
surfaceVisible: win.visible
onHideRequested: win.hide()
+3 -3
View File
@@ -223,7 +223,7 @@ Item {
text: resourceButtonsRow.compactMode ? "" : I18n.tr("Docs")
iconName: "menu_book"
iconSize: 18
backgroundColor: Theme.chipSurface
backgroundColor: SettingsMetrics.controlSurface
textColor: Theme.surfaceText
onClicked: Qt.openUrlExternally(Site.docs)
}
@@ -234,7 +234,7 @@ Item {
text: resourceButtonsRow.compactMode ? "" : I18n.tr("Plugins")
iconName: "extension"
iconSize: 18
backgroundColor: Theme.chipSurface
backgroundColor: SettingsMetrics.controlSurface
textColor: Theme.surfaceText
onClicked: Qt.openUrlExternally(Site.plugins)
}
@@ -245,7 +245,7 @@ Item {
text: resourceButtonsRow.compactMode ? "" : "GitHub"
iconName: "code"
iconSize: 18
backgroundColor: Theme.chipSurface
backgroundColor: SettingsMetrics.controlSurface
textColor: Theme.surfaceText
onClicked: Qt.openUrlExternally("https://github.com/AvengeMedia/DankMaterialShell")
}
@@ -118,7 +118,7 @@ Column {
width: overridesList.width
height: 48
radius: Theme.cornerRadius
color: Theme.floatingWindowFieldColor
color: SettingsMetrics.controlColor
border.width: 0
StyledText {
+2 -2
View File
@@ -36,7 +36,7 @@ Item {
iconName: "refresh"
busy: SystemUpdateService.isChecking
enabled: !SystemUpdateService.isChecking
backgroundColor: Theme.chipSurface
backgroundColor: SettingsMetrics.controlSurface
textColor: Theme.surfaceText
onClicked: SystemUpdateService.loadReleases(true)
}
@@ -45,7 +45,7 @@ Item {
anchors.verticalCenter: parent.verticalCenter
text: I18n.tr("View on GitHub")
iconName: "open_in_new"
backgroundColor: Theme.chipSurface
backgroundColor: SettingsMetrics.controlSurface
textColor: Theme.surfaceText
onClicked: Qt.openUrlExternally("https://github.com/AvengeMedia/DankMaterialShell/releases")
}
@@ -129,7 +129,7 @@ Column {
width: parent.width - SettingsMetrics.rowPaddingH * 2
height: Theme.listItemHeight
radius: Theme.cornerRadiusM
color: Theme.chipSurface
color: SettingsMetrics.controlColor
activeFocusOnTab: root.currentMode === "custom"
Accessible.role: Accessible.Button
Accessible.name: I18n.tr("Custom color")
@@ -2,6 +2,7 @@ import QtQuick
import qs.Common
import qs.Services
import qs.Widgets
import qs.Modules.Settings.Widgets
Rectangle {
id: root
@@ -62,7 +63,7 @@ Rectangle {
width: parent.width
height: 280
radius: Theme.cornerRadius
color: Theme.floatingWindowNestedSurface
color: SettingsMetrics.rowColor
border.color: Theme.outlineMedium
border.width: Theme.layerOutlineWidth
@@ -2,6 +2,7 @@ import QtQuick
import qs.Common
import qs.Services
import qs.Widgets
import qs.Modules.Settings.Widgets
Rectangle {
id: root
@@ -29,14 +30,14 @@ Rectangle {
color: {
if (!isConnected)
return Theme.floatingWindowFieldColor;
return SettingsMetrics.controlColor;
if (!isValidPosition)
return Theme.withAlpha(Theme.error, 0.3);
if (isDragging)
return Theme.withAlpha(Theme.primary, 0.4);
if (dragArea.containsMouse)
return Theme.withAlpha(Theme.primary, 0.2);
return Theme.floatingWindowNestedSurface;
return SettingsMetrics.controlColor;
}
border.color: {
@@ -1,6 +1,7 @@
import QtQuick
import qs.Common
import qs.Widgets
import qs.Modules.Settings.Widgets
StyledRect {
id: root
@@ -11,7 +12,7 @@ StyledRect {
width: parent.width
height: messageContent.implicitHeight + Theme.spacingL * 2
radius: Theme.cornerRadius
color: Theme.floatingWindowNestedSurface
color: SettingsMetrics.rowColor
border.color: Theme.outlineMedium
border.width: Theme.layerOutlineWidth
@@ -157,6 +157,7 @@ Column {
DankDropdown {
id: scaleDropdown
downKeyOpens: false
backgroundColor: SettingsMetrics.controlSurface
visible: !scaleRow.customMode
width: Math.min(dropdownWidth, scaleRow.width - SettingsMetrics.rowPaddingH * 2)
Accessible.name: scaleRow.title
@@ -141,6 +141,7 @@ Item {
DankDropdown {
id: profileDropdown
downKeyOpens: false
backgroundColor: SettingsMetrics.controlSurface
width: parent.width - newButton.width - editMonitorsButton.width - deleteButton.width - Theme.spacingS * 3
compactMode: true
dropdownWidth: width
@@ -166,7 +167,7 @@ Item {
iconName: "add"
text: ""
horizontalPadding: Theme.spacingM
backgroundColor: Theme.chipSurface
backgroundColor: SettingsMetrics.controlSurface
textColor: Theme.surfaceText
enabled: !SettingsData.displayProfileAutoSelect
onClicked: {
@@ -181,7 +182,7 @@ Item {
iconName: "edit"
text: ""
horizontalPadding: Theme.spacingM
backgroundColor: Theme.chipSurface
backgroundColor: SettingsMetrics.controlSurface
textColor: Theme.surfaceText
enabled: root.selectedProfileId !== "" && !SettingsData.displayProfileAutoSelect
onClicked: root.openEditMonitorsDialog()
@@ -193,7 +194,7 @@ Item {
iconName: "delete"
text: ""
horizontalPadding: Theme.spacingM
backgroundColor: Theme.chipSurface
backgroundColor: SettingsMetrics.controlSurface
textColor: Theme.error
enabled: root.selectedProfileId !== "" && !SettingsData.displayProfileAutoSelect
onClicked: root.showDeleteConfirmDialog = true
@@ -19,7 +19,7 @@ Item {
width: (parent.width - Theme.spacingM) / 2
height: tileColumn.implicitHeight + Theme.spacingM * 2
radius: Theme.cornerRadius
color: Theme.floatingWindowFieldColor
color: SettingsMetrics.controlColor
border.color: Theme.floatingWindowFieldBorderColor
border.width: Theme.outlineWidth
+1 -1
View File
@@ -222,7 +222,7 @@ Item {
monospace: true
text: root.greeterStatusOutput
tint: root.greeterStatusRunning ? Theme.surfaceVariantText : Theme.surfaceText
tintBackground: Theme.floatingWindowFieldColor
tintBackground: SettingsMetrics.controlColor
}
}
@@ -606,7 +606,7 @@ Item {
width: 200
anchors.verticalCenter: parent.verticalCenter
text: capturing ? I18n.tr("Press key...", "lock screen security key shortcut key combination capture prompt") : SettingsData.lockScreenSecurityKeyShortcut
backgroundColor: capturing ? Theme.selectedContainer : Theme.chipSurface
backgroundColor: capturing ? Theme.selectedContainer : SettingsMetrics.controlColor
textColor: Theme.surfaceText
property bool capturing: false
@@ -809,7 +809,7 @@ Item {
maxHeight: SettingsMetrics.noteMaxHeight
text: root.authValidateMessage
tint: !root.authValidateOk ? Theme.error : (root.authValidateWarn ? Theme.warning : Theme.surfaceVariantText)
tintBackground: Theme.floatingWindowFieldColor
tintBackground: SettingsMetrics.controlColor
}
SettingsDropdownRow {
@@ -863,7 +863,7 @@ Item {
maxHeight: SettingsMetrics.noteMaxHeight
text: root.u2fValidateMessage
tint: !root.u2fValidateOk ? Theme.error : (root.u2fValidateWarn ? Theme.warning : Theme.surfaceVariantText)
tintBackground: Theme.floatingWindowFieldColor
tintBackground: SettingsMetrics.controlColor
}
SettingsRow {
@@ -96,7 +96,7 @@ Item {
width: parent.width
height: 56
radius: Theme.cornerRadius
color: isConnected ? Theme.selectedContainer : modemMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.floatingWindowFieldColor
color: isConnected ? Theme.selectedContainer : modemMouseArea.containsMouse ? Theme.primaryHoverLight : SettingsMetrics.controlColor
border.width: Theme.layerOutlineWidth
border.color: Theme.outlineMedium
@@ -212,7 +212,7 @@ Item {
width: parent.width
height: 56
radius: Theme.cornerRadius
color: isActive ? Theme.selectedContainer : profileMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.floatingWindowFieldColor
color: isActive ? Theme.selectedContainer : profileMouseArea.containsMouse ? Theme.primaryHoverLight : SettingsMetrics.controlColor
border.color: Theme.outlineMedium
border.width: Theme.layerOutlineWidth
@@ -84,7 +84,7 @@ Item {
width: parent.width
height: isExpanded ? 56 + ethExpandedContent.height : 56
radius: Theme.cornerRadius
color: isConnected ? Theme.selectedContainer : ethDeviceMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.floatingWindowFieldColor
color: isConnected ? Theme.selectedContainer : ethDeviceMouseArea.containsMouse ? Theme.primaryHoverLight : SettingsMetrics.controlColor
border.width: Theme.layerOutlineWidth
border.color: Theme.outlineMedium
clip: true
@@ -312,7 +312,7 @@ Item {
width: parent.width
height: 48
radius: Theme.cornerRadius
color: modelData.isActive ? Theme.selectedContainer : wiredMouseArea.containsMouse ? Theme.primaryHoverLight : Theme.floatingWindowFieldColor
color: modelData.isActive ? Theme.selectedContainer : wiredMouseArea.containsMouse ? Theme.primaryHoverLight : SettingsMetrics.controlColor
border.width: Theme.layerOutlineWidth
border.color: Theme.outlineMedium
@@ -920,7 +920,7 @@ Item {
visible: hotspotCard.editing
text: I18n.tr("Cancel", "cancel hotspot editing action")
buttonHeight: 36
backgroundColor: Theme.chipSurface
backgroundColor: SettingsMetrics.controlSurface
textColor: Theme.surfaceText
onClicked: hotspotCard.stopEditing()
}
@@ -931,7 +931,7 @@ Item {
iconName: "edit"
buttonHeight: 36
enabled: !NetworkService.hotspotEnabled && !hotspotCard.starting
backgroundColor: Theme.chipSurface
backgroundColor: SettingsMetrics.controlSurface
textColor: Theme.surfaceText
onClicked: hotspotCard.beginEditing()
}
@@ -942,7 +942,7 @@ Item {
iconName: "save"
buttonHeight: 36
enabled: hotspotCard.buildCanConfigure()
backgroundColor: Theme.chipSurface
backgroundColor: SettingsMetrics.controlSurface
textColor: Theme.surfaceText
onClicked: hotspotCard.saveOnly()
}
@@ -56,7 +56,7 @@ Item {
width: parent.width
height: paletteColumn.implicitHeight + Theme.spacingM * 2
radius: Theme.cornerRadius
color: Theme.floatingWindowFieldColor
color: SettingsMetrics.controlColor
Column {
id: paletteColumn
+2 -1
View File
@@ -1,6 +1,7 @@
import QtQuick
import qs.Common
import qs.Widgets
import qs.Modules.Settings.Widgets
Rectangle {
id: root
@@ -12,7 +13,7 @@ Rectangle {
height: Theme.iconSize
width: content.implicitWidth + Theme.spacingS * 2
radius: Theme.cornerRadiusS
color: Theme.chipSurface
color: SettingsMetrics.controlColor
border.color: Theme.outlineVariant
border.width: Theme.outlineWidth
@@ -615,7 +615,7 @@ RegistryBrowserWindow {
visible: root.operationMessage !== ""
tone: "primary"
pad: Theme.spacingM
color: root.operationFailed ? Theme.errorContainer : surfaceColor
color: root.operationFailed ? Theme.errorContainer : SettingsMetrics.rowColor
Accessible.name: root.operationMessage
RowLayout {
@@ -698,6 +698,7 @@ RegistryBrowserWindow {
DankDropdown {
Layout.fillWidth: true
Layout.preferredHeight: Theme.buttonHeightS
backgroundColor: SettingsMetrics.controlSurface
compactMode: true
dropdownWidth: Math.max(Theme.smallBreakpoint / 2, categoryFiltersRow.width - categoryFilterLabel.implicitWidth - Theme.spacingS * 3)
currentValue: root.categoryFilterLabelForKey(root.categoryFilter)
@@ -779,7 +780,7 @@ RegistryBrowserWindow {
horizontalPadding: 0
buttonHeight: Theme.buttonHeightXS
text: modelData
backgroundColor: Theme.chipSurface
backgroundColor: SettingsMetrics.controlSurface
textColor: Theme.onSurfaceVariant
onClicked: root.scrollToLetter(modelData)
}
@@ -839,7 +840,7 @@ RegistryBrowserWindow {
anchors.horizontalCenter: parent.horizontalCenter
text: I18n.tr("Retry", "retry failed action button")
iconName: "refresh"
backgroundColor: Theme.chipSurface
backgroundColor: SettingsMetrics.controlSurface
textColor: Theme.surfaceText
onClicked: root.refreshPlugins()
}
@@ -948,10 +949,10 @@ RegistryBrowserWindow {
spacing: Theme.spacingL
Rectangle {
width: Math.min(SettingsMetrics.contentMaxWidth, parent.width)
width: Math.min(SettingsMetrics.mediaMaxWidth, parent.width)
height: Math.round(width * SettingsMetrics.choiceCardPreviewRatio)
radius: Theme.cornerRadiusM
color: Theme.floatingWindowNestedSurface
color: SettingsMetrics.rowColor
border.color: Theme.outlineMedium
border.width: Theme.layerOutlineWidth
+2 -2
View File
@@ -27,7 +27,7 @@ DankCard {
implicitHeight: previewHeight + infoHeight + Theme.spacingS * 2 + Theme.spacingM
radius: Theme.cornerRadiusM
color: Theme.floatingWindowNestedSurface
color: SettingsMetrics.rowColor
border.color: focusRingShown ? Theme.focusRingColor : Theme.outlineMedium
border.width: focusRingShown ? Theme.focusRingWidth : Theme.layerOutlineWidth
pad: 0
@@ -46,7 +46,7 @@ DankCard {
ClippingRectangle {
anchors.fill: parent
radius: Theme.cornerRadiusS
color: Theme.chipSurface
color: SettingsMetrics.controlColor
CachingImage {
id: cardPreview
@@ -432,6 +432,7 @@ Column {
DankCard {
id: storeCard
color: SettingsMetrics.rowColor
width: parent.width
implicitHeight: storeContent.implicitHeight + pad * 2
visible: root.plugins.length === 0
@@ -608,7 +609,7 @@ Column {
pad: Theme.spacingL
radius: Theme.cornerRadiusM
readonly property string highlightKey: "installedPlugin:" + modelData.pluginId
color: SettingsSearchService.highlightSection === highlightKey ? Theme.blend(surfaceColor, Theme.primary, SettingsMetrics.highlightBlend) : surfaceColor
color: SettingsSearchService.highlightSection === highlightKey ? Theme.blend(SettingsMetrics.rowColor, Theme.primary, SettingsMetrics.highlightBlend) : SettingsMetrics.rowColor
clickable: true
Accessible.name: modelData.text
onClicked: keyboard => root.parentModal?.navigateTo(modelData.id, keyboard)
@@ -302,6 +302,7 @@ Item {
DankDropdown {
id: bootEntryDropdown
downKeyOpens: false
backgroundColor: SettingsMetrics.controlSurface
enabled: bootEntryPicker.options.length > 0
Accessible.name: bootEntryPicker.title
width: Math.min(dropdownWidth, bootEntryPicker.width - SettingsMetrics.rowPaddingH * 2)
+4 -4
View File
@@ -590,7 +590,7 @@ Item {
text: printerDelegate.isStopped ? I18n.tr("Resume", "verb, button that resumes a paused printer") : I18n.tr("Pause")
iconName: printerDelegate.isStopped ? "play_arrow" : "pause"
buttonHeight: Theme.buttonHeightXS
backgroundColor: Theme.chipSurface
backgroundColor: SettingsMetrics.controlSurface
textColor: Theme.surfaceText
onClicked: {
if (printerDelegate.isStopped) {
@@ -605,7 +605,7 @@ Item {
text: I18n.tr("Test page")
iconName: "description"
buttonHeight: Theme.buttonHeightXS
backgroundColor: Theme.chipSurface
backgroundColor: SettingsMetrics.controlSurface
textColor: Theme.surfaceText
onClicked: CupsService.printTestPage(printerDelegate.modelData)
}
@@ -614,7 +614,7 @@ Item {
text: printerDelegate.printerData?.accepting ? I18n.tr("Reject jobs") : I18n.tr("Accept jobs")
iconName: printerDelegate.printerData?.accepting ? "block" : "check_circle"
buttonHeight: Theme.buttonHeightXS
backgroundColor: Theme.chipSurface
backgroundColor: SettingsMetrics.controlSurface
textColor: Theme.surfaceText
onClicked: {
if (printerDelegate.printerData?.accepting) {
@@ -643,7 +643,7 @@ Item {
text: I18n.tr("Clear All")
iconName: "delete_sweep"
buttonHeight: Theme.buttonHeightXS
backgroundColor: Theme.chipSurface
backgroundColor: SettingsMetrics.controlSurface
textColor: Theme.surfaceText
onClicked: {
purgeJobsConfirm.showWithOptions({
@@ -185,10 +185,9 @@ DankFloatingWindow {
anchors.right: parent.right
anchors.top: headerArea.bottom
anchors.bottom: parent.bottom
anchors.leftMargin: Theme.spacingL
anchors.rightMargin: Theme.spacingL
anchors.topMargin: Theme.spacingM
anchors.bottomMargin: Theme.spacingL
anchors.leftMargin: Theme.windowInset
anchors.rightMargin: Theme.windowInset
anchors.bottomMargin: Theme.windowInset
Item {
id: browserBody
@@ -330,7 +330,7 @@ Item {
buttonSize: Theme.buttonHeightS
iconName: "refresh"
iconColor: Theme.surfaceText
backgroundColor: Theme.chipSurface
backgroundColor: SettingsMetrics.controlSurface
Accessible.name: I18n.tr("Check for updates")
onClicked: SystemUpdateService.checkForUpdates()
}
@@ -439,7 +439,7 @@ Item {
anchors.verticalCenter: parent.verticalCenter
text: I18n.tr("Restart DMS")
iconName: "restart_alt"
backgroundColor: Theme.chipSurface
backgroundColor: SettingsMetrics.controlSurface
textColor: Theme.surfaceText
onClicked: SystemUpdateService.restartShell()
}
@@ -477,7 +477,7 @@ Item {
visible: root.systemCount > 0 && !SystemUpdateService.isUpgrading
text: I18n.tr("Update All")
iconName: "system_update_alt"
backgroundColor: Theme.chipSurface
backgroundColor: SettingsMetrics.controlSurface
textColor: Theme.surfaceText
enabled: !root.busy
onClicked: root.runUpdateAll()
@@ -556,7 +556,7 @@ Item {
visible: root.upgradeFailed && !root.upgradeRunsInTerminal
text: I18n.tr("Open in terminal")
iconName: "terminal"
backgroundColor: Theme.chipSurface
backgroundColor: SettingsMetrics.controlSurface
textColor: Theme.surfaceText
onClicked: root.runUpdateAll(true)
}
@@ -126,8 +126,8 @@ Item {
clip: true
DankButtonGroup {
arrowKeysSelect: false
id: themeCategoryGroup
arrowKeysSelect: false
anchors.horizontalCenter: parent.horizontalCenter
buttonPadding: parent.width < 420 ? Theme.spacingS : Theme.spacingL
minButtonWidth: parent.width < 420 ? 44 : 64
@@ -211,7 +211,7 @@ Item {
width: 120
height: 90
radius: Theme.cornerRadius
color: Theme.floatingWindowFieldColor
color: SettingsMetrics.controlColor
border.width: Theme.layerOutlineWidth
border.color: Theme.outlineMedium
@@ -666,8 +666,8 @@ Item {
visible: variantSelector.isMultiVariant && variantSelector.flavorOptions.length > 1
DankButtonGroup {
arrowKeysSelect: false
id: flavorButtonGroup
arrowKeysSelect: false
anchors.horizontalCenter: parent.horizontalCenter
property int _count: variantSelector.flavorNames.length
property real _maxPerItem: _count > 1 ? (parent.width - (_count - 1) * spacing) / _count : parent.width
@@ -743,8 +743,8 @@ Item {
visible: !variantSelector.isMultiVariant && variantSelector.variantNames.length > 0
DankButtonGroup {
arrowKeysSelect: false
id: variantButtonGroup
arrowKeysSelect: false
anchors.horizontalCenter: parent.horizontalCenter
property int _count: variantSelector.variantNames.length
property real _maxPerItem: _count > 1 ? (parent.width - (_count - 1) * spacing) / _count : parent.width
@@ -167,7 +167,7 @@ Item {
width: motionPreview.laneWidth
height: parent.height
radius: Theme.cornerRadiusM
color: Theme.chipSurface
color: SettingsMetrics.controlColor
StyledText {
x: parent.width - width - Theme.spacingL
@@ -188,7 +188,7 @@ Column {
id: hero
readonly property bool stacked: width < SettingsMetrics.wallpaperHeroStackWidth
readonly property real thumbWidth: stacked ? width : Math.round(width * SettingsMetrics.wallpaperHeroSplit)
readonly property real thumbWidth: stacked ? width : Math.round(Math.min(width, SettingsMetrics.mediaMaxWidth) * SettingsMetrics.wallpaperHeroSplit)
width: parent.width
spacing: Theme.spacingL
@@ -211,8 +211,8 @@ Column {
spacing: Theme.spacingM
DankButtonGroup {
arrowKeysSelect: false
id: modeGroup
arrowKeysSelect: false
width: parent.width
fillWidth: true
checkEnabled: false
@@ -242,7 +242,7 @@ Column {
SettingsGroup {
id: navGroup
width: parent.width
slotColor: Theme.foregroundColor(Theme.chipSurface, true)
slotColor: SettingsMetrics.controlColor
SettingsNavRow {
tab: "wallpaper"
@@ -149,7 +149,7 @@ Item {
iconName: "skip_previous"
iconSize: Theme.iconSizeMedium
iconColor: Theme.surfaceText
backgroundColor: Theme.chipSurface
backgroundColor: SettingsMetrics.controlSurface
enabled: root.canCycle
Accessible.name: I18n.tr("Previous")
anchors.verticalCenter: parent.verticalCenter
@@ -161,7 +161,7 @@ Item {
iconName: "skip_next"
iconSize: Theme.iconSizeMedium
iconColor: Theme.surfaceText
backgroundColor: Theme.chipSurface
backgroundColor: SettingsMetrics.controlSurface
enabled: root.canCycle
Accessible.name: I18n.tr("Next")
anchors.verticalCenter: parent.verticalCenter
@@ -178,7 +178,8 @@ DankFloatingWindow {
Column {
anchors.fill: parent
anchors.margins: Theme.spacingL
anchors.margins: Theme.windowInset
anchors.topMargin: 0
spacing: Theme.spacingM
StyledText {
@@ -72,7 +72,8 @@ DankFloatingWindow {
Column {
anchors.fill: parent
anchors.margins: Theme.spacingL
anchors.margins: Theme.windowInset
anchors.topMargin: 0
spacing: Theme.spacingM
DankSearchField {
@@ -47,7 +47,7 @@ SettingsRow {
width: (parent.width - Theme.spacingS * 2) / 3
height: Theme.listItemHeight + Theme.spacingXS
radius: Theme.cornerRadius
color: root.colorMode === modelData.id ? Theme.primarySelected : Theme.chipSurface
color: root.colorMode === modelData.id ? Theme.primarySelected : SettingsMetrics.controlColor
border.color: root.colorMode === modelData.id ? Theme.primary : Theme.withAlpha(Theme.primary, 0)
border.width: Theme.outlineWidthFocused
@@ -42,6 +42,7 @@ SettingsRow {
DankDropdown {
id: dropdown
downKeyOpens: false
backgroundColor: SettingsMetrics.controlSurface
enabled: root.enabled
Accessible.name: root.text
Accessible.description: root.description + (root.description ? " · " : "") + currentValue
@@ -106,7 +106,7 @@ GridLayout {
implicitWidth: root.minimumCardWidth
implicitHeight: Math.max(Math.round(Theme.fontSizeMedium * root.cardHeightRatio), cardContent.implicitHeight + Theme.spacingM * 2)
radius: Theme.cornerRadius
color: Theme.floatingWindowNestedSurface
color: SettingsMetrics.rowColor
border.width: isActive ? Theme.outlineWidthFocused : Theme.layerOutlineWidth
border.color: isActive ? Theme.primary : Theme.outlineMedium
@@ -146,7 +146,7 @@ GridLayout {
width: Math.min(root.previewWidth, cardContent.width)
height: Math.round(width * root.previewAspect)
radius: Theme.spacingXS
color: Theme.chipSurface
color: SettingsMetrics.controlColor
border.width: Theme.outlineWidth
border.color: Theme.outline
anchors.horizontalCenter: parent.horizontalCenter
@@ -59,7 +59,7 @@ Column {
height: Theme.iconButtonSize + Theme.spacingS
text: ""
placeholderText: "40.7128"
backgroundColor: Theme.floatingWindowFieldColor
backgroundColor: SettingsMetrics.controlSurface
normalBorderColor: Theme.primarySelected
keyNavigationTab: longitudeField
@@ -97,7 +97,7 @@ Column {
height: Theme.iconButtonSize + Theme.spacingS
text: ""
placeholderText: "-74.0060"
backgroundColor: Theme.floatingWindowFieldColor
backgroundColor: SettingsMetrics.controlSurface
normalBorderColor: Theme.primarySelected
keyNavigationBacktab: latitudeField
@@ -7,7 +7,8 @@ import qs.Common
Singleton {
readonly property real sidebarWidth: 320
readonly property real compactBreakpoint: 700
readonly property real contentMaxWidth: 720
readonly property real contentMaxWidth: Number.POSITIVE_INFINITY
readonly property real mediaMaxWidth: 720
readonly property real windowWidth: 1100
readonly property real windowHeight: 940
readonly property real windowMinWidth: 500
@@ -15,7 +16,9 @@ Singleton {
readonly property real formDialogWidth: 640
readonly property real pagePaddingH: 40
readonly property real pagePaddingV: 32
readonly property real scrollGutter: 32
readonly property real paneMargin: Theme.windowInset
readonly property real panePadding: Theme.spacingXL
readonly property real paneRadius: Theme.cornerRadiusL
readonly property real pageHeaderHeight: Theme.fontSizeXXLarge + Theme.spacingXL + Theme.spacingM
readonly property real rowPaddingH: 20
readonly property real rowPaddingV: 16
@@ -46,7 +49,11 @@ Singleton {
readonly property real previewTileMinWidth: 140
readonly property real emptyStateHeight: 100
readonly property real noteMaxHeight: 160
readonly property color rowColor: Theme.foregroundColor(Theme.cardSurface, true)
readonly property color paneColor: Theme.floatingWindowNestedSurface
readonly property color sidebarRowColor: Theme.floatingWindowNestedSurface
readonly property color rowColor: Theme.foregroundColor(Theme.chipSurface, true)
readonly property color controlSurface: Theme.chipSurfaceNested
readonly property color controlColor: Theme.foregroundColor(controlSurface, true)
readonly property color rowHighlightColor: Theme.withAlpha(Theme.primary, highlightBlend)
readonly property color selectedRowColor: Theme.selectedContainer
readonly property int transitionDuration: Theme.expressiveDurations.expressiveFastSpatial
@@ -8,7 +8,7 @@ DankFlickable {
default property alias content: column.data
property alias spacing: column.spacing
property alias columnWidth: column.width
property int contentMaxWidth: SettingsMetrics.contentMaxWidth
property real contentMaxWidth: SettingsMetrics.contentMaxWidth
property Item fabBar: null
anchors.fill: parent
@@ -19,7 +19,7 @@ DankFlickable {
Column {
id: column
topPadding: Theme.spacingXS
width: Math.min(root.contentMaxWidth, parent.width - Theme.spacingL * 2)
width: Math.min(root.contentMaxWidth, parent.width)
bottomPadding: SettingsMetrics.pagePaddingV + (root.fabBar?.reservedHeight ?? 0)
anchors.horizontalCenter: parent.horizontalCenter
spacing: Theme.spacingL
@@ -131,7 +131,7 @@ Item {
width: Math.min(root.width, SettingsMetrics.positionPickerMaxWidth)
height: Math.round(width * SettingsMetrics.choiceCardPreviewRatio)
radius: Theme.cornerRadiusM
color: Theme.chipSurface
color: SettingsMetrics.controlColor
border.width: Theme.outlineWidth
border.color: Theme.outlineVariant
@@ -63,7 +63,7 @@ Rectangle {
topRightRadius: topRadius
bottomLeftRadius: bottomRadius
bottomRightRadius: bottomRadius
color: active ? SettingsMetrics.selectedRowColor : SettingsMetrics.rowColor
color: active ? SettingsMetrics.selectedRowColor : SettingsMetrics.sidebarRowColor
border.width: Theme.layerOutlineWidth
border.color: Theme.outlineMedium
@@ -42,7 +42,7 @@ Flow {
width: root.tileWidth
height: root.compact ? root.compactTileHeight : media.height + label.implicitHeight + Theme.spacingS * 3
radius: Theme.cornerRadiusM
color: Theme.floatingWindowFieldColor
color: SettingsMetrics.controlColor
border.width: isActive ? Theme.outlineWidthFocused : Theme.layerOutlineWidth
border.color: isActive ? Theme.primary : Theme.outlineMedium
@@ -133,7 +133,7 @@ Flow {
visible: tile.deletable && !root.compact && (tile.activeFocus || activeFocus || hovered || tileState.containsMouse)
iconName: "delete"
iconColor: Theme.error
backgroundColor: Theme.floatingWindowFieldColor
backgroundColor: SettingsMetrics.controlSurface
tooltipText: I18n.tr("Delete")
onClicked: root.deleteRequested(tile.modelData.value)
}
@@ -21,7 +21,7 @@ Rectangle {
height: width * SettingsMetrics.wallpaperThumbRatio
radius: Theme.cornerRadiusM
color: isColor ? path : Theme.chipSurface
color: isColor ? path : SettingsMetrics.controlColor
ClippingRectangle {
anchors.fill: parent
@@ -79,7 +79,7 @@ Rectangle {
buttonSize: Theme.iconButtonSize
iconName: "folder_open"
iconSize: Theme.iconSizeMedium
backgroundColor: Theme.chipSurface
backgroundColor: SettingsMetrics.controlSurface
iconColor: Theme.surfaceText
Accessible.name: I18n.tr("Browse")
onClicked: root.browse()
@@ -89,7 +89,7 @@ Rectangle {
buttonSize: Theme.iconButtonSize
iconName: "palette"
iconSize: Theme.iconSizeMedium
backgroundColor: Theme.chipSurface
backgroundColor: SettingsMetrics.controlSurface
iconColor: Theme.surfaceText
visible: root.allowColor
tooltipText: I18n.tr("Custom")
@@ -100,7 +100,7 @@ Rectangle {
buttonSize: Theme.iconButtonSize
iconName: "close"
iconSize: Theme.iconSizeMedium
backgroundColor: Theme.chipSurface
backgroundColor: SettingsMetrics.controlSurface
iconColor: Theme.error
visible: root.path !== ""
Accessible.name: I18n.tr("Clear")
@@ -344,6 +344,7 @@ Item {
DankDropdown {
id: windowSelector
downKeyOpens: false
backgroundColor: SettingsMetrics.controlSurface
anchors.verticalCenter: parent.verticalCenter
dropdownWidth: Math.min(400, createRuleRow.width - SettingsMetrics.rowPaddingH * 2)
compactMode: true
@@ -526,7 +527,7 @@ Item {
visible: externalCard.sourceFile.length > 0
anchors.verticalCenter: parent.verticalCenter
text: externalCard.sourceFile
color: Theme.floatingWindowFieldColor
color: SettingsMetrics.controlColor
textColor: Theme.surfaceVariantText
}