DrewNaylor / Retiled

An attempt at creating a "desktop" environment mainly for Linux phones and tablets that's similar in function to some parts of Microsoft's Windows Phone 8.x, primarily the Start screen, Search app, navigation bar, Action Center, and the status bar. Development is mainly being done using the PinePhone, so that'll be the main supported device.
https://codeberg.org/DrewNaylor/Retiled
Apache License 2.0
66 stars 3 forks source link

Fonts and icons to use #15

Open DrewNaylor opened 3 years ago

DrewNaylor commented 3 years ago

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

DrewNaylor commented 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

DrewNaylor commented 2 years ago

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.

DrewNaylor commented 2 years ago

I've forked all the projects other than the MahApps.Metro.IconPacks one.

DrewNaylor commented 2 years ago

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.

DrewNaylor commented 2 years ago

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.

DrewNaylor commented 2 years ago

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.

DrewNaylor commented 2 years ago

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

DrewNaylor commented 2 years ago

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

DrewNaylor commented 2 years ago

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.

DrewNaylor commented 2 years ago

Going to keep this open as the winjs repo may be of use.

DrewNaylor commented 2 years ago

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.

DrewNaylor commented 2 years ago

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.

DrewNaylor commented 2 years ago

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.

DrewNaylor commented 1 year ago

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?