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

Ava GUI: Several UI Fixes (#3991)

Browse Source 
* Fix accessability violations in ListView

* Use accent colour for favourite star

* Hide progress bar when its done

* App Data Formating

- Added space before storage unit
- Changed so minutes have 0 decimals, and hours and days have 1

* Fix theming

* Fix mismatched corner radius

* Fix acceability violations in GridView

* More consistency between Grid and List View

* Fix margin

* Let whitespace defocus controls
This commit is contained in:
Isaac Marovitz 2022-12-05 17:04:18 -05:00 committed by GitHub
parent bbb24d8c7e
commit 121296834a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
29 changed files with 94 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Ryujinx.Ava/Assets/Styles/BaseDark.xaml
View File

@ -58,5 +58,7 @@
<Color x:Key="SystemChromeWhiteColor">#FFFFFFFF</Color>
<Color x:Key="ThemeForegroundColor">#FFFFFFFF</Color>
<Color x:Key="MenuFlyoutPresenterBorderColor">#3D3D3D</Color>
<Color x:Key="AppListBackgroundColor">#0FFFFFFF</Color>
<Color x:Key="AppListHoverBackgroundColor">#1EFFFFFF</Color>
</Styles.Resources>
</Styles>

2
Ryujinx.Ava/Assets/Styles/BaseLight.xaml
View File

@ -50,5 +50,7 @@
<Color x:Key="SystemChromeWhiteColor">#FFFFFFFF</Color>
<Color x:Key="ThemeForegroundColor">#FF000000</Color>
<Color x:Key="MenuFlyoutPresenterBorderColor">#C1C1C1</Color>
<Color x:Key="AppListBackgroundColor">#b3ffffff</Color>
<Color x:Key="AppListHoverBackgroundColor">#80cccccc</Color>
</Styles.Resources>
</Styles>

3
Ryujinx.Ava/Ui/Applet/ErrorAppletWindow.axaml
View File

@ -11,7 +11,8 @@
Height="340"
CanResize="False"
SizeToContent="Height"
mc:Ignorable="d">
mc:Ignorable="d"
Focusable="True">
<Grid
Margin="20"
HorizontalAlignment="Stretch"

3
Ryujinx.Ava/Ui/Applet/SwkbdAppletDialog.axaml
View File

@ -6,7 +6,8 @@
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:window="clr-namespace:Ryujinx.Ava.Ui.Windows"
Width="400"
mc:Ignorable="d">
mc:Ignorable="d"
Focusable="True">
<Grid
Margin="20"
HorizontalAlignment="Stretch"

64
Ryujinx.Ava/Ui/Controls/GameGridView.axaml
View File

@ -10,7 +10,8 @@
xmlns:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
mc:Ignorable="d"
Focusable="True">
<UserControl.Resources>
<controls:BitmapArrayValueConverter x:Key="ByteImage" />
<MenuFlyout x:Key="GameContextMenu" Opened="MenuBase_OnMenuOpened">
@ -113,8 +114,8 @@
<Style Selector="ListBoxItem">
<Setter Property="Padding" Value="0" />
<Setter Property="Margin" Value="5" />
<Setter Property="CornerRadius" Value="5" />
<Setter Property="Background" Value="{DynamicResource SystemAccentColorDark3}" />
<Setter Property="CornerRadius" Value="4" />
<Setter Property="Background" Value="{DynamicResource AppListBackgroundColor}" />
<Style.Animations>
<Animation Duration="0:0:0.7">
<KeyFrame Cue="0%">
@ -132,27 +133,18 @@
</Animation>
</Style.Animations>
</Style>
<Style Selector="ListBoxItem:selected /template/ ContentPresenter">
<Setter Property="Background" Value="{DynamicResource AppListBackgroundColor}" />
</Style>
<Style Selector="ListBoxItem:pointerover /template/ ContentPresenter">
<Setter Property="Background" Value="{DynamicResource AppListHoverBackgroundColor}" />
</Style>
</ListBox.Styles>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.Styles>
<Style Selector="ui|SymbolIcon.small.icon">
<Setter Property="FontSize" Value="15" />
</Style>
<Style Selector="ui|SymbolIcon.normal.icon">
<Setter Property="FontSize" Value="19" />
</Style>
<Style Selector="ui|SymbolIcon.large.icon">
<Setter Property="FontSize" Value="23" />
</Style>
<Style Selector="ui|SymbolIcon.huge.icon">
<Setter Property="FontSize" Value="26" />
</Style>
</Grid.Styles>
<Border
Margin="0"
Padding="{Binding $parent[UserControl].DataContext.GridItemPadding}"
Margin="10"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Classes.huge="{Binding $parent[UserControl].DataContext.IsGridHuge}"
@ -160,57 +152,41 @@
Classes.normal="{Binding $parent[UserControl].DataContext.IsGridMedium}"
Classes.small="{Binding $parent[UserControl].DataContext.IsGridSmall}"
ClipToBounds="True"
CornerRadius="5">
<Grid Margin="0">
CornerRadius="4">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image
Grid.Row="0"
Margin="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Source="{Binding Icon, Converter={StaticResource ByteImage}}" />
<StackPanel
<Panel
Grid.Row="1"
Height="50"
Margin="5"
Margin="0 10 0 0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
IsVisible="{Binding $parent[UserControl].DataContext.ShowNames}">
<TextBlock
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
Text="{Binding TitleName}"
TextAlignment="Center"
TextWrapping="Wrap" />
</StackPanel>
</Panel>
</Grid>
</Border>
<ui:SymbolIcon
Margin="5"
Margin="5,5,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Classes.huge="{Binding $parent[UserControl].DataContext.IsGridHuge}"
Classes.icon="true"
Classes.large="{Binding $parent[UserControl].DataContext.IsGridLarge}"
Classes.normal="{Binding $parent[UserControl].DataContext.IsGridMedium}"
Classes.small="{Binding $parent[UserControl].DataContext.IsGridSmall}"
Foreground="Yellow"
FontSize="16"
Foreground="{DynamicResource SystemAccentColor}"
IsVisible="{Binding Favorite}"
Symbol="StarFilled" />
<ui:SymbolIcon
Margin="5"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Classes.huge="{Binding $parent[UserControl].DataContext.IsGridHuge}"
Classes.icon="true"
Classes.large="{Binding $parent[UserControl].DataContext.IsGridLarge}"
Classes.normal="{Binding $parent[UserControl].DataContext.IsGridMedium}"
Classes.small="{Binding $parent[UserControl].DataContext.IsGridSmall}"
Foreground="Black"
IsVisible="{Binding Favorite}"
Symbol="Star" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>

32
Ryujinx.Ava/Ui/Controls/GameListView.axaml
View File

@ -10,7 +10,8 @@
xmlns:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
d:DesignHeight="450"
d:DesignWidth="800"
mc:Ignorable="d">
mc:Ignorable="d"
Focusable="True">
<UserControl.Resources>
<controls:BitmapArrayValueConverter x:Key="ByteImage" />
<MenuFlyout x:Key="GameContextMenu" Opened="MenuBase_OnMenuOpened">
@ -115,8 +116,8 @@
<Setter Property="Padding" Value="0" />
<Setter Property="Margin" Value="0" />
<Setter Property="CornerRadius" Value="5" />
<Setter Property="BorderBrush" Value="{DynamicResource SystemAccentColorDark3}" />
<Setter Property="BorderThickness" Value="2" />
<Setter Property="Background" Value="{DynamicResource AppListBackgroundColor}" />
<Setter Property="BorderThickness" Value="2"/>
<Style.Animations>
<Animation Duration="0:0:0.7">
<KeyFrame Cue="0%">
@ -134,6 +135,12 @@
</Animation>
</Style.Animations>
</Style>
<Style Selector="ListBoxItem:selected /template/ ContentPresenter">
<Setter Property="Background" Value="{DynamicResource AppListBackgroundColor}" />
</Style>
<Style Selector="ListBoxItem:pointerover /template/ ContentPresenter">
<Setter Property="Background" Value="{DynamicResource AppListHoverBackgroundColor}" />
</Style>
</ListBox.Styles>
<ListBox.ItemTemplate>
<DataTemplate>
@ -152,9 +159,6 @@
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Image
Grid.RowSpan="3"
Grid.Column="0"
@ -169,7 +173,7 @@
HorizontalAlignment="Left"
VerticalAlignment="Top"
Orientation="Vertical"
Spacing="5">
Spacing="5" >
<TextBlock
HorizontalAlignment="Stretch"
Text="{Binding TitleName}"
@ -214,20 +218,10 @@
Margin="-5,-5,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
FontSize="20"
Foreground="Yellow"
FontSize="16"
Foreground="{DynamicResource SystemAccentColor}"
IsVisible="{Binding Favorite}"
Symbol="StarFilled" />
<ui:SymbolIcon
Grid.Row="0"
Grid.Column="0"
Margin="-5,-5,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
FontSize="20"
Foreground="Black"
IsVisible="{Binding Favorite}"
Symbol="Star" />
</Grid>
</Border>
</Grid>

3
Ryujinx.Ava/Ui/Controls/InputDialog.axaml
View File

@ -4,7 +4,8 @@
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"
mc:Ignorable="d">
mc:Ignorable="d"
Focusable="True">
<Grid
Margin="5,10,5,5"
HorizontalAlignment="Stretch"

3
Ryujinx.Ava/Ui/Controls/NavigationDialogHost.axaml
View File

@ -4,7 +4,8 @@
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="Ryujinx.Ava.Ui.Controls.NavigationDialogHost">
x:Class="Ryujinx.Ava.Ui.Controls.NavigationDialogHost"
Focusable="True">
<ui:Frame HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
x:Name="ContentFrame" />
</UserControl>

3
Ryujinx.Ava/Ui/Controls/ProfileImageSelectionDialog.axaml
View File

@ -4,7 +4,8 @@
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:Locale="clr-namespace:Ryujinx.Ava.Common.Locale"
x:Class="Ryujinx.Ava.Ui.Controls.ProfileImageSelectionDialog">
x:Class="Ryujinx.Ava.Ui.Controls.ProfileImageSelectionDialog"
Focusable="True">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="5,10,5, 5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />

3
Ryujinx.Ava/Ui/Controls/RendererHost.axaml
View File

@ -3,5 +3,6 @@
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="Ryujinx.Ava.Ui.Controls.RendererHost">
x:Class="Ryujinx.Ava.Ui.Controls.RendererHost"
Focusable="True">
</UserControl>

3
Ryujinx.Ava/Ui/Controls/SaveManager.axaml
View File

@ -9,7 +9,8 @@
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
Height="400"
Width="550"
x:Class="Ryujinx.Ava.Ui.Controls.SaveManager">
x:Class="Ryujinx.Ava.Ui.Controls.SaveManager"
Focusable="True">
<UserControl.Resources>
<controls:BitmapArrayValueConverter x:Key="ByteImage" />
</UserControl.Resources>

3
Ryujinx.Ava/Ui/Controls/UpdateWaitWindow.axaml
View File

@ -8,7 +8,8 @@
Title="Ryujinx - Waiting"
SizeToContent="WidthAndHeight"
WindowStartupLocation="CenterOwner"
mc:Ignorable="d">
mc:Ignorable="d"
Focusable="True">
<Grid
Margin="20"
HorizontalAlignment="Stretch"

3
Ryujinx.Ava/Ui/Controls/UserEditor.axaml
View File

@ -12,7 +12,8 @@
Margin="0"
MinWidth="500"
Padding="0"
mc:Ignorable="d">
mc:Ignorable="d"
Focusable="True">
<UserControl.Resources>
<controls:BitmapArrayValueConverter x:Key="ByteImage" />
</UserControl.Resources>

3
Ryujinx.Ava/Ui/Controls/UserRecoverer.axaml
View File

@ -10,7 +10,8 @@
xmlns:Locale="clr-namespace:Ryujinx.Ava.Common.Locale"
xmlns:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
xmlns:viewModels="clr-namespace:Ryujinx.Ava.Ui.ViewModels"
x:Class="Ryujinx.Ava.Ui.Controls.UserRecoverer">
x:Class="Ryujinx.Ava.Ui.Controls.UserRecoverer"
Focusable="True">
<Design.DataContext>
<viewModels:UserProfileViewModel />
</Design.DataContext>

3
Ryujinx.Ava/Ui/Controls/UserSelector.axaml
View File

@ -12,7 +12,8 @@
d:DesignHeight="450"
MinWidth="500"
d:DesignWidth="800"
mc:Ignorable="d">
mc:Ignorable="d"
Focusable="True">
<UserControl.Resources>
<controls:BitmapArrayValueConverter x:Key="ByteImage" />
</UserControl.Resources>

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

@ -436,8 +436,6 @@ namespace Ryujinx.Ava.Ui.ViewModels
}
}
public Thickness GridItemPadding => ShowNames ? new Thickness() : new Thickness(5);
public bool ShowMenuAndStatusBar
{
get => _showMenuAndStatusBar;
@ -599,7 +597,6 @@ namespace Ryujinx.Ava.Ui.ViewModels
ConfigurationState.Instance.Ui.ShowNames.Value = value;
OnPropertyChanged();
OnPropertyChanged(nameof(GridItemPadding));
OnPropertyChanged(nameof(GridSizeScale));
ConfigurationState.Instance.ToFileFormat().SaveConfig(Program.ConfigurationPath);
@ -716,7 +713,6 @@ namespace Ryujinx.Ava.Ui.ViewModels
OnPropertyChanged(nameof(IsGridLarge));
OnPropertyChanged(nameof(IsGridHuge));
OnPropertyChanged(nameof(ShowNames));
OnPropertyChanged(nameof(GridItemPadding));
ConfigurationState.Instance.ToFileFormat().SaveConfig(Program.ConfigurationPath);
}
@ -780,6 +776,11 @@ namespace Ryujinx.Ava.Ui.ViewModels
{
_owner.LoadProgressBar.IsVisible = false;
}
if (e.NumAppsLoaded == e.NumAppsFound)
{
_owner.LoadProgressBar.IsVisible = false;
}
});
}

3
Ryujinx.Ava/Ui/Windows/AboutWindow.axaml
View File

@ -15,7 +15,8 @@
CanResize="False"
SizeToContent="Width"
WindowStartupLocation="CenterOwner"
mc:Ignorable="d">
mc:Ignorable="d"
Focusable="True">
<Grid
Margin="15"
HorizontalAlignment="Stretch"

3
Ryujinx.Ava/Ui/Windows/AmiiboWindow.axaml
View File

@ -11,7 +11,8 @@
WindowStartupLocation="CenterOwner"
Width="800" MinHeight="650" Height="650"
SizeToContent="Manual"
MinWidth="600">
MinWidth="600"
Focusable="True">
<Design.DataContext>
<viewModels:AmiiboWindowViewModel />
</Design.DataContext>

3
Ryujinx.Ava/Ui/Windows/AvatarWindow.axaml
View File

@ -11,7 +11,8 @@
xmlns:viewModels="clr-namespace:Ryujinx.Ava.Ui.ViewModels"
xmlns:controls="clr-namespace:Ryujinx.Ava.Ui.Controls"
x:CompileBindings="True"
x:DataType="viewModels:AvatarProfileViewModel">
x:DataType="viewModels:AvatarProfileViewModel"
Focusable="True">
<Design.DataContext>
<viewModels:AvatarProfileViewModel />
</Design.DataContext>

3
Ryujinx.Ava/Ui/Windows/CheatWindow.axaml
View File

@ -12,7 +12,8 @@
MinWidth="500"
MinHeight="500"
WindowStartupLocation="CenterOwner"
mc:Ignorable="d">
mc:Ignorable="d"
Focusable="True">
<Window.Styles>
<Style Selector="TreeViewItem">
<Setter Property="IsExpanded" Value="True" />

3
Ryujinx.Ava/Ui/Windows/ContentDialogOverlayWindow.axaml
View File

@ -8,7 +8,8 @@
xmlns:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
x:Class="Ryujinx.Ava.Ui.Windows.ContentDialogOverlayWindow"
xmlns:window="clr-namespace:Ryujinx.Ava.Ui.Windows"
Title="ContentDialogOverlayWindow">
Title="ContentDialogOverlayWindow"
Focusable="True">
<window:StyleableWindow.Styles>
<Style Selector="ui|ContentDialog /template/ Panel#LayoutRoot">
<Setter Property="Background"

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

@ -13,7 +13,8 @@
d:DesignHeight="800"
d:DesignWidth="800"
x:CompileBindings="False"
mc:Ignorable="d">
mc:Ignorable="d"
Focusable="True">
<Design.DataContext>
<viewModels:ControllerSettingsViewModel />
</Design.DataContext>

3
Ryujinx.Ava/Ui/Windows/DownloadableContentManagerWindow.axaml
View File

@ -14,7 +14,8 @@
MaxHeight="500"
SizeToContent="Height"
WindowStartupLocation="CenterOwner"
mc:Ignorable="d">
mc:Ignorable="d"
Focusable="True">
<Grid Name="DownloadableContentGrid" Margin="15">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />

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

@ -20,7 +20,8 @@
x:CompileBindings="True"
x:DataType="viewModels:MainWindowViewModel"
WindowStartupLocation="CenterScreen"
mc:Ignorable="d">
mc:Ignorable="d"
Focusable="True">
<Window.Styles>
<Style Selector="TitleBar:fullscreen">
<Setter Property="Background" Value="#000000" />

3
Ryujinx.Ava/Ui/Windows/MotionSettingsWindow.axaml
View File

@ -6,7 +6,8 @@
xmlns:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
xmlns:locale="clr-namespace:Ryujinx.Ava.Common.Locale"
mc:Ignorable="d"
x:Class="Ryujinx.Ava.Ui.Windows.MotionSettingsWindow">
x:Class="Ryujinx.Ava.Ui.Windows.MotionSettingsWindow"
Focusable="True">
<Grid Margin="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />

3
Ryujinx.Ava/Ui/Windows/RumbleSettingsWindow.axaml
View File

@ -6,7 +6,8 @@
xmlns:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
xmlns:locale="clr-namespace:Ryujinx.Ava.Common.Locale"
mc:Ignorable="d"
x:Class="Ryujinx.Ava.Ui.Windows.RumbleSettingsWindow">
x:Class="Ryujinx.Ava.Ui.Windows.RumbleSettingsWindow"
Focusable="True">
<Grid Margin="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />

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

@ -18,7 +18,8 @@
WindowStartupLocation="CenterOwner"
x:CompileBindings="True"
x:DataType="viewModels:SettingsViewModel"
mc:Ignorable="d">
mc:Ignorable="d"
Focusable="True">
<Design.DataContext>
<viewModels:SettingsViewModel />
</Design.DataContext>

3
Ryujinx.Ava/Ui/Windows/TitleUpdateWindow.axaml
View File

@ -14,7 +14,8 @@
MaxHeight="400"
SizeToContent="Height"
WindowStartupLocation="CenterOwner"
mc:Ignorable="d">
mc:Ignorable="d"
Focusable="True">
<Grid Margin="15">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />

10
Ryujinx.Ui.Common/App/ApplicationLibrary.cs
View File

@ -467,7 +467,7 @@ namespace Ryujinx.Ui.App.Common
TimePlayed = ConvertSecondsToReadableString(appMetadata.TimePlayed),
LastPlayed = appMetadata.LastPlayed,
FileExtension = Path.GetExtension(applicationPath).ToUpper().Remove(0, 1),
FileSize = (fileSize < 1) ? (fileSize * 1024).ToString("0.##") + "MiB" : fileSize.ToString("0.##") + "GiB",
FileSize = (fileSize < 1) ? (fileSize * 1024).ToString("0.##") + " MiB" : fileSize.ToString("0.##") + " GiB",
Path = applicationPath,
ControlHolder = controlHolder
};
@ -742,19 +742,19 @@ namespace Ryujinx.Ui.App.Common
if (seconds < secondsPerMinute)
{
readableString = $"{seconds}s";
readableString = $"{seconds} seconds";
}
else if (seconds < secondsPerHour)
{
readableString = $"{Math.Round(seconds / secondsPerMinute, 2, MidpointRounding.AwayFromZero)} mins";
readableString = $"{Math.Round(seconds / secondsPerMinute, 0, MidpointRounding.AwayFromZero)} minutes";
}
else if (seconds < secondsPerDay)
{
readableString = $"{Math.Round(seconds / secondsPerHour, 2, MidpointRounding.AwayFromZero)} hrs";
readableString = $"{Math.Round(seconds / secondsPerHour, 1, MidpointRounding.AwayFromZero)} hours";
}
else
{
readableString = $"{Math.Round(seconds / secondsPerDay, 2, MidpointRounding.AwayFromZero)} days";
readableString = $"{Math.Round(seconds / secondsPerDay, 1, MidpointRounding.AwayFromZero)} days";
}
return readableString;