Skip to content

Commit

Permalink
(GH-651) Improve Tile View
Browse files Browse the repository at this point in the history 
So that the latest Version do not overlap the current Version when an update is available.
Version numbers now in lower left corner. Also move the package name on top and the Out of Date/Installed overlays on the bottom right hand corner.
  • Loading branch information
@punker76 @gep13
punker76 authored and gep13 committed Apr 25, 2019
1 parent 305c0da commit 1ce7d77
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 69 deletions.
42 changes: 39 additions & 3 deletions Source/ChocolateyGui/Resources/Controls.xaml
View file
Expand Up @@ -172,20 +172,56 @@
<Grid ClipToBounds="True">
<Grid Height="20" Width="200">
<Grid.RenderTransform>
<TranslateTransform X="55" Y="-55" />
<TranslateTransform X="55" Y="55" />
</Grid.RenderTransform>
<Grid.LayoutTransform>
<TransformGroup>
<RotateTransform Angle="45" />
<RotateTransform Angle="-45" />
</TransformGroup>
</Grid.LayoutTransform>
<Rectangle Fill="{TemplateBinding Background}" />
<Rectangle Opacity=".8" Fill="{TemplateBinding Background}" />
<TextBlock Text="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" TextAlignment="Center"
Foreground="{TemplateBinding Foreground}" />
</Grid>
</Grid>
</ControlTemplate>

<Style x:Key="TileOverlayStyle" TargetType="{x:Type ContentControl}" BasedOn="{StaticResource {x:Type ContentControl}}">
<Setter Property="ClipToBounds" Value="True" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Focusable" Value="False" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Template" Value="{StaticResource TileOverlayTemplate}" />
</Style>

<Style x:Key="TileOutOfDateOverlayStyle" TargetType="{x:Type ContentControl}" BasedOn="{StaticResource TileOverlayStyle}">
<Setter Property="Background" Value="#A90000" />
</Style>

<Style x:Key="TileIsInstalledOverlayStyle" TargetType="{x:Type ContentControl}" BasedOn="{StaticResource TileOverlayStyle}">
<Setter Property="Background" Value="#007F00" />
</Style>

<Style x:Key="TileTitleTextStyle" TargetType="{x:Type TextBlock}" BasedOn="{StaticResource {x:Type TextBlock}}">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="TextTrimming" Value="CharacterEllipsis" />
<Setter Property="FontSize" Value="14" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Margin" Value="4 1" />
</Style>

<Style x:Key="TileVersionTextStyle" TargetType="{x:Type TextBlock}" BasedOn="{StaticResource {x:Type TextBlock}}">
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="TextTrimming" Value="CharacterEllipsis" />
<Setter Property="FontSize" Value="14" />
</Style>

<Style x:Key="TileLatestVersionTextStyle" TargetType="{x:Type TextBlock}" BasedOn="{StaticResource TileVersionTextStyle}">
<Setter Property="FontWeight" Value="Bold" />
</Style>

<Style x:Key="ListViewModeRadioButtonStyle" TargetType="{x:Type RadioButton}" BasedOn="{StaticResource {x:Type RadioButton}}">
<Setter Property="Background" Value="{DynamicResource AccentColorBrush3}" />
<Setter Property="Foreground" Value="{DynamicResource GrayBrush2}" />
Expand Down
54 changes: 21 additions & 33 deletions Source/ChocolateyGui/Views/LocalSourceView.xaml
View file
Expand Up @@ -34,20 +34,25 @@
Background="Transparent"
ContextMenu="{StaticResource PackagesContextMenu}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

<controls:InternetImage Grid.Row="0"
<TextBlock Grid.Row="0"
Style="{DynamicResource TileTitleTextStyle}"
Text="{Binding Title, Mode=OneWay}" />

<controls:InternetImage Grid.Row="1"
AutomationProperties.Name="Package Icon"
IconUrl="{Binding IconUrl, IsAsync=True}"
IconUrl="{Binding IconUrl, IsAsync=True, Mode=OneWay}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="100"
Height="100"/>

<StackPanel x:Name="IconStackPanel" Orientation="Vertical" Grid.Row="0" Grid.RowSpan="3"
<StackPanel x:Name="IconStackPanel" Orientation="Vertical" Grid.Row="1" Grid.RowSpan="3"
Opacity="0.8"
Margin="2 2 0 0"
HorizontalAlignment="Left" VerticalAlignment="Top">
Expand All @@ -58,40 +63,23 @@
<iconPacks:PackIconEntypo Width="24" Height="24"
ToolTip="{x:Static lang:Resources.LocalSourceView_ToolTip_InstalledSideBySide}"
Kind="Bookmarks" Margin="0 2"
Visibility="{Binding IsSideBySide, Converter={StaticResource BoolToVis}}" />
Visibility="{Binding IsSideBySide, Mode=OneWay, Converter={StaticResource BoolToVis}}" />
</StackPanel>

<ContentControl x:Name="OutOfDateOverlay" ClipToBounds="True" Grid.Row="0" Grid.RowSpan="3" Visibility="Collapsed"
IsTabStop="False"
Focusable="False"
Content="{x:Static lang:Resources.LocalSourceView_Outdated}"
Background="#A90000"
Foreground="White"
Template="{DynamicResource TileOverlayTemplate}" />

<TextBlock Grid.Row="1"
Margin="4 0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
TextTrimming="CharacterEllipsis"
FontSize="14"
FontWeight="Bold"
Text="{Binding Title, Mode=OneWay}" />
<TextBlock Grid.Row="2"
Margin="4 1 4 4"
HorizontalAlignment="Left"
VerticalAlignment="Center"
TextTrimming="CharacterEllipsis"
FontSize="14"
Text="{Binding Version, Mode=OneWay}" />
<TextBlock Grid.Row="2"
Margin="4 1 4 4"
HorizontalAlignment="Right"
VerticalAlignment="Center"
TextTrimming="CharacterEllipsis"
FontSize="14"
FontWeight="Bold"
Margin="4 0"
Style="{DynamicResource TileLatestVersionTextStyle}"
Text="{Binding LatestVersion, Mode=OneWay}" />

<TextBlock Grid.Row="3"
Margin="4 0 4 1"
Style="{DynamicResource TileVersionTextStyle}"
Text="{Binding Version, Mode=OneWay}" />

<ContentControl x:Name="OutOfDateOverlay" Grid.Row="0" Grid.RowSpan="4"
Visibility="Collapsed"
Content="{x:Static lang:Resources.LocalSourceView_Outdated}"
Style="{DynamicResource TileOutOfDateOverlayStyle}" />
</Grid>

<DataTemplate.Triggers>
Expand Down
53 changes: 20 additions & 33 deletions Source/ChocolateyGui/Views/RemoteSourceView.xaml
View file
Expand Up @@ -102,56 +102,43 @@
Background="Transparent"
ContextMenu="{StaticResource PackagesContextMenu}">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

<controls:InternetImage Grid.Row="0"
<TextBlock Grid.Row="0"
Style="{DynamicResource TileTitleTextStyle}"
Text="{Binding Title, Mode=OneWay}" />

<controls:InternetImage Grid.Row="1"
AutomationProperties.Name="Package Icon"
IconUrl="{Binding IconUrl, IsAsync=True}"
IconUrl="{Binding IconUrl, IsAsync=True, Mode=OneWay}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="100"
Height="100"/>

<iconPacks:PackIconEntypo Grid.Row="0" Grid.RowSpan="3"
<iconPacks:PackIconEntypo Grid.Row="1" Grid.RowSpan="2"
Opacity="0.8"
Width="24" Height="24"
Kind="Pin" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="2 4"
Kind="Pin" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="2 2 0 0"
Visibility="{Binding IsPinned, Mode=OneWay, Converter={StaticResource BoolToVis}}" />

<ContentControl x:Name="IsInstalledOverlay" ClipToBounds="True" Grid.Row="0" Grid.RowSpan="3" Visibility="Collapsed"
IsTabStop="False"
Focusable="False"
<TextBlock Grid.Row="2"
Margin="4 0 4 1"
Style="{DynamicResource TileVersionTextStyle}"
Text="{Binding Version, Mode=OneWay}" />

<ContentControl x:Name="IsInstalledOverlay" Grid.Row="0" Grid.RowSpan="3"
Visibility="Collapsed"
Content="{x:Static lang:Resources.RemoteSourceView_OverlayInstalled}"
Background="#007F00"
Foreground="White"
Template="{DynamicResource TileOverlayTemplate}" />
Style="{DynamicResource TileIsInstalledOverlayStyle}" />

<ContentControl x:Name="OutOfDateOverlay" ClipToBounds="True" Grid.Row="0" Grid.RowSpan="3" Visibility="Collapsed"
IsTabStop="False"
Focusable="False"
<ContentControl x:Name="OutOfDateOverlay" Grid.Row="0" Grid.RowSpan="3"
Visibility="Collapsed"
Content="{x:Static lang:Resources.RemoteSourceView_OverlayOutdated}"
Background="#A90000"
Foreground="White"
Template="{DynamicResource TileOverlayTemplate}" />

<TextBlock Grid.Row="1"
Margin="4 0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
TextTrimming="CharacterEllipsis"
FontSize="14"
FontWeight="Bold"
Text="{Binding Title}" />
<TextBlock Grid.Row="2"
Margin="4 1 4 4"
HorizontalAlignment="Left"
VerticalAlignment="Center"
TextTrimming="CharacterEllipsis"
FontSize="14"
Text="{Binding Version}" />
Style="{DynamicResource TileOutOfDateOverlayStyle}" />
</Grid>

<DataTemplate.Triggers>
Expand Down

0 comments on commit 1ce7d77

Please sign in to comment.