vance/ryujinx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Avalonia - Misc changes to UX (#3643)

Browse Source 
* 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 <git@mary.rs>
This commit is contained in:
MutantAura 2022-09-19 20:04:22 +01:00 committed by GitHub
parent 0cb1e926b5
commit 41790aa743
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 133 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Ryujinx.Ava/AppHost.cs
View File

@ -879,7 +879,7 @@ namespace Ryujinx.Ava
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(),

3
Ryujinx.Ava/Assets/Locales/en_US.json
View File

@ -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"
}

14
Ryujinx.Ava/Assets/Styles/Styles.xaml
View File

@ -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}" />

6
Ryujinx.Ava/Ui/Models/StatusUpdatedEventArgs.cs
View File

@ -5,7 +5,7 @@ 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; }
@ -13,10 +13,10 @@ namespace Ryujinx.Ava.Ui.Models
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;

24
Ryujinx.Ava/Ui/ViewModels/ControllerSettingsViewModel.cs
View File

@ -43,6 +43,7 @@ namespace Ryujinx.Ava.Ui.ViewModels
private PlayerIndex _playerId;
private int _controller;
private int _controllerNumber = 0;
private string _controllerImage;
private int _device;
private object _configuration;
@ -439,6 +440,14 @@ namespace Ryujinx.Ava.Ui.ViewModels
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,9 +460,11 @@ namespace Ryujinx.Ava.Ui.ViewModels
{
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)}"));
}
}
@ -461,12 +472,21 @@ namespace Ryujinx.Ava.Ui.ViewModels
{
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);
}

8
Ryujinx.Ava/Ui/ViewModels/MainWindowViewModel.cs
View File

@ -50,6 +50,7 @@ namespace Ryujinx.Ava.Ui.ViewModels
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 @@ namespace Ryujinx.Ava.Ui.ViewModels
public string VolumeStatusText
{
get
get => _volumeStatusText;
set
{
string icon = Volume == 0 ? "🔇" : "🔊";
_volumeStatusText = value;
return $"{icon} {(int)(Volume * 100)}%";
OnPropertyChanged();
}
}

27
Ryujinx.Ava/Ui/Windows/ControllerSettingsWindow.axaml
View File

@ -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}"
@ -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"

6
Ryujinx.Ava/Ui/Windows/MainWindow.axaml
View File

@ -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}">

1
Ryujinx.Ava/Ui/Windows/MainWindow.axaml.cs
View File

@ -138,6 +138,7 @@ namespace Ryujinx.Ava.Ui.Windows
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;

64
Ryujinx.Ava/Ui/Windows/SettingsWindow.axaml
View File

@ -38,18 +38,18 @@
KeyboardNavigation.IsTabStop="False"/>
<Grid Name="Pages" IsVisible="False" Grid.Row="2">
<ScrollViewer Name="UiPage"
Margin="0,0,10,0"
Margin="0,0,2,0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Auto">
<Border>
<Border Classes="settings">
<StackPanel
Margin="10,5"
HorizontalAlignment="Stretch"
Orientation="Vertical"
Spacing="10">
<TextBlock FontWeight="Bold" Text="{locale:Locale SettingsTabGeneralGeneral}" />
<TextBlock Classes="h1" Text="{locale:Locale SettingsTabGeneralGeneral}" />
<StackPanel Margin="10,0,0,0" Orientation="Vertical">
<CheckBox IsChecked="{Binding EnableDiscordIntegration}">
<TextBlock VerticalAlignment="Center"
@ -67,7 +67,7 @@
</CheckBox>
</StackPanel>
<Separator Height="1" />
<TextBlock FontWeight="Bold" Text="{locale:Locale SettingsTabGeneralGameDirectories}" />
<TextBlock Classes="h1" Text="{locale:Locale SettingsTabGeneralGameDirectories}" />
<StackPanel
Margin="10,0,0,0"
HorizontalAlignment="Stretch"
@ -111,7 +111,7 @@
</Grid>
</StackPanel>
<Separator Height="1" />
<TextBlock FontWeight="Bold" Text="{locale:Locale SettingsTabGeneralTheme}" />
<TextBlock Classes="h1" Text="{locale:Locale SettingsTabGeneralTheme}" />
<Grid Margin="10,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
@ -169,7 +169,7 @@
Padding="0,0,2,0"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Auto">
<Border>
<Border Classes="settings">
<StackPanel Margin="4" Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<CheckBox Margin="5,0"
@ -198,9 +198,9 @@
VerticalAlignment="Stretch"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Auto">
<Border>
<Border Classes="settings">
<StackPanel Margin="10,5" Orientation="Vertical" Spacing="10">
<TextBlock FontWeight="Bold" Text="{locale:Locale SettingsTabHotkeysHotkeys}" />
<TextBlock Classes="h1" Text="{locale:Locale SettingsTabHotkeysHotkeys}" />
<StackPanel Margin="10,0,0,0" Orientation="Horizontal">
<TextBlock VerticalAlignment="Center" Text="{locale:Locale SettingsTabHotkeysToggleVsyncHotkey}" Width="230" />
<ToggleButton Width="90" Height="27" Checked="Button_Checked" Unchecked="Button_Unchecked">
@ -265,13 +265,13 @@
VerticalAlignment="Stretch"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Auto">
<Border>
<Border Classes="settings">
<StackPanel
Margin="10,5"
HorizontalAlignment="Stretch"
Orientation="Vertical"
Spacing="10">
<TextBlock FontWeight="Bold" Text="{locale:Locale SettingsTabSystemCore}" />
<TextBlock Classes="h1" Text="{locale:Locale SettingsTabSystemCore}" />
<StackPanel Margin="10,0,0,0" Orientation="Vertical">
<StackPanel Margin="0,0,0,10" Orientation="Horizontal">
<TextBlock VerticalAlignment="Center"
@ -384,6 +384,7 @@
<AutoCompleteBox
Name="TimeZoneBox"
Width="350"
MaxDropDownHeight="500"
FilterMode="Contains"
Items="{Binding TimeZones}"
SelectionChanged="TimeZoneBox_OnSelectionChanged"
@ -420,7 +421,7 @@
</StackPanel>
<Separator Height="1" />
<StackPanel Orientation="Horizontal">
<TextBlock FontWeight="Bold" Text="{locale:Locale SettingsTabSystemHacks}" />
<TextBlock Classes="h1" Text="{locale:Locale SettingsTabSystemHacks}" />
<TextBlock Text="{locale:Locale SettingsTabSystemHacksNote}" />
</StackPanel>
<StackPanel
@ -445,13 +446,13 @@
VerticalAlignment="Stretch"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Auto">
<Border>
<Border Classes="settings">
<StackPanel
Margin="10,5"
HorizontalAlignment="Stretch"
Orientation="Vertical"
Spacing="10">
<TextBlock FontWeight="Bold" Text="{locale:Locale SettingsTabCpuCache}" />
<TextBlock Classes="h1" Text="{locale:Locale SettingsTabCpuCache}" />
<StackPanel
Margin="10,0,0,0"
HorizontalAlignment="Stretch"
@ -462,7 +463,7 @@
</CheckBox>
</StackPanel>
<Separator Height="1" />
<TextBlock FontWeight="Bold" Text="{locale:Locale SettingsTabCpuMemory}" />
<TextBlock Classes="h1" Text="{locale:Locale SettingsTabCpuMemory}" />
<StackPanel
Margin="10,0,0,0"
HorizontalAlignment="Stretch"
@ -502,13 +503,13 @@
VerticalAlignment="Stretch"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Auto">
<Border>
<Border Classes="settings">
<StackPanel
Margin="10,5"
HorizontalAlignment="Stretch"
Orientation="Vertical"
Spacing="10">
<TextBlock FontWeight="Bold" Text="{locale:Locale SettingsTabGraphicsAPI}" />
<TextBlock Classes="h1" Text="{locale:Locale SettingsTabGraphicsAPI}" />
<StackPanel Margin="10,0,0,0" Orientation="Vertical" Spacing="10">
<StackPanel Orientation="Horizontal">
<TextBlock VerticalAlignment="Center"
@ -538,8 +539,10 @@
SelectedIndex="{Binding PreferredGpuIndex}"
Items="{Binding AvailableGpus}"/>
</StackPanel>
</StackPanel>
<Separator Height="1" />
<TextBlock FontWeight="Bold" Text="{locale:Locale SettingsTabGraphicsFeatures}" />
<TextBlock Classes="h1" Text="{locale:Locale SettingsTabGraphicsFeatures}" />
<StackPanel Margin="10,0,0,0" Orientation="Vertical" Spacing="10">
<StackPanel Orientation="Vertical">
<CheckBox IsChecked="{Binding EnableShaderCache}"
ToolTip.Tip="{locale:Locale ShaderCacheToggleTooltip}">
@ -673,7 +676,7 @@
</StackPanel>
</StackPanel>
<Separator Height="1" />
<TextBlock FontWeight="Bold" Text="{locale:Locale SettingsTabGraphicsDeveloperOptions}" />
<TextBlock Classes="h1" Text="{locale:Locale SettingsTabGraphicsDeveloperOptions}" />
<StackPanel
Margin="10,0,0,0"
HorizontalAlignment="Stretch"
@ -698,13 +701,13 @@
VerticalAlignment="Stretch"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Auto">
<Border>
<Border Classes="settings">
<StackPanel
Margin="10,5"
HorizontalAlignment="Stretch"
Orientation="Vertical"
Spacing="10">
<TextBlock FontWeight="Bold" Text="{locale:Locale SettingsTabAudio}" />
<TextBlock Classes="h1" Text="{locale:Locale SettingsTabAudio}" />
<StackPanel Margin="10,0,0,0" Orientation="Horizontal">
<TextBlock VerticalAlignment="Center"
Text="{locale:Locale SettingsTabSystemAudioBackend}"
@ -763,13 +766,13 @@
VerticalAlignment="Stretch"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Auto">
<Border>
<Border Classes="settings">
<StackPanel
Margin="10,5"
HorizontalAlignment="Stretch"
Orientation="Vertical"
Spacing="10">
<TextBlock FontWeight="Bold" Text="{locale:Locale SettingsTabNetworkConnection}" />
<TextBlock Classes="h1" Text="{locale:Locale SettingsTabNetworkConnection}" />
<CheckBox Margin="10,0,0,0" IsChecked="{Binding EnableInternetAccess}">
<TextBlock Text="{locale:Locale SettingsTabSystemEnableInternetAccess}"
ToolTip.Tip="{locale:Locale EnableInternetAccessTooltip}" />
@ -783,13 +786,13 @@
VerticalAlignment="Stretch"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Auto">
<Border>
<Border Classes="settings">
<StackPanel
Margin="10,5"
HorizontalAlignment="Stretch"
Orientation="Vertical"
Spacing="10">
<TextBlock FontWeight="Bold" Text="{locale:Locale SettingsTabLoggingLogging}" />
<TextBlock Classes="h1" Text="{locale:Locale SettingsTabLoggingLogging}" />
<StackPanel Margin="10,0,0,0" Orientation="Vertical">
<CheckBox IsChecked="{Binding EnableFileLog}"
ToolTip.Tip="{locale:Locale FileLogTooltip}">
@ -821,7 +824,7 @@
</CheckBox>
</StackPanel>
<Separator Height="1" />
<TextBlock FontWeight="Bold" Text="{locale:Locale SettingsTabLoggingDeveloperOptions}" />
<TextBlock Classes="h1" Text="{locale:Locale SettingsTabLoggingDeveloperOptions}" />
<StackPanel
Margin="10,0,0,0"
HorizontalAlignment="Stretch"
@ -880,10 +883,15 @@
</Border>
</ScrollViewer>
</Grid>
<ui:NavigationView Grid.Row="1" IsSettingsVisible="False" Name="NavPanel" IsBackEnabled="False"
PaneDisplayMode="LeftCompact"
<ui:NavigationView Grid.Row="1"
IsSettingsVisible="False"
Name="NavPanel"
IsBackEnabled="False"
PaneDisplayMode="Left"
Margin="2,10,10,0"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
OpenPaneLength="200">
<ui:NavigationView.MenuItems>
<ui:NavigationViewItem IsSelected="True"
Content="{locale:Locale SettingsTabGeneral}"