on bb5feb3 help sign in
unity8/Components/EdgeDemoOverlay.qml
261 lines 7.9 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 layer.enabled: true // otherwise the underlining on "Skip intro" jumps
125 spacing: units.gu(3)
127 anchors {
128 margins: d.edgeMargin
129 left: parent.left
130 top: overlay.edge == "bottom" ? undefined : parent.top
131 bottom: overlay.edge == "bottom" ? parent.bottom : undefined
132 }
134 Label {
135 id: titleLabel
136 fontSize: "x-large"
137 width: units.gu(25)
138 wrapMode: Text.WordWrap
139 }
141 Label {
142 id: textLabel
143 width: units.gu(25)
144 wrapMode: Text.WordWrap
145 }
147 Label {
148 id: skipLabel
149 objectName: "skipLabel"
150 text: i18n.tr("Skip intro")
151 color: UbuntuColors.orange
152 fontSize: "small"
153 font.underline: true
155 MouseArea {
156 anchors.fill: parent
157 onClicked: overlay.doSkip()
158 }
159 }
160 }
162 LinearGradient {
163 id: edgeHint
164 property int size: 1
165 cached: false
166 visible: overlay.edge != "none"
167 gradient: Gradient {
168 GradientStop {
169 position: 0.0
170 color: Qt.hsla(16.0/360.0, 0.83, 0.47, 0.4) // UbuntuColors.orange, but transparent
171 }
172 GradientStop {
173 position: 1.0
174 color: "transparent"
175 }
176 }
177 anchors.fill: parent
178 start: {
179 if (overlay.edge == "right") {
180 return Qt.point(width, 0);
181 } else if (overlay.edge == "left") {
182 return Qt.point(0, 0);
183 } else if (overlay.edge == "top") {
184 return Qt.point(0, 0);
185 } else {
186 return Qt.point(0, height);
187 }
188 }
189 end: {
190 if (overlay.edge == "right") {
191 return Qt.point(width - size, 0);
192 } else if (overlay.edge == "left") {
193 return Qt.point(size, 0);
194 } else if (overlay.edge == "top") {
195 return Qt.point(0, size);
196 } else {
197 return Qt.point(0, height - size);
198 }
199 }
200 }
201 }
203 SequentialAnimation {
204 id: wholeAnimation
205 objectName: "wholeAnimation"
206 running: overlay.active
208 ParallelAnimation {
209 id: fadeInAnimation
211 StandardAnimation {
212 target: labelGroup
213 property: {
214 if (overlay.edge == "right" || overlay.edge == "left") {
215 return "anchors.leftMargin";
216 } else if (overlay.edge == "bottom") {
217 return "anchors.bottomMargin";
218 } else {
219 return "anchors.topMargin";
220 }
221 }
222 from: {
223 if (overlay.edge == "right") {
224 return d.edgeMargin + units.gu(3)
225 } else {
226 return d.edgeMargin - units.gu(3)
227 }
228 }
229 to: d.edgeMargin
230 duration: overlay.edge == "none" ? 0 : UbuntuAnimation.SleepyDuration
231 }
232 StandardAnimation {
233 target: overlay
234 property: "opacity"
235 from: 0.0
236 to: 1.0
237 duration: UbuntuAnimation.SleepyDuration
238 }
239 }
241 SequentialAnimation {
242 id: hintAnimation
243 loops: Animation.Infinite
244 property string prop: (overlay.edge == "left" || overlay.edge == "right") ? "x" : "y"
245 property double endVal: units.dp(5) * ((overlay.edge == "left" || overlay.edge == "top") ? 1 : -1)
246 property double maxGlow: units.dp(20)
247 property int duration: overlay.edge == "none" ? 0 : UbuntuAnimation.SleepyDuration
249 ParallelAnimation {
250 StandardAnimation { target: hintGroup; property: hintAnimation.prop; from: 0; to: hintAnimation.endVal; duration: hintAnimation.duration }
251 StandardAnimation { target: edgeHint; property: "size"; from: 1; to: hintAnimation.maxGlow; duration: hintAnimation.duration }
252 }
254 // Undo the above
255 ParallelAnimation {
256 StandardAnimation { target: hintGroup; property: hintAnimation.prop; from: hintAnimation.endVal; to: 0; duration: hintAnimation.duration }
257 StandardAnimation { target: edgeHint; property: "size"; from: hintAnimation.maxGlow; to: 1; duration: hintAnimation.duration }
258 }
259 }
260 }