Small spreadsheet UI updates

This commit is contained in:
2026-04-05 00:27:29 -05:00
parent 46e61bae00
commit ca8bf48810

View File

@@ -44,25 +44,41 @@ struct SpreadsheetView: View {
}, },
] ]
private static let headerHeight: CGFloat = 48 private static let topBarHeight: CGFloat = 52
private static let headerHeight: CGFloat = 44
var body: some View { var body: some View {
VStack(spacing: 0) { ZStack(alignment: .top) {
// Top bar Color(.systemBackground).ignoresSafeArea()
HStack(spacing: 4) {
Button { // Full-screen table padded down so it starts below the floating bar
restorePortrait() GeometryReader { proxy in
onDismiss() ScrollView(.horizontal, showsIndicators: true) {
} label: { VStack(alignment: .leading, spacing: 0) {
Image(systemName: "xmark.circle.fill") columnHeaderRow
.font(.title2) Divider()
.foregroundStyle(.secondary) ScrollView(.vertical, showsIndicators: true) {
LazyVStack(spacing: 0) {
ForEach(Array(chemicals.enumerated()), id: \.element.id) { idx, chemical in
dataRow(chemical: chemical, index: idx)
Divider()
} }
}
}
.frame(height: max(0, proxy.size.height - Self.topBarHeight - Self.headerHeight - 1))
}
}
.padding(.top, Self.topBarHeight)
}
// Floating Liquid Glass top bar
HStack(spacing: 0) {
closeButton
.padding(.leading, 12) .padding(.leading, 12)
Text("Inventory Spreadsheet") Text("Inventory Spreadsheet")
.font(.headline) .font(.headline)
.padding(.leading, 4) .padding(.leading, 8)
Spacer() Spacer()
@@ -71,16 +87,22 @@ struct SpreadsheetView: View {
.foregroundStyle(.secondary) .foregroundStyle(.secondary)
.padding(.trailing, 16) .padding(.trailing, 16)
} }
.frame(height: 50) .frame(height: Self.topBarHeight)
.background(Color(.systemBackground)) .background(.regularMaterial)
}
.onAppear {
DispatchQueue.main.asyncAfter(deadline: .now() + 0.15) {
setLandscape()
}
}
.onDisappear {
restorePortrait()
}
}
Divider() // MARK: - Subviews
// Table private var columnHeaderRow: some View {
GeometryReader { proxy in
ScrollView(.horizontal, showsIndicators: true) {
VStack(alignment: .leading, spacing: 0) {
// Sticky header row
HStack(spacing: 0) { HStack(spacing: 0) {
ForEach(Array(Self.columnDefs.enumerated()), id: \.offset) { i, col in ForEach(Array(Self.columnDefs.enumerated()), id: \.offset) { i, col in
Text(col.label) Text(col.label)
@@ -88,67 +110,71 @@ struct SpreadsheetView: View {
.foregroundStyle(.white) .foregroundStyle(.white)
.lineLimit(2) .lineLimit(2)
.multilineTextAlignment(.center) .multilineTextAlignment(.center)
.frame(width: col.width, height: Self.headerHeight) // 📍 Move padding INSIDE
.padding(.horizontal, 4) .padding(.horizontal, 4)
// 📍 Frame goes OUTSIDE to lock the total width safely
.frame(width: col.width, height: Self.headerHeight)
if i < Self.columnDefs.count - 1 { if i < Self.columnDefs.count - 1 {
Rectangle() Rectangle()
.fill(Color.white.opacity(0.35)) .fill(Color.white.opacity(0.3))
.frame(width: 1, height: Self.headerHeight) .frame(width: 1, height: Self.headerHeight)
} }
} }
} }
.background(Color.accentColor) .background(Color.accentColor)
}
Divider() private func dataRow(chemical: Chemical, index: Int) -> some View {
// Scrollable data rows
ScrollView(.vertical, showsIndicators: true) {
LazyVStack(spacing: 0) {
ForEach(Array(chemicals.enumerated()), id: \.element.id) { idx, chemical in
HStack(spacing: 0) { HStack(spacing: 0) {
ForEach(Array(Self.columnDefs.enumerated()), id: \.offset) { i, col in ForEach(Array(Self.columnDefs.enumerated()), id: \.offset) { i, col in
Text(col.value(chemical)) Text(col.value(chemical))
.font(.caption) .font(.caption)
.lineLimit(1) .lineLimit(1)
.frame(width: col.width, alignment: .leading) // 📍 Move padding INSIDE
.padding(.vertical, 7) .padding(.vertical, 7)
.padding(.horizontal, 6) .padding(.horizontal, 6)
.background(idx % 2 == 0 // 📍 Frame goes OUTSIDE to lock the total width safely
.frame(width: col.width, alignment: .leading)
.background(index % 2 == 0
? Color(.systemBackground) ? Color(.systemBackground)
: Color(.systemGray6)) : Color(.systemGroupedBackground))
if i < Self.columnDefs.count - 1 { if i < Self.columnDefs.count - 1 {
Rectangle() Rectangle()
.fill(Color(.separator)) .fill(Color(.separator))
.frame(width: 0.5) // 📍 Changed to 1px to perfectly match the header divider!
.frame(height: 30) .frame(width: 1, height: 30)
} }
} }
} }
Divider()
}
}
}
// Subtract header height and the 1-pt divider
.frame(height: proxy.size.height - Self.headerHeight - 1)
}
}
}
}
.onAppear {
// Slight delay so the full-screen cover animation finishes before rotating
DispatchQueue.main.asyncAfter(deadline: .now() + 0.15) {
setLandscape()
}
}
.onDisappear {
// Safety net in case something else dismisses this view
restorePortrait()
}
} }
// MARK: - Orientation helpers /// Close button: Liquid Glass on iOS 26+, plain icon on older releases.
@ViewBuilder
private var closeButton: some View {
if #available(iOS 26.0, *) {
Button {
restorePortrait()
onDismiss()
} label: {
Image(systemName: "xmark")
.font(.system(size: 14, weight: .bold))
}
.buttonStyle(.glass)
} else {
Button {
restorePortrait()
onDismiss()
} label: {
Image(systemName: "xmark.circle.fill")
.font(.title2)
.foregroundStyle(.secondary)
}
}
}
// MARK: - Orientation
private func setLandscape() { private func setLandscape() {
AppDelegate.orientationLock = .landscape AppDelegate.orientationLock = .landscape