Recreating the Slack.App channel selector with Qt

Wolosocu

I am looking to implement a control very similar to the channel selector in the Slack app.

Attached is a gif of me hovering my mouse above certain icons and clicking on them.

What would be the best control to implement something like this in Qt? I started looking at QTreeView but I'm not that's best. I would prefer to keep this in Widgets world and not use QML, though I'm not entirely opposed to the idea.

Recommendations and suggestions are welcome!

SGaist

Hi,

Looks rather like a QListView with a custom QStyledItemDelegate for the painting.

mrjj

Hi
How many channels will there be?
A listview + delegate would be able to handle a long list with grace.
Some stylesheet for the scrollbar and some code for the hover effect.

Wolosocu

Only took a couple days but here is! Used QListView with a custom QStyledItemDelegate.

One thing I don't understand is early on I had defined a stylesheet for my QListView derived control. The stylesheet looked pretty basic:

QListView
{
    background: #181F26;
    border-style: none;
}

QListView::item::selected
{
    border-color: #93C0A4;
    border-style: outset;
    border-width: 2px;
    border-radius: 5px;
}

QListView::item::hover
{
    border-color: #606060;
    border-style: outset;
    border-width: 3px;
    border-radius: 5px;
}

Now, most of that is largely ignored (I think?) in my derived paint() method. Yet, if I remove the stylesheet, then QStyle::State_Selected and QStyle::State_MouseOver don't work as expected. Why is this?

mrjj

@Wolosocu
Hi
Good work. it looks nice.
Unless you use QStyle paint functions, any stylesheet have no effect.
QPainter have no idea about it.

Im not sure how
QStyle::State_Selected and QStyle::State_MouseOver
is not working./ be different.