New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace small jagged icons of Xenko editor with Visual Studio responsive icons #4

Closed
0xaryan opened this Issue Aug 2, 2018 · 9 comments

Comments

Projects
None yet
4 participants
@0xaryan
Contributor

0xaryan commented Aug 2, 2018

Currently Xenko uses Small png icons in the editor that are jagged in higher resolutions. Besides of that, for a flat development environment like Xenko Editor, it's better to use flat icons.

I suggest to use Microsoft Visual Studio Image Library 2017, because those images have both Svg and Xaml format that is ready for Xaml UI of Xenko editor, scalable and responsive to the screen. And also, these icons make developer feel like it's homeland as it is Visual Studio icons.

@0xaryan

This comment has been minimized.

Contributor

0xaryan commented Aug 4, 2018

I have made some changes based on this issue, it's not complete yet and some icons are not replaced.

What I have done:

  • Created a vector xaml for Xenko logo
  • Replaced BitmapImage resources to DrawingImage using Visual Studio image gallery in image dictionaries of project.
  • For icons that there were not any icon in Visual Studio images gallery, I've created a new one with merging geometric paths of two or more icons (for example, merged Application Icon + Xenko Vector Logo + Plus to create Xenko New Solution icon

Windows Chrome

Xenko logo, Window Close, Maximize, Restore and Minimize replaced with glyph version. Height of chrome is now a little smaller (like Visual Studio).
Xenko and Window chrome are not pixelate anymore.

Before:

Xenko Window Chrome Before

After:

Xenko Window Chrome After

Project select template browse icon

Before:

Xenko Browse Before

After:

Xenko Browse After

Scene Items

Before:

Xenko Scene Items Before

After:

Xenko Scene Items After

Solution explorer

Before:

Xenko Window Solution Explorer Before

After:

Xenko Window Solution Explorer After

Property Grid

Before:

Xenko PG Before

After:

Xenko PG After

Scene editor icons

As you see, some icons are not changed.

Before:

Xenko SE Before

After:

Xenko SE After

Menu icons

Yes, I know that visual studio icon is too big. I just changed BitmapImage resources to DrawingImage, so some icons need to change the width or height explicitly.

Before:

Xenko Menu Before

After:

Xenko Menu After

@xen2

This comment has been minimized.

Member

xen2 commented Aug 4, 2018

Nice, I like it!

They all come from Microsoft Visual Studio Image Library 2017?
I will need to check their EULA/license carefully.

@0xaryan

This comment has been minimized.

Contributor

0xaryan commented Aug 4, 2018

Yes, they all come from Microsoft Visual Studio Image Library 2017. Some color and combine modifications are applied on a few of icons.

@dfkeenan

This comment has been minimized.

dfkeenan commented Aug 4, 2018

If anyone cares, Visual Studio doesn't just use the vector graphic formats for displaying icons. It has a special image service that chooses the best image for the DPI, i.e. for standard DPI it uses the 16x16 PNGs. That's why there is a 16x16, 32x32, 48x48 etc. PNGs as well as the XAML/SVG files.

https://docs.microsoft.com/en-gb/visualstudio/extensibility/image-service-and-catalog
https://docs.microsoft.com/en-gb/visualstudio/extensibility/ux-guidelines/images-and-icons-for-visual-studio

You will notice the colors for a dark theme are not quite right in yours. I think the image service also handles changing colors in the icons for themes. But I do remember seeing an IMultiValueConverter that changes the colors for themes and disabled state. I am using the VS Image library (2015) and implemented a similar converter. Though I am only using the 16x16 PNGs.

Visual Studio:
image

Mine without theme color change applied:
image

Mine with theme color change applied:
image

See my SO answer for some details: https://stackoverflow.com/a/37501135/6394883

@0xaryan

This comment has been minimized.

Contributor

0xaryan commented Aug 4, 2018

@dfkeenan Interesting! I can see that your method TransformLuminosity in SO is working well.
I found an API in Microsoft.VisualStudio.Imaging dll that is doing a similar thing. Those methods are in a class named ImageThemingUtilities.

private static double TransformLuminosity(double hue, double saturation, double luminosity, double backgroundLuminosity)
{
    if (backgroundLuminosity < 0.5)
    {
        if (luminosity >= 82.0 / 85.0)
            return backgroundLuminosity * (luminosity - 1.0) / (-3.0 / 85.0);
        double val2 = saturation >= 0.2 ? (saturation <= 0.3 ? 1.0 - (saturation - 0.2) / (1.0 / 10.0) : 0.0) : 1.0;
        double num1 = Math.Max(Math.Min(1.0, Math.Abs(hue - 37.0) / 20.0), val2);
        double num2 = ((backgroundLuminosity - 1.0) * 0.66 / (82.0 / 85.0) + 1.0) * num1 + 0.66 * (1.0 - num1);
        if (luminosity < 0.66)
            return (num2 - 1.0) / 0.66 * luminosity + 1.0;
        return (num2 - backgroundLuminosity) / (-259.0 / 850.0) * (luminosity - 82.0 / 85.0) + backgroundLuminosity;
    }
    if (luminosity < 82.0 / 85.0)
        return luminosity * backgroundLuminosity / (82.0 / 85.0);
    return (1.0 - backgroundLuminosity) * (luminosity - 1.0) / (3.0 / 85.0) + 1.0;
}

Unfortunately this class and it's methods are not documented, but I think they might be useful. There is another converter API named ThemedImageSourceConverter that works for a BitmapSource.

public static ImageSource ConvertCore(ImageSource inputImage, Color backgroundColor, bool isEnabled, bool isHighContrast, object parameter)
{
    BitmapSource inputImage1 = inputImage as BitmapSource;
    if (inputImage1 == null || (int)backgroundColor.A == 0 & isEnabled)
        return inputImage;
    Color biasColor = GrayscaleBitmapSourceConverter.GetBiasColor(parameter);
    return (ImageSource)ImageThemingUtilities.GetOrCreateThemedBitmapSource(inputImage1, backgroundColor, isEnabled, biasColor, isHighContrast);
}
@Kryptos-FR

This comment has been minimized.

Collaborator

Kryptos-FR commented Aug 5, 2018

@0xaryan Nice job.

Some icons were hastily changed when moving to MIT. That said even the previous ones were a bit jagged.

Does it work well with high DPI scaling? Also if I remember correctly, on the XAML/template side some icon sizes are hardcoded (using our custom {sskk:Image} markup extension). But I supposed you already noticed that.

@Kryptos-FR Kryptos-FR referenced this issue Aug 5, 2018

Closed

Editor: Theme #50

@0xaryan

This comment has been minimized.

Contributor

0xaryan commented Aug 5, 2018

@Kryptos-FR Thanks.

As they are DrawingImages that use geometric paths, there shouldn't be any problem with dpi scaling, icons scale with dpi as well as manual scaling. I'm aware of {sskk:Image} extension method, but it is not fully applied on all icons. The big visual studio icon in the menu is an example.

GameStudioWindow:

  • <MenuItem Header="{sskk:Localize Open in IDE, Context=Menu}" Icon="{sskk:Image {StaticResource ImageVisualStudio}}" OtherProps="..."/>
  • <Image Source="{StaticResource ImageVisualStudio}" />
  • <MenuItem Header="{sskk:Localize Open in IDE, Context=Menu}" Icon="{sskk:Image {StaticResource ImageVisualStudio}}" OtherProps="..." />

xen2 added a commit that referenced this issue Aug 15, 2018

New dark theme and glyph icons #4 #50 (#83)
* Add windows chrome vector resources
* Add vector version of Xenko Logo
* Modify Xenko Geometry
* A forward step to Vector images
* Xaml simplify
* Blend UI first approach
* Fix merge mistake for Browse icon
* Add new set of drawing icons
* Change restore icon
* Add new set of glyph icons
* Fix DrawingImage syntax error
* Smaller menu icons
* Add vector icons
* Sharper edges
* Add support for HslColor
* Add Luminosity (Light/Dark) controller for a DrawingImage
* Replace ThemeController with brand new ThemedSourceExtension
* Separate logic from Markup
* Leave other drawings untouched
* Reform theme source extension
* Change color of an image
* Change color of Visual Studio logo
* Change color of Xenko Logo
* Replace AvalonDock png images with glyph ones
* Add Luminosity Check
* ImageExtension decolor feature
* Recolor vectors
* Add EventSetter for Image for color transformation that needs a code-behind
* Add docs
* [Presentation] Fix copyright notices.
* [Presentation] Fix formatting and code conventions.
- fix spacing
- one class per file
- remove unused using
- remove redundant this
- remove redundant cast

* Fix DefaultPropertyTemplateProviders image dynamic source
* Eye-friendly asset picker colors
* Change color of toolbar background
* TabItem lower left gap and higher MinWidth
* Fixed menu width for submenu
* DirectoryViewModel constructor refactor
* Correct margin for Property Grid's title icons
* Change design of scene tabs
* Change backcolor of menu group item container
* Visual Studio like dark blue statusbar in footer
* Fix globe icons luminosity
* Recolor and some other fixes to ComboBox, DockManager, DockManager Tabs and Scrollbar
* Change Operating Systems icons
@xen2

This comment has been minimized.

Member

xen2 commented Aug 15, 2018

@0xaryan can this issue be closed with #83 merge, or is there still some additional work to do?

@0xaryan

This comment has been minimized.

Contributor

0xaryan commented Aug 15, 2018

@xen2 Icons replaced and merged, so this can be closed. Thanks 🙏

@0xaryan 0xaryan closed this Aug 15, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment