Add gas-pump icon left of title + coloured fuel-type tab icons (Unleaded green, Premium blue, Diesel grey)
This commit is contained in:
@@ -47,7 +47,12 @@ struct StationsView: View {
|
||||
Section("Fuel type") {
|
||||
Picker("Fuel type", selection: $selectedFuel) {
|
||||
ForEach(FuelType.allCases) { fuel in
|
||||
Text(fuel.displayName).tag(fuel)
|
||||
HStack(spacing: 4) {
|
||||
Image(systemName: "fuelpump.fill")
|
||||
.foregroundStyle(fuel.tintColor)
|
||||
Text(fuel.shortName)
|
||||
}
|
||||
.tag(fuel)
|
||||
}
|
||||
}
|
||||
.pickerStyle(.segmented)
|
||||
@@ -180,7 +185,40 @@ struct StationsView: View {
|
||||
// New fetch or filter switch → back to the first page.
|
||||
visibleCount = pageSize
|
||||
}
|
||||
.toolbar {
|
||||
ToolbarItem(placement: .principal) {
|
||||
HStack(spacing: 6) {
|
||||
Image(systemName: "fuelpump.fill")
|
||||
.foregroundStyle(selectedFuel.tintColor)
|
||||
Text("FuelBoard")
|
||||
.font(.headline)
|
||||
}
|
||||
}
|
||||
}
|
||||
.navigationTitle("FuelBoard")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Fuel-type iconography (app target only — FuelStore.swift is Foundation-only)
|
||||
|
||||
extension FuelType {
|
||||
/// Short segment label ("Unleaded" / "Premium" / "Diesel") for the picker.
|
||||
var shortName: String {
|
||||
switch self {
|
||||
case .e10: return "Unleaded"
|
||||
case .e5: return "Premium"
|
||||
case .diesel: return "Diesel"
|
||||
}
|
||||
}
|
||||
|
||||
/// Pump-handle colour convention (UK): green = unleaded, blue = premium,
|
||||
/// dark grey = diesel. Used for the fuel-type tab icons and the title icon.
|
||||
var tintColor: Color {
|
||||
switch self {
|
||||
case .e10: return .green
|
||||
case .e5: return .blue
|
||||
case .diesel: return Color(red: 0.35, green: 0.38, blue: 0.42)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user