Replace start button with glowing animation

Task-number: QTBUG-120617
Change-Id: I807a8e686f7aa84f6274c0ebc1270310a1808c5e
Reviewed-by: Samuli Piippo <samuli.piippo@qt.io>

6 files changed, 115 insertions, 24 deletions

diff --git a/QtLauncher/CMakeLists.txt b/QtLauncher/CMakeLists.txt
index b0a40a2..a2f4871 100644
--- a/QtLauncher/CMakeLists.txt
+++ b/QtLauncher/CMakeLists.txt
@@ -36,6 +36,9 @@ set(images
     "images/backImg.jpg"
     "images/QtCorner.png"
     "images/glow.png"
+    "images/glow_border.png"
+    "images/glow_border2.png"
+    "images/glow_corner.png"
 )
 
 set(icons
diff --git a/QtLauncher/CornerFrameImage.qml b/QtLauncher/CornerFrameImage.qml
index 31b2d8f..796ff0b 100644
--- a/QtLauncher/CornerFrameImage.qml
+++ b/QtLauncher/CornerFrameImage.qml
@@ -10,6 +10,105 @@ Item {
     onWidthChanged: contentRect.openChanged()
     onHeightChanged: contentRect.openChanged()
 
+    Item {
+        id: glowItem
+        anchors.fill: contentRect
+        visible: contentRect.open
+
+        SequentialAnimation on opacity {
+            running: glowItem.visible
+            loops: SequentialAnimation.Infinite
+            OpacityAnimator {
+                from: 0
+                to: .5
+                duration: 2000
+                easing.type: Easing.InOutSine
+            }
+            OpacityAnimator {
+                from: .5
+                to: .0
+                duration: 2000
+                easing.type: Easing.InOutSine
+            }
+            PauseAnimation {
+                duration: 1000
+            }
+        }
+
+        Image {
+            id: borderCorner1
+            source: "images/glow_corner.png"
+            anchors.right: glowItem.left
+            anchors.bottom: glowItem.top
+            width: pageMargin * 1.5
+            height: width
+        }
+        Image {
+            id: border1
+            source: "images/glow_border.png"
+            anchors.left: borderCorner1.right
+            anchors.right: borderCorner2.left
+            anchors.bottom: glowItem.top
+            height: pageMargin * 1.5
+        }
+        Image {
+            id: borderCorner2
+            source: "images/glow_corner.png"
+            anchors.left: glowItem.right
+            anchors.bottom: glowItem.top
+            width: pageMargin * 1.5
+            height: width
+            mirror: true
+        }
+        Image {
+            id: border2
+            source: "images/glow_border2.png"
+            anchors.left: glowItem.right
+            anchors.top: borderCorner2.bottom
+            anchors.bottom: borderCorner3.top
+            mirror: true
+            width: pageMargin * 1.5
+        }
+        Image {
+            id: border3
+            source: "images/glow_border2.png"
+            anchors.right: glowItem.left
+            anchors.top: borderCorner1.bottom
+            anchors.bottom: borderCorner3.top
+            width: pageMargin * 1.5
+        }
+        Image {
+            id: borderCorner3
+            source: "images/glow_corner.png"
+            anchors.right: glowItem.left
+            anchors.top: glowItem.bottom
+            mirrorVertically: true
+            width: pageMargin * 1.5
+            height: width
+        }
+
+        Image {
+            id: border4
+            source: "images/glow_border.png"
+            anchors.left: borderCorner3.right
+            anchors.right: borderCorner4.left
+            anchors.top: glowItem.bottom
+            mirrorVertically: true
+            height: pageMargin * 1.5
+        }
+
+        Image {
+            id: borderCorner4
+            source: "images/glow_corner.png"
+            anchors.left: glowItem.right
+            anchors.top: glowItem.bottom
+            mirror: true
+            mirrorVertically: true
+            width: pageMargin * 1.5
+            height: width
+        }
+    }
+
     Image {
         id: contentRect
         width: -root.width * .006
@@ -19,6 +118,13 @@ Item {
         property bool open: false
         property string newImageSource: ""
 
+        Rectangle {
+            anchors.fill: parent
+            color: "transparent"
+            border.color: ViewSettings.neon
+            border.width: 1
+        }
+
         onNewImageSourceChanged: {
             if (contentRect.open && contentRect.newImageSource) {
                 changeImageAnimation.restart()
diff --git a/QtLauncher/DetailView.qml b/QtLauncher/DetailView.qml
index 7a1ddf0..2c750ec 100644
--- a/QtLauncher/DetailView.qml
+++ b/QtLauncher/DetailView.qml
@@ -25,6 +25,11 @@ Item {
             anchors.right: parent.right
             height: parent.height
             width: parent.width * 0.5
+
+            MouseArea {
+                anchors.fill: parent
+                onClicked: detailRoot.appsModel.launchFromIndex(thumbList.currentIndex)
+            }
         }
 
         Flickable {
@@ -32,7 +37,7 @@ Item {
             anchors.left: parent.left
             anchors.right: largeImg.left
             anchors.top: parent.top
-            anchors.bottom: startButton.top
+            anchors.bottom: parent.bottom
             anchors.bottomMargin: detailRoot.pageMargin * 0.5
             anchors.rightMargin: detailRoot.pageMargin
             contentHeight: descriptionHolder.height
@@ -77,29 +82,6 @@ Item {
                 }
             }
         }
-
-        Image {
-            id: startButton
-            height: detailInformation.height * 0.14
-            width: height * 3
-            sourceSize: Qt.size(width,height)
-            anchors.left: parent.left
-            anchors.bottom: parent.bottom
-            anchors.margins: detailRoot.pageMargin * 0.5
-            source : "image://QtButtonImage/10/%1/%1".arg(ViewSettings.buttonGreenColor)
-
-            Text {
-                anchors.centerIn: parent
-                text: qsTr("Start")
-                color: "white"
-                font.pixelSize: parent.height * .5
-            }
-
-            MouseArea {
-                anchors.fill: parent
-                onClicked: detailRoot.appsModel.launchFromIndex(thumbList.currentIndex)
-            }
-        }
     }
 
     Rectangle {
diff --git a/QtLauncher/images/glow_border.png b/QtLauncher/images/glow_border.png
new file mode 100644
index 0000000..ef1a026
--- /dev/null
+++ b/QtLauncher/images/glow_border.png
diff --git a/QtLauncher/images/glow_border2.png b/QtLauncher/images/glow_border2.png
new file mode 100644
index 0000000..877d447
--- /dev/null
+++ b/QtLauncher/images/glow_border2.png
diff --git a/QtLauncher/images/glow_corner.png b/QtLauncher/images/glow_corner.png
new file mode 100644
index 0000000..e651f17
--- /dev/null
+++ b/QtLauncher/images/glow_corner.png