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 {
#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,6 +234,10 @@ struct BrowsingSettings: View {
}
private var thumbnailsQualityPicker: some View {
#if os(macOS)
HStack {
Text("Quality")
Spacer()
Picker("Quality", selection: $thumbnailsQuality) {
ForEach(ThumbnailsQuality.allCases, id: \.self) { quality in
Text(quality.description)
@@ -227,6 +245,15 @@ struct BrowsingSettings: View {
}
.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 {
Section(header: SettingsHeader(text: "Sections".localized())) {
@@ -246,6 +273,10 @@ struct BrowsingSettings: View {
#if os(tvOS)
SettingsHeader(text: "Startup section".localized())
#endif
#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)
@@ -253,6 +284,15 @@ struct BrowsingSettings: View {
}
.modifier(SettingsPickerModifier())
}
#else
Picker("Startup section", selection: $startupSection) {
ForEach(StartupSection.allCases, id: \.rawValue) { section in
Text(section.label).tag(section)
}
}
.modifier(SettingsPickerModifier())
#endif
}
}
private var showSearchSuggestionsToggle: some View {

View File

@@ -132,6 +132,10 @@ struct PlayerControlsSettings: View {
}
Section {
#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)
@@ -139,6 +143,15 @@ struct PlayerControlsSettings: View {
}
.modifier(SettingsPickerModifier())
}
#else
Picker("Action button labels", selection: $playerActionsButtonLabelStyle) {
ForEach(ButtonLabelStyle.allCases, id: \.rawValue) { style in
Text(style.description).tag(style)
}
}
.modifier(SettingsPickerModifier())
#endif
}
}
private var systemControlsCommandsPicker: some View {

View File

@@ -110,9 +110,9 @@ struct PlayerSettings: View {
#if os(macOS)
HStack {
Text("Inspector")
Spacer()
inspectorVisibilityPicker
}
.padding(.leading, 20)
#else
inspectorVisibilityPicker
#endif
@@ -239,6 +239,10 @@ struct PlayerSettings: View {
}
private var sourcePicker: some View {
#if os(macOS)
HStack {
Text("Source")
Spacer()
Picker("Source", selection: $playerInstanceID) {
Text("Instance of current account").tag(String?.none)
@@ -248,21 +252,39 @@ struct PlayerSettings: View {
}
.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)
HStack {
Text("Sidebar")
Spacer()
Picker("Sidebar", selection: $playerSidebar) {
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())
}
#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 {
Toggle("Show comments", isOn: $showComments)
@@ -363,6 +385,10 @@ struct PlayerSettings: View {
}
private var captionsFontScaleSizePicker: some View {
#if os(macOS)
HStack {
Text("Size")
Spacer()
Picker("Size", selection: $captionsFontScaleSize) {
Text("Small").tag(String("0.725"))
Text("Medium").tag(String("1.0"))
@@ -371,12 +397,25 @@ struct PlayerSettings: View {
.onChange(of: captionsFontScaleSize) { _ in
PlayerModel.shared.mpvBackend.client.setSubFontSize(scaleSize: captionsFontScaleSize)
}
#if os(macOS)
.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 {
#if os(macOS)
HStack {
Text("Color")
Spacer()
Picker("Color", selection: $captionsFontColor) {
Text("White").tag(String("#FFFFFF"))
Text("Yellow").tag(String("#FFFF00"))
@@ -388,31 +427,63 @@ struct PlayerSettings: View {
.onChange(of: captionsFontColor) { _ in
PlayerModel.shared.mpvBackend.client.setSubFontColor(color: captionsFontColor)
}
#if os(macOS)
.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 {
#if os(macOS)
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)
}
}
#if os(macOS)
.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 {
#if os(macOS)
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)
}
}
#if os(macOS)
.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