The idea of the Toolbar is that you get all actions grouped in different tabs. The benefit is that there is enough space for most actions from LibreOffice and you can show action icons and labels. In addition the UI is sizable.

Two months ago I start to finalize the existing Elementary icon theme for LibreOffice. It’s about 2.000 icons and now they are available in LibreOffice 6.0 beta. In addition all icons are available as svg file so it can be used and edit in an easy way.

Please download and test LibreOffice 6.0 beta to give feedback. You switch the icon theme with Tools -> Options -> View -> Icon Style. We talk about a lot icons not all are perfect. Feedback is always welcome.

Ideas and Concepts

In the last 3 months I played with the awesome feature of Notebookbar. This experimental feature give the user the possibility to use a tabbed toolbar like Microsoft does, but it offers more, much more. I like the idea from the LibreOffice UX team about the context based toolbar. Advantage of the different UI elements:

Toolbar

Toolbars are great to offer the users the most frequently used actions. You can group them and with the Notebookbar you can arrange them in different sizes, with and without labels. The disadvantage is that you can’t show all functions from LibreOffice in the toolbar.

Menubar

The benefit of a menu bar is that you can sort all actions into a useful structure, and the experienced users know where to find actions that they used only from time to time. The disadvantage of a menubar is that you have to navigate through the structure.

Sidebar

The sidebar is great to group sections of actions, and you have a lot of vertical space, so I decided to use some layout examples from the sidebar.

Tabbed Toolbar

The benefit is that you can show all actions within the toolbar because actions are placed on different tabs. The problem is that the user have to know where the actions are.

Grouped Toolbar

The LibreOffice UX team introduced the toolbar with contextual section, that I like much because users can assign actions to different groups and label them. The Notebookbar offers also the option to place button in different sizes onto the canvas, which is used in the variant with contextual section to draw attention to more relevant actions.

Advanced Grouped Toolbar

My proposal starts with the variant “contextual sections” and extends it to the menubar. In addition I’m a fan of consistency so this is my idea:

Groupedbar full

The idea is to combine the top level structure from the main menu with grouped toolbar sections.Sections always start with one big labeled icon followed by two rows with 24px icons and labels if needed. Next to the section label a menu is placed at bottom right that provides access to less often used functions from this group. Furthermore small buttons open dialogs from the group (e.g. Paragraph settings on the Format section). The label is also a drop down menu like in the menubar.

So I have the benefit of a toolbar where you can show the main actions for different groups by one click. Advanced actions for a group via smaller icons and a group label to support orientation in the UI. With the bottom menu you get all actions for one group with two clicks.

The drawback of this solution is that 10 sections or more exceeds the common width of 1280px. Ribbons solve this problem with tabs, I’ll do it per contextually showing sections, depending on the screen resolution. he extended grouped toolbar was designed with 1920px (full HD screen resolution) in mind, but will also work on 1280px and on 2560px Screens.

Groupedbar compact

The design is the same as for the extended grouped toolbar but with only one icon row and a second row with the group labels. For users how don’t need the section labels, those can be hidden to save even more space.

What’s done

This isn’t just a mockup, it’s a real UI file – you can/should test the extended grouped toolbar and the single line toolbar. Thanks to Szymon Kłos

Unfortunately there are some open bugs:

Switching section depending on the context is not as smooth and flicker-free as possible (see switch between text view and table view) Bug 107083

The group labels don’t work as known from the menubar. Implemented as just a label makes…, because something like the drop down menubar behavior isn’t available yet. Bug 107084

Theming work now with firefox personas it would be nice if I could define system colors without personas. Bug 107128

in my last post I’ll present two new icon themes La Capitaine and Papirus icon they are really sexy and work very well with Plasma and KDE Applications. As this two icon set’s are sort of monochrome icon set’s I’d like to resent you an non monochrome icon set like oxygen.

I’ll port the elementary icon set to KDE, as the elementary developers focus on there platform, I’ll make my first git repository where all the kde specific changes were done.

both icon set’s are available with system settings -> Icons -> Get new Theme. The icon sets are well maintained and the designers are very welcome in help and KDE support. Thanks a lot. Don’t forget to vote in the store.

I know breeze icon awesome but we have users with different taste so eat what you like not what you get. If somebody know an awesome icon theme and need kde support, let me know, I’m always happy if I can help. For the not monochrome icon theme fans I’m working on elementary-kde icon extension and I hope I can review oxygen.

NOTE: breeze-icons are well supported and will be full maintained in the future. I don’t want to drop breeze. I’d like to help other designers to develop for KDE.