Skip to content

Commit 494b79f

Browse files
0x5bfa0x5bfa
committed
Added a sidebar area to manipulate Omnibar at runtime
1 parent 379941d commit 494b79f

File tree

2 files changed

+118
-101
lines changed

2 files changed

+118
-101
lines changed

‎tests/Files.App.UITests/Files.App.UITests.csproj‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@
1717

1818
<ItemGroup>
1919
<Manifest Include="$(ApplicationManifest)" />
20-
<Content Include="Assets\*.png" />
20+
<Content Include="Assetts\**\*.png" />
21+
<Content Include="Data\**\*.png" />
2122
</ItemGroup>
2223

2324
<ItemGroup>

‎tests/Files.App.UITests/Views/OmnibarPage.xaml‎

Lines changed: 116 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -60,106 +60,122 @@
6060
Text="Files.App.Controls" />
6161
</StackPanel>
6262

63-
<Grid
64-
Grid.Row="1"
65-
Padding="24"
66-
Style="{StaticResource GridExampleControlStyle}">
67-
<controls:Omnibar HorizontalAlignment="Stretch" VerticalAlignment="Center">
68-
69-
<controls:OmnibarMode
70-
IsDefault="True"
71-
Text="Path..."
72-
TextPlaceholder="Enter text..."
73-
ToolTip="Path">
74-
<controls:OmnibarMode.IconOnActive>
75-
<controls:ThemedIcon IsFilled="True" Style="{StaticResource App.ThemedIcons.Omnibar.Path}" />
76-
</controls:OmnibarMode.IconOnActive>
77-
<controls:OmnibarMode.IconOnInactive>
78-
<controls:ThemedIcon IconType="Outline" Style="{StaticResource App.ThemedIcons.Omnibar.Path}" />
79-
</controls:OmnibarMode.IconOnInactive>
80-
<controls:OmnibarMode.ContentOnInactive>
81-
<Grid
82-
Padding="16,0"
83-
HorizontalAlignment="Stretch"
84-
ColumnSpacing="16">
85-
<Grid.ColumnDefinitions>
86-
<ColumnDefinition Width="Auto" />
87-
<ColumnDefinition Width="*" />
88-
<ColumnDefinition Width="Auto" />
89-
</Grid.ColumnDefinitions>
90-
<Image
91-
Grid.Column="0"
92-
Width="16"
93-
Height="16"
94-
Source="/Data/DummyIcon1.png" />
95-
<TextBlock
96-
Grid.Column="1"
97-
VerticalAlignment="Center"
98-
Text="Breadcrumb goes here" />
99-
<FontIcon
100-
Grid.Column="2"
101-
FontSize="14"
102-
Glyph="&#xe70d;" />
103-
</Grid>
104-
</controls:OmnibarMode.ContentOnInactive>
105-
</controls:OmnibarMode>
106-
107-
<controls:OmnibarMode
108-
SuggestionItemsSource="{x:Bind DummyItems1, Mode=OneWay}"
109-
TextPlaceholder="Enter a palette command..."
110-
ToolTip="Palette">
111-
<controls:OmnibarMode.IconOnActive>
112-
<controls:ThemedIcon IsFilled="True" Style="{StaticResource App.ThemedIcons.Omnibar.Commands}" />
113-
</controls:OmnibarMode.IconOnActive>
114-
<controls:OmnibarMode.IconOnInactive>
115-
<controls:ThemedIcon IconType="Outline" Style="{StaticResource App.ThemedIcons.Omnibar.Commands}" />
116-
</controls:OmnibarMode.IconOnInactive>
117-
<controls:OmnibarMode.SuggestionItemTemplate>
118-
<DataTemplate x:DataType="data:DummyItem1">
119-
<Grid Height="48" ColumnSpacing="12">
120-
<Grid.ColumnDefinitions>
121-
<ColumnDefinition Width="Auto" />
122-
<ColumnDefinition Width="*" />
123-
<ColumnDefinition Width="Auto" />
124-
</Grid.ColumnDefinitions>
125-
<StackPanel VerticalAlignment="Center">
126-
<controls:ThemedIcon IconSize="20" Style="{StaticResource App.ThemedIcons.Actions.Copying}" />
127-
</StackPanel>
128-
<StackPanel Grid.Column="1" VerticalAlignment="Center">
129-
<TextBlock
130-
Style="{StaticResource BodyStrongTextBlockStyle}"
131-
Text="{x:Bind Title}"
132-
TextTrimming="CharacterEllipsis"
133-
TextWrapping="NoWrap" />
134-
<TextBlock
135-
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
136-
Style="{StaticResource CaptionTextBlockStyle}"
137-
Text="{x:Bind Description}"
138-
TextTrimming="CharacterEllipsis"
139-
TextWrapping="NoWrap" />
140-
</StackPanel>
141-
<StackPanel Grid.Column="2" VerticalAlignment="Center">
142-
<TextBlock
143-
Text="{x:Bind HotKeys}"
144-
TextTrimming="CharacterEllipsis"
145-
TextWrapping="NoWrap" />
146-
</StackPanel>
147-
</Grid>
148-
</DataTemplate>
149-
</controls:OmnibarMode.SuggestionItemTemplate>
150-
</controls:OmnibarMode>
151-
152-
<controls:OmnibarMode TextPlaceholder="Enter a search query..." ToolTip="Search">
153-
<controls:OmnibarMode.IconOnActive>
154-
<controls:ThemedIcon IsFilled="True" Style="{StaticResource App.ThemedIcons.Omnibar.Search}" />
155-
</controls:OmnibarMode.IconOnActive>
156-
<controls:OmnibarMode.IconOnInactive>
157-
<controls:ThemedIcon IconType="Outline" Style="{StaticResource App.ThemedIcons.Omnibar.Search}" />
158-
</controls:OmnibarMode.IconOnInactive>
159-
</controls:OmnibarMode>
160-
161-
</controls:Omnibar>
162-
</Grid>
63+
<StackPanel Grid.Row="1" Spacing="24">
64+
65+
<StackPanel Spacing="8">
66+
67+
<TextBlock Style="{StaticResource BodyStrongTextBlockStyle}" Text="Default usage" />
68+
69+
<Grid Style="{StaticResource GridExampleControlStyle}">
70+
<Grid.ColumnDefinitions>
71+
<ColumnDefinition Width="*" />
72+
<ColumnDefinition Width="320" />
73+
</Grid.ColumnDefinitions>
74+
75+
<StackPanel Padding="24">
76+
<controls:Omnibar HorizontalAlignment="Stretch" VerticalAlignment="Center">
77+
78+
<controls:OmnibarMode
79+
IsDefault="True"
80+
Text="Path..."
81+
TextPlaceholder="Enter text..."
82+
ToolTip="Path">
83+
<controls:OmnibarMode.IconOnActive>
84+
<controls:ThemedIcon IsFilled="True" Style="{StaticResource App.ThemedIcons.Omnibar.Path}" />
85+
</controls:OmnibarMode.IconOnActive>
86+
<controls:OmnibarMode.IconOnInactive>
87+
<controls:ThemedIcon IconType="Outline" Style="{StaticResource App.ThemedIcons.Omnibar.Path}" />
88+
</controls:OmnibarMode.IconOnInactive>
89+
<controls:OmnibarMode.ContentOnInactive>
90+
<Grid Padding="16,0" ColumnSpacing="16">
91+
<Grid.ColumnDefinitions>
92+
<ColumnDefinition Width="Auto" />
93+
<ColumnDefinition Width="*" />
94+
<ColumnDefinition Width="Auto" />
95+
</Grid.ColumnDefinitions>
96+
<Image
97+
Grid.Column="0"
98+
Width="16"
99+
Height="16"
100+
Source="/Data/DummyIcon1.png" />
101+
<TextBlock
102+
Grid.Column="1"
103+
VerticalAlignment="Center"
104+
Text="Breadcrumb goes here" />
105+
<FontIcon
106+
Grid.Column="2"
107+
FontSize="14"
108+
Glyph="&#xe70d;" />
109+
</Grid>
110+
</controls:OmnibarMode.ContentOnInactive>
111+
</controls:OmnibarMode>
112+
113+
<controls:OmnibarMode
114+
SuggestionItemsSource="{x:Bind DummyItems1, Mode=OneWay}"
115+
TextPlaceholder="Enter a palette command..."
116+
ToolTip="Palette">
117+
<controls:OmnibarMode.IconOnActive>
118+
<controls:ThemedIcon IsFilled="True" Style="{StaticResource App.ThemedIcons.Omnibar.Commands}" />
119+
</controls:OmnibarMode.IconOnActive>
120+
<controls:OmnibarMode.IconOnInactive>
121+
<controls:ThemedIcon IconType="Outline" Style="{StaticResource App.ThemedIcons.Omnibar.Commands}" />
122+
</controls:OmnibarMode.IconOnInactive>
123+
<controls:OmnibarMode.SuggestionItemTemplate>
124+
<DataTemplate x:DataType="data:DummyItem1">
125+
<Grid Height="48" ColumnSpacing="12">
126+
<Grid.ColumnDefinitions>
127+
<ColumnDefinition Width="Auto" />
128+
<ColumnDefinition Width="*" />
129+
<ColumnDefinition Width="Auto" />
130+
</Grid.ColumnDefinitions>
131+
<StackPanel VerticalAlignment="Center">
132+
<controls:ThemedIcon IconSize="20" Style="{StaticResource App.ThemedIcons.Actions.Copying}" />
133+
</StackPanel>
134+
<StackPanel Grid.Column="1" VerticalAlignment="Center">
135+
<TextBlock
136+
Style="{StaticResource BodyStrongTextBlockStyle}"
137+
Text="{x:Bind Title}"
138+
TextTrimming="CharacterEllipsis"
139+
TextWrapping="NoWrap" />
140+
<TextBlock
141+
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
142+
Style="{StaticResource CaptionTextBlockStyle}"
143+
Text="{x:Bind Description}"
144+
TextTrimming="CharacterEllipsis"
145+
TextWrapping="NoWrap" />
146+
</StackPanel>
147+
<StackPanel Grid.Column="2" VerticalAlignment="Center">
148+
<TextBlock
149+
Text="{x:Bind HotKeys}"
150+
TextTrimming="CharacterEllipsis"
151+
TextWrapping="NoWrap" />
152+
</StackPanel>
153+
</Grid>
154+
</DataTemplate>
155+
</controls:OmnibarMode.SuggestionItemTemplate>
156+
</controls:OmnibarMode>
157+
158+
<controls:OmnibarMode TextPlaceholder="Enter a search query..." ToolTip="Search">
159+
<controls:OmnibarMode.IconOnActive>
160+
<controls:ThemedIcon IsFilled="True" Style="{StaticResource App.ThemedIcons.Omnibar.Search}" />
161+
</controls:OmnibarMode.IconOnActive>
162+
<controls:OmnibarMode.IconOnInactive>
163+
<controls:ThemedIcon IconType="Outline" Style="{StaticResource App.ThemedIcons.Omnibar.Search}" />
164+
</controls:OmnibarMode.IconOnInactive>
165+
</controls:OmnibarMode>
166+
167+
</controls:Omnibar>
168+
</StackPanel>
169+
170+
<!-- Example Controls -->
171+
<StackPanel
172+
Grid.Column="1"
173+
Orientation="Vertical"
174+
Style="{StaticResource StackPanelControlTestingStyle}" />
175+
176+
</Grid>
177+
</StackPanel>
178+
</StackPanel>
163179

164180
</Grid>
165181
</Page>

0 commit comments

Comments
 (0)