on cb45943 help sign in
unity8/Components/EdgeDemoOverlay.qml
271 lines 8.3 kB history raw
1/*
2 * Copyright (C) 2013 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 Powerd 0.1
18import QtQuick 2.0
19import QtGraphicalEffects 1.0
20import Unity.Application 0.1
21import Ubuntu.Components 0.1
23Showable {
24 id: overlay
26 /*
27 * Valid values are "left", "right", "top", "bottom", or "none".
28 */
29 property string edge: "top"
31 /*
32 * This is the header displayed, like "Right edge".
33 */
34 property alias title: titleLabel.text
36 /*
37 * This is the block of text displayed below the header.
38 */
39 property alias text: textLabel.text
41 /*
42 * This is the text for the skip button.
43 */
44 property alias skipText: skipLabel.text
46 /*
47 * This is the visible status of the skip button.
48 */
49 property alias showSkip: skipLabel.visible
51 /*
52 * Whether this demo is running currently.
53 */
54 readonly property bool active: available && visible
56 /*
57 * Whether animations are paused.
58 */
59 property alias paused: wholeAnimation.paused
61 /*
62 * Whether animations are running.
63 */
64 readonly property alias running: wholeAnimation.running
66 signal skip()
68 function doSkip() {
69 d.skipOnHide = true;
70 hide();
71 }
73 function hideNow() {
74 overlay.visible = false;
75 overlay.available = false;
76 if (d.skipOnHide) {
77 overlay.skip();
78 }
79 }
81 showAnimation: StandardAnimation {
82 property: "opacity"
83 to: 1
84 onRunningChanged: if (running) overlay.visible = true
85 }
86 hideAnimation: StandardAnimation {
87 property: "opacity"
88 to: 0
89 duration: UbuntuAnimation.BriskDuration
90 onRunningChanged: if (!running) overlay.hideNow()
91 }
93 QtObject {
94 id: d
95 property bool skipOnHide: false
96 property int edgeMargin: units.gu(4)
97 }
99 Rectangle {
100 objectName: "backgroundShade"
102 anchors.fill: parent
103 color: "black"
104 opacity: 0.8
105 visible: overlay.active
107 MouseArea {
108 anchors.fill: parent
109 enabled: overlay.edge == "none" && overlay.opacity == 1.0
110 onClicked: overlay.doSkip()
111 }
112 }
114 Item {
115 id: hintGroup
116 x: 0
117 y: 0
118 width: parent.width
119 height: parent.height
120 visible: overlay.active
122 Column {
123 id: labelGroup
124 spacing: units.gu(3)
126 anchors {
127 margins: d.edgeMargin
128 left: parent.left
129 top: overlay.edge == "bottom" ? undefined : parent.top
130 bottom: overlay.edge == "bottom" ? parent.bottom : undefined
131 }
133 Label {
134 id: titleLabel
135 fontSize: "x-large"
136 width: units.gu(25)
137 wrapMode: Text.WordWrap
138 }
140 Label {
141 id: textLabel
142 width: units.gu(25)
143 wrapMode: Text.WordWrap
144 }
146 Label {
147 id: skipLabel
148 objectName: "skipLabel"
149 text: i18n.tr("Skip intro")
150 color: UbuntuColors.orange
151 fontSize: "small"
153 Icon {
154 anchors.left: parent.right
155 anchors.verticalCenter: parent.verticalCenter
156 height: units.dp(12)
157 width: units.dp(12)
158 name: "chevron"
159 color: UbuntuColors.orange
160 }
162 MouseArea {
163 // Make clickable area bigger than just the link because
164 // otherwise, the edge demo will feel hard to dismiss.
165 anchors.fill: parent
166 anchors.margins: -units.gu(5)
167 onClicked: overlay.doSkip()
168 }
169 }
170 }
172 LinearGradient {
173 id: edgeHint
174 property int size: 1
175 cached: false
176 visible: overlay.edge != "none"
177 gradient: Gradient {
178 GradientStop {
179 position: 0.0
180 color: Qt.hsla(16.0/360.0, 0.83, 0.47, 0.4) // UbuntuColors.orange, but transparent
181 }
182 GradientStop {
183 position: 1.0
184 color: "transparent"
185 }
186 }
187 anchors.fill: parent
188 start: {
189 if (overlay.edge == "right") {
190 return Qt.point(width, 0);
191 } else if (overlay.edge == "left") {
192 return Qt.point(0, 0);
193 } else if (overlay.edge == "top") {
194 return Qt.point(0, 0);
195 } else {
196 return Qt.point(0, height);
197 }
198 }
199 end: {
200 if (overlay.edge == "right") {
201 return Qt.point(width - size, 0);
202 } else if (overlay.edge == "left") {
203 return Qt.point(size, 0);
204 } else if (overlay.edge == "top") {
205 return Qt.point(0, size);
206 } else {
207 return Qt.point(0, height - size);
208 }
209 }
210 }
211 }
213 SequentialAnimation {
214 id: wholeAnimation
215 objectName: "wholeAnimation"
216 running: overlay.active
218 ParallelAnimation {
219 id: fadeInAnimation
221 StandardAnimation {
222 target: labelGroup
223 property: {
224 if (overlay.edge == "right" || overlay.edge == "left") {
225 return "anchors.leftMargin";
226 } else if (overlay.edge == "bottom") {
227 return "anchors.bottomMargin";
228 } else {
229 return "anchors.topMargin";
230 }
231 }
232 from: {
233 if (overlay.edge == "right") {
234 return d.edgeMargin + units.gu(3)
235 } else {
236 return d.edgeMargin - units.gu(3)
237 }
238 }
239 to: d.edgeMargin
240 duration: overlay.edge == "none" ? 0 : UbuntuAnimation.SleepyDuration
241 }
242 StandardAnimation {
243 target: overlay
244 property: "opacity"
245 from: 0.0
246 to: 1.0
247 duration: UbuntuAnimation.SleepyDuration
248 }
249 }
251 SequentialAnimation {
252 id: hintAnimation
253 loops: Animation.Infinite
254 property string prop: (overlay.edge == "left" || overlay.edge == "right") ? "x" : "y"
255 property double endVal: units.dp(5) * ((overlay.edge == "left" || overlay.edge == "top") ? 1 : -1)
256 property double maxGlow: units.dp(20)
257 property int duration: overlay.edge == "none" ? 0 : UbuntuAnimation.SleepyDuration
259 ParallelAnimation {
260 StandardAnimation { target: hintGroup; property: hintAnimation.prop; from: 0; to: hintAnimation.endVal; duration: hintAnimation.duration }
261 StandardAnimation { target: edgeHint; property: "size"; from: 1; to: hintAnimation.maxGlow; duration: hintAnimation.duration }
262 }
264 // Undo the above
265 ParallelAnimation {
266 StandardAnimation { target: hintGroup; property: hintAnimation.prop; from: hintAnimation.endVal; to: 0; duration: hintAnimation.duration }
267 StandardAnimation { target: edgeHint; property: "size"; from: hintAnimation.maxGlow; to: 1; duration: hintAnimation.duration }
268 }
269 }
270 }