Redesign using MauiKit HIG

[UriHerrera]

Introduction

The code that is in this repository makes use of Plasma UI components to draw the interface of the application. At the time, this was the right solution as it provided an easy way to integrate the program with the system.

MauiKit now exists, and with it, we can create a new program that works in the desktop and mobile.

The Software Center was initially conceived to serve Snap applications and consequently AppImages. AppImages weren't downloaded from a central repository, but the user managed them with the SC merely listing them. Additionally, the SC was not designed to handle system updates.

Eventually, it was observed that linuxapps.com provided an API that we could use to serve Appimages from a central source, and as such, this was used as the backend of the SC.

linuxapps.com was deprecated, and its lack of AppImages was a problem, we figured that we needed a way to obtain AppImages directly from their GitHub release pages as this was a more straightforward and more accessible way always to have the latest available.

AppImagehub.com provided a new central repository for AppImage files and a revised API by openDesktop that offers more modern functionality too. Therefore, in this redesign, it's proposed to make use of it.

Functionality

The way that these new design works are made to be simple — both in how the user interacts with it and how the program delivers the requests to the user.

The following issues already cover many of the core concepts, to not go all over them again; I'll refer them here.

• UI Design #45
• New UI Design #14

The redesign of the SC also takes into account more than just Software, for instance, artwork such as themes, wallpapers, and icons. Ergo, the SC can be viewed as more of a Content storefront than just a software manager.

Differences with the current SC code

1. This redesign of the SC takes into consideration the added functionality of integrating system updates serving as a GUI to znx. As a reference, check znx-gui
2. AppImages are downloaded from AppImagehub.com and stored in /home/$USER/Applications. The SC can perform the queries to the site by using AppImage CLI Tool as its backend instead of building this feature in the main program.
3. No integration of AppImages with the desktop environment is done by the SC itself, appimaged fulfills this purpose.
4. Not all Appimages are built equal, that is to say, that as the point above, the SC shouldn't perform the update by itself but rather make use of AppImageUpdate which fulfills this purpose. However, regardless of this, if the developer or the person that created the AppImage did not include the update information, the AppImage will not be updatable and will have to be downloaded again to overwrite the existing version.

Notes

1. For content that is not an AppImage, the SC will make use of the standard paths. The SC will download, extract, and move the resulting folder to the following paths:
   • For GTK:
     • ~/.themes/ " For GTK2 | GTK3 themes."
     • ~/.icons/ "Icon themes."
   • For Plasma:
     • ~/.local/share/color-schemes/ "Color-schemes."
     • ~/.local/share/icons/ "Icon themes."
     • ~/.local/share/plasma/desktoptheme/ "Plasma themes."
     • ~/.local/share/plasma/plasmoids/ "Plasmoids."
     • ~/.local/share/aurorae/themes/ "Aurorae window decorations."
     • ~/.local/share/kwin/effects/ "KWin effects."
     • ~/.local/share/kwin/scripts/ "KWin scripts."
   • For both
     • ~/.icons/ "Cursor themes."

Requirements

1. The SC should be distributed as an AppImage meaning that it should pack everything to make it work, including the above tools.
2. SC should use MauiKit.
3. SC should be easy to maintain.
4. SC should use the API by openDesktop.

Content Workflow

The workflow is the following:

1. The user clicks the SC icon on the application menu.

2. The user is shown the SC window, by default the "Store" view is displayed.

   • In this view, the user is presented with a featured item from openDesktop.org and a list of items available to download. Similarly presented as the website — See fig.1.
   • Accordingly, a list of categories is always visible on the left sidebar of the window.
     • To download new content
     • At the bottom, a pager is displayed to navigate more content — See fig.2 and 3.

3. Switching to the "Apps" view allows the user to see the AppImages that are currently in the system.

   • AppImages are displayed utilizing a "cards widget from MauiKit." — See fig.5.
   • In this view, the user can "Run," "Update," or "Remove/Delete" an AppImage.
   • AppImages displayed here are sorted by recently added by default. The user has the option to sort them differently.
   • Removing an AppImage deletes the AppImage file from the system and displays a notification after completion — See fig.6.

4. Pressing the queue button takes the user to the "Queue" view. .

   • The button will display two options:
     • Clicking the left icon will show the "Download Queue" where the user can monitor downloaded AppImages — See fig.11.
     • Clicking on the right image will show the "Update Queue," where the user can watch updates — See fig.12.
     • If there's a problem downloading or updating the AppImage, a warning icon is used — See fig.7 and 8.

5. Clicking the hamburger menu displays the "Account" menu. This menu allows the user to manage the addition or deletion of accounts, the settings of the program, and an about dialog — See fig.2.

6. Available AppImages are ordered in categories — See fig.2 and 3.

7. Clicking on the content icon (application or artwork) displays more information about the item, we'll call this view "Item" view — See fig.2 and 3.

   • At the top-left of the window, new options are displayed. These are "Favorite," "Pling," and "Product Gallery."
   • The information for the fields "Description," "Details," and "Changelog" are borrowed using the API.
   • More options are provided in the kebab menu.
   • If the application has more than one file available to download a dropdown indicator is used to select which file to download — See fig.5.
   • At the top of the "Item" view, the application or the available product icon used in openDesktop is used, below this, the name of the item, author and the size of the item.
   • In the background, an image from the product gallery is used, blurred and with an overlay of the color of the window background #fafafa with 70% opacity.

System Management Workflow

As mentioned at the beginning, the SC will serve as the main GUI for znx. We're currently using znx-gui for this purpose, which while it works, it's not particularly informative and gives the impression that znx is a complicated tool to utilize, which it isn't.

The functions of znx can be displayed in one unified view which denotes the simplicity of the program, and the workflow is the following:

1. The user switches to the "System" view.

2. For znx to start using a device, it must initialize it — See fig.17.

   • After znx successfully initializes the available storage device, the SC will display a notification — See fig.18.
   • An additional button allows the user to "Restore the ESP."

3. To deploy a new image, the user will click the button labeled "Deploy" which will open a file dialog, after selecting the image the user will proceed to input a name in a window similar to this.

   • After znx successfully deploys an image to the storage device, it will display a notification.

4. The deployed images are listed in the same other content is listed in the SC window — See fig.19 and 20.

   • The user is now able to either "Remove," "Update," "Revert," or "Reset," and image.
   • After each successful action, a notification is displayed.

In the same fashion that AppimageUpdate, appimaged, and AppImage CLI Tool provide the necessary functionality, znx offers all the required functions which the SC only needs to call.

Mobile

The mobile iteration works the same way, with the difference that the sidebar is always in compact mode. — See fig.21 and 22.

UI Mockup

Nitrux Desktop Store, a digital distribution platform for computer software.

[lokize]

Nice, waiting for this!

[UriHerrera]

Progress

Desktop

Mobile

[UriHerrera]

Progress no.2

The software center can list content from Pling.com. The applications listed here are AppImages.

[UriHerrera]

Progress no.3

The Featured banner works and displays the content from Pling.com. Here it's using the new header buttons from MauiKit. The queue button is also visible. And, also how the program looks like in Breeze colors.

[milohr]

Progress no.4

The store front page has been revamped with sections to highlight:

• highest rated
• newest
• most downloaded.

With more eye catching card delegates.

The category navigation is now "stack-page" based. So the users goes from category into subcategories by stacking pages upon the other.

The Category view was also revamped to also highlight the most recent and highest rated packages within the category, and also a subcategories navigation was added.

The data models were updated to support the changes above.

The installed packages view now displays the correct information. And overall all the delegates were fixed and improved.

There is still work in progress but the most major parts have been implemented. A stable release is planned by the end of November of 2020.

The UI has been also optimized to be used on the PinePhone with ARM64

Desktop:

Phone

[milohr]

https://github.com/Nitrux/nx-software-center/commit/d8346627c50de582ed2569a6bed8ff39f3a7e1dd

[hcsubser]

why was this closed this seemed so close to being done

[UriHerrera]

why was this closed this seemed so close to being done

@hcsubser Because it is already done.