Merge pull request #6 from healkeiser/dev

healkeiser · web-flow · commit b8a41d9f3555 · 2026-01-15T17:26:32.000+01:00
v11.4.0: Icons are now reacting to the hover/selection color
diff --git a/fxgui/examples.py b/fxgui/examples.py
@@ -76,6 +76,8 @@
     QLabel,
     QTreeWidget,
     QTreeWidgetItem,
+    QListWidget,
+    QListWidgetItem,
     QSpinBox,
     QTabWidget,
     QGroupBox,
@@ -259,6 +261,88 @@ def _create_delegates_tab() -> QWidget:
     header.setWordWrap(True)
     layout.addWidget(header)
 
+    # Icon Color Test Section - Simple list and tree to test icon_on_accent colors
+    icon_test_group = QGroupBox("Icon Color on Selection/Hover Test")
+    icon_test_layout = QHBoxLayout(icon_test_group)
+
+    # Simple list widget
+    test_list = QListWidget()
+    test_list_delegate = fxwidgets.FXThumbnailDelegate()
+    test_list_delegate.show_thumbnail = False
+    test_list_delegate.show_status_dot = False
+    test_list_delegate.show_status_label = False
+    test_list.setItemDelegate(test_list_delegate)
+
+    list_items_data = [
+        ("Documents", "folder"),
+        ("Images", "image"),
+        ("Settings", "settings"),
+        ("Search", "search"),
+        ("Home", "home"),
+    ]
+    test_list_items = []
+    for name, icon_name in list_items_data:
+        item = QListWidgetItem(name)
+        item.setIcon(get_icon(icon_name))
+        item.setData(Qt.UserRole + 50, icon_name)  # Store icon name
+        test_list.addItem(item)
+        test_list_items.append(item)
+
+    icon_test_layout.addWidget(test_list)
+
+    # Simple tree widget
+    test_tree = QTreeWidget()
+    test_tree.setHeaderLabels(["Name", "Type"])
+    test_tree_delegate = fxwidgets.FXThumbnailDelegate()
+    test_tree_delegate.show_thumbnail = False
+    test_tree_delegate.show_status_dot = False
+    test_tree_delegate.show_status_label = False
+    test_tree.setItemDelegate(test_tree_delegate)
+
+    tree_items_data = [
+        ("Project Files", "folder", "Folder", [
+            ("main.py", "code", "Python"),
+            ("utils.py", "code", "Python"),
+            ("config.yaml", "settings", "YAML"),
+        ]),
+        ("Assets", "image", "Folder", [
+            ("logo.png", "image", "PNG"),
+            ("icon.svg", "image", "SVG"),
+        ]),
+    ]
+    test_tree_items = []
+    for parent_name, parent_icon, parent_type, children in tree_items_data:
+        parent_item = QTreeWidgetItem(test_tree, [parent_name, parent_type])
+        parent_item.setIcon(0, get_icon(parent_icon))
+        parent_item.setData(0, Qt.UserRole + 50, parent_icon)
+        test_tree_items.append(parent_item)
+        for child_name, child_icon, child_type in children:
+            child_item = QTreeWidgetItem(parent_item, [child_name, child_type])
+            child_item.setIcon(0, get_icon(child_icon))
+            child_item.setData(0, Qt.UserRole + 50, child_icon)
+            test_tree_items.append(child_item)
+
+    test_tree.expandAll()
+    icon_test_layout.addWidget(test_tree)
+
+    # Theme-aware icon update for test widgets
+    def update_icon_test_colors(_theme_name: str = None):
+        for item in test_list_items:
+            icon_name = item.data(Qt.UserRole + 50)
+            if icon_name:
+                item.setIcon(get_icon(icon_name))
+        for item in test_tree_items:
+            icon_name = item.data(0, Qt.UserRole + 50)
+            if icon_name:
+                item.setIcon(0, get_icon(icon_name))
+        test_list.viewport().update()
+        test_tree.viewport().update()
+
+    update_icon_test_colors()
+    fxstyle.theme_manager.theme_changed.connect(update_icon_test_colors)
+
+    layout.addWidget(icon_test_group)
+
     # Code example with syntax-highlighted code block
     code_group = QGroupBox("Theme-Aware Custom Colors Pattern")
     code_layout = QVBoxLayout(code_group)
diff --git a/fxgui/fxstyle.py b/fxgui/fxstyle.py
@@ -374,6 +374,8 @@ def _safe_apply_theme_styles(self) -> None:
     "get_feedback_colors",
     "get_theme_colors",
     "get_icon_color",
+    "get_icon_on_accent_primary",
+    "get_icon_on_accent_secondary",
     # Theme functions
     "get_available_themes",
     "get_theme",
@@ -606,9 +608,11 @@ def get_theme_colors() -> dict:
     - ``slider_thumb``: Slider handle color
     - ``slider_thumb_hover``: Slider handle hover/pressed
 
-    **Icon**:
+    **Icon Colors**:
 
     - ``icon``: Tint color for monochrome icons
+    - ``icon_on_accent_primary``: Icon color on accent_primary backgrounds (optional)
+    - ``icon_on_accent_secondary``: Icon color on accent_secondary backgrounds (optional)
 
     Returns:
         Dictionary containing theme-specific colors.
@@ -655,6 +659,58 @@ def get_icon_color() -> str:
     return theme_colors.get("icon", "#b4b4b4")
 
 
+def get_icon_on_accent_primary() -> str:
+    """Get the icon color for accent_primary backgrounds.
+
+    This color should be used for icons displayed on selected items or other
+    elements that use the accent_primary color as their background.
+
+    If not explicitly defined in the theme, falls back to text_on_accent_primary,
+    which is auto-computed based on the accent_primary color's luminance.
+
+    Returns:
+        The icon color as a hex string for use on accent_primary backgrounds.
+
+    Examples:
+        >>> color = fxstyle.get_icon_on_accent_primary()
+        >>> print(color)  # "#ffffff" for dark theme with blue accent
+    """
+    theme_colors = get_theme_colors()
+    # Fallback chain: icon_on_accent_primary -> text_on_accent_primary -> computed
+    if "icon_on_accent_primary" in theme_colors:
+        return theme_colors["icon_on_accent_primary"]
+    if "text_on_accent_primary" in theme_colors:
+        return theme_colors["text_on_accent_primary"]
+    accent = theme_colors.get("accent_primary", "#2196F3")
+    return get_contrast_text_color(accent)
+
+
+def get_icon_on_accent_secondary() -> str:
+    """Get the icon color for accent_secondary backgrounds.
+
+    This color should be used for icons displayed on hovered items or other
+    elements that use the accent_secondary color as their background.
+
+    If not explicitly defined in the theme, falls back to text_on_accent_secondary,
+    which is auto-computed based on the accent_secondary color's luminance.
+
+    Returns:
+        The icon color as a hex string for use on accent_secondary backgrounds.
+
+    Examples:
+        >>> color = fxstyle.get_icon_on_accent_secondary()
+        >>> print(color)  # "#ffffff" for dark theme with blue accent
+    """
+    theme_colors = get_theme_colors()
+    # Fallback chain: icon_on_accent_secondary -> text_on_accent_secondary -> computed
+    if "icon_on_accent_secondary" in theme_colors:
+        return theme_colors["icon_on_accent_secondary"]
+    if "text_on_accent_secondary" in theme_colors:
+        return theme_colors["text_on_accent_secondary"]
+    accent = theme_colors.get("accent_secondary", "#1976D2")
+    return get_contrast_text_color(accent)
+
+
 ###### Color Utility Functions
 
 
@@ -1133,6 +1189,15 @@ def load_stylesheet(
         "text_on_accent_secondary", get_contrast_text_color(accent_secondary)
     )
 
+    # Icon color for accent backgrounds: use theme value if defined,
+    # otherwise use the same value as text_on_accent (icons should match text)
+    icon_on_accent_primary = theme_data.get(
+        "icon_on_accent_primary", text_on_accent_primary
+    )
+    icon_on_accent_secondary = theme_data.get(
+        "icon_on_accent_secondary", text_on_accent_secondary
+    )
+
     # Build replacement map for all placeholders
     # Uses new semantic naming scheme
     replace = {
@@ -1141,6 +1206,8 @@ def load_stylesheet(
         "@accent_secondary": accent_secondary,
         "@text_on_accent_primary": text_on_accent_primary,
         "@text_on_accent_secondary": text_on_accent_secondary,
+        "@icon_on_accent_primary": icon_on_accent_primary,
+        "@icon_on_accent_secondary": icon_on_accent_secondary,
         # Icon path
         "~icons": str(_parent_directory / "icons" / icon_folder).replace(
             os.sep, "/"
diff --git a/fxgui/fxwidgets/_delegates.py b/fxgui/fxwidgets/_delegates.py
@@ -681,10 +681,10 @@ def _draw_status_label(
         painter.setBrush(QBrush(label_color))
         painter.drawRoundedRect(label_rect, 2, 2)
 
-        # Calculate appropriate text color based on background
+        # Calculate appropriate text color based on background luminance
         text_color = Qt.white if label_color.lightness() < 128 else Qt.black
 
-        # Draw the icon if provided
+        # Draw the icon if provided (keep original colors for brand/DCC icons)
         content_x = label_x + label_padding
         if icon_size > 0:
             icon_y = label_y + (label_height - icon_size) // 2
@@ -1236,19 +1236,26 @@ def _draw_icon_and_text(
         icon_margin = 6
         text_x = option.rect.left() + icon_margin
 
+        # Determine icon and text colors based on selection state
+        # Note: Hover uses semi-transparent accent overlay, so icons stay normal
+        # Only selection uses full opaque accent background requiring contrast icons
+        if option.state & QStyle.State_Selected:
+            text_color = option.palette.highlightedText().color()
+            icon_color = QColor(fxstyle.get_icon_on_accent_primary())
+        else:
+            text_color = option.palette.text().color()
+            icon_color = QColor(fxstyle.get_icon_color())
+
         if icon is not None and not icon.isNull():
             icon_x = option.rect.left() + icon_margin
             icon_y = option.rect.top() + (option.rect.height() - icon_size) // 2
             icon_rect = QRect(icon_x, icon_y, icon_size, icon_size)
-            icon.paint(painter, icon_rect, Qt.AlignCenter)
+            # Colorize icon to match selection/hover state
+            pixmap = icon.pixmap(icon_size, icon_size)
+            colored_pixmap = fxicons.change_pixmap_color(pixmap, icon_color)
+            painter.drawPixmap(icon_rect, colored_pixmap)
             text_x = icon_x + icon_size + icon_margin
 
-        # Set text color
-        if option.state & QStyle.State_Selected:
-            text_color = option.palette.highlightedText().color()
-        else:
-            text_color = option.palette.text().color()
-
         title = index.data(Qt.DisplayRole) or ""
 
         if description and description != "-":
diff --git a/fxgui/qss/style.qss b/fxgui/qss/style.qss
@@ -1164,8 +1164,18 @@ QDockWidget::close-button:pressed, QDockWidget::float-button:pressed {
 
 
 /* Item views inherit from QAbstractItemView above */
+/* Use show-decoration-selected: 1 so the entire row gets consistent
+   highlighting. Branch uses @surface_sunken to match item background
+   (Qt ignores 'transparent' for branch selection/hover painting). */
 QTreeView::branch {
-    background: transparent;
+    background: @surface_sunken;
+}
+
+/* Override branch background to stay neutral during selection/hover
+   since the delegate handles item painting, not the branch area */
+QTreeView::branch:selected,
+QTreeView::branch:!selected:hover {
+    background: @surface_sunken;
 }
 
 QTreeView::branch:has-siblings:!adjoins-item {
@@ -1206,7 +1216,7 @@ QTreeView::branch:open:has-children:has-siblings:hover  {
 
 QListView,
 QTreeView {
-    show-decoration-selected: 0;
+    show-decoration-selected: 1;
 }
 
 QListView::item,
diff --git a/fxgui/style.yaml b/fxgui/style.yaml
