Skip to content

Commit

Permalink
Update list design
Browse files Browse the repository at this point in the history
  • Loading branch information
@marcelwgn
marcelwgn committed Jan 18, 2024
1 parent e9967d7 commit 236826b
Showing 1 changed file with 152 additions and 131 deletions.
283 changes: 152 additions & 131 deletions src/Files.App/Views/Layouts/GridLayoutPage.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@
NavigationCacheMode="Enabled"
mc:Ignorable="d">


<i:Interaction.Behaviors>
<icore:EventTriggerBehavior EventName="PointerWheelChanged">
<icore:InvokeCommandAction Command="{x:Bind CommandsViewModel.PointerWheelChangedCommand}" />
Expand All @@ -43,8 +42,7 @@
<Style.Setters>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
</ItemsPanelTemplate>
<ItemsPanelTemplate />
</Setter.Value>
</Setter>
</Style.Setters>
Expand Down Expand Up @@ -277,155 +275,175 @@

<DataTemplate x:Name="GridViewBrowserTemplateVertical" x:DataType="filesystem:ListedItem">
<UserControl>
<StackPanel
<Grid
x:Name="FilesRootGrid"
Height="30"
Padding="12,0,12,0"
Width="300"
x:Name="GridViewBrowserListedItem"
Height="60"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
tui:FrameworkElementExtensions.EnableActualSizeBinding="True"
Background="Transparent"
Orientation="Horizontal"
VerticalAlignment="Center"
CornerRadius="{StaticResource ControlCornerRadius}"
IsRightTapEnabled="True"
Loaded="Grid_Loaded"
PointerEntered="Grid_PointerEntered"
ToolTipService.ToolTip="{x:Bind ItemTooltipText, Mode=OneWay}">


<Grid.ColumnDefinitions>
<ColumnDefinition Width="24" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>

<!-- Item Thumbnail -->
<Grid
Grid.Row="0"
Width="40"
Height="40"
VerticalAlignment="Center"
MaxWidth="{Binding FolderSettings.GridViewSize, ElementName=PageRoot, Mode=OneWay}"
Opacity="{x:Bind Opacity, Mode=OneWay}"
Tag="ItemImage">
Width="24"
HorizontalAlignment="Left"
VerticalAlignment="Stretch">

<ContentPresenter
x:Name="PictureBorder"
Margin="12"
<!-- Thumbnail -->
<Grid
x:Name="IconBox"
Width="20"
Height="Auto"
HorizontalAlignment="Center"
VerticalAlignment="Center"
x:Load="{x:Bind LoadFileIcon, Mode=OneWay}"
x:Phase="1"
CornerRadius="{StaticResource GridViewThumbnailCornerRadius}">
AutomationProperties.Name="{helpers:ResourceString Name=FileBrowserThumbnailIconColumnGrid/AutomationProperties/Name}"
Opacity="{x:Bind Opacity, Mode=OneWay}"
TabFocusNavigation="Local"
Tag="ItemImage">
<ContentPresenter
x:Name="PicturePresenter"
Width="20"
Height="20"
HorizontalAlignment="Center"
VerticalAlignment="Center"
x:Load="{x:Bind LoadFileIcon, Mode=OneWay}"
CornerRadius="{StaticResource DetailsLayoutThumbnailCornerRadius}">
<Image
x:Name="Picture"
Source="{x:Bind FileImage, Mode=OneWay}"
Stretch="Uniform" />
</ContentPresenter>
<Border
x:Name="TypeUnknownGlyph"
Width="20"
Height="20"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
x:Load="{x:Bind NeedsPlaceholderGlyph, Mode=OneWay}"
Background="{ThemeResource SystemChromeHighColor}"
CornerRadius="4" />
<FontIcon
x:Name="WebShortcutGlyph"
x:Load="{x:Bind LoadWebShortcutGlyph, Mode=OneWay}"
Glyph="&#xE71B;" />
<Image
x:Name="Picture"
Source="{x:Bind FileImage, Mode=OneWay}"
x:Name="IconOverlay"
Width="16"
Height="16"
Margin="2"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
x:Load="True"
Source="{x:Bind IconOverlay, Mode=OneWay}"
Stretch="Uniform" />
</ContentPresenter>

<Border
x:Name="TypeUnknownGlyph"
MaxWidth="{Binding FolderSettings.GridViewSize, ElementName=PageRoot, Mode=OneWay}"
MaxHeight="{Binding FolderSettings.GridViewSize, ElementName=PageRoot, Mode=OneWay}"
Margin="12"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
x:Load="{x:Bind NeedsPlaceholderGlyph, Mode=OneWay}"
Background="{ThemeResource SystemChromeHighColor}"
CornerRadius="4" />

<Image
x:Name="IconOverlay"
Width="32"
Height="32"
Margin="16"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
x:Load="True"
x:Phase="1"
Source="{x:Bind IconOverlay, Mode=OneWay}"
Stretch="Uniform" />

<Viewbox
x:Name="WebShortcutGlyph"
MaxWidth="{Binding FolderSettings.GridViewSize, ElementName=PageRoot, Mode=OneWay}"
MaxHeight="{Binding FolderSettings.GridViewSize, ElementName=PageRoot, Mode=OneWay}"
Margin="12"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
x:Load="{x:Bind LoadWebShortcutGlyph, Mode=OneWay}"
x:Phase="1">
<FontIcon FontSize="28" Glyph="&#xE71B;" />
</Viewbox>
<Border
x:Name="ShortcutGlyphElement"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
x:Load="{x:Bind IsShortcut}">
<uc:OpacityIcon Style="{StaticResource ColorIconShortcut}" />
</Border>
<Image
x:Name="ShieldOverlay"
Width="8"
Height="8"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
x:Load="{x:Bind IsElevated}"
Source="{x:Bind ShieldIcon, Mode=OneWay}"
Stretch="Uniform" />
</Grid>

<Viewbox
x:Name="ShortcutGlyphElement"
Width="16"
Height="16"
Margin="14"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
x:Load="{x:Bind IsShortcut}"
x:Phase="1">
<uc:OpacityIcon Style="{StaticResource ColorIconShortcut}" />
</Viewbox>
<!-- Selection Check Box -->
<CheckBox
x:Name="SelectionCheckbox"
Width="20"
MinWidth="0"
HorizontalAlignment="Center"
AutomationProperties.AccessibilityView="Raw"
Checked="ItemSelected_Checked"
DoubleTapped="SelectionCheckbox_DoubleTapped"
Opacity="0"
Unchecked="ItemSelected_Unchecked" />

<Image
x:Name="ShieldOverlay"
Width="16"
Height="16"
Margin="14"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
x:Load="{x:Bind IsElevated}"
x:Phase="1"
Source="{x:Bind ShieldIcon, Mode=OneWay}"
Stretch="Uniform" />
</Grid>

<!-- Item Name -->
<TextBlock
x:Name="ItemName"
Grid.Column="2"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
Opacity="{x:Bind Opacity, Mode=OneWay}"
Text="{x:Bind Name, Mode=OneWay}"
TextAlignment="Center"
TextTrimming="CharacterEllipsis"
TextWrapping="Wrap" />


<CheckBox
x:Name="SelectionCheckbox"
Grid.RowSpan="2"
Grid.ColumnSpan="2"
Width="32"
MinWidth="0"
MinHeight="0"
Margin="6"
Padding="0"
x:Name="ItemName"
Grid.Column="1"
Margin="5,0,5,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
AutomationProperties.AccessibilityView="Raw"
Checked="ItemSelected_Checked"
DoubleTapped="SelectionCheckbox_DoubleTapped"
Opacity="0"
Unchecked="ItemSelected_Unchecked" />

<Popup x:Name="EditPopup" Grid.Row="1">
<TextBox
x:Name="GridViewTextBoxItemName"
Width="{Binding ElementName=GridViewBrowserListedItem, Path=(tui:FrameworkElementExtensions.ActualWidth)}"
Margin="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="{ThemeResource SolidBackgroundFillColorSecondary}"
BeforeTextChanging="ItemNameTextBox_BeforeTextChanging"
Text="{x:Bind Name, Mode=OneWay}"
TextAlignment="Center"
TextWrapping="Wrap" />
</Popup>
VerticalAlignment="Center"
Opacity="{x:Bind Opacity, Mode=OneWay}"
Text="{x:Bind Name, Mode=OneWay}"
TextTrimming="CharacterEllipsis"
TextWrapping="NoWrap" />

<!-- Rename Text Box -->
<TextBox
x:Name="ListViewTextBoxItemName"
Grid.Column="1"
Margin="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
BeforeTextChanging="ItemNameTextBox_BeforeTextChanging"
TextAlignment="Left"
TextWrapping="Wrap"
Visibility="Collapsed">
<TextBox.Resources>
<SolidColorBrush x:Key="TextControlBackgroundFocused" Color="{ThemeResource SolidBackgroundFillColorSecondary}" />
</TextBox.Resources>
</TextBox>

<Grid Grid.Column="2">
<StackPanel Orientation="Horizontal" Spacing="4">

<!-- Cloud Status -->
<FontIcon
x:Name="CloudDriveSyncStatusGlyph"
HorizontalAlignment="Center"
VerticalAlignment="Center"
x:Phase="2"
FontSize="12"
Glyph="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).Glyph, Mode=OneWay}"
Visibility="{x:Bind ((cloud:CloudDriveSyncStatusUI)SyncStatusUI).LoadSyncStatus, Mode=OneWay}" />

<!-- Tag -->
<Ellipse
Width="12"
Height="12"
Margin="8,0,4,0"
x:Phase="2"
Fill="{x:Bind FileTagsUI[0].Color, Mode=OneWay, Converter={StaticResource StringToBrushConverter}}"
ToolTipService.ToolTip="{x:Bind FileTagsUI[0].Name, Mode=OneWay}"
Visibility="{x:Bind FileTagsUI, Converter={StaticResource EmptyObjectToObjectConverter}, Mode=OneWay}" />
</StackPanel>
</Grid>
<!-- Visual Status Managing -->
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckboxVisibilityStates">
<VisualState x:Name="HideCheckbox" />
<VisualState x:Name="ShowCheckbox">
<VisualState.Setters>
<Setter Target="SelectionCheckbox.Opacity" Value="1" />
<Setter Target="IconBox.Visibility" Value="Collapsed" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</StackPanel>
</Grid>
</UserControl>
</DataTemplate>

Expand Down Expand Up @@ -726,10 +744,14 @@

<Grid x:Name="RootGrid" ContextFlyout="{x:Bind BaseContextMenuFlyout}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Button x:Name="ChangeRotationButton" Click="ChangeRotationButton_Click" Content="Change direction" VerticalAlignment="Top"/>
<Button
x:Name="ChangeRotationButton"
VerticalAlignment="Top"
Click="ChangeRotationButton_Click"
Content="Change direction" />
<!-- Empty Indicator -->
<uc:FolderEmptyIndicator
Grid.Row="3"
Expand All @@ -751,7 +773,6 @@
<SemanticZoom
x:Name="RootGridZoom"
Grid.Row="1"
Margin="50,0,0,0"
CanChangeViews="{x:Bind CollectionViewSource.IsSourceGrouped, Mode=OneWay}"
ViewChangeStarted="SemanticZoom_ViewChangeStarted"
Visibility="{x:Bind FolderSettings.IsLayoutModeChanging, Mode=OneWay, Converter={StaticResource NegatedBoolToVisibilityConverter}}">
Expand All @@ -778,10 +799,10 @@
IsTabStop="True"
ItemsSource="{x:Bind CollectionViewSource.View, Mode=OneWay}"
PreviewKeyDown="FileList_PreviewKeyDown"
ScrollViewer.IsHorizontalScrollChainingEnabled="False"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollMode="Auto"
ScrollViewer.IsHorizontalScrollChainingEnabled="False"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollMode="Auto"
SelectionChanged="FileList_SelectionChanged"
SelectionMode="Extended"
Expand Down

0 comments on commit 236826b

Please sign in to comment.