Skip to content

Commit 6e8351c

Browse files
yaira2yaira2
committed
Feature: Improved responsive design on the actions page
1 parent 5a01754 commit 6e8351c

File tree

1 file changed

+103
-144
lines changed

1 file changed

+103
-144
lines changed

‎src/Files.App/Views/Settings/ActionsPage.xaml‎

Lines changed: 103 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
x:Class="Files.App.Views.Settings.ActionsPage"
44
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
55
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
6+
xmlns:controls="using:CommunityToolkit.WinUI.Controls"
67
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
78
xmlns:dataitems="using:Files.App.Data.Items"
89
xmlns:helpers="using:Files.App.Helpers"
@@ -209,150 +210,108 @@
209210
<ListView.ItemTemplate>
210211
<DataTemplate x:DataType="dataitems:ModifiableActionItem">
211212
<UserControl PointerEntered="RootGrid_PointerEntered" PointerExited="RootGrid_PointerExited">
212-
<Grid
213-
x:Name="RootGrid"
214-
Padding="16,12"
215-
Background="{ThemeResource ExpanderHeaderBackground}"
216-
BorderBrush="{ThemeResource ExpanderHeaderBorderBrush}"
217-
BorderThickness="1"
218-
ColumnSpacing="12"
219-
CornerRadius="{StaticResource ControlCornerRadius}">
220-
<Grid.ColumnDefinitions>
221-
<ColumnDefinition Width="*" />
222-
<ColumnDefinition Width="Auto" />
223-
<ColumnDefinition Width="32" />
224-
<ColumnDefinition Width="32" />
225-
<ColumnDefinition Width="32" />
226-
</Grid.ColumnDefinitions>
227-
228-
<!-- Title & Description -->
229-
<StackPanel Spacing="2">
230-
<StackPanel Orientation="Horizontal" Spacing="8">
231-
<TextBlock
232-
Style="{StaticResource BodyTextBlockStyle}"
233-
Text="{x:Bind CommandLabel}"
234-
TextTrimming="CharacterEllipsis"
235-
TextWrapping="NoWrap" />
236-
237-
<!-- TODO, decide if we want to add an indicator for custom actions -->
238-
<Border
239-
x:Name="CustomizedIndicatorCircleBorder"
240-
Width="8"
241-
Height="8"
242-
x:Load="{x:Bind IsDefinedByDefault, Converter={StaticResource BoolNegationConverter}, Mode=OneWay}"
243-
Background="{ThemeResource SystemAccentColor}"
244-
CornerRadius="{StaticResource ControlCornerRadius}"
245-
ToolTipService.ToolTip="{helpers:ResourceString Name=Customized}"
246-
Visibility="Collapsed" />
247-
</StackPanel>
248-
<TextBlock
249-
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
250-
Style="{StaticResource CaptionTextBlockStyle}"
251-
Text="{x:Bind CommandDescription}"
252-
TextTrimming="CharacterEllipsis"
253-
TextWrapping="WrapWholeWords" />
254-
</StackPanel>
255-
256-
<!-- Key Binding Control -->
257-
<keyboard:KeyboardShortcut
258-
x:Name="KeyboardShortcutControl"
259-
Grid.Column="1"
260-
HorizontalAlignment="Right"
261-
VerticalAlignment="Center"
262-
HotKeys="{x:Bind KeyBindings, Mode=OneWay}"
263-
Visibility="{x:Bind IsInEditMode, Converter={StaticResource NegationBoolToVisibilityConverter}, Mode=OneWay}" />
264-
265-
<!-- Editor (Using PreviewKeyDown to prevent Ctrl+A) -->
266-
<TextBox
267-
x:Name="KeyBindingEditorTextBox"
268-
Grid.Column="1"
269-
Width="144"
270-
VerticalAlignment="Center"
271-
x:Load="{x:Bind IsInEditMode, Mode=OneWay}"
272-
IsReadOnly="True"
273-
IsSpellCheckEnabled="False"
274-
IsTabStop="True"
275-
Loaded="KeyBindingEditorTextBox_Loaded"
276-
PreviewKeyDown="KeyBindingEditorTextBox_PreviewKeyDown"
277-
Text="{x:Bind LocalizedKeyBindingLabel, Mode=TwoWay}"
278-
TextAlignment="Right" />
279-
280-
<!-- Edit Button -->
281-
<Button
282-
x:Name="EditButton"
283-
Grid.Column="2"
284-
Width="32"
285-
Height="32"
286-
Padding="0"
287-
x:Load="{x:Bind IsInEditMode, Converter={StaticResource BoolNegationConverter}, Mode=OneWay}"
288-
AutomationProperties.Name="{helpers:ResourceString Name=Edit}"
289-
Command="{Binding ElementName=PageRoot, Path=DataContext.EditCommand, Mode=OneWay}"
290-
CommandParameter="{x:Bind}"
291-
ToolTipService.ToolTip="{helpers:ResourceString Name=Edit}"
292-
Visibility="Collapsed">
293-
<FontIcon FontSize="14" Glyph="&#xE70F;" />
294-
</Button>
295-
296-
<!-- Save Button -->
297-
<Button
298-
x:Name="SaveButton"
299-
Grid.Column="2"
300-
Width="32"
301-
Height="32"
302-
Padding="0"
303-
x:Load="{x:Bind IsInEditMode, Mode=OneWay}"
304-
AutomationProperties.Name="{helpers:ResourceString Name=Save}"
305-
Command="{Binding ElementName=PageRoot, Path=DataContext.SaveCommand, Mode=OneWay}"
306-
CommandParameter="{x:Bind}"
307-
IsEnabled="{x:Bind IsValidKeyBinding, Mode=OneWay}"
308-
Style="{StaticResource AccentButtonStyle}"
309-
ToolTipService.ToolTip="{helpers:ResourceString Name=Save}">
310-
<FontIcon FontSize="14" Glyph="&#xE73E;" />
311-
</Button>
312-
313-
<!-- Cancel Button -->
314-
<Button
315-
x:Name="CancelButton"
316-
Grid.Column="3"
317-
Width="32"
318-
Height="32"
319-
Padding="0"
320-
x:Load="{x:Bind IsInEditMode, Mode=OneWay}"
321-
AutomationProperties.Name="{helpers:ResourceString Name=Cancel}"
322-
Command="{Binding ElementName=PageRoot, Path=DataContext.CancelCommand, Mode=OneWay}"
323-
CommandParameter="{x:Bind}"
324-
IsEnabled="{x:Bind IsInEditMode, Mode=OneWay}"
325-
ToolTipService.ToolTip="{helpers:ResourceString Name=Cancel}">
326-
<FontIcon FontSize="14" Glyph="&#xE711;" />
327-
</Button>
328-
329-
<!-- Delete Button -->
330-
<Button
331-
x:Name="DeleteButton"
332-
Grid.Column="4"
333-
Width="32"
334-
Height="32"
335-
Padding="0"
336-
x:Load="{x:Bind IsInEditMode, Mode=OneWay}"
337-
AutomationProperties.Name="{helpers:ResourceString Name=Delete}"
338-
Command="{Binding ElementName=PageRoot, Path=DataContext.DeleteCommand, Mode=OneWay}"
339-
CommandParameter="{x:Bind}"
340-
IsEnabled="{x:Bind IsInEditMode, Mode=OneWay}"
341-
ToolTipService.ToolTip="{helpers:ResourceString Name=Delete}">
342-
<FontIcon FontSize="14" Glyph="&#xE74D;" />
343-
</Button>
344-
345-
<VisualStateManager.VisualStateGroups>
346-
<VisualStateGroup x:Name="CommonStates">
347-
<VisualState x:Name="Normal" />
348-
<VisualState x:Name="PointerOver">
349-
<VisualState.Setters>
350-
<Setter Target="RootGrid.Background" Value="{ThemeResource ButtonBackgroundPointerOver}" />
351-
<Setter Target="RootGrid.BorderBrush" Value="{ThemeResource ButtonBorderBrushPointerOver}" />
352-
</VisualState.Setters>
353-
</VisualState>
354-
</VisualStateGroup>
355-
</VisualStateManager.VisualStateGroups>
213+
<Grid x:Name="RootGrid">
214+
<controls:SettingsCard Description="{x:Bind CommandDescription}" Header="{x:Bind CommandLabel}">
215+
<controls:SettingsCard.Content>
216+
<Grid MinHeight="36" ColumnSpacing="12">
217+
<Grid.ColumnDefinitions>
218+
<ColumnDefinition Width="Auto" />
219+
<ColumnDefinition Width="32" />
220+
<ColumnDefinition Width="32" />
221+
<ColumnDefinition Width="32" />
222+
</Grid.ColumnDefinitions>
223+
224+
<!-- Key Binding Control -->
225+
<keyboard:KeyboardShortcut
226+
x:Name="KeyboardShortcutControl"
227+
Grid.Column="0"
228+
HorizontalAlignment="Right"
229+
VerticalAlignment="Center"
230+
HotKeys="{x:Bind KeyBindings, Mode=OneWay}"
231+
Visibility="{x:Bind IsInEditMode, Converter={StaticResource NegationBoolToVisibilityConverter}, Mode=OneWay}" />
232+
233+
<!-- Editor (Using PreviewKeyDown to prevent Ctrl+A) -->
234+
<TextBox
235+
x:Name="KeyBindingEditorTextBox"
236+
Grid.Column="0"
237+
Width="144"
238+
VerticalAlignment="Center"
239+
x:Load="{x:Bind IsInEditMode, Mode=OneWay}"
240+
IsReadOnly="True"
241+
IsSpellCheckEnabled="False"
242+
IsTabStop="True"
243+
Loaded="KeyBindingEditorTextBox_Loaded"
244+
PreviewKeyDown="KeyBindingEditorTextBox_PreviewKeyDown"
245+
Text="{x:Bind LocalizedKeyBindingLabel, Mode=TwoWay}"
246+
TextAlignment="Right" />
247+
248+
<!-- Edit Button -->
249+
<Button
250+
x:Name="EditButton"
251+
Grid.Column="1"
252+
Width="32"
253+
Height="32"
254+
Padding="0"
255+
x:Load="{x:Bind IsInEditMode, Converter={StaticResource BoolNegationConverter}, Mode=OneWay}"
256+
AutomationProperties.Name="{helpers:ResourceString Name=Edit}"
257+
Command="{Binding ElementName=PageRoot, Path=DataContext.EditCommand, Mode=OneWay}"
258+
CommandParameter="{x:Bind}"
259+
ToolTipService.ToolTip="{helpers:ResourceString Name=Edit}"
260+
Visibility="Collapsed">
261+
<FontIcon FontSize="14" Glyph="&#xE70F;" />
262+
</Button>
263+
264+
<!-- Save Button -->
265+
<Button
266+
x:Name="SaveButton"
267+
Grid.Column="1"
268+
Width="32"
269+
Height="32"
270+
Padding="0"
271+
x:Load="{x:Bind IsInEditMode, Mode=OneWay}"
272+
AutomationProperties.Name="{helpers:ResourceString Name=Save}"
273+
Command="{Binding ElementName=PageRoot, Path=DataContext.SaveCommand, Mode=OneWay}"
274+
CommandParameter="{x:Bind}"
275+
IsEnabled="{x:Bind IsValidKeyBinding, Mode=OneWay}"
276+
Style="{StaticResource AccentButtonStyle}"
277+
ToolTipService.ToolTip="{helpers:ResourceString Name=Save}">
278+
<FontIcon FontSize="14" Glyph="&#xE73E;" />
279+
</Button>
280+
281+
<!-- Cancel Button -->
282+
<Button
283+
x:Name="CancelButton"
284+
Grid.Column="2"
285+
Width="32"
286+
Height="32"
287+
Padding="0"
288+
x:Load="{x:Bind IsInEditMode, Mode=OneWay}"
289+
AutomationProperties.Name="{helpers:ResourceString Name=Cancel}"
290+
Command="{Binding ElementName=PageRoot, Path=DataContext.CancelCommand, Mode=OneWay}"
291+
CommandParameter="{x:Bind}"
292+
IsEnabled="{x:Bind IsInEditMode, Mode=OneWay}"
293+
ToolTipService.ToolTip="{helpers:ResourceString Name=Cancel}">
294+
<FontIcon FontSize="14" Glyph="&#xE711;" />
295+
</Button>
296+
297+
<!-- Delete Button -->
298+
<Button
299+
x:Name="DeleteButton"
300+
Grid.Column="3"
301+
Width="32"
302+
Height="32"
303+
Padding="0"
304+
x:Load="{x:Bind IsInEditMode, Mode=OneWay}"
305+
AutomationProperties.Name="{helpers:ResourceString Name=Delete}"
306+
Command="{Binding ElementName=PageRoot, Path=DataContext.DeleteCommand, Mode=OneWay}"
307+
CommandParameter="{x:Bind}"
308+
IsEnabled="{x:Bind IsInEditMode, Mode=OneWay}"
309+
ToolTipService.ToolTip="{helpers:ResourceString Name=Delete}">
310+
<FontIcon FontSize="14" Glyph="&#xE74D;" />
311+
</Button>
312+
</Grid>
313+
</controls:SettingsCard.Content>
314+
</controls:SettingsCard>
356315
</Grid>
357316
</UserControl>
358317
</DataTemplate>

0 commit comments

Comments
 (0)