Skip to content

Commit 5503fcd

Browse files
LeftofZenLeftofZen
committed
Slightly improved UI in folder tree and object view
1 parent a5a1926 commit 5503fcd

4 files changed

Lines changed: 238 additions & 206 deletions

File tree

‎Gui/Views/FolderTreeView.axaml‎

Lines changed: 141 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
<UserControl
2-
xmlns="https://github.com/avaloniaui"
3-
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4-
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5-
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6-
xmlns:vm="using:Gui.ViewModels"
7-
xmlns:mo="using:Gui.Models"
8-
xmlns:vi="using:Gui.Views"
9-
xmlns:cnv="using:Gui.Converters"
10-
xmlns:materialIcons="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
11-
mc:Ignorable="d" d:DesignWidth="448" d:DesignHeight="768"
12-
x:Class="Gui.Views.FolderTreeView"
13-
x:DataType="vm:FolderTreeViewModel">
2+
xmlns="https://github.com/avaloniaui"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6+
xmlns:vm="using:Gui.ViewModels"
7+
xmlns:mo="using:Gui.Models"
8+
xmlns:vi="using:Gui.Views"
9+
xmlns:cnv="using:Gui.Converters"
10+
xmlns:materialIcons="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
11+
mc:Ignorable="d" d:DesignWidth="448" d:DesignHeight="768"
12+
x:Class="Gui.Views.FolderTreeView"
13+
x:DataType="vm:FolderTreeViewModel">
1414

1515
<Design.DataContext>
1616
<vm:DesignerFolderTreeViewModel/>
@@ -42,147 +42,144 @@
4242
</TabStrip>
4343
<Grid Background="{DynamicResource ExpanderHeaderBackground}">
4444
<Grid.RowDefinitions>
45+
<RowDefinition Height="Auto"/>
4546
<RowDefinition Height="Auto"/>
4647
<RowDefinition Height="Auto"/>
4748
<RowDefinition Height="*"/>
4849
</Grid.RowDefinitions>
49-
<Border Grid.Row="0" BorderThickness="1">
50-
<DockPanel>
51-
<Button Command="{Binding OpenCurrentFolder}" BorderThickness="0" DockPanel.Dock="Right" MinWidth="48" MaxWidth="48" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="2" Padding="2" ToolTip.Tip="Open folder">
52-
<materialIcons:MaterialIcon Kind="FolderOpen" Width="24" Height="24" Margin="2" />
53-
</Button>
54-
<TextBox Text="{Binding CurrentDirectory}" BorderThickness="0" DockPanel.Dock="Right" Watermark="Current directory" UseFloatingWatermark="True" IsReadOnly="True" VerticalContentAlignment="Center" Margin="2"/>
55-
</DockPanel>
56-
</Border>
57-
<Border Grid.Row="1" BorderThickness="1">
58-
<DockPanel>
59-
<Button Command="{Binding RefreshDirectoryItems}" BorderThickness="0" DockPanel.Dock="Right" MinWidth="48" MaxWidth="48" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="2" Padding="2" ToolTip.Tip="{Binding RecreateText}">
60-
<DockPanel>
61-
<ProgressBar DockPanel.Dock="Bottom" Minimum="0" Maximum="100" Margin="4" Height="8" Value="{Binding IndexOrDownloadProgress}"/>
62-
<materialIcons:MaterialIcon Kind="DatabaseRefresh" Width="24" Height="24" Margin="2" />
63-
</DockPanel>
64-
</Button>
65-
<ComboBox ItemsSource="{Binding OnlineBrowseTargets}"
66-
SelectedItem="{Binding SelectedOnlineBrowseTarget}"
67-
DisplayMemberBinding="{Binding DisplayName}"
68-
IsVisible="{Binding IsOnline}"
69-
AutomationProperties.Name="Online content type"
70-
ToolTip.Tip="Select the type of online content to browse"
71-
Margin="2"
72-
MinWidth="160"
73-
DockPanel.Dock="Left"
74-
VerticalAlignment="Center"/>
75-
<TextBox Text="{Binding DirectoryFileCount}" BorderThickness="0" DockPanel.Dock="Right" IsReadOnly="True" VerticalContentAlignment="Center" Margin="2"/>
76-
</DockPanel>
77-
</Border>
78-
<Border Grid.Row="2" BorderThickness="4">
79-
<DockPanel>
80-
<StackPanel Orientation="Vertical" Margin="4" DockPanel.Dock="Top" Spacing="4" IsVisible="{Binding SupportsFilters}">
81-
<ItemsControl ItemsSource="{Binding Filters}">
82-
<ItemsControl.Styles>
83-
<Style Selector="ItemsPresenter > ContentPresenter, ItemsControl > ContentPresenter:nth-child(odd)">
84-
<Setter Property="Background" Value="#60C0C0C0" />
85-
</Style>
86-
<Style Selector="ItemsPresenter > ContentPresenter, ItemsControl > ContentPresenter:nth-child(even)">
87-
<Setter Property="Background" Value="#60606060" />
88-
</Style>
89-
</ItemsControl.Styles>
90-
<ItemsControl.ItemTemplate>
91-
<DataTemplate>
92-
<DockPanel Margin="4">
93-
<Button DockPanel.Dock="Right" ZIndex="1" Margin="2,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" VerticalContentAlignment="Center" Content="X" Command="{Binding RemoveFilterCommand}" Classes="danger" />
94-
<StackPanel Spacing="4">
95-
<StackPanel ZIndex="0" Orientation="Horizontal" Spacing="4">
96-
<ComboBox ItemsSource="{Binding AvailableFiltersList, Mode=TwoWay}" DockPanel.Dock="Top" SelectedItem="{Binding SelectedObjectType, Mode=TwoWay}" HorizontalAlignment="Stretch" Height="32" MinWidth="128">
97-
<ComboBox.ItemContainerTheme>
98-
<ControlTheme TargetType="ComboBoxItem">
99-
<Setter Property="Padding" Value="0" />
100-
<Setter Property="Margin" Value="0" />
101-
</ControlTheme>
102-
</ComboBox.ItemContainerTheme>
103-
<ComboBox.ItemTemplate>
104-
<DataTemplate>
105-
<Panel Margin="0" Background="{Binding BackgroundColour}">
106-
<StackPanel Orientation="Horizontal" Margin="4" >
107-
<materialIcons:MaterialIcon Kind="{Binding IconName, Converter={StaticResource EnumToMaterialIconConverter}}" Width="24" Height="24" Margin="2"/>
108-
<TextBlock VerticalAlignment="Center" Text="{Binding DisplayName}" />
109-
</StackPanel>
110-
</Panel>
111-
</DataTemplate>
112-
</ComboBox.ItemTemplate>
113-
</ComboBox>
114-
<ComboBox ItemsSource="{Binding AvailableProperties}" SelectedItem="{Binding SelectedProperty}" DisplayMemberBinding="{Binding Name}"/>
115-
<ComboBox ItemsSource="{Binding AvailableOperators}" SelectedItem="{Binding SelectedOperator}"/>
116-
</StackPanel>
117-
<Grid DockPanel.Dock="Bottom">
118-
<TextBox Text="{Binding TextValue}" Watermark="Value" IsVisible="{Binding IsTextValue}"/>
119-
<DatePicker SelectedDate="{Binding DateValue}" IsVisible="{Binding IsDateValue}"/>
120-
<ComboBox ItemsSource="{Binding AvailableEnumValues}" SelectedItem="{Binding EnumValue}" IsVisible="{Binding IsEnumValue}"/>
121-
<CheckBox IsChecked="{Binding BoolValue}" IsVisible="{Binding IsBoolValue}" />
122-
</Grid>
123-
</StackPanel>
124-
</DockPanel>
125-
</DataTemplate>
126-
</ItemsControl.ItemTemplate>
127-
</ItemsControl>
128-
<DockPanel>
129-
<TextBlock DockPanel.Dock="Left" Margin="4" Text="{Binding ResultsCount, StringFormat='\{0\} results'}" VerticalAlignment="Center" />
130-
<Button Command="{Binding ExpandAllCommand}" ToolTip.Tip="Expand all categories" DockPanel.Dock="Right" IsVisible="{Binding SupportsHierarchyCommands}">
131-
<materialIcons:MaterialIcon Kind="ExpandAll" Width="24" Height="24" Margin="2" />
132-
</Button>
133-
<Button Command="{Binding CollapseAllCommand}" ToolTip.Tip="Collapse all catagories" DockPanel.Dock="Right" IsVisible="{Binding SupportsHierarchyCommands}">
134-
<materialIcons:MaterialIcon Kind="CollapseAll" Width="24" Height="24" Margin="2" />
135-
</Button>
136-
<Button Command="{Binding AddFilterCommand}" ToolTip.Tip="Add a search filter" DockPanel.Dock="Right" HorizontalAlignment="Right" IsVisible="{Binding SupportsFilters}">
137-
<materialIcons:MaterialIcon Kind="Plus" Width="24" Height="24" Margin="2" />
138-
</Button>
139-
</DockPanel>
140-
</StackPanel>
141-
<DockPanel DockPanel.Dock="Top" Margin="4" IsVisible="{Binding HasOnlineBrowseResults}">
142-
<TextBlock DockPanel.Dock="Left" Margin="4" Text="{Binding ResultsCount, StringFormat='\{0\} results'}" VerticalAlignment="Center" />
50+
<DockPanel Grid.Row="0">
51+
<Button Command="{Binding OpenCurrentFolder}" BorderThickness="0" DockPanel.Dock="Right" MinWidth="48" MaxWidth="48" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="2" Padding="2" ToolTip.Tip="Open folder">
52+
<materialIcons:MaterialIcon Kind="FolderOpen" Width="24" Height="24" Margin="2" />
53+
</Button>
54+
<TextBox Text="{Binding CurrentDirectory}" BorderThickness="0" DockPanel.Dock="Right" Watermark="Current directory" UseFloatingWatermark="True" IsReadOnly="True" VerticalContentAlignment="Center" Margin="2"/>
55+
</DockPanel>
56+
<DockPanel Grid.Row="1">
57+
<Button Command="{Binding RefreshDirectoryItems}" BorderThickness="0" DockPanel.Dock="Right" MinWidth="48" MaxWidth="48" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="2" Padding="2" ToolTip.Tip="{Binding RecreateText}">
58+
<DockPanel>
59+
<ProgressBar DockPanel.Dock="Bottom" Minimum="0" Maximum="100" Margin="4" Height="8" Value="{Binding IndexOrDownloadProgress}"/>
60+
<materialIcons:MaterialIcon Kind="DatabaseRefresh" Width="24" Height="24" Margin="2" />
14361
</DockPanel>
144-
<TreeDataGrid Name="ObjectsTreeDataGrid" CanUserResizeColumns="True" CanUserSortColumns="True" IsVisible="{Binding UsesTreeDataGrid}">
145-
<TreeDataGrid.Styles>
146-
<Style Selector="TreeDataGrid TreeDataGridRow">
147-
<Setter Property="Height" Value="32"/>
62+
</Button>
63+
<ComboBox ItemsSource="{Binding OnlineBrowseTargets}"
64+
SelectedItem="{Binding SelectedOnlineBrowseTarget}"
65+
DisplayMemberBinding="{Binding DisplayName}"
66+
IsVisible="{Binding IsOnline}"
67+
AutomationProperties.Name="Online content type"
68+
ToolTip.Tip="Select the type of online content to browse"
69+
Margin="2"
70+
MinWidth="160"
71+
DockPanel.Dock="Left"
72+
VerticalAlignment="Center"/>
73+
<TextBox Text="{Binding DirectoryFileCount}" BorderThickness="0" DockPanel.Dock="Right" IsReadOnly="True" VerticalContentAlignment="Center" Margin="2"/>
74+
</DockPanel>
75+
<DockPanel Grid.Row="2">
76+
<StackPanel Orientation="Vertical" Margin="4" DockPanel.Dock="Top" Spacing="4" IsVisible="{Binding SupportsFilters}">
77+
<ItemsControl ItemsSource="{Binding Filters}">
78+
<ItemsControl.Styles>
79+
<Style Selector="ItemsPresenter > ContentPresenter, ItemsControl > ContentPresenter:nth-child(odd)">
80+
<Setter Property="Background" Value="#60C0C0C0" />
14881
</Style>
149-
<Style Selector="TreeDataGrid TreeDataGridRow:nth-child(even)">
150-
<Setter Property="Background" Value="#30808080"/>
151-
<!-- ARGB in hex -->
82+
<Style Selector="ItemsPresenter > ContentPresenter, ItemsControl > ContentPresenter:nth-child(even)">
83+
<Setter Property="Background" Value="#60606060" />
15284
</Style>
153-
</TreeDataGrid.Styles>
154-
<TreeDataGrid.Resources>
155-
<!-- Template for Name column cells -->
156-
<DataTemplate x:Key="Object" DataType="mo:FileSystemItem">
157-
<StackPanel Orientation="Horizontal" ToolTip.Tip="{Binding FileName}">
158-
<materialIcons:MaterialIcon Kind="{Binding DisplayIcon, Converter={StaticResource EnumToMaterialIconConverter}}" Width="24" Height="24" Margin="2"/>
159-
<TextBlock VerticalAlignment="Center" Text="{Binding NameComputed}"/>
160-
<StackPanel.ContextMenu>
161-
<ContextMenu IsVisible="{Binding HasContextActions}" IsEnabled="{Binding HasContextActions}">
162-
<MenuItem Header="Open folder" IsVisible="{Binding CanOpenFolder}" Command="{Binding $parent[TreeDataGrid].((vm:FolderTreeViewModel)DataContext).OpenFolderFor}" CommandParameter="{Binding}" />
163-
<MenuItem Header="Download" IsVisible="{Binding CanDownload}" Command="{Binding $parent[TreeDataGrid].((vm:FolderTreeViewModel)DataContext).DownloadOnlineItemCommand}" CommandParameter="{Binding}" />
164-
</ContextMenu>
165-
</StackPanel.ContextMenu>
166-
</StackPanel>
167-
</DataTemplate>
168-
<!-- Edit template for Name column cells -->
169-
<DataTemplate x:Key="Edit" DataType="mo:FileSystemItem">
170-
<StackPanel Orientation="Horizontal" >
171-
<materialIcons:MaterialIcon Kind="{Binding DisplayIcon, Converter={StaticResource EnumToMaterialIconConverter}}" Width="24" Height="24" Margin="2" />
172-
<TextBlock VerticalAlignment="Center" Text="{Binding NameComputed}"/>
173-
<StackPanel.ContextMenu>
174-
<ContextMenu IsVisible="{Binding HasContextActions}" IsEnabled="{Binding HasContextActions}">
175-
<MenuItem Header="Open folder" IsVisible="{Binding CanOpenFolder}" Command="{Binding $parent[TreeDataGrid].((vm:FolderTreeViewModel)DataContext).OpenFolderFor}" CommandParameter="{Binding}" />
176-
<MenuItem Header="Download" IsVisible="{Binding CanDownload}" Command="{Binding $parent[TreeDataGrid].((vm:FolderTreeViewModel)DataContext).DownloadOnlineItemCommand}" CommandParameter="{Binding}" />
177-
</ContextMenu>
178-
</StackPanel.ContextMenu>
179-
</StackPanel>
85+
</ItemsControl.Styles>
86+
<ItemsControl.ItemTemplate>
87+
<DataTemplate>
88+
<DockPanel Margin="4">
89+
<Button DockPanel.Dock="Right" ZIndex="1" Margin="2,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" VerticalContentAlignment="Center" Content="X" Command="{Binding RemoveFilterCommand}" Classes="danger" />
90+
<StackPanel Spacing="4">
91+
<StackPanel ZIndex="0" Orientation="Horizontal" Spacing="4">
92+
<ComboBox ItemsSource="{Binding AvailableFiltersList, Mode=TwoWay}" DockPanel.Dock="Top" SelectedItem="{Binding SelectedObjectType, Mode=TwoWay}" HorizontalAlignment="Stretch" Height="32" MinWidth="128">
93+
<ComboBox.ItemContainerTheme>
94+
<ControlTheme TargetType="ComboBoxItem">
95+
<Setter Property="Padding" Value="0" />
96+
<Setter Property="Margin" Value="0" />
97+
</ControlTheme>
98+
</ComboBox.ItemContainerTheme>
99+
<ComboBox.ItemTemplate>
100+
<DataTemplate>
101+
<Panel Margin="0" Background="{Binding BackgroundColour}">
102+
<StackPanel Orientation="Horizontal" Margin="4" >
103+
<materialIcons:MaterialIcon Kind="{Binding IconName, Converter={StaticResource EnumToMaterialIconConverter}}" Width="24" Height="24" Margin="2"/>
104+
<TextBlock VerticalAlignment="Center" Text="{Binding DisplayName}" />
105+
</StackPanel>
106+
</Panel>
107+
</DataTemplate>
108+
</ComboBox.ItemTemplate>
109+
</ComboBox>
110+
<ComboBox ItemsSource="{Binding AvailableProperties}" SelectedItem="{Binding SelectedProperty}" DisplayMemberBinding="{Binding Name}"/>
111+
<ComboBox ItemsSource="{Binding AvailableOperators}" SelectedItem="{Binding SelectedOperator}"/>
112+
</StackPanel>
113+
<Grid DockPanel.Dock="Bottom">
114+
<TextBox Text="{Binding TextValue}" Watermark="Value" IsVisible="{Binding IsTextValue}"/>
115+
<DatePicker SelectedDate="{Binding DateValue}" IsVisible="{Binding IsDateValue}"/>
116+
<ComboBox ItemsSource="{Binding AvailableEnumValues}" SelectedItem="{Binding EnumValue}" IsVisible="{Binding IsEnumValue}"/>
117+
<CheckBox IsChecked="{Binding BoolValue}" IsVisible="{Binding IsBoolValue}" />
118+
</Grid>
119+
</StackPanel>
120+
</DockPanel>
180121
</DataTemplate>
181-
</TreeDataGrid.Resources>
182-
</TreeDataGrid>
183-
<vi:OnlineBrowseResultsView IsVisible="{Binding HasOnlineBrowseResults}" />
122+
</ItemsControl.ItemTemplate>
123+
</ItemsControl>
124+
<DockPanel>
125+
<TextBlock DockPanel.Dock="Left" Margin="4" Text="{Binding ResultsCount, StringFormat='\{0\} results'}" VerticalAlignment="Center" />
126+
<Button Command="{Binding ExpandAllCommand}" ToolTip.Tip="Expand all categories" DockPanel.Dock="Right" IsVisible="{Binding SupportsHierarchyCommands}">
127+
<materialIcons:MaterialIcon Kind="ExpandAll" Width="24" Height="24" Margin="2" />
128+
</Button>
129+
<Button Command="{Binding CollapseAllCommand}" ToolTip.Tip="Collapse all catagories" DockPanel.Dock="Right" IsVisible="{Binding SupportsHierarchyCommands}">
130+
<materialIcons:MaterialIcon Kind="CollapseAll" Width="24" Height="24" Margin="2" />
131+
</Button>
132+
<Button Command="{Binding AddFilterCommand}" ToolTip.Tip="Add a search filter" DockPanel.Dock="Right" HorizontalAlignment="Right" IsVisible="{Binding SupportsFilters}">
133+
<materialIcons:MaterialIcon Kind="Plus" Width="24" Height="24" Margin="2" />
134+
</Button>
135+
</DockPanel>
136+
</StackPanel>
137+
<DockPanel DockPanel.Dock="Top" Margin="4" IsVisible="{Binding HasOnlineBrowseResults}">
138+
<TextBlock DockPanel.Dock="Left" Margin="4" Text="{Binding ResultsCount, StringFormat='\{0\} results'}" VerticalAlignment="Center" />
184139
</DockPanel>
185-
</Border>
140+
</DockPanel>
141+
<DockPanel Grid.Row="3">
142+
<TreeDataGrid Name="ObjectsTreeDataGrid" CanUserResizeColumns="True" CanUserSortColumns="True" IsVisible="{Binding UsesTreeDataGrid}">
143+
<TreeDataGrid.Styles>
144+
<Style Selector="TreeDataGrid TreeDataGridRow">
145+
<Setter Property="Height" Value="32"/>
146+
</Style>
147+
<Style Selector="TreeDataGrid TreeDataGridRow:nth-child(even)">
148+
<Setter Property="Background" Value="#30808080"/>
149+
<!-- ARGB in hex -->
150+
</Style>
151+
</TreeDataGrid.Styles>
152+
<TreeDataGrid.Resources>
153+
<!-- Template for Name column cells -->
154+
<DataTemplate x:Key="Object" DataType="mo:FileSystemItem">
155+
<StackPanel Orientation="Horizontal" ToolTip.Tip="{Binding FileName}">
156+
<materialIcons:MaterialIcon Kind="{Binding DisplayIcon, Converter={StaticResource EnumToMaterialIconConverter}}" Width="24" Height="24" Margin="2"/>
157+
<TextBlock VerticalAlignment="Center" Text="{Binding NameComputed}"/>
158+
<StackPanel.ContextMenu>
159+
<ContextMenu IsVisible="{Binding HasContextActions}" IsEnabled="{Binding HasContextActions}">
160+
<MenuItem Header="Open folder" IsVisible="{Binding CanOpenFolder}" Command="{Binding $parent[TreeDataGrid].((vm:FolderTreeViewModel)DataContext).OpenFolderFor}" CommandParameter="{Binding}" />
161+
<MenuItem Header="Download" IsVisible="{Binding CanDownload}" Command="{Binding $parent[TreeDataGrid].((vm:FolderTreeViewModel)DataContext).DownloadOnlineItemCommand}" CommandParameter="{Binding}" />
162+
</ContextMenu>
163+
</StackPanel.ContextMenu>
164+
</StackPanel>
165+
</DataTemplate>
166+
<!-- Edit template for Name column cells -->
167+
<DataTemplate x:Key="Edit" DataType="mo:FileSystemItem">
168+
<StackPanel Orientation="Horizontal" >
169+
<materialIcons:MaterialIcon Kind="{Binding DisplayIcon, Converter={StaticResource EnumToMaterialIconConverter}}" Width="24" Height="24" Margin="2" />
170+
<TextBlock VerticalAlignment="Center" Text="{Binding NameComputed}"/>
171+
<StackPanel.ContextMenu>
172+
<ContextMenu IsVisible="{Binding HasContextActions}" IsEnabled="{Binding HasContextActions}">
173+
<MenuItem Header="Open folder" IsVisible="{Binding CanOpenFolder}" Command="{Binding $parent[TreeDataGrid].((vm:FolderTreeViewModel)DataContext).OpenFolderFor}" CommandParameter="{Binding}" />
174+
<MenuItem Header="Download" IsVisible="{Binding CanDownload}" Command="{Binding $parent[TreeDataGrid].((vm:FolderTreeViewModel)DataContext).DownloadOnlineItemCommand}" CommandParameter="{Binding}" />
175+
</ContextMenu>
176+
</StackPanel.ContextMenu>
177+
</StackPanel>
178+
</DataTemplate>
179+
</TreeDataGrid.Resources>
180+
</TreeDataGrid>
181+
<vi:OnlineBrowseResultsView IsVisible="{Binding HasOnlineBrowseResults}" />
182+
</DockPanel>
186183
</Grid>
187184
</DockPanel>
188185
</UserControl>

0 commit comments

Comments
 (0)