Cleanup timeline guides: increase number of guides categories(9), move guide...

Cleanup timeline guides: increase number of guides categories(9), move guide label above timeline ruler.
Related to #990 #547

src/bin/model/markerlistmodel.cpp

@@ -36,7 +36,7 @@
 #include <QJsonObject>
 #include <utility>
 
-std::array<QColor, 5> MarkerListModel::markerTypes{{Qt::red, Qt::blue, Qt::green, Qt::yellow, Qt::cyan}};
+std::array<QColor, 9> MarkerListModel::markerTypes{{QColor(QLatin1String("#9b59b6")), QColor(QLatin1String("#3daee9")),QColor(QLatin1String("#1abc9c")),QColor(QLatin1String("#1cdc9a")),QColor(QLatin1String("#c9ce3b")),QColor(QLatin1String("#fdbc4b")),QColor(QLatin1String("#f39c1f")),QColor(QLatin1String("#f47750")),QColor(QLatin1String("#da4453"))}};
 
 MarkerListModel::MarkerListModel(QString clipId, std::weak_ptr<DocUndoStack> undo_stack, QObject *parent)
     : QAbstractListModel(parent)

src/bin/model/markerlistmodel.hpp

@@ -100,7 +100,7 @@ public:
 
 
     /** @brief This describes the available markers type and their corresponding colors */
-    static std::array<QColor, 5> markerTypes;
+    static std::array<QColor, 9> markerTypes;
 
     /** @brief Returns a marker data at given pos */
     CommentedTime getMarker(const GenTime &pos, bool *ok) const;

src/definitions.cpp

@@ -113,27 +113,6 @@ int CommentedTime::markerType() const
     return m_type;
 }
 
-QColor CommentedTime::markerColor(int type)
-{
-    switch (type) {
-    case 0:
-        return Qt::red;
-        break;
-    case 1:
-        return Qt::blue;
-        break;
-    case 2:
-        return Qt::green;
-        break;
-    case 3:
-        return Qt::yellow;
-        break;
-    default:
-        return Qt::cyan;
-        break;
-    }
-}
-
 bool CommentedTime::operator>(const CommentedTime &op) const
 {
     return m_time > op.time();

src/definitions.h

@@ -245,7 +245,6 @@ public:
     void setComment(const QString &comm);
     void setMarkerType(int t);
     int markerType() const;
-    static QColor markerColor(int type);
 
     /* Implementation of > operator; Works identically as with basic types. */
     bool operator>(const CommentedTime &op) const;

src/dialogs/markerdialog.cpp

@@ -23,6 +23,8 @@
 #include "doc/kthumb.h"
 #include "kdenlivesettings.h"
 #include "mltcontroller/clipcontroller.h"
+#include "project/projectmanager.h"
+#include "bin/model/markerlistmodel.hpp"
 
 #include "kdenlive_debug.h"
 #include <QFontDatabase>
@@ -40,9 +42,10 @@ MarkerDialog::MarkerDialog(ClipController *clip, const CommentedTime &t, const T
     setWindowTitle(caption);
 
     // Set  up categories
-    for (int i = 0; i < 5; ++i) {
+    static std::array<QColor, 9> markerTypes = pCore->projectManager()->getGuideModel()->markerTypes;
+    for (int i = 0; i < 9; ++i) {
         marker_type->insertItem(i, i18n("Category %1", i));
-        marker_type->setItemData(i, CommentedTime::markerColor(i), Qt::DecorationRole);
+        marker_type->setItemData(i, markerTypes[size_t(i)], Qt::DecorationRole);
     }
     marker_type->setCurrentIndex(t.markerType());
 

src/timeline2/view/qml/Ruler.qml

@@ -35,6 +35,7 @@ Item {
     property bool showZoneLabels: false
     property bool resizeActive: false // Used to decide which mouse cursor we should display
     property var effectZones: timeline.masterEffectZones
+    property int guideLabelHeight: timeline.showMarkers ? Math.round(fontMetrics.height) : 0
     
     function adjustStepSize() {
         if (timeline.scaleFactor > 19) {
@@ -97,7 +98,83 @@ Item {
         visible: rulerRoot.workingPreview > -1
     }
     
+    // Guides
+    Repeater {
+        model: guidesModel
+        delegate:
+        Item {
+            id: guideRoot
+            Rectangle {
+                id: markerBase
+                width: 1
+                height: rulerRoot.height
+                x: model.frame * timeline.scaleFactor
+                color: model.color
+                opacity: 0.8
+                Rectangle {
+                    visible: timeline.showMarkers
+                    width: mlabel.contentWidth + 4
+                    height: guideLabelHeight
+                    anchors {
+                        top: parent.top
+                        left: parent.left
+                    }
+                    color: model.color
+                    Text {
+                        id: mlabel
+                        text: model.comment
+                        topPadding: -2
+                        leftPadding: 2
+                        rightPadding: 2
+                        font: miniFont
+                        color: activePalette.text
+                    }
+                    MouseArea {
+                        z: 10
+                        id: guideArea
+                        anchors.fill: parent
+                        acceptedButtons: Qt.LeftButton
+                        cursorShape: Qt.PointingHandCursor
+                        hoverEnabled: true
+                        property int startX
+                        drag.axis: Drag.XAxis
+                        drag.target: guideRoot
+                        onPressed: {
+                            drag.target = guideRoot
+                            startX = guideRoot.x
+                        }
+                        onReleased: {
+                            if (startX != guideRoot.x) {
+                                timeline.moveGuide(model.frame,  model.frame + guideRoot.x / timeline.scaleFactor)
+                            }
+                            drag.target = undefined
+                        }
+                        onPositionChanged: {
+                            if (pressed) {
+                                var frame = Math.round(model.frame + guideRoot.x / timeline.scaleFactor)
+                                frame = controller.suggestSnapPoint(frame, root.snapping)
+                                guideRoot.x = (frame - model.frame) * timeline.scaleFactor
+                            }
+                        }
+                        drag.smoothed: false
+                        onDoubleClicked: timeline.editGuide(model.frame)
+                        onClicked: {
+                            proxy.position = model.frame
+                        }
+                    }
+                }
+            }
+        }
+    }
+    
     // Ruler marks
+    Item {
+        anchors.top: parent.top
+        anchors.topMargin: guideLabelHeight
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: zoneHeight
+        anchors.left: parent.left
+        anchors.right: parent.right
     Repeater {
         id: tickRepeater
         model: Math.ceil(scrollView.width / rulerRoot.tickSpacing) + 2
@@ -109,7 +186,6 @@ Item {
             property bool showText: (tickRepeater.offset + index)%rulerRoot.labelMod == 0
             Rectangle {
                 anchors.bottom: parent.bottom
-                anchors.bottomMargin: zoneHeight
                 height: parent.showText ? 8 : 4
                 width: 1
                 color: activePalette.windowText
@@ -125,6 +201,16 @@ Item {
             }
         }
     }
+    }
+    
+    // Guide zone delimiter
+    Rectangle {
+        width: rulerRoot.width
+        height: 1
+        anchors.top: parent.top
+        anchors.topMargin: guideLabelHeight
+        color: activePalette.shadow
+    }
 
     // monitor zone
     Rectangle {

src/timeline2/view/qml/timeline.qml

@@ -1197,6 +1197,8 @@ Rectangle {
             onDoubleClicked: {
                 if (mouse.buttons === Qt.LeftButton && root.showSubtitles && root.activeTool === 0 && mouse.y > ruler.height && mouse.y < (ruler.height + subtitleTrack.height)) {
                     timeline.addSubtitle((scrollView.contentX + mouseX) / timeline.scaleFactor)
+                } else if (mouse.y < ruler.height) {
+                    timeline.switchGuide((scrollView.contentX + mouseX) / timeline.scaleFactor, false)
                 }
             }
             onPositionChanged: {
@@ -1341,7 +1343,7 @@ Rectangle {
                     // Non-slider scroll area for the Ruler.
                     id: rulercontainer
                     width: root.width - headerWidth
-                    height: Math.round(root.baseUnit * 2.5)
+                    height: Math.round(root.baseUnit * 2.5) + ruler.guideLabelHeight
                     contentX: scrollView.contentX
                     contentWidth: Math.max(parent.width, timeline.fullDuration * timeScale)
                     interactive: false
@@ -1816,58 +1818,6 @@ Rectangle {
                     x: model.frame * timeScale;
                     color: model.color
                 }
-                Rectangle {
-                    visible: mlabel.visible
-                    opacity: 0.7
-                    x: guideBase.x
-                    y: mlabel.y
-                    radius: 2
-                    width: mlabel.width + 4
-                    height: mlabel.height
-                    color: model.color
-                    MouseArea {
-                        z: 10
-                        anchors.fill: parent
-                        acceptedButtons: Qt.LeftButton
-                        cursorShape: Qt.PointingHandCursor
-                        hoverEnabled: true
-                        property int startX
-                        drag.axis: Drag.XAxis
-                        drag.target: guideRoot
-                        onPressed: {
-                            drag.target = guideRoot
-                            startX = guideRoot.x
-                        }
-                        onReleased: {
-                            if (startX != guideRoot.x) {
-                                timeline.moveGuide(model.frame,  model.frame + guideRoot.x / timeline.scaleFactor)
-                            }
-                            drag.target = undefined
-                        }
-                        onPositionChanged: {
-                            if (pressed) {
-                                var frame = Math.round(model.frame + guideRoot.x / timeline.scaleFactor)
-                                frame = controller.suggestSnapPoint(frame, root.snapping)
-                                guideRoot.x = (frame - model.frame) * timeline.scaleFactor
-                            }
-                        }
-                        drag.smoothed: false
-                        onDoubleClicked: {
-                            timeline.editGuide(model.frame)
-                            drag.target = undefined
-                        }
-                        onClicked: proxy.position = model.frame
-                    }
-                }
-                Text {
-                    id: mlabel
-                    visible: timeline.showMarkers
-                    text: model.comment
-                    font: miniFont
-                    x: guideBase.x + 2
-                    y: scrollView.contentY
-                    color: 'white'
-                }
             }
         }