Add gas-pump icon left of title + coloured fuel-type tab icons (Unleaded green, Premium blue, Diesel grey)

This commit is contained in:
FuelBoard Contributor
2026-08-11 21:36:28 +01:00
parent c1edd4d52d
commit 39b310d68d
+39 -1
View File
@@ -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)
}
}
}