Giter Club home page Giter Club logo

drewnaylor / retiled Goto Github PK

View Code? Open in Web Editor NEW
67.0 4.0 3.0 8.87 MB

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.

License: Apache License 2.0

C# 0.54% Visual Basic .NET 1.29% QML 71.16% Python 21.85% Shell 3.61% CMake 0.67% C++ 0.88%
linux windows-phone-ui linux-phones tiles pinephone qml qt6 python windows-phone metro

retiled's Introduction

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 these features and behaviors:

Development is mainly being done using the PinePhone, so that'll be the main supported device (with support for other devices planned, but not as the main focus because I want to ensure it runs reasonably well on the PinePhone, thereby ensuring it should run way better on devices with better specs; proper support for other devices like hardware stuff and notch support will be added, though). It's still in early development as I don't really know what I'm doing with Python and Qt/QML/PySide6 which means development goes a little slowly, but I'm learning.

NB: I'm migrating to Codeberg. The canonical repo for Retiled is now here, please update your remotes: https://codeberg.org/DrewNaylor/Retiled

Guess you could say it's "Something to fill the Live Tile-shaped hole in your heart", but it's not anywhere near ready yet. Here's a tagline (?) I figured out, in addition to what's in the last sentence: "Together, we resolved to forge a new way of life here on *nix, come what may. This was our beautiful lie to ourselves... (orchestral music goes dooo da dooo in the background)"

So far, it's been tested on Manjaro Plasma Mobile and postmarketOS (with Plasma Mobile), but I also want to support more distros like NixOS (I like its philosophy), Mobian, and openSUSE, as a few examples (but not limited to these). I'd also like to support operating systems besides Linux such as FreeBSD if possible.

Note: I'm thinking about just forking Plasma Mobile instead of writing my own compositor, so I will need to relicense the code under the Apache License, 2.0 (except libdotdesktop_py; that'll be MIT Licensed) that is Copyright (C) Drew Naylor, to be under the GPLv3+, or the most compatible license depending on the file. Below is a statement in detail:
If I don't get around it, I, Drew Naylor, hereby declare as of February 26, 2023, that all Apache License, 2.0 files and modifications to files in this repo (except for libdotdesktop_py; that will be under the MIT License if possible; other libraries that are Copyright (C) Drew Naylor and used by the Qt version of Retiled but are not reliant on Qt directly will become under the MIT License and I will change that, but if I don't, I also give permission to change that) that are Copyright (C) Drew Naylor are now under the Gnu GPLv3+ and I give anyone who isn't me permission to change the license in the code to the GPLv3+. Hopefully this is a legal-enough statement. If this is not fully compatible with all of the main Plasma Mobile (and other related projects like Plasma Desktop and the Maliit keyboard and such) code, then I give permission to change to the most-compatible GPL or LGPL version, but this only applies to code Copyright (C) Drew Naylor. There may be instances where the code needs to conform to the license of specific files and programs if it's otherwise not compatible with the GPLv3+, so I also give permission to do that only for code that is Copyright (C) Drew Naylor.

Regarding my note above discussing forking Plasma Mobile, I may also just do a Look-and-Feel package for Plasma Mobile, but there needs to be a way to also run everything outside Plasma (Mobile), both for development, as well as for anyone that wants to run it as, say, a launcher that can just be opened by a key on the keyboard in a standard wlroots Wayland compositor like Sway. I'm thinking what could work would be a QML file just for integration with Plasma Mobile and one for displaying as a launcher popup window with LayerShell. Both of these QML files will load the Tiles page, but they will handle things so Tiles.qml doesn't have to and they'll feed in data differently so that both environments can be kept happy.

Required extra packages

You may need to install packages through your distro's package manager, and those are as follows; their names may vary by distro, but most of these are what Arch Linux ARM (and Manjaro ARM, by extension I guess) use (actually I'm mostly using postmarketOS now, so they may be different). The ones that say "via pip" are extra ones that will have to be installed if not on something like the PinePhone or if it's not installed by default/in your package manager, otherwise the package name on the left side will have to be installed via the distro's package manager like pacman unless that's not the package's name as described in the parenthesis; the packages that aren't listed as being from pip aren't usually in pip, but sometimes I might just have been lazy and didn't check.

Note: I'll have to probably update some items as they may be unclear.

  • python: Used to run most of Retiled; should be Python 3 (using Python 3.9.x, specifically, but my goal is to use the latest version of Python when possible, so it may not be 3.9.x by the time you read this), but I can't remember if the package itself is python3, so I'll need to check
  • pyside6 (PySide6 via pip, which may be necessary on Fedora; py3-pyside6 on postmarketOS): Used for the UI of Python/QML-based components of Retiled
  • qt6-declarative (previously qt6-quickcontrols2): Provides Qt6 QtQuick controls that are used in each component
  • qt6-wayland (qt6-qtwayland on Fedora): Allows Qt6 apps like the ones included in Retiled to run under Wayland, and also allows RetiledCompositor to run
  • pyyaml (PyYAML via pip, py3-yaml in Alpine and probably also postmarketOS, python-yaml in Arch Linux ARM and probably Manjaro ARM, python3-pyyaml in Fedora; no longer provided via this repo, so it'll have to be installed manually, whether that be via pip [newest] or from your package manager [possibly outdated]): Helps read and write yaml files, which are used for RetiledStart's layout file.
  • pyxdg (on postmarketOS, this appears to be py3-xdg, and it appears to be python-pyxdg on Arch Linux ARM and probably also Manjaro ARM): Mainly used for getting app icons at the moment as of April 13, 2023, but usage of it may expand.
  • qt6-svg: You'll need to install this so that SVG images will work. Without it, SVG images won't show up anywhere.
  • libopengl0: Required if you want to run stuff on something like Linux Mint Cinnamon; not sure if this is installed by default on other distros, or if it's something that GTK ones lack; also not sure of the package name on non-Ubuntu distros.

License stuff

This project (Retiled) is Copyright (C) 2021-2023 Drew Naylor and is licensed under the Apache License 2.0, but soon to be GPLv3(+?) as I'm planning on making it mainly a Look-and-Feel package for (or if that won't work, a fork of) Plasma Mobile (but still have it so that certain programs like RetiledStart can run independently of Plasma Mobile if desired).
Retiled uses the RetiledStyles project, which falls under the LGPLv3 for most files (some are modified versions of Qt's styles, so they can fall under the licenses those files fell under). See the files under ./RetiledStyles to be certain of their licenses and copyrights. Qt's license requires me to host my own copy of the code, and you can find that here (I hope the qtdeclarative repo is enough, as that's where I assume PySide6 gets its styles from, and PySide6 doesn't actually include any of the styles in its repo): https://github.com/DrewNaylor/qtdeclarative
Code relating to qtwayland, which is the module used for the project in the RetiledCompositor folder, can be found here: https://github.com/DrewNaylor/qtwayland
RetiledCompositor is the compositor used for Retiled for such things as the multitasking area and giving a place for the navigation bar, etc., and is sadly licensed under the Gnu GPLv3 due to qtwayland also being under the GPLv3 (I think it's GPLv3+ with the "+" being for any version that's ok'd by the KDE Free Qt Foundation, according to some source files in the repo) now. Any files that do not use GPL'd libraries directly will be licensed under one of these three licenses for as much flexibility as possible: the MIT License; the Apache License, Version 2.0; the BSD License according to what Qt uses in the QML files; or the LGPLv3, which is what the RetiledStyles project's files are under.

Windows Phone and all other related copyrights and trademarks are property of Microsoft Corporation. All rights reserved.
Retiled is not associated with Microsoft in any way, and Microsoft does not endorse Retiled.
Qt (and I assume PySide6, since The Qt Company owns it) is Copyright (C) The Qt Company Ltd.

Inter (specifically, Inter Display, and v4.0 beta 8 was used for testing) is used for most of the text in the UI if installed, designed by and trademark Rasmus Andersson and Copyright (c) 2016-2020 The Inter Project Authors, licensed under the SIL Open Font License, Version 1.1 (http://scripts.sil.org/OFL).
Some glyphs are from the wp-metro font, which was made by AJ Troxell and is available under the SIL OFL 1.1; you can find a copy of this license in ./fonts/wp-metro/OFL.txt, as well as here:
http://scripts.sil.org/OFL.
You can find links to these fonts in the components list at the end of this "license stuff" block.
libdotdesktop_py is Copyright (C) Drew Naylor and is licensed under the MIT License. This library is from the DotDesktop4Win project.
pyxdg is used for the app icons in RetiledStart and licensed under the LGPLv2, and the copyright field in "docs/conf.py" states "2012, Sergey Kuleshov, Heinrich Wendel, Thomas Kluyver". I have my own fork for it that you can download from if needed, though: https://github.com/DrewNaylor/pyxdg Please see the project's homepage at the end of this quote block. PyYAML is licensed under the MIT License and is Copyright (c) 2017-2021 Ingy döt Net and Copyright (c) 2006-2016 Kirill Simonov.

Python 3.9 copyrights start:
Copyright (c) 2001-2021 Python Software Foundation.
All Rights Reserved.
Copyright (c) 2000 BeOpen.com.
All Rights Reserved.
Copyright (c) 1995-2001 Corporation for National Research Initiatives.
All Rights Reserved.
Copyright (c) 1991-1995 Stichting Mathematisch Centrum, Amsterdam.
All Rights Reserved.
Python 3.9 copyrights end.
Python is licensed under the PSF License Agreement, which you can find a copy of here:
https://docs.python.org/3.9/license.html#psf-license

Any other copyrights and trademarks belong to their respective people and companies/organizations.

Components of the Retiled project include libdotdesktop_py from DotDesktop4Win, Python, Qt, QML, PySide6, PyYAML, wp-metro, Inter, pyxdg. Anything else that's used in the future will be added to this list.

Installation, Uninstallation, Building, and Running

Please note: You'll have to install the dependencies manually, as they're not integrated into the script yet.

These instructions aren't up to date with the zip file in the releases, so I'd recommend checking the "how to use" guide for installation instructions for released versions. One thing I do need to say to comply with the (L)GPL is that you can replace the files in the RetiledStyles directory if you want to use different files than what I provide, either by switching them out of the package then running the install script, or by replacing them as root when installed by changing the files in /opt/Retiled/RetiledStyles.

Actually, these instructions may be more up-to-date than what's in the v0.1 DP1's package (even though I don't recommend that version anymore as if I remember correctly, it has major bugs fixed, those being mainly in the All Apps list and they showed up well after it was released due to what I think is a change in Qt), so if you can't figure out what's going on with those files, check these instructions. The instructions will be unified for v0.1 DP2.

  • Installation
    1. Install pyside6 (py3-pyside6 on postmarketOS), qt6-quickcontrols2 (may be the same thing as qt6-declarative now, so if the other name doesn't work, try this one), qt6-wayland (may also be qt6-qtwayland on pmOS), pyxdg (py3-xdg on pmOS). These packages should be what they're named in Arch Linux ARM/Manjaro ARM, but I haven't used it much lately and I mostly use Fedora in a VM and postmarketOS on my PinePhone. I assume that you'll already have Python 3 installed, but if not, you'll also have to install it.
    2. Install git if you haven't, and clone the repo using git clone https://github.com/DrewNaylor/Retiled
    3. cd into Retiled/Scripts
    4. Run sh install-retiled.sh. The Python scripts will be compiled, then you'll be prompted with sudo asking your password to install (if you haven't entered it recently).
    5. You should find the items for RetiledStart and RetiledSearch in your app list. If not (can happen with Plasma Mobile, which is the UI that this is recommended to be run using until RetiledCompositor is ready for use due to also using Qt), you'll need to restart your phone.
  • Uninstallation
    1. cd back into retiled/Scripts in the repo you cloned earlier, or clone it again if you deleted it.
    2. Run sh uninstall-retiled.sh. You'll be prompted for your password by sudo so that it can delete the files and folders used by Retiled, mainly /opt/Retiled/*, /usr/share/applications/retiledstart.desktop, and /usr/share/applications/retiledsearch.desktop.
  • Building
    • You shouldn't have to build Python scripts, but if you want to, cd into Scripts, then run sh build-retiledstart.sh or sh build-retiledsearch.sh, depending on which you want to build.
    • Please ensure Python 3 is installed first, or building (and running) won't work.
    • Building is only intended for the step before installing on the destination device, which is typically expected to run Linux or another OS with sh scripting capability. As a result, there's no .bat script, nor is there support for building on Windows. This may change in the future if there's something that ends up using it on Windows or a Windows-compatible system.
  • Running
    • Windows
      • To run RetiledStart, follow the instructions for running RetiledSearch, but use the RetiledStart/RetiledStart directory instead.
      • To run RetiledActionCenter, follow the instructions for running RetiledSearch, but use the RetiledActionCenter directory instead.
      • To run RetiledSearch, set up and activate your venv with Python 3.9 (or later, which is preferred if it doesn't break things) and the pip packages listed above, then refer to the line below regarding running Python/QML apps on Linux.
    • Linux
      • To run RetiledStart, RetiledSearch, or RetiledActionCenter, please refer to the line below regarding running Python/QML-based apps.
      • To run RetiledCompositor, please refer to the instructions on running the compositor in /docs.
      • Running Python/QML-based apps requires installing the relevant packages as described in the Building section (desktop Linux can probably use the pip packages), then for
        • RetiledSearch:
          • cd into RetiledSearch/RetiledSearch
          • Run python main.py
        • RetiledStart:
          • cd into RetiledStart/RetiledStart
          • Run python main.py
        • RetiledActionCenter:
          • cd into RetiledActionCenter
          • Run python main.py
      • If you run the Python/QML-based apps on Phosh without first rebooting after installing the required extra packages, the keyboard may not display the letters properly, and instead show boxes. This doesn't seem to be permanent, as rebooting fixes the issue. However, running the Python/QML-based apps after a reboot may have Qt say that it's ignoring Wayland on Gnome, so it'll use Xwayland instead. You'll have to run QT_QPA_PLATFORM=wayland python main.py to make it use Wayland. This command will be integrated into a launcher script to make things easy (actually, not sure about that now, as that could make things more difficult and my goal is to focus on running the apps on Wayland even on Plasma Mobile...). Additionally, there's a titlebar when running with Wayland under Phosh. I'd like to have it only appear when in docked mode, although some apps may be better to have no window borders in docked mode and instead appear next to the panel, like RetiledStart.

Video demos

Screenshots

Below are some screenshots in case you want to see how things are going so far. Some may be updated separately from the rest so recent changes might not show up in every screenshot. I might not update the screenshots here very often either, so I'd recommend following me on Mastodon as I'll occasionally post screenshots for the feature I'm working on at the moment. It's not always Retiled screenshots, though.

RetiledStart showing a set of tiles of various sizes while running in Plasma Mobile on the PinePhone:


Tiles in edit mode:


Tiles with icons:

All Apps list:


All Apps list item context menu showing the "pin to start" button:

All Apps list with icons (is this a good size for the icons? If it's not, please let me know. I've changed this slightly after taking this screenshot, too):


RetiledSearch running on the PinePhone:


Appbar menu in the search app showing the "about" button:


"about" page in the search app:


Three-column layout test:

retiled's People

Contributors

drewnaylor avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

retiled's Issues

Properly size tiles according to Windows Phone 8.x, including the extra column in 8.0 GDR3/8.1.

Not exactly sure what size they end up as with the extra column, but from my research medium tile templates are 150x150, and wide tiles are 310x150. Small tiles look pretty good at 70x70. This StackOverflow post says WP8.0 tile sizes are 210x210 for medium, 430x210 for wide, and 100x100 for small if you're on a 480x800 device: https://stackoverflow.com/questions/12837720/windows-phone-8-startscreen-tile-sizes-and-margins

It would be cool to add a way to limit the apps displayed in the list to mobile-friendly ones when undocked (not plugged into a monitor, to clarify for when I'm sleep deprived), like Phosh.

Not sure how to see whether it's docked or not, but if I figure that out, it'll be useful. Probably will have to test to see whether the .desktop file has X-Purism-FormFactor=Workstation;Mobile; in it and show it, or if it lacks Mobile;, hide it in undocked mode. May have to simulate docked mode unless the PinePhone's docked mode starts working soon, as it doesn't seem to work for me.

An unofficial remake/sequel of that Microsoft game where you tilt your phone to roll a ball around and get into the goal and pick up other balls along the way would be cool.

Not sure if I'd actually try to make this unless I'm bored with all other projects, but I'm just putting this here just in case. I'd have to give credit to Microsoft for the original version and that I got the idea from that one.

I think this should go in its own repo since it's not necessarily directly related to everything else in Retiled, even though it was a Windows Phone game. I'll see. Maybe there will be a "RetiledGames" folder in this repo.

Using Godot 2D would probably work well and be simple enough. I want this to run well on the PinePhone, so Unity is out of the question.

I'd add several features, mainly:

  • Multiple environments (like adding a forest-style area)
  • More control options in addition to tilting the device
    • Touch-and-drag and click-and-drag input
      • Touching and dragging or clicking and dragging will both simulate tilting the phone in whichever direction was dragged in.
      • Dragging back to the center will put the ball in neutral.
      • It would be useful to allow people to change the draggable area to whatever space they need, for better accessibility.
    • Arrow keys
      • Simulates tilting, just like dragging.
      • The keys used can be changed.
      • Spacebar (or another key of the player's choosing) is used to put the ball in neutral, as if simulating returning the phone to where it was.
    • PineTime tilt controls would be cool as another way to use tilt controls without tilting the phone itself. Would help with accessibility, as people would be able to continue to see the screen no matter how the watch is tilted. I found I had to move around a lot to continue to see the screen when I played it several years ago.
    • Anything anyone else implements
  • Boss levels
    • One idea is that there can be an "evil ball" that'll cause your balls to split, and if you don't have any to split, then you'll have to try the level again. The "evil ball" could be glowing red and be spiky. You'll have to avoid it as you move your own ball(s) around, as it'll have similar physics to yours.

Fonts and icons to use

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

Supporting the PinePhone's hardware and also supporting hardware for other devices.

(This will be edited to be more concise; just copying over things for now.)

(note Oct. 3, 2023: I'm relicensing to the GPL, so I'll just use the idea with the Generic Driver thing I have to support multiple devices)

Discussed in #16

Originally posted by DrewNaylor June 3, 2021
I really don't want to do this because I don't like the GPL as it's so restrictive and is involved with the same organization as RMS, but there's this .NET 5 library for getting PinePhone hardware stuff that would be really useful and it's GPLv2 licensed: https://github.com/Alumniminium/PinePhoneCore

As a result of changing this to the GPLv2 (would prefer v3+ as it allows Apache Licensed stuff, but the license isn't v2+ as far as I can tell), I'd have to change some of my other projects I'm planning on using to use the Expat License (some call it the "MIT License", but that's inaccurate).

Just trying to see if there's any feedback about this.

Allow users to close apps via the back button if there's nothing to navigate backward from.

This would be done on a per-app basis, though I'd like to integrate this into an API of some sort if possible. Some apps like Start wouldn't have this, but instead would go to the most recently-activated app if there's anything else open. Likewise, apps that don't support this API at all will go back to the previously-activated app.

Hopefully something can be integrated for Firefox and other browsers so people can use the Back button to go to the previous page or close the tab if they can't go back further. Maybe an extension can be written to implement this API, similar to the Plasma browser integration one. There will have to be some way to know if Escape will be fine to use, such as for popups and menus.

If apps are designed to go back, they'll listen for the "Escape" key, since pressing "Escape" goes back in the WP emulator. They'll also have the option to use an enhanced Back button functionality via D-Bus, as well as checking if the navbar is running.

This one seems pretty good:
https://nicolasdeory.medium.com/simple-ipc-using-named-pipes-in-net-core-7cb1b29f6dab

Here's the GitHub page for it:
https://github.com/RandomEngy/PipeMethodCalls

Not entirely sure how different applications would connect to the same named pipe as what the navigation bar would use to allow for navigating back if possible or closing the program, though. Stuff like Firefox wouldn't work with it and I'd need to figure out a way to send backward navigation commands to everything that can use them, unless it would just detect if a program can use the back button to go back and not do anything if that's not possible.

Edit: see the latest reply here on how the Back button is basically the Escape key, so we'll use that: #4 (comment)

Edit 2: D-Bus will allow for the enhanced Back button functionality in apps that support it, as well as a way to check if the navigation bar is currently running and display an emergency Back button if it's not, as described in this comment: #4 (comment)

You know what, just use dex to launch .desktop files for now so I can have more time to perfect the libdotdesktop_standard Python port.

See also #23 regarding an option to use dex instead of the exec key's value-cleanup code in my library after porting it to Python. I'm keeping that open because an option to switch between my code and dex would still be useful. The only problem with not including the cleanup code in my own library is RetiledStart won't work on Windows if dex isn't available, but that's not really an issue outside debugging as I'm not trying to make a UI for Windows.

Since my level of experience with Python is minute compared to my level of experience with VB.NET, my port may not nearly be as stable or reliable as the original code and may take a lot longer to be usable (mainly the key cleanup part), which is why I'm trying to save time by having RetiledStart use dex for the launching part for now. I'll have to store the .desktop file path for each All Apps list entry and tile to pass to it, as that's how dex works.

Even though I'm not including the exec key's value-cleanup code right away, I'll still have to at least port the code for getting key values, as that's what I use to show the names of each app plus determine whether that app should be shown in the list.

The Python port will be developed in the DotDesktop4Win repo, as the original is already there and I don't want to go into deeper folders to modify its code. Preferably there would be a way to have them all in the same folder like DLL files, but that would require having them be compiled, and I don't know how easy it is to do .NET-style references with Python. Might be complicated or require other libraries, so I want to keep it simple.

Maybe for now I should just have the Start screen have 70x70 columns in a VariableSizedWrapGrid or something and have medium tiles be 140x140 and wide tiles be 280x140.

At least that way it should kinda work, even with smaller tiles. Maybe the FluidWrapPanel described here will work and I can use full-size tiles: https://wpfspark.wordpress.com/2016/04/27/dynamic-fluidwrappanel/

Edit: Here's an animation showing stuff being moved around in FluidWrapPanel: https://wpfspark.wordpress.com/2016/07/16/compositionprotoolkit-v0-3/

Template controls that need to be made for tiles and anything else inherited from buttons, like Action Center toggles.

It would be cool to support custom themes, so as the issue title states, I'll have to do templated controls so that it's easy to have themes only change the appearance of specific controls, even if those controls are functionally the same underneath due to inheritance.

Besides custom themes, it would just be way easier having a specific control that can be called for things like Tiles instead of having to make sure the properties are set up correctly in the RetiledStart code, for example.

The main button-like controls that aren't a direct analog of System.Windows.Forms.Button in appearance that I can think of off the top of my head are:

  • Tiles
  • Action Center buttons
    • The main ones at the top you can configure
    • "Clear Notifications" and "Settings" (these two look different from the ones at the top)
  • Navigation Bar buttons (Back, Start, and Search)
  • CommandBar buttons (the part at the bottom of Windows Phone apps that have icons with circles around them)
  • The Apps List "Search" button (magnifying glass inside a circle at the top of the App List's left margin)
  • The "All Apps" arrow button (specifically the one with an arrow in a circle that was last seen in WP8.1 Update 1)
  • Not sure if they count as button-like, but the "letter filter" buttons that show a list of letters you can use to get to specific parts of a list quickly
    • KDE Plasma's default application launcher menu now has a "letter filter" jumplist feature, so if it's under a license that I can use easily, I could probably just borrow and modify that code since it's obviously using QML. That way I don't have to try to figure it out myself. If it's (L)GPL, then I might end up having to change the license anyway, sadly, because it may be difficult to figure it out myself, but code reuse is good.
  • Buttons that are only made from text and maybe an icon on the side, such as the apps themselves in the Apps List and items in the system and apps pages of Settings (though these may be part of a ListView so they might not count).

Trying to figure out how to get the tiles with their data.

My XAML code uses an ItemsRepeater inside a Grid, so I'm not quite sure what to do. Hopefully the QML Repeater is light enough and doesn't make things too slow if it's not a virtualized list.

This project may help: https://github.com/tripolskypetr/qml-flexbox

I'll have to fork it on my computer (Safari doesn't give me the real desktop site, and I can't get to the Fork button through the Milestones tab anymore) and add a line to remove Repeaters, as detailed here:
tripolskypetr/qml-flexbox#1

Details to remember as I implement Windows Phone-style themes and design Retiled's UI.

Update 3 (the other two were deleted due to being outdated): I ran the PySide6 Qt Quick Controls gallery and found that, with some changes, the progress bar, progress ring (called "BusyIndicator" here), SwipeView, and TabBar controls will probably work well just going from the Universal style.

  • Most buttons have their background color changed to the accent color when pressed.
  • Some buttons such as the "All Apps" button have the fill color as white instead of the accent color.
  • Support for accent colors other than Cobalt needs to be added.
    • While not yet available in a released build, it is available on main and you just have to edit "RetiledSettings/configs/themes.config" in the repo or "~/.config/Retiled/RetiledSettings/configs/themes.config" if it's copied there whether by you to prepare for the next version (it'll support Accent colors; changing them in a UI will take longer), or by an unofficial tweaks program that makes it easier to change stuff that doesn't have a GUI available for yet.
    • Please note that apps don't listen for Accent color changes yet, and as such must be restarted for your changes to take effect.
  • Custom accent color support as seen on desktop Windows 10 needs to exist.
    • Again, this must be done by editing the config file for now.
    • Qt has a QML color picker now that should work.
  • Support for the light theme.
    • Light/dark is an option in the config file, but it's not yet implemented. You can change it to light now if you want to have the light theme as soon as a version with support for it is installed.
  • "Light Cobalt" should be added as an option in case people prefer the lighter variation from some phones (#3e65ff instead of #0050ef according to WindowSpy)
  • Apparently there's another variant of Cobalt that the Visual Studio Designer displays in the Device pane, that being #0B6CF8. In case it's necessary, the full code is #FF0B6CF8, but GitHub doesn't display a preview for that one. This color may be the real "Light Cobalt" that some devices displayed instead of the real Cobalt, as it looks less purple to me.
  • Here's a full list of the colors as defined/displayed by Visual Studio. I don't know if people will want to use these, or the colors in the other list I have somewhere.
    Real colors according to Visual Studio
  • There needs to be a way to reference the styles for controls from multiple applications.
    • Should be possible by referencing a library and specifying the assembly when adding the styles to the page.
    • I guess this is technically supported due to how QML classes work.
  • Toggle switches have padding inside them so the accent color doesn't fill the entire thing:
    WP8 1 toggle switch controls
  • Toggle switches also slide over and can even be dragged over manually.
  • Progress bars are really thin and use the accent color as their fill color.
  • Opening the appbar has a nice transition for the buttons in it to slide into place.
  • A common page transition is the "barndoor swing", for lack of a better phrase. I may have mentioned these two transitions in the long document with what features there'll be.
  • The "Unpin Tile" button has a black (or white, if using the light theme) outline when pressed, while the "Resize Tile" button doesn't:
    Unpin button theming
  • Apps with really long names just show whatever can fit in the tile:
    tiles with apps that have really long names go off the tile
  • Items in the All Apps list go behind the statusbar, which appears to have reserved space, unlike on the Start screen:
    status bar has reserved space
    items get cut off behind the statusbar on the all apps list
  • While there is a gap at the top of the All Apps list, items go above it but stop at a point. This is related to the "reserved space" thing above.
    default and maximum all apps list height
    • I think the "reserved space" thing should be handled by creating either an extension for Wayland or something with D-bus that apps that support it can use to specify how the status bar area should act, whether it should automatically reserve space like a LayerShell component (for compatibility with basically everything that's not designed for Retiled, but also apps that can just have space at the top; the only concern is if an app needs to have a loading indicator at the top, there needs to be a D-bus thing to specify that the status bar icons need to hide and something else like the "Loading..." dots needs to be shown [maybe there can be a way to have the status bar be in LayerShell mode and also change what's displayed up there, so app developers don't have to manually do spacing if they don't want to, but they can also do manual spacing and the "loading..." dots if they want]) or if the app can handle it so it's more immersive. Hiding the status bar is also important, but I think that's already been discussed in the large document in /docs.
  • As shown in the screenshots above, the All Apps list has headers for the first letter of each item. Microsoft has an example on how to do that with a ListView here, which will need to be altered to work with Avalonia: https://docs.microsoft.com/en-us/windows/apps/design/controls/lists#examples-1
    alphabetized categories for list view
    This SO page may help point me in the right direction for doing this under QML:
    https://stackoverflow.com/questions/48923148/qml-creating-a-re-usable-listview-header-component
  • WP buttons will turn toward where the user pressed them. This issue is being tracked here, though I figured that it would be a good idea to add it to this list, too: #37
  • Most phones had different positions for their navigation buttons, so there should be a way to allow the user to customize the spacing between them if desired.
  • There's a gap below the "uninstall" button in the All Apps List app context menu and unless I said this somewhere else, context menus have a black outline on the top and bottom and are the width of the screen.
  • They also "push" the rest of the apps into the "background" with an animation when they open.
    079A0CA9-4AF9-4A0A-AAF6-14E810BEB5CD
  • Location services has an icon in the statusbar when it's active that looks like a big dot with a circle around it.
  • App bar buttons rotate when the screen is rotated:
    wp_ss_20150205_0004
  • Not sure if I wrote this somewhere else, but the statusbar icons are grey and slightly transparent as shown below comparing the statusbar when the Action Center is closed and open. You can see where the battery icon overlaps with the IE logo that the fill color isn't opaque. This may be different in different applications though, so I don't know how to handle that yet. Maybe it'll just be slightly transparent for everything.
    slightly-transparent statusbar that has grey icons
  • Dropdown boxes usually have black backgrounds and white outlines in the dark theme, but pressing them changes them to a white background and an accent color outline. When open, they show the currently-selected item with an accent color highlight and the outline remains the accent color as well. In the light theme, the dropdown box always has a white background, and a black outline unless pressed or open.
    windows phone dropdowns usually then when pressed then open
  • I was just messing around in the Windows Phone emulator, and found out that the "Loading..." dots are squares, not circles (perhaps there should be an option to toggle between circles and squares, in case someone prefers the appearance of real circles over squares despite squares being more authentic and true-to-form for Windows Phone?):
    image
  • Not sure where to put this, but at 100% scale, the 720p emulator image doesn't have borders on tiles, which is good to know because I thought they did so I just didn't keep them on the buttons back when I was making them into tiles (except the OneNote icon, for some reason, has a border, which I guess it just has its own background with its own specific border color; sorry these are so large):
    wp-emulator-screenshot-at-100-percent-scale
    Here's the All Apps list too, for reference:
    wp-emulator-allapps-screenshot-at-100-percent-scale
    Those screenshots just above this are also available in ./docs/images/reference if you need to look at them in an image editor more easily.

Live Tiles will get their data through supported scripting languages (or even executables), but data will be displayed with QML.

You might read that title and go, "Yeah, of course they'll use QML, it's what the Start screen is built with," but the interesting thing is that this could be set up in a way that an app would specify how the data would be shown on the tile. The Live Tile developer would (recommended) base their Live Tile off one of the templates, just like they would on Windows Phone (except it's like LiveTiles.FlipTile or something), or (if this makes sense) they could completely change their Live Tile to be more like an Android widget (if the button doesn't override everything) with a bunch of buttons and stuff to use. It'll probably just be based on the templates, though.

I don't exactly know how I'd store the customized Live Tile QML code inside the regular Tile QML code, but I'm sure there's a way to do it.

I'd have to figure out how to connect all the properties in the Live Tile's QML file so it displays properly. Might have to have an If statement that uses something in the .desktop file that says what kind of Live Tile is being used, since I might not know what everything is supposed to connect to. Actually, I probably wouldn't know, so it would be a super complicated problem to figure out. Maybe there's some way to connect all the properties without having to know what they are, for stuff like weather (unless the weather apps just used pictures on flipping around, which would be a lot simpler; stuff like emails and events could be lists of dictionaries).

I need to both look for open-source WP apps that are license-compatible and have Live Tiles to see how to implement my own ones. I also need to read Microsoft's documentation on Live Tiles to know what kinds there are, but that's a given.

Opening the Action Center in landscape mode should have everything rotated if the user wants to have it that way, including notifications.

Basically, the battery percentage and everything would be rotated just like the time. For notifications, the part of the Action Center that shows them would also rotate, but they'll be to the side of the Quick Actions instead of below them. The Quick Actions would change to a vertical list.

As cool as this is, thinking about it more makes it sound like it might not work, or at least be easy to do. Doing it iOS-style where you pull it down from the top may be necessary, unless I can figure out a way to rotate the controls when the display is wider than it is tall, or however rotation would be checked.

There should be a button right below the search button that refreshes the All Apps list in case the user installed an app and it doesn't show up.

That button may be important if I can't figure out a good way to refresh the All Apps list right away, considering the user can now swipe over to it and it doesn't have to take time to load from the button like it did before. I was thinking that maybe there could be code that runs via Python that compares the currently-loaded list to a new one, and it updates if it doesn't match, or it just ignores the new list and keeps with the current one. That code would have to be async to keep things fast and fluid.

Maybe the multitasking view can take a screenshot of the app that's used when that particular app is switched away from.

There should probably be a way to specify that the screenshot shouldn't be taken, for apps like password managers. Not sure exactly how an app would signal to not have a screenshot taken, but maybe the multitasking view would just have to show the app's current state, like Plasma Mobile seems to do when Nota has a file in a git repo open and you update the file from the terminal. Continuing to show the currently-running app's current state might be a good idea too, but it may be difficult. I think Windows Phone used the screenshot method, though.

Not sure where to put this or if I already wrote this, but media controls should go in the volume button UI.

I don't know where Plasma Mobile puts them, but I know GNOME puts them in the same place as Android and iOS: the notification area. I'll have to figure out accessibility so as many people as possible can change media stuff.

Edit: Maybe there can be an option to also display media controls in the Action Center, in addition to an Action Center Quick Action to display the volume control UI. See issues #124 and #125.

Allow touchscreen scrolling when starting to scroll on a button.

Took a while to find this, but this SO page may help: https://stackoverflow.com/questions/19855920/wpf-scrollviewer-consuming-touch-before-longpress

Edit: This answer may be more useful: https://stackoverflow.com/a/40786899

Edit again: This other answer may be closer to what's needed, though it may need to be modified to work with Avalonia and putting it in a control library would be useful so that scrolling with the mouse like Windows Phone would be possible in more places:
https://stackoverflow.com/a/42288914

Archive from the original answer by TheBigSot if it gets deleted:
>I did this class to scroll while keeping the scrollviewer buttons. From the code from user110777, but this works with vertical instead of horizontally, and works well with the viewer (Since I'm now only capturing the content). Plus I'm using MouseLeftButtonDown instead of the preview in order to allow the user to click things like the combobox without causing a drag. (If you want label or Textblock to drag set their IsHitTestVisible=false)

public class ScrollDragger
{
    private readonly ScrollViewer _scrollViewer;
    private readonly UIElement _content;
    private Point _scrollMousePoint;
    private double _hOff = 1;

    public ScrollDragger(UIElement content, ScrollViewer scrollViewer)
    {
        _scrollViewer = scrollViewer;
        _content = content;
        content.MouseLeftButtonDown += scrollViewer_MouseLeftButtonDown;
        content.PreviewMouseMove += scrollViewer_PreviewMouseMove;
        content.PreviewMouseLeftButtonUp += scrollViewer_PreviewMouseLeftButtonUp;
    }

    private void scrollViewer_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        _content.CaptureMouse();
        _scrollMousePoint = e.GetPosition(_scrollViewer);
        _hOff = _scrollViewer.VerticalOffset;
    }

    private void scrollViewer_PreviewMouseMove(object sender, MouseEventArgs e)
    {
        if (_content.IsMouseCaptured)
        {
            var newOffset = _hOff + (_scrollMousePoint.Y - e.GetPosition(_scrollViewer).Y);
            _scrollViewer.ScrollToVerticalOffset(newOffset);
        }
    }

    private void scrollViewer_PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        _content.ReleaseMouseCapture();
    } 
}

That code either doesn't work in .NET Core both in a WPF project and when converted to Avalonia, or I couldn't figure out how to use it correctly.

Remember that phones lacking a camera button had one replace the back button on the Lock Screen.

I'll add an option so that the user can choose whether to replace the back button with a camera button on the Lock Screen, as I personally don't like it but there probably are people who want it. Remember that you press and hold the camera button to open the camera, I think. Perhaps I should also allow the user to swipe from the right to go to the camera, like on iOS, as well as a button in the Action Center so the user can have multiple ways of opening it. Also allow the user to turn off the side-swipe and hide the Action Center camera button if they want.

Edit: It was the back button that it replaced, not the search button. I saw a picture showing the lock screen on a phone that lacked a camera button just now, and it reminded me.

Use Phosh's idea of having a button to open the keyboard anytime the user needs and put a button on the navigation bar or (eventually) in the Action Center.

That feature is a really good idea, so I'm going to copy it. Hopefully there's enough room on the navigation bar, but if not, there should be a button in the Action Center at least. I'm trying to figure out an accessible way to add the button, and I think it'll only work with an extra button on the navigation bar, for four buttons total. The user should have the option to turn off the keyboard button and replace it with swiping up on the navigation bar (when the phone is vertical; when horizontal, from the edge the navigation bar is on to the physical top of the device) to open the keyboard. There should also be a way to just turn off both the button and the swipe gesture, as well as a way to change the gesture to whatever the user wants.

YamlDotNet would probably work well for storing preferences like accent color.

I'd like to have a way for people to use their own XAML themes, but there first needs to be a way to store preferences like accent color, default search engine, and tile positions. Each of those three things will probably have to be their own files to make things easier if people want to change things manually or backup or share their changes.

Something using YAML files for configuration would allow would be building a program just for search configuration and allow it to be accessed from both the Search app and a Settings app.

Planned features and required tasks for v0.1 Developer Preview 1.

Source for some items: https://twitter.com/DrewTNaylor/status/1415110624561045505

  • Sort the All Apps list according to their "Name" key
  • Make pinning and unpinning tiles work
    • Pinning tiles
    • Unpinning tiles
    • Unpinning tiles is fine, but pinning tiles can have some issues as described in #85.
  • I never did fully implement tile resizing with a context menu and went directly to the corner buttons once I verified the buttons in the context menus could get stuff into Python. Until tile resizing can be done from an arrow on the corner of the tiles, I should add two extra "pin to start" items to the list, in addition to the medium one:
    - pin to start (medium)
    - pin to start (small)
    - pin to start (wide)
    - They're in that order because medium was the default on WP, and changing tile sizes with the arrow button on WP would go from starting at medium: small, wide, medium.
    - Resizing from the tile itself may require Avalonia Behaviors.

In addition to the items above, I also need to do these:

  • Modify the appbar in RetiledSearch so it looks correct.
  • [-] Add the scrollbar to the All Apps list Delayed until v0.1-DP2.
  • Get the All Apps list entry item context menu looking close enough to what it should be.
  • Filter out everything in the Exec key that's unnecessary so that opening programs works generally as expected.
  • [-] Pass the .desktop file assigned to each All Apps list entry and tile to dex for now as described in #52. A future version, likely the version right after, will include a port of libdotdesktop_standard to Python which I'll use. That port will only contain the code for removing extra stuff like %F, as I want to keep it as light as possible and I don't really need the heavier features that are supposed to be available in the original version but aren't implemented yet there, either. We're just using the Python port of libdotdesktop_standard (libdotdesktop_py) by default. Not sure about support for dex.
  • Guess I can just add an item for cleaning exec keys with libdotdesktop_py.
  • [-] (Moved to DP2) Allow the user to set their accent color in a config file and figure out a way to bind background color values for the All Apps list items and the textbox and button in the Search app. This value will be used as a fallback in case tiles don't have their accent color specified in the layout file (likely startlayout.yaml), but if the accent color is also not specified, it'll fallback to Cobalt. To make things easier, I'll probably use a separate file to store values for accent colors and the theme, probably themeconfig.yaml. Actually, the light theme vs dark theme switching may be a little difficult to do right away, though this code should help when I get around to add light theme support: https://github.com/nullvoid-creations/Jaya/blob/dev/src/Jaya.Shared/ThemeManager.cs Eventually I'll also add support for third-party themes.

Support for phones with notches on the left or right would be a good idea.

Some phones have notches or cameras on the left or right side of the top of the phone instead of the usual placement of the center, so I should add an option to let people add a space to move stuff away from that part of the phone. I'll need to ensure that the items in the second line of the status bar that appears at the top of the Action Center (like the date and battery percentage) are moved over to line up with the new position of the relevant status bar items (like the time and battery icon).

Center notches shouldn't be a problem because everything is already on the left or right, but people may want a way to hide the notch by spacing the statusbar down from the notch, so there should be a separate option to add a spacer between the physical top of the phone and the statusbar. I'll also have to figure out a way to make sure the window manager/Wayland compositor keeps everything out of the way of the notch area.

When rotated, the notch spacers will still be in the same physical areas, so things should work but with status bar items just rotated.

Navigation bar button color settings, plus figure out a good color value that would simulate the backlight on hardware navigation bar buttons.

Simulating the backlight wouldn't be the default, but instead it would be white or black based on the theme being used. There will however be a dropdown letting the user choose between using the theme color, simulating the backlight, applying their accent color, and setting a custom color. With backlight simulation, there can be a dropdown for commonly-used backlight colors on Windows Phones, like Lumias. Applying the accent color has no options and just sets the navigation bar buttons to the user's accent color. Custom colors will just be an option to choose a custom color, like in Paint.

On top of those options, there should be one to have the start button change to the accent color when pressed because people may want that.

Give the user access to more than 4-5 Action Center buttons by having it be a horizontal scrolling panel.

I really don't like Windows 10 Mobile's dropdown, so having the rest of the buttons that aren't at the top of the list and also aren't completely hidden be on a horizontally-scrolling panel is a good solution to showing more than the max amount in WP8.1 (almost put "8.x" and forgot that Action Center was added in 8.1, which shows how important it was).

The buttons that appear at the top of the Action Center will be configurable, and I think one way to do that will be to have a vertical list the user can click and drag items up or down on, kinda like the Windows 10 one but only vertical.

Note: This is similar to how Ubuntu Touch/UBPorts has the notification area action tabs in that the tabs scroll horizontally. Those aren't buttons, though.

.NET on Linux uses CommonApplicationData for /usr/share and LocalApplicationData for $HOME/.local/share, so use them instead of hardcoding stuff.

This is important because the XDG spec says some .desktop files go under $HOME/.local/share, and says to search there first. There's one more directory I think, but I need to look at the spec again because I forgot. Maybe I can check the list when adding a file to it to see if it's already accounted for, and not add a duplicate. Checking to see if something should be shown would help to optimize it, as would "OnlyShowIn" and "NoShowIn".

There should be a default pinned tiles layout, and any modifications to the layout will just copy the default layout to the user's app configuration folder for Retiled, wherever it'll be.

I'm thinking something based on what I usually did with two-column layouts, with medium tiles for Phone and Messages on the top left and top right, then an email client on the next row on the left, with the browser and app store on the right, etc. Once four small tiles can be in a square together, the default should be able to almost copy my personal two-column layouts, aside from the actual apps themselves.

As the title says, if the user pins or unpins an app (resizes or moves as well, once supported), then the default layout will be copied to the local user data folder area. The default layout will only be used if there's no layout file already there. I'll have to ensure the user's modified file is written to when modifying the tiles, and if it doesn't exist, first copy the default, then modify.

Due to testing this mostly with Plasma Mobile, I think I'll use Plasma apps for the default pinned tiles. It would be a good idea to provide a default layout with Phosh apps for testers, though.

May be difficult to provide both layouts early on, but I could add two YAML files with the only difference being the apps that are pinned and just do a check to see which UI is running somehow, or an easier way to do it would just be to ask the user whether they use Plasma Mobile or Phosh with a message that says it determines which apps are pinned to the default layout.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.