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