Skip to content

Commit 236826b

Browse files
marcelwgnmarcelwgn
committed
Update list design
1 parent e9967d7 commit 236826b

File tree

1 file changed

+152
-131
lines changed

1 file changed

+152
-131
lines changed

‎src/Files.App/Views/Layouts/GridLayoutPage.xaml

Lines changed: 152 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@
2222
NavigationCacheMode="Enabled"
2323
mc:Ignorable="d">
2424

25-
2625
<i:Interaction.Behaviors>
2726
<icore:EventTriggerBehavior EventName="PointerWheelChanged">
2827
<icore:InvokeCommandAction Command="{x:Bind CommandsViewModel.PointerWheelChangedCommand}" />
@@ -43,8 +42,7 @@
4342
<Style.Setters>
4443
<Setter Property="ItemsPanel">
4544
<Setter.Value>
46-
<ItemsPanelTemplate>
47-
</ItemsPanelTemplate>
45+
<ItemsPanelTemplate />
4846
</Setter.Value>
4947
</Setter>
5048
</Style.Setters>
@@ -277,155 +275,175 @@
277275

278276
<DataTemplate x:Name="GridViewBrowserTemplateVertical" x:DataType="filesystem:ListedItem">
279277
<UserControl>
280-
<StackPanel
278+
<Grid
279+
x:Name="FilesRootGrid"
280+
Height="30"
281+
Padding="12,0,12,0"
281282
Width="300"
282-
x:Name="GridViewBrowserListedItem"
283-
Height="60"
284283
HorizontalAlignment="Stretch"
285-
VerticalAlignment="Stretch"
286-
tui:FrameworkElementExtensions.EnableActualSizeBinding="True"
287-
Background="Transparent"
288-
Orientation="Horizontal"
284+
VerticalAlignment="Center"
285+
CornerRadius="{StaticResource ControlCornerRadius}"
289286
IsRightTapEnabled="True"
287+
Loaded="Grid_Loaded"
288+
PointerEntered="Grid_PointerEntered"
290289
ToolTipService.ToolTip="{x:Bind ItemTooltipText, Mode=OneWay}">
291-
290+
291+
<Grid.ColumnDefinitions>
292+
<ColumnDefinition Width="24" />
293+
<ColumnDefinition Width="*" />
294+
<ColumnDefinition Width="Auto" />
295+
</Grid.ColumnDefinitions>
296+
297+
<!-- Item Thumbnail -->
292298
<Grid
293-
Grid.Row="0"
294-
Width="40"
295-
Height="40"
296-
VerticalAlignment="Center"
297-
MaxWidth="{Binding FolderSettings.GridViewSize, ElementName=PageRoot, Mode=OneWay}"
298-
Opacity="{x:Bind Opacity, Mode=OneWay}"
299-
Tag="ItemImage">
299+
Width="24"
300+
HorizontalAlignment="Left"
301+
VerticalAlignment="Stretch">
300302

301-
<ContentPresenter
302-
x:Name="PictureBorder"
303-
Margin="12"
303+
<!-- Thumbnail -->
304+
<Grid
305+
x:Name="IconBox"
306+
Width="20"
307+
Height="Auto"
304308
HorizontalAlignment="Center"
305309
VerticalAlignment="Center"
306-
x:Load="{x:Bind LoadFileIcon, Mode=OneWay}"
307-
x:Phase="1"
308-
CornerRadius="{StaticResource GridViewThumbnailCornerRadius}">
310+
AutomationProperties.Name="{helpers:ResourceString Name=FileBrowserThumbnailIconColumnGrid/AutomationProperties/Name}"
311+
Opacity="{x:Bind Opacity, Mode=OneWay}"
312+
TabFocusNavigation="Local"
313+
Tag="ItemImage">
314+
<ContentPresenter
315+
x:Name="PicturePresenter"
316+
Width="20"
317+
Height="20"
318+
HorizontalAlignment="Center"
319+
VerticalAlignment="Center"
320+
x:Load="{x:Bind LoadFileIcon, Mode=OneWay}"
321+
CornerRadius="{StaticResource DetailsLayoutThumbnailCornerRadius}">
322+
<Image
323+
x:Name="Picture"
324+
Source="{x:Bind FileImage, Mode=OneWay}"
325+
Stretch="Uniform" />
326+
</ContentPresenter>
327+
<Border
328+
x:Name="TypeUnknownGlyph"
329+
Width="20"
330+
Height="20"
331+
HorizontalAlignment="Stretch"
332+
VerticalAlignment="Stretch"
333+
x:Load="{x:Bind NeedsPlaceholderGlyph, Mode=OneWay}"
334+
Background="{ThemeResource SystemChromeHighColor}"
335+
CornerRadius="4" />
336+
<FontIcon
337+
x:Name="WebShortcutGlyph"
338+
x:Load="{x:Bind LoadWebShortcutGlyph, Mode=OneWay}"
339+
Glyph="&#xE71B;" />
309340
<Image
310-
x:Name="Picture"
311-
Source="{x:Bind FileImage, Mode=OneWay}"
341+
x:Name="IconOverlay"
342+
Width="16"
343+
Height="16"
344+
Margin="2"
345+
HorizontalAlignment="Left"
346+
VerticalAlignment="Bottom"
347+
x:Load="True"
348+
Source="{x:Bind IconOverlay, Mode=OneWay}"
312349
Stretch="Uniform" />
313-
</ContentPresenter>
314-
315-
<Border
316-
x:Name="TypeUnknownGlyph"
317-
MaxWidth="{Binding FolderSettings.GridViewSize, ElementName=PageRoot, Mode=OneWay}"
318-
MaxHeight="{Binding FolderSettings.GridViewSize, ElementName=PageRoot, Mode=OneWay}"
319-
Margin="12"
320-
HorizontalAlignment="Stretch"
321-
VerticalAlignment="Stretch"
322-
x:Load="{x:Bind NeedsPlaceholderGlyph, Mode=OneWay}"
323-
Background="{ThemeResource SystemChromeHighColor}"
324-
CornerRadius="4" />
325-
326-
<Image
327-
x:Name="IconOverlay"
328-
Width="32"
329-
Height="32"
330-
Margin="16"
331-
HorizontalAlignment="Left"
332-
VerticalAlignment="Bottom"
333-
x:Load="True"
334-
x:Phase="1"
335-
Source="{x:Bind IconOverlay, Mode=OneWay}"
336-
Stretch="Uniform" />
337-
338-
<Viewbox
339-
x:Name="WebShortcutGlyph"
340-
MaxWidth="{Binding FolderSettings.GridViewSize, ElementName=PageRoot, Mode=OneWay}"
341-
MaxHeight="{Binding FolderSettings.GridViewSize, ElementName=PageRoot, Mode=OneWay}"
342-
Margin="12"
343-
HorizontalAlignment="Stretch"
344-
VerticalAlignment="Stretch"
345-
x:Load="{x:Bind LoadWebShortcutGlyph, Mode=OneWay}"
346-
x:Phase="1">
347-
<FontIcon FontSize="28" Glyph="&#xE71B;" />
348-
</Viewbox>
350+
<Border
351+
x:Name="ShortcutGlyphElement"
352+
HorizontalAlignment="Left"
353+
VerticalAlignment="Bottom"
354+
x:Load="{x:Bind IsShortcut}">
355+
<uc:OpacityIcon Style="{StaticResource ColorIconShortcut}" />
356+
</Border>
357+
<Image
358+
x:Name="ShieldOverlay"
359+
Width="8"
360+
Height="8"
361+
HorizontalAlignment="Right"
362+
VerticalAlignment="Bottom"
363+
x:Load="{x:Bind IsElevated}"
364+
Source="{x:Bind ShieldIcon, Mode=OneWay}"
365+
Stretch="Uniform" />
366+
</Grid>
349367

350-
<Viewbox
351-
x:Name="ShortcutGlyphElement"
352-
Width="16"
353-
Height="16"
354-
Margin="14"
355-
HorizontalAlignment="Left"
356-
VerticalAlignment="Bottom"
357-
x:Load="{x:Bind IsShortcut}"
358-
x:Phase="1">
359-
<uc:OpacityIcon Style="{StaticResource ColorIconShortcut}" />
360-
</Viewbox>
368+
<!-- Selection Check Box -->
369+
<CheckBox
370+
x:Name="SelectionCheckbox"
371+
Width="20"
372+
MinWidth="0"
373+
HorizontalAlignment="Center"
374+
AutomationProperties.AccessibilityView="Raw"
375+
Checked="ItemSelected_Checked"
376+
DoubleTapped="SelectionCheckbox_DoubleTapped"
377+
Opacity="0"
378+
Unchecked="ItemSelected_Unchecked" />
361379

362-
<Image
363-
x:Name="ShieldOverlay"
364-
Width="16"
365-
Height="16"
366-
Margin="14"
367-
HorizontalAlignment="Right"
368-
VerticalAlignment="Bottom"
369-
x:Load="{x:Bind IsElevated}"
370-
x:Phase="1"
371-
Source="{x:Bind ShieldIcon, Mode=OneWay}"
372-
Stretch="Uniform" />
373380
</Grid>
374381

382+
<!-- Item Name -->
375383
<TextBlock
376-
x:Name="ItemName"
377-
Grid.Column="2"
378-
HorizontalAlignment="Stretch"
379-
VerticalAlignment="Center"
380-
Opacity="{x:Bind Opacity, Mode=OneWay}"
381-
Text="{x:Bind Name, Mode=OneWay}"
382-
TextAlignment="Center"
383-
TextTrimming="CharacterEllipsis"
384-
TextWrapping="Wrap" />
385-
386-
387-
<CheckBox
388-
x:Name="SelectionCheckbox"
389-
Grid.RowSpan="2"
390-
Grid.ColumnSpan="2"
391-
Width="32"
392-
MinWidth="0"
393-
MinHeight="0"
394-
Margin="6"
395-
Padding="0"
384+
x:Name="ItemName"
385+
Grid.Column="1"
386+
Margin="5,0,5,0"
396387
HorizontalAlignment="Left"
397-
VerticalAlignment="Top"
398-
AutomationProperties.AccessibilityView="Raw"
399-
Checked="ItemSelected_Checked"
400-
DoubleTapped="SelectionCheckbox_DoubleTapped"
401-
Opacity="0"
402-
Unchecked="ItemSelected_Unchecked" />
403-
404-
<Popup x:Name="EditPopup" Grid.Row="1">
405-
<TextBox
406-
x:Name="GridViewTextBoxItemName"
407-
Width="{Binding ElementName=GridViewBrowserListedItem, Path=(tui:FrameworkElementExtensions.ActualWidth)}"
408-
Margin="0"
409-
HorizontalAlignment="Stretch"
410-
VerticalAlignment="Stretch"
411-
Background="{ThemeResource SolidBackgroundFillColorSecondary}"
412-
BeforeTextChanging="ItemNameTextBox_BeforeTextChanging"
413-
Text="{x:Bind Name, Mode=OneWay}"
414-
TextAlignment="Center"
415-
TextWrapping="Wrap" />
416-
</Popup>
388+
VerticalAlignment="Center"
389+
Opacity="{x:Bind Opacity, Mode=OneWay}"
390+
Text="{x:Bind Name, Mode=OneWay}"
391+
TextTrimming="CharacterEllipsis"
392+
TextWrapping="NoWrap" />
417393

394+
<!-- Rename Text Box -->
395+
<TextBox
396+
x:Name="ListViewTextBoxItemName"
397+
Grid.Column="1"
398+
Margin="0"
399+
HorizontalAlignment="Stretch"
400+
VerticalAlignment="Stretch"
401+
BeforeTextChanging="ItemNameTextBox_BeforeTextChanging"
402+
TextAlignment="Left"
403+
TextWrapping="Wrap"
404+
Visibility="Collapsed">
405+
<TextBox.Resources>
406+
<SolidColorBrush x:Key="TextControlBackgroundFocused" Color="{ThemeResource SolidBackgroundFillColorSecondary}" />
407+
</TextBox.Resources>
408+
</TextBox>
409+
410+
<Grid Grid.Column="2">
411+
<StackPanel Orientation="Horizontal" Spacing="4">
412+
413+
<!-- Cloud Status -->
414+
<FontIcon
415+
x:Name="CloudDriveSyncStatusGlyph"
416+
HorizontalAlignment="Center"
417+
VerticalAlignment="Center"
418+
x:Phase="2"
419+
FontSize="12"
420+
Glyph="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).Glyph, Mode=OneWay}"
421+
Visibility="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).LoadSyncStatus, Mode=OneWay}" />
422+
423+
<!-- Tag -->
424+
<Ellipse
425+
Width="12"
426+
Height="12"
427+
Margin="8,0,4,0"
428+
x:Phase="2"
429+
Fill="{x:Bind FileTagsUI[0].Color, Mode=OneWay, Converter={StaticResource StringToBrushConverter}}"
430+
ToolTipService.ToolTip="{x:Bind FileTagsUI[0].Name, Mode=OneWay}"
431+
Visibility="{x:Bind FileTagsUI, Converter={StaticResource EmptyObjectToObjectConverter}, Mode=OneWay}" />
432+
</StackPanel>
433+
</Grid>
434+
<!-- Visual Status Managing -->
418435
<VisualStateManager.VisualStateGroups>
419436
<VisualStateGroup x:Name="CheckboxVisibilityStates">
420437
<VisualState x:Name="HideCheckbox" />
421438
<VisualState x:Name="ShowCheckbox">
422439
<VisualState.Setters>
423440
<Setter Target="SelectionCheckbox.Opacity" Value="1" />
441+
<Setter Target="IconBox.Visibility" Value="Collapsed" />
424442
</VisualState.Setters>
425443
</VisualState>
426444
</VisualStateGroup>
427445
</VisualStateManager.VisualStateGroups>
428-
</StackPanel>
446+
</Grid>
429447
</UserControl>
430448
</DataTemplate>
431449

@@ -726,10 +744,14 @@
726744

727745
<Grid x:Name="RootGrid" ContextFlyout="{x:Bind BaseContextMenuFlyout}">
728746
<Grid.RowDefinitions>
729-
<RowDefinition Height="Auto"/>
730-
<RowDefinition Height="*"/>
747+
<RowDefinition Height="Auto" />
748+
<RowDefinition Height="*" />
731749
</Grid.RowDefinitions>
732-
<Button x:Name="ChangeRotationButton" Click="ChangeRotationButton_Click" Content="Change direction" VerticalAlignment="Top"/>
750+
<Button
751+
x:Name="ChangeRotationButton"
752+
VerticalAlignment="Top"
753+
Click="ChangeRotationButton_Click"
754+
Content="Change direction" />
733755
<!-- Empty Indicator -->
734756
<uc:FolderEmptyIndicator
735757
Grid.Row="3"
@@ -751,7 +773,6 @@
751773
<SemanticZoom
752774
x:Name="RootGridZoom"
753775
Grid.Row="1"
754-
Margin="50,0,0,0"
755776
CanChangeViews="{x:Bind CollectionViewSource.IsSourceGrouped, Mode=OneWay}"
756777
ViewChangeStarted="SemanticZoom_ViewChangeStarted"
757778
Visibility="{x:Bind FolderSettings.IsLayoutModeChanging, Mode=OneWay, Converter={StaticResource NegatedBoolToVisibilityConverter}}">
@@ -778,10 +799,10 @@
778799
IsTabStop="True"
779800
ItemsSource="{x:Bind CollectionViewSource.View, Mode=OneWay}"
780801
PreviewKeyDown="FileList_PreviewKeyDown"
781-
ScrollViewer.IsHorizontalScrollChainingEnabled="False"
782802
ScrollViewer.HorizontalScrollBarVisibility="Auto"
783-
ScrollViewer.VerticalScrollBarVisibility="Auto"
784803
ScrollViewer.HorizontalScrollMode="Auto"
804+
ScrollViewer.IsHorizontalScrollChainingEnabled="False"
805+
ScrollViewer.VerticalScrollBarVisibility="Auto"
785806
ScrollViewer.VerticalScrollMode="Auto"
786807
SelectionChanged="FileList_SelectionChanged"
787808
SelectionMode="Extended"

0 commit comments

Comments
 (0)