From 0bed3c6be22483207ab6dd13ad1d249af324c60b Mon Sep 17 00:00:00 2001 From: Kimmo Ollila Date: Fri, 19 Jan 2024 10:23:30 +0200 Subject: Replace start button with glowing animation Task-number: QTBUG-120617 Change-Id: I807a8e686f7aa84f6274c0ebc1270310a1808c5e Reviewed-by: Samuli Piippo --- QtLauncher/CMakeLists.txt | 3 ++ QtLauncher/CornerFrameImage.qml | 106 +++++++++++++++++++++++++++++++++++++ QtLauncher/DetailView.qml | 30 +++-------- QtLauncher/images/glow_border.png | Bin 0 -> 339 bytes QtLauncher/images/glow_border2.png | Bin 0 -> 309 bytes QtLauncher/images/glow_corner.png | Bin 0 -> 1084 bytes 6 files changed, 115 insertions(+), 24 deletions(-) create mode 100644 QtLauncher/images/glow_border.png create mode 100644 QtLauncher/images/glow_border2.png create mode 100644 QtLauncher/images/glow_corner.png 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 Binary files /dev/null and b/QtLauncher/images/glow_border.png differ diff --git a/QtLauncher/images/glow_border2.png b/QtLauncher/images/glow_border2.png new file mode 100644 index 0000000..877d447 Binary files /dev/null and b/QtLauncher/images/glow_border2.png differ diff --git a/QtLauncher/images/glow_corner.png b/QtLauncher/images/glow_corner.png new file mode 100644 index 0000000..e651f17 Binary files /dev/null and b/QtLauncher/images/glow_corner.png differ -- cgit v1.2.3