Skip to content
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

Feature: Introduce the new NavigationViewItem style to Properties window #11672

Merged
merged 12 commits into from
Mar 28, 2023
Merged

Feature: Introduce the new NavigationViewItem style to Properties window #11672

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
93c955b
Feature: First trial of introducing new style to props window
0x5bfa Mar 11, 2023
fb5f9cd
Add two different icons
0x5bfa Mar 11, 2023
b803830
Merge branch 'main' into 5bfa/introduce-newnavviewstyle-to-propswnd
0x5bfa Mar 25, 2023
dc12548
Update styles
0x5bfa Mar 26, 2023
a05062b
Update
0x5bfa Mar 26, 2023
7f6361d
Update 2
0x5bfa Mar 26, 2023
83b8a82
Merge branch 'main' into 5bfa/introduce-newnavviewstyle-to-propswnd
yaira2 Mar 26, 2023
6fde494
Update src/Files.App/Views/Properties/MainPropertiesPage.xaml
0x5bfa Mar 26, 2023
6530bcc
Merge branch 'main' into 5bfa/introduce-newnavviewstyle-to-propswnd
yaira2 Mar 26, 2023
9545e1e
Update MainPropertiesPage.xaml
yaira2 Mar 26, 2023
492c377
Suggested changes
yaira2 Mar 27, 2023
4d6daa0
Update FilePropertiesHelpers.cs
yaira2 Mar 28, 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
4 changes: 3 additions & 1 deletion src/Files.App/Helpers/FilePropertiesHelpers.cs
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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