Intro

I’ve started work on redesigning the UI in my open source project Owl. I’ve worked in Qt on and off since 2012 and there are lots of little gotchas and tricks to getting things how you want them. My goal for Owl’s UI is for it look similar to the Slack App.

Here we have the Slack App:

And here is what I have so far in Owl:

A couple of notes:

  • The three horizontal controls use a docking layout, which means that there is a required “central widget” which is simply at QWidget and the other widgets are both QDockWidget.
  • The control on the left is a QListView with a custom QStyledItemDelegate. I had hoped to avoid using a custom delegate but there seemed to be no way of centering the icons and adjusting the spacing between each one. Also, the bar to the left of the icon indicating the item is selected needed to be manually drawn as well.
  • The spacing (or lack thereof) between the three main panes in the window can only be set through a style on the main window, which I found annoying. The code to do so was simple:
QMainWindow::separator
{
    width: 0px;
}

The central widget looks a little crowded because I have all of the old widgets on the top and the new widget (the purple one) on the bottom. This way the app is still usable as I’m working.