summaryrefslogtreecommitdiffstats
path: root/examples
diff options
context:
space:
mode:
authorRobin Burchell <robin.burchell@crimson.no>2017-05-18 01:01:01 +0200
committerRobin Burchell <robin.burchell@crimson.no>2017-05-20 20:32:47 +0000
commite8f36458276cc989dc5f0c33ec27c90fad15137b (patch)
treebc08ad1bba162eb1d7bb5a2cd548334d80a5fe3a /examples
parenta5dad4e78ff78777eafbae723442db4e9da2d6ff (diff)
LauncherList: Add some simple animations to help it look prettier
Nothing over the top, just some page animations on enter/exit. Change-Id: I822efe3e25928ff7797dd2911b9d2ce8dce00936 Reviewed-by: Gunnar Sletta <gunnar@crimson.no> Reviewed-by: Shawn Rutledge <shawn.rutledge@qt.io>
Diffstat (limited to 'examples')
-rw-r--r--examples/quick/shared/LauncherList.qml160
-rw-r--r--examples/quick/shared/SimpleLauncherDelegate.qml4
2 files changed, 128 insertions, 36 deletions
diff --git a/examples/quick/shared/LauncherList.qml b/examples/quick/shared/LauncherList.qml
index 6878cf01f2..ba9ee6c5d2 100644
--- a/examples/quick/shared/LauncherList.qml
+++ b/examples/quick/shared/LauncherList.qml
@@ -1,5 +1,6 @@
/****************************************************************************
**
+** Copyright (C) 2017 Crimson AS <info@crimson.no>
** Copyright (C) 2015 The Qt Company Ltd.
** Contact: http://www.qt.io/licensing/
**
@@ -40,6 +41,8 @@
import QtQuick 2.0
Rectangle {
+ property int activePageCount: 0
+
//model is a list of {"name":"somename", "url":"file:///some/url/mainfile.qml"}
//function used to add to model A) to enforce scheme B) to allow Qt.resolveUrl in url assignments
@@ -48,48 +51,138 @@ Rectangle {
{
myModel.append({"name":name, "description":desc, "url":url})
}
- function hideExample()
- {
- ei.visible = false;
- }
- ListView {
- clip: true
- delegate: SimpleLauncherDelegate{exampleItem: ei}
- model: ListModel {id:myModel}
+ // The container rectangle here is used to give a nice "feel" when
+ // transitioning into an example.
+ Rectangle {
anchors.fill: parent
+ color: "black"
+
+ ListView {
+ id: launcherList
+ clip: true
+ delegate: SimpleLauncherDelegate{
+ onClicked: {
+ var page = pageComponent.createObject(pageContainer, { exampleUrl: url })
+ page.show()
+ }
+ }
+ model: ListModel {id:myModel}
+ anchors.fill: parent
+ enabled: opacity == 1.0
+ }
}
Item {
- id: ei
- visible: false
- clip: true
- property url exampleUrl
- onExampleUrlChanged: visible = (exampleUrl == '' ? false : true); //Setting exampleUrl automatically shows example
+ id: pageContainer
anchors.fill: parent
- anchors.bottomMargin: 40
+ }
+
+ Component {
+ id: pageComponent
Rectangle {
- id: bg
- anchors.fill: parent
+ id: page
+ clip: true
+ property url exampleUrl
+ width: parent.width
+ height: parent.height - bar.height
color: "white"
- }
- MouseArea{
- anchors.fill: parent
- enabled: ei.visible
- //Eats mouse events
- }
- Loader{
- focus: true
- source: ei.exampleUrl
- anchors.fill: parent
+ MouseArea{
+ //Eats mouse events
+ anchors.fill: parent
+ }
+ Loader{
+ focus: true
+ source: parent.exampleUrl
+ anchors.fill: parent
+ }
+
+ x: -width
+
+ function show() {
+ showAnim.start()
+ }
+
+ function exit() {
+ exitAnim.start()
+ }
+
+ ParallelAnimation {
+ id: showAnim
+ ScriptAction {
+ script: activePageCount++
+ }
+ NumberAnimation {
+ target: launcherList
+ property: "opacity"
+ from: 1.0
+ to: 0.0
+ duration: 500
+ }
+ NumberAnimation {
+ target: launcherList
+ property: "scale"
+ from: 1.0
+ to: 0.0
+ duration: 500
+ }
+ NumberAnimation {
+ target: page
+ property: "x"
+ from: -page.width
+ to: 0
+ duration: 300
+ }
+ }
+ SequentialAnimation {
+ id: exitAnim
+
+ ScriptAction {
+ script: activePageCount--
+ }
+
+ ParallelAnimation {
+ NumberAnimation {
+ target: launcherList
+ property: "opacity"
+ from: 0.0
+ to: 1.0
+ duration: 300
+ }
+ NumberAnimation {
+ target: launcherList
+ property: "scale"
+ from: 0.0
+ to: 1.0
+ duration: 300
+ }
+ NumberAnimation {
+ target: page
+ property: "x"
+ from: 0
+ to: -page.width
+ duration: 300
+ }
+ }
+
+ ScriptAction {
+ script: page.destroy()
+ }
+ }
}
}
Rectangle {
id: bar
- visible: ei.visible
+ visible: height > 0
anchors.bottom: parent.bottom
width: parent.width
- height: 40
+ height: activePageCount > 0 ? 40 : 0
+
+ Behavior on height {
+ NumberAnimation {
+ duration: 300
+ }
+ }
Rectangle {
height: 1
@@ -113,12 +206,6 @@ Rectangle {
GradientStop { position: 1 ; color: "#ccc" }
}
- MouseArea{
- anchors.fill: parent
- enabled: ei.visible
- //Eats mouse events
- }
-
Image {
id: back
source: "images/back.png"
@@ -134,7 +221,10 @@ Rectangle {
width: 38
height: 31
anchors.verticalCenterOffset: -1
- onClicked: ei.exampleUrl = ""
+ enabled: activePageCount > 0
+ onClicked: {
+ pageContainer.children[pageContainer.children.length - 1].exit()
+ }
Rectangle {
anchors.fill: parent
opacity: mouse.pressed ? 1 : 0
diff --git a/examples/quick/shared/SimpleLauncherDelegate.qml b/examples/quick/shared/SimpleLauncherDelegate.qml
index 885afdb502..a9f7cb9f83 100644
--- a/examples/quick/shared/SimpleLauncherDelegate.qml
+++ b/examples/quick/shared/SimpleLauncherDelegate.qml
@@ -45,6 +45,8 @@ Rectangle {
width: ListView.view.width
height: button.implicitHeight + 22
+ signal clicked()
+
gradient: Gradient {
GradientStop {
position: 0
@@ -81,7 +83,7 @@ Rectangle {
MouseArea {
id: mouseArea
anchors.fill: parent
- onClicked: exampleItem.exampleUrl = url
+ onClicked: container.clicked()
hoverEnabled: true
}