[vlmc-devel] Clip.qml: Show effects on a single item

[Yikai Lu]

vlmc | branch: master | Yikai Lu <luyikei.qmltu at gmail.com> | Sun Jul 31 15:38:06 2016 +0900| [87a8af7f51863908e87a8149ab6c78d89634d86a] | committer: Yikai Lu

Clip.qml: Show effects on a single item

> https://code.videolan.org/videolan/vlmc/commit/87a8af7f51863908e87a8149ab6c78d89634d86a
---

 src/Gui/timeline/Clip.qml | 96 +++++++++++++++++++++++++++++++----------------
 1 file changed, 63 insertions(+), 33 deletions(-)

diff --git a/src/Gui/timeline/Clip.qml b/src/Gui/timeline/Clip.qml
index be19783..8afa97a 100644
--- a/src/Gui/timeline/Clip.qml
+++ b/src/Gui/timeline/Clip.qml
@@ -67,10 +67,13 @@ Rectangle {
         if ( !clipInfo["filters"] )
             return;
 
-        effects.clear();
+        var str = "";
         for ( var i = 0; i < clipInfo["filters"].length; ++i ) {
-            effects.append( clipInfo["filters"][i] );
+            str += clipInfo["filters"][i]["identifier"];
+            if ( i < clipInfo["filters"].length - 1 )
+                str += ", "
         }
+        effectsItem.text = str;
     }
 
     onXChanged: {
@@ -216,37 +219,6 @@ Rectangle {
         wrapMode: Text.Wrap
     }
 
-    ListView {
-        id: effectsView
-        property int effectHeight: 5
-        anchors.bottom: clip.bottom
-        width: clip.width
-        height: effectHeight * count
-        model: effects
-        delegate: Rectangle {
-            width: ftop( model.length )
-            x: ftop( model.begin )
-            height: effectsView.effectHeight
-            radius: 2
-            gradient: Gradient {
-                GradientStop {
-                    position: 0.00;
-                    color: "#24245c";
-                }
-                GradientStop {
-                    position: 1.00;
-                    color: "#200f3c";
-                }
-            }
-            Text {
-                text: model.identifier
-                color: "white"
-                font.pointSize: parent.height
-                anchors.centerIn: parent
-            }
-        }
-    }
-
     MouseArea {
         id: dragArea
         anchors.fill: parent
@@ -347,6 +319,64 @@ Rectangle {
         }
     }
 
+    Rectangle {
+        id: effectsItem
+        height: clip.height / 3
+        width: clip.width
+        anchors.bottom: clip.bottom
+        visible: effectsTextItem.text ? true : false
+        radius: 2
+        gradient: Gradient {
+            GradientStop {
+                id: eGStop1
+                position: 0.00;
+            }
+            GradientStop {
+                id: eGStop2
+                position: 1.00;
+            }
+        }
+
+        property alias text: effectsTextItem.text
+
+        Text {
+            id: effectsTextItem
+            width: clip.width
+            color: "white"
+            horizontalAlignment: Text.AlignHCenter
+            font.pointSize: parent.height - 2
+            anchors.centerIn: parent
+            elide: Text.ElideRight
+        }
+
+        MouseArea {
+            id: effectsItemMouseArea
+            anchors.fill: parent
+            hoverEnabled: true
+            onClicked: {
+                timeline.showEffectStack( uuid );
+            }
+        }
+
+        states: [
+            State {
+                when: effectsItemMouseArea.pressed
+                PropertyChanges { target: eGStop1; color: "#220f3c" }
+                PropertyChanges { target: eGStop2; color: "#24245c" }
+            },
+            State {
+                when: effectsItemMouseArea.containsMouse
+                PropertyChanges { target: eGStop1; color: "#46469F" }
+                PropertyChanges { target: eGStop2; color: "#32215a" }
+            },
+            State {
+                when: !effectsItemMouseArea.containsMouse
+                PropertyChanges { target: eGStop1; color: "#24245c" }
+                PropertyChanges { target: eGStop2; color: "#200f3c" }
+            }
+        ]
+    }
+
     ClipContextMenu {
         id: clipContextMenu
         clip: clip