UI: Convert the various options for LED into a popup window similar to motion & rumble config.

src/Ryujinx/Assets/locales.json

@@ -7623,7 +7623,7 @@
       }
     },
     {
-      "ID": "ControllerSettingsLedColor",
+      "ID": "ControllerSettingsLed",
       "Translations": {
         "ar_SA": "",
         "de_DE": "",
@@ -7697,6 +7697,31 @@
         "zh_TW": ""
       }
     },
+    {
+      "ID": "ControllerSettingsLedColor",
+      "Translations": {
+        "ar_SA": "",
+        "de_DE": "",
+        "el_GR": "",
+        "en_US": "Color",
+        "es_ES": "",
+        "fr_FR": "",
+        "he_IL": "",
+        "it_IT": "",
+        "ja_JP": "",
+        "ko_KR": "",
+        "no_NO": "",
+        "pl_PL": "",
+        "pt_BR": "",
+        "ru_RU": "",
+        "sv_SE": "",
+        "th_TH": "",
+        "tr_TR": "",
+        "uk_UA": "",
+        "zh_CN": "",
+        "zh_TW": ""
+      }
+    },
     {
       "ID": "ControllerSettingsSave",
       "Translations": {
@@ -18897,6 +18922,31 @@
         "zh_TW": "震動設定"
       }
     },
+    {
+      "ID": "ControllerLedTitle",
+      "Translations": {
+        "ar_SA": "",
+        "de_DE": "",
+        "el_GR": "",
+        "en_US": "LED Settings",
+        "es_ES": "",
+        "fr_FR": "",
+        "he_IL": "",
+        "it_IT": "",
+        "ja_JP": "",
+        "ko_KR": "",
+        "no_NO": "",
+        "pl_PL": "",
+        "pt_BR": "",
+        "ru_RU": "",
+        "sv_SE": "",
+        "th_TH": "",
+        "tr_TR": "",
+        "uk_UA": "",
+        "zh_CN": "",
+        "zh_TW": ""
+      }
+    },
     {
       "ID": "SettingsSelectThemeFileDialogTitle",
       "Translations": {

src/Ryujinx/UI/ViewModels/Input/ControllerInputViewModel.cs

@@ -5,6 +5,7 @@ using FluentAvalonia.UI.Controls;
 using Ryujinx.Ava.UI.Helpers;
 using Ryujinx.Ava.UI.Models.Input;
 using Ryujinx.Ava.UI.Views.Input;
+using Ryujinx.UI.Views.Input;
 
 namespace Ryujinx.Ava.UI.ViewModels.Input
 {
@@ -59,16 +60,11 @@ namespace Ryujinx.Ava.UI.ViewModels.Input
         {
             await RumbleInputView.Show(this);
         }
-
-        public RelayCommand LedDisabledChanged => Commands.Create(() =>
+        
+        public async void ShowLedConfig()
         {
-            if (!Config.EnableLedChanging) return;
-
-            if (Config.TurnOffLed)
-                ParentModel.SelectedGamepad.ClearLed();
-            else
-                ParentModel.SelectedGamepad.SetLed(Config.LedColor.ToUInt32());
-        });
+            await LedInputView.Show(this);
+        }
 
         public void OnParentModelChanged()
         {

src/Ryujinx/UI/ViewModels/Input/LedInputViewModel.cs

@@ -0,0 +1,53 @@
+using Avalonia.Media;
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
+using Ryujinx.Ava.UI.Helpers;
+
+namespace Ryujinx.Ava.UI.ViewModels.Input
+{
+    public partial class LedInputViewModel : BaseModel
+    {
+        public required InputViewModel ParentModel { get; init; }
+        
+        public RelayCommand LedDisabledChanged => Commands.Create(() =>
+        {
+            if (!EnableLedChanging) return;
+
+            if (TurnOffLed)
+                ParentModel.SelectedGamepad.ClearLed();
+            else
+                ParentModel.SelectedGamepad.SetLed(LedColor.ToUInt32());
+        });
+        
+        [ObservableProperty] private bool _enableLedChanging;
+        [ObservableProperty] private Color _ledColor;
+        
+        public bool ShowLedColorPicker => !TurnOffLed && !UseRainbowLed;
+        
+        private bool _turnOffLed;
+        
+        public bool TurnOffLed
+        {
+            get => _turnOffLed;
+            set
+            {
+                _turnOffLed = value;
+                OnPropertyChanged();
+                OnPropertyChanged(nameof(ShowLedColorPicker));
+            }
+        }
+        
+        private bool _useRainbowLed;
+        
+        public bool UseRainbowLed
+        {
+            get => _useRainbowLed;
+            set
+            {
+                _useRainbowLed = value;
+                OnPropertyChanged();
+                OnPropertyChanged(nameof(ShowLedColorPicker));
+            }
+        }
+    }
+}

src/Ryujinx/UI/Views/Input/ControllerInputView.axaml

@@ -495,8 +495,6 @@
                         Margin="0,-1,0,0">
                         <Grid IsVisible="{Binding ParentModel.HasLed}">
                             <Grid.ColumnDefinitions>
-                                <ColumnDefinition Width="Auto" />
-                                <ColumnDefinition Width="*" />
                                 <ColumnDefinition Width="*" />
                                 <ColumnDefinition Width="Auto" />
                             </Grid.ColumnDefinitions>
@@ -505,39 +503,14 @@
                                 MinWidth="0"
                                 Grid.Column="0"
                                 IsChecked="{Binding Config.EnableLedChanging, Mode=TwoWay}">
-                                <TextBlock Text="{ext:Locale ControllerSettingsLedColor}" />
+                                <TextBlock Text="{ext:Locale ControllerSettingsLed}" />
                             </CheckBox>
-                            <CheckBox
-                                Margin="5, 10, 5, 10"
-                                MinWidth="0"
+                            <Button
+                                Margin="10"
                                 Grid.Column="1"
-                                IsVisible="{Binding ParentModel.CanClearLed}"
-                                IsChecked="{Binding Config.TurnOffLed, Mode=TwoWay}"
-                                Command="{Binding LedDisabledChanged}">
-                                <TextBlock Text="{ext:Locale ControllerSettingsLedColorDisable}" />
-                            </CheckBox>
-                            <CheckBox
-                                Margin="5, 10 5,10"
-                                MinWidth="0"
-                                Grid.Column="2"
-                                IsEnabled="{Binding !Config.TurnOffLed}"
-                                IsChecked="{Binding Config.UseRainbowLed, Mode=TwoWay}">
-                                <TextBlock Text="{ext:Locale ControllerSettingsLedColorRainbow}" />
-                            </CheckBox>
-                            <ui:ColorPickerButton 
-                                Grid.Column="3"
-                                IsEnabled="{Binding Config.ShowLedColorPicker}"
-                                Margin="5, 10, 10, 10"
-                                IsMoreButtonVisible="False"
-                                UseColorPalette="False"
-                                UseColorTriangle="False"
-                                UseColorWheel="False"
-                                ShowAcceptDismissButtons="False"
-                                IsAlphaEnabled="False"
-                                AttachedToVisualTree="ColorPickerButton_OnAttachedToVisualTree"
-                                ColorChanged="ColorPickerButton_OnColorChanged"
-                                Color="{Binding Config.LedColor, Mode=TwoWay}">
-                            </ui:ColorPickerButton>
+                                Command="{Binding ShowLedConfig}">
+                                <TextBlock Text="{ext:Locale ControllerSettingsConfigureGeneral}" />
+                            </Button>
                         </Grid>
                     </Border>
                 </StackPanel>

src/Ryujinx/UI/Views/Input/ControllerInputView.axaml.cs

@@ -6,12 +6,10 @@ using Avalonia.Interactivity;
 using Avalonia.LogicalTree;
 using FluentAvalonia.UI.Controls;
 using Ryujinx.Ava.UI.Helpers;
-using Ryujinx.Ava.UI.Models;
 using Ryujinx.Ava.UI.ViewModels.Input;
 using Ryujinx.Common.Configuration.Hid.Controller;
 using Ryujinx.Input;
 using Ryujinx.Input.Assigner;
-using System.Linq;
 using Button = Ryujinx.Input.Button;
 using StickInputId = Ryujinx.Common.Configuration.Hid.Controller.StickInputId;
 
@@ -246,24 +244,5 @@ namespace Ryujinx.Ava.UI.Views.Input
             _currentAssigner?.Cancel();
             _currentAssigner = null;
         }
-
-        private void ColorPickerButton_OnColorChanged(ColorPickerButton sender, ColorButtonColorChangedEventArgs args)
-        {
-            if (!args.NewColor.HasValue) return;
-            if (DataContext is not ControllerInputViewModel cVm) return;
-            if (!cVm.Config.EnableLedChanging) return;
-            if (cVm.Config.TurnOffLed) return;
-            
-            cVm.ParentModel.SelectedGamepad.SetLed(args.NewColor.Value.ToUInt32());
-        }
-
-        private void ColorPickerButton_OnAttachedToVisualTree(object sender, VisualTreeAttachmentEventArgs e)
-        {
-            if (DataContext is not ControllerInputViewModel cVm) return;
-            if (!cVm.Config.EnableLedChanging) return;
-            if (cVm.Config.TurnOffLed) return;
-            
-            cVm.ParentModel.SelectedGamepad.SetLed(cVm.Config.LedColor.ToUInt32());
-        }
     }
 }

src/Ryujinx/UI/Views/Input/LedInputView.axaml

@@ -0,0 +1,46 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:controls="clr-namespace:Ryujinx.Ava.UI.Controls"
+             xmlns:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
+             xmlns:ext="clr-namespace:Ryujinx.Ava.Common.Markup"
+             xmlns:viewModels="clr-namespace:Ryujinx.Ava.UI.ViewModels.Input"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:DataType="viewModels:LedInputViewModel"
+             x:Class="Ryujinx.UI.Views.Input.LedInputView">
+    <StackPanel Orientation="Vertical" HorizontalAlignment="Center">
+        <StackPanel Orientation="Horizontal" IsVisible="{Binding ParentModel.CanClearLed}">
+            <TextBlock MinWidth="75" MaxWidth="150" Text="{ext:Locale ControllerSettingsLedColorDisable}" />
+            <CheckBox
+                Margin="5"
+                MinWidth="0"
+                IsChecked="{Binding TurnOffLed, Mode=TwoWay}"
+                Command="{Binding LedDisabledChanged}">
+            </CheckBox>
+        </StackPanel>
+        <StackPanel Orientation="Horizontal" IsEnabled="{Binding !TurnOffLed}">
+            <TextBlock MinWidth="75" MaxWidth="150" Text="{ext:Locale ControllerSettingsLedColorRainbow}" />
+            <CheckBox
+                Margin="5"
+                MinWidth="0"
+                IsChecked="{Binding UseRainbowLed, Mode=TwoWay}">
+            </CheckBox>
+        </StackPanel>
+        <StackPanel Orientation="Horizontal" IsEnabled="{Binding ShowLedColorPicker}">
+            <TextBlock MinWidth="75" MaxWidth="150" Text="{ext:Locale ControllerSettingsLedColor}" />
+            <ui:ColorPickerButton
+                Margin="5"
+                IsMoreButtonVisible="False"
+                UseColorPalette="False"
+                UseColorTriangle="False"
+                UseColorWheel="False"
+                ShowAcceptDismissButtons="False"
+                IsAlphaEnabled="False"
+                AttachedToVisualTree="ColorPickerButton_OnAttachedToVisualTree"
+                ColorChanged="ColorPickerButton_OnColorChanged"
+                Color="{Binding LedColor, Mode=TwoWay}">
+            </ui:ColorPickerButton>
+        </StackPanel>
+    </StackPanel>
+</UserControl>

src/Ryujinx/UI/Views/Input/LedInputView.axaml.cs

@@ -0,0 +1,75 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+using FluentAvalonia.UI.Controls;
+using Ryujinx.Ava.Common.Locale;
+using Ryujinx.Ava.UI.Models.Input;
+using Ryujinx.Ava.UI.ViewModels.Input;
+using Ryujinx.Ava.UI.Views.Input;
+using System.Threading.Tasks;
+
+namespace Ryujinx.UI.Views.Input
+{
+    public partial class LedInputView : UserControl
+    {
+        private readonly LedInputViewModel _viewModel;
+        
+        public LedInputView(ControllerInputViewModel viewModel)
+        {
+            DataContext = _viewModel = new LedInputViewModel
+            {
+                ParentModel = viewModel.ParentModel,
+                TurnOffLed = viewModel.Config.TurnOffLed,
+                EnableLedChanging = viewModel.Config.EnableLedChanging,
+                LedColor = viewModel.Config.LedColor,
+                UseRainbowLed = viewModel.Config.UseRainbowLed,
+            };
+            
+            InitializeComponent();
+        }
+        
+        private void ColorPickerButton_OnColorChanged(ColorPickerButton sender, ColorButtonColorChangedEventArgs args)
+        {
+            if (!args.NewColor.HasValue) return;
+            if (DataContext is not LedInputViewModel lvm) return;
+            if (!lvm.EnableLedChanging) return;
+            if (lvm.TurnOffLed) return;
+            
+            lvm.ParentModel.SelectedGamepad.SetLed(args.NewColor.Value.ToUInt32());
+        }
+
+        private void ColorPickerButton_OnAttachedToVisualTree(object sender, VisualTreeAttachmentEventArgs e)
+        {
+            if (DataContext is not LedInputViewModel lvm) return;
+            if (!lvm.EnableLedChanging) return;
+            if (lvm.TurnOffLed) return;
+            
+            lvm.ParentModel.SelectedGamepad.SetLed(lvm.LedColor.ToUInt32());
+        }
+        
+        public static async Task Show(ControllerInputViewModel viewModel)
+        {
+            LedInputView content = new(viewModel);
+
+            ContentDialog contentDialog = new()
+            {
+                Title = LocaleManager.Instance[LocaleKeys.ControllerLedTitle],
+                PrimaryButtonText = LocaleManager.Instance[LocaleKeys.ControllerSettingsSave],
+                SecondaryButtonText = string.Empty,
+                CloseButtonText = LocaleManager.Instance[LocaleKeys.ControllerSettingsClose],
+                Content = content,
+            };
+            contentDialog.PrimaryButtonClick += (sender, args) =>
+            {
+                GamepadInputConfig config = viewModel.Config;
+                config.EnableLedChanging = content._viewModel.EnableLedChanging;
+                config.LedColor = content._viewModel.LedColor;
+                config.UseRainbowLed = content._viewModel.UseRainbowLed;
+                config.TurnOffLed = content._viewModel.TurnOffLed;
+            };
+
+            await contentDialog.ShowAsync();
+        }
+    }
+}
+