Add missing background for effect selection list.

Also remove highlight and fix button text color.
Make Menu animation faster.

Task-number: QTBUG-38121
Change-Id: I7d5868d370a8dc7925cee5e694ae043970c569d9
Reviewed-by: Sami Makkonen <sami.makkonen@digia.com>
Reviewed-by: Thomas Hartmann <Thomas.Hartmann@digia.com>

examples/multimedia/video/qmlvideofx/qml/qmlvideofx/Button.qml

@@ -60,7 +60,6 @@ Rectangle {
     Rectangle {
         anchors { fill: parent; margins: 1 }
         color: mouseArea.pressed ? bgColorSelected : bgColor
-        radius: 0.1 * height
 
         Text {
             id: text
@@ -68,7 +67,7 @@ Rectangle {
             text: root.text
             anchors { fill: parent; margins: scaledMargin }
             font.pixelSize: fontSize
-            color: mouseArea.pressed ? bgColor : textColor
+            color: textColor
             horizontalAlignment: Text.AlignLeft
             verticalAlignment: Text.AlignVCenter
         }

examples/multimedia/video/qmlvideofx/qml/qmlvideofx/Main.qml

@@ -80,7 +80,7 @@ Rectangle {
         id: parameterPanel
         anchors {
             left: parent.left
-            right: listview.left
+            right: effectName.left
             bottom: parent.bottom
             margins: scaledMargin
             leftMargin: scaledMargin + itemHeight
@@ -88,46 +88,50 @@ Rectangle {
         gripSize: d.gripSize
         height: root.itemHeight * 2.5
         width: root.itemWidth * 3
-
     }
 
-
     Button {
         id: effectName
         anchors {
                     right: parent.right
                     bottom: perfHolder.top
-                    top: content.bottom
                     margins: scaledMargin
                 }
 
         text: "No effect"
         width: itemWidth * 2
+        height: itemHeight
         onClicked: {
             effectName.visible = false
             listview.visible = true
+            lvbg.visible = true
         }
         color: "#303030"
     }
 
-
-        ListView {
-            id: listview
+    Rectangle {
+        id: lvbg
         width: itemWidth * 2
+        color: "black"
+        opacity: 0.8
+        visible: false
+
         anchors {
                     right: parent.right
                     bottom: perfHolder.top
                     top: parent.top
                     margins: scaledMargin
                 }
+
+        ListView {
+            id: listview
+            width: itemWidth * 2
+            anchors.fill: parent
             visible: false
 
             model: EffectSelectionList {}
             delegate: effectDelegate
 
-            highlight: Rectangle { color: "#14aaff"; radius: 5 }
-            highlightFollowsCurrentItem: true
-            highlightRangeMode: ListView.StrictlyEnforceRange
             clip: true
             focus: true
 
@@ -139,6 +143,7 @@ Rectangle {
                     onClicked: {
                         content.effectSource = source
                         listview.visible = false
+                        lvbg.visible = false
                         effectName.text = name
                         effectName.visible = true
                         parameterPanel.model = content.effect.parameters
@@ -147,6 +152,7 @@ Rectangle {
                 }
             }
         }
+    }
 
     Rectangle {
         id: perfHolder
@@ -213,8 +219,8 @@ Rectangle {
 
         transitions: [
             Transition {
-                NumberAnimation { target: fileOpen; property: "width"; duration: 400 }
-                NumberAnimation { target: fileOpen; property: "opacity"; duration: 400 }
+                NumberAnimation { target: fileOpen; property: "width"; duration: 100 }
+                NumberAnimation { target: fileOpen; property: "opacity"; duration: 100 }
             }
         ]
     }