teams: slightly changed the design and improved filtering options
This commit is contained in:
@@ -10,26 +10,116 @@
|
||||
<vm:TeamsViewModel />
|
||||
</Design.DataContext>
|
||||
|
||||
<UserControl.Styles>
|
||||
<Style Selector="Button.dropdown-item">
|
||||
<Setter Property="Padding" Value="8,4"/>
|
||||
<Setter Property="BorderThickness" Value="0"/>
|
||||
<Setter Property="Background" Value="Transparent"/>
|
||||
<Setter Property="HorizontalContentAlignment" Value="Left"/>
|
||||
</Style>
|
||||
<Style Selector="Button.dropdown-item:pointerover">
|
||||
<Setter Property="Background" Value="{DynamicResource SystemControlBackgroundListLowBrush}"/>
|
||||
</Style>
|
||||
</UserControl.Styles>
|
||||
|
||||
<Grid RowDefinitions="Auto,*,Auto" ColumnDefinitions="*,*">
|
||||
<TextBlock Grid.ColumnSpan="2" Grid.Row="0" Text="Teams Management" FontSize="20" FontWeight="Bold" Margin="16,16,16,8"/>
|
||||
|
||||
<!-- Left Panel: Team List and Filters -->
|
||||
<Border Grid.Column="0" Grid.Row="1" BorderBrush="Gray" BorderThickness="1" Margin="8" CornerRadius="4" Padding="8">
|
||||
<DockPanel>
|
||||
<TextBlock DockPanel.Dock="Top" Text="Teams" FontSize="16" FontWeight="SemiBold" Margin="0,0,0,8"/>
|
||||
<!-- Header with New Team button -->
|
||||
<DockPanel DockPanel.Dock="Top" Margin="0,0,0,8">
|
||||
<Button Command="{Binding CreateNewTeamCommand}" DockPanel.Dock="Right" Padding="8,4">
|
||||
<StackPanel Orientation="Horizontal" Spacing="4">
|
||||
<TextBlock Text="+" FontSize="16" FontWeight="Bold" VerticalAlignment="Center"/>
|
||||
<TextBlock Text="New Team" VerticalAlignment="Center"/>
|
||||
</StackPanel>
|
||||
</Button>
|
||||
<TextBlock Text="Teams" FontSize="16" FontWeight="SemiBold" VerticalAlignment="Center"/>
|
||||
</DockPanel>
|
||||
|
||||
<!-- Filters -->
|
||||
<StackPanel DockPanel.Dock="Top" Spacing="6" Margin="0,0,0,8">
|
||||
<TextBlock Text="Filters" FontWeight="SemiBold" FontSize="12"/>
|
||||
<TextBox Watermark="Filter by member name..." Text="{Binding FilterMemberName}"/>
|
||||
<TextBox Watermark="Filter by event..." Text="{Binding FilterEventName}"/>
|
||||
<TextBox Watermark="Filter by tournament..." Text="{Binding FilterTournamentName}"/>
|
||||
|
||||
<!-- Event Filter Dropdown -->
|
||||
<Panel Name="EventFilterPanel">
|
||||
<ToggleButton Name="EventFilterToggle" HorizontalContentAlignment="Left" HorizontalAlignment="Stretch" Padding="8,6"
|
||||
IsChecked="{Binding IsEventDropdownOpen}">
|
||||
<ToggleButton.Template>
|
||||
<ControlTemplate TargetType="ToggleButton">
|
||||
<Border Background="{TemplateBinding Background}" BorderBrush="Gray" BorderThickness="1" CornerRadius="4">
|
||||
<ContentPresenter Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}" HorizontalAlignment="Left"/>
|
||||
</Border>
|
||||
</ControlTemplate>
|
||||
</ToggleButton.Template>
|
||||
<ToggleButton.Content>
|
||||
<Panel>
|
||||
<TextBlock Text="{Binding SelectedEventFilter, Mode=OneWay}"/>
|
||||
<TextBlock Text="Filter by event..." Foreground="Gray" IsVisible="{Binding SelectedEventFilter, Converter={x:Static ObjectConverters.IsNull}}"/>
|
||||
</Panel>
|
||||
</ToggleButton.Content>
|
||||
</ToggleButton>
|
||||
<Popup IsOpen="{Binding IsEventDropdownOpen}" PlacementTarget="{Binding #EventFilterToggle}" Width="{Binding Bounds.Width, ElementName=EventFilterToggle}">
|
||||
<Border Background="{DynamicResource SystemControlBackgroundChromeMediumBrush}" BorderBrush="Gray" BorderThickness="1" CornerRadius="4">
|
||||
<DockPanel MaxHeight="200">
|
||||
<TextBox DockPanel.Dock="Top" Text="{Binding EventFilterSearch}" Watermark="Search events..." Margin="4" Padding="6,4"/>
|
||||
<Button DockPanel.Dock="Bottom" Content="All" Classes="dropdown-item" Foreground="Gray" Margin="4,0,4,4"
|
||||
Click="OnClearEventFilter"/>
|
||||
<ListBox ItemsSource="{Binding FilteredEvents}" MaxHeight="160">
|
||||
<ListBox.ItemTemplate>
|
||||
<DataTemplate x:DataType="x:String">
|
||||
<Button Content="{Binding}" Classes="dropdown-item" Click="OnEventSelected"/>
|
||||
</DataTemplate>
|
||||
</ListBox.ItemTemplate>
|
||||
</ListBox>
|
||||
</DockPanel>
|
||||
</Border>
|
||||
</Popup>
|
||||
</Panel>
|
||||
|
||||
<!-- Tournament Filter Dropdown -->
|
||||
<Panel Name="TournamentFilterPanel">
|
||||
<ToggleButton Name="TournamentFilterToggle" HorizontalContentAlignment="Left" HorizontalAlignment="Stretch" Padding="8,6"
|
||||
IsChecked="{Binding IsTournamentDropdownOpen}">
|
||||
<ToggleButton.Template>
|
||||
<ControlTemplate TargetType="ToggleButton">
|
||||
<Border Background="{TemplateBinding Background}" BorderBrush="Gray" BorderThickness="1" CornerRadius="4">
|
||||
<ContentPresenter Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}" HorizontalAlignment="Left"/>
|
||||
</Border>
|
||||
</ControlTemplate>
|
||||
</ToggleButton.Template>
|
||||
<ToggleButton.Content>
|
||||
<Panel>
|
||||
<TextBlock Text="{Binding SelectedTournamentFilter, Mode=OneWay}"/>
|
||||
<TextBlock Text="Filter by tournament..." Foreground="Gray" IsVisible="{Binding SelectedTournamentFilter, Converter={x:Static ObjectConverters.IsNull}}"/>
|
||||
</Panel>
|
||||
</ToggleButton.Content>
|
||||
</ToggleButton>
|
||||
<Popup IsOpen="{Binding IsTournamentDropdownOpen}" PlacementTarget="{Binding #TournamentFilterToggle}" Width="{Binding Bounds.Width, ElementName=TournamentFilterToggle}">
|
||||
<Border Background="{DynamicResource SystemControlBackgroundChromeMediumBrush}" BorderBrush="Gray" BorderThickness="1" CornerRadius="4">
|
||||
<DockPanel MaxHeight="200">
|
||||
<TextBox DockPanel.Dock="Top" Text="{Binding TournamentFilterSearch}" Watermark="Search tournaments..." Margin="4" Padding="6,4"/>
|
||||
<Button DockPanel.Dock="Bottom" Content="All" Classes="dropdown-item" Foreground="Gray" Margin="4,0,4,4"
|
||||
Click="OnClearTournamentFilter"/>
|
||||
<ListBox ItemsSource="{Binding FilteredTournaments}" MaxHeight="160">
|
||||
<ListBox.ItemTemplate>
|
||||
<DataTemplate x:DataType="x:String">
|
||||
<Button Content="{Binding}" Classes="dropdown-item" Click="OnTournamentSelected"/>
|
||||
</DataTemplate>
|
||||
</ListBox.ItemTemplate>
|
||||
</ListBox>
|
||||
</DockPanel>
|
||||
</Border>
|
||||
</Popup>
|
||||
</Panel>
|
||||
</StackPanel>
|
||||
|
||||
<!-- Team List -->
|
||||
<ListBox ItemsSource="{Binding Teams}"
|
||||
SelectedItem="{Binding SelectedTeam}"
|
||||
Margin="0,0,0,8">
|
||||
SelectedItem="{Binding SelectedTeam}">
|
||||
<ListBox.ItemTemplate>
|
||||
<DataTemplate x:DataType="vm:TeamDisplay">
|
||||
<StackPanel Spacing="2">
|
||||
@@ -54,8 +144,6 @@
|
||||
</DataTemplate>
|
||||
</ListBox.ItemTemplate>
|
||||
</ListBox>
|
||||
|
||||
<Button DockPanel.Dock="Bottom" Content="New Team" Command="{Binding CreateNewTeamCommand}" HorizontalAlignment="Stretch"/>
|
||||
</DockPanel>
|
||||
</Border>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user