Skip to content

Commit bb33baa

Browse files
yaira2yaira2
authored
Code Quality: Remove spacing from SidebarItems (#15949)
1 parent 7f63feb commit bb33baa

File tree

2 files changed

+150
-145
lines changed

2 files changed

+150
-145
lines changed

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

Lines changed: 131 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
<Setter Property="Template">
5050
<Setter.Value>
5151
<ControlTemplate TargetType="local:SidebarItem">
52-
<Grid x:Name="RootPanel" Padding="4,2">
52+
<Grid x:Name="RootPanel" Padding="4,0,4,0">
5353
<Grid.RowDefinitions>
5454
<RowDefinition Height="Auto" />
5555
<RowDefinition Height="Auto" />
@@ -70,138 +70,143 @@
7070
Visibility="Collapsed" />
7171

7272
<!-- Focusable Visual -->
73-
<Grid
74-
x:Name="ElementGrid"
73+
<Border
74+
x:Name="ElementBorder"
7575
Grid.Row="0"
76-
Height="28"
77-
HorizontalAlignment="Stretch"
78-
Background="{ThemeResource SubtleFillColorTransparentBrush}"
79-
BackgroundSizing="InnerBorderEdge"
80-
BorderThickness="1"
81-
CornerRadius="{ThemeResource ControlCornerRadius}"
82-
IsTabStop="True"
83-
TabFocusNavigation="Once"
84-
ToolTipService.ToolTip="{Binding ToolTip, Mode=OneWay}"
85-
UseSystemFocusVisuals="True">
86-
<Grid.ColumnDefinitions>
87-
<!-- Selection Indicator -->
88-
<ColumnDefinition Width="3" />
89-
<!-- Icon -->
90-
<ColumnDefinition Width="Auto" />
91-
<!-- Text -->
92-
<ColumnDefinition Width="*" />
93-
<!-- Decorator -->
94-
<ColumnDefinition Width="Auto" />
95-
</Grid.ColumnDefinitions>
76+
Height="32"
77+
Background="Transparent">
78+
<Grid
79+
x:Name="ElementGrid"
80+
Margin="0,2,0,2"
81+
HorizontalAlignment="Stretch"
82+
Background="{ThemeResource SubtleFillColorTransparentBrush}"
83+
BackgroundSizing="InnerBorderEdge"
84+
BorderThickness="1"
85+
CornerRadius="{ThemeResource ControlCornerRadius}"
86+
IsTabStop="True"
87+
TabFocusNavigation="Once"
88+
ToolTipService.ToolTip="{Binding ToolTip, Mode=OneWay}"
89+
UseSystemFocusVisuals="True">
90+
<Grid.ColumnDefinitions>
91+
<!-- Selection Indicator -->
92+
<ColumnDefinition Width="3" />
93+
<!-- Icon -->
94+
<ColumnDefinition Width="Auto" />
95+
<!-- Text -->
96+
<ColumnDefinition Width="*" />
97+
<!-- Decorator -->
98+
<ColumnDefinition Width="Auto" />
99+
</Grid.ColumnDefinitions>
96100

97-
<!-- Selection Rectangle -->
98-
<Rectangle
99-
x:Name="SelectionIndicator"
100-
Grid.Column="0"
101-
Width="3"
102-
Height="16"
103-
HorizontalAlignment="Left"
104-
VerticalAlignment="Center"
105-
AutomationProperties.AccessibilityView="Raw"
106-
Fill="{ThemeResource AccentFillColorDefaultBrush}"
107-
Opacity="0"
108-
RadiusX="2"
109-
RadiusY="2" />
101+
<!-- Selection Rectangle -->
102+
<Rectangle
103+
x:Name="SelectionIndicator"
104+
Grid.Column="0"
105+
Width="3"
106+
Height="16"
107+
HorizontalAlignment="Left"
108+
VerticalAlignment="Center"
109+
AutomationProperties.AccessibilityView="Raw"
110+
Fill="{ThemeResource AccentFillColorDefaultBrush}"
111+
Opacity="0"
112+
RadiusX="2"
113+
RadiusY="2" />
110114

111-
<!-- Icon -->
112-
<ContentPresenter
113-
x:Name="IconPresenter"
114-
Grid.Column="1"
115-
Width="16"
116-
Height="16"
117-
Margin="8,0,0,0"
118-
HorizontalAlignment="Center"
119-
VerticalAlignment="Center"
120-
AutomationProperties.AccessibilityView="Raw"
121-
Content="{Binding Icon, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" />
115+
<!-- Icon -->
116+
<ContentPresenter
117+
x:Name="IconPresenter"
118+
Grid.Column="1"
119+
Width="16"
120+
Height="16"
121+
Margin="8,0,0,0"
122+
HorizontalAlignment="Center"
123+
VerticalAlignment="Center"
124+
AutomationProperties.AccessibilityView="Raw"
125+
Content="{Binding Icon, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" />
122126

123-
<!-- Text -->
124-
<TextBlock
125-
x:Name="ItemNameTextBlock"
126-
Grid.Column="2"
127-
Margin="12,0,12,2"
128-
HorizontalAlignment="Stretch"
129-
VerticalAlignment="Center"
130-
AutomationProperties.AccessibilityView="Raw"
131-
FontFamily="{ThemeResource ContentControlThemeFontFamily}"
132-
LineHeight="16"
133-
Text="{Binding Text, Mode=OneWay}"
134-
TextTrimming="CharacterEllipsis"
135-
TextWrapping="NoWrap" />
127+
<!-- Text -->
128+
<TextBlock
129+
x:Name="ItemNameTextBlock"
130+
Grid.Column="2"
131+
Margin="12,0,12,2"
132+
HorizontalAlignment="Stretch"
133+
VerticalAlignment="Center"
134+
AutomationProperties.AccessibilityView="Raw"
135+
FontFamily="{ThemeResource ContentControlThemeFontFamily}"
136+
LineHeight="16"
137+
Text="{Binding Text, Mode=OneWay}"
138+
TextTrimming="CharacterEllipsis"
139+
TextWrapping="NoWrap" />
136140

137-
<!-- Decorator -->
138-
<ContentPresenter
139-
x:Name="ItemDecoratorPresenter"
140-
Grid.Column="3"
141-
Width="28"
142-
Margin="0"
143-
HorizontalContentAlignment="Center"
144-
VerticalContentAlignment="Center"
145-
BorderThickness="0"
146-
Content="{Binding Decorator, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
147-
Visibility="Collapsed" />
141+
<!-- Decorator -->
142+
<ContentPresenter
143+
x:Name="ItemDecoratorPresenter"
144+
Grid.Column="3"
145+
Width="28"
146+
Margin="0"
147+
HorizontalContentAlignment="Center"
148+
VerticalContentAlignment="Center"
149+
BorderThickness="0"
150+
Content="{Binding Decorator, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
151+
Visibility="Collapsed" />
148152

149-
<!-- Chevron -->
150-
<AnimatedIcon
151-
x:Name="ExpandCollapseChevron"
152-
Grid.Column="3"
153-
Width="{StaticResource ExpanderChevronGlyphSize}"
154-
Height="{StaticResource ExpanderChevronGlyphSize}"
155-
Margin="0,0,8,0"
156-
HorizontalAlignment="Center"
157-
VerticalAlignment="Center"
158-
AnimatedIcon.State="NormalOff"
159-
AutomationProperties.AccessibilityView="Raw"
160-
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
161-
RenderTransformOrigin="0.5, 0.5"
162-
Visibility="Collapsed">
163-
<animatedvisuals:AnimatedChevronUpDownSmallVisualSource />
164-
<AnimatedIcon.FallbackIconSource>
165-
<FontIconSource
166-
FontFamily="{StaticResource SymbolThemeFontFamily}"
167-
FontSize="12"
168-
Glyph="{StaticResource ExpanderChevronDownGlyph}"
169-
IsTextScaleFactorEnabled="False" />
170-
</AnimatedIcon.FallbackIconSource>
171-
<AnimatedIcon.RenderTransform>
172-
<RotateTransform x:Name="ExpandCollapseChevronRotateTransform" Angle="0" />
173-
</AnimatedIcon.RenderTransform>
174-
</AnimatedIcon>
153+
<!-- Chevron -->
154+
<AnimatedIcon
155+
x:Name="ExpandCollapseChevron"
156+
Grid.Column="3"
157+
Width="{StaticResource ExpanderChevronGlyphSize}"
158+
Height="{StaticResource ExpanderChevronGlyphSize}"
159+
Margin="0,0,8,0"
160+
HorizontalAlignment="Center"
161+
VerticalAlignment="Center"
162+
AnimatedIcon.State="NormalOff"
163+
AutomationProperties.AccessibilityView="Raw"
164+
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
165+
RenderTransformOrigin="0.5, 0.5"
166+
Visibility="Collapsed">
167+
<animatedvisuals:AnimatedChevronUpDownSmallVisualSource />
168+
<AnimatedIcon.FallbackIconSource>
169+
<FontIconSource
170+
FontFamily="{StaticResource SymbolThemeFontFamily}"
171+
FontSize="12"
172+
Glyph="{StaticResource ExpanderChevronDownGlyph}"
173+
IsTextScaleFactorEnabled="False" />
174+
</AnimatedIcon.FallbackIconSource>
175+
<AnimatedIcon.RenderTransform>
176+
<RotateTransform x:Name="ExpandCollapseChevronRotateTransform" Angle="0" />
177+
</AnimatedIcon.RenderTransform>
178+
</AnimatedIcon>
175179

176-
<!-- Overflow -->
177-
<FlyoutBase.AttachedFlyout>
178-
<Flyout x:Name="ChildrenFlyout" Placement="Right">
179-
<Flyout.FlyoutPresenterStyle>
180-
<Style BasedOn="{StaticResource DefaultFlyoutPresenterStyle}" TargetType="FlyoutPresenter">
181-
<Setter Target="Padding" Value="0,4" />
182-
<Setter Target="MinWidth" Value="200" />
183-
<Setter Target="MinHeight" Value="20" />
184-
</Style>
185-
</Flyout.FlyoutPresenterStyle>
186-
<ItemsRepeater
187-
x:Name="FlyoutChildrenPresenter"
188-
HorizontalAlignment="Stretch"
189-
local:SidebarItem.TemplateRoot="{Binding ElementName=RootPanel}"
190-
AutomationProperties.AccessibilityView="Content"
191-
ItemsSource="{Binding Children, Mode=OneWay}"
192-
XYFocusKeyboardNavigation="Enabled">
193-
<ItemsRepeater.ItemTemplate>
194-
<DataTemplate>
195-
<local:SidebarItem
196-
AutomationProperties.AutomationId="{Binding Text, Mode=OneWay}"
197-
IsInFlyout="True"
198-
Item="{Binding}" />
199-
</DataTemplate>
200-
</ItemsRepeater.ItemTemplate>
201-
</ItemsRepeater>
202-
</Flyout>
203-
</FlyoutBase.AttachedFlyout>
204-
</Grid>
180+
<!-- Overflow -->
181+
<FlyoutBase.AttachedFlyout>
182+
<Flyout x:Name="ChildrenFlyout" Placement="Right">
183+
<Flyout.FlyoutPresenterStyle>
184+
<Style BasedOn="{StaticResource DefaultFlyoutPresenterStyle}" TargetType="FlyoutPresenter">
185+
<Setter Target="Padding" Value="0,4" />
186+
<Setter Target="MinWidth" Value="200" />
187+
<Setter Target="MinHeight" Value="20" />
188+
</Style>
189+
</Flyout.FlyoutPresenterStyle>
190+
<ItemsRepeater
191+
x:Name="FlyoutChildrenPresenter"
192+
HorizontalAlignment="Stretch"
193+
local:SidebarItem.TemplateRoot="{Binding ElementName=RootPanel}"
194+
AutomationProperties.AccessibilityView="Content"
195+
ItemsSource="{Binding Children, Mode=OneWay}"
196+
XYFocusKeyboardNavigation="Enabled">
197+
<ItemsRepeater.ItemTemplate>
198+
<DataTemplate>
199+
<local:SidebarItem
200+
AutomationProperties.AutomationId="{Binding Text, Mode=OneWay}"
201+
IsInFlyout="True"
202+
Item="{Binding}" />
203+
</DataTemplate>
204+
</ItemsRepeater.ItemTemplate>
205+
</ItemsRepeater>
206+
</Flyout>
207+
</FlyoutBase.AttachedFlyout>
208+
</Grid>
209+
</Border>
205210

206211
<!-- Children -->
207212
<ItemsRepeater

‎src/Files.App/UserControls/Sidebar/SidebarItem.cs

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -64,18 +64,18 @@ private void SidebarItem_Loaded(object sender, RoutedEventArgs e)
6464
{
6565
HookupOwners();
6666

67-
if (GetTemplateChild("ElementGrid") is Grid grid)
67+
if (GetTemplateChild("ElementBorder") is Border border)
6868
{
69-
grid.PointerEntered += ItemGrid_PointerEntered;
70-
grid.PointerExited += ItemGrid_PointerExited;
71-
grid.PointerCanceled += ItemGrid_PointerCanceled;
72-
grid.PointerPressed += ItemGrid_PointerPressed;
73-
grid.ContextRequested += ItemGrid_ContextRequested;
74-
grid.DragLeave += ItemGrid_DragLeave;
75-
grid.DragOver += ItemGrid_DragOver;
76-
grid.Drop += ItemGrid_Drop;
77-
grid.AllowDrop = true;
78-
grid.IsTabStop = true;
69+
border.PointerEntered += ItemBorder_PointerEntered;
70+
border.PointerExited += ItemBorder_PointerExited;
71+
border.PointerCanceled += ItemBorder_PointerCanceled;
72+
border.PointerPressed += ItemBorder_PointerPressed;
73+
border.ContextRequested += ItemBorder_ContextRequested;
74+
border.DragLeave += ItemBorder_DragLeave;
75+
border.DragOver += ItemBorder_DragOver;
76+
border.Drop += ItemBorder_Drop;
77+
border.AllowDrop = true;
78+
border.IsTabStop = true;
7979
}
8080

8181
if (GetTemplateChild("ChildrenPresenter") is ItemsRepeater repeater)
@@ -345,26 +345,26 @@ private void UpdateExpansionState(bool useAnimations = true)
345345
UpdateSelectionState();
346346
}
347347

348-
private void ItemGrid_PointerEntered(object sender, Microsoft.UI.Xaml.Input.PointerRoutedEventArgs e)
348+
private void ItemBorder_PointerEntered(object sender, Microsoft.UI.Xaml.Input.PointerRoutedEventArgs e)
349349
{
350350
isPointerOver = true;
351351
UpdatePointerState();
352352
}
353353

354-
private void ItemGrid_PointerExited(object sender, Microsoft.UI.Xaml.Input.PointerRoutedEventArgs e)
354+
private void ItemBorder_PointerExited(object sender, Microsoft.UI.Xaml.Input.PointerRoutedEventArgs e)
355355
{
356356
isPointerOver = false;
357357
isClicking = false;
358358
UpdatePointerState();
359359
}
360360

361-
private void ItemGrid_PointerCanceled(object sender, Microsoft.UI.Xaml.Input.PointerRoutedEventArgs e)
361+
private void ItemBorder_PointerCanceled(object sender, Microsoft.UI.Xaml.Input.PointerRoutedEventArgs e)
362362
{
363363
isClicking = false;
364364
UpdatePointerState();
365365
}
366366

367-
private void ItemGrid_PointerPressed(object sender, Microsoft.UI.Xaml.Input.PointerRoutedEventArgs e)
367+
private void ItemBorder_PointerPressed(object sender, Microsoft.UI.Xaml.Input.PointerRoutedEventArgs e)
368368
{
369369
isClicking = true;
370370
UpdatePointerState(true);
@@ -389,7 +389,7 @@ private void Item_PointerReleased(object sender, Microsoft.UI.Xaml.Input.Pointer
389389
}
390390
}
391391

392-
private async void ItemGrid_DragOver(object sender, DragEventArgs e)
392+
private async void ItemBorder_DragOver(object sender, DragEventArgs e)
393393
{
394394
if (HasChildren)
395395
{
@@ -418,18 +418,18 @@ private async void ItemGrid_DragOver(object sender, DragEventArgs e)
418418
}
419419
}
420420

421-
private void ItemGrid_ContextRequested(UIElement sender, Microsoft.UI.Xaml.Input.ContextRequestedEventArgs args)
421+
private void ItemBorder_ContextRequested(UIElement sender, Microsoft.UI.Xaml.Input.ContextRequestedEventArgs args)
422422
{
423423
Owner?.RaiseContextRequested(this, args.TryGetPosition(this, out var point) ? point : default);
424424
args.Handled = true;
425425
}
426426

427-
private void ItemGrid_DragLeave(object sender, DragEventArgs e)
427+
private void ItemBorder_DragLeave(object sender, DragEventArgs e)
428428
{
429429
UpdatePointerState();
430430
}
431431

432-
private async void ItemGrid_Drop(object sender, DragEventArgs e)
432+
private async void ItemBorder_Drop(object sender, DragEventArgs e)
433433
{
434434
UpdatePointerState();
435435
if (Owner is not null)

0 commit comments

Comments
 (0)