Open DrewNaylor opened 3 years ago
Here's an interesting font for WP-style buttons that may be of use, though it doesn't have as many things as FluentUI System Icons: https://github.com/ajtroxell/wp-metro
Actually, the MahApps.Metro.IconPacks project may be very useful for this: https://github.com/MahApps/MahApps.Metro.IconPacks
Edit: maybe it won't be helpful, as the ModernUIIcons project is under CC BY-ND, which is incompatible with open source software.
I've forked all the projects other than the MahApps.Metro.IconPacks one.
I'm using wp-metro for stuff like the arrows and All Apps list search button icon. There are no diagonal arrows, so I'll have to figure that out for the tile resizing or modify the font and add it myself. I'll probably need to modify fluentui-system-icons to be more like WP, but they should work for stuff like battery and Wi-Fi.
I've read on various places like StackOverflow, Reddit, and Quora that Open Sans is very much like Segoe UI, so I'll probably use that. It might not be exactly the same as Segoe WP, but if that's the case, I could probably modify it to get closer, though I won't be able to do every character, so I might not unless it's just changing some values. What's nice is it's under the Apache License, version 2.0. I need to download a new copy for it, as it recently had Hebrew support added and I want to be inclusive. Not sure how support for other languages it doesn't support would be added, but maybe I can have Python load the user's font from a config file and pass it to QML.
One important thing is Open Sans has Semibold. Not sure how to get QML to use that one specifically for things like tile text. Maybe font family can be set, but I wonder how to ensure it gets picked up. I'll have to use debug tools.
Maybe I should use Selawik instead of Open Sans if it'll look more like Segoe. I'll have to compare them. This folder has both Selawik and winjs-symbols in a subfolder, though I need to check the license on the second one: https://github.com/winjs/winstrap/tree/master/src/fonts
Edit: I'll have to look in the tags, but that repo may be useful. May, because I don't know if it ever had Windows 8-style glyphs.
Edit 2: I'll probably base any modified fonts off the MDL2 ones in winjs-symbol if I can, as those are already mostly square and shouldn't need as much work as fluentui-icons. The battery charging icon scares me a little, though.
Here's a More/ellipsis menu icon that I'll have to edit so it's closer together, but I can put it near the top of the button: https://openclipart.org/detail/241758/menu-icon
Turns out you can rotate text in QML buttons, so I'll probably do that for the tile resize buttons. -135 works to get a right-pointing arrow facing to the top-left, and 45 gets the same right-pointing arrow to point in the bottom left. Pretty sure 0 (zero) is the default, which gets it to point right.
Source for text rotation stuff that I'll have to include in a comment when I figure out the circular tile buttons: https://stackoverflow.com/questions/33942944/boundaries-issues-when-rotating-text
I'm probably going to have to fork Open Sans to move the bottom of the "J" onto the same line as everything else instead of going below the line like "p", and I also need to shorten the tail on the "Q" and move it to the right slightly. These are both to be more similar to Segoe UI. Otherwise I feel like they're close enough, except I do notice that the kerning (spacing?) is slightly different between letters, and letters are slightly different sizes at the same font size, but those two issues are only noticeable when you look closely at them. There's also the fact that Open Sans lacks Semilight, so I'll probably have to file a feature request for people to add it unless it's already being worked on.
Going to keep this open as the winjs repo may be of use.
I forked the winstrap repo, but it doesn't have all the icons I expected, so I'll still probably have to modify the fluentui-system-icons in my own forked repo to get things closer.
Just found another cool font that I'll probably base my work off instead of the fluent ones (unless I can't find what I need in the fluent ones), and this is also under the MIT License: https://github.com/scottdorman/mdl2-icons I forked this one just now to keep it safe and have it accessible for when I modify it for MDL1.0 icons.
Found some more icons that'll probably be useful. These are on Openclipart, and are apparently for AIGA's symbols. Airplane: https://openclipart.org/detail/25248/aiga-air-transportation Right-facing arrow: https://openclipart.org/detail/26734/aiga-right-arrow These will have to be modified to work for my usecase. Most noticeably, the right-facing arrow has a gap at the top-right side of the top arm. Hopefully these icons can replace the font icons until I can figure out why the buttons have the text slightly off-center.
I found a monochrome version of Suru++ which is based on Suru and it should help a lot: https://github.com/gusbemacbe/suru-plus-aspromauros
Also I forked it.
Edit: I'll need to change the default color for all the monochrome icons from #ececec
to #ffffff
for them to be correct, and I can use sed -i
for that as shown in the Suru++ Colourise repo's script: https://github.com/gusbemacbe/suru-plus-colourise/blob/master/suru-plus-colourise
This won't be exactly the same as I should loop through the files within each folder manually instead of doing it at the root, and I need to change this for the currentColor
values at the very top, or whatever they are. Anything that's not monochrome I'll have to change myself. Status bar icons will probably be an icon font so that apps can just say they want a different color for them if they want, rather than SVG files (unless there's a way to change colors for SVG files at runtime to anything not pre-determined while not using tons of resources?).
Also the icons might not be very Metro-style, so that's something to look into later.
Sometimes we may also want icons to have a black version instead of white, but I don't know when that would be desired as there should at least be a color-filled box behind them at all times unless it's on a tile with a wallpaper. Could look sharp on custom themes that are more light and not as much focus on tile background colors aside from light and dark grey like newer Windows 10 versions by default though, I guess?
Edit 2: I will need to edit some icons like the phone one and will replace the battery icons and stuff with MDL1-style icons, either extracted from a repo I forked before or by modifying Microsoft's fluentui-system-icons files to be more squared-off again. Either way, I will need to rename my fork of this to something else, maybe suru-plus-mdl
or suru-plus-metro
?
Microsoft's Selawik should be a decent enough alternative to Segoe UI to use for the text, though there needs to be a way to ensure the possibility of changing the default font: https://github.com/Microsoft/Selawik
There's also a "Symbols" font that's like Selawik but for icons as a fallback for Segoe UI Symbol and the MDL2 icon font: https://github.com/microsoft/fonts
If it's possible, I may just fork the Fluent font icons and alter the SVG files so they're more squared like the WP8 ones, considering there are things like battery charge icons, Wi-Fi status, and other stuff: https://github.com/microsoft/fluentui-system-icons