New Card based UI
Created by: mray
As proposed in #666 (closed) Plinth needs a more usability focused UI. I propose the following cards based approach. Cards are usable on any device, provide flexibility in terms of what they "hold" and represent apps / modules in a simple, consistent form.
I separated 5 main layouts that should cover almost every scenario in Plinth:
- home screen (when not logged in yet)
- apps (overview of apps)
- configuration (overview of modules)
- $app
- $module
Main Menu
The main menu consists of 5 elements:
- *(logo)*Home -> home screen
- Apps -> apps overview
- Configuration -> module overview --
- user dropdown menu
- power dropdown menu
Cards
Cards come in two variants:
- small, in a stack as an overview (limited and defined content)
- big, as pop up covering the overview (flexible and less defined content)
Apps
(disclaimer - I understand apps technically are also modules) Apps contain services that provide a feature to FreedomBox. They can be turned "on" or "off". Some apps come with an "app page" (like roundcube) which can be visited via a respective link. The apps overview has two card stacks: one for running apps, one for disabled apps. Enabled apps are sorted by having an app page.
Modules
Modules provide configuration options to maintain a running FreedomBox so it can deliver its features through apps. Modules can be categorized via any arrangement of card stacks, some discussion with @ikmaak made me assume "System" "Network" and "Identity" might work.
Home screen:
Apps screen:
App pop up:
Configuration screen:
Module pop up:
Clickable HTML version: Plinth-card-based-UI.zip