Fix UI glitches in the youtube example

The MouseArea that is responsible for showing and hiding the thumbnail
list should fill the area showing the title of the current video and
it should be sufficiently big.
This area somehow ended up being a narrow stripe detached from the top
edge of the content.

Change-Id: Id370584edc7d780e957fa7b4457518ad6f854740
Reviewed-by: Tor Arne Vestbø <tor.arne.vestbo@digia.com>

1 files changed, 16 insertions, 19 deletions

diff --git a/examples/qml/youtubeview/youtubeview.qml b/examples/qml/youtubeview/youtubeview.qml
index fe2bf24..4b1dacf 100644
--- a/examples/qml/youtubeview/youtubeview.qml
+++ b/examples/qml/youtubeview/youtubeview.qml
@@ -158,8 +158,7 @@ Rectangle {
 
             State {
                 name: "hidden"
-                PropertyChanges { target: panel; color: "gray"; opacity: 0.2; y: -height + container.padding }
-                PropertyChanges { target: showListArea; visible: true }
+                PropertyChanges { target: panel; color: "gray"; opacity: 0.2; y: -height }
             }
         ]
 
@@ -170,21 +169,6 @@ Rectangle {
             onTriggered: panel.state = "hidden"
         }
 
-        MouseArea {
-            id: showListArea
-            height: container.padding
-            anchors {
-                bottom: parent.bottom
-                left: parent.left
-                right: parent.right
-            }
-            onPressed: {
-                panel.state = "list"
-                if (currentVideo.status == videoStatus.playing)
-                    hideTimer.restart()
-            }
-        }
-
         ListView {
             id: listView
             orientation: "Horizontal"
@@ -395,9 +379,9 @@ Rectangle {
     }
 
     Rectangle {
-        height: 10
+        height: container.padding
         color: "black"
-        opacity: (panel.state == "hidden") ? 0 : 0.8
+        opacity: (panel.state == "hidden") ? 0.2 : 0.8
 
         Behavior on opacity { NumberAnimation { duration: 200 } }
 
@@ -420,6 +404,19 @@ Rectangle {
                     return currentVideo.title
             }
         }
+
+        MouseArea {
+            // Responsible for showing and hiding the thumbnail list.
+            anchors.fill: parent
+            onPressed: {
+                if (panel.state != "list") {
+                    panel.state = "list"
+                    if (currentVideo.status == videoStatus.playing)
+                        hideTimer.restart()
+                } else
+                    panel.state = "hidden"
+            }
+        }
     }
 
     XmlListModel {