Fix picker label visibility on macOS in settings

Add visible labels for all pickers in settings on macOS by wrapping them
in HStack with Text labels and Spacer() for proper alignment.

Fixed pickers:
- BrowsingSettings: Startup section, Thumbnails quality, Player bar gestures
- PlayerControlsSettings: Action button labels
- PlayerSettings: Source, Inspector, Caption size/color/languages, Sidebar

All picker labels now consistently display with left-aligned text and
right-aligned picker controls on macOS.
This commit is contained in:
Arkadiusz Fal
2025-11-15 20:08:18 +01:00
parent 5758417293
commit 21da42f23b
3 changed files with 195 additions and 71 deletions

View File

@@ -145,11 +145,25 @@ struct BrowsingSettings: View {
}
func playerBarGesturePicker(_ label: String, selection: Binding<PlayerTapGestureAction>) -> some View {
Picker(label, selection: selection) {
ForEach(PlayerTapGestureAction.allCases, id: \.rawValue) { action in
Text(action.label.localized()).tag(action)
#if os(macOS)
HStack {
Text(label)
Spacer()
Picker(label, selection: selection) {
ForEach(PlayerTapGestureAction.allCases, id: \.rawValue) { action in
Text(action.label.localized()).tag(action)
}
}
.modifier(SettingsPickerModifier())
}
}
#else
Picker(label, selection: selection) {
ForEach(PlayerTapGestureAction.allCases, id: \.rawValue) { action in
Text(action.label.localized()).tag(action)
}
}
.modifier(SettingsPickerModifier())
#endif
}
var playerBarFooter: some View {
@@ -220,12 +234,25 @@ struct BrowsingSettings: View {
}
private var thumbnailsQualityPicker: some View {
Picker("Quality", selection: $thumbnailsQuality) {
ForEach(ThumbnailsQuality.allCases, id: \.self) { quality in
Text(quality.description)
#if os(macOS)
HStack {
Text("Quality")
Spacer()
Picker("Quality", selection: $thumbnailsQuality) {
ForEach(ThumbnailsQuality.allCases, id: \.self) { quality in
Text(quality.description)
}
}
.modifier(SettingsPickerModifier())
}
}
.modifier(SettingsPickerModifier())
#else
Picker("Quality", selection: $thumbnailsQuality) {
ForEach(ThumbnailsQuality.allCases, id: \.self) { quality in
Text(quality.description)
}
}
.modifier(SettingsPickerModifier())
#endif
}
private var visibleSectionsSettings: some View {
@@ -246,12 +273,25 @@ struct BrowsingSettings: View {
#if os(tvOS)
SettingsHeader(text: "Startup section".localized())
#endif
Picker("Startup section", selection: $startupSection) {
ForEach(StartupSection.allCases, id: \.rawValue) { section in
Text(section.label).tag(section)
#if os(macOS)
HStack {
Text("Startup section")
Spacer()
Picker("Startup section", selection: $startupSection) {
ForEach(StartupSection.allCases, id: \.rawValue) { section in
Text(section.label).tag(section)
}
}
.modifier(SettingsPickerModifier())
}
}
.modifier(SettingsPickerModifier())
#else
Picker("Startup section", selection: $startupSection) {
ForEach(StartupSection.allCases, id: \.rawValue) { section in
Text(section.label).tag(section)
}
}
.modifier(SettingsPickerModifier())
#endif
}
}

View File

@@ -132,12 +132,25 @@ struct PlayerControlsSettings: View {
}
Section {
Picker("Action button labels", selection: $playerActionsButtonLabelStyle) {
ForEach(ButtonLabelStyle.allCases, id: \.rawValue) { style in
Text(style.description).tag(style)
#if os(macOS)
HStack {
Text("Action button labels")
Spacer()
Picker("Action button labels", selection: $playerActionsButtonLabelStyle) {
ForEach(ButtonLabelStyle.allCases, id: \.rawValue) { style in
Text(style.description).tag(style)
}
}
.modifier(SettingsPickerModifier())
}
}
.modifier(SettingsPickerModifier())
#else
Picker("Action button labels", selection: $playerActionsButtonLabelStyle) {
ForEach(ButtonLabelStyle.allCases, id: \.rawValue) { style in
Text(style.description).tag(style)
}
}
.modifier(SettingsPickerModifier())
#endif
}
}

View File

@@ -110,9 +110,9 @@ struct PlayerSettings: View {
#if os(macOS)
HStack {
Text("Inspector")
Spacer()
inspectorVisibilityPicker
}
.padding(.leading, 20)
#else
inspectorVisibilityPicker
#endif
@@ -239,29 +239,51 @@ struct PlayerSettings: View {
}
private var sourcePicker: some View {
Picker("Source", selection: $playerInstanceID) {
Text("Instance of current account").tag(String?.none)
#if os(macOS)
HStack {
Text("Source")
Spacer()
Picker("Source", selection: $playerInstanceID) {
Text("Instance of current account").tag(String?.none)
ForEach(instances) { instance in
Text(instance.description).tag(Optional(instance.id))
ForEach(instances) { instance in
Text(instance.description).tag(Optional(instance.id))
}
}
.modifier(SettingsPickerModifier())
}
}
.modifier(SettingsPickerModifier())
#else
Picker("Source", selection: $playerInstanceID) {
Text("Instance of current account").tag(String?.none)
ForEach(instances) { instance in
Text(instance.description).tag(Optional(instance.id))
}
}
.modifier(SettingsPickerModifier())
#endif
}
private var sidebarPicker: some View {
Picker("Sidebar", selection: $playerSidebar) {
#if os(macOS)
Text("Show sidebar").tag(PlayerSidebarSetting.always)
#endif
#if os(iOS)
Text("Show sidebar when space permits").tag(PlayerSidebarSetting.whenFits)
#endif
Text("Hide sidebar").tag(PlayerSidebarSetting.never)
}
.modifier(SettingsPickerModifier())
#if os(macOS)
HStack {
Text("Sidebar")
Spacer()
Picker("Sidebar", selection: $playerSidebar) {
Text("Show sidebar").tag(PlayerSidebarSetting.always)
Text("Hide sidebar").tag(PlayerSidebarSetting.never)
}
.modifier(SettingsPickerModifier())
}
#else
Picker("Sidebar", selection: $playerSidebar) {
#if os(iOS)
Text("Show sidebar when space permits").tag(PlayerSidebarSetting.whenFits)
#endif
Text("Hide sidebar").tag(PlayerSidebarSetting.never)
}
.modifier(SettingsPickerModifier())
#endif
}
private var commentsToggle: some View {
@@ -363,56 +385,105 @@ struct PlayerSettings: View {
}
private var captionsFontScaleSizePicker: some View {
Picker("Size", selection: $captionsFontScaleSize) {
Text("Small").tag(String("0.725"))
Text("Medium").tag(String("1.0"))
Text("Large").tag(String("1.5"))
}
.onChange(of: captionsFontScaleSize) { _ in
PlayerModel.shared.mpvBackend.client.setSubFontSize(scaleSize: captionsFontScaleSize)
}
#if os(macOS)
.labelsHidden()
HStack {
Text("Size")
Spacer()
Picker("Size", selection: $captionsFontScaleSize) {
Text("Small").tag(String("0.725"))
Text("Medium").tag(String("1.0"))
Text("Large").tag(String("1.5"))
}
.onChange(of: captionsFontScaleSize) { _ in
PlayerModel.shared.mpvBackend.client.setSubFontSize(scaleSize: captionsFontScaleSize)
}
.labelsHidden()
}
#else
Picker("Size", selection: $captionsFontScaleSize) {
Text("Small").tag(String("0.725"))
Text("Medium").tag(String("1.0"))
Text("Large").tag(String("1.5"))
}
.onChange(of: captionsFontScaleSize) { _ in
PlayerModel.shared.mpvBackend.client.setSubFontSize(scaleSize: captionsFontScaleSize)
}
#endif
}
private var captionsFontColorPicker: some View {
Picker("Color", selection: $captionsFontColor) {
Text("White").tag(String("#FFFFFF"))
Text("Yellow").tag(String("#FFFF00"))
Text("Red").tag(String("#FF0000"))
Text("Orange").tag(String("#FFA500"))
Text("Green").tag(String("#008000"))
Text("Blue").tag(String("#0000FF"))
}
.onChange(of: captionsFontColor) { _ in
PlayerModel.shared.mpvBackend.client.setSubFontColor(color: captionsFontColor)
}
#if os(macOS)
.labelsHidden()
HStack {
Text("Color")
Spacer()
Picker("Color", selection: $captionsFontColor) {
Text("White").tag(String("#FFFFFF"))
Text("Yellow").tag(String("#FFFF00"))
Text("Red").tag(String("#FF0000"))
Text("Orange").tag(String("#FFA500"))
Text("Green").tag(String("#008000"))
Text("Blue").tag(String("#0000FF"))
}
.onChange(of: captionsFontColor) { _ in
PlayerModel.shared.mpvBackend.client.setSubFontColor(color: captionsFontColor)
}
.labelsHidden()
}
#else
Picker("Color", selection: $captionsFontColor) {
Text("White").tag(String("#FFFFFF"))
Text("Yellow").tag(String("#FFFF00"))
Text("Red").tag(String("#FF0000"))
Text("Orange").tag(String("#FFA500"))
Text("Green").tag(String("#008000"))
Text("Blue").tag(String("#0000FF"))
}
.onChange(of: captionsFontColor) { _ in
PlayerModel.shared.mpvBackend.client.setSubFontColor(color: captionsFontColor)
}
#endif
}
#if !os(tvOS)
private var captionDefaultLanguagePicker: some View {
Picker("Default language", selection: $captionsDefaultLanguageCode) {
ForEach(LanguageCodes.allCases, id: \.self) { language in
Text("\(language.description.capitalized) (\(language.rawValue))").tag(language.rawValue)
}
}
#if os(macOS)
.labelsHidden()
HStack {
Text("Default language")
Spacer()
Picker("Default language", selection: $captionsDefaultLanguageCode) {
ForEach(LanguageCodes.allCases, id: \.self) { language in
Text("\(language.description.capitalized) (\(language.rawValue))").tag(language.rawValue)
}
}
.labelsHidden()
}
#else
Picker("Default language", selection: $captionsDefaultLanguageCode) {
ForEach(LanguageCodes.allCases, id: \.self) { language in
Text("\(language.description.capitalized) (\(language.rawValue))").tag(language.rawValue)
}
}
#endif
}
private var captionFallbackLanguagePicker: some View {
Picker("Fallback language", selection: $captionsFallbackLanguageCode) {
ForEach(LanguageCodes.allCases, id: \.self) { language in
Text("\(language.description.capitalized) (\(language.rawValue))").tag(language.rawValue)
}
}
#if os(macOS)
.labelsHidden()
HStack {
Text("Fallback language")
Spacer()
Picker("Fallback language", selection: $captionsFallbackLanguageCode) {
ForEach(LanguageCodes.allCases, id: \.self) { language in
Text("\(language.description.capitalized) (\(language.rawValue))").tag(language.rawValue)
}
}
.labelsHidden()
}
#else
Picker("Fallback language", selection: $captionsFallbackLanguageCode) {
ForEach(LanguageCodes.allCases, id: \.self) { language in
Text("\(language.description.capitalized) (\(language.rawValue))").tag(language.rawValue)
}
}
#endif
}
#else