Skip to content

Commit

Permalink
Feature: Introduce NavigationViewItemButtonStyle to Settings dialog (#…
Browse files Browse the repository at this point in the history 
…11584)
  • Loading branch information
@0x5bfa
0x5bfa authored Mar 10, 2023
1 parent 8d15485 commit e1994de
Show file tree
Hide file tree
Showing 16 changed files with 750 additions and 190 deletions.
3 changes: 0 additions & 3 deletions src/Files.App/App.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@
<SolidColorBrush x:Key="App.Theme.AddressBar.BackgroundBrush" Color="{StaticResource LayerOnMicaBaseAltFillColorDefault}" />
<SolidColorBrush x:Key="App.Theme.Sidebar.BackgroundBrush" Color="{StaticResource CardBackgroundFillColorDefault}" />
<SolidColorBrush x:Key="App.Theme.FileArea.BackgroundBrush" Color="{StaticResource CardBackgroundFillColorDefault}" />
<SolidColorBrush x:Key="App.Theme.ContentDialog.BackgroundBrush" Color="{StaticResource CardBackgroundFillColorSecondary}" />

<SolidColorBrush x:Key="TabViewItemHeaderBackground" Color="{StaticResource SubtleFillColorTransparent}" />
<SolidColorBrush x:Key="TabViewItemHeaderBackgroundSelected" Color="{StaticResource LayerOnMicaBaseAltFillColorDefault}" />
Expand All @@ -56,7 +55,6 @@
<SolidColorBrush x:Key="App.Theme.AddressBar.BackgroundBrush" Color="{StaticResource LayerOnMicaBaseAltFillColorDefault}" />
<SolidColorBrush x:Key="App.Theme.Sidebar.BackgroundBrush" Color="#993A3A3A" />
<SolidColorBrush x:Key="App.Theme.FileArea.BackgroundBrush" Color="#993A3A3A" />
<SolidColorBrush x:Key="App.Theme.ContentDialog.BackgroundBrush" Color="{StaticResource LayerOnMicaBaseAltFillColorSecondary}" />

<SolidColorBrush x:Key="TabViewItemHeaderBackground" Color="{StaticResource SubtleFillColorTransparent}" />
<SolidColorBrush x:Key="TabViewItemHeaderBackgroundSelected" Color="{StaticResource LayerOnMicaBaseAltFillColorDefault}" />
Expand All @@ -68,7 +66,6 @@
<SolidColorBrush x:Key="App.Theme.AddressBar.BackgroundBrush" Color="Transparent" />
<SolidColorBrush x:Key="App.Theme.Sidebar.BackgroundBrush" Color="{StaticResource CardBackgroundFillColorDefault}" />
<SolidColorBrush x:Key="App.Theme.FileArea.BackgroundBrush" Color="{StaticResource CardBackgroundFillColorDefault}" />
<SolidColorBrush x:Key="App.Theme.ContentDialog.BackgroundBrush" Color="{StaticResource SolidBackgroundFillColorBase}" />

<SolidColorBrush x:Key="TabViewItemHeaderBackground" Color="{StaticResource SystemColorWindowColor}" />
<SolidColorBrush x:Key="TabViewItemHeaderBackgroundSelected" Color="{StaticResource LayerFillColorDefault}" />
Expand Down
230 changes: 116 additions & 114 deletions src/Files.App/Dialogs/SettingsDialog.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,133 +6,135 @@
xmlns:helpers="using:Files.App.Helpers"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Closing="ContentDialog_Closing"
DataContext="{x:Bind ViewModel, Mode=OneWay}"
RequestedTheme="{x:Bind RootAppElement.RequestedTheme, Mode=OneWay}"
Style="{StaticResource DefaultContentDialogStyle}"
mc:Ignorable="d">

<ContentDialog.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ms-appx:///ResourceDictionaries/NavigationViewItemButtonStyle.xaml" />
</ResourceDictionary.MergedDictionaries>

<x:Double x:Key="ContentDialogMaxWidth">1100</x:Double>
<Thickness x:Key="ContentDialogPadding">0</Thickness>
</ResourceDictionary>
</ContentDialog.Resources>

<Border Background="{ThemeResource App.Theme.BackgroundBrush}">
<Grid
x:Name="ContainerGrid"
MaxHeight="790"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="{ThemeResource App.Theme.ContentDialog.BackgroundBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="44" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid
x:Name="ContainerGrid"
MaxHeight="790"
Background="{ThemeResource SolidBackgroundFillColorBase}">
<Grid.RowDefinitions>
<RowDefinition Height="44" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>

<Grid
Grid.Row="0"
Padding="8,0"
HorizontalAlignment="Stretch">
<TextBlock
Padding="8,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
FontWeight="SemiBold"
Text="{helpers:ResourceString Name=Settings}" />
<!-- Titlebar -->
<Grid Grid.Row="0" Padding="8,0">
<TextBlock
Padding="8,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
FontWeight="SemiBold"
Text="{helpers:ResourceString Name=Settings}" />

<Button
x:Name="ButtonClose"
Width="36"
Height="36"
HorizontalAlignment="Right"
VerticalAlignment="Center"
AutomationProperties.Name="{helpers:ResourceString Name=Close}"
Background="Transparent"
BorderBrush="Transparent"
Click="ButtonClose_Click"
ToolTipService.ToolTip="{helpers:ResourceString Name=Close}">
<FontIcon FontSize="12" Glyph="&#xE8BB;" />
</Button>
</Grid>
<Button
x:Name="CloseSettingsDialogButton"
Width="36"
Height="36"
HorizontalAlignment="Right"
VerticalAlignment="Center"
AutomationProperties.Name="{helpers:ResourceString Name=Close}"
Background="Transparent"
BorderBrush="Transparent"
Click="CloseSettingsDialogButton_Click"
ToolTipService.ToolTip="{helpers:ResourceString Name=Close}">
<FontIcon FontSize="12" Glyph="&#xE8BB;" />
</Button>
</Grid>

<NavigationView
x:Name="SettingsPane"
Grid.Row="1"
IsBackButtonVisible="Collapsed"
IsBackEnabled="False"
IsPaneToggleButtonVisible="False"
IsSettingsVisible="False"
IsTitleBarAutoPaddingEnabled="False"
OpenPaneLength="260"
PaneDisplayMode="Left"
SelectionChanged="SettingsPane_SelectionChanged">
<!-- Settings Navigation View -->
<NavigationView
x:Name="MainSettingsNavigationView"
Grid.Row="1"
IsBackButtonVisible="Collapsed"
IsBackEnabled="False"
IsPaneToggleButtonVisible="False"
IsSettingsVisible="False"
IsTitleBarAutoPaddingEnabled="False"
OpenPaneLength="260"
PaneDisplayMode="Left"
SelectionChanged="MainSettingsNavigationView_SelectionChanged">

<NavigationView.MenuItems>
<NavigationViewItem
AccessKey="A"
AutomationProperties.AutomationId="SettingsItemAppearance"
Content="{helpers:ResourceString Name=Appearance}"
IsSelected="True"
Tag="0">
<NavigationViewItem.Icon>
<FontIcon HorizontalAlignment="Left" Glyph="&#xE790;" />
</NavigationViewItem.Icon>
</NavigationViewItem>
<NavigationViewItem
AccessKey="P"
AutomationProperties.AutomationId="SettingsItemPreferences"
Content="{helpers:ResourceString Name=SettingsNavPreferences/Content}"
Tag="1">
<NavigationViewItem.Icon>
<FontIcon Glyph="&#xE9E9;" />
</NavigationViewItem.Icon>
</NavigationViewItem>
<NavigationViewItem
AccessKey="F"
AutomationProperties.AutomationId="SettingsItemFolders"
Content="{helpers:ResourceString Name=Folders}"
Tag="2">
<NavigationViewItem.Icon>
<FontIcon Glyph="&#xE8B7;" />
</NavigationViewItem.Icon>
</NavigationViewItem>
<NavigationViewItem
AccessKey="T"
AutomationProperties.AutomationId="SettingsItemTags"
Content="{helpers:ResourceString Name=FileTags}"
Tag="3">
<NavigationViewItem.Icon>
<FontIcon Glyph="&#xE1CB;" />
</NavigationViewItem.Icon>
</NavigationViewItem>
<NavigationViewItem
AccessKey="E"
AutomationProperties.AutomationId="SettingsItemAdvanced"
Content="{helpers:ResourceString Name=Advanced}"
CornerRadius="0"
Tag="4">
<NavigationViewItem.Icon>
<FontIcon Glyph="&#xF1AD;" />
</NavigationViewItem.Icon>
</NavigationViewItem>
<NavigationViewItem
AccessKey="B"
AutomationProperties.AutomationId="SettingsItemAbout"
Content="{helpers:ResourceString Name=About}"
Tag="5">
<NavigationViewItem.Icon>
<FontIcon FontSize="16" Glyph="&#xE946;" />
</NavigationViewItem.Icon>
</NavigationViewItem>
</NavigationView.MenuItems>
<!-- Menu Items -->
<NavigationView.MenuItems>
<NavigationViewItem
AccessKey="A"
AutomationProperties.AutomationId="SettingsItemAppearance"
Content="{helpers:ResourceString Name=Appearance}"
IsSelected="True"
Tag="0">
<NavigationViewItem.Icon>
<FontIcon HorizontalAlignment="Left" Glyph="&#xE790;" />
</NavigationViewItem.Icon>
</NavigationViewItem>
<NavigationViewItem
AccessKey="P"
AutomationProperties.AutomationId="SettingsItemPreferences"
Content="{helpers:ResourceString Name=SettingsNavPreferences/Content}"
Tag="1">
<NavigationViewItem.Icon>
<FontIcon Glyph="&#xE9E9;" />
</NavigationViewItem.Icon>
</NavigationViewItem>
<NavigationViewItem
AccessKey="F"
AutomationProperties.AutomationId="SettingsItemFolders"
Content="{helpers:ResourceString Name=Folders}"
Tag="2">
<NavigationViewItem.Icon>
<FontIcon Glyph="&#xE8B7;" />
</NavigationViewItem.Icon>
</NavigationViewItem>
<NavigationViewItem
AccessKey="T"
AutomationProperties.AutomationId="SettingsItemTags"
Content="{helpers:ResourceString Name=FileTags}"
Tag="3">
<NavigationViewItem.Icon>
<FontIcon Glyph="&#xE1CB;" />
</NavigationViewItem.Icon>
</NavigationViewItem>
<NavigationViewItem
AccessKey="E"
AutomationProperties.AutomationId="SettingsItemAdvanced"
Content="{helpers:ResourceString Name=Advanced}"
Tag="4">
<NavigationViewItem.Icon>
<FontIcon Glyph="&#xF1AD;" />
</NavigationViewItem.Icon>
</NavigationViewItem>
<NavigationViewItem
AccessKey="B"
AutomationProperties.AutomationId="SettingsItemAbout"
Content="{helpers:ResourceString Name=About}"
Tag="5">
<NavigationViewItem.Icon>
<FontIcon FontSize="16" Glyph="&#xE946;" />
</NavigationViewItem.Icon>
</NavigationViewItem>
</NavigationView.MenuItems>

<ScrollViewer
x:Name="SettingsScrollViewer"
VerticalAlignment="Stretch"
VerticalScrollBarVisibility="Visible"
VerticalScrollMode="Enabled">
<Frame x:Name="SettingsContentFrame" Padding="12" />
</ScrollViewer>
</NavigationView>
</Grid>
</Border>
<!-- Content Frame -->
<ScrollViewer x:Name="SettingsContentScrollViewer">
<Frame
x:Name="SettingsContentFrame"
Padding="12"
Background="{ThemeResource SolidBackgroundFillColorTertiary}" />
</ScrollViewer>

</NavigationView>
</Grid>
</ContentDialog>
25 changes: 11 additions & 14 deletions src/Files.App/Dialogs/SettingsDialog.xaml.cs
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
using Files.App.Settings;
using Files.App.Views.Settings;
using Files.Backend.ViewModels.Dialogs;
using Files.Shared.Enums;
using Microsoft.UI.Xaml;
Expand All @@ -10,24 +10,21 @@ namespace Files.App.Dialogs
{
public sealed partial class SettingsDialog : ContentDialog, IDialog<SettingsDialogViewModel>
{
public SettingsDialogViewModel ViewModel
{
get => (SettingsDialogViewModel)DataContext;
set => DataContext = value;
}
public SettingsDialogViewModel ViewModel { get; set; }

// for some reason the requested theme wasn't being set on the content dialog, so this is used to manually bind to the requested app theme
private FrameworkElement RootAppElement => App.Window.Content as FrameworkElement;
private FrameworkElement RootAppElement
=> (FrameworkElement)App.Window.Content;

public SettingsDialog()
{
InitializeComponent();
SettingsPane.SelectedItem = SettingsPane.MenuItems[0];

App.Window.SizeChanged += Current_SizeChanged;
UpdateDialogLayout();
}

public new async Task<DialogResult> ShowAsync() => (DialogResult)await base.ShowAsync();
public new async Task<DialogResult> ShowAsync()
=> (DialogResult)await base.ShowAsync();

private void Current_SizeChanged(object sender, WindowSizeChangedEventArgs e)
{
Expand All @@ -38,10 +35,10 @@ private void UpdateDialogLayout()
{
ContainerGrid.Height = App.Window.Bounds.Height <= 760 ? App.Window.Bounds.Height - 70 : 690;
ContainerGrid.Width = App.Window.Bounds.Width <= 1100 ? App.Window.Bounds.Width : 1100;
SettingsPane.PaneDisplayMode = App.Window.Bounds.Width < 700 ? NavigationViewPaneDisplayMode.LeftCompact : NavigationViewPaneDisplayMode.Left;
MainSettingsNavigationView.PaneDisplayMode = App.Window.Bounds.Width < 700 ? NavigationViewPaneDisplayMode.LeftCompact : NavigationViewPaneDisplayMode.Left;
}

private void SettingsPane_SelectionChanged(NavigationView sender, NavigationViewSelectionChangedEventArgs args)
private void MainSettingsNavigationView_SelectionChanged(NavigationView sender, NavigationViewSelectionChangedEventArgs args)
{
var selectedItem = (NavigationViewItem)args.SelectedItem;
int selectedItemTag = Convert.ToInt32(selectedItem.Tag);
Expand All @@ -63,9 +60,9 @@ private void ContentDialog_Closing(ContentDialog sender, ContentDialogClosingEve
App.Window.SizeChanged -= Current_SizeChanged;
}

private void ButtonClose_Click(object sender, RoutedEventArgs e)
private void CloseSettingsDialogButton_Click(object sender, RoutedEventArgs e)
{
Hide();
}
}
}
}
Loading

0 comments on commit e1994de

Please sign in to comment.