Panel and Dock configuration design.

[isaac-8601]

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.

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 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.

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.

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

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.

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

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

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.

Configuring applets

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

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.

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:

• Link to prototype
• Figma page with some additional notes

[imNazax]

Wow this preview looks amazing overall. Can't wait to start using Linux with the latest DE from Pop_OS!

[icedman]

Is there a way to test this now? I installed from source. My dock configuration is just empty. And the dock icons are just white or empty.
I also have this in the logs theme for cosmic panel / dock is missing - which could be a related problem?

[destrex271]

Damn looks amazing! Has this been pushed in the recent cosmic dev versions?

[Drakulix]

Damn looks amazing! Has this been pushed in the recent cosmic dev versions?

Work is ongoing, very much work-in-progress, but parts of the panel (including applets) can already be configured from cosmic-settings in recent cosmic de versions.

[WatchMkr]

@destrex271 many top panel settings and features are released. We're working on dock settings now.