Panel and Dock configuration design.

We're designing panels in COSMIC with flexibility and customization in mind.

Panels functionality

By default, our desktop provides a Dock for pinned and open applications, and a Panel at the top of the screen for system controls and applets.

Users should be able to add, remove, and rearrange applets on both panels.

Panel and Dock Settings

Panels have options for visual styling, such as gaps, background transparency, and dark/light appearance options.

In the default configuration, Panel and Dock look very similar to those items as seen on Pop!_OS 22.04.

COSMIC DE with new Panel, Dock, and the Settings open to customize the Dock.

Navigating to Panel and Dock Settings

Being able to right-click on the panels to access settings was a commonly requested behavior during our user testing. Both the Dock and Panel will have context menus available that bring the user to the Settings and Applet configuration for each.

Right clicking on a panel brings up the context menu for that panel with options to go to the applet configuration ("Add applet") or go to settings for that panel.

Right-clicking on an applet will bring up more options relevant to that applet. In the future, those options may include applet configuration. For the minimum viable product, the context menu will include an option to remove.

rDemo of removing the Workspaces applet from the Panel by right clicking. The Panel context menu appears with an option to remove that applet. Not everyone uses Workspaces, and that's okay!

Settings for panels will exist under the Desktop category in COSMIC's Settings application, under the title "Desktop and Panels." The Desktop & Panels settings are where users will be able to configure behavior, add/remove, rearrange applets, and change the appearance of both the Panel and Dock.

Desktop and Panels page in Settings.

While our Settings assume one Panel and one Dock to account for our users' common use cases, cosmic-panel does support more niche configurations. More adventurous users will be able to add more panels and edit more particular settings by diving into cosmic-panel's configuration. The Settings application, however, allows the user to edit Panel and Dock from the GUI.

Settings for Panel

Panel settings page in the Settings application.

Settings for the Panel include various options for behavior, position, and style.

For behavior and position:

Automatically hiding the panel
Position on screen, whether top, left, right, or bottom
Show on display: By default the Panel shows on all displays, but can be set to only show on a single display of the user's choice.

When Panel is positioned along the left or right edge of the display, text buttons become icon buttons.

A view of the desktop with the Panel on the left, vertically, and the Dock on the bottom.

It’s also possible to position the panels next to each other.

Desktop view with both the Panel and Dock on the left, vertical. More details in Figma.

If someone unplugs the display(s) when default setting is enabled (“All displays”) - it would still work and no changes would be needed. If someone customized where the panel or dock shows:

If the display without the panel or dock is unplugged, no changes need to be made.
If the display with the panel or dock is unplugged, move panel or dock to Display 1, which should be the oldest connected display. If there is a built-in display, that would usually be Display 1 so panel or dock would move there under this rule.

For style:

Gap between panel and screen edges: This adds a gap between the panel edge and the display edge.
Extend panel to screen edges: when disabled, the panel shrinks in width and hugs the content, which will be centered in the panel.
Appearance: Provides a choice whether or not the Panel is in dark or light mode. By default, the Panel matches the system's appearance settings, but the user can choose to override that here.
Size: by default the Panel is set to its minimum size but users can make it larger.
Background transparency. The Panel inherits the background color set in the desktop's theme, but can be set to a percentage of opacity.

Demonstration of changing the gap and extend settings of the Panel.

Panel corners have a border radius, depending on whether or not the panel has a gap or extends to the edge of the screen.

When Gap between the panel and the screen edge is toggled on, we add default 8px padding on each side that “touches” the screen edge.
When panels don’t have a Gap the corner radius along the screen edge is 0.
Corners of panels that are not adjacent to the display edge should be rounded to 8.

Settings for Dock

Dock settings in the Settings application.

Settings for Dock are very similar to Panel settings. Dock can additionally be disabled and hidden from the desktop completely, and some defaults, like size, differ.

Demonstration of Gap and Extend, but with the Dock.

Configuring applets

From the bottom of Panel and Dock settings users can navigate to the page where they can add, remove, and reorder applets.

Applet configuration screen for the Panel, in the Settings application. Applets on the Panel are represented here as cards that users can drag.

There is also a trash can icon that removes the applet on the applet card in the configuration screen, when applicable, and a view more menu that provides other ways to move the card up and down A view more icon on the applet card provides other ways to move the applet beyond drag and drop.

Panels have, by default, three segments: Start, Center, and End. Depending on panel orientation, those labels will correspond to Left/Center/Right or Top/Center/Bottom. Applets are represented by draggable cards with the applet name, a short description, and common action buttons. When an applet is dragged in the list, the applet should immediately move in the Panel, as well.

Some of the applets that appear in this view may not be visible on the screen, because not all applets are always present. Status applets like the Notifications Tray, Input Sources, or Mounted Drive might only appear when needed.

Clicking "Add applets" opens a new window with a list of applets that can be added. In the future, as the community builds applets for COSMIC's panels, the ability to search, add, and install them from the app store may also appear in this view. Added applets show up at the bottom of the list and can be dragged in the Settings app.

The add applet window, with applets that can still be added to the card.

It’s possible, in some cases, that the user could remove all the applets in the Dock. We don’t plan to block that behavior. Some users may remove all their applets to start with a clean slate before they add others.

Prototype

A prototype with some of the functionality described above can be seen here:

pop-os / cosmic-epoch