Skip to content

Feature: Reflect current layout in the Toolbar #12915

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 5 commits into from
Jul 10, 2023
Merged

Feature: Reflect current layout in the Toolbar #12915

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4d09f95
Feature: Update layout button icon as layout changes
ferrariofilippo Jul 10, 2023
b47ab67
Merge branch 'main' into Display_Current_Layout
yaira2 Jul 10, 2023
decf9e7
Fix Tiles icon
yaira2 Jul 10, 2023
b998a74
Merge branch 'Display_Current_Layout' of https://github.com/ferrariof…
yaira2 Jul 10, 2023
15d5287
Reorder layout buttons
ferrariofilippo Jul 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
2 changes: 1 addition & 1 deletion src/Files.App/ResourceDictionaries/PathIcons.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1607,7 +1607,7 @@
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Target="Path1.Fill" Value="Transparent" />
<Setter Target="Path2.Fill" Value="{ThemeResource TextOnAccentFillColorPrimaryBrush}" />
<Setter Target="Path2.Fill" Value="Transparent" />
<Setter Target="Path3.Fill" Value="{ThemeResource TextOnAccentFillColorPrimaryBrush}" />
<Setter Target="Path4.Fill" Value="{ThemeResource TextOnAccentFillColorPrimaryBrush}" />
<Setter Target="Path5.Fill" Value="{ThemeResource TextOnAccentFillColorPrimaryBrush}" />
Expand Down
88 changes: 43 additions & 45 deletions src/Files.App/UserControls/InnerNavigationToolbar.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -604,9 +604,7 @@
Style="{StaticResource ToolBarAppBarButtonFlyoutStyle}"
ToolTipService.ToolTip="{helpers:ResourceString Name=Layout}">

<AppBarButton.Icon>
<FontIcon Glyph="&#xE152;" />
</AppBarButton.Icon>
<local:OpacityIcon Style="{x:Bind ViewModel.LayoutOpacityIcon, Mode=OneWay}" />

<AppBarButton.Flyout>
<Flyout contract8Present:ShouldConstrainToRootBounds="False" Placement="Bottom">
Expand Down Expand Up @@ -662,7 +660,7 @@
Tapped="{x:Bind Commands.LayoutDetails.ExecuteTapped}"
Text="{x:Bind Commands.LayoutDetails.Label}" />

<!-- Tiles Layout -->
<!-- Columns Layout -->
<RadioButton
Grid.Row="1"
Grid.Column="0"
Expand All @@ -672,6 +670,38 @@
Padding="0"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
AutomationProperties.Name="{x:Bind Commands.LayoutColumns.AutomationName}"
Command="{x:Bind Commands.LayoutColumns}"
CornerRadius="{StaticResource ControlCornerRadius}"
GroupName="LayoutRadio"
IsChecked="{x:Bind Commands.LayoutColumns.IsOn, Mode=OneWay}"
Style="{StaticResource DefaultToggleButtonStyle}"
ToolTipService.ToolTip="{x:Bind Commands.LayoutColumns.LabelWithHotKey, Mode=OneWay}">
<local:OpacityIcon
Width="20"
Height="20"
IsSelected="{x:Bind Commands.LayoutColumns.IsOn, Mode=OneWay}"
Style="{x:Bind Commands.LayoutColumns.OpacityStyle}" />
</RadioButton>

<TextBlock
x:Name="NavToolbarColumnsHeader"
Grid.Row="1"
Grid.Column="1"
VerticalAlignment="Center"
Tapped="{x:Bind Commands.LayoutColumns.ExecuteTapped}"
Text="{x:Bind Commands.LayoutColumns.Label}" />

<!-- Tiles Layout -->
<RadioButton
Grid.Row="2"
Grid.Column="0"
Width="36"
Height="32"
MinWidth="0"
Padding="0"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
AutomationProperties.Name="{x:Bind Commands.LayoutTiles.AutomationName}"
Command="{x:Bind Commands.LayoutTiles}"
CornerRadius="{StaticResource ControlCornerRadius}"
Expand All @@ -688,16 +718,16 @@

<TextBlock
x:Name="NavToolbarTilesHeader"
Grid.Row="1"
Grid.Row="2"
Grid.Column="1"
VerticalAlignment="Center"
Tapped="{x:Bind Commands.LayoutTiles.ExecuteTapped}"
Text="{x:Bind Commands.LayoutTiles.Label}" />

<!-- Grid Small Layout -->
<RadioButton
Grid.Row="2"
Grid.Column="0"
Grid.Row="0"
Grid.Column="3"
Width="36"
Height="32"
MinWidth="0"
Expand All @@ -720,15 +750,15 @@

<TextBlock
x:Name="NavToolbarSmallIconsHeader"
Grid.Row="2"
Grid.Column="1"
Grid.Row="0"
Grid.Column="4"
VerticalAlignment="Center"
Tapped="{x:Bind Commands.LayoutGridSmall.ExecuteTapped}"
Text="{x:Bind Commands.LayoutGridSmall.Label}" />

<!-- Grid Medium Layout -->
<RadioButton
Grid.Row="0"
Grid.Row="1"
Grid.Column="3"
Width="36"
Height="32"
Expand All @@ -752,7 +782,7 @@

<TextBlock
x:Name="NavToolbarMediumIconsHeader"
Grid.Row="0"
Grid.Row="1"
Grid.Column="4"
VerticalAlignment="Center"
Tapped="{x:Bind Commands.LayoutGridMedium.ExecuteTapped}"
Expand All @@ -770,7 +800,7 @@

<!-- Grid Large Layout -->
<RadioButton
Grid.Row="1"
Grid.Row="2"
Grid.Column="3"
Width="36"
Height="32"
Expand All @@ -794,44 +824,12 @@

<TextBlock
x:Name="NavToolbarLargeIconsHeader"
Grid.Row="1"
Grid.Row="2"
Grid.Column="4"
VerticalAlignment="Center"
Tapped="{x:Bind Commands.LayoutGridLarge.ExecuteTapped}"
Text="{x:Bind Commands.LayoutGridLarge.Label}" />

<!-- Columns Layout -->
<RadioButton
Grid.Row="2"
Grid.Column="3"
Width="36"
Height="32"
MinWidth="0"
Padding="0"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
AutomationProperties.Name="{x:Bind Commands.LayoutColumns.AutomationName}"
Command="{x:Bind Commands.LayoutColumns}"
CornerRadius="{StaticResource ControlCornerRadius}"
GroupName="LayoutRadio"
IsChecked="{x:Bind Commands.LayoutColumns.IsOn, Mode=OneWay}"
Style="{StaticResource DefaultToggleButtonStyle}"
ToolTipService.ToolTip="{x:Bind Commands.LayoutColumns.LabelWithHotKey, Mode=OneWay}">
<local:OpacityIcon
Width="20"
Height="20"
IsSelected="{x:Bind Commands.LayoutColumns.IsOn, Mode=OneWay}"
Style="{x:Bind Commands.LayoutColumns.OpacityStyle}" />
</RadioButton>

<TextBlock
x:Name="NavToolbarColumnsHeader"
Grid.Row="2"
Grid.Column="4"
VerticalAlignment="Center"
Tapped="{x:Bind Commands.LayoutColumns.ExecuteTapped}"
Text="{x:Bind Commands.LayoutColumns.Label}" />

</Grid>

<!-- (Divider) -->
Expand Down
54 changes: 47 additions & 7 deletions src/Files.App/ViewModels/UserControls/ToolbarViewModel.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,6 @@
// Licensed under the MIT License. See the LICENSE.

using CommunityToolkit.WinUI.UI;
using Files.App.Commands;
using Files.App.Contexts;
using Files.App.Utils.StorageItems;
using Files.App.Utils.Shell;
using Files.Core.Helpers;
using Files.Core.Services;
using Files.Shared.EventArguments;
using Microsoft.UI.Dispatching;
using Microsoft.UI.Xaml;
Expand Down Expand Up @@ -178,7 +172,29 @@ public string? PathText
public CurrentInstanceViewModel InstanceViewModel
{
get => instanceViewModel;
set => SetProperty(ref instanceViewModel, value);
set
{
if (instanceViewModel?.FolderSettings is not null)
instanceViewModel.FolderSettings.PropertyChanged -= FolderSettings_PropertyChanged;

if (SetProperty(ref instanceViewModel, value) && instanceViewModel?.FolderSettings is not null)
{
FolderSettings_PropertyChanged(this, new PropertyChangedEventArgs(nameof(FolderSettingsViewModel.LayoutMode)));
instanceViewModel.FolderSettings.PropertyChanged += FolderSettings_PropertyChanged;
}
}
}

private Style _LayoutOpacityIcon;
public Style LayoutOpacityIcon
{
get => _LayoutOpacityIcon;
set
{
if (SetProperty(ref _LayoutOpacityIcon, value))
{
}
}
}

private PointerRoutedEventArgs? pointerRoutedEventArgs;
Expand Down Expand Up @@ -819,6 +835,30 @@ public async Task SetAddressBarSuggestions(AutoSuggestBox sender, IShellPage she
}
}

private void FolderSettings_PropertyChanged(object? sender, PropertyChangedEventArgs e)
{
switch (e.PropertyName)
{
case nameof(FolderSettingsViewModel.GridViewSize):
case nameof(FolderSettingsViewModel.LayoutMode):
{
LayoutOpacityIcon = instanceViewModel.FolderSettings.LayoutMode switch
{
FolderLayoutModes.TilesView => Commands.LayoutTiles.OpacityStyle!,
FolderLayoutModes.ColumnView => Commands.LayoutColumns.OpacityStyle!,
FolderLayoutModes.GridView =>
instanceViewModel.FolderSettings.GridViewSize <= Constants.Browser.GridViewBrowser.GridViewSizeSmall
? Commands.LayoutGridSmall.OpacityStyle!
: instanceViewModel.FolderSettings.GridViewSize <= Constants.Browser.GridViewBrowser.GridViewSizeMedium
? Commands.LayoutGridMedium.OpacityStyle!
: Commands.LayoutGridLarge.OpacityStyle!,
_ => Commands.LayoutDetails.OpacityStyle!
};
}
break;
}
}

private bool hasItem = false;
public bool HasItem
{
Expand Down