Avalonia - Misc changes to UX (#3643)

* Change navbar from compact to default and force text overflow globally * Fix settings window * Fix right stick control alignment * Initialize value and add logging for SDL IDs * Fix alignment of setting text and improve borders * Clean up padding and size of buttons on controller settings * Fix right side trigger alignment and correct styling * Revert axaml alignment * Fix alignment of volume widget * Fix timezone autocompletebox dropdown height * MainWindow: Line up volume status bar item * Remove margins and add padding to volume widget * Make volume text localizable. Co-authored-by: merry <[email protected]>
kamiwaaidearu · Sep 19, 2022 · 41790aa · 41790aa
1 parent 0cb1e92
commit 41790aa
Show file tree

Hide file tree

Showing 10 changed files with 133 additions and 86 deletions.
diff --git a/Ryujinx.Ava/AppHost.cs b/Ryujinx.Ava/AppHost.cs
@@ -879,7 +879,7 @@ public void UpdateStatus()
 
             StatusUpdatedEvent?.Invoke(this, new StatusUpdatedEventArgs(
                 Device.EnableDeviceVsync,
-                Device.GetVolume(),
+                LocaleManager.Instance["VolumeShort"] + $": {(int)(Device.GetVolume() * 100)}%",
                 Renderer.IsVulkan ? "Vulkan" : "OpenGL",
                 dockedMode,
                 ConfigurationState.Instance.Graphics.AspectRatio.Value.ToText(),

diff --git a/Ryujinx.Ava/Assets/Locales/en_US.json b/Ryujinx.Ava/Assets/Locales/en_US.json
@@ -588,5 +588,6 @@
   "SettingsTabGraphicsPreferredGpuTooltip": "Select the graphics card that will be used with the Vulkan graphics backend.\n\nDoes not affect the GPU that OpenGL will use.\n\nSet to the GPU flagged as \"dGPU\" if unsure. If there isn't one, leave untouched.",
   "SettingsAppRequiredRestartMessage": "Ryujinx Restart Required",
   "SettingsGpuBackendRestartMessage": "Graphics Backend or Gpu settings have been modified. This will require a restart to be applied",
-  "SettingsGpuBackendRestartSubMessage": "Do you want to restart now?"
+  "SettingsGpuBackendRestartSubMessage": "Do you want to restart now?",
+  "VolumeShort": "Vol"
 }
diff --git a/Ryujinx.Ava/Assets/Styles/Styles.xaml b/Ryujinx.Ava/Assets/Styles/Styles.xaml
@@ -54,6 +54,12 @@
     <Style Selector="Border.huge">
         <Setter Property="Width" Value="200" />
     </Style>
+    <Style Selector="Border.settings">
+        <Setter Property="Background" Value="{DynamicResource ThemeDarkColor}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource MenuFlyoutPresenterBorderColor}" />
+        <Setter Property="BorderThickness" Value="2" />
+        <Setter Property="CornerRadius" Value="3" />
+    </Style>
     <Style Selector="Image.small">
         <Setter Property="Width" Value="50" />
     </Style>
@@ -193,6 +199,14 @@
         <Setter Property="Margin" Value="{DynamicResource TextMargin}" />
         <Setter Property="FontSize" Value="{DynamicResource FontSize}" />
         <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="TextWrapping" Value="WrapWithOverflow" />
+    </Style>
+    <Style Selector="TextBlock.h1">
+        <Setter Property="Margin" Value="{DynamicResource TextMargin}" />
+        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="FontWeight" Value="Bold" />
+        <Setter Property="FontSize" Value="16" />
+        <Setter Property="TextWrapping" Value="WrapWithOverflow" />
     </Style>
     <Style Selector="Separator">
         <Setter Property="Background" Value="{DynamicResource ThemeControlBorderColor}" />

diff --git a/Ryujinx.Ava/Ui/Models/StatusUpdatedEventArgs.cs b/Ryujinx.Ava/Ui/Models/StatusUpdatedEventArgs.cs
@@ -5,18 +5,18 @@ namespace Ryujinx.Ava.Ui.Models
     internal class StatusUpdatedEventArgs : EventArgs
     {
         public bool VSyncEnabled { get; }
-        public float Volume { get; }
+        public string VolumeStatus { get; }
         public string GpuBackend { get; }
         public string AspectRatio { get; }
         public string DockedMode { get; }
         public string FifoStatus { get; }
         public string GameStatus { get; }
         public string GpuName { get; }
 
-        public StatusUpdatedEventArgs(bool vSyncEnabled, float volume, string gpuBackend, string dockedMode, string aspectRatio, string gameStatus, string fifoStatus, string gpuName)
+        public StatusUpdatedEventArgs(bool vSyncEnabled, string volumeStatus, string gpuBackend, string dockedMode, string aspectRatio, string gameStatus, string fifoStatus, string gpuName)
         {
             VSyncEnabled = vSyncEnabled;
-            Volume = volume;
+            VolumeStatus = volumeStatus;
             GpuBackend = gpuBackend;
             DockedMode = dockedMode;
             AspectRatio = aspectRatio;

diff --git a/Ryujinx.Ava/Ui/ViewModels/ControllerSettingsViewModel.cs b/Ryujinx.Ava/Ui/ViewModels/ControllerSettingsViewModel.cs
@@ -43,6 +43,7 @@ public class ControllerSettingsViewModel : BaseModel, IDisposable
 
         private PlayerIndex _playerId;
         private int _controller;
+        private int _controllerNumber = 0;
         private string _controllerImage;
         private int _device;
         private object _configuration;
@@ -439,6 +440,14 @@ private static string GetShortGamepadName(string str)
             return str;
         }
 
+        private static string GetShortGamepadId(string str)
+        {
+            const string Hyphen = "-";
+            const int Offset = 1;
+
+            return str.Substring(str.IndexOf(Hyphen) + Offset);
+        }
+
         public void LoadDevices()
         {
             lock (Devices)
@@ -451,22 +460,33 @@ public void LoadDevices()
                 {
                     using IGamepad gamepad = _mainWindow.InputManager.KeyboardDriver.GetGamepad(id);
 
+                    Logger.Info?.Print(LogClass.Configuration, $"{GetShortGamepadName(gamepad.Name)} has been connected with ID: {gamepad.Id}");
+
                     if (gamepad != null)
                     {
-                        Devices.Add((DeviceType.Keyboard, id, $"{GetShortGamepadName(gamepad.Name)} ({id})"));
+                        Devices.Add((DeviceType.Keyboard, id, $"{GetShortGamepadName(gamepad.Name)}"));
                     }
                 }
 
                 foreach (string id in _mainWindow.InputManager.GamepadDriver.GamepadsIds)
                 {
                     using IGamepad gamepad = _mainWindow.InputManager.GamepadDriver.GetGamepad(id);
 
+                    Logger.Info?.Print(LogClass.Configuration, $"{GetShortGamepadName(gamepad.Name)} has been connected with ID: {gamepad.Id}");
+
                     if (gamepad != null)
                     {
-                        Devices.Add((DeviceType.Controller, id, $"{GetShortGamepadName(gamepad.Name)} ({id})"));
+                        if (Devices.Any(controller => GetShortGamepadId(controller.Id) == GetShortGamepadId(gamepad.Id)))
+                        {
+                            _controllerNumber++;
+                        }
+
+                        Devices.Add((DeviceType.Controller, id, $"{GetShortGamepadName(gamepad.Name)} ({_controllerNumber})"));
                     }
                 }
 
+                _controllerNumber = 0;
+
                 DeviceList.AddRange(Devices.Select(x => x.Name));
                 Device = Math.Min(Device, DeviceList.Count);
             }

diff --git a/Ryujinx.Ava/Ui/ViewModels/MainWindowViewModel.cs b/Ryujinx.Ava/Ui/ViewModels/MainWindowViewModel.cs
@@ -50,6 +50,7 @@ internal class MainWindowViewModel : BaseModel
         private string _dockedStatusText;
         private string _fifoStatusText;
         private string _gameStatusText;
+        private string _volumeStatusText;
         private string _gpuStatusText;
         private bool _isAmiiboRequested;
         private bool _isGameRunning;
@@ -385,11 +386,12 @@ public string AspectRatioStatusText
 
         public string VolumeStatusText
         {
-            get
+            get => _volumeStatusText;
+            set
             {
-                string icon = Volume == 0 ? "🔇" : "🔊";
+                _volumeStatusText = value;
 
-                return $"{icon} {(int)(Volume * 100)}%";
+                OnPropertyChanged();
             }
         }
 

diff --git a/Ryujinx.Ava/Ui/Windows/ControllerSettingsWindow.axaml b/Ryujinx.Ava/Ui/Windows/ControllerSettingsWindow.axaml
@@ -35,7 +35,8 @@
                 Grid.Column="0"
                 Margin="0,0,2,0"
                 BorderBrush="{DynamicResource ThemeControlBorderColor}"
-                BorderThickness="1">
+                BorderThickness="1"
+                Padding="2,0">
                 <StackPanel
                     Margin="2"
                     HorizontalAlignment="Center"
@@ -65,7 +66,8 @@
                 Grid.Column="1"
                 Margin="0,0,2,0"
                 BorderBrush="{DynamicResource ThemeControlBorderColor}"
-                BorderThickness="1">
+                BorderThickness="1"
+                Padding="2,0">
                 <StackPanel
                     Margin="2"
                     HorizontalAlignment="Stretch"
@@ -103,7 +105,8 @@
                 Grid.Column="2"
                 Margin="0,0,2,0"
                 BorderBrush="{DynamicResource ThemeControlBorderColor}"
-                BorderThickness="1">
+                BorderThickness="1"
+                Padding="2,0">
                 <Grid
                     Margin="2"
                     HorizontalAlignment="Stretch"
@@ -132,7 +135,8 @@
             <Border
                 Grid.Column="3"
                 BorderBrush="{DynamicResource ThemeControlBorderColor}"
-                BorderThickness="1">
+                BorderThickness="1"
+                Padding="2,0" >
                 <StackPanel
                     Margin="2"
                     HorizontalAlignment="Center"
@@ -151,7 +155,7 @@
                             Items="{Binding ProfilesList}"
                             Text="{Binding ProfileName}" />
                         <Button
-                            MinWidth="60"
+                            MinWidth="0"
                             Margin="5,0,0,0"
                             VerticalAlignment="Center"
                             ToolTip.Tip="{locale:Locale ControllerSettingsLoadProfileToolTip}"
@@ -162,7 +166,7 @@
                                 Height="20" />
                         </Button>
                         <Button
-                            MinWidth="60"
+                            MinWidth="0"
                             Margin="5,0,0,0"
                             VerticalAlignment="Center"
                             ToolTip.Tip="{locale:Locale ControllerSettingsSaveProfileToolTip}"
@@ -173,7 +177,7 @@
                                 Height="20" />
                         </Button>
                         <Button
-                            MinWidth="60"
+                            MinWidth="0"
                             Margin="5,0,0,0"
                             VerticalAlignment="Center"
                             ToolTip.Tip="{locale:Locale ControllerSettingsRemoveProfileToolTip}"
@@ -522,7 +526,7 @@
                                         TextAlignment="Center" />
                                 </ToggleButton>
                             </StackPanel>
-                            
+
                             <!--  Left DPad Down  -->
                             <StackPanel Margin="0,0,0,4" Background="{DynamicResource ThemeDarkColor}" Orientation="Horizontal">
                                 <TextBlock
@@ -583,7 +587,7 @@
                     </StackPanel>
                 </Border>
             </Grid>
-            
+
             <!--  Triggers And Side Buttons-->
             <StackPanel Grid.Column="1" HorizontalAlignment="Stretch">
                 <Border
@@ -717,7 +721,7 @@
                                 MinWidth="0"
                                 Grid.Column="0"
                                 IsChecked="{Binding Configuration.EnableMotion, Mode=TwoWay}">
-                                <TextBlock Text="{locale:Locale ControllerSettingsMotion}" TextWrapping="WrapWithOverflow" />
+                                <TextBlock Text="{locale:Locale ControllerSettingsMotion}" />
                             </CheckBox>
                             <Button Margin="10" Grid.Column="1" Command="{Binding ShowMotionConfig}">
                                 <TextBlock Text="{locale:Locale ControllerSettingsConfigureGeneral}" />
@@ -739,7 +743,7 @@
                                 MinWidth="0"
                                 Grid.Column="0"
                                 IsChecked="{Binding Configuration.EnableRumble, Mode=TwoWay}">
-                                <TextBlock Text="{locale:Locale ControllerSettingsRumble}" TextWrapping="WrapWithOverflow" />
+                                <TextBlock Text="{locale:Locale ControllerSettingsRumble}" />
                             </CheckBox>
                             <Button Margin="10" Grid.Column="1" Command="{Binding ShowRumbleConfig}">
                                 <TextBlock Text="{locale:Locale ControllerSettingsConfigureGeneral}" />
@@ -780,8 +784,6 @@
                                 Margin="0,0,0,4"
                                 Grid.Column="1"
                                 Grid.Row="0"
-                                HorizontalAlignment="Center"
-                                VerticalAlignment="Center"
                                 Background="{DynamicResource ThemeDarkColor}"
                                 Orientation="Horizontal">
                                 <TextBlock
@@ -822,7 +824,7 @@
                                 </ToggleButton>
                             </StackPanel>
                             <StackPanel
-                                Margin="0,0,0,4"
+                                Margin="0,0,8,4"
                                 Grid.Column="0"
                                 Grid.Row="0"
                                 HorizontalAlignment="Right"
@@ -957,7 +959,6 @@
                 </Border>
                 <Border
                     Grid.Row="2"
-                    Margin="2,0,2,2"
                     Padding="10"
                     BorderBrush="{DynamicResource ThemeControlBorderColor}"
                     BorderThickness="1"
@@ -1139,7 +1140,7 @@
                                         Text="{Binding Configuration.DeadzoneRight, StringFormat=\{0:0.00\}}" />
                                 </StackPanel>
                                 <TextBlock Text="{locale:Locale ControllerSettingsStickRange}" />
-                                <StackPanel 
+                                <StackPanel
                                     HorizontalAlignment="Center"
                                     VerticalAlignment="Center"
                                     Orientation="Horizontal">

diff --git a/Ryujinx.Ava/Ui/Windows/MainWindow.axaml b/Ryujinx.Ava/Ui/Windows/MainWindow.axaml
@@ -177,7 +177,7 @@
                                     Command="{ReflectionBinding ChangeLanguage}"
                                     CommandParameter="zh_TW"
                                     Header="繁體中文" />
-                                <MenuItem                                    
+                                <MenuItem
                                     Command="{ReflectionBinding ChangeLanguage}"
                                     CommandParameter="ja_JP"
                                     Header="日本語" />
@@ -662,12 +662,12 @@
                         IsVisible="{Binding !ShowLoadProgress}" />
                     <ui:ToggleSplitButton
                         Name="VolumeStatus"
-                        Margin="-2,0,-3,0"
-                        Padding="5,0,0,5"
+                        Padding="5"
                         HorizontalAlignment="Left"
                         VerticalAlignment="Center"
+                        VerticalContentAlignment="Center"
                         Background="{DynamicResource ThemeContentBackgroundColor}"
-                        BorderBrush="{DynamicResource ThemeContentBackgroundColor}"
+                        BorderThickness="0"
                         Content="{Binding VolumeStatusText}"
                         IsChecked="{Binding VolumeMuted}"
                         IsVisible="{Binding !ShowLoadProgress}">

diff --git a/Ryujinx.Ava/Ui/Windows/MainWindow.axaml.cs b/Ryujinx.Ava/Ui/Windows/MainWindow.axaml.cs
@@ -138,6 +138,7 @@ private void Update_StatusBar(object sender, StatusUpdatedEventArgs args)
                     ViewModel.DockedStatusText = args.DockedMode;
                     ViewModel.AspectRatioStatusText = args.AspectRatio;
                     ViewModel.GameStatusText = args.GameStatus;
+                    ViewModel.VolumeStatusText = args.VolumeStatus;
                     ViewModel.FifoStatusText = args.FifoStatus;
                     ViewModel.GpuNameText = args.GpuName;
                     ViewModel.BackendText = args.GpuBackend;