git.iko.soy/unity8
on 5578813 help sign in
unity8/qml/Tutorial/TutorialBottom.qml
123 lines 5.0 kB history raw
1/*
2 * Copyright (C) 2015 Canonical, Ltd.
3 *
4 * This program is free software; you can redistribute it and/or modify
5 * it under the terms of the GNU General Public License as published by
6 * the Free Software Foundation; version 3.
7 *
8 * This program is distributed in the hope that it will be useful,
9 * but WITHOUT ANY WARRANTY; without even the implied warranty of
10 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11 * GNU General Public License for more details.
12 *
13 * You should have received a copy of the GNU General Public License
14 * along with this program. If not, see <http://www.gnu.org/licenses/>.
15 */
17import QtQuick 2.4
18import Ubuntu.Components 1.3
19import Ubuntu.Gestures 0.1
20import Unity.Application 0.1
22TutorialPage {
23 id: root
25 property string usageScenario
26 property var stage
27 property var application: null
29 // This page is a bit fragile. It relies on knowing how the app beneath
30 // the shell will react to a drag. What we do is put a monitor-only DDA
31 // at the bottom of the page (so that we know when the drag is finished)
32 // and pass the events on through to the app. Thus, it sees the drag and
33 // brings its bottom edge up.
34 //
35 // Unfortunately, each app is on its own when implementing the bottom edge
36 // drag. Most share copied-and-pasted code right now, but they will
37 // eventually consolidate on a version of DirectionalDragArea that will
38 // land in the SDK (making our guessing job easier). Though, also in the
39 // future, this whole bottom tutorial component will also land in the SDK,
40 // rendering our version here obsolete.
41 //
42 // Anyway, for the moment, we base our guesses on the copied-and-pasted
43 // code used in several of the core apps and only bring this component
44 // up if we are in those core apps.
46 function canShowForApp(appId) {
47 return appId === "address-book-app" ||
48 appId === "com.ubuntu.calculator_calculator" ||
49 appId === "com.ubuntu.clock_clock" ||
50 appId === "dialer-app" ||
51 appId === "messaging-app";
52 }
54 readonly property real mainStageWidth: stage.width - sideStageWidth
55 readonly property real sideStageWidth: root.usageScenario === "tablet" && stage.sideStageVisible ?
56 stage.sideStageWidth : 0
57 readonly property bool isMainStageApp: usageScenario !== "tablet" ||
58 application.stage === ApplicationInfoInterface.MainStage
59 readonly property real dragAreaHeight: units.gu(3) // based on PageWithBottomEdge.qml
60 readonly property real targetDistance: height * 0.2 + dragAreaHeight // based on PageWithBottomEdge.qml
62 opacityOverride: dragArea.dragging ? 1 - (-dragArea.distance / targetDistance) : 1
64 mouseArea {
65 anchors.bottomMargin: root.dragAreaHeight
66 }
68 background {
69 sourceSize.height: 1080
70 sourceSize.width: 1916
71 source: Qt.resolvedUrl("graphics/background2.png")
72 rotation: 180
73 }
75 arrow {
76 anchors.bottom: root.bottom
77 anchors.bottomMargin: units.gu(4)
78 anchors.horizontalCenter: label.horizontalCenter
79 anchors.horizontalCenterOffset: -(label.width - label.contentWidth) / 2
80 rotation: -90
81 }
83 label {
84 text: i18n.tr("Swipe from the bottom edge to manage the app")
85 anchors.bottom: arrow.top
86 anchors.bottomMargin: units.gu(3)
87 anchors.left: root.left
88 anchors.leftMargin: (label.width - label.contentWidth) / 2 + sideMargin +
89 (isMainStageApp ? 0 : mainStageWidth)
90 width: (isMainStageApp ? mainStageWidth : sideStageWidth) - sideMargin * 2
92 readonly property real sideMargin: units.gu(4)
93 }
95 // Watches drag events but does not intercept them, so that the app beneath
96 // will still drag the bottom edge up.
97 DirectionalDragArea {
98 id: dragArea
99 monitorOnly: true
100 direction: Direction.Upwards
101 anchors.left: parent.left
102 anchors.right: parent.right
103 anchors.bottom: parent.bottom
104 height: root.dragAreaHeight
106 // Apps currently don't use DDA. DDA will stop a gesture if
107 // horizontal motion is detected. But our apps won't. So turn off
108 // that gesture cleverness on our part, it will only get us out of sync.
109 immediateRecognition: true
110 }
112 MouseArea {
113 // A second mouse area because in tablet mode, we only want to let the
114 // user drag up on one of the stages, not both. So we want to cover
115 // the second bottom edge with an event eater.
116 enabled: root.usageScenario === "tablet"
117 height: root.dragAreaHeight
118 width: isMainStageApp ? sideStageWidth : mainStageWidth
119 anchors.bottom: parent.bottom
120 anchors.left: isMainStageApp ? undefined : parent.left
121 anchors.right: isMainStageApp ? parent.right : undefined
122 }