Skip to content
This repository was archived by the owner on Jun 21, 2023. It is now read-only.

Using builtin file & folder icons #1744

Merged
meaghanlewis merged 10 commits into from
Jun 18, 2018
Merged

Using builtin file & folder icons #1744

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
2f4da26
Using builtin file & folder icons
Neme12 Jun 16, 2018
8cf9a26
Removing C# 7 language features
Neme12 Jun 17, 2018
054d10c
Adding suppression for CA1812
Neme12 Jun 17, 2018
49e46af
Using IVsImageService2.TryParseImageMoniker, which supports both formats
Neme12 Jun 17, 2018
be54a16
Using IVsImageService2.GetImageMonikerForFile
Neme12 Jun 17, 2018
203f329
Merge branch 'master' into icons
grokys Jun 18, 2018
b2945cb
Fixing crash in WPF designer
Neme12 Jun 18, 2018
79ced6e
Merge branch 'icons' of https://github.com/Neme12/VisualStudio into i…
Neme12 Jun 18, 2018
2fbc919
Merge branch 'master' into icons
Neme12 Jun 18, 2018
debe368
Merge branch 'master' into icons
grokys Jun 18, 2018
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
8 changes: 8 additions & 0 deletions src/GitHub.VisualStudio/GitHub.VisualStudio.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,12 @@
<HintPath>..\..\packages\Microsoft.VisualStudio.Editor.14.3.25407\lib\net45\Microsoft.VisualStudio.Editor.dll</HintPath>
<Private>True</Private>
</Reference>
<Reference Include="Microsoft.VisualStudio.ImageCatalog, Version=14.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a, processorArchitecture=MSIL">
<HintPath>..\..\packages\Microsoft.VisualStudio.ImageCatalog.14.3.25407\lib\net45\Microsoft.VisualStudio.ImageCatalog.dll</HintPath>
</Reference>
<Reference Include="Microsoft.VisualStudio.Imaging, Version=14.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a, processorArchitecture=MSIL">
<HintPath>..\..\packages\Microsoft.VisualStudio.Imaging.14.3.25407\lib\net45\Microsoft.VisualStudio.Imaging.dll</HintPath>
</Reference>
<Reference Include="Microsoft.VisualStudio.Imaging.Interop.14.0.DesignTime, Version=14.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a, processorArchitecture=MSIL">
<EmbedInteropTypes>True</EmbedInteropTypes>
<HintPath>..\..\packages\Microsoft.VisualStudio.Imaging.Interop.14.0.DesignTime.14.3.25407\lib\Microsoft.VisualStudio.Imaging.Interop.14.0.DesignTime.dll</HintPath>
Expand Down Expand Up @@ -387,6 +393,8 @@
<Compile Include="Views\Dialog\RepositoryRecloneView.xaml.cs">
<DependentUpon>RepositoryRecloneView.xaml</DependentUpon>
</Compile>
<Compile Include="Views\GitHubPane\DirectoryIsExpandedToImageMonikerConverter.cs" />
<Compile Include="Views\GitHubPane\FileNameToImageMonikerConverter.cs" />
Copy link
Contributor Author

@Neme12 Neme12 Jun 16, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where would be an appropriate place for these converters? I noticed there is a folder with some converters in GitHub.UI but that project doesn't have a lot of dependencies on VS itself (which these do). Also these aren't really general purpose converters like the other ones seem to be, they're made specifically for one view. But this isn't a good place either (I assume). Where should I put them?

Copy link
Contributor

@grokys grokys Jun 18, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Personally I think that where you've put them is the best place for them: as you say they're tied to a particular view, so it makes sense to put the converters alongside. Not sure if anyone else things differently though?

<Compile Include="Views\GitHubPane\LoggedOutView.xaml.cs">
<DependentUpon>LoggedOutView.xaml</DependentUpon>
</Compile>
Expand Down
22 changes: 22 additions & 0 deletions src/GitHub.VisualStudio/Views/GitHubPane/DirectoryIsExpandedToImageMonikerConverter.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
using System;
using System.Diagnostics.CodeAnalysis;
using System.Globalization;
using System.Windows.Data;
using Microsoft.VisualStudio.Imaging;

namespace GitHub.VisualStudio.Views.GitHubPane
{
[SuppressMessage("Microsoft.Performance", "CA1812:AvoidUninstantiatedInternalClasses", Justification = "Used in XAML")]
internal sealed class DirectoryIsExpandedToImageMonikerConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
return (bool)value ? KnownMonikers.FolderOpened : KnownMonikers.FolderClosed;
}

public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
}
37 changes: 37 additions & 0 deletions src/GitHub.VisualStudio/Views/GitHubPane/FileNameToImageMonikerConverter.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
using System;
using System.ComponentModel;
using System.Diagnostics.CodeAnalysis;
using System.Globalization;
using System.Windows;
using System.Windows.Data;
using Microsoft.VisualStudio.Imaging.Interop;
using Microsoft.VisualStudio.Shell;
using Microsoft.VisualStudio.Shell.Interop;

namespace GitHub.VisualStudio.Views.GitHubPane
{
[SuppressMessage("Microsoft.Performance", "CA1812:AvoidUninstantiatedInternalClasses", Justification = "Used in XAML")]
internal sealed class FileNameToImageMonikerConverter : IValueConverter
{
private readonly IVsImageService2 imageService;

public FileNameToImageMonikerConverter()
{
imageService = (IVsImageService2)Package.GetGlobalService(typeof(SVsImageService));
}

public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
// In design mode, imageService will be null
if (DesignerProperties.GetIsInDesignMode(new DependencyObject()))
return default(ImageMoniker);

return imageService.GetImageMonikerForFile((string)value);
}

public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
}
2 changes: 2 additions & 0 deletions src/GitHub.VisualStudio/Views/GitHubPane/PullRequestDetailView.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,10 @@
xmlns:prop="clr-namespace:GitHub.VisualStudio.UI;assembly=GitHub.VisualStudio.UI"
xmlns:markdig="clr-namespace:Markdig.Wpf;assembly=Markdig.Wpf"
xmlns:vsui="clr-namespace:Microsoft.VisualStudio.Shell;assembly=Microsoft.VisualStudio.Shell.14.0"
xmlns:theming="clr-namespace:Microsoft.VisualStudio.PlatformUI;assembly=Microsoft.VisualStudio.Imaging"
Background="{DynamicResource GitHubVsToolWindowBackground}"
Foreground="{DynamicResource GitHubVsWindowText}"
theming:ImageThemingUtilities.ImageBackgroundColor="{Binding RelativeSource={RelativeSource Self}, Path=Background.Color}"
Copy link
Contributor Author

@Neme12 Neme12 Jun 16, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is important to ensure that the icons have the right background in all themes. Transparent doesn't work (it seems to behave almost the same as white). This has to be the real background color, that's why it's all the way up here where the actual background is set.

If this was set to Transparent, it would look like this on a dark theme:
image

Correct behavior:
image

Copy link
Contributor

@grokys grokys Jul 20, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just ran into this on the PR review authoring view. I've tried moving this property to PullRequestFilesView and it seems to work fine. What am I missing?

Ignore me, you're right.

DataContext="{Binding ViewModel}"
d:DesignWidth="356"
d:DesignHeight="800"
Expand Down
31 changes: 9 additions & 22 deletions src/GitHub.VisualStudio/Views/GitHubPane/PullRequestFilesView.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:ghfvs="https://github.com/github/VisualStudio"
xmlns:local="clr-namespace:GitHub.VisualStudio.Views.GitHubPane"
xmlns:prop="clr-namespace:GitHub.VisualStudio.UI;assembly=GitHub.VisualStudio.UI"
xmlns:imaging="clr-namespace:Microsoft.VisualStudio.Imaging;assembly=Microsoft.VisualStudio.Imaging"
mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300"
Name="root">

Expand Down Expand Up @@ -47,10 +49,14 @@
</Style>
</TreeView.ItemContainerStyle>
<TreeView.Resources>
<local:DirectoryIsExpandedToImageMonikerConverter x:Key="DirectoryIsExpandedToImageMonikerConverter" />
<local:FileNameToImageMonikerConverter x:Key="FileNameToImageMonikerConverter" />

<HierarchicalDataTemplate DataType="{x:Type ghfvs:PullRequestDirectoryNode}"
ItemsSource="{Binding Children}">
<StackPanel Orientation="Horizontal">
<ghfvs:OcticonImage Icon="file_directory" Foreground="{DynamicResource GitHubDirectoryIconForeground}" Margin="0,0,0,2"/>
<imaging:CrispImage Moniker="{Binding Converter={StaticResource DirectoryIsExpandedToImageMonikerConverter}, RelativeSource={RelativeSource AncestorType={x:Type TreeViewItem}}, Path=IsExpanded}"
Width="16" Height="16" Margin="0,0,0,2"/>
<TextBlock Text="{Binding DirectoryName}" Margin="4 2" VerticalAlignment="Center"/>
</StackPanel>
</HierarchicalDataTemplate>
Expand All @@ -60,27 +66,8 @@
Tag="{Binding DataContext, ElementName=root}"
KeyboardNavigation.DirectionalNavigation="None">

<!--
We need to change the color of the file icon when the file is deleted, but applying the style
to OcticonImage directly borks the designer (see #1410). Work around this by applying the color
to a parent control and let the foreground be inherited by the icon.
-->
Copy link
Contributor Author

@Neme12 Neme12 Jun 16, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I noticed this used to gray out the icon if the item was deleted. This can't really be done with arbitrary colored icons. I tried replacing the color change with reduced opacity, but it didn't look very good in my opinion. And the built-in team explorer view doesn't do anything like that either (it's only the text that is grayed out, not the icon). Is it OK to remove this?

Before:
image

After:
image
(icon is the same for deleted and normal files)

Copy link
Contributor

@grokys grokys Jun 18, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah that's fine with me!

<Decorator>
<Decorator.Style>
<Style TargetType="Decorator">
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Status}" Value="Removed"/>
<Condition Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type TreeViewItem}}, Path=IsSelected}" Value="False"/>
</MultiDataTrigger.Conditions>
<Setter Property="TextBlock.Foreground" Value="{DynamicResource GitHubDeletedFileIconBrush}"/>
</MultiDataTrigger>
</Style.Triggers>
</Style>
</Decorator.Style>
<ghfvs:OcticonImage Icon="file_code" Margin="0,0,0,2"/>
</Decorator>
<imaging:CrispImage Moniker="{Binding Converter={StaticResource FileNameToImageMonikerConverter}, Path=FileName}"
Width="16" Height="16" Margin="0,0,0,2"/>

<TextBlock Text="{Binding FileName}" Margin="4 2" VerticalAlignment="Center">
<TextBlock.Style>
Expand Down
2 changes: 2 additions & 0 deletions src/GitHub.VisualStudio/packages.config
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@
<package id="Microsoft.VisualStudio.ComponentModelHost" version="14.0.25424" targetFramework="net461" />
<package id="Microsoft.VisualStudio.CoreUtility" version="14.3.25407" targetFramework="net461" />
<package id="Microsoft.VisualStudio.Editor" version="14.3.25407" targetFramework="net461" />
<package id="Microsoft.VisualStudio.ImageCatalog" version="14.3.25407" targetFramework="net461" />
<package id="Microsoft.VisualStudio.Imaging" version="14.3.25407" targetFramework="net461" />
<package id="Microsoft.VisualStudio.Imaging.Interop.14.0.DesignTime" version="14.3.25407" targetFramework="net461" />
<package id="Microsoft.VisualStudio.OLE.Interop" version="7.10.6070" targetFramework="net461" />
<package id="Microsoft.VisualStudio.Sdk.BuildTasks.14.0" version="14.0.215" targetFramework="net461" developmentDependency="true" />
Expand Down