Skip to content

Feature: Added Tab Actions menu to the title bar #15653

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
Jun 25, 2024
Merged

Feature: Added Tab Actions menu to the title bar #15653

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
33470d9
Init
0x5bfa Jun 23, 2024
3b0564f
Merge branch 'main' into 5bfa/CQ-TabBarHeaderButton
yaira2 Jun 24, 2024
d2a6e4b
TabBar.xaml を更新
0x5bfa Jun 24, 2024
0c8d7a2
Commands
yaira2 Jun 24, 2024
486e844
Update TabBar.xaml
yaira2 Jun 25, 2024
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: 3 additions & 0 deletions src/Files.App/Strings/en-US/Resources.resw
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3866,4 +3866,7 @@
<value>Show Toolbar</value>
<comment>Setting that controls if the Toolbar is shown in the main view</comment>
</data>
<data name="TabActions" xml:space="preserve">
<value>Tab actions menu</value>
</data>
</root>
61 changes: 0 additions & 61 deletions src/Files.App/UserControls/InnerNavigationToolbar.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1215,67 +1215,6 @@
Visibility="{x:Bind ShowPreviewPaneButton, Mode=OneWay}">
<local:OpacityIcon IsSelected="{x:Bind Commands.ToggleInfoPane.IsOn, Mode=OneWay}" Style="{x:Bind Commands.ToggleInfoPane.OpacityStyle}" />
</AppBarToggleButton>

<!-- 3 Dots Commands -->
<CommandBar.SecondaryCommands>

<!-- Workaround to enable displaying OpacityIcons in the menu -->
<AppBarButton Visibility="Collapsed">
<AppBarButton.Icon>
<FontIcon Glyph="&#xE737;" />
</AppBarButton.Icon>
</AppBarButton>

<!-- Open New Pane -->
<AppBarButton
x:Name="NavToolbarNewPane"
x:Load="{x:Bind Commands.OpenNewPane.IsExecutable, Mode=OneWay}"
Command="{x:Bind Commands.OpenNewPane, Mode=OneWay}"
Label="{x:Bind Commands.OpenNewPane.Label}"
ToolTipService.ToolTip="{x:Bind Commands.OpenNewPane.LabelWithHotKey, Mode=OneWay}">
<local:OpacityIcon Style="{x:Bind Commands.OpenNewPane.OpacityStyle}" />
</AppBarButton>

<!-- Close Active Pane -->
<AppBarButton
x:Name="NavToolbarCloseActivePane"
x:Load="{x:Bind Commands.CloseActivePane.IsExecutable, Mode=OneWay}"
Command="{x:Bind Commands.CloseActivePane, Mode=OneWay}"
Label="{x:Bind Commands.CloseActivePane.Label}"
ToolTipService.ToolTip="{x:Bind Commands.CloseActivePane.LabelWithHotKey, Mode=OneWay}">
<AppBarButton.Icon>
<FontIcon Foreground="{ThemeResource App.Theme.IconBaseBrush}" Glyph="{x:Bind Commands.CloseActivePane.Glyph.BaseGlyph}" />
</AppBarButton.Icon>
</AppBarButton>

<!-- New Window -->
<AppBarButton
x:Name="NavToolbarNewWindow"
Command="{x:Bind Commands.NewWindow, Mode=OneWay}"
KeyboardAcceleratorTextOverride="{x:Bind Commands.NewWindow.HotKeyText, Mode=OneWay}"
Label="{x:Bind Commands.NewWindow.Label}">
<local:OpacityIcon Style="{x:Bind Commands.NewWindow.OpacityStyle}" />
</AppBarButton>

<!-- Exter Compact Overlay -->
<AppBarButton
x:Name="NavToolbarEnterCompactOverlay"
x:Load="{x:Bind Commands.EnterCompactOverlay.IsExecutable, Mode=OneWay}"
Command="{x:Bind Commands.EnterCompactOverlay}"
Label="{x:Bind Commands.EnterCompactOverlay.Label}">
<local:OpacityIcon Style="{x:Bind Commands.EnterCompactOverlay.OpacityStyle}" />
</AppBarButton>

<!-- Exit Compact Overlay -->
<AppBarButton
x:Name="NavToolbarExitCompactOverlay"
x:Load="{x:Bind Commands.ExitCompactOverlay.IsExecutable, Mode=OneWay}"
Command="{x:Bind Commands.ExitCompactOverlay}"
Label="{x:Bind Commands.ExitCompactOverlay.Label}">
<local:OpacityIcon Style="{x:Bind Commands.ExitCompactOverlay.OpacityStyle}" />
</AppBarButton>

</CommandBar.SecondaryCommands>
</CommandBar>

</Grid>
Expand Down
151 changes: 151 additions & 0 deletions src/Files.App/UserControls/Menus/MenuFlyoutItemWithOpacityIcon.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,151 @@
<!-- Copyright (c) 2024 Files Community. Licensed under the MIT License. See the LICENSE. -->
<MenuFlyoutItem
x:Class="Files.App.UserControls.MenuFlyoutItemWithOpacityIcon"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:Files.App.UserControls"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="300"
d:DesignWidth="400"
HighContrastAdjustment="None"
mc:Ignorable="d">

<MenuFlyoutItem.Style>
<Style TargetType="local:MenuFlyoutItemWithOpacityIcon">
<Setter Property="Padding" Value="{ThemeResource MenuFlyoutItemThemePadding}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:MenuFlyoutItemWithOpacityIcon">

<Grid
x:Name="LayoutRoot"
Margin="{StaticResource MenuFlyoutItemMargin}"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{StaticResource ControlCornerRadius}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>

<Viewbox
x:Name="IconRoot"
Width="16"
Height="16"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Visibility="Collapsed">
<ContentPresenter x:Name="IconContent" Content="{TemplateBinding Icon}" />
</Viewbox>

<Viewbox
Width="16"
Height="16"
Margin="0"
HorizontalAlignment="Left"
VerticalAlignment="Center">
<local:OpacityIcon Style="{TemplateBinding OpacityStyle}" />
</Viewbox>

<TextBlock
x:Name="TextBlock"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Foreground="{TemplateBinding Foreground}"
Text="{TemplateBinding Text}"
TextTrimming="Clip" />

<TextBlock
x:Name="KeyboardAcceleratorTextBlock"
Grid.Column="1"
MinWidth="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.KeyboardAcceleratorTextMinWidth}"
Margin="24,0,0,0"
HorizontalAlignment="Right"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw"
Foreground="{ThemeResource MenuFlyoutItemKeyboardAcceleratorTextForeground}"
Style="{ThemeResource CaptionTextBlockStyle}"
Text="{TemplateBinding KeyboardAcceleratorTextOverride}"
Visibility="Collapsed" />

<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource MenuFlyoutItemBackgroundPointerOver}" />
<Setter Target="TextBlock.Foreground" Value="{ThemeResource MenuFlyoutItemForegroundPointerOver}" />
<Setter Target="IconContent.Foreground" Value="{ThemeResource MenuFlyoutItemForegroundPointerOver}" />
<Setter Target="KeyboardAcceleratorTextBlock.Foreground" Value="{ThemeResource MenuFlyoutItemKeyboardAcceleratorTextForegroundPointerOver}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource MenuFlyoutItemBackgroundPressed}" />
<Setter Target="TextBlock.Foreground" Value="{ThemeResource MenuFlyoutItemForegroundPressed}" />
<Setter Target="IconContent.Foreground" Value="{ThemeResource MenuFlyoutItemForegroundPressed}" />
<Setter Target="KeyboardAcceleratorTextBlock.Foreground" Value="{ThemeResource MenuFlyoutItemKeyboardAcceleratorTextForegroundPressed}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="LayoutRoot.Background" Value="{ThemeResource MenuFlyoutItemBackgroundDisabled}" />
<Setter Target="TextBlock.Foreground" Value="{ThemeResource MenuFlyoutItemForegroundDisabled}" />
<Setter Target="IconContent.Foreground" Value="{ThemeResource MenuFlyoutItemForegroundDisabled}" />
<Setter Target="KeyboardAcceleratorTextBlock.Foreground" Value="{ThemeResource MenuFlyoutItemKeyboardAcceleratorTextForegroundDisabled}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckPlaceholderStates">
<VisualState x:Name="NoPlaceholder" />
<VisualState x:Name="CheckPlaceholder">
<VisualState.Setters>
<Setter Target="TextBlock.Margin" Value="{ThemeResource MenuFlyoutItemPlaceholderThemeThickness}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="IconPlaceholder">
<VisualState.Setters>
<Setter Target="TextBlock.Margin" Value="{ThemeResource MenuFlyoutItemPlaceholderThemeThickness}" />
<Setter Target="IconRoot.Visibility" Value="Visible" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="CheckAndIconPlaceholder">
<VisualState.Setters>
<Setter Target="TextBlock.Margin" Value="{ThemeResource MenuFlyoutItemDoublePlaceholderThemeThickness}" />
<Setter Target="IconRoot.Margin" Value="{ThemeResource MenuFlyoutItemPlaceholderThemeThickness}" />
<Setter Target="IconRoot.Visibility" Value="Visible" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<!-- Narrow padding is only applied when flyout was invoked with pen, mouse or keyboard. -->
<!-- Default padding is applied for all other cases including touch. -->
<VisualStateGroup x:Name="PaddingSizeStates">
<VisualState x:Name="DefaultPadding" />
<VisualState x:Name="NarrowPadding">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Padding">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource MenuFlyoutItemThemePaddingNarrow}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="KeyboardAcceleratorTextVisibility">
<VisualState x:Name="KeyboardAcceleratorTextCollapsed" />
<VisualState x:Name="KeyboardAcceleratorTextVisible">
<VisualState.Setters>
<Setter Target="KeyboardAcceleratorTextBlock.Visibility" Value="Visible" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</MenuFlyoutItem.Style>
</MenuFlyoutItem>
32 changes: 32 additions & 0 deletions src/Files.App/UserControls/Menus/MenuFlyoutItemWithOpacityIcon.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
// Copyright (c) 2024 Files Community
// Licensed under the MIT License. See the LICENSE.

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;

// The User Control element template is documented at https://go.microsoft.com/fwlink/?LinkId=234236

namespace Files.App.UserControls
{
public sealed partial class MenuFlyoutItemWithOpacityIcon: MenuFlyoutItem
{
public Style OpacityStyle
{
get { return (Style)GetValue(OpacityStyleProperty); }
set { SetValue(OpacityStyleProperty, value); }
}

public static readonly DependencyProperty OpacityStyleProperty =
DependencyProperty.Register("OpacityStyle", typeof(Style), typeof(MenuFlyoutItemWithOpacityIcon), new PropertyMetadata(null, OnOpacityStyleChanged));

private static void OnOpacityStyleChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
(d as MenuFlyoutItem).Icon = e.NewValue is not null ? new IconSourceElement() : null;
}

public MenuFlyoutItemWithOpacityIcon()
{
InitializeComponent();
}
}
}
77 changes: 75 additions & 2 deletions src/Files.App/UserControls/TabBar/TabBar.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
xmlns:local="using:Files.App.UserControls.TabBar"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:root="using:Files.App"
xmlns:usercontrols="using:Files.App.UserControls"
mc:Ignorable="d">

<local:BaseTabBar.Resources>
Expand Down Expand Up @@ -58,13 +59,85 @@
</ResourceDictionary>
</local:BaseTabBar.Resources>

<Border
<!-- TODO: Use TitleBar of WinAppSdk 1.6 when available -->
<Grid
x:Name="TitlebarArea"
HorizontalAlignment="Stretch"
x:FieldModifier="public"
Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<!-- Header Button -->
<Border BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}" BorderThickness="0,0,0,1">
<Button
Width="30"
Height="30"
Margin="4,0,-4,0"
Padding="0"
VerticalAlignment="Bottom"
AutomationProperties.Name="{helpers:ResourceString Name=TabActions}"
Background="Transparent"
BorderThickness="0"
ToolTipService.ToolTip="{helpers:ResourceString Name=TabActions}">
<PathIcon Data="M3 0C1.34315 0 0 1.34315 0 3V12C0 13.6569 1.34315 15 3 15H12C13.6569 15 15 13.6569 15 12V3C15 1.34315 13.6569 0 12 0H3ZM1 3C1 1.89543 1.89543 1 3 1H12C13.1046 1 14 1.89543 14 3V4H5.5C4.67157 4 4 4.67157 4 5.5V14H3C1.89543 14 1 13.1046 1 12V3ZM5 14H12C13.1046 14 14 13.1046 14 12V5H5.5C5.22386 5 5 5.22386 5 5.5V14Z" Foreground="{ThemeResource App.Theme.IconBaseBrush}" />

<Button.Flyout>
<MenuFlyout Placement="BottomEdgeAlignedLeft">
<!-- New Window -->
<usercontrols:MenuFlyoutItemWithOpacityIcon
Command="{x:Bind Commands.NewWindow}"
KeyboardAcceleratorTextOverride="{x:Bind Commands.NewWindow.HotKeyText, Mode=OneWay}"
OpacityStyle="{x:Bind Commands.NewWindow.OpacityStyle}"
Text="{x:Bind Commands.NewWindow.Label}" />

<!-- Enter Compact Overlay -->
<usercontrols:MenuFlyoutItemWithOpacityIcon
x:Name="EnterCompactOverlay"
x:Load="{x:Bind Commands.EnterCompactOverlay.IsExecutable, Mode=OneWay}"
Command="{x:Bind Commands.EnterCompactOverlay}"
KeyboardAcceleratorTextOverride="{x:Bind Commands.EnterCompactOverlay.HotKeyText, Mode=OneWay}"
OpacityStyle="{x:Bind Commands.EnterCompactOverlay.OpacityStyle}"
Text="{x:Bind Commands.EnterCompactOverlay.Label}" />

<!-- Exit Compact Overlay -->
<usercontrols:MenuFlyoutItemWithOpacityIcon
x:Name="ExitCompactOverlay"
x:Load="{x:Bind Commands.ExitCompactOverlay.IsExecutable, Mode=OneWay}"
Command="{x:Bind Commands.ExitCompactOverlay}"
OpacityStyle="{x:Bind Commands.ExitCompactOverlay.OpacityStyle}"
Text="{x:Bind Commands.ExitCompactOverlay.Label}" />

<!-- Open New Pane -->
<usercontrols:MenuFlyoutItemWithOpacityIcon
x:Name="NewPane"
x:Load="{x:Bind Commands.OpenNewPane.IsExecutable, Mode=OneWay}"
Command="{x:Bind Commands.OpenNewPane, Mode=OneWay}"
OpacityStyle="{x:Bind Commands.OpenNewPane.OpacityStyle}"
Text="{x:Bind Commands.OpenNewPane.Label}" />

<!-- Close active pane -->
<usercontrols:MenuFlyoutItemWithOpacityIcon
x:Name="CloseActivePane"
x:Load="{x:Bind Commands.CloseActivePane.IsExecutable, Mode=OneWay}"
Command="{x:Bind Commands.CloseActivePane}"
KeyboardAcceleratorTextOverride="{x:Bind Commands.CloseActivePane.HotKeyText, Mode=OneWay}"
Text="{x:Bind Commands.CloseActivePane.Label}">
<MenuFlyoutItem.Icon>
<FontIcon Foreground="{ThemeResource App.Theme.IconBaseBrush}" Glyph="{x:Bind Commands.CloseActivePane.Glyph.BaseGlyph}" />
</MenuFlyoutItem.Icon>
</usercontrols:MenuFlyoutItemWithOpacityIcon>
</MenuFlyout>
</Button.Flyout>
</Button>
</Border>

<!-- TabBar + Draggable Right Padding -->
<TabView
x:Name="HorizontalTabView"
Grid.Column="1"
Margin="0,10,0,0"
Padding="0"
VerticalAlignment="Stretch"
Expand Down Expand Up @@ -146,6 +219,6 @@
</TabView.TabStripFooter>

</TabView>
</Border>
</Grid>

</local:BaseTabBar>
Loading