Skip to content

Commit

Permalink
Make Settings window responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@xmine64
xmine64 committed Feb 17, 2022
1 parent 0acb0d4 commit 24cd445
Show file tree
Hide file tree
Showing 10 changed files with 207 additions and 108 deletions.
11 changes: 11 additions & 0 deletions MicaForEveryone.UI/App.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 23,17 @@
<Setter Property="FontSize" Value="{StaticResource SecondaryTextFontSize}" />
<Setter Property="Foreground" Value="{ThemeResource TextFillColorSecondaryBrush}" />
</Style>

<Style
x:Key="SettingButtonStyle"
BasedOn="{StaticResource DefaultButtonStyle}"
TargetType="Button">
<Setter Property="BorderBrush" Value="{ThemeResource CardBorderBrush}" />
<Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
<Setter Property="Padding" Value="16,0,16,0" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ResourceDictionary>
</Application.Resources>
</xaml:XamlApplication>
118 changes: 89 additions & 29 deletions MicaForEveryone.UI/SettingsView.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 2,7 @@
x:Class="MicaForEveryone.UI.SettingsView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:animatedvisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals"
xmlns:controls="using:MicaForEveryone.UI.Controls"
xmlns:converters="using:MicaForEveryone.UI.Converters"
xmlns:models="using:MicaForEveryone.UI.Models"
Expand Down Expand Up @@ -81,6 82,40 @@
</Grid>
</mux:Expander.Content>
</mux:Expander>

<Button Command="{x:Bind ViewModel.EditConfigCommand}" Style="{ThemeResource SettingButtonStyle}">
<controls:Setting
x:Uid="OpenInEditorSetting"
Icon="&#xE104;"
Style="{StaticResource ExpanderHeaderSettingStyle}">
<controls:Setting.ActionContent>
<FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="&#xE8A7;" />
</controls:Setting.ActionContent>
</controls:Setting>
</Button>

<Button Command="{x:Bind ViewModel.ReloadConfigAsyncCommand}" Style="{ThemeResource SettingButtonStyle}">
<controls:Setting
x:Uid="ReloadSetting"
Icon="&#xE149;"
Style="{StaticResource ExpanderHeaderSettingStyle}">
<controls:Setting.ActionContent>
<FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="&#xE8A7;" />
</controls:Setting.ActionContent>
</controls:Setting>
</Button>

<Button Command="{x:Bind ViewModel.ResetConfigAsyncCommand}" Style="{ThemeResource SettingButtonStyle}">
<controls:Setting
x:Uid="ResetSetting"
Icon="&#xE10E;"
Style="{StaticResource ExpanderHeaderSettingStyle}">
<controls:Setting.ActionContent>
<FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="&#xE8A7;" />
</controls:Setting.ActionContent>
</controls:Setting>
</Button>

</controls:SettingsGroup>
</StackPanel>
</DataTemplate>
Expand Down Expand Up @@ -285,6 320,7 @@
</UserControl.Resources>

<Grid
x:Name="RootElement"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
TabFocusNavigation="Cycle"
XYFocusKeyboardNavigation="Enabled">
Expand All @@ -294,18 330,37 @@
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

<TextBlock
x:Uid="SettingsTitle"
Grid.Row="0"
Margin="24,12,12,12"
Style="{ThemeResource TitleTextBlockStyle}" />
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>

<AppBarButton
x:Name="RulesAppBarButton"
Grid.Column="0"
Width="48"
Margin="16,10,4,8"
Click="AppBarButton_Click"
LabelPosition="Collapsed">
<AppBarButton.Icon>
<FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="&#xE700;" />
</AppBarButton.Icon>
</AppBarButton>

<TextBlock
x:Name="SettingsTitle"
x:Uid="SettingsTitle"
Grid.Column="1"
Margin="8,8,4,8"
VerticalAlignment="Center"
Style="{ThemeResource TitleTextBlockStyle}" />
</Grid>

<SplitView
x:Name="MainSplitView"
Grid.Row="1"
DisplayMode="Inline"
IsPaneOpen="True"
OpenPaneLength="250"
PaneBackground="Transparent">
PaneBackground="{x:Bind RootElement.Background}">
<SplitView.Pane>
<ListView
IsTabStop="True"
Expand Down Expand Up @@ -377,7 432,7 @@
</ListView>
</SplitView.Pane>
<SplitView.Content>
<ScrollViewer Margin="4" Padding="8,0,8,0">
<ScrollViewer Padding="16,4,16,4">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
Expand Down Expand Up @@ -423,15 478,16 @@

<Grid Grid.Row="2" Margin="8">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>

<CommandBar
Grid.Column="0"
HorizontalAlignment="Left"
DefaultLabelPosition="Right"
IsTabStop="True"
OverflowButtonVisibility="Collapsed"
TabIndex="2"
XYFocusKeyboardNavigation="Enabled">
<AppBarButton
Expand All @@ -455,30 511,14 @@
</AppBarButton>
<AppBarButton
x:Uid="RemoveRuleAppBarButton"
Grid.Column="1"
Margin="2"
Command="{x:Bind ViewModel.RemoveRuleAsyncCommand}"
Icon="Remove" />
<CommandBar.SecondaryCommands>
<AppBarButton
x:Uid="OpenInEditorAppBarButton"
Command="{x:Bind ViewModel.EditConfigCommand}"
Icon="Edit" />
<AppBarButton
x:Uid="ReloadAppBarButton"
Command="{x:Bind ViewModel.ReloadConfigAsyncCommand}"
Icon="Refresh" />
<AppBarButton x:Uid="ResetAppBarButton" Command="{x:Bind ViewModel.ResetConfigAsyncCommand}">
<AppBarButton.Icon>
<FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="&#xE10E;" />
</AppBarButton.Icon>
</AppBarButton>
</CommandBar.SecondaryCommands>
</CommandBar>

<Button
x:Uid="CloseButton"
Grid.Column="2"
Grid.Column="1"
Margin="2"
Command="{x:Bind ViewModel.CloseCommand}"
IsTabStop="True"
Expand All @@ -495,7 535,27 @@
<VisualState.Setters>
<Setter Target="AboutSection.(Grid.Row)" Value="0" />
<Setter Target="AboutSection.(Grid.Column)" Value="1" />
<Setter Target="AboutSection.Margin" Value="24,0,24,0" />
<Setter Target="AboutSection.Margin" Value="48,0,32,0" />
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
</VisualState>
</VisualStateGroup>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="650" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="MainSplitView.PaneBackground" Value="Transparent" />
<Setter Target="MainSplitView.DisplayMode" Value="Inline" />
<Setter Target="MainSplitView.IsPaneOpen" Value="True" />
<Setter Target="MainSplitView.OpenPaneLength" Value="250" />
<Setter Target="RulesAppBarButton.Visibility" Value="Collapsed" />
<Setter Target="SettingsTitle.Margin" Value="24,12,12,12" />
</VisualState.Setters>
</VisualState>
<VisualState>
Expand Down
26 changes: 26 additions & 0 deletions MicaForEveryone.UI/SettingsView.xaml.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 2,7 @@
using Windows.UI.Xaml.Controls;

using MicaForEveryone.UI.ViewModels;
using Microsoft.UI.Xaml.Controls;

namespace MicaForEveryone.UI
{
Expand All @@ -18,5 19,30 @@ private void ListView_Loaded(object sender, RoutedEventArgs args)
{
((ListView)sender).Focus(FocusState.Programmatic);
}

private void AppBarButton_Click(object sender, RoutedEventArgs args)
{
MainSplitView.IsPaneOpen = !MainSplitView.IsPaneOpen;
}

private void RulesAppBarButton_PointerEntered(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
{
AnimatedIcon.SetState((UIElement)sender, "PointerOver");
}

private void RulesAppBarButton_PointerPressed(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
{
AnimatedIcon.SetState((UIElement)sender, "Pressed");
}

private void RulesAppBarButton_PointerReleased(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
{
AnimatedIcon.SetState((UIElement)sender, "Normal");
}

private void RulesAppBarButton_PointerExited(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
{
AnimatedIcon.SetState((UIElement)sender, "Normal");
}
}
}
30 changes: 21 additions & 9 deletions MicaForEveryone.UI/Strings/en-US/Resources.resw
View file
Original file line number Diff line number Diff line change
Expand Up @@ -270,9 270,6 @@ Fix errors then use "Reload config file" option to reload it.</value>
<data name="OkButton.Text" xml:space="preserve">
<value>OK</value>
</data>
<data name="OpenInEditorAppBarButton.Label" xml:space="preserve">
<value>Open config in text editor</value>
</data>
<data name="OpenInEditorMenuItem.Text" xml:space="preserve">
<value>Open in text editor</value>
</data>
Expand All @@ -282,9 279,6 @@ Fix errors then use "Reload config file" option to reload it.</value>
<data name="ProcessNameSuggestBox.Header" xml:space="preserve">
<value>Process Name:</value>
</data>
<data name="ReloadAppBarButton.Label" xml:space="preserve">
<value>Reload config file</value>
</data>
<data name="ReloadMenuItem.Text" xml:space="preserve">
<value>Reload</value>
</data>
Expand All @@ -297,9 291,6 @@ Fix errors then use "Reload config file" option to reload it.</value>
<data name="RemoveRuleAppBarButton.Label" xml:space="preserve">
<value>Remove Rule</value>
</data>
<data name="ResetAppBarButton.Label" xml:space="preserve">
<value>Reset config to default</value>
</data>
<data name="SaveButton.Content" xml:space="preserve">
<value>Save</value>
</data>
Expand Down Expand Up @@ -378,4 369,25 @@ Fix errors then use "Reload config file" option to reload it.</value>
<data name="StyleSetting.Header" xml:space="preserve">
<value>Style</value>
</data>
<data name="OpenInEditorSetting.Description" xml:space="preserve">
<value>Open config file in your default text editor.</value>
</data>
<data name="OpenInEditorSetting.Header" xml:space="preserve">
<value>Edit in Text Editor</value>
</data>
<data name="ReloadSetting.Description" xml:space="preserve">
<value>Reload rules from config file then apply them to all open windows.</value>
</data>
<data name="ReloadSetting.Header" xml:space="preserve">
<value>Reload</value>
</data>
<data name="ResetSetting.Description" xml:space="preserve">
<value>Restore default rules and delete all changes.</value>
</data>
<data name="ResetSetting.Header" xml:space="preserve">
<value>Reset</value>
</data>
<data name="RulesAppBarButton.Label" xml:space="preserve">
<value>Rules</value>
</data>
</root>
12 changes: 6 additions & 6 deletions MicaForEveryone.UI/Strings/es/Resources.resw
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,13 130,13 @@
<value>Acerca de esta aplicación</value>
</data>
<data name="TitleBarColorSetting.Header" xml:space="preserve">
<value>Color de la barra de título:</value>
<value>Color de la barra de título</value>
</data>
<data name="ExtendFrameIntoClientAreaSetting.Header" xml:space="preserve">
<value>Extender el marco al área de cliente</value>
</data>
<data name="BackdropTypeSetting.Header" xml:space="preserve">
<value>Tipo de efecto de fondo:</value>
<value>Tipo de efecto de fondo</value>
</data>
<data name="StartupSetting.Header" xml:space="preserve">
<value>Ejecutar al inicio</value>
Expand Down Expand Up @@ -318,10 318,10 @@
<data name="ClassNameSuggestBox.Description" xml:space="preserve">
<value>Escriba el nombre de clase de ventana</value>
</data>
<data name="OpenInEditorAppBarButton.Label" xml:space="preserve">
<data name="OpenInEditorSetting.Header" xml:space="preserve">
<value>Abrir configuración en el editor de texto</value>
</data>
<data name="ReloadAppBarButton.Label" xml:space="preserve">
<data name="ReloadSetting.Header" xml:space="preserve">
<value>Volver a cargar el archivo de configuración</value>
</data>
<data name="ProcessNameSuggestBox.Description" xml:space="preserve">
Expand All @@ -334,7 334,7 @@
<value>El modo oscuro inmersivo requiere al menos la compilación 19041 de Windows.</value>
</data>
<data name="ConfigFilePathSetting.Header" xml:space="preserve">
<value>Ruta del archivo de configuración:</value>
<value>Ruta del archivo de configuración</value>
</data>
<data name="ConfigFilePathSetting.Description" xml:space="preserve">
<value>Archivo que se usará para guardar y cargar las reglas</value>
Expand All @@ -351,7 351,7 @@
<data name="LanguageSetting.Description" xml:space="preserve">
<value>Establezca su idioma preferido para la interfaz de usuario. La aplicación necesita un reinicio para que surta efecto.</value>
</data>
<data name="ResetAppBarButton.Label" xml:space="preserve">
<data name="ResetSetting.Header" xml:space="preserve">
<value>Restablecer a la configuración predeterminada</value>
</data>
<data name="BlurBehindSetting.Header" xml:space="preserve">
Expand Down
Loading

0 comments on commit 24cd445

Please sign in to comment.