Skip to content

Commit e66d788

Browse files
0x5bfa0x5bfa
committed
Improved the tabbing navigation
1 parent 480dd30 commit e66d788

File tree

3 files changed

+91
-41
lines changed

3 files changed

+91
-41
lines changed

‎src/Files.App.Controls/Omnibar/Omnibar.cs‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,9 @@
22
// Licensed under the MIT License.
33

44
using Microsoft.UI.Xaml.Controls;
5-
using Microsoft.UI.Xaml.Data;
65
using Microsoft.UI.Xaml.Markup;
76
using Microsoft.UI.Xaml.Media.Animation;
87
using Windows.Foundation;
9-
using WinRT;
10-
using static System.Net.Mime.MediaTypeNames;
118

129
namespace Files.App.Controls
1310
{
@@ -108,19 +105,21 @@ public void PopulateModes()
108105
}
109106
}
110107

111-
public void ChangeMode(OmnibarMode modeToExpand, bool useTransition = true)
108+
public void ChangeMode(OmnibarMode modeToExpand, bool shouldFocus = false, bool useTransition = true)
112109
{
113110
if (_modesHostGrid is null || Modes is null)
114111
return;
115112

116-
// Add the reposition transition to the all modes
117-
if (useTransition)
113+
foreach (var mode in Modes)
118114
{
119-
foreach (var mode in Modes)
115+
// Add the reposition transition to the all modes
116+
if (useTransition)
120117
{
121118
mode.Transitions = [new RepositionThemeTransition()];
122119
mode.UpdateLayout();
123120
}
121+
122+
mode.OnChangingCurrentMode(false);
124123
}
125124

126125
var index = _modesHostGrid.Children.IndexOf(modeToExpand);
@@ -155,6 +154,7 @@ public void ChangeMode(OmnibarMode modeToExpand, bool useTransition = true)
155154
_textBox.Select(_textBox.Text.Length, 0);
156155

157156
VisualStateManager.GoToState(CurrentSelectedMode, "Focused", true);
157+
CurrentSelectedMode.OnChangingCurrentMode(true);
158158

159159
if (_isFocused)
160160
{
@@ -171,6 +171,9 @@ public void ChangeMode(OmnibarMode modeToExpand, bool useTransition = true)
171171
VisualStateManager.GoToState(_textBox, "InputAreaVisible", true);
172172
}
173173

174+
if (shouldFocus)
175+
_textBox.Focus(FocusState.Keyboard);
176+
174177
TryToggleIsSuggestionsPopupOpen(_isFocused && CurrentSelectedMode?.SuggestionItemsSource is not null);
175178

176179
// Remove the reposition transition from the all modes

‎src/Files.App.Controls/Omnibar/Omnibar.xaml‎

Lines changed: 49 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,8 @@
3737

3838
<Setter Property="Height" Value="{StaticResource OmnibarDefaultHeight}" />
3939

40+
<Setter Property="IsTabStop" Value="False" />
41+
4042
<Setter Property="Template">
4143
<Setter.Value>
4244
<ControlTemplate TargetType="local:Omnibar">
@@ -79,6 +81,7 @@
7981
x:Name="PART_SuggestionsPopup"
8082
Grid.Row="1"
8183
IsLightDismissEnabled="False"
84+
IsTabStop="False"
8285
ShouldConstrainToRootBounds="False"
8386
VerticalOffset="1">
8487
<Border
@@ -119,37 +122,44 @@
119122
<Setter Property="HorizontalContentAlignment" Value="Left" />
120123
<Setter Property="VerticalAlignment" Value="Stretch" />
121124

125+
<Setter Property="IsTabStop" Value="True" />
126+
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
127+
122128
<Setter Property="Template">
123129
<Setter.Value>
124130
<ControlTemplate TargetType="local:OmnibarMode">
125-
<Grid x:Name="PART_RootGrid" Height="{TemplateBinding Height}">
126-
<!-- Clickable Area -->
127-
<Grid HorizontalAlignment="Left" Background="Transparent">
128-
<Border
129-
x:Name="PART_ModeButton"
130-
Width="{StaticResource OmnibarModeDefaultClickAreaWidth}"
131-
Height="{TemplateBinding Height}"
132-
Background="{TemplateBinding Background}"
133-
BorderBrush="{TemplateBinding BorderBrush}"
134-
BorderThickness="{TemplateBinding BorderThickness}"
135-
CornerRadius="{TemplateBinding CornerRadius}"
136-
ToolTipService.ToolTip="{Binding ModeName, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}">
137-
<Border.BackgroundTransition>
138-
<BrushTransition Duration="0:0:0.083" />
139-
</Border.BackgroundTransition>
140-
141-
<ContentPresenter
142-
x:Name="PART_ModeButtonIconPresenter"
143-
HorizontalAlignment="Center"
144-
VerticalAlignment="Center"
145-
Content="{Binding IconOnInactive, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}" />
146-
</Border>
147-
</Grid>
131+
<Grid
132+
x:Name="PART_RootGrid"
133+
Height="{TemplateBinding Height}"
134+
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
135+
Background="{TemplateBinding Background}"
136+
CornerRadius="{TemplateBinding CornerRadius}"
137+
TabFocusNavigation="Local">
138+
<!-- Mode Button -->
139+
<Border
140+
x:Name="PART_ModeButton"
141+
Width="{StaticResource OmnibarModeDefaultClickAreaWidth}"
142+
Height="{TemplateBinding Height}"
143+
Background="{TemplateBinding Background}"
144+
BorderBrush="{TemplateBinding BorderBrush}"
145+
BorderThickness="{TemplateBinding BorderThickness}"
146+
CornerRadius="{TemplateBinding CornerRadius}"
147+
IsTabStop="True"
148+
ToolTipService.ToolTip="{Binding ModeName, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
149+
UseSystemFocusVisuals="{StaticResource UseSystemFocusVisuals}">
150+
<Border.BackgroundTransition>
151+
<BrushTransition Duration="0:0:0.083" />
152+
</Border.BackgroundTransition>
153+
154+
<ContentPresenter
155+
x:Name="PART_ModeButtonIconPresenter"
156+
HorizontalAlignment="Center"
157+
VerticalAlignment="Center"
158+
Content="{Binding IconOnInactive, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}" />
159+
</Border>
148160

149161
<ContentPresenter
150162
x:Name="PART_InactiveContent"
151-
Grid.Column="0"
152-
Grid.ColumnSpan="2"
153163
HorizontalAlignment="Stretch"
154164
VerticalAlignment="Stretch"
155165
HorizontalContentAlignment="Stretch"
@@ -237,26 +247,32 @@
237247
x:Key="DefaultOmnibarTextBoxStyle"
238248
BasedOn="{StaticResource AutoSuggestBoxTextBoxStyle}"
239249
TargetType="TextBox">
250+
240251
<Setter Property="Foreground" Value="{ThemeResource TextControlForeground}" />
241252
<Setter Property="Background" Value="{ThemeResource TextControlBackground}" />
242253
<Setter Property="BorderBrush" Value="{ThemeResource TextControlBorderBrush}" />
243-
<Setter Property="SelectionHighlightColor" Value="{ThemeResource TextControlSelectionHighlightColor}" />
244254
<Setter Property="BorderThickness" Value="{ThemeResource TextControlBorderThemeThickness}" />
255+
245256
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
246257
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
247-
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto" />
248-
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
249-
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" />
250-
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
251-
<Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
258+
<Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
259+
252260
<Setter Property="MinHeight" Value="{ThemeResource TextControlThemeMinHeight}" />
253261
<Setter Property="MinWidth" Value="{ThemeResource TextControlThemeMinWidth}" />
254262
<Setter Property="Padding" Value="{ThemeResource TextControlThemePadding}" />
263+
255264
<Setter Property="UseSystemFocusVisuals" Value="{ThemeResource IsApplicationFocusVisualKindReveal}" />
265+
266+
<Setter Property="SelectionHighlightColor" Value="{ThemeResource TextControlSelectionHighlightColor}" />
256267
<Setter Property="ContextFlyout" Value="{StaticResource TextControlCommandBarContextFlyout}" />
257268
<Setter Property="SelectionFlyout" Value="{StaticResource TextControlCommandBarSelectionFlyout}" />
258-
<Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
259-
<Setter Property="BackgroundSizing" Value="InnerBorderEdge" />
269+
270+
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto" />
271+
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
272+
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" />
273+
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
274+
<Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
275+
260276
<Setter Property="Template">
261277
<Setter.Value>
262278
<ControlTemplate TargetType="TextBox">

‎src/Files.App.Controls/Omnibar/OmnibarMode.cs‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
// Copyright (c) Files Community
22
// Licensed under the MIT License.
33

4+
using Microsoft.UI.Xaml.Input;
5+
46
namespace Files.App.Controls
57
{
68
[DebuggerDisplay("{" + nameof(ToString) + "(),nq}")]
@@ -14,7 +16,7 @@ public partial class OmnibarMode : Control
1416

1517
private WeakReference<Omnibar>? _ownerRef;
1618

17-
private Border? _modeButton;
19+
private Border _modeButton = null!;
1820

1921
// Constructor
2022

@@ -39,6 +41,30 @@ protected override void OnApplyTemplate()
3941
_modeButton.PointerExited += ModeButton_PointerExited;
4042
}
4143

44+
protected override void OnKeyUp(KeyRoutedEventArgs args)
45+
{
46+
if (args.Handled || IsEnabled is false)
47+
goto cleanup;
48+
49+
if (args.Key is Windows.System.VirtualKey.Enter)
50+
{
51+
if (_ownerRef is null || _ownerRef.TryGetTarget(out var owner) is false || owner.CurrentSelectedMode == this)
52+
return;
53+
54+
VisualStateManager.GoToState(this, "PointerPressed", true);
55+
56+
// Change the current mode
57+
owner.ChangeMode(this, true);
58+
59+
VisualStateManager.GoToState(this, "PointerNormal", true);
60+
}
61+
62+
cleanup:
63+
{
64+
base.OnKeyDown(args);
65+
}
66+
}
67+
4268
private void OmnibarMode_Loaded(object sender, RoutedEventArgs e)
4369
{
4470
// Set this mode as the current mode if it is the default mode
@@ -51,6 +77,11 @@ public void SetOwner(Omnibar owner)
5177
_ownerRef = new(owner);
5278
}
5379

80+
public void OnChangingCurrentMode(bool isCurrentMode)
81+
{
82+
_modeButton.IsTabStop = !isCurrentMode;
83+
}
84+
5485
public override string ToString()
5586
{
5687
return ModeName ?? string.Empty;

0 commit comments

Comments
 (0)