Improving style of tabbed dock widgets for Cosmic theme, specifically…

… to remove the duplicate titles (i.e. Project Files / Project Files). Also working to restore the ability for dock widgets to be detached and reattached easily, and minimized/maximized like normal windows when floating.

src/classes/title_bar.py

@@ -0,0 +1,81 @@
+"""
+ @file
+ @brief This file contains a custom title bar used by dock widgets
+ @author Jonathan Thomas <[email protected]>
+
+ @section LICENSE
+
+ Copyright (c) 2008-2024 OpenShot Studios, LLC
+ (http://www.openshotstudios.com). This file is part of
+ OpenShot Video Editor (http://www.openshot.org), an open-source project
+ dedicated to delivering high quality video editing and animation solutions
+ to the world.
+
+ OpenShot Video Editor is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ OpenShot Video Editor is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with OpenShot Library.  If not, see <http://www.gnu.org/licenses/>.
+ """
+
+from PyQt5.QtWidgets import QWidget, QHBoxLayout, QPushButton, QLabel
+
+
+class HiddenTitleBar(QWidget):
+    def __init__(self, dock_widget, title_text=""):
+        super().__init__()
+        self.dock_widget = dock_widget
+        self.dragging = False  # Flag for dragging
+        self.start_pos = None
+
+        # Set up a horizontal layout
+        layout = QHBoxLayout(self)
+
+        # Add a QLabel for the title (optional, based on title_text)
+        title_label = QLabel(title_text)
+        if title_text:
+            title_label.setObjectName("dock-title-label")
+        else:
+            title_label.setObjectName("dock-title-handle")
+
+        # Add the QLabel to the layout
+        layout.addWidget(title_label)
+
+        # Add a spacer to push buttons to the right
+        layout.addStretch()
+
+        # Add close and undock buttons
+        close_button = QPushButton()
+        undock_button = QPushButton()
+
+        # Set object names for styling via stylesheets
+        close_button.setObjectName("dock-close-button")
+        undock_button.setObjectName("dock-float-button")
+
+        # Connect the buttons to the appropriate actions
+        close_button.clicked.connect(self.dock_widget.close)
+        undock_button.clicked.connect(self.toggle_dock_state)
+
+        # Add buttons to the layout
+        layout.addWidget(undock_button)
+        layout.addWidget(close_button)
+
+        # Set margins and reduce height for the title bar
+        layout.setContentsMargins(0, 0, 0, 0)
+        self.setFixedHeight(20)  # Reduced height
+
+    def toggle_dock_state(self):
+        """Toggle between docked and floating states."""
+        if self.dock_widget.isFloating():
+            # Restore the default title bar when docking
+            self.dock_widget.setFloating(False)
+        else:
+            # Float the widget and apply custom title bar
+            self.dock_widget.setFloating(True)

src/themes/base.py

@@ -56,7 +56,7 @@ def create_svg_icon(self, svg_path, size):
         painter.end()
         image.setDevicePixelRatio(self.app.devicePixelRatio())
         return QIcon(image)
-        
+
     def get_color(self, class_name, property_name):
         """Return a QColor from a stylesheet class and property."""
         # Regex to find the class and property with a color for more complex properties
@@ -68,6 +68,17 @@ def get_color(self, class_name, property_name):
                 return QColor(color_code)
         return QColor("black")
 
+    def get_int(self, class_name, property_name):
+        """Return an int from a stylesheet class and property."""
+        # Regex to find the class and property with a color for more complex properties
+        pattern = rf"{re.escape(class_name)}\s*{{[^}}]*?{re.escape(property_name)}:\s*(.*);"
+        match = re.search(pattern, self.style_sheet, re.IGNORECASE)
+        if match:
+            value = match.group(1).strip()
+            if value:
+                return int(value)
+        return None
+
     def set_dock_margins(self, content_margins=None, layout_margins=None, object_name=None):
         """ Set content margins on dock widgets with an optional objectName filter. """
         if content_margins is None:
@@ -238,6 +249,9 @@ def apply_theme(self):
         # Init icons from theme name
         ui_util.init_ui(self.app.window)
 
+        # Emit signal
+        self.app.window.ThemeChangedSignal.emit(self)
+
     def togglePlayIcon(self, isPlay):
         """ Toggle the play icon from play to pause and back """
         if not isPlay:

src/themes/cosmic/theme.py

@@ -188,7 +188,7 @@ def __init__(self, app):
 }
 
 QPushButton:hover {
-    background-color: #283241 
+    background-color: #283241;
 }
 
 QWidget#settingsContainer {
@@ -199,6 +199,37 @@ def __init__(self, app):
     background-color: #141923;
 }
 
+QPushButton#dock-close-button {
+    image: url({PATH}themes/cosmic/images/dock-close.svg);
+    padding: 0px;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    margin: 0px;
+    margin-right: 16px;
+    width: 16px;
+    height: 16px;
+}
+QPushButton#dock-float-button {
+    image: url({PATH}themes/cosmic/images/dock-float.svg);
+    padding: 0px;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    margin: 0px;
+    width: 16px;
+    height: 16px;
+}
+
+QLabel#dock-title-label {
+    color: #91C3FF;
+    font-weight: 500;
+    padding: 16px;
+}
+
+QLabel#dock-title-handle {
+    padding-left: 16px;
+    qproperty-pixmap: url({PATH}themes/cosmic/images/dock-move.svg);
+}
+
 QDockWidget {
     background-color: #141923;
     titlebar-close-icon: url({PATH}themes/cosmic/images/dock-close.svg);
@@ -208,13 +239,6 @@ def __init__(self, app):
     padding: 16px;
 }
 
-QDockWidget::title {
-    text-align: left;
-    margin-top: 18px;
-    margin-bottom: 18px;
-    margin-left: 16px;
-}
-
 QDockWidget QWidget {
     border: none;
 }
@@ -233,26 +257,21 @@ def __init__(self, app):
     padding: 0px;
 }
 
-QDockWidget::close-button, QDockWidget::float-button {
-    icon-size: 32px;
-}
-
-QDockWidget::close-button:hover, QDockWidget::float-button:hover {
-}
-
-QDockWidget::close-button:pressed, QDockWidget::float-button:pressed {
-}
-
 QTabBar {
-    background-color: transparent;
     border: none;
+    qproperty-drawBase: 0;
+    margin: 0px;
+    padding: 0px;
 }
 
 QTabBar::tab {
+    height: 16px;
+    border: none;
     margin-left: 16px;
-    height: 32px;
+    margin-top: 16px;
+    margin-bottom: 0px;
+    padding-bottom: 0px;
     color: rgba(145, 195, 255, 0.4);
-    background-color: transparent;
 }
 
 QTabBar::tab:selected {
@@ -666,6 +685,9 @@ def apply_theme(self):
             }
         """)
 
+        # Emit signal
+        self.app.window.ThemeChangedSignal.emit(self)
+
     def togglePlayIcon(self, isPlay):
         """ Toggle the play icon from play to pause and back """
         button = self.app.window.videoToolbar.widgetForAction(self.app.window.actionPlay)