Skip to content

Feature: Add checkbox pointer behavior for tiles layout #11796

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Mar 21, 2023
Merged

Feature: Add checkbox pointer behavior for tiles layout #11796

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d11b00f
Add checkbox pointer behavior for tiles layout
marcelwgn Mar 21, 2023
0a0ec3d
Format XAML
marcelwgn Mar 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
315 changes: 165 additions & 150 deletions src/Files.App/Views/LayoutModes/GridViewBrowser.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,166 +228,181 @@
</DataTemplate>

<DataTemplate x:Name="TilesBrowserTemplate" x:DataType="local2:ListedItem">
<Grid
MaxHeight="68"
Padding="0"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
Background="Transparent"
ColumnSpacing="4"
IsRightTapEnabled="True"
Loaded="Grid_Loaded"
ToolTipService.ToolTip="{x:Bind ItemTooltipText, Mode=OneWay}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="68" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<CheckBox
x:Name="SelectionCheckbox"
Grid.ColumnSpan="2"
Width="32"
MinWidth="0"
MinHeight="0"
Margin="6"
<UserControl>
<Grid
MaxHeight="68"
Padding="0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Checked="ItemSelected_Checked"
DoubleTapped="SelectionCheckbox_DoubleTapped"
Unchecked="ItemSelected_Unchecked" />
<StackPanel
Width="20"
Margin="8,4,0,4"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Orientation="Vertical">
<Ellipse
Width="12"
Height="12"
Margin="0,4,0,4"
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}" />
<FontIcon
x:Name="CloudDriveSyncStatusGlyph"
x:Phase="2"
FontSize="12"
Glyph="{x:Bind ((local3:CloudDriveSyncStatusUI)SyncStatusUI).Glyph, Mode=OneWay}"
Visibility="{Binding InstanceViewModel.IsPageTypeCloudDrive, ElementName=PageRoot, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" />
</StackPanel>
<Grid
Grid.Column="1"
Height="60"
Margin="0,4,0,4"
Opacity="{x:Bind Opacity, Mode=OneWay}"
Tag="ItemImage">
<ContentPresenter
x:Name="PictureBorder"
VerticalAlignment="Stretch"
Background="Transparent"
ColumnSpacing="4"
IsRightTapEnabled="True"
Loaded="Grid_Loaded"
ToolTipService.ToolTip="{x:Bind ItemTooltipText, Mode=OneWay}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="68" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<CheckBox
x:Name="SelectionCheckbox"
Grid.ColumnSpan="2"
Width="32"
MinWidth="0"
MinHeight="0"
Margin="6"
Padding="0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Checked="ItemSelected_Checked"
DoubleTapped="SelectionCheckbox_DoubleTapped"
Unchecked="ItemSelected_Unchecked"
Visibility="Collapsed" />
<StackPanel
Width="20"
Margin="8,4,0,4"
HorizontalAlignment="Center"
VerticalAlignment="Center"
x:Load="{x:Bind LoadFileIcon, Mode=OneWay}"
x:Phase="1"
CornerRadius="{StaticResource GridViewThumbnailCornerRadius}">
Orientation="Vertical">
<Ellipse
Width="12"
Height="12"
Margin="0,4,0,4"
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}" />
<FontIcon
x:Name="CloudDriveSyncStatusGlyph"
x:Phase="2"
FontSize="12"
Glyph="{x:Bind ((local3:CloudDriveSyncStatusUI)SyncStatusUI).Glyph, Mode=OneWay}"
Visibility="{Binding InstanceViewModel.IsPageTypeCloudDrive, ElementName=PageRoot, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}" />
</StackPanel>
<Grid
Grid.Column="1"
Height="60"
Margin="0,4,0,4"
Opacity="{x:Bind Opacity, Mode=OneWay}"
Tag="ItemImage">
<ContentPresenter
x:Name="PictureBorder"
HorizontalAlignment="Center"
VerticalAlignment="Center"
x:Load="{x:Bind LoadFileIcon, Mode=OneWay}"
x:Phase="1"
CornerRadius="{StaticResource GridViewThumbnailCornerRadius}">
<Image
x:Name="Picture"
Width="60"
Source="{x:Bind FileImage, Mode=OneWay}"
Stretch="Uniform" />
</ContentPresenter>
<Image
x:Name="Picture"
x:Name="FolderGlyphIcon"
Width="60"
Height="60"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
x:Load="{x:Bind LoadDefaultIcon, Mode=OneWay}"
Source="{x:Bind PlaceholderDefaultIcon, Mode=OneWay}" />
<Border
x:Name="TypeUnknownGlyph"
Width="60"
Source="{x:Bind FileImage, Mode=OneWay}"
Height="60"
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="2"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
x:Load="True"
x:Phase="1"
Source="{x:Bind IconOverlay, Mode=OneWay}"
Stretch="Uniform" />
</ContentPresenter>
<Image
x:Name="FolderGlyphIcon"
Width="60"
Height="60"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
x:Load="{x:Bind LoadDefaultIcon, Mode=OneWay}"
Source="{x:Bind PlaceholderDefaultIcon, Mode=OneWay}" />
<Border
x:Name="TypeUnknownGlyph"
Width="60"
<Viewbox
x:Name="WebShortcutGlyph"
MaxWidth="60"
HorizontalAlignment="Center"
VerticalAlignment="Center"
x:Load="{x:Bind LoadWebShortcutGlyph, Mode=OneWay}"
x:Phase="1">
<FontIcon FontSize="28" Glyph="&#xE71B;" />
</Viewbox>
<Viewbox
x:Name="ShortcutGlyphElement"
Width="16"
Height="16"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
x:Load="{x:Bind IsShortcut}"
x:Phase="1">
<uc:OpacityIcon Style="{StaticResource ColorIconShortcut}" />
</Viewbox>
</Grid>

<Grid
Grid.Column="2"
Height="60"
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="2"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
x:Load="True"
x:Phase="1"
Source="{x:Bind IconOverlay, Mode=OneWay}"
Stretch="Uniform" />
<Viewbox
x:Name="WebShortcutGlyph"
MaxWidth="60"
HorizontalAlignment="Center"
VerticalAlignment="Center"
x:Load="{x:Bind LoadWebShortcutGlyph, Mode=OneWay}"
x:Phase="1">
<FontIcon FontSize="28" Glyph="&#xE71B;" />
</Viewbox>
<Viewbox
x:Name="ShortcutGlyphElement"
Width="16"
Height="16"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
x:Load="{x:Bind IsShortcut}"
x:Phase="1">
<uc:OpacityIcon Style="{StaticResource ColorIconShortcut}" />
</Viewbox>
</Grid>
Margin="0,4,8,4"
RowSpacing="4">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock
x:Name="ItemName"
Grid.Row="0"
HorizontalAlignment="Left"
MaxLines="2"
Text="{x:Bind Name, Mode=OneWay}"
TextTrimming="CharacterEllipsis"
TextWrapping="Wrap" />
<TextBox
x:Name="TileViewTextBoxItemName"
Grid.Row="0"
HorizontalAlignment="Left"
BeforeTextChanging="ItemNameTextBox_BeforeTextChanging"
Text="{x:Bind Name, Mode=OneWay}"
Visibility="Collapsed" />
<TextBlock
Grid.Row="1"
HorizontalAlignment="Left"
FontSize="12px"
Opacity="0.6"
Text="{x:Bind ItemType, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
TextTrimming="CharacterEllipsis"
TextWrapping="NoWrap" />
<TextBlock
Grid.Row="2"
HorizontalAlignment="Left"
FontSize="12px"
Opacity="0.6"
Text="{x:Bind FileSize, Mode=OneWay}"
TextTrimming="CharacterEllipsis"
TextWrapping="NoWrap" />
</Grid>

<Grid
Grid.Column="2"
Height="60"
Margin="0,4,8,4"
RowSpacing="4">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock
x:Name="ItemName"
Grid.Row="0"
HorizontalAlignment="Left"
MaxLines="2"
Text="{x:Bind Name, Mode=OneWay}"
TextTrimming="CharacterEllipsis"
TextWrapping="Wrap" />
<TextBox
x:Name="TileViewTextBoxItemName"
Grid.Row="0"
HorizontalAlignment="Left"
BeforeTextChanging="ItemNameTextBox_BeforeTextChanging"
Text="{x:Bind Name, Mode=OneWay}"
Visibility="Collapsed" />
<TextBlock
Grid.Row="1"
HorizontalAlignment="Left"
FontSize="12px"
Opacity="0.6"
Text="{x:Bind ItemType, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
TextTrimming="CharacterEllipsis"
TextWrapping="NoWrap" />
<TextBlock
Grid.Row="2"
HorizontalAlignment="Left"
FontSize="12px"
Opacity="0.6"
Text="{x:Bind FileSize, Mode=OneWay}"
TextTrimming="CharacterEllipsis"
TextWrapping="NoWrap" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckboxVisibilityStates">
<VisualState x:Name="HideCheckbox" />
<VisualState x:Name="ShowCheckbox">
<VisualState.Setters>
<Setter Target="SelectionCheckbox.Visibility" Value="Visible" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</Grid>
</UserControl>
</DataTemplate>

<Style TargetType="GridViewHeaderItem">
Expand Down