Skip to content

Feature: Introduce NavigationViewItemButtonStyle to Settings dialog #11584

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 26 commits into from
Mar 10, 2023
Merged

Feature: Introduce NavigationViewItemButtonStyle to Settings dialog #11584

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
b06850d
Refactor SettingsDialog and fix namespaces
0x5bfa Mar 7, 2023
c6dbd87
Merge branch 'main' into 5bfa/introduce-navviewbuttonstyle
0x5bfa Mar 7, 2023
8088baf
Introduce a new style and a new transition
0x5bfa Mar 7, 2023
21874fb
Merge branch '5bfa/introduce-navviewbuttonstyle' of https://github.co…
0x5bfa Mar 7, 2023
f02b61e
Fix build issues
0x5bfa Mar 7, 2023
d0a0ddb
Introduce new settings controls
0x5bfa Mar 7, 2023
ae88ff2
Update control
0x5bfa Mar 7, 2023
9b0e4e7
Revert some changes
0x5bfa Mar 7, 2023
1d3ef15
Revert some changes
0x5bfa Mar 7, 2023
29dba66
Fix corner radiuses
0x5bfa Mar 7, 2023
647e570
Merge branch 'main' into 5bfa/introduce-navviewbuttonstyle
0x5bfa Mar 7, 2023
9d666a3
Fix up codes
0x5bfa Mar 7, 2023
89edecd
Merge branch '5bfa/introduce-navviewbuttonstyle' of https://github.co…
0x5bfa Mar 7, 2023
81b98b3
merge main into this
0x5bfa Mar 8, 2023
f4ad264
Update AboutPage.xaml
yaira2 Mar 8, 2023
ef52583
Fix
0x5bfa Mar 8, 2023
13eb89d
Update App.xaml
yaira2 Mar 8, 2023
1785a59
Brushes
yaira2 Mar 8, 2023
e111d1e
Update SettingsDialog.xaml
yaira2 Mar 8, 2023
2c92979
Fixed item height
yaira2 Mar 8, 2023
dfec127
Merge branch 'main' into 5bfa/introduce-navviewbuttonstyle
yaira2 Mar 8, 2023
68fecbd
Update
0x5bfa Mar 9, 2023
5035ca4
Merge branch '5bfa/introduce-navviewbuttonstyle' of https://github.co…
0x5bfa Mar 9, 2023
0117a41
Update style
0x5bfa Mar 9, 2023
bd0fe6a
Merge branch 'main' into 5bfa/introduce-navviewbuttonstyle
0x5bfa Mar 9, 2023
8521302
Update SettingsDialog.xaml
0x5bfa Mar 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions src/Files.App/App.xaml
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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