Fixing a regression which caused a window border around the tutorial. Also improving tutorial style for all themes (i.e. new arrow, larger font)

Author: jonoomph

src/themes/cosmic/theme.py

@@ -55,6 +55,23 @@ def __init__(self, app):
     padding: 20px;
 }
 
+QLabel#lblTutorialText {
+    font-size: 14px;
+}
+
+QCheckBox#checkboxMetrics {
+    font-size: 14px;
+}
+
+QWidget#tutorial QPushButton#NextTip {
+    background-color: #283241;
+    font-size: 12px;
+}
+
+QWidget#tutorial QPushButton#HideTutorial {
+    font-size: 12px;
+}
+
 
 QDialog {
     background-color: #192332;

src/windows/views/tutorial.py

@@ -44,32 +44,51 @@
 class TutorialDialog(QWidget):
     """ A customized QWidget used to instruct a user how to use a certain feature """
 
-    def paintEvent(self, event, *args):
+    def paintEvent(self, event):
         """ Custom paint event """
-        # Paint custom frame image on QWidget
         painter = QPainter(self)
         painter.setRenderHint(QPainter.Antialiasing)
-        frameColor = QColor("#53a0ed")
 
-        painter.setPen(QPen(frameColor, 2))
+        # Define rounded rectangle geometry
+        rounded_rect = QRectF(31, 0, self.width() - 31, self.height())
+        corner_radius = 10
+
+        # Clip to the rounded rectangle
+        path = QPainterPath()
+        path.addRoundedRect(rounded_rect, corner_radius, corner_radius)
+        painter.setClipPath(path)
+
+        # Fill background
+        frameColor = QColor("#53a0ed")
+        painter.setPen(QPen(frameColor, 1.2))
         painter.setBrush(self.palette().color(QPalette.Window))
-        painter.drawRoundedRect(
-            QRectF(31, 0,
-                   self.width() - 31,
-                   self.height()
-                   ),
-            10, 10)
-
-        # Paint blue triangle (if needed)
+        painter.drawRoundedRect(rounded_rect, corner_radius, corner_radius)
+
+        # Disable clipping temporarily for the arrow
+        painter.setClipping(False)
+
+        # Draw arrow if needed
         if self.arrow:
-            arrow_height = 20
+            arrow_height = 15
+            arrow_top = 35 - arrow_height
+            arrow_bottom = 35 + arrow_height
+            arrow_point = rounded_rect.topLeft().toPoint() + QPoint(-15, 35)
+            arrow_top_corner = rounded_rect.topLeft().toPoint() + QPoint(1, arrow_top)
+            arrow_bottom_corner = rounded_rect.topLeft().toPoint() + QPoint(1, arrow_bottom)
+
+            # Draw triangle (filled with the same background color as the window)
             path = QPainterPath()
-            path.moveTo(0, 35)
-            path.lineTo(31, 35 - arrow_height)
-            path.lineTo(
-                31, int((35 - arrow_height) + (arrow_height * 2)))
-            path.lineTo(0, 35)
-            painter.fillPath(path, frameColor)
+            path.moveTo(arrow_point)  # Starting point of the arrow
+            path.lineTo(arrow_top_corner)  # Top corner of the triangle
+            path.lineTo(arrow_bottom_corner)  # Bottom corner of the triangle
+            path.closeSubpath()
+            painter.fillPath(path, self.palette().color(QPalette.Window))
+
+            # Draw the triangle's borders
+            border_pen = QPen(frameColor, 1)
+            painter.setPen(border_pen)
+            painter.drawLine(arrow_point, arrow_top_corner)  # Top triangle border
+            painter.drawLine(arrow_point, arrow_bottom_corner)  # Bottom triangle border
 
     def checkbox_metrics_callback(self, state):
         """ Callback for error and anonymous usage checkbox"""
@@ -96,8 +115,13 @@ def mouseReleaseEvent(self, event):
         self.manager.next_tip(self.widget_id)
 
     def __init__(self, widget_id, text, arrow, manager, *args):
-        # Invoke parent init
-        QWidget.__init__(self, *args)
+        super().__init__(*args)
+
+        # Ensure frameless, floating behavior
+        self.setWindowFlags(Qt.FramelessWindowHint | Qt.Tool | Qt.WindowStaysOnTopHint)
+        self.setAttribute(Qt.WA_NoSystemBackground, True)
+        self.setAttribute(Qt.WA_TranslucentBackground, True)
+        self.setAttribute(Qt.WA_DeleteOnClose, True)
 
         # get translations
         app = get_app()
@@ -114,6 +138,7 @@ def __init__(self, widget_id, text, arrow, manager, *args):
 
         # Add label
         self.label = QLabel(self)
+        self.label.setObjectName("lblTutorialText")
         self.label.setText(text)
         self.label.setTextFormat(Qt.RichText)
         self.label.setWordWrap(True)
@@ -130,6 +155,7 @@ def __init__(self, widget_id, text, arrow, manager, *args):
 
             # create spinner
             checkbox_metrics = QCheckBox()
+            checkbox_metrics.setObjectName("checkboxMetrics")
             checkbox_metrics.setText(_("Yes, I would like to improve OpenShot!"))
             checkbox_metrics.setStyleSheet("margin-left: 25px; margin-bottom: 5px;")
             if s.get("send_metrics"):
@@ -151,9 +177,11 @@ def __init__(self, widget_id, text, arrow, manager, *args):
         # Create buttons
         self.btn_close_tips = QPushButton(self)
         self.btn_close_tips.setText(_("Hide Tutorial"))
+        self.btn_close_tips.setObjectName("HideTutorial")
         self.btn_close_tips.addAction(self.close_action)
 
         self.btn_next_tip = QPushButton(self)
+        self.btn_next_tip.setObjectName("NextTip")
         self.btn_next_tip.setText(_("Next"))
         self.btn_next_tip.setStyleSheet("font-weight:bold;")
 
@@ -168,11 +196,6 @@ def __init__(self, widget_id, text, arrow, manager, *args):
         self.setMinimumHeight(100)
         self.setFocusPolicy(Qt.ClickFocus)
 
-        # Make transparent
-        self.setAttribute(Qt.WA_NoSystemBackground, True)
-        self.setAttribute(Qt.WA_TranslucentBackground, True)
-        self.setAttribute(Qt.WA_DeleteOnClose, True)
-
         # Connect close action signal
         self.close_action.triggered.connect(
             functools.partial(self.manager.hide_tips, self.widget_id, True))
@@ -361,6 +384,7 @@ def __init__(self, win, *args):
         self.win = win
         self.dock = win.dockTutorial
         self.current_dialog = None
+        self.dock.setParent(None)
 
         # get translations
         app = get_app()
@@ -441,7 +465,7 @@ def __init__(self, win, *args):
         self.dock.setTitleBarWidget(QWidget())  # Prevents window decoration
         self.dock.setAttribute(Qt.WA_NoSystemBackground, True)
         self.dock.setAttribute(Qt.WA_TranslucentBackground, True)
-        self.dock.setWindowFlags(Qt.FramelessWindowHint)
+        self.dock.setWindowFlags(Qt.FramelessWindowHint | Qt.Tool | Qt.WindowStaysOnTopHint)
         self.dock.setFloating(True)
 
         # Timer for processing new tutorials