Skip to content

Commit

Permalink
Feature: Introduce the new NavigationViewItem style to Properties win…
Browse files Browse the repository at this point in the history 
…dow (#11672)

Co-authored-by: Yair <[email protected]>
  • Loading branch information
@0x5bfa @yaira2
0x5bfa and yaira2 authored Mar 28, 2023
1 parent 0819aad commit 8ce13fa
Show file tree
Hide file tree
Showing 4 changed files with 115 additions and 110 deletions.
4 changes: 3 additions & 1 deletion src/Files.App/Helpers/FilePropertiesHelpers.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ public static async Task OpenPropertiesWindowAsync(object item, IShellPage assoc
IsMaximizable = false,
MinWidth = 460,
MinHeight = 550,
Width = 600,
Width = 800,
Height = 550,
Content = frame,
Backdrop = new WinUIEx.MicaSystemBackdrop(),
Expand Down Expand Up @@ -103,6 +103,7 @@ public static async Task OpenPropertiesWindowAsync(object item, IShellPage assoc
Y = displayArea.WorkArea.Y
+ Math.Max(0, Math.Min(displayArea.WorkArea.Height - appWindow.Size.Height, pointerPosition.Y - displayArea.WorkArea.Y)),
};

appWindow.Move(appWindowPos);
}
}
Expand All @@ -111,6 +112,7 @@ public static async Task OpenPropertiesWindowAsync(object item, IShellPage assoc
var dialog = new PropertiesDialog();
dialog.propertiesFrame.Tag = dialog;
Navigate(dialog.propertiesFrame);

await dialog.ShowAsync(ContentDialogPlacement.Popup);
}

Expand Down
3 changes: 2 additions & 1 deletion src/Files.App/ResourceDictionaries/NavigationViewItemButtonStyle.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,8 @@

<Thickness x:Key="NavigationViewItemBorderThickness">1,1,1,1</Thickness>
<x:Double x:Key="NavigationViewItemOnLeftMinHeight">40</x:Double>
<Thickness x:Key="NavigationViewCompactItemContentPresenterMargin">2,0,0,0</Thickness>
<Thickness x:Key="NavigationViewItemContentPresenterMargin">2,0,0,2</Thickness>

<Style x:Key="MUX_NavigationViewItemPresenterStyleWhenOnLeftPane" TargetType="primitives:NavigationViewItemPresenter">
<Setter Property="Foreground" Value="{ThemeResource NavigationViewItemForeground}" />
Expand Down Expand Up @@ -118,7 +120,6 @@
<Grid
x:Name="ContentGrid"
MinHeight="{ThemeResource NavigationViewItemOnLeftMinHeight}"
Margin="0,0,14,0"
HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
Expand Down
170 changes: 74 additions & 96 deletions src/Files.App/Views/Properties/MainPropertiesPage.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,28 +7,29 @@
xmlns:helpers="using:Files.App.Helpers"
xmlns:local="using:Files.App.Views.Properties"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:toolkitconvers="using:CommunityToolkit.WinUI.UI.Converters"
xmlns:usercontrols="using:Files.App.UserControls"
xmlns:uc="using:Files.App.UserControls"
xmlns:wctconverters="using:CommunityToolkit.WinUI.UI.Converters"
Background="{ThemeResource App.Theme.BackgroundBrush}"
KeyDown="Page_KeyDown"
Loaded="Page_Loaded"
SizeChanged="MainPropertiesPage_SizeChanged"
mc:Ignorable="d">

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

<toolkitconvers:BoolNegationConverter x:Key="BoolNegationConverter" />
<wctconverters:BoolNegationConverter x:Key="BoolNegationConverter" />

<toolkitconvers:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />

<toolkitconvers:BoolToVisibilityConverter
<wctconverters:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />
<wctconverters:BoolToVisibilityConverter
x:Key="BoolToVisibilityInverseConverter"
FalseValue="Visible"
TrueValue="Collapsed" />

</ResourceDictionary>
</Page.Resources>

Expand All @@ -37,127 +38,104 @@
<RowDefinition Height="36" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<!-- Titlebar -->
<Border
x:Name="TitlebarArea"
Grid.ColumnSpan="2"
Height="36"
Background="Transparent">
<StackPanel
Padding="12,0"
Orientation="Horizontal"
Spacing="8">

<Image
Width="20"
Height="20"
Source="ms-appx:///Assets/AppTiles/Dev/Square44x44Logo.png" />

<TextBlock
VerticalAlignment="Center"
Style="{StaticResource CaptionTextBlockStyle}"
Text="{helpers:ResourceString Name=Properties}" />

</StackPanel>
<Border x:Name="TitlebarArea" Height="40">
<TextBlock
Padding="16,0"
VerticalAlignment="Center"
Style="{StaticResource BodyStrongTextBlockStyle}"
Text="{helpers:ResourceString Name=Properties}" />
</Border>

<!-- Vertical NavigationView whose each items are squared -->
<!-- Main NavigationView -->
<NavigationView
x:Name="MainPropertiesWindowNavigationView"
Grid.Row="1"
Width="80"
IsBackButtonVisible="Collapsed"
IsPaneToggleButtonVisible="False"
IsSettingsVisible="False"
IsTitleBarAutoPaddingEnabled="False"
MenuItemsSource="{x:Bind NavViewItems, Mode=TwoWay}"
OpenPaneLength="88"
OpenPaneLength="180"
PaneDisplayMode="Left"
SelectionChanged="MainPropertiesWindowNavigationView_SelectionChanged">

<NavigationView.MenuItemTemplate>
<DataTemplate x:DataType="local:SquareNavViewItem">
<NavigationViewItem
Height="64"
IsSelected="{x:Bind IsSelected, Mode=TwoWay}"
Tag="{x:Bind ItemType}">
<DataTemplate x:DataType="local:NavigationViewItemButtonStyleItem">
<NavigationViewItem IsSelected="{x:Bind IsSelected, Mode=TwoWay}" Tag="{x:Bind ItemType}">
<NavigationViewItem.Content>
<StackPanel Spacing="4">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<!-- Icon -->
<Viewbox
Width="24"
Height="24"
Width="16"
Height="16"
VerticalAlignment="Center">
<usercontrols:OpacityIcon IsSelected="{x:Bind IsSelected, Mode=OneWay}" Style="{x:Bind OpacityIconStyle, Mode=OneWay}" />
<uc:OpacityIcon IsSelected="{x:Bind IsSelected, Mode=OneWay}" Style="{x:Bind OpacityIconStyle, Mode=OneWay}" />
</Viewbox>

<!-- Label -->
<TextBlock
x:Name="ItemNameLabelTextBlock"
Grid.Row="1"
HorizontalAlignment="Center"
FontSize="10"
Style="{StaticResource CaptionTextBlockStyle}"
Text="{x:Bind Name}" />

</StackPanel>
Grid.Column="1"
Margin="8,0,0,0"
VerticalAlignment="Center"
Style="{StaticResource BodyTextBlockStyle}"
Text="{x:Bind Name}"
Visibility="{x:Bind IsCompact, Converter={StaticResource BoolToVisibilityInverseConverter}, Mode=OneWay}" />

</Grid>
</NavigationViewItem.Content>
</NavigationViewItem>
</DataTemplate>
</NavigationView.MenuItemTemplate>

</NavigationView>
<!-- NavigationView Content, Save/Cancel buttons -->
<NavigationView.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="52" />
</Grid.RowDefinitions>

<Frame x:Name="contentFrame" IsNavigationStackEnabled="False" />

<Grid
Grid.Row="1"
Background="{ThemeResource CardBackgroundFillColorSecondary}"
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
BorderThickness="0,1,0,0">
<StackPanel
Margin="12,0"
HorizontalAlignment="Right"
Orientation="Horizontal"
Spacing="12">

<Button
x:Name="SaveChangesButton"
Width="96"
Click="SaveChangesButton_Click"
Content="{helpers:ResourceString Name=Save}"
Style="{StaticResource AccentButtonStyle}" />

<Button
x:Name="CancelChangesButton"
Width="96"
Click="CancelChangesButton_Click"
Content="{helpers:ResourceString Name=Cancel}" />

</StackPanel>
</Grid>

</Grid>
</NavigationView.Content>

<!-- NavigationView Content, Save/Cancel buttons -->
<Grid
Grid.Row="1"
Grid.Column="1"
Background="{ThemeResource LayerFillColorDefaultBrush}"
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
BorderThickness="1,1,0,0"
CornerRadius="8,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

<Frame x:Name="contentFrame" IsNavigationStackEnabled="False" />

<Grid
Grid.Row="2"
Height="58"
Background="{ThemeResource CardBackgroundFillColorSecondary}"
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
BorderThickness="0,1,0,0">
<StackPanel
Margin="12,0"
HorizontalAlignment="Right"
Orientation="Horizontal"
Spacing="12">

<Button
x:Name="SaveChangesButton"
Width="96"
Click="SaveChangesButton_Click"
Content="{helpers:ResourceString Name=Save}"
Style="{StaticResource AccentButtonStyle}" />

<Button
x:Name="CancelChangesButton"
Width="96"
Click="CancelChangesButton_Click"
Content="{helpers:ResourceString Name=Cancel}" />

</StackPanel>
</Grid>

</Grid>
</NavigationView>

</Grid>
</Page>
Loading

0 comments on commit 8ce13fa

Please sign in to comment.