Merge pull request #452 from frmdstryr/notebook-styles

Add support for notebook tab styling

enaml/qt/qt_notebook.py

@@ -1,5 +1,5 @@
 #------------------------------------------------------------------------------
-# Copyright (c) 2013-2017, Nucleic Development Team.
+# Copyright (c) 2013-2021, Nucleic Development Team.
 #
 # Distributed under the terms of the Modified BSD License.
 #
@@ -10,6 +10,7 @@
 
 from atom.api import Int, IntEnum, Typed
 
+from enaml.styling import StyleCache
 from enaml.widgets.notebook import ProxyNotebook
 
 from .QtCore import Qt, QEvent, QSize, Signal
@@ -20,6 +21,7 @@
 
 from .qt_constraints_widget import QtConstraintsWidget
 from .qt_page import QtPage
+from .styleutil import translate_notebook_style
 
 
 TAB_POSITIONS = {
@@ -414,6 +416,35 @@ def init_layout(self):
         widget.layoutRequested.connect(self.on_layout_requested)
         widget.currentChanged.connect(self.on_current_changed)
 
+    #--------------------------------------------------------------------------
+    # Overrides
+    #--------------------------------------------------------------------------
+    def refresh_style_sheet(self):
+        """ A reimplemented styling method.
+
+        The notebook has an embedded tab bar and tabs that needs stylesheet
+        processing.
+
+        """
+        super().refresh_style_sheet()
+        self.refresh_tab_bar_style_sheet()
+
+    def refresh_tab_bar_style_sheet(self):
+        """ Refresh the notebook pseudo element styles.
+
+        """
+        parts = []
+        name = self.widget.objectName()
+        for style in StyleCache.styles(self.declaration):
+            t = translate_notebook_style(name, style)
+            if t:
+                parts.append(t)
+        if len(parts) > 0:
+            stylesheet = u'\n\n'.join(parts)
+        else:
+            stylesheet = u''
+        self.widget.tabBar().setStyleSheet(stylesheet)
+
     #--------------------------------------------------------------------------
     # Utility Methods
     #--------------------------------------------------------------------------

enaml/qt/styleutil.py

@@ -413,3 +413,22 @@ def translate_dock_item_style(name, style):
         return
     body = '{\n%s\n}' % _translate_style_body(style)
     return '%s %s' % (selector, body)
+
+
+#------------------------------------------------------------------------------
+# Notebook Styling
+#------------------------------------------------------------------------------
+_NOTEBOOK_PSEUDO_ELEMENTS = {
+    'tab': lambda name, pc: _basic_pc('QTabBar::tab', pc),
+    'tear': lambda name, pc: _basic_pc('QTabBar::tear', pc),
+    'scroller': lambda name, pc: _basic_pc('QTabBar::scroller', pc),
+    'tool-button': lambda name, pc: _basic_pc('QTabBar QToolButton', pc),
+}
+
+
+def translate_notebook_style(name, style):
+    selector = _dock_style_selector(name, style, _NOTEBOOK_PSEUDO_ELEMENTS)
+    if not selector:
+        return
+    body = '{\n%s\n}' % _translate_style_body(style)
+    return '%s %s' % (selector, body)

examples/styling/notebook.enaml

@@ -0,0 +1,88 @@
+#------------------------------------------------------------------------------
+# Copyright (c) 2021, Nucleic Development Team.
+#
+# Distributed under the terms of the Modified BSD License.
+#
+# The full license is in the file COPYING.txt, distributed with this software.
+#------------------------------------------------------------------------------
+""" An example demonstrates styling of notebook tabs.
+
+The Notebook widget has 'tab', 'tear', 'scroller', and 'tool-button',
+pseudo elements for styling tabs and the buttons.
+
+<< autodoc-me >>
+"""
+from enaml.widgets.api import (
+    Window, Notebook, Page, Container, PushButton, Field, Html, ObjectCombo
+)
+from enaml.styling import StyleSheet, Style, Setter
+
+
+enamldef MyStyles(StyleSheet):
+    Style:
+        style_class = "custom"
+        element = 'Page'
+        Setter:
+            field = 'background'
+            value = 'white'
+    Style:
+        style_class = "custom"
+        element = 'Notebook'
+        pseudo_element = 'tab'
+        Setter:
+            field = 'background'
+            value = 'white'
+        Setter:
+            field = 'color'
+            value = 'black'
+        Setter:
+            field = 'padding'
+            value = '5px'
+    Style:
+        style_class = "custom"
+        element = 'Notebook'
+        pseudo_element = 'tab'
+        pseudo_class = 'selected'
+        Setter:
+            field = 'border-bottom'
+            value = '2px solid blue'
+    Style:
+        style_class = "custom"
+        element = 'Notebook'
+        pseudo_element = 'pane'
+        Setter:
+            field = 'background'
+            value = 'white'
+
+
+enamldef Main(Window):
+    title = "Notebook styles"
+    MyStyles:
+        pass
+    Container:
+        ObjectCombo: st:
+            items = ["Default", "Custom"]
+        Notebook: nbook:
+            tab_style = 'preferences'
+            style_class << "custom" if st.selected == "Custom" else ""
+            Page:
+                title = 'Foo Page'
+                closable = False
+                tool_tip = 'Foo Page here'
+            Page: bar:
+                title = 'Bar Page'
+                name = 'bar_page'
+                Container:
+                    Field:
+                        pass
+                    Field:
+                        pass
+                    Field:
+                        pass
+            Page: baz:
+                title = 'Baz Page'
+                name = 'baz_page'
+                Container:
+                    padding = 0
+                    Html:
+                        source = '<h1><center>Hello World!</center></h1>'

releasenotes.rst

@@ -7,6 +7,7 @@ Dates are written as DD/MM/YYYY
 -------------------
 - fix operator bindings in template instances PR #445
 - fix FlowLayout error with FlowItems that have non-zero stretch or ortho_stretch PR #448
+- add support for styling notebook tabs PR #452
 
 0.13.0 - 19/04/2021
 -------------------