bar: add compact tray option

Closes #659
This commit is contained in:
2 * r + 2 * t 2025-09-25 16:14:24 +10:00
parent 9cc751df32
commit d191ac44b5
7 changed files with 97 additions and 16 deletions

View file

@ -371,6 +371,7 @@ default, you must create it manually.
},
"tray": {
"background": false,
"compact": false,
"iconSubs": [],
"recolour": false
},

View file

@ -73,6 +73,7 @@ JsonObject {
component Tray: JsonObject {
property bool background: false
property bool recolour: false
property bool compact: false
property list<var> iconSubs: []
}

View file

@ -17,8 +17,24 @@ ColumnLayout {
required property BarPopouts.Wrapper popouts
readonly property int vPadding: Appearance.padding.large
function closeTray(): void {
if (!Config.bar.tray.compact)
return;
for (let i = 0; i < repeater.count; i++) {
const item = repeater.itemAt(i);
if (item?.enabled && item.id === "tray") {
item.item.expanded = false;
}
}
}
function checkPopout(y: real): void {
const ch = childAt(width / 2, y) as WrappedLoader;
if (ch?.id !== "tray")
closeTray();
if (!ch) {
popouts.hasCurrent = false;
return;
@ -38,12 +54,19 @@ ColumnLayout {
popouts.hasCurrent = true;
}
} else if (id === "tray") {
const index = Math.floor(((y - top) / itemHeight) * item.items.count);
if (!Config.bar.tray.compact || (item.expanded && !item.expandIcon.contains(mapToItem(item.expandIcon, item.implicitWidth / 2, y)))) {
const index = Math.floor(((y - top - item.padding * 2 + item.spacing) / item.layout.implicitHeight) * item.items.count);
const trayItem = item.items.itemAt(index);
if (trayItem) {
popouts.currentName = `traymenu${index}`;
popouts.currentCenter = Qt.binding(() => trayItem.mapToItem(root, 0, trayItem.implicitHeight / 2).y);
popouts.hasCurrent = true;
} else {
popouts.hasCurrent = false;
}
} else {
popouts.hasCurrent = false;
item.expanded = true;
}
} else if (id === "activeWindow") {
popouts.currentName = id.toLowerCase();

View file

@ -19,6 +19,10 @@ Item {
readonly property bool shouldBeVisible: Config.bar.persistent || visibilities.bar || isHovered
property bool isHovered
function closeTray(): void {
content.item?.closeTray();
}
function checkPopout(y: real): void {
content.item?.checkPopout(y);
}

View file

@ -1,3 +1,5 @@
pragma ComponentBehavior: Bound
import qs.components
import qs.services
import qs.config
@ -7,13 +9,22 @@ import QtQuick
StyledRect {
id: root
readonly property alias layout: layout
readonly property alias items: items
readonly property alias expandIcon: expandIcon
readonly property int padding: Config.bar.tray.background ? Appearance.padding.normal : Appearance.padding.small
readonly property int spacing: Config.bar.tray.background ? Appearance.spacing.small : 0
property bool expanded
clip: true
visible: width > 0 && height > 0 // To avoid warnings about being visible with no size
visible: height > 0
implicitWidth: Config.bar.sizes.innerWidth
implicitHeight: layout.implicitHeight + (Config.bar.tray.background ? Appearance.padding.normal : Appearance.padding.small) * 2
implicitHeight: {
if (!Config.bar.tray.compact)
return layout.implicitHeight + padding * 2;
return (expanded ? expandIcon.implicitHeight + layout.implicitHeight + spacing : expandIcon.implicitHeight) + padding * 2;
}
color: Qt.alpha(Colours.tPalette.m3surfaceContainer, Config.bar.tray.background ? Colours.tPalette.m3surfaceContainer.a : 0)
radius: Appearance.rounding.full
@ -21,9 +32,13 @@ StyledRect {
Column {
id: layout
anchors.centerIn: parent
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
anchors.topMargin: root.padding
spacing: Appearance.spacing.small
opacity: root.expanded || !Config.bar.tray.compact ? 1 : 0
add: Transition {
Anim {
properties: "scale"
@ -51,17 +66,49 @@ StyledRect {
TrayItem {}
}
Behavior on opacity {
Anim {}
}
}
Behavior on implicitWidth {
Anim {
easing.bezierCurve: Appearance.anim.curves.emphasized
Loader {
id: expandIcon
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
active: Config.bar.tray.compact
sourceComponent: Item {
implicitWidth: expandIconInner.implicitWidth
implicitHeight: expandIconInner.implicitHeight - Appearance.padding.small * 2
MaterialIcon {
id: expandIconInner
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
anchors.bottomMargin: Config.bar.tray.background ? Appearance.padding.small : -Appearance.padding.small
text: "expand_less"
font.pointSize: Appearance.font.size.large
rotation: root.expanded ? 180 : 0
Behavior on rotation {
Anim {}
}
Behavior on anchors.bottomMargin {
Anim {}
}
}
}
}
Behavior on implicitHeight {
Anim {
easing.bezierCurve: Appearance.anim.curves.emphasized
duration: Appearance.anim.durations.expressiveDefaultSpatial
easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
}
}
}

View file

@ -96,6 +96,7 @@ Variants {
visibilities.sidebar = false;
visibilities.dashboard = false;
panels.popouts.hasCurrent = false;
bar.closeTray();
}
}

View file

@ -68,8 +68,10 @@ CustomMouseArea {
if (!utilitiesShortcutActive)
visibilities.utilities = false;
if (!popouts.currentName.startsWith("traymenu") || (popouts.current?.depth ?? 0) <= 1)
if (!popouts.currentName.startsWith("traymenu") || (popouts.current?.depth ?? 0) <= 1) {
popouts.hasCurrent = false;
bar.closeTray();
}
if (Config.bar.showOnHover)
bar.isHovered = false;
@ -197,10 +199,12 @@ CustomMouseArea {
}
// Show popouts on hover
if (x < bar.implicitWidth)
if (x < bar.implicitWidth) {
bar.checkPopout(y);
else if ((!popouts.currentName.startsWith("traymenu") || (popouts.current?.depth ?? 0) <= 1) && !inLeftPanel(panels.popouts, x, y))
} else if ((!popouts.currentName.startsWith("traymenu") || (popouts.current?.depth ?? 0) <= 1) && !inLeftPanel(panels.popouts, x, y)) {
popouts.hasCurrent = false;
bar.closeTray();
}
}
// Monitor individual visibility changes