diff --git a/Packages/OnyxKit/Sources/MetricsProvider/MetricPopovers.swift b/Packages/OnyxKit/Sources/MetricsProvider/MetricPopovers.swift index 10bf311..07d3c34 100644 --- a/Packages/OnyxKit/Sources/MetricsProvider/MetricPopovers.swift +++ b/Packages/OnyxKit/Sources/MetricsProvider/MetricPopovers.swift @@ -61,6 +61,21 @@ private struct Row: View { } } +/// Die Mitte des **Rings** — nicht die des Rings samt Beschriftung. +/// +/// Ein `HStack` zentriert seine Inhalte über die volle Höhe. Die Beschriftung +/// unter dem Ring gehört aber dazu, und dadurch rutscht alles daneben um deren +/// halbe Höhe nach unten. Bei einer einzelnen Zeile fällt das auf: sie steht +/// dann sichtbar tiefer als die Mitte, auf die man schaut. +private extension VerticalAlignment { + enum DialCenterID: AlignmentID { + static func defaultValue(in context: ViewDimensions) -> CGFloat { + context[VerticalAlignment.center] + } + } + static let dialCenter = VerticalAlignment(DialCenterID.self) +} + /// Ein Ring mit Zahl in der Mitte. private struct Dial: View { let value: Double @@ -81,6 +96,7 @@ private struct Dial: View { Text(text).font(.system(size: 15, weight: .medium).monospacedDigit()) } .frame(width: 62, height: 62) + .alignmentGuide(.dialCenter) { $0[VerticalAlignment.center] } Text(caption).font(.caption2).foregroundStyle(.secondary) } .padding(.bottom, 2) @@ -244,7 +260,7 @@ private struct BatteryDetail: View { var body: some View { if let battery = snapshot.battery { - HStack(spacing: 14) { + HStack(alignment: .dialCenter, spacing: 14) { Dial(value: battery.charge, caption: String(localized: "metric.battery", bundle: .module), text: MetricFormat.percent(battery.charge), @@ -275,6 +291,7 @@ private struct BatteryDetail: View { // Ladestand stehen bleibt. activityLine(battery) } + .alignmentGuide(.dialCenter) { $0[VerticalAlignment.center] } } // Das Ladelimit steht hier und nicht in den Einstellungen: es ist