Skip to content

Commit

Permalink
(chocolateyGH-685) Improve Settings view
Browse files Browse the repository at this point in the history 
- Improve TabItem selection foreground
- Same DataGrid style in settings view
- Remove unused Flyout resource
- Use alternation row backgrounds
  • Loading branch information
@punker76
punker76 committed Mar 2, 2021
1 parent 83c646f commit 6152bd8
Show file tree
Hide file tree
Showing 4 changed files with 85 additions and 113 deletions.
8 changes: 2 additions & 6 deletions Source/ChocolateyGui.Common.Windows/ChocolateyGui.Common.Windows.csproj
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="15.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
<Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />
<PropertyGroup>
Expand Down Expand Up @@ -328,10 +328,6 @@
<Generator>MSBuild:Compile</Generator>
<SubType>Designer</SubType>
</Page>
<Page Include="Resources\ControlStyles\Flyout.xaml">
<Generator>MSBuild:Compile</Generator>
<SubType>Designer</SubType>
</Page>
<Page Include="Resources\ControlStyles\Markdown.xaml">
<Generator>MSBuild:Compile</Generator>
<SubType>Designer</SubType>
Expand Down Expand Up @@ -382,7 +378,7 @@
</Page>
</ItemGroup>
<ItemGroup>
<SourceRoot Include="$(MSBuildThisFileDirectory)/../"/>
<SourceRoot Include="$(MSBuildThisFileDirectory)/../" />
</ItemGroup>
<Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />
<Target Name="EnsureNuGetPackageBuildImports" BeforeTargets="PrepareForBuild">
Expand Down
54 changes: 0 additions & 54 deletions Source/ChocolateyGui.Common.Windows/Resources/ControlStyles/Flyout.xaml
View file

This file was deleted.

17 changes: 16 additions & 1 deletion Source/ChocolateyGui.Common.Windows/Resources/Controls.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@

<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ControlStyles/Typography.xaml" />
<ResourceDictionary Source="ControlStyles/Flyout.xaml" />
<ResourceDictionary Source="ControlStyles/SourceList.xaml" />
<ResourceDictionary Source="ControlStyles/ToggleSwitch.xaml" />
</ResourceDictionary.MergedDictionaries>
Expand Down Expand Up @@ -194,6 +193,21 @@
</ControlTemplate.Triggers>
</ControlTemplate>

<Style BasedOn="{StaticResource MahApps.Styles.TabItem}" TargetType="TabItem">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock x:Name="Text" Text="{Binding Mode=OneWay}" />
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=TabItem}, Path=IsSelected}" Value="true">
<Setter TargetName="Text" Property="TextElement.Foreground" Value="{DynamicResource MahApps.Brushes.SystemControlHighlightBaseHigh}" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>

<Style TargetType="{x:Type TabControl}" BasedOn="{StaticResource MahApps.Styles.TabControl.Animated}" />

<Style x:Key="SourceBaseTextBlockStyle" TargetType="{x:Type TextBlock}">
Expand Down Expand Up @@ -646,6 +660,7 @@
<Setter Property="Background" Value="{DynamicResource MahApps.Brushes.Control.Background}" />
<Setter Property="BorderBrush" Value="{DynamicResource MahApps.Brushes.Accent}" />
<Setter Property="RowBackground" Value="{DynamicResource MahApps.Brushes.Control.Background}" />
<Setter Property="AlternatingRowBackground" Value="{DynamicResource MahApps.Brushes.Gray10}" />
</Style>

<Style x:Key="PackagesGridStyle" TargetType="{x:Type DataGrid}" BasedOn="{StaticResource {x:Type DataGrid}}">
Expand Down
119 changes: 67 additions & 52 deletions Source/ChocolateyGui.Common.Windows/Views/SettingsView.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
metro:DialogParticipation.Register="{Binding}"
d:DataContext="{d:DesignInstance Type=viewModels:SettingsViewModel, IsDesignTimeCreatable=False}"
d:DesignHeight="786" d:DesignWidth="1366">

<UserControl.Resources>
<Style TargetType="{x:Type metro:ToggleSwitch}" BasedOn="{StaticResource Chocolatey.Styles.ToggleSwitch}">
<Setter Property="OnContent" Value="{x:Static properties:Resources.SettingsView_On}"/>
Expand All @@ -24,37 +25,52 @@

<converters:NullToValue x:Key="NullToFalse" TrueValue="False" FalseValue="True" />

<DataTemplate x:Key="ChocolateyFeatureTemplate" DataType="models:ChocolateyFeature">
<Grid Margin="0 10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Style="{StaticResource BaseAltTextBlockStyle}" Text="{Binding Name}" TextWrapping="Wrap" />
<metro:ToggleSwitch Grid.Column="1" Grid.Row="0" VerticalAlignment="Center" Margin="4" IsOn="{Binding Enabled}" cal:Message.Attach="[Event IsCheckedChanged] = [Action ChocolateyFeatureToggled($dataContext)]"/>
<TextBlock Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Style="{StaticResource BodyTextBlockStyle}" Text="{Binding Description}" TextWrapping="Wrap" />
<DataTemplate x:Key="ChocolateyGuiFeatureTemplate" DataType="models:ChocolateyGuiFeature">
<Grid x:Name="RootGrid" Background="Transparent">
<Grid Margin="5 0 5 20">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Style="{StaticResource BaseAltTextBlockStyle}" Text="{Binding Title}" TextWrapping="Wrap" />
<metro:ToggleSwitch Grid.Column="1" Grid.Row="0" VerticalAlignment="Center" Margin="4" IsOn="{Binding Enabled}" cal:Message.Attach="[Event IsCheckedChanged] = [Action ChocolateyGuiFeatureToggled($dataContext)]"/>
<TextBlock Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Style="{StaticResource BodyTextBlockStyle}" Text="{Binding Description}" TextWrapping="Wrap" />
</Grid>
</Grid>
<DataTemplate.Triggers>
<Trigger Property="ItemsControl.AlternationIndex" Value="1">
<Setter TargetName="RootGrid" Property="Background" Value="{DynamicResource MahApps.Brushes.Gray10}" />
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>

<DataTemplate x:Key="ChocolateyGuiFeatureTemplate" DataType="models:ChocolateyGuiFeature">
<Grid Margin="0 10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Style="{StaticResource BaseAltTextBlockStyle}" Text="{Binding Title}" TextWrapping="Wrap" />
<metro:ToggleSwitch Grid.Column="1" Grid.Row="0" VerticalAlignment="Center" Margin="4" IsOn="{Binding Enabled}" cal:Message.Attach="[Event IsCheckedChanged] = [Action ChocolateyGuiFeatureToggled($dataContext)]"/>
<TextBlock Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Style="{StaticResource BodyTextBlockStyle}" Text="{Binding Description}" TextWrapping="Wrap" />
<DataTemplate x:Key="ChocolateyFeatureTemplate" DataType="models:ChocolateyFeature">
<Grid x:Name="RootGrid" Background="Transparent">
<Grid Margin="5 0 5 20">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Style="{StaticResource BaseAltTextBlockStyle}" Text="{Binding Name}" TextWrapping="Wrap" />
<metro:ToggleSwitch Grid.Column="1" Grid.Row="0" VerticalAlignment="Center" Margin="4" IsOn="{Binding Enabled}" cal:Message.Attach="[Event IsCheckedChanged] = [Action ChocolateyFeatureToggled($dataContext)]"/>
<TextBlock Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Style="{StaticResource BodyTextBlockStyle}" Text="{Binding Description}" TextWrapping="Wrap" />
</Grid>
</Grid>
<DataTemplate.Triggers>
<Trigger Property="ItemsControl.AlternationIndex" Value="1">
<Setter TargetName="RootGrid" Property="Background" Value="{DynamicResource MahApps.Brushes.Gray10}" />
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>

</UserControl.Resources>

<DockPanel LastChildFill="True">
Expand Down Expand Up @@ -85,33 +101,31 @@
</Border>
</Grid>

<TabControl DockPanel.Dock="Left" Background="Transparent" metro:TabControlHelper.Underlined="TabPanel">
<TabControl Background="Transparent" metro:TabControlHelper.Underlined="TabPanel">
<TabItem Header="{x:Static properties:Resources.SettingsView_ChocolateyGui}">
<Grid Background="{DynamicResource MahApps.Brushes.ThemeBackground}" Margin="5">
<Grid Margin="5" UseLayoutRounding="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>

<DockPanel Margin="0 0 5 0" Grid.Column="0">
<TextBlock DockPanel.Dock="Top" Style="{StaticResource TitleTextBlockStyle}" Text="{x:Static properties:Resources.SettingsView_Features}"/>
<ScrollViewer VerticalScrollBarVisibility="Auto">
<ItemsControl ItemsSource="{Binding ChocolateyGuiFeatures}" ItemTemplate="{StaticResource ChocolateyGuiFeatureTemplate}"/>
<TextBlock DockPanel.Dock="Top" Margin="0 0 0 5" Style="{StaticResource TitleTextBlockStyle}" Text="{x:Static properties:Resources.SettingsView_Features}"/>
<ScrollViewer VerticalScrollBarVisibility="Auto" Background="{DynamicResource MahApps.Brushes.Control.Background}">
<ItemsControl AlternationCount="2" ItemsSource="{Binding ChocolateyGuiFeatures}" ItemTemplate="{StaticResource ChocolateyGuiFeatureTemplate}" />
</ScrollViewer>
</DockPanel>

<Grid Grid.Column="1" Margin="5 0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Style="{StaticResource TitleTextBlockStyle}"
Text="{x:Static properties:Resources.SettingsView_Settings}"
Margin="0,0,0,5"/>
<TextBlock Margin="0 0 0 5" Style="{StaticResource TitleTextBlockStyle}" Text="{x:Static properties:Resources.SettingsView_Settings}" />
<DataGrid Grid.Row="1"
BorderBrush="#DDD"
BorderThickness="1 1 1 0"
CanUserAddRows="False"
CanUserDeleteRows="False"
ItemsSource="{Binding ChocolateyGuiSettings}"
Expand All @@ -133,32 +147,28 @@
</Grid>
</Grid>
</TabItem>

<TabItem Header="{x:Static properties:Resources.SettingsView_Chocolatey}">
<Grid Background="{DynamicResource MahApps.Brushes.ThemeBackground}" Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Margin="5" UseLayoutRounding="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>

<DockPanel Margin="0 0 5 0" Grid.Column="0">
<TextBlock DockPanel.Dock="Top" Style="{StaticResource TitleTextBlockStyle}" Text="{x:Static properties:Resources.SettingsView_Features}"/>
<ScrollViewer VerticalScrollBarVisibility="Auto">
<ItemsControl ItemsSource="{Binding ChocolateyFeatures}" ItemTemplate="{StaticResource ChocolateyFeatureTemplate}" />
<TextBlock DockPanel.Dock="Top" Margin="0 0 0 5" Style="{StaticResource TitleTextBlockStyle}" Text="{x:Static properties:Resources.SettingsView_Features}"/>
<ScrollViewer VerticalScrollBarVisibility="Auto" Background="{DynamicResource MahApps.Brushes.Control.Background}">
<ItemsControl AlternationCount="2" ItemsSource="{Binding ChocolateyFeatures}" ItemTemplate="{StaticResource ChocolateyFeatureTemplate}" />
</ScrollViewer>
</DockPanel>

<Grid Grid.Column="1" Margin="5 0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Style="{StaticResource TitleTextBlockStyle}"
Text="{x:Static properties:Resources.SettingsView_Settings}"
Margin="0,0,0,5"/>
<TextBlock Margin="0 0 0 5" Style="{StaticResource TitleTextBlockStyle}" Text="{x:Static properties:Resources.SettingsView_Settings}" />
<DataGrid Grid.Row="1"
BorderBrush="#DDD"
BorderThickness="1 1 1 0"
CanUserAddRows="False"
CanUserDeleteRows="False"
ItemsSource="{Binding ChocolateySettings}"
Expand All @@ -180,19 +190,23 @@
</Grid>
</Grid>
</TabItem>

<TabItem Header="{x:Static properties:Resources.SettingsView_Sources}">
<Grid Margin="5">
<Grid Margin="5" UseLayoutRounding="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="2*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>

<!-- Sources -->
<TextBlock Grid.Row="0" Style="{StaticResource TitleTextBlockStyle}" Text="{x:Static properties:Resources.SettingsView_Sources}"/>
<TextBlock Grid.Row="0" Margin="0 0 0 5" Style="{StaticResource TitleTextBlockStyle}" Text="{x:Static properties:Resources.SettingsView_Sources}"/>
<DataGrid x:Name="SourcesGrid"
Grid.Row="1" Grid.Column="0"
CanUserAddRows="False" CanUserDeleteRows="False" IsReadOnly="True"
Grid.Row="1"
Grid.Column="0"
CanUserAddRows="False"
CanUserDeleteRows="False"
IsReadOnly="True"
cal:Message.Attach="[Event SelectionChanged] = [Action SourceSelectionChanged(SourcesGrid.SelectedItem)]"
SelectionMode="Single"
ItemsSource="{Binding Sources}" AutoGenerateColumns="False">
Expand Down Expand Up @@ -222,6 +236,7 @@
ElementStyle="{DynamicResource MahApps.Styles.CheckBox.DataGrid}" />
</DataGrid.Columns>
</DataGrid>

<DockPanel Grid.Row="2" Grid.Column="0" Margin="5">
<Grid DockPanel.Dock="Top">
<TextBlock Text="{x:Static properties:Resources.SettingsView_SourcesSource}" Margin="15 5 0 0" Style="{StaticResource SubtitleTextBlockStyle}"/>
Expand Down

0 comments on commit 6152bd8

Please sign in to comment.