QListView selection hard to read/different than QTableView/QTreeView

[nicoddemus]

Hi!

First of all thanks a lot for this package!

I noticed that the foreground and background color of the current selection for QListView controls is different than the colors used in QTableView/QTreeView (for the dark_teal theme):

QListView:

QTableView/QTreeView:

A simple workaround is to use a table with a single column and hide vertical and horizontal headers (as is the case with the screenshot above, that's a QTableView).

Thanks!

[YeisonCardona]

Hi @nicoddemus
My QListView seems to look fine, can you share an example code? Which is your operating system?, Are you using PySide2, PySide6, or PyQt5?

[nicoddemus]

Hi @YeisonCardona,

Thanks for the quick answer and sorry for the delay!

I'm using Windows, PyQt5. I will come up with an example which reproduces the issue later.

Thanks!

[nicoddemus]

Hi @YeisonCardona,

Here's the example code:

from PyQt5.QtWidgets import QListWidget, QApplication, QTreeWidget, QWidget, QHBoxLayout, \
    QTreeWidgetItem
from qt_material import apply_stylesheet

app = QApplication([])
apply_stylesheet(app, theme="dark_teal.xml")

list_widget = QListWidget()
list_widget.addItem("Item 1")
list_widget.addItem("Item 2")
list_widget.show()

tree_widget = QTreeWidget()
tree_widget.addTopLevelItem(QTreeWidgetItem(["Item 1"]))
tree_widget.addTopLevelItem(QTreeWidgetItem(["Item 2"]))
tree_widget.header().hide()

container = QWidget()
layout = QHBoxLayout(container)
layout.addWidget(list_widget)
layout.addWidget(tree_widget)
container.show()

app.exec()

Here are some screenshots:

As you can see, the QListWidget (left) uses a black font for the text when selected, and there's a red outline indicating selection which is out of place with the rest of the theme.

Perhaps this is due to that I'm actually using a QListWidget instead of a QListView? Just now realized that's probably important information.

[YeisonCardona]

Hi @nicoddemus

The focus outlines were totally unnoticed by me on my OS, I will add styles for them.

Since I have not a Windows machine near, can yo please help me to debug the following code, and tell me if the colors works with this changes.

from PyQt5.QtWidgets import QListWidget, QApplication, QTreeWidget, QWidget, QHBoxLayout, \
    QTreeWidgetItem
from qt_material import apply_stylesheet

app = QApplication([])
apply_stylesheet(app, theme="dark_teal.xml")

extra_css = """
QTreeView::item,
QListView::item {
  selection-color: red;
  selection-background-color: orange;
}
"""
app.setStyleSheet(app.styleSheet() + extra_css)

list_widget = QListWidget()
list_widget.addItem("Item 1")
list_widget.addItem("Item 2")
list_widget.show()

tree_widget = QTreeWidget()
tree_widget.addTopLevelItem(QTreeWidgetItem(["Item 1"]))
tree_widget.addTopLevelItem(QTreeWidgetItem(["Item 2"]))
tree_widget.header().hide()

container = QWidget()
layout = QHBoxLayout(container)
layout.addWidget(list_widget)
layout.addWidget(tree_widget)
container.show()

app.exec()

[nicoddemus]

Thanks for the quick answer!

Since I have not a Windows machine near, can yo please help me to debug the following code, and tell me if the colors works with this changes.

Gladly, trying your code I get:

[YeisonCardona]

Do you think that black background on the non-focus item is the desired behavior?

I get

[nicoddemus]

That looks good, but I can't tell which one of them has keyboard focus... I believe widgets in general should have a focus indicator, as item selection and focus are separate properties.

IOW, when you have a selection in both panels, the user can't tell which one has the focus, which is something important because events are sent to the item with focus: up/down to navigate on the list, or depending on the selection mode press space to change the item selection.

Using the standard Windows theme:

No focus or selection in both panels:

Left: "Item 1" selected and with focus. Right: No focus or selection.

Left: "Item 1" selected. Right: "Item 1" selected and with focus.

Left: "Item 2" selected and with focus. Right: "Item 1" selected.

[YeisonCardona]

In my OS the differences are practically imperceptive, this is the reason that this theme does not handle the focus (I'm not used to seeing them).

I like the Windows behavior, could be something like:

[nicoddemus]

In my OS the differences are practically imperceptive, this is the reason that this theme does not handle the focus (I'm not used to seeing them).

Ahh I see, thanks.

I like the Windows behavior, could be something like:

IMHO that one looks great! 👍

[nicoddemus]

Seems like this has been released already? 😁

If so we can close this (I would myself but would like for this to be confirmed first).

[YeisonCardona]

Hi @nicoddemus Seems like I forgot to write my response, sorry. Yes, this is the new behavior.

[nicoddemus]

Cool, no worries!

Thanks again for the fix and release. 👍