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") {
|
Section("Fuel type") {
|
||||||
Picker("Fuel type", selection: $selectedFuel) {
|
Picker("Fuel type", selection: $selectedFuel) {
|
||||||
ForEach(FuelType.allCases) { fuel in
|
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)
|
.pickerStyle(.segmented)
|
||||||
@@ -180,7 +185,40 @@ 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
|
||||||
}
|
}
|
||||||
|
.toolbar {
|
||||||
|
ToolbarItem(placement: .principal) {
|
||||||
|
HStack(spacing: 6) {
|
||||||
|
Image(systemName: "fuelpump.fill")
|
||||||
|
.foregroundStyle(selectedFuel.tintColor)
|
||||||
|
Text("FuelBoard")
|
||||||
|
.font(.headline)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
.navigationTitle("FuelBoard")
|
.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