search

microsoft / PowerToys

Windows system utilities to maximize productivity
MIT License
110.3k stars 6.49k forks source link

Update MDL2 icons (E0xx ~ E5xx) following MS message #10331

Closed Jay-o-Way closed 1 year ago

Jay-o-Way commented 3 years ago

icons that "conflict" with the following message from Microsoft on the page https://docs.microsoft.com/windows/apps/design/style/segoe-fluent-icons-font are still used

Note

Glyphs with prefixes ranging from E0- to E5- (e.g. E001, E5B1) are currently marked as legacy and are therefore deprecated.

XAML files

src/modules/powerrename/PowerRenameUILib/MainWindow.xaml

PowerToys/src/modules/imageresizer/ui/Views/AdvancedWindow.xaml

PowerToys/src/modules/imageresizer/ui/Views/InputPage.xaml

../settings/ImageResizerPage.xaml

DONE .../Views/**ZoomView**.xaml - [x] L 57:E10A → E8BB "ChromeClose" .../**CanvasZone**.xaml - [x] L162:E106 (clear) → E947 "CalculatorMultiply" .../**GridZone**.xaml - [x] L 41:E106 (clear)→ E947 "CalculatorMultiply" PowerToys/src/modules/**colorPicker**/ColorPickerUI/Controls/**ColorFormatControl**.xaml - [x] L 60:E16f → E8C8 "COPY" .../Views/**ColorEditorView**.xaml - [x] L 44:E107 → E74D "Delete" - [x] L 88:E115 → E713 "Setting" - [x] L 208:E16F → E8C8 "Copy" (can also be E73E "CheckMark", or [combine/layer](https://docs.microsoft.com/windows/apps/design/style/segoe-fluent-icons-font#layering-and-mirroring) E8C8 with F1D8 "StatusCheckmark") PowerToys/src/modules/**fancyzones**/editor/FancyZonesEditor/**CanvasEditorWindow**.xaml - [x] L47:E109 → E710 "Add" .../**MainWindow**.xaml - [x] L 40:E104 → E70F "Edit" - [x] L 72:E107 → E74D "Delete" - [x] L163:E104 → E70F "Edit" - [x] L286:E109 → E710 "Add" - [x] L339:E115 → E713 "Settings" - [x] L402:E107 → E74D "Delete" - [x] L433:E108 → E738 "Remove" - [x] L481:E104 → E70F "Edit" - [x] L646:E138 → E8A9 "ViewAll" (alternatives: F0E2 "GridView" or ED35 "Apps") PowerToys/src/**settings**-ui/Microsoft.PowerToys.Settings.UI/Views/**ColorPickerPage**.xaml - [x] L 81: E14C "List" → E8FD "BulletedList" - [x] L126: E10C "ellipsis" → EDE3 "ButtonMenu" - [x] L132: E1FD "ArrowDown" → F0AE "ArrowDown8" ../**FancyZonesPage**.xaml - [x] L 41:E2B4 → E8A7 "OpenInNewWindow" - [x] L228:E145 → E90C "DockLeft" ../**GeneralPage**.xaml - [x] L 25:E117 → E895 "Sync" - [x] L180:E1A7 → E7EF "Admin" ../ShortcutGuidePage.xaml - [x] L 78:E103 "Pause" → ECE4 "Blocked2" ../VideoConferencePage.xaml - [x] L 73:E1D6 → E720 "Microphone" - [x] L 87:E116 → E960 "Webcam2" ../FancyZonesPage.xaml - [x] L271:E103 "Pause", purpose = excluded apps, I would use ECE4 "Blocked2" ../ImageResizerPage.xaml - [x] L 75:E711 (cancel) → E947 "CalculatorMultiply"

other files

There are also (CS/CPP) files but might need to be moved to xaml too.

niels9001 commented 3 years ago

Good call! Good to make sure we use the supported codes. I wonder if this might make the transition to Fluent Icons in the future easier as well (see latest W10 Insider Builds).

Jay-o-Way commented 3 years ago

@niels9001 I'm sure you know it, but (in most cases; for SymbolIcon or FontIcon) we can just use the names - like "settings", "edit", "delete" et cetera - to define the icons. Easier to type (no need to look for the number) and makes it easier to find what you're looking for afterwards, especially if one is not familiar with the xaml.

crutkas commented 3 years ago

marking this as 0.39, we need to do it, not something we really need to do yet. Think cost is small, find the items, screen shot where they live and then do the flip / alternative icon

niels9001 commented 3 years ago

@crutkas Windows, with the rumored Sun Valley update, is moving towards the Fluent System Icon set that is already used across iOS/Android/Mac and Office (see https://github.com/microsoft/fluentui-system-icons). This icon set is open-source and includes many more icons and a new visual style.

The first implementations can be seen in the latest Insider Previews where Settings and Shell uses these new icons:

image

image

@Jay-o-Way my suggestion would be to either close this issue and open a new one (or rephrase it to "Adopt Fluent System Icons") and moving away from MDL2. Do you agree?

Jay-o-Way commented 3 years ago

Hm, again MS changed something... If I read/understand correctly, we can still use the glyphs (code-points or names) in the xaml, and the font is determined by the app? This is new for me though, but that's my first thought. Sun Valley update will only be rolled out late this year; and (again, if I read correctly) this only applies to OS (Start & Settings) so far. So for now, I think we should check and update icons when a xaml file is being worked on (possibly for a different reason). Do you agree that using e.g. Symbol="List" or Icon="Settings" is super simple?

niels9001 commented 3 years ago

Hm, again MS changed something... If I read/understand correctly, we can still use the glyphs (code-points or names) in the xaml, and the font is determined by the app? This is new for me though, but that's my first thought. Sun Valley update will only be rolled out late this year; and (again, if I read correctly) this only applies to OS (Start & Settings) so far. So for now, I think we should check and update icons when a xaml file is being worked on (possibly for a different reason). Do you agree that using e.g. Symbol="List" or Icon="Settings" is super simple?

If settings and shell use it, other inbox apps will follow and MDL2 will be "phased out". The glyph names (e.g. 'Settings') will be different for Fluent System - so that means redefining what icon needs to go where (some MDL2 icons might not even exist in Fluent icons). Agree on the naming, however only a limited amount of icons have those - Fluent Icons will solve that as well hopefully.

Jay-o-Way commented 3 years ago

The font here [FluentSystemIcons] has very limited support and is currently only planned for use with Flutter projects.

(source) So let's not get ahead of things.

niels9001 commented 3 years ago

The font here [FluentSystemIcons] has very limited support and is currently only planned for use with Flutter projects.

(source) So let's not get ahead of things.

I see that I have posted the wrong link: with the latest Insider builds, Microsoft introduced the Segoe Fluent Icons (that are a sibling family if the Fluent icons I posted the GitHub URL of). It seems that Segoe Fluent Icons will be replacing all MDL2 icons that are used in the shell and inbox applications.

So, it seems that big changes are coming in terms of iconography for Windows - and we can likely switch to this new icon font family as well in a few months time. Therefore, I'd suggest to not spend time now on replacing deprecated MDL2 icon ranges and focus on switching to Segoe Fluent Icons.

Jay-o-Way commented 3 years ago

Ohhh, that explains. You mean "Sun Valley" (build 21327) with the "segmdl2v2.ttf" font? It is expected to become available in the second half of 2021. But still, a font icon is connected to a font, and a font will not be deleted from the system, so it's always available. So, unless I'm missing something, I still don't feel any pressure from this.

Jay-o-Way commented 3 years ago

Scratch what I said. If i understand correctly, the new font is simply a new version (1.86) of Segoe MDL2 Assets (therefore "seg mdl2 v2" in the font file, found here, but the exact same displayed name) that will be installed over the current version (1.78). So everything will go automatic. I just installed it on my computer and (after logging out and in) Windows automatically uses it. Haven't found one icon that is "out of place" yet. Meaning: we don't need to change anything, IF the code references are correct. image

If settings and shell use it, other inbox apps will follow and MDL2 will be "phased out". The glyph names (e.g. 'Settings') will be different for Fluent System - so that means redefining what icon needs to go where (some MDL2 icons might not even exist in Fluent icons).

AFAIK that remains to be seen. If what you say is true, that would be a "script breaking change" and Microsoft is known to be all about staying backwards compatible for decades. Also looping back to first point of this comment.

crutkas commented 3 years ago

going to mark this post stability. It requires us to set up VMs to be sure anything that we do works on all builds of Windows.

Jay-o-Way commented 3 years ago

going to mark this post stability. It requires us to set up VMs to be sure anything that we do works on all builds of Windows.

Sorry, but there is no need. (afaik) The only thing that is going to change in the future is the appearance of the icons, when the mdl2v2 font is installed - which has the same functional name, so it'll be used 100% automatically. Nothing more. So no need to check and no need to delay. I already checked the files. I might even do this myself soon - when I have the time.

niels9001 commented 3 years ago

@Jay-o-Way didn't know it's basically an update of MDL2.ttf - but that makes sense though! Thanks for clarifiying that!

That means the original ask holds, and mapping the deprecated unicode values to the new ones is really helpful. Switching to those shouldn't have any negative impact so that's good. Feel free to put in a PR, else I can pick this up!

Jay-o-Way commented 3 years ago

Yes, finally we're on the same page! 😁🥳 The file I used is actually called "segmdl2v2.ttf", but it's the font name that counts. I'll try and work on this soon.

niels9001 commented 3 years ago

@jay-o-way I'd need to check on my other machine running the latest Insider Build. The new icons ARE basically an upgraded version of Segoe MDL2 Assets, correct?

That means that we would not have to reference another font? If so this is an easy fix, if not we need to rethink how to support older versions.

Jay-o-Way commented 3 years ago

The new icons ARE basically an upgraded version of Segoe MDL2 Assets, correct? That means that we would not have to reference another font?

You're getting it! Below two screenshots of Win Settings > Fonts > "Segoe" Segoe MDL2 v2 Segoe MDL2 Both of these are installed, Windows uses the most recent.

By the way, I only looked at XAML files so far. Do I need to check C files too?

Jay-o-Way commented 3 years ago

@niels9001 I might have mentioned once or twice i'm a fan of using the icon name to declare an icon (where possible). You okay if I use those?

htcfreek commented 3 years ago

@niels9001 , @Jay-o-Way Is this obsolete with #12470?

niels9001 commented 3 years ago

@htcfreek Nope. We still need to do this.

Jay-o-Way commented 3 years ago

Au contraire, 12470 introcudes new ones :(!) @niels9001 why do you insist on using those old codes? You could have includes this issue in your pr, but now we have got even more work to do! Can't you use the "description words" to reference an icon?

niels9001 commented 3 years ago

Au contraire, 12470 introcudes new ones :(!) @niels9001 why do you insist on using those old codes? You could have includes this issue in your pr, but now we have got even more work to do! Can't you use the "description words" to reference an icon?

Because I'm using a tool to that allows for searching icons and provides the codes. Not all icons have a "friendly" name, so the glyph code is required.

Feel free to make the corrections if needed.

htcfreek commented 3 years ago

@Jay-o-Way I have updated the labels and assigned you.

Jay-o-Way commented 3 years ago

Because I'm using a tool to that allows for searching icons and provides the codes

@niels9001 Maybe you could use https://docs.microsoft.com/en-us/windows/apps/design/style/segoe-fluent-icons-font - it has all (non-deprecated) icons and every single one has a description-word.

Not all icons have a "friendly" name, so the glyph code is required.

Can you show me wich ones haven't? (referring to above mentioned page) I believe we discussed this before. Some icon controls accept them, some don't. I'm not sure if WinUI3 changes any of this, but I hope so.

<Button.Flyout>
 <MenuFlyout>
  <MenuFlyoutItem IsEnabled="{x:Bind CanMoveUp}" Icon="Up" x:Uid="MoveUp" Click="ReorderButtonUp_Click"/>
  <MenuFlyoutItem IsEnabled="{x:Bind CanMoveDown}" x:Uid="MoveDown" Click="ReorderButtonDown_Click">
   <MenuFlyoutItem.Icon>
    <FontIcon Glyph="&#xF0AE;" />
   </MenuFlyoutItem.Icon>
  </MenuFlyoutItem>
 </MenuFlyout>
</Button.Flyout>

Feel free to make the corrections if needed.

I'm trying now, but it's not so easy for me.

😥😖 You guys could do this much easier...

htcfreek commented 3 years ago

going to mark this post stability. It requires us to set up VMs to be sure anything that we do works on all builds of Windows.

Sorry, but there is no need. (afaik) The only thing that is going to change in the future is the appearance of the icons, when the mdl2v2 font is installed - which has the same functional name, so it'll be used 100% automatically. Nothing more. So no need to check and no need to delay. I already checked the files. I might even do this myself soon - when I have the time.

TO-DO LIST

XAML files

PowerToys\src\modules\colorPicker\ColorPickerUI\Controls\ColorFormatControl.xaml

  • [ ] L57:E16f=E8C8="COPY"

PowerToys\src\modules\colorPicker\ColorPickerUI\Views\ColorEditorView.xaml

  • [ ] L41:E107=E74D="Delete"
  • [ ] L88:E115=E713="Setting"
  • [ ] L183:E16F=E8C8="Copy" (can also be E73E "CheckMark", or combine E8C8 with F1D8 "StatusCheckmark")

PowerToys\src\modules\colorPicker\ColorPickerUI\Views\ZoomView.xaml

  • [ ] L57:E10A=E8BB="ChromeClose"

PowerToys\src\modules\fancyzones\editor\FancyZonesEditor\CanvasEditorWindow.xaml

  • [ ] L45:E109=E710="Add"

PowerToys\src\modules\fancyzones\editor\FancyZonesEditor\CanvasZone.xaml

  • [ ] L162:E106=E947="CalculatorMultiply" (was 'clear')

PowerToys\src\modules\fancyzones\editor\FancyZonesEditor\GridZone.xaml

  • [ ] L39:E106=E947="CalculatorMultiply" (was 'clear')

PowerToys\src\modules\fancyzones\editor\FancyZonesEditor\MainWindow.xaml

  • [ ] L40:E104=E70F="Edit"
  • [ ] L72:E107=E74D="Delete"
  • [ ] L164:E104=E70F="Edit"
  • [ ] L290:E109=E710="Add"
  • [ ] L388:E107=E74D="Delete"
  • [ ] L406:E104=E70F="Edit"
  • [ ] L433:E108=E738="Remove"
  • [ ] L458:E109=E710="Add"
  • [ ] L631:E138=E8A9="ViewAll" (alternatives: F0E2 "GridView" or ED35 "Apps")

PowerToys\src\modules\imageresizer\ui\Views\AdvancedWindow.xaml

  • [ ] L133:E107=E74D "Delete"

PowerToys\src\modules\imageresizer\ui\Views\InputPage.xaml

  • [x] L180:E115=E713 "SETTING", is gone
  • [ ] all E711's "close" should be E947 "CalculatorMultiply"

PowerToys\src\settings-ui\Microsoft.PowerToys.Settings.UI\OOBE\Views\ (...) .xaml

  • [x] L64:E115=E713="SETTING", resolved

PowerToys\src\settings-ui\Microsoft.PowerToys.Settings.UI\Views\ColorPickerPage.xaml new

  • [ ] L111: E14C "List" = E8FD "BulletedList"
  • [ ] L156: E10C "ellipsis" = EDE3 "ButtonMenu"
  • [ ] L162: E1FD "ArrowDown" = F0AE "ArrowDown8"

..\FancyZonesPage.xaml new

  • [ ] L40:E2B4 = E8A7 "OpenInNewWindow"
  • [ ] L216:E145 = E90C "DockLeft"
  • [ ] L271:E103 "Pause", purpose = excluded apps, I would use ECE4 "Blocked2"

..\GeneralPage.xaml new

  • [ ] L26:E117=E895 "Sync"
  • [ ] L175:E1A7 = E7EF "Admin"

..\ImageResizerPage.xaml

  • [ ] L163:E711=E947="CalculatorMultiply" (was 'cancel') new
  • [ ] L37:E2B2 (multiple sizes) = ?
  • [ ] L99,157:E2B4 = E8A7 "OpenInNewWindow"

..\KeyboardManagerPage.xaml

  • [x] L55,128,164:E72A ('forward') should be F0AF "ArrowRight8", gone
  • [ ] ?

..\PowerLauncherPage.xaml new

  • [ ] L137:E18C for window position = ?

..\ShellPage.xaml

  • [x] L47: pathicon = resolved

..\ShortcutGuidePage.xaml new

  • [ ] L78:E103 "Pause", purpose = excluded apps, I would use ECE4 "Blocked2"

..\VideoConferencePage.xaml

  • [x] L73:E1D6 = E720 "Microphone"
  • [x] L87:E116 = E960 "Webcam2"

Can you please update this list and move it into the issue description.

Jay-o-Way commented 2 years ago

29 files (!) have FontFamily="Segoe MDL2 Assets" hardcoded

niels9001 commented 2 years ago
  • E2B2

That's because the files referencing Segoe MDL2 Assets use WPF.. we can't reference the SymbolThemeFontFamily resource in WPF, only in WinUI.

Jay-o-Way commented 2 years ago

(kinda still missing a few, but oh well 🤐)

jaimecbernardo commented 2 years ago

Going to remove the tag then, didn't get it :)

Jay-o-Way commented 2 years ago

That's because the files referencing Segoe MDL2 Assets use WPF.. we can't reference the SymbolThemeFontFamily resource in WPF, only in WinUI.

Can (or should?) that be changed to WinUI3 then?