Nav bar: show compact gas-pump+title only when scrolled (large title at rest); drop icons from fuel picker
This commit is contained in:
@@ -22,10 +22,23 @@ struct StationsView: View {
|
|||||||
/// which station is "best".
|
/// which station is "best".
|
||||||
@State private var pageSize = 10
|
@State private var pageSize = 10
|
||||||
@State private var visibleCount = 10
|
@State private var visibleCount = 10
|
||||||
|
/// True once the list has scrolled — drives the compact gas-pump+title bar
|
||||||
|
/// in the nav bar (large title is shown at rest, bar only after scrolling).
|
||||||
|
@State private var isScrolled = false
|
||||||
|
|
||||||
var body: some View {
|
var body: some View {
|
||||||
NavigationStack {
|
NavigationStack {
|
||||||
List {
|
List {
|
||||||
|
GeometryReader { proxy in
|
||||||
|
Color.clear.preference(
|
||||||
|
key: ScrollOffsetKey.self,
|
||||||
|
value: proxy.frame(in: .named("stationsScroll")).minY
|
||||||
|
)
|
||||||
|
}
|
||||||
|
.frame(height: 0)
|
||||||
|
.listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
|
||||||
|
.listRowSeparator(.hidden)
|
||||||
|
|
||||||
Section {
|
Section {
|
||||||
if let location {
|
if let location {
|
||||||
if sortMode == .closest {
|
if sortMode == .closest {
|
||||||
@@ -47,12 +60,7 @@ struct StationsView: View {
|
|||||||
Section("Fuel type") {
|
Section("Fuel type") {
|
||||||
Picker("Fuel type", selection: $selectedFuel) {
|
Picker("Fuel type", selection: $selectedFuel) {
|
||||||
ForEach(FuelType.allCases) { fuel in
|
ForEach(FuelType.allCases) { fuel in
|
||||||
HStack(spacing: 4) {
|
Text(fuel.shortName).tag(fuel)
|
||||||
Image(systemName: "fuelpump.fill")
|
|
||||||
.foregroundStyle(fuel.tintColor)
|
|
||||||
Text(fuel.shortName)
|
|
||||||
}
|
|
||||||
.tag(fuel)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.pickerStyle(.segmented)
|
.pickerStyle(.segmented)
|
||||||
@@ -185,13 +193,20 @@ struct StationsView: View {
|
|||||||
// New fetch or filter switch → back to the first page.
|
// New fetch or filter switch → back to the first page.
|
||||||
visibleCount = pageSize
|
visibleCount = pageSize
|
||||||
}
|
}
|
||||||
|
.coordinateSpace(name: "stationsScroll")
|
||||||
|
.onPreferenceChange(ScrollOffsetKey.self) { minY in
|
||||||
|
isScrolled = minY < 0
|
||||||
|
}
|
||||||
.toolbar {
|
.toolbar {
|
||||||
ToolbarItem(placement: .principal) {
|
ToolbarItem(placement: .principal) {
|
||||||
HStack(spacing: 6) {
|
if isScrolled {
|
||||||
Image(systemName: "fuelpump.fill")
|
HStack(spacing: 6) {
|
||||||
.foregroundStyle(selectedFuel.tintColor)
|
Image(systemName: "fuelpump.fill")
|
||||||
Text("FuelBoard")
|
.foregroundStyle(selectedFuel.tintColor)
|
||||||
.font(.headline)
|
Text("FuelBoard")
|
||||||
|
.font(.headline)
|
||||||
|
}
|
||||||
|
.transition(.opacity)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -202,6 +217,15 @@ struct StationsView: View {
|
|||||||
|
|
||||||
// MARK: - Fuel-type iconography (app target only — FuelStore.swift is Foundation-only)
|
// MARK: - Fuel-type iconography (app target only — FuelStore.swift is Foundation-only)
|
||||||
|
|
||||||
|
/// Scroll offset preference — the zero-height row at the top of the List
|
||||||
|
/// reports its position so we know when the large title has collapsed.
|
||||||
|
private struct ScrollOffsetKey: PreferenceKey {
|
||||||
|
static var defaultValue: CGFloat = 0
|
||||||
|
static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
|
||||||
|
value = nextValue()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
extension FuelType {
|
extension FuelType {
|
||||||
/// Short segment label ("Unleaded" / "Premium" / "Diesel") for the picker.
|
/// Short segment label ("Unleaded" / "Premium" / "Diesel") for the picker.
|
||||||
var shortName: String {
|
var shortName: String {
|
||||||
|
|||||||
Reference in New Issue
Block a user