Add landscape layouts for level display, vehicle view, and alignment assistant
Rotating the phone into landscape while leveling used to leave a portrait-shaped column of controls that needed scrolling to take in. All three level-integration screens now branch on verticalSizeClass: the bubble/vehicle status in the device screen and the full alignment assistant (advice, readings, and wedge heights) lay out side-by-side instead of stacked, sized to fit without scrolling. The device screen also measures its actual available height via a GeometryReader and feeds it to the level display so the bubble/vehicle graphic scales to fill the landscape screen rather than being capped at a fixed size, and the connection-status section moves to the bottom of the list in landscape so it doesn't compete with the display for space. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
fototeddy
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
21f5d8de62
commit
8d975d2c4d
@@ -11,6 +11,7 @@ struct AlignmentAssistantView: View {
|
||||
|
||||
@Environment(BluetoothManager.self) private var bluetooth
|
||||
@Environment(\.dismiss) private var dismiss
|
||||
@Environment(\.verticalSizeClass) private var verticalSizeClass
|
||||
|
||||
@State private var assistant = AlignmentAssistant()
|
||||
@State private var didAnnounceTarget = false
|
||||
@@ -18,49 +19,18 @@ struct AlignmentAssistantView: View {
|
||||
|
||||
private var state: LevelState { bluetooth.levelStates[device.id] ?? LevelState() }
|
||||
|
||||
/// iPhone im Querformat meldet eine kompakte Höhe – das ist das
|
||||
/// zuverlässige Signal dafür, nicht die Geräteausrichtung selbst.
|
||||
private var isLandscape: Bool { verticalSizeClass == .compact }
|
||||
|
||||
var body: some View {
|
||||
NavigationStack {
|
||||
ScrollView {
|
||||
VStack(spacing: 24) {
|
||||
Picker("Darstellung", selection: $displayStyle) {
|
||||
ForEach(LevelDisplayStyle.allCases) { style in
|
||||
Text(style.title).tag(style)
|
||||
}
|
||||
}
|
||||
.pickerStyle(.segmented)
|
||||
.padding(.top, 8)
|
||||
|
||||
switch displayStyle {
|
||||
case .bubble:
|
||||
LevelBubble(pitch: state.pitch, roll: state.roll)
|
||||
.frame(maxWidth: 320)
|
||||
case .vehicle:
|
||||
VehicleTiltView(pitch: state.pitch, roll: state.roll,
|
||||
style: device.vehicleGraphicStyle)
|
||||
}
|
||||
|
||||
if !isLive { disconnectedBanner }
|
||||
|
||||
adviceBanner
|
||||
|
||||
readings
|
||||
|
||||
if let best = assistant.best, let gain = assistant.improvementAtBest,
|
||||
let seconds = assistant.timeSinceBest {
|
||||
bestPointCard(best: best, gain: gain, seconds: seconds)
|
||||
}
|
||||
|
||||
wedgeSection
|
||||
|
||||
Button("Neu beginnen", systemImage: "arrow.counterclockwise") {
|
||||
assistant.reset()
|
||||
didAnnounceTarget = false
|
||||
}
|
||||
.buttonStyle(.bordered)
|
||||
.padding(.bottom, 24)
|
||||
Group {
|
||||
if isLandscape {
|
||||
landscapeLayout
|
||||
} else {
|
||||
portraitLayout
|
||||
}
|
||||
.padding(.horizontal)
|
||||
.frame(maxWidth: .infinity)
|
||||
}
|
||||
.background(Color(.systemGroupedBackground))
|
||||
.navigationTitle("Ausrichtungs-Assistent")
|
||||
@@ -96,10 +66,94 @@ struct AlignmentAssistantView: View {
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Layouts
|
||||
|
||||
private var portraitLayout: some View {
|
||||
ScrollView {
|
||||
VStack(spacing: 24) {
|
||||
picker.padding(.top, 8)
|
||||
|
||||
display
|
||||
|
||||
if !isLive { disconnectedBanner }
|
||||
|
||||
adviceBanner
|
||||
|
||||
readings
|
||||
|
||||
if let best = assistant.best, let gain = assistant.improvementAtBest,
|
||||
let seconds = assistant.timeSinceBest {
|
||||
bestPointCard(best: best, gain: gain, seconds: seconds)
|
||||
}
|
||||
|
||||
wedgeSection
|
||||
|
||||
resetButton
|
||||
.padding(.bottom, 24)
|
||||
}
|
||||
.padding(.horizontal)
|
||||
.frame(maxWidth: .infinity)
|
||||
}
|
||||
}
|
||||
|
||||
/// Anzeige links, alles zum Rangieren Nötige rechts – ohne Scrollen, denn
|
||||
/// im Querformat schaut man beiläufig hin, nicht in Ruhe. Die
|
||||
/// Bestpunkt-Karte und der ausführliche Verbindungs-Hinweis bleiben dafür
|
||||
/// dem Hochformat vorbehalten; die Keilhöhen bleiben in jedem Fall sichtbar.
|
||||
private var landscapeLayout: some View {
|
||||
HStack(alignment: .top, spacing: 16) {
|
||||
VStack(spacing: 8) {
|
||||
picker
|
||||
display
|
||||
Spacer(minLength: 0)
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
|
||||
VStack(spacing: 8) {
|
||||
if !isLive { compactDisconnectedBanner }
|
||||
adviceBanner
|
||||
readings
|
||||
wedgeSection
|
||||
resetButton
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
}
|
||||
.padding(12)
|
||||
}
|
||||
|
||||
// MARK: - Bausteine
|
||||
|
||||
private var isLive: Bool { bluetooth.linkStates[device.id] == .live }
|
||||
|
||||
private var picker: some View {
|
||||
Picker("Darstellung", selection: $displayStyle) {
|
||||
ForEach(LevelDisplayStyle.allCases) { style in
|
||||
Text(style.title).tag(style)
|
||||
}
|
||||
}
|
||||
.pickerStyle(.segmented)
|
||||
}
|
||||
|
||||
@ViewBuilder
|
||||
private var display: some View {
|
||||
switch displayStyle {
|
||||
case .bubble:
|
||||
LevelBubble(pitch: state.pitch, roll: state.roll)
|
||||
.frame(maxWidth: isLandscape ? 220 : 320, maxHeight: isLandscape ? 160 : .infinity)
|
||||
case .vehicle:
|
||||
VehicleTiltView(pitch: state.pitch, roll: state.roll,
|
||||
style: device.vehicleGraphicStyle, compact: isLandscape)
|
||||
}
|
||||
}
|
||||
|
||||
private var resetButton: some View {
|
||||
Button("Neu beginnen", systemImage: "arrow.counterclockwise") {
|
||||
assistant.reset()
|
||||
didAnnounceTarget = false
|
||||
}
|
||||
.buttonStyle(.bordered)
|
||||
}
|
||||
|
||||
/// Reisst die Verbindung beim Rangieren ab, stehen die Zahlen still. Ohne
|
||||
/// Hinweis sähe das aus, als hinge die App – man rangiert dann nach einem
|
||||
/// Wert, der längst nicht mehr gilt.
|
||||
@@ -121,40 +175,54 @@ struct AlignmentAssistantView: View {
|
||||
.background(Color.orange.opacity(0.15), in: .rect(cornerRadius: 16))
|
||||
}
|
||||
|
||||
/// Kurzform für Querformat: derselbe Hinweis in einer Zeile.
|
||||
private var compactDisconnectedBanner: some View {
|
||||
Label("Nicht verbunden – Anzeige steht still", systemImage: "antenna.radiowaves.left.and.right.slash")
|
||||
.font(.caption.weight(.medium))
|
||||
.foregroundStyle(.orange)
|
||||
.lineLimit(1)
|
||||
.minimumScaleFactor(0.8)
|
||||
.frame(maxWidth: .infinity, alignment: .leading)
|
||||
.padding(8)
|
||||
.background(Color.orange.opacity(0.15), in: .rect(cornerRadius: 10))
|
||||
}
|
||||
|
||||
private var adviceBanner: some View {
|
||||
HStack(spacing: 12) {
|
||||
Image(systemName: assistant.hasReachedTarget
|
||||
? "checkmark.circle.fill" : assistant.trend.symbol)
|
||||
.font(.title)
|
||||
.font(isLandscape ? .title2 : .title)
|
||||
.foregroundStyle(assistant.hasReachedTarget ? Color.green : Color.accentColor)
|
||||
Text(assistant.advice)
|
||||
.font(.title3.weight(.medium))
|
||||
.font(isLandscape ? .subheadline.weight(.medium) : .title3.weight(.medium))
|
||||
.frame(maxWidth: .infinity, alignment: .leading)
|
||||
}
|
||||
.padding()
|
||||
.padding(isLandscape ? 10 : 16)
|
||||
.background(assistant.hasReachedTarget ? Color.green.opacity(0.15)
|
||||
: Color(.secondarySystemGroupedBackground),
|
||||
in: .rect(cornerRadius: 16))
|
||||
}
|
||||
|
||||
private var readings: some View {
|
||||
HStack(spacing: 12) {
|
||||
HStack(spacing: isLandscape ? 8 : 12) {
|
||||
reading("Längs", LevelDirectionFormatting.pitchTile(state.pitch))
|
||||
reading("Quer", LevelDirectionFormatting.rollTile(state.roll))
|
||||
reading("Gesamt", LevelDirectionFormatting.magnitude(assistant.current?.deviation))
|
||||
if !isLandscape {
|
||||
reading("Gesamt", LevelDirectionFormatting.magnitude(assistant.current?.deviation))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private func reading(_ title: String, _ text: String) -> some View {
|
||||
VStack(spacing: 4) {
|
||||
VStack(spacing: isLandscape ? 1 : 4) {
|
||||
Text(text)
|
||||
.font(.title2.weight(.semibold).monospacedDigit())
|
||||
.font((isLandscape ? Font.callout : .title2).weight(.semibold).monospacedDigit())
|
||||
Text(title)
|
||||
.font(.caption)
|
||||
.font(.caption2)
|
||||
.foregroundStyle(.secondary)
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
.padding(.vertical, 12)
|
||||
.padding(.vertical, isLandscape ? 6 : 12)
|
||||
.background(Color(.secondarySystemGroupedBackground), in: .rect(cornerRadius: 12))
|
||||
}
|
||||
|
||||
@@ -188,23 +256,25 @@ struct AlignmentAssistantView: View {
|
||||
trackWidth: width, wheelbase: base)
|
||||
}()
|
||||
|
||||
VStack(alignment: .leading, spacing: 10) {
|
||||
VStack(alignment: .leading, spacing: isLandscape ? 6 : 10) {
|
||||
Label("Auffahrkeile", systemImage: "triangle.fill")
|
||||
.font(.headline)
|
||||
.font(isLandscape ? .subheadline.weight(.semibold) : .headline)
|
||||
|
||||
if profile?.trackWidth == nil || profile?.wheelbase == nil {
|
||||
Text("Für die Keilhöhe fehlen Spurweite und Radstand. Beides lässt "
|
||||
+ "sich beim Fahrzeug hinterlegen.")
|
||||
.font(.callout)
|
||||
.foregroundStyle(.secondary)
|
||||
} else if let lift, !lift.isNegligible {
|
||||
WheelLiftPlan(lift: lift)
|
||||
.frame(maxWidth: .infinity)
|
||||
|
||||
Text("Zentimeter unter das jeweilige Rad. Das höchststehende Rad "
|
||||
+ "bleibt liegen, die übrigen werden auf seine Höhe gebracht.")
|
||||
.font(.caption)
|
||||
.foregroundStyle(.secondary)
|
||||
} else if let lift, !lift.isNegligible {
|
||||
WheelLiftPlan(lift: lift, isCompact: isLandscape)
|
||||
.frame(maxWidth: .infinity)
|
||||
|
||||
if !isLandscape {
|
||||
Text("Zentimeter unter das jeweilige Rad. Das höchststehende Rad "
|
||||
+ "bleibt liegen, die übrigen werden auf seine Höhe gebracht.")
|
||||
.font(.caption)
|
||||
.foregroundStyle(.secondary)
|
||||
}
|
||||
} else {
|
||||
Text("Keine Keile nötig.")
|
||||
.font(.callout)
|
||||
@@ -212,7 +282,7 @@ struct AlignmentAssistantView: View {
|
||||
}
|
||||
}
|
||||
.frame(maxWidth: .infinity, alignment: .leading)
|
||||
.padding()
|
||||
.padding(isLandscape ? 10 : 16)
|
||||
.background(Color(.secondarySystemGroupedBackground), in: .rect(cornerRadius: 16))
|
||||
}
|
||||
|
||||
@@ -230,4 +300,3 @@ struct AlignmentAssistantView: View {
|
||||
#endif
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user