restructure bar components layout

2026-08-15 14:18:00 +02:00
parent 0092b41a05
commit 9823c66299
34 changed files with 69 additions and 278 deletions
@@ -0,0 +1,103 @@
+import QtQuick
+import QtQuick.Layouts
+import qs.Components
+import qs.Daemons
+import ZShell.Config
+import qs.Helpers
+import qs.Services
+
+CustomRect {
+	id: root
+
+	readonly property string currentMedia: (Players.active?.trackTitle ?? qsTr("No media")) || qsTr("Unknown title")
+	required property bool horizontal
+	readonly property int textWidth: Math.min(metrics.width, 200)
+
+	color: Colors.tPalette.m3surfaceContainer
+	implicitHeight: horizontal ? Math.max(Config.bar.height, Tokens.bar.innerSize) : layout.implicitHeight + Tokens.padding.normal * 2
+	implicitWidth: horizontal ? layout.implicitWidth + Tokens.padding.normal * 2 : Math.max(Config.bar.height, Tokens.bar.innerSize)
+	radius: Tokens.rounding.full
+
+	Behavior on implicitHeight {
+		enabled: !root.horizontal
+
+		Anim {
+		}
+	}
+	Behavior on implicitWidth {
+		enabled: root.horizontal
+
+		Anim {
+		}
+	}
+
+	TextMetrics {
+		id: metrics
+
+		font: mediatext.font
+		text: mediatext.text
+	}
+
+	GridLayout {
+		id: layout
+
+		anchors.bottomMargin: root.horizontal ? 0 : Tokens.padding.normal
+		anchors.fill: parent
+		anchors.leftMargin: root.horizontal ? Tokens.padding.normal : 0
+		anchors.rightMargin: root.horizontal ? Tokens.padding.normal : 0
+		anchors.topMargin: root.horizontal ? 0 : Tokens.padding.normal
+		columns: root.horizontal ? -1 : 1
+
+		Behavior on implicitWidth {
+			Anim {
+			}
+		}
+
+		MaterialIcon {
+			Layout.alignment: root.horizontal ? Qt.AlignVCenter : Qt.AlignHCenter
+			animate: true
+			color: Players.active?.isPlaying ? Colors.palette.m3primary : Colors.palette.m3onSurface
+			font.pointSize: Tokens.font.size.larger
+			text: Players.active?.isPlaying ? "music_note" : "music_off"
+		}
+
+		MarqueeText {
+			id: mediatext
+
+			Layout.alignment: root.horizontal ? Qt.AlignVCenter : Qt.AlignHCenter
+			animate: true
+			color: Players.active?.isPlaying ? Colors.palette.m3primary : Colors.palette.m3onSurface
+			font.pointSize: Tokens.font.size.normal
+			horizontalAlignment: Text.AlignHCenter
+			implicitWidth: root.textWidth
+			marqueeEnabled: false
+			pauseMs: 4000
+			text: root.currentMedia
+
+			transform: [
+				Translate {
+					x: !root.horizontal ? -root.textWidth + mediatext.implicitHeight : 0
+				},
+				Rotation {
+					angle: root.horizontal ? 0 : 270
+					origin.x: mediatext.implicitHeight / 2
+					origin.y: mediatext.implicitHeight / 2
+				}
+			]
+
+			CustomMouseArea {
+				anchors.fill: parent
+				hoverEnabled: true
+
+				onContainsMouseChanged: {
+					if (!containsMouse) {
+						mediatext.marqueeEnabled = false;
+					} else {
+						mediatext.marqueeEnabled = true;
+						mediatext.anim.start();
+					}
+				}
+			}
+		}
+	}
+}