macos: Change zone picker to icon button + popover The previous label + listbox changes its width depends on available zone names. In addition to that, there is no enough space for the upcoming output control button.

Changes

2 changed files (+34/-7)

• macos/Plac/Localizable.xcstrings
  • @@ -504,7 +504,7 @@ }
    } } }, - "PlaybackBar.ZonePicker" : { + "PlaybackBar.ZonePicker.Label" : { "comment" : "A label for zone picker.", "localizations" : { "en" : {
  • @@ -517,6 +517,22 @@ "ja" : {
    "stringUnit" : { "state" : "translated", "value" : "ゾーン" + } + } + } + }, + "PlaybackBar.ZonePicker.Title" : { + "localizations" : { + "en" : { + "stringUnit" : { + "state" : "translated", + "value" : "Zones" + } + }, + "ja" : { + "stringUnit" : { + "state" : "translated", + "value" : "ゾーン一覧" } } }
• macos/Plac/Views/PlaybackBar.swift
  • @@ -22,6 +22,7 @@ struct PlaybackBar: View {
    @Environment(ZoneDataModel.self) var model: ZoneDataModel @State private var isPerformingAction = false + @State private var isZonePickerVisible = false private var zone: TransportService.Zone? { model.zone
  • @@ -180,20 +181,30 @@ Spacer()
    } if model.zones.count > 0 && zone != nil { - Picker(selection: $model.zone) { - ForEach(model.zones) { (zone: TransportService.Zone) in - Text(zone.displayName).tag(zone) - } + Button { + isZonePickerVisible = true } label: { Label { Text( - "PlaybackBar.ZonePicker", + "PlaybackBar.ZonePicker.Label", comment: "A label for zone picker." ) } icon: { - Image(systemName: "hifispeaker") + Image(systemName: "square.2.layers.3d.top.filled") } .labelStyle(.iconOnly) + } + .help(Text("PlaybackBar.ZonePicker.Label")) + .popover(isPresented: $isZonePickerVisible) { + List(selection: $model.zone) { + Section { + ForEach(model.zones) { (zone: TransportService.Zone) in + Text(zone.displayName).tag(zone) + } + } header: { + Text("PlaybackBar.ZonePicker.Title") + } + } } .scaledToFit() }