Ava UI: Input Menu Redesign (#4990)

* Cleanup

* Remove redundant locales

* Start SVG Fixes…

Better +/- buttons

Fix the grips

Bumpers

Better directional pad

More SVG stuff

Grip adjustments

Final stuff

* Make image bigger

* Border radius

* More cleanup

* Restructure

* Restructure Rumble View

* Use compiled bindings where possible

* Round those pesky corners

* Ack Suggestions

* More suggestions

* Update src/Ryujinx.Ava/UI/Views/Input/RumbleInputView.axaml.cs

Co-authored-by: Ac_K <Acoustik666@gmail.com>

---------

Co-authored-by: Ac_K <Acoustik666@gmail.com>

src/Ryujinx.Ava/Assets/Locales/en_US.json

@@ -216,26 +216,17 @@
   "ControllerSettingsDPadDown": "Down",
   "ControllerSettingsDPadLeft": "Left",
   "ControllerSettingsDPadRight": "Right",
+  "ControllerSettingsStickButton": "Button",
+  "ControllerSettingsStickUp": "Up",
+  "ControllerSettingsStickDown": "Down",
+  "ControllerSettingsStickLeft": "Left",
+  "ControllerSettingsStickRight": "Right",
+  "ControllerSettingsStickStick": "Stick",
+  "ControllerSettingsStickInvertXAxis": "Invert Stick X",
+  "ControllerSettingsStickInvertYAxis": "Invert Stick Y",
+  "ControllerSettingsStickDeadzone": "Deadzone:",
   "ControllerSettingsLStick": "Left Stick",
-  "ControllerSettingsLStickButton": "Button",
-  "ControllerSettingsLStickUp": "Up",
-  "ControllerSettingsLStickDown": "Down",
-  "ControllerSettingsLStickLeft": "Left",
-  "ControllerSettingsLStickRight": "Right",
-  "ControllerSettingsLStickStick": "Stick",
-  "ControllerSettingsLStickInvertXAxis": "Invert Stick X",
-  "ControllerSettingsLStickInvertYAxis": "Invert Stick Y",
-  "ControllerSettingsLStickDeadzone": "Deadzone:",
   "ControllerSettingsRStick": "Right Stick",
-  "ControllerSettingsRStickButton": "Button",
-  "ControllerSettingsRStickUp": "Up",
-  "ControllerSettingsRStickDown": "Down",
-  "ControllerSettingsRStickLeft": "Left",
-  "ControllerSettingsRStickRight": "Right",
-  "ControllerSettingsRStickStick": "Stick",
-  "ControllerSettingsRStickInvertXAxis": "Invert Stick X",
-  "ControllerSettingsRStickInvertYAxis": "Invert Stick Y",
-  "ControllerSettingsRStickDeadzone": "Deadzone:",
   "ControllerSettingsTriggersLeft": "Triggers Left",
   "ControllerSettingsTriggersRight": "Triggers Right",
   "ControllerSettingsTriggersButtonsLeft": "Trigger Buttons Left",

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

@@ -7,6 +7,7 @@ using Ryujinx.Ava.Common.Locale;
 using Ryujinx.Ava.Input;
 using Ryujinx.Ava.UI.Helpers;
 using Ryujinx.Ava.UI.Models;
+using Ryujinx.Ava.UI.Views.Input;
 using Ryujinx.Ava.UI.Windows;
 using Ryujinx.Common;
 using Ryujinx.Common.Configuration;
@@ -30,7 +31,7 @@ using Key = Ryujinx.Common.Configuration.Hid.Key;
 
 namespace Ryujinx.Ava.UI.ViewModels
 {
-    public class ControllerSettingsViewModel : BaseModel, IDisposable
+    public class ControllerInputViewModel : BaseModel, IDisposable
     {
         private const string Disabled = "disabled";
         private const string ProControllerResource = "Ryujinx.Ui.Common/Resources/Controller_ProCon.svg";
@@ -231,7 +232,7 @@ namespace Ryujinx.Ava.UI.ViewModels
 
         public InputConfig Config { get; set; }
 
-        public ControllerSettingsViewModel(UserControl owner) : this()
+        public ControllerInputViewModel(UserControl owner) : this()
         {
             _owner = owner;
 
@@ -258,7 +259,7 @@ namespace Ryujinx.Ava.UI.ViewModels
             }
         }
 
-        public ControllerSettingsViewModel()
+        public ControllerInputViewModel()
         {
             PlayerIndexes = new ObservableCollection<PlayerModel>();
             Controllers = new ObservableCollection<ControllerModel>();
@@ -328,12 +329,12 @@ namespace Ryujinx.Ava.UI.ViewModels
 
         public async void ShowMotionConfig()
         {
-            await MotionSettingsWindow.Show(this);
+            await MotionInputView.Show(this);
         }
 
         public async void ShowRumbleConfig()
         {
-            await RumbleSettingsWindow.Show(this);
+            await RumbleInputView.Show(this);
         }
 
         private void LoadInputDriver()

src/Ryujinx.Ava/UI/ViewModels/MotionInputViewModel.cs

@@ -0,0 +1,93 @@
+namespace Ryujinx.Ava.UI.ViewModels
+{
+    public class MotionInputViewModel : BaseModel
+    {
+        private int _slot;
+        public int Slot
+        {
+            get => _slot;
+            set
+            {
+                _slot = value;
+                OnPropertyChanged();
+            }
+        }
+
+        private int _altSlot;
+        public int AltSlot
+        {
+            get => _altSlot;
+            set
+            {
+                _altSlot = value;
+                OnPropertyChanged();
+            }
+        }
+
+        private string _dsuServerHost;
+        public string DsuServerHost
+        {
+            get => _dsuServerHost;
+            set
+            {
+                _dsuServerHost = value;
+                OnPropertyChanged();
+            }
+        }
+
+        private int _dsuServerPort;
+        public int DsuServerPort
+        {
+            get => _dsuServerPort;
+            set
+            {
+                _dsuServerPort = value;
+                OnPropertyChanged();
+            }
+        }
+
+        private bool _mirrorInput;
+        public bool MirrorInput
+        {
+            get => _mirrorInput;
+            set
+            {
+                _mirrorInput = value;
+                OnPropertyChanged();
+            }
+        }
+
+        private int _sensitivity;
+        public int Sensitivity
+        {
+            get => _sensitivity;
+            set
+            {
+                _sensitivity = value;
+                OnPropertyChanged();
+            }
+        }
+
+        private double _gryoDeadzone;
+        public double GyroDeadzone
+        {
+            get => _gryoDeadzone;
+            set
+            {
+                _gryoDeadzone = value;
+                OnPropertyChanged();
+            }
+        }
+
+        private bool _enableCemuHookMotion;
+        public bool EnableCemuHookMotion
+        {
+            get => _enableCemuHookMotion;
+            set
+            {
+                _enableCemuHookMotion = value;
+                OnPropertyChanged();
+            }
+        }
+    }
+}

src/Ryujinx.Ava/UI/ViewModels/RumbleInputViewModel.cs

@@ -0,0 +1,27 @@
+namespace Ryujinx.Ava.UI.ViewModels
+{
+    public class RumbleInputViewModel : BaseModel
+    {
+        private float _strongRumble;
+        public float StrongRumble
+        {
+            get => _strongRumble;
+            set
+            {
+                _strongRumble = value;
+                OnPropertyChanged();
+            }
+        }
+
+        private float _weakRumble;
+        public float WeakRumble
+        {
+            get => _weakRumble;
+            set
+            {
+                _weakRumble = value;
+                OnPropertyChanged();
+            }
+        }
+    }
+}

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

@@ -4,7 +4,6 @@ using Avalonia.Input;
 using Avalonia.Interactivity;
 using Avalonia.LogicalTree;
 using Ryujinx.Ava.Common.Locale;
-using Ryujinx.Ava.UI.Controls;
 using Ryujinx.Ava.UI.Helpers;
 using Ryujinx.Ava.UI.Models;
 using Ryujinx.Ava.UI.ViewModels;
@@ -13,18 +12,18 @@ using Ryujinx.Input;
 using Ryujinx.Input.Assigner;
 using System;
 
-namespace Ryujinx.Ava.UI.Windows
+namespace Ryujinx.Ava.UI.Views.Input
 {
-    public partial class ControllerSettingsWindow : UserControl
+    public partial class ControllerInputView : UserControl
     {
         private bool _dialogOpen;
 
         private ButtonKeyAssigner _currentAssigner;
-        internal ControllerSettingsViewModel ViewModel { get; set; }
+        internal ControllerInputViewModel ViewModel { get; set; }
 
-        public ControllerSettingsWindow()
+        public ControllerInputView()
         {
-            DataContext = ViewModel = new ControllerSettingsViewModel(this);
+            DataContext = ViewModel = new ControllerInputViewModel(this);
 
             InitializeComponent();
 

src/Ryujinx.Ava/UI/Views/Input/MotionInputView.axaml

@@ -5,8 +5,11 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
     xmlns:locale="clr-namespace:Ryujinx.Ava.Common.Locale"
+    xmlns:viewModels="clr-namespace:Ryujinx.Ava.UI.ViewModels"
     mc:Ignorable="d"
-    x:Class="Ryujinx.Ava.UI.Windows.MotionSettingsWindow"
+    x:Class="Ryujinx.Ava.UI.Views.Input.MotionInputView"
+    x:CompileBindings="True"
+    x:DataType="viewModels:MotionInputViewModel"
     Focusable="True">
     <Grid Margin="10">
         <Grid.RowDefinitions>
@@ -14,7 +17,9 @@
             <RowDefinition />
         </Grid.RowDefinitions>
         <StackPanel Orientation="Vertical">
-            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
+            <StackPanel
+                Orientation="Horizontal"
+                HorizontalAlignment="Center">
                 <TextBlock
                     Margin="0"
                     HorizontalAlignment="Center"
@@ -28,11 +33,14 @@
                     Maximum="100"
                     Minimum="0"
                     Value="{Binding Sensitivity, Mode=TwoWay}" />
-                <TextBlock HorizontalAlignment="Center"
+                <TextBlock
+                    HorizontalAlignment="Center"
                     Margin="5, 0"
                     Text="{Binding Sensitivity, StringFormat=\{0:0\}%}" />
             </StackPanel>
-            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
+            <StackPanel
+                Orientation="Horizontal"
+                HorizontalAlignment="Center">
                 <TextBlock
                     Margin="0"
                     HorizontalAlignment="Center"
@@ -51,16 +59,24 @@
                     Margin="5, 0"
                     Text="{Binding GyroDeadzone, StringFormat=\{0:0.00\}}" />
             </StackPanel>
-            <Separator Height="1" Margin="0,5" />
+            <Separator
-            <CheckBox Margin="5" IsChecked="{Binding EnableCemuHookMotion}">
+                Height="1"
-                <TextBlock Margin="0,3,0,0" VerticalAlignment="Center"
+                Margin="0,5" />
+            <CheckBox
+                Margin="5"
+                IsChecked="{Binding EnableCemuHookMotion}">
+                <TextBlock
+                    Margin="0,3,0,0"
+                    VerticalAlignment="Center"
                     Text="{locale:Locale ControllerSettingsMotionUseCemuhookCompatibleMotion}" />
             </CheckBox>
         </StackPanel>
-        <Border Grid.Row="1"
+        <Border
+            Grid.Row="1"
             Padding="20,5"
             BorderBrush="{DynamicResource ThemeControlBorderColor}"
             BorderThickness="1"
+            CornerRadius="5"
             HorizontalAlignment="Stretch">
             <Grid VerticalAlignment="Top">
                 <Grid.RowDefinitions>
@@ -109,18 +125,28 @@
                                 <ColumnDefinition />
                                 <ColumnDefinition />
                             </Grid.ColumnDefinitions>
-                            <TextBlock Margin="0,10,0,0" VerticalAlignment="Center"
+                            <TextBlock
+                                Margin="0,10,0,0"
+                                VerticalAlignment="Center"
                                 Text="{locale:Locale ControllerSettingsMotionControllerSlot}" />
-                            <ui:NumberBox Grid.Row="0" Grid.Column="1"
+                            <ui:NumberBox
+                                Grid.Row="0"
+                                Grid.Column="1"
                                 Name="CemuHookSlotUpDown"
                                 SmallChange="1"
                                 LargeChange="1"
                                 Maximum="4"
                                 Minimum="0"
                                 Value="{Binding Slot}" />
-                            <TextBlock Margin="0,10,0,0" Grid.Row="1" Grid.Column="0" VerticalAlignment="Center"
+                            <TextBlock
+                                Margin="0,10,0,0"
+                                Grid.Row="1"
+                                Grid.Column="0"
+                                VerticalAlignment="Center"
                                 Text="{locale:Locale ControllerSettingsMotionRightJoyConSlot}" />
-                            <ui:NumberBox Grid.Row="1" Grid.Column="1"
+                            <ui:NumberBox
+                                Grid.Row="1"
+                                Grid.Column="1"
                                 Name="CemuHookRightJoyConSlotUpDown"
                                 SmallChange="1"
                                 LargeChange="1"
@@ -129,9 +155,11 @@
                                 Value="{Binding AltSlot}" />
                         </Grid>
                     </StackPanel>
-                    <CheckBox HorizontalAlignment="Center"
+                    <CheckBox
+                        HorizontalAlignment="Center"
                         IsChecked="{Binding MirrorInput, Mode=TwoWay}">
-                        <TextBlock HorizontalAlignment="Center"
+                        <TextBlock
+                            HorizontalAlignment="Center"
                             Text="{locale:Locale ControllerSettingsMotionMirrorInput}" />
                     </CheckBox>
                 </StackPanel>

src/Ryujinx.Ava/UI/Views/Input/MotionInputView.axaml.cs

@@ -6,44 +6,42 @@ using Ryujinx.Ava.UI.ViewModels;
 using Ryujinx.Common.Configuration.Hid.Controller;
 using System.Threading.Tasks;
 
-namespace Ryujinx.Ava.UI.Windows
+namespace Ryujinx.Ava.UI.Views.Input
 {
-    public partial class MotionSettingsWindow : UserControl
+    public partial class MotionInputView : UserControl
     {
-        private readonly InputConfiguration<GamepadInputId, StickInputId> _viewmodel;
+        private MotionInputViewModel _viewModel;
 
-        public MotionSettingsWindow()
+        public MotionInputView()
         {
             InitializeComponent();
-            DataContext = _viewmodel;
         }
 
-        public MotionSettingsWindow(ControllerSettingsViewModel viewmodel)
+        public MotionInputView(ControllerInputViewModel viewModel)
         {
-            var config = viewmodel.Configuration as InputConfiguration<GamepadInputId, StickInputId>;
+            var config = viewModel.Configuration as InputConfiguration<GamepadInputId, StickInputId>;
 
-            _viewmodel = new InputConfiguration<GamepadInputId, StickInputId>()
+            _viewModel = new MotionInputViewModel
             {
                 Slot = config.Slot,
                 AltSlot = config.AltSlot,
                 DsuServerHost = config.DsuServerHost,
                 DsuServerPort = config.DsuServerPort,
                 MirrorInput = config.MirrorInput,
-                EnableMotion = config.EnableMotion,
                 Sensitivity = config.Sensitivity,
                 GyroDeadzone = config.GyroDeadzone,
                 EnableCemuHookMotion = config.EnableCemuHookMotion
             };
 
             InitializeComponent();
-            DataContext = _viewmodel;
+            DataContext = _viewModel;
         }
 
-        public static async Task Show(ControllerSettingsViewModel viewmodel)
+        public static async Task Show(ControllerInputViewModel viewModel)
         {
-            MotionSettingsWindow content = new MotionSettingsWindow(viewmodel);
+            MotionInputView content = new(viewModel);
 
-            ContentDialog contentDialog = new ContentDialog
+            ContentDialog contentDialog = new()
             {
                 Title = LocaleManager.Instance[LocaleKeys.ControllerMotionTitle],
                 PrimaryButtonText = LocaleManager.Instance[LocaleKeys.ControllerSettingsSave],
@@ -53,16 +51,15 @@ namespace Ryujinx.Ava.UI.Windows
             };
             contentDialog.PrimaryButtonClick += (sender, args) =>
             {
-                var config = viewmodel.Configuration as InputConfiguration<GamepadInputId, StickInputId>;
+                var config = viewModel.Configuration as InputConfiguration<GamepadInputId, StickInputId>;
-                config.Slot = content._viewmodel.Slot;
+                config.Slot = content._viewModel.Slot;
-                config.EnableMotion = content._viewmodel.EnableMotion;
+                config.Sensitivity = content._viewModel.Sensitivity;
-                config.Sensitivity = content._viewmodel.Sensitivity;
+                config.GyroDeadzone = content._viewModel.GyroDeadzone;
-                config.GyroDeadzone = content._viewmodel.GyroDeadzone;
+                config.AltSlot = content._viewModel.AltSlot;
-                config.AltSlot = content._viewmodel.AltSlot;
+                config.DsuServerHost = content._viewModel.DsuServerHost;
-                config.DsuServerHost = content._viewmodel.DsuServerHost;
+                config.DsuServerPort = content._viewModel.DsuServerPort;
-                config.DsuServerPort = content._viewmodel.DsuServerPort;
+                config.EnableCemuHookMotion = content._viewModel.EnableCemuHookMotion;
-                config.EnableCemuHookMotion = content._viewmodel.EnableCemuHookMotion;
+                config.MirrorInput = content._viewModel.MirrorInput;
-                config.MirrorInput = content._viewmodel.MirrorInput;
             };
 
             await contentDialog.ShowAsync();

src/Ryujinx.Ava/UI/Views/Input/RumbleInputView.axaml

@@ -4,8 +4,11 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:locale="clr-namespace:Ryujinx.Ava.Common.Locale"
+    xmlns:viewModels="clr-namespace:Ryujinx.Ava.UI.ViewModels"
     mc:Ignorable="d"
-    x:Class="Ryujinx.Ava.UI.Windows.RumbleSettingsWindow"
+    x:Class="Ryujinx.Ava.UI.Views.Input.RumbleInputView"
+    x:DataType="viewModels:RumbleInputViewModel"
+    x:CompileBindings="True"
     Focusable="True">
     <Grid Margin="10">
         <Grid.RowDefinitions>

src/Ryujinx.Ava/UI/Views/Input/RumbleInputView.axaml.cs

@@ -6,36 +6,37 @@ using Ryujinx.Ava.UI.ViewModels;
 using Ryujinx.Common.Configuration.Hid.Controller;
 using System.Threading.Tasks;
 
-namespace Ryujinx.Ava.UI.Windows
+namespace Ryujinx.Ava.UI.Views.Input
 {
-    public partial class RumbleSettingsWindow : UserControl
+    public partial class RumbleInputView : UserControl
     {
-        private readonly InputConfiguration<GamepadInputId, StickInputId> _viewmodel;
+        private RumbleInputViewModel _viewModel;
 
-        public RumbleSettingsWindow()
+        public RumbleInputView()
         {
             InitializeComponent();
-            DataContext = _viewmodel;
         }
 
-        public RumbleSettingsWindow(ControllerSettingsViewModel viewmodel)
+        public RumbleInputView(ControllerInputViewModel viewModel)
         {
-            var config = viewmodel.Configuration as InputConfiguration<GamepadInputId, StickInputId>;
+            var config = viewModel.Configuration as InputConfiguration<GamepadInputId, StickInputId>;
 
-            _viewmodel = new InputConfiguration<GamepadInputId, StickInputId>()
+            _viewModel = new RumbleInputViewModel
             {
-                StrongRumble = config.StrongRumble, WeakRumble = config.WeakRumble
+                StrongRumble = config.StrongRumble,
+                WeakRumble = config.WeakRumble
             };
 
             InitializeComponent();
-            DataContext = _viewmodel;
+            
+            DataContext = _viewModel;
         }
 
-        public static async Task Show(ControllerSettingsViewModel viewmodel)
+        public static async Task Show(ControllerInputViewModel viewModel)
         {
-            RumbleSettingsWindow content = new RumbleSettingsWindow(viewmodel);
+            RumbleInputView content = new(viewModel);
 
-            ContentDialog contentDialog = new ContentDialog
+            ContentDialog contentDialog = new()
             {
                 Title = LocaleManager.Instance[LocaleKeys.ControllerRumbleTitle],
                 PrimaryButtonText = LocaleManager.Instance[LocaleKeys.ControllerSettingsSave],
@@ -46,9 +47,9 @@ namespace Ryujinx.Ava.UI.Windows
 
             contentDialog.PrimaryButtonClick += (sender, args) =>
             {
-                var config = viewmodel.Configuration as InputConfiguration<GamepadInputId, StickInputId>;
+                var config = viewModel.Configuration as InputConfiguration<GamepadInputId, StickInputId>;
-                config.StrongRumble = content._viewmodel.StrongRumble;
+                config.StrongRumble = content._viewModel.StrongRumble;
-                config.WeakRumble = content._viewmodel.WeakRumble;
+                config.WeakRumble = content._viewModel.WeakRumble;
             };
 
             await contentDialog.ShowAsync();

src/Ryujinx.Ava/UI/Views/Settings/SettingsInputView.axaml

@@ -5,7 +5,7 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:locale="clr-namespace:Ryujinx.Ava.Common.Locale"
-    xmlns:window="clr-namespace:Ryujinx.Ava.UI.Windows"
+    xmlns:views="clr-namespace:Ryujinx.Ava.UI.Views.Input"
     xmlns:viewModels="clr-namespace:Ryujinx.Ava.UI.ViewModels"
     mc:Ignorable="d"
     x:CompileBindings="True"
@@ -20,27 +20,49 @@
         HorizontalScrollBarVisibility="Disabled"
         VerticalScrollBarVisibility="Auto">
         <Border Classes="settings">
-            <StackPanel Margin="4" Orientation="Vertical">
+            <Panel
-                <StackPanel Orientation="Horizontal">
+                Margin="10">
-                    <CheckBox Margin="5,0"
+                <Grid>
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="Auto"/>
+                        <RowDefinition Height="*" />
+                        <RowDefinition Height="Auto" />
+                    </Grid.RowDefinitions>
+                    <views:ControllerInputView
+                        Grid.Row="0"
+                        Name="ControllerSettings" />
+                    <StackPanel
+                        Orientation="Vertical"
+                        Grid.Row="2">
+                        <Separator
+                            Margin="0 10"
+                            Height="1" />
+                        <StackPanel
+                            Orientation="Horizontal"
+                            Spacing="10">
+                            <CheckBox
                                 ToolTip.Tip="{locale:Locale DockModeToggleTooltip}"
+                                MinWidth="0"
                                 IsChecked="{Binding EnableDockedMode}">
-                        <TextBlock VerticalAlignment="Center"
+                                <TextBlock
                                     Text="{locale:Locale SettingsTabInputEnableDockedMode}" />
                             </CheckBox>
-                    <CheckBox Margin="5,0"
+                            <CheckBox
                                 ToolTip.Tip="{locale:Locale DirectKeyboardTooltip}"
                                 IsChecked="{Binding EnableKeyboard}">
-                        <TextBlock Text="{locale:Locale SettingsTabInputDirectKeyboardAccess}" />
+                                <TextBlock
+                                    Text="{locale:Locale SettingsTabInputDirectKeyboardAccess}" />
                             </CheckBox>
-                    <CheckBox Margin="5,0"
+                            <CheckBox
                                 ToolTip.Tip="{locale:Locale DirectMouseTooltip}"
                                 IsChecked="{Binding EnableMouse}">
-                        <TextBlock Text="{locale:Locale SettingsTabInputDirectMouseAccess}" />
+                                <TextBlock
+                                    Text="{locale:Locale SettingsTabInputDirectMouseAccess}" />
                             </CheckBox>
                         </StackPanel>
-                <window:ControllerSettingsWindow Name="ControllerSettings" Margin="0" MinHeight="600" />
                     </StackPanel>
+                </Grid>
+            </Panel>
         </Border>
     </ScrollViewer>
 </UserControl>