Skip to content

Commit b3aea84

Browse files
yaira2yaira2
authored
Fix: Fixed menu label for overflow items in the toolbar (#17033)
1 parent 28254a9 commit b3aea84

File tree

1 file changed

+43
-33
lines changed

1 file changed

+43
-33
lines changed

‎src/Files.App/Styles/ToolbarButtonStyle.xaml

+43-33
Original file line numberDiff line numberDiff line change
@@ -35,20 +35,16 @@
3535
BorderThickness="{TemplateBinding BorderThickness}"
3636
Control.IsTemplateFocusTarget="True"
3737
CornerRadius="{TemplateBinding CornerRadius}">
38-
3938
<Border.BackgroundTransition>
4039
<BrushTransition Duration="0:0:0.083" />
4140
</Border.BackgroundTransition>
4241
</Border>
43-
4442
<Grid x:Name="ContentRoot" MinHeight="{ThemeResource AppBarThemeMinHeight}">
45-
4643
<Grid.ColumnDefinitions>
47-
<ColumnDefinition Width="30" />
44+
<ColumnDefinition Width="*" />
4845
<ColumnDefinition Width="Auto" />
4946
<ColumnDefinition Width="Auto" />
5047
</Grid.ColumnDefinitions>
51-
5248
<Grid.RowDefinitions>
5349
<RowDefinition Height="Auto" />
5450
<RowDefinition Height="Auto" />
@@ -90,20 +86,19 @@
9086
TextTrimming="Clip"
9187
TextWrapping="NoWrap"
9288
Visibility="Collapsed" />
93-
<FontIcon
94-
x:Name="FlyoutItemChevron"
95-
Grid.Column="2"
96-
Margin="0,12,8,0"
89+
<TextBlock
90+
x:Name="KeyboardAcceleratorTextLabel"
91+
Grid.Column="1"
92+
MinWidth="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.KeyboardAcceleratorTextMinWidth}"
93+
Margin="24,0,12,0"
94+
HorizontalAlignment="Right"
9795
VerticalAlignment="Center"
9896
AutomationProperties.AccessibilityView="Raw"
99-
FontFamily="{ThemeResource SymbolThemeFontFamily}"
100-
FontSize="{ThemeResource AppBarButtonSecondarySubItemChevronFontSize}"
101-
Foreground="{ThemeResource AppBarButtonSubItemChevronForeground}"
102-
Glyph="&#xE70D;" />
103-
<Grid
104-
x:Name="SubItemChevronPanel"
105-
Grid.Column="2"
106-
Visibility="Collapsed">
97+
Foreground="{ThemeResource AppBarButtonKeyboardAcceleratorTextForeground}"
98+
Style="{ThemeResource CaptionTextBlockStyle}"
99+
Text="{TemplateBinding KeyboardAcceleratorTextOverride}"
100+
Visibility="Collapsed" />
101+
<Grid x:Name="SubItemChevronPanel" Grid.Column="2">
107102
<FontIcon
108103
x:Name="SubItemChevron"
109104
Margin="{ThemeResource AppBarButtonSubItemChevronMargin}"
@@ -112,8 +107,9 @@
112107
FontFamily="{ThemeResource SymbolThemeFontFamily}"
113108
FontSize="{ThemeResource AppBarButtonSubItemChevronFontSize}"
114109
Foreground="{ThemeResource AppBarButtonSubItemChevronForeground}"
115-
Glyph="{ThemeResource AppBarButtonFlyoutGlyph}"
116-
MirroredWhenRightToLeft="True" />
110+
Glyph="&#xE70D;"
111+
MirroredWhenRightToLeft="True"
112+
Visibility="Collapsed" />
117113
<FontIcon
118114
x:Name="OverflowSubItemChevron"
119115
Margin="{ThemeResource AppBarButtonSecondarySubItemChevronMargin}"
@@ -134,7 +130,6 @@
134130
<VisualState.Setters>
135131
<Setter Target="AppBarButtonInnerBorder.Margin" Value="{StaticResource AppBarButtonInnerBorderCompactMargin}" />
136132
</VisualState.Setters>
137-
138133
<Storyboard>
139134
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Visibility">
140135
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
@@ -164,19 +159,22 @@
164159
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SubItemChevron" Storyboard.TargetProperty="Margin">
165160
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonSubItemChevronLabelOnRightMargin}" />
166161
</ObjectAnimationUsingKeyFrames>
167-
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="FlyoutItemChevron" Storyboard.TargetProperty="Margin">
168-
<DiscreteObjectKeyFrame KeyTime="0" Value="-4,8,8,0" />
169-
</ObjectAnimationUsingKeyFrames>
170162
</Storyboard>
171163
</VisualState>
172164
<VisualState x:Name="LabelCollapsed">
173165
<Storyboard>
174166
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="MinHeight">
175167
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarThemeCompactHeight}" />
176168
</ObjectAnimationUsingKeyFrames>
169+
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="Width">
170+
<DiscreteObjectKeyFrame KeyTime="0" Value="46" />
171+
</ObjectAnimationUsingKeyFrames>
177172
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Visibility">
178173
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
179174
</ObjectAnimationUsingKeyFrames>
175+
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SubItemChevron" Storyboard.TargetProperty="Margin">
176+
<DiscreteObjectKeyFrame KeyTime="0" Value="0,20,8,0" />
177+
</ObjectAnimationUsingKeyFrames>
180178
</Storyboard>
181179
</VisualState>
182180
<VisualState x:Name="Overflow">
@@ -226,11 +224,9 @@
226224
<Setter Target="OverflowTextLabel.Margin" Value="76,0,12,0" />
227225
</VisualState.Setters>
228226
</VisualState>
229-
230227
</VisualStateGroup>
231228
<VisualStateGroup x:Name="CommonStates">
232229
<VisualState x:Name="Normal" />
233-
234230
<VisualState x:Name="PointerOver">
235231
<VisualState.Setters>
236232
<Setter Target="AppBarButtonInnerBorder.Background" Value="{ThemeResource AppBarButtonBackgroundPointerOver}" />
@@ -239,9 +235,9 @@
239235
<Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
240236
<Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
241237
<Setter Target="SubItemChevron.Foreground" Value="{ThemeResource AppBarButtonSubItemChevronForegroundPointerOver}" />
238+
<Setter Target="KeyboardAcceleratorTextLabel.Foreground" Value="{ThemeResource AppBarButtonKeyboardAcceleratorTextForegroundPointerOver}" />
242239
</VisualState.Setters>
243240
</VisualState>
244-
245241
<VisualState x:Name="Pressed">
246242
<VisualState.Setters>
247243
<Setter Target="AppBarButtonInnerBorder.Background" Value="{ThemeResource AppBarButtonBackgroundPressed}" />
@@ -250,9 +246,9 @@
250246
<Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
251247
<Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
252248
<Setter Target="SubItemChevron.Foreground" Value="{ThemeResource AppBarButtonSubItemChevronForegroundPressed}" />
249+
<Setter Target="KeyboardAcceleratorTextLabel.Foreground" Value="{ThemeResource AppBarButtonKeyboardAcceleratorTextForegroundPressed}" />
253250
</VisualState.Setters>
254251
</VisualState>
255-
256252
<VisualState x:Name="Disabled">
257253
<VisualState.Setters>
258254
<Setter Target="AppBarButtonInnerBorder.Background" Value="{ThemeResource AppBarButtonBackgroundDisabled}" />
@@ -261,6 +257,7 @@
261257
<Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundDisabled}" />
262258
<Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundDisabled}" />
263259
<Setter Target="SubItemChevron.Foreground" Value="{ThemeResource AppBarButtonSubItemChevronForegroundDisabled}" />
260+
<Setter Target="KeyboardAcceleratorTextLabel.Foreground" Value="{ThemeResource AppBarButtonKeyboardAcceleratorTextForegroundDisabled}" />
264261
</VisualState.Setters>
265262
</VisualState>
266263
<VisualState x:Name="OverflowNormal">
@@ -276,6 +273,7 @@
276273
<Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
277274
<Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
278275
<Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
276+
<Setter Target="KeyboardAcceleratorTextLabel.Foreground" Value="{ThemeResource AppBarButtonKeyboardAcceleratorTextForegroundPointerOver}" />
279277
<Setter Target="SubItemChevron.Foreground" Value="{ThemeResource AppBarButtonSubItemChevronForegroundPointerOver}" />
280278
<Setter Target="SubItemChevron.Visibility" Value="Collapsed" />
281279
<Setter Target="OverflowSubItemChevron.Visibility" Value="Visible" />
@@ -288,6 +286,7 @@
288286
<Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
289287
<Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
290288
<Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
289+
<Setter Target="KeyboardAcceleratorTextLabel.Foreground" Value="{ThemeResource AppBarButtonKeyboardAcceleratorTextForegroundPressed}" />
291290
<Setter Target="SubItemChevron.Foreground" Value="{ThemeResource AppBarButtonSubItemChevronForegroundPressed}" />
292291
<Setter Target="SubItemChevron.Visibility" Value="Collapsed" />
293292
<Setter Target="OverflowSubItemChevron.Visibility" Value="Visible" />
@@ -300,12 +299,12 @@
300299
<Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundSubMenuOpened}" />
301300
<Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundSubMenuOpened}" />
302301
<Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundSubMenuOpened}" />
302+
<Setter Target="KeyboardAcceleratorTextLabel.Foreground" Value="{ThemeResource AppBarButtonKeyboardAcceleratorTextForegroundSubMenuOpened}" />
303303
<Setter Target="SubItemChevron.Foreground" Value="{ThemeResource AppBarButtonSubItemChevronForegroundSubMenuOpened}" />
304304
<Setter Target="SubItemChevron.Visibility" Value="Collapsed" />
305305
<Setter Target="OverflowSubItemChevron.Visibility" Value="Visible" />
306306
</VisualState.Setters>
307307
</VisualState>
308-
309308
</VisualStateGroup>
310309
<VisualStateGroup x:Name="InputModeStates">
311310
<VisualState x:Name="InputModeDefault" />
@@ -319,20 +318,31 @@
319318
<Setter Target="OverflowTextLabel.Padding" Value="{ThemeResource AppBarButtonOverflowTextTouchMargin}" />
320319
</VisualState.Setters>
321320
</VisualState>
322-
321+
</VisualStateGroup>
322+
<VisualStateGroup x:Name="KeyboardAcceleratorTextVisibility">
323+
<VisualState x:Name="KeyboardAcceleratorTextCollapsed" />
324+
<VisualState x:Name="KeyboardAcceleratorTextVisible">
325+
<VisualState.Setters>
326+
<Setter Target="KeyboardAcceleratorTextLabel.Visibility" Value="Visible" />
327+
</VisualState.Setters>
328+
</VisualState>
323329
</VisualStateGroup>
324330
<VisualStateGroup x:Name="FlyoutStates">
325-
<VisualState x:Name="NoFlyout" />
331+
<VisualState x:Name="NoFlyout">
332+
<VisualState.Setters>
333+
<Setter Target="SubItemChevronPanel.Visibility" Value="Collapsed" />
334+
</VisualState.Setters>
335+
</VisualState>
326336
<VisualState x:Name="HasFlyout">
327337
<VisualState.Setters>
328-
<Setter Target="SubItemChevronPanel.Visibility" Value="{ThemeResource AppBarButtonHasFlyoutChevronVisibility}" />
338+
<Setter Target="SubItemChevronPanel.Visibility" Value="Visible" />
339+
<Setter Target="SubItemChevron.Visibility" Value="Visible" />
340+
<Setter Target="OverflowSubItemChevron.Visibility" Value="Collapsed" />
329341
</VisualState.Setters>
330342
</VisualState>
331343
</VisualStateGroup>
332-
333344
</VisualStateManager.VisualStateGroups>
334345
</Grid>
335-
336346
</ControlTemplate>
337347
</Setter.Value>
338348
</Setter>

0 commit comments

Comments
 (0)