Skip to content

Commit 359fa4d

Browse files
0x5bfa0x5bfa
committed
Improved the implementation
1 parent 832061f commit 359fa4d

File tree

11 files changed

+314
-76
lines changed

11 files changed

+314
-76
lines changed

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,5 +16,23 @@ public partial class Omnibar
1616
{
1717
[GeneratedDependencyProperty]
1818
public partial IList<OmnibarMode>? Modes { get; set; }
19+
20+
[GeneratedDependencyProperty]
21+
public partial OmnibarMode? CurrentActiveMode { get; set; }
22+
23+
[GeneratedDependencyProperty]
24+
public partial FrameworkElement? DefaultInactiveMode { get; set; }
25+
26+
partial void OnDefaultInactiveModeChanged(FrameworkElement? newValue)
27+
{
28+
if (Modes is null)
29+
return;
30+
31+
foreach (var mode in Modes)
32+
{
33+
//if (mode.UseDefaultInactiveMode)
34+
// mode.ContentOnInactive = newValue;
35+
}
36+
}
1937
}
2038
}

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

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

4+
using CommunityToolkit.WinUI;
45
using Microsoft.UI.Xaml;
56
using Microsoft.UI.Xaml.Controls;
67
using Microsoft.UI.Xaml.Media;
78
using Microsoft.UI.Xaml.Markup;
89
using Microsoft.UI.Xaml.Shapes;
910
using Microsoft.UI.Xaml.Input;
1011
using Microsoft.UI;
12+
using Windows.ApplicationModel.Contacts;
1113

1214
namespace Files.App.Controls
1315
{
@@ -17,12 +19,16 @@ namespace Files.App.Controls
1719
[TemplatePart(Name = "PART_ModesHostGrid", Type = typeof(Grid))]
1820
// Visual states
1921
[TemplateVisualState(Name = "Focused", GroupName = "FocusStates")]
20-
[TemplateVisualState(Name = "Unfocused", GroupName = "FocusStates")]
22+
[TemplateVisualState(Name = "Normal", GroupName = "FocusStates")]
2123
public partial class Omnibar : Control
2224
{
2325
private const string ModesHostGrid = "PART_ModesHostGrid";
26+
private const string AutoSuggestPopup = "PART_AutoSuggestPopup";
27+
private const string AutoSuggestBoxBorder = "PART_AutoSuggestBoxBorder";
2428

2529
private Grid? _modesHostGrid;
30+
private Popup? _autoSuggestPopup;
31+
private Border? _autoSuggestBoxBorder;
2632
private bool _isFocused;
2733

2834
public Omnibar()
@@ -36,11 +42,19 @@ protected override void OnApplyTemplate()
3642
{
3743
_modesHostGrid = GetTemplateChild(ModesHostGrid) as Grid
3844
?? throw new MissingFieldException($"Could not find {ModesHostGrid} in the given {nameof(Omnibar)}'s style.");
45+
_autoSuggestPopup = GetTemplateChild(AutoSuggestPopup) as Popup
46+
?? throw new MissingFieldException($"Could not find {AutoSuggestPopup} in the given {nameof(Omnibar)}'s style.");
47+
_autoSuggestBoxBorder = GetTemplateChild(AutoSuggestBoxBorder) as Border
48+
?? throw new MissingFieldException($"Could not find {AutoSuggestBoxBorder} in the given {nameof(Omnibar)}'s style.");
3949

4050
if (Modes is null)
4151
return;
4252

43-
// Populate the modes1
53+
// Add shadow to the popup and set the proper width
54+
_autoSuggestBoxBorder!.Translation = new(0, 0, 32);
55+
_autoSuggestBoxBorder!.Width = _modesHostGrid!.ActualWidth;
56+
57+
// Populate the modes
4458
foreach (var mode in Modes)
4559
{
4660
// Insert a divider
@@ -63,9 +77,14 @@ protected override void OnApplyTemplate()
6377
_modesHostGrid.ColumnDefinitions.Add(new() { Width = GridLength.Auto });
6478
Grid.SetColumn(mode, _modesHostGrid.Children.Count);
6579
_modesHostGrid.Children.Add(mode);
66-
mode.Host = _modesHostGrid;
80+
mode.Host = this;
81+
82+
//if (mode.UseDefaultInactiveMode)
83+
// mode.ContentOnInactive = DefaultInactiveMode;
6784
}
6885

86+
_modesHostGrid.SizeChanged += ModesHostGrid_SizeChanged;
87+
6988
GotFocus += Omnibar_GotFocus;
7089
LostFocus += Omnibar_LostFocus;
7190

@@ -74,18 +93,54 @@ protected override void OnApplyTemplate()
7493
base.OnApplyTemplate();
7594
}
7695

77-
// Private methods
96+
// Methods
97+
98+
internal void ChangeMode(OmnibarMode modeToExpand)
99+
{
100+
if (_modesHostGrid is null || Modes is null)
101+
throw new NullReferenceException();
102+
103+
// Reset
104+
foreach (var column in _modesHostGrid.ColumnDefinitions)
105+
column.Width = GridLength.Auto;
106+
foreach (var mode in Modes)
107+
VisualStateManager.GoToState(mode, "Unfocused", true);
108+
109+
// Expand the given mode
110+
VisualStateManager.GoToState(modeToExpand, "Focused", true);
111+
_modesHostGrid.ColumnDefinitions[_modesHostGrid.Children.IndexOf(modeToExpand)].Width = new(1, GridUnitType.Star);
112+
113+
CurrentActiveMode = modeToExpand;
114+
115+
UpdateVisualStates();
116+
}
78117

79118
private void UpdateVisualStates()
80119
{
81-
VisualStateManager.GoToState(
82-
this,
83-
_isFocused ? "Focused" : "Normal",
84-
true);
120+
VisualStateManager.GoToState(this, _isFocused ? "Focused" : "Normal", true);
121+
122+
if (CurrentActiveMode is not null && _autoSuggestPopup is not null)
123+
{
124+
// Close anyway
125+
if (_autoSuggestPopup.IsOpen && CurrentActiveMode.SuggestionItemsSource is null)
126+
VisualStateManager.GoToState(this, "PopupClosed", true);
127+
128+
// Decide open or close
129+
if (_isFocused != _autoSuggestPopup.IsOpen)
130+
VisualStateManager.GoToState(this, _isFocused && CurrentActiveMode.SuggestionItemsSource is not null ? "PopupOpened" : "PopupClosed", true);
131+
}
132+
133+
if (CurrentActiveMode is not null)
134+
VisualStateManager.GoToState(CurrentActiveMode, _isFocused ? "Focused" : "CurrentUnfocused", true);
85135
}
86136

87137
// Events
88138

139+
private void ModesHostGrid_SizeChanged(object sender, SizeChangedEventArgs e)
140+
{
141+
_autoSuggestBoxBorder!.Width = _modesHostGrid!.ActualWidth;
142+
}
143+
89144
private void Omnibar_GotFocus(object sender, RoutedEventArgs e)
90145
{
91146
_isFocused = true;
@@ -94,6 +149,13 @@ private void Omnibar_GotFocus(object sender, RoutedEventArgs e)
94149

95150
private void Omnibar_LostFocus(object sender, RoutedEventArgs e)
96151
{
152+
// Ignore when user clicks on the TextBox or the button area of an OmnibarMode, Omnibar still has focus anyway
153+
if (e.OriginalSource.GetType() is not { } originalSourceType ||
154+
originalSourceType == typeof(TextBox) ||
155+
originalSourceType == typeof(OmnibarMode) ||
156+
originalSourceType == typeof(Omnibar))
157+
return;
158+
97159
_isFocused = false;
98160
UpdateVisualStates();
99161
}

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

Lines changed: 60 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -13,24 +13,20 @@
1313
</ResourceDictionary>
1414
</ResourceDictionary.ThemeDictionaries>-->
1515

16-
<x:Double x:Key="OmnibarDefaultHeight">36</x:Double>
17-
<CornerRadius x:Key="OmnibarDefaultCornerRadius">18</CornerRadius>
16+
<x:Double x:Key="OmnibarDefaultHeight">38</x:Double>
17+
<CornerRadius x:Key="OmnibarDefaultCornerRadius">19</CornerRadius>
1818
<Thickness x:Key="OmnibarFocusedBorderThickness">2</Thickness>
1919
<Thickness x:Key="OmnibarUnfocusedBorderThickness">1</Thickness>
2020
<Thickness x:Key="OmnibarUnfocusedRootPadding">1</Thickness>
2121

22-
<x:Double x:Key="OmnibarModeDividerDefaultHeight">24</x:Double>
23-
<SolidColorBrush x:Key="OmnibarModeDivisiderBrush" Color="{ThemeResource DividerStrokeColorDefaultBrush}" />
24-
2522
<Style BasedOn="{StaticResource DefaultOmnibarStyle}" TargetType="local:Omnibar" />
2623

2724
<Style x:Key="DefaultOmnibarStyle" TargetType="local:Omnibar">
2825
<Setter Property="IsTabStop" Value="True" />
29-
<Setter Property="Height" Value="{StaticResource OmnibarDefaultHeight}" />
3026
<Setter Property="UseSystemFocusVisuals" Value="True" />
3127
<Setter Property="HorizontalAlignment" Value="Stretch" />
3228
<Setter Property="Background" Value="{ThemeResource ControlFillColorDefaultBrush}" />
33-
<Setter Property="Padding" Value="{ThemeResource OmnibarUnfocusedRootPadding}" />
29+
<Setter Property="Padding" Value="{StaticResource OmnibarUnfocusedRootPadding}" />
3430
<Setter Property="BorderBrush" Value="{ThemeResource CircleElevationBorderBrush}" />
3531
<Setter Property="BorderThickness" Value="{StaticResource OmnibarUnfocusedBorderThickness}" />
3632
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
@@ -40,24 +36,70 @@
4036
<Setter Property="Template">
4137
<Setter.Value>
4238
<ControlTemplate TargetType="local:Omnibar">
43-
<Grid
44-
x:Name="PART_RootGrid"
45-
Padding="{TemplateBinding Padding}"
46-
Background="{TemplateBinding Background}"
47-
BorderBrush="{TemplateBinding BorderBrush}"
48-
BorderThickness="{TemplateBinding BorderThickness}"
49-
CornerRadius="{TemplateBinding CornerRadius}">
50-
<Grid x:Name="PART_ModesHostGrid" />
39+
<Grid x:Name="PART_RootGrid">
40+
<Grid.RowDefinitions>
41+
<RowDefinition Height="Auto" />
42+
<RowDefinition Height="Auto" />
43+
</Grid.RowDefinitions>
44+
<!-- Input area -->
45+
<Grid
46+
x:Name="PART_ModesHostGrid"
47+
Grid.Row="0"
48+
Height="{StaticResource OmnibarDefaultHeight}"
49+
Padding="{TemplateBinding Padding}"
50+
Background="{TemplateBinding Background}"
51+
BorderBrush="{TemplateBinding BorderBrush}"
52+
BorderThickness="{TemplateBinding BorderThickness}"
53+
CornerRadius="{TemplateBinding CornerRadius}" />
54+
55+
<!-- Auto-suggest box area -->
56+
<Popup
57+
x:Name="PART_AutoSuggestPopup"
58+
Grid.Row="1"
59+
HorizontalAlignment="Stretch"
60+
IsOpen="False"
61+
ShouldConstrainToRootBounds="False">
62+
63+
<Border
64+
x:Name="PART_AutoSuggestBoxBorder"
65+
MaxHeight="200"
66+
Background="{ThemeResource AcrylicBackgroundFillColorDefaultBrush}"
67+
BorderBrush="{ThemeResource SurfaceStrokeColorFlyoutBrush}"
68+
BorderThickness="1"
69+
CornerRadius="{ThemeResource OverlayCornerRadius}">
70+
<Border.Shadow>
71+
<ThemeShadow />
72+
</Border.Shadow>
73+
74+
<ListView
75+
Padding="0,2"
76+
HorizontalAlignment="Stretch"
77+
IsItemClickEnabled="True"
78+
ItemTemplate="{Binding CurrentActiveMode.SuggestionItemTemplate, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
79+
ItemsSource="{Binding CurrentActiveMode.SuggestionItemsSource, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
80+
SelectionMode="None" />
81+
82+
</Border>
83+
</Popup>
5184

5285
<VisualStateManager.VisualStateGroups>
5386

5487
<VisualStateGroup x:Name="PointerStates">
5588
<VisualState x:Name="Normal" />
5689
<VisualState x:Name="Focused">
5790
<VisualState.Setters>
58-
<Setter Target="PART_RootGrid.BorderBrush" Value="{ThemeResource AccentFillColorDefaultBrush}" />
59-
<Setter Target="PART_RootGrid.BorderThickness" Value="{StaticResource OmnibarFocusedBorderThickness}" />
60-
<Setter Target="PART_RootGrid.Margin" Value="-1" />
91+
<Setter Target="PART_ModesHostGrid.Margin" Value="-1" />
92+
<Setter Target="PART_ModesHostGrid.BorderThickness" Value="{StaticResource OmnibarFocusedBorderThickness}" />
93+
<Setter Target="PART_ModesHostGrid.BorderBrush" Value="{ThemeResource AccentFillColorDefaultBrush}" />
94+
</VisualState.Setters>
95+
</VisualState>
96+
</VisualStateGroup>
97+
98+
<VisualStateGroup x:Name="PopupVisibilityStates">
99+
<VisualState x:Name="PopupClosed" />
100+
<VisualState x:Name="PopupOpened">
101+
<VisualState.Setters>
102+
<Setter Target="PART_AutoSuggestPopup.IsOpen" Value="True" />
61103
</VisualState.Setters>
62104
</VisualState>
63105
</VisualStateGroup>

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

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,26 +18,33 @@ public partial class OmnibarMode
1818
public partial string? Text { get; set; }
1919

2020
[GeneratedDependencyProperty]
21-
public partial bool HideContentOnInactive { get; set; }
21+
public partial string? TextPlaceholder { get; set; }
22+
23+
[GeneratedDependencyProperty]
24+
public partial string? ToolTip { get; set; }
25+
26+
[GeneratedDependencyProperty]
27+
public partial bool UseDefaultInactiveMode { get; set; }
28+
29+
[GeneratedDependencyProperty]
30+
public partial FrameworkElement? ContentOnInactive { get; set; }
2231

2332
[GeneratedDependencyProperty]
2433
public partial FrameworkElement? IconOnActive { get; set; }
2534

2635
[GeneratedDependencyProperty]
2736
public partial FrameworkElement? IconOnInactive { get; set; }
2837

38+
[GeneratedDependencyProperty]
39+
public partial object? SuggestionItemsSource { get; set; }
40+
2941
[GeneratedDependencyProperty]
3042
public partial DataTemplate? SuggestionItemTemplate { get; set; }
3143

3244
[GeneratedDependencyProperty]
3345
public partial bool IsDefault { get; set; }
3446

3547
[GeneratedDependencyProperty]
36-
internal partial Grid? Host { get; set; }
37-
38-
partial void OnHostChanged(Grid? newValue)
39-
{
40-
UpdateVisualStates();
41-
}
48+
internal partial Omnibar? Host { get; set; }
4249
}
4350
}

0 commit comments

Comments
 (0)