Salastil/DankMaterialShell
1
0
Fork 0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2026-04-13 01:02:18 -04:00
Code Packages Releases Activity

dankbar: fix spacing at scale of running apps, dock, and system tray

Browse Source
This commit is contained in:
bbedward
2026-02-12 14:38:31 -05:00
parent 0e9b21d359
commit 605e03b065
4 changed files with 62 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
quickshell/Modules/BuiltinDesktopPlugins/SystemMonitorWidget.qml
View File

@@ -75,6 +75,7 @@ Item {
readonly property color dimColor: Theme.surfaceVariantText readonly property color dimColor: Theme.surfaceVariantText
property string currentGpuPciIdRef: "" property string currentGpuPciIdRef: ""
property var activeModuleRefs: []
property var cpuHistory: [] property var cpuHistory: []
property var memHistory: [] property var memHistory: []
@@ -140,12 +141,13 @@ Item {
modules.push("disk", "diskmounts"); modules.push("disk", "diskmounts");
if (showTopProcesses) if (showTopProcesses)
modules.push("processes"); modules.push("processes");
activeModuleRefs = modules;
DgopService.addRef(modules); DgopService.addRef(modules);
updateGpuRef(); updateGpuRef();
} }
Component.onDestruction: { Component.onDestruction: {
DgopService.removeRef(); DgopService.removeRef(activeModuleRefs);
if (currentGpuPciIdRef) if (currentGpuPciIdRef)
DgopService.removeGpuPciId(currentGpuPciIdRef); DgopService.removeGpuPciId(currentGpuPciIdRef);
} }
@@ -153,8 +155,13 @@ Item {
onShowGpuTempChanged: updateGpuRef() onShowGpuTempChanged: updateGpuRef()
onSelectedGpuPciIdChanged: updateGpuRef() onSelectedGpuPciIdChanged: updateGpuRef()
onShowTopProcessesChanged: { onShowTopProcessesChanged: {
if (showTopProcesses) if (showTopProcesses) {
activeModuleRefs = activeModuleRefs.concat(["processes"]);
DgopService.addRef(["processes"]); DgopService.addRef(["processes"]);
} else {
DgopService.removeRef(["processes"]);
activeModuleRefs = activeModuleRefs.filter(m => m !== "processes");
}
} }
function updateGpuRef() { function updateGpuRef() {

44
quickshell/Modules/DankBar/Widgets/AppsDock.qml
View File

@@ -400,6 +400,7 @@ BasePill {
Component.onCompleted: updateModel() Component.onCompleted: updateModel()
visible: dockItems.length > 0 visible: dockItems.length > 0
readonly property real iconCellSize: Theme.barIconSize(root.barThickness, undefined, root.barConfig?.noBackground) + 6
content: Component { content: Component {
Item { Item {
@@ -460,7 +461,7 @@ BasePill {
readonly property bool isOverflowToggle: modelData.type === "overflow-toggle" readonly property bool isOverflowToggle: modelData.type === "overflow-toggle"
readonly property bool isInOverflow: modelData.isInOverflow === true readonly property bool isInOverflow: modelData.isInOverflow === true
readonly property real visualSize: isSeparator ? 8 : ((widgetData?.runningAppsCompactMode !== undefined ? widgetData.runningAppsCompactMode : SettingsData.runningAppsCompactMode) ? 24 : (24 + Theme.spacingXS + 120)) readonly property real visualSize: isSeparator ? 8 : ((widgetData?.runningAppsCompactMode !== undefined ? widgetData.runningAppsCompactMode : SettingsData.runningAppsCompactMode) ? root.iconCellSize : (root.iconCellSize + Theme.spacingXS + 120))
readonly property real visualWidth: root.isVerticalOrientation ? root.barThickness : visualSize readonly property real visualWidth: root.isVerticalOrientation ? root.barThickness : visualSize
readonly property real visualHeight: root.isVerticalOrientation ? visualSize : root.barThickness readonly property real visualHeight: root.isVerticalOrientation ? visualSize : root.barThickness
@@ -620,8 +621,8 @@ BasePill {
Rectangle { Rectangle {
id: visualContent id: visualContent
width: root.isVerticalOrientation ? 24 : delegateItem.visualSize width: root.isVerticalOrientation ? root.iconCellSize : delegateItem.visualSize
height: root.isVerticalOrientation ? delegateItem.visualSize : 24 height: root.isVerticalOrientation ? delegateItem.visualSize : root.iconCellSize
anchors.centerIn: parent anchors.centerIn: parent
radius: Theme.cornerRadius radius: Theme.cornerRadius
color: { color: {
@@ -937,18 +938,15 @@ BasePill {
const globalPos = delegateItem.mapToGlobal(0, delegateItem.height / 2); const globalPos = delegateItem.mapToGlobal(0, delegateItem.height / 2);
const screenX = root.parentScreen ? root.parentScreen.x : 0; const screenX = root.parentScreen ? root.parentScreen.x : 0;
const screenY = root.parentScreen ? root.parentScreen.y : 0; const screenY = root.parentScreen ? root.parentScreen.y : 0;
const barThickness = root.effectiveBarThickness;
const spacing = barConfig?.spacing ?? 4;
const isLeft = root.axis?.edge === "left"; const isLeft = root.axis?.edge === "left";
const tooltipOffset = barThickness + spacing + Theme.spacingM; const tooltipX = isLeft ? (root.barThickness + root.barSpacing + Theme.spacingXS) : (root.parentScreen.width - root.barThickness - root.barSpacing - Theme.spacingXS);
const tooltipX = isLeft ? tooltipOffset : (root.parentScreen.width - tooltipOffset); const screenRelativeY = globalPos.y - screenY + root.minTooltipY;
const screenRelativeY = globalPos.y - screenY + root.barY;
tooltipLoader.item.show(appItem.tooltipText, screenX + tooltipX, screenRelativeY, root.parentScreen, isLeft, !isLeft); tooltipLoader.item.show(appItem.tooltipText, screenX + tooltipX, screenRelativeY, root.parentScreen, isLeft, !isLeft);
} else { } else {
const globalPos = delegateItem.mapToGlobal(delegateItem.width / 2, delegateItem.height); const globalPos = delegateItem.mapToGlobal(delegateItem.width / 2, delegateItem.height);
const screenHeight = root.parentScreen ? root.parentScreen.height : Screen.height; const screenHeight = root.parentScreen ? root.parentScreen.height : Screen.height;
const isBottom = root.axis?.edge === "bottom"; const isBottom = root.axis?.edge === "bottom";
const tooltipY = isBottom ? (screenHeight - Theme.barHeight - (barConfig?.spacing ?? 4) - Theme.spacingXS - 35) : (Theme.barHeight + (barConfig?.spacing ?? 4) + Theme.spacingXS); const tooltipY = isBottom ? (screenHeight - root.barThickness - root.barSpacing - Theme.spacingXS - 35) : (root.barThickness + root.barSpacing + Theme.spacingXS);
tooltipLoader.item.show(appItem.tooltipText, globalPos.x, tooltipY, root.parentScreen, false, false); tooltipLoader.item.show(appItem.tooltipText, globalPos.x, tooltipY, root.parentScreen, false, false);
} }
} }
@@ -972,21 +970,27 @@ BasePill {
if (contextMenuLoader.item) { if (contextMenuLoader.item) {
const globalPos = delegateItem.mapToGlobal(delegateItem.width / 2, delegateItem.height / 2); const globalPos = delegateItem.mapToGlobal(delegateItem.width / 2, delegateItem.height / 2);
const screenX = root.parentScreen ? root.parentScreen.x : 0;
const screenY = root.parentScreen ? root.parentScreen.y : 0;
const isBarVertical = root.axis?.isVertical ?? false; const isBarVertical = root.axis?.isVertical ?? false;
const barEdge = root.axis?.edge ?? "top"; const barEdge = root.axis?.edge ?? "top";
let x = globalPos.x; let x = globalPos.x - screenX;
let y = globalPos.y; let y = globalPos.y - screenY;
if (barEdge === "bottom") { switch (barEdge) {
y = (root.parentScreen ? root.parentScreen.height : Screen.height) - root.effectiveBarThickness; case "bottom":
} else if (barEdge === "top") { y = (root.parentScreen ? root.parentScreen.height : Screen.height) - root.barThickness - root.barSpacing;
y = root.effectiveBarThickness; break;
} else if (barEdge === "left") { case "top":
x = root.effectiveBarThickness; y = root.barThickness + root.barSpacing;
} else if (barEdge === "right") { break;
x = (root.parentScreen ? root.parentScreen.width : Screen.width) - root.effectiveBarThickness; case "left":
x = root.barThickness + root.barSpacing;
break;
case "right":
x = (root.parentScreen ? root.parentScreen.width : Screen.width) - root.barThickness - root.barSpacing;
break;
} }
const shouldHidePin = modelData.appId === "org.quickshell"; const shouldHidePin = modelData.appId === "org.quickshell";

15
quickshell/Modules/DankBar/Widgets/RunningApps.qml
View File

@@ -135,6 +135,7 @@ BasePill {
} }
} }
readonly property int windowCount: _groupByApp ? (groupedWindows?.length || 0) : (sortedToplevels?.length || 0) readonly property int windowCount: _groupByApp ? (groupedWindows?.length || 0) : (sortedToplevels?.length || 0)
readonly property real iconCellSize: Theme.barIconSize(root.barThickness, undefined, root.barConfig?.noBackground) + 6
visible: windowCount > 0 visible: windowCount > 0
property real scrollAccumulator: 0 property real scrollAccumulator: 0
@@ -242,7 +243,7 @@ BasePill {
} }
return appName + (windowTitle ? " • " + windowTitle : ""); return appName + (windowTitle ? " • " + windowTitle : "");
} }
readonly property real visualWidth: (widgetData?.runningAppsCompactMode !== undefined ? widgetData.runningAppsCompactMode : SettingsData.runningAppsCompactMode) ? 24 : (24 + Theme.spacingXS + 120) readonly property real visualWidth: (widgetData?.runningAppsCompactMode !== undefined ? widgetData.runningAppsCompactMode : SettingsData.runningAppsCompactMode) ? root.iconCellSize : (root.iconCellSize + Theme.spacingXS + 120)
width: visualWidth width: visualWidth
height: root.barThickness height: root.barThickness
@@ -250,7 +251,7 @@ BasePill {
Rectangle { Rectangle {
id: visualContent id: visualContent
width: delegateItem.visualWidth width: delegateItem.visualWidth
height: 24 height: root.iconCellSize
anchors.centerIn: parent anchors.centerIn: parent
radius: Theme.cornerRadius radius: Theme.cornerRadius
color: { color: {
@@ -433,7 +434,7 @@ BasePill {
const screenX = root.parentScreen ? root.parentScreen.x : 0; const screenX = root.parentScreen ? root.parentScreen.x : 0;
const screenY = root.parentScreen ? root.parentScreen.y : 0; const screenY = root.parentScreen ? root.parentScreen.y : 0;
const relativeY = globalPos.y - screenY; const relativeY = globalPos.y - screenY;
const tooltipX = root.axis?.edge === "left" ? (Theme.barHeight + (barConfig?.spacing ?? 4) + Theme.spacingXS) : (root.parentScreen.width - Theme.barHeight - (barConfig?.spacing ?? 4) - Theme.spacingXS); const tooltipX = root.axis?.edge === "left" ? (root.barThickness + root.barSpacing + Theme.spacingXS) : (root.parentScreen.width - root.barThickness - root.barSpacing - Theme.spacingXS);
const isLeft = root.axis?.edge === "left"; const isLeft = root.axis?.edge === "left";
const adjustedY = relativeY + root.minTooltipY; const adjustedY = relativeY + root.minTooltipY;
const finalX = screenX + tooltipX; const finalX = screenX + tooltipX;
@@ -442,7 +443,7 @@ BasePill {
const globalPos = delegateItem.mapToGlobal(delegateItem.width / 2, delegateItem.height); const globalPos = delegateItem.mapToGlobal(delegateItem.width / 2, delegateItem.height);
const screenHeight = root.parentScreen ? root.parentScreen.height : Screen.height; const screenHeight = root.parentScreen ? root.parentScreen.height : Screen.height;
const isBottom = root.axis?.edge === "bottom"; const isBottom = root.axis?.edge === "bottom";
const tooltipY = isBottom ? (screenHeight - Theme.barHeight - (barConfig?.spacing ?? 4) - Theme.spacingXS - 35) : (Theme.barHeight + (barConfig?.spacing ?? 4) + Theme.spacingXS); const tooltipY = isBottom ? (screenHeight - root.barThickness - root.barSpacing - Theme.spacingXS - 35) : (root.barThickness + root.barSpacing + Theme.spacingXS);
tooltipLoader.item.show(delegateItem.tooltipText, globalPos.x, tooltipY, root.parentScreen, false, false); tooltipLoader.item.show(delegateItem.tooltipText, globalPos.x, tooltipY, root.parentScreen, false, false);
} }
} }
@@ -497,15 +498,15 @@ BasePill {
} }
return appName + (windowTitle ? " • " + windowTitle : ""); return appName + (windowTitle ? " • " + windowTitle : "");
} }
readonly property real visualWidth: (widgetData?.runningAppsCompactMode !== undefined ? widgetData.runningAppsCompactMode : SettingsData.runningAppsCompactMode) ? 24 : (24 + Theme.spacingXS + 120) readonly property real visualWidth: (widgetData?.runningAppsCompactMode !== undefined ? widgetData.runningAppsCompactMode : SettingsData.runningAppsCompactMode) ? root.iconCellSize : (root.iconCellSize + Theme.spacingXS + 120)
width: root.barThickness width: root.barThickness
height: 24 height: root.iconCellSize
Rectangle { Rectangle {
id: visualContent id: visualContent
width: delegateItem.visualWidth width: delegateItem.visualWidth
height: 24 height: root.iconCellSize
anchors.centerIn: parent anchors.centerIn: parent
radius: Theme.cornerRadius radius: Theme.cornerRadius
color: { color: {

41
quickshell/Modules/DankBar/Widgets/SystemTrayBar.qml
View File

@@ -99,6 +99,7 @@ BasePill {
property bool suppressShiftAnimation: false property bool suppressShiftAnimation: false
readonly property bool hasHiddenItems: allTrayItems.length > mainBarItems.length readonly property bool hasHiddenItems: allTrayItems.length > mainBarItems.length
visible: allTrayItems.length > 0 visible: allTrayItems.length > 0
readonly property real trayItemSize: Theme.barIconSize(root.barThickness, undefined, root.barConfig?.noBackground) + 6
readonly property real minTooltipY: { readonly property real minTooltipY: {
if (!parentScreen || !isVerticalOrientation) { if (!parentScreen || !isVerticalOrientation) {
@@ -172,7 +173,7 @@ BasePill {
return ""; return "";
} }
width: 24 width: root.trayItemSize
height: root.barThickness height: root.barThickness
z: dragHandler.dragging ? 100 : 0 z: dragHandler.dragging ? 100 : 0
@@ -183,7 +184,7 @@ BasePill {
return 0; return 0;
const dragIdx = root.draggedIndex; const dragIdx = root.draggedIndex;
const dropIdx = root.dropTargetIndex; const dropIdx = root.dropTargetIndex;
const shiftAmount = 24; const shiftAmount = root.trayItemSize;
if (dropIdx < 0) if (dropIdx < 0)
return 0; return 0;
if (dragIdx < dropIdx && index > dragIdx && index <= dropIdx) if (dragIdx < dropIdx && index > dragIdx && index <= dropIdx)
@@ -222,8 +223,8 @@ BasePill {
Rectangle { Rectangle {
id: visualContent id: visualContent
width: 24 width: root.trayItemSize
height: 24 height: root.trayItemSize
anchors.centerIn: parent anchors.centerIn: parent
radius: Theme.cornerRadius radius: Theme.cornerRadius
color: trayItemArea.containsMouse ? Theme.widgetBaseHoverColor : "transparent" color: trayItemArea.containsMouse ? Theme.widgetBaseHoverColor : "transparent"
@@ -328,7 +329,7 @@ BasePill {
const axisOffset = mouse.x - dragHandler.dragStartPos.x; const axisOffset = mouse.x - dragHandler.dragStartPos.x;
dragHandler.dragAxisOffset = axisOffset; dragHandler.dragAxisOffset = axisOffset;
const itemSize = 24; const itemSize = root.trayItemSize;
const slotOffset = Math.round(axisOffset / itemSize); const slotOffset = Math.round(axisOffset / itemSize);
const newTargetIndex = Math.max(0, Math.min(root.mainBarItems.length - 1, index + slotOffset)); const newTargetIndex = Math.max(0, Math.min(root.mainBarItems.length - 1, index + slotOffset));
if (newTargetIndex !== root.dropTargetIndex) { if (newTargetIndex !== root.dropTargetIndex) {
@@ -351,14 +352,14 @@ BasePill {
} }
Item { Item {
width: 24 width: root.trayItemSize
height: root.barThickness height: root.barThickness
visible: root.hasHiddenItems visible: root.hasHiddenItems
Rectangle { Rectangle {
id: caretButton id: caretButton
width: 24 width: root.trayItemSize
height: 24 height: root.trayItemSize
anchors.centerIn: parent anchors.centerIn: parent
radius: Theme.cornerRadius radius: Theme.cornerRadius
color: caretArea.containsMouse ? Theme.widgetBaseHoverColor : "transparent" color: caretArea.containsMouse ? Theme.widgetBaseHoverColor : "transparent"
@@ -430,7 +431,7 @@ BasePill {
} }
width: root.barThickness width: root.barThickness
height: 24 height: root.trayItemSize
z: dragHandler.dragging ? 100 : 0 z: dragHandler.dragging ? 100 : 0
property real shiftOffset: { property real shiftOffset: {
@@ -440,7 +441,7 @@ BasePill {
return 0; return 0;
const dragIdx = root.draggedIndex; const dragIdx = root.draggedIndex;
const dropIdx = root.dropTargetIndex; const dropIdx = root.dropTargetIndex;
const shiftAmount = 24; const shiftAmount = root.trayItemSize;
if (dropIdx < 0) if (dropIdx < 0)
return 0; return 0;
if (dragIdx < dropIdx && index > dragIdx && index <= dropIdx) if (dragIdx < dropIdx && index > dragIdx && index <= dropIdx)
@@ -479,8 +480,8 @@ BasePill {
Rectangle { Rectangle {
id: visualContent id: visualContent
width: 24 width: root.trayItemSize
height: 24 height: root.trayItemSize
anchors.centerIn: parent anchors.centerIn: parent
radius: Theme.cornerRadius radius: Theme.cornerRadius
color: trayItemArea.containsMouse ? Theme.widgetBaseHoverColor : "transparent" color: trayItemArea.containsMouse ? Theme.widgetBaseHoverColor : "transparent"
@@ -585,7 +586,7 @@ BasePill {
const axisOffset = mouse.y - dragHandler.dragStartPos.y; const axisOffset = mouse.y - dragHandler.dragStartPos.y;
dragHandler.dragAxisOffset = axisOffset; dragHandler.dragAxisOffset = axisOffset;
const itemSize = 24; const itemSize = root.trayItemSize;
const slotOffset = Math.round(axisOffset / itemSize); const slotOffset = Math.round(axisOffset / itemSize);
const newTargetIndex = Math.max(0, Math.min(root.mainBarItems.length - 1, index + slotOffset)); const newTargetIndex = Math.max(0, Math.min(root.mainBarItems.length - 1, index + slotOffset));
if (newTargetIndex !== root.dropTargetIndex) { if (newTargetIndex !== root.dropTargetIndex) {
@@ -609,13 +610,13 @@ BasePill {
Item { Item {
width: root.barThickness width: root.barThickness
height: 24 height: root.trayItemSize
visible: root.hasHiddenItems visible: root.hasHiddenItems
Rectangle { Rectangle {
id: caretButtonVert id: caretButtonVert
width: 24 width: root.trayItemSize
height: 24 height: root.trayItemSize
anchors.centerIn: parent anchors.centerIn: parent
radius: Theme.cornerRadius radius: Theme.cornerRadius
color: caretAreaVert.containsMouse ? Theme.widgetBaseHoverColor : "transparent" color: caretAreaVert.containsMouse ? Theme.widgetBaseHoverColor : "transparent"
@@ -835,7 +836,7 @@ BasePill {
readonly property real rawWidth: { readonly property real rawWidth: {
const itemCount = root.hiddenBarItems.length; const itemCount = root.hiddenBarItems.length;
const cols = Math.min(5, itemCount); const cols = Math.min(5, itemCount);
const itemSize = 28; const itemSize = root.trayItemSize + 4;
const spacing = 2; const spacing = 2;
return cols * itemSize + (cols - 1) * spacing + Theme.spacingS * 2; return cols * itemSize + (cols - 1) * spacing + Theme.spacingS * 2;
} }
@@ -843,7 +844,7 @@ BasePill {
const itemCount = root.hiddenBarItems.length; const itemCount = root.hiddenBarItems.length;
const cols = Math.min(5, itemCount); const cols = Math.min(5, itemCount);
const rows = Math.ceil(itemCount / cols); const rows = Math.ceil(itemCount / cols);
const itemSize = 28; const itemSize = root.trayItemSize + 4;
const spacing = 2; const spacing = 2;
return rows * itemSize + (rows - 1) * spacing + Theme.spacingS * 2; return rows * itemSize + (rows - 1) * spacing + Theme.spacingS * 2;
} }
@@ -982,8 +983,8 @@ BasePill {
return ""; return "";
} }
width: 28 width: root.trayItemSize + 4
height: 28 height: root.trayItemSize + 4
radius: Theme.cornerRadius radius: Theme.cornerRadius
color: itemArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.withAlpha(Theme.surfaceContainer, 0) color: itemArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.withAlpha(Theme.surfaceContainer, 0)