git.iko.soy/unity8
on xenial help sign in
update the vtp visuals and add a tutorial
commit40d65dc6c40858f38cd80e9c5ab2e3cbd52c54eb authorMichael Zanetti <michael.zanetti@canonical.com> dateTue 28 Jun 2016, 16:34 (10 years ago) parentfbba5c3
4 files changed+169−8
compare with xenial
unifiedsplit
qml/Components/VirtualTouchPad.qml+152−1 qml/DisabledScreenNotice.qml+8−5 tests/qmltests/Components/tst_VirtualTouchPad.qml+1 tests/qmltests/tst_DisabledScreenNotice.qml+8−2
qml/Components/VirtualTouchPad.qml+152−1
@@ -15,16 +15,22 @@
1515 */
1616
1717import QtQuick 2.4
18+import QtQuick.Layouts 1.1
1819import Ubuntu.Components 1.3
1920import UInput 0.1
2021
2122Item {
23+ id: root
2224 property var uinput: UInput {
2325 Component.onCompleted: createMouse();
2426 Component.onDestruction: removeMouse();
2527 }
2628
27− readonly property bool pressed: point1.pressed || point2.pressed
29+ function runTutorial() {
30+ tutorial.start()
31+ }
32+
33+ readonly property bool pressed: point1.pressed || point2.pressed || leftButton.pressed || rightButton.pressed
2834
2935 MultiPointTouchArea {
3036 objectName: "touchPadArea"
@@ -135,4 +141,149 @@ Item {
135141 }
136142 ]
137143 }
144+
145+ RowLayout {
146+ anchors { left: parent.left; right: parent.right; bottom: parent.bottom; margins: -units.gu(1) }
147+ height: units.gu(10)
148+ spacing: units.gu(1)
149+
150+ MouseArea {
151+ id: leftButton
152+ Layout.fillWidth: true
153+ Layout.fillHeight: true
154+ onPressed: uinput.pressMouse(UInput.ButtonLeft);
155+ onReleased: uinput.releaseMouse(UInput.ButtonLeft);
156+ property bool highlight: false
157+ UbuntuShape {
158+ anchors.fill: parent
159+ backgroundColor: leftButton.highlight || leftButton.pressed ? UbuntuColors.ash : UbuntuColors.inkstone
160+ Behavior on backgroundColor { ColorAnimation { duration: UbuntuAnimation.FastDuration } }
161+ }
162+ }
163+
164+ MouseArea {
165+ id: rightButton
166+ Layout.fillWidth: true
167+ Layout.fillHeight: true
168+ onPressed: uinput.pressMouse(UInput.ButtonRight);
169+ onReleased: uinput.releaseMouse(UInput.ButtonRight);
170+ property bool highlight: false
171+ UbuntuShape {
172+ anchors.fill: parent
173+ backgroundColor: rightButton.highlight || rightButton.pressed ? UbuntuColors.ash : UbuntuColors.inkstone
174+ Behavior on backgroundColor { ColorAnimation { duration: UbuntuAnimation.FastDuration } }
175+ }
176+ }
177+ }
178+
179+ Label {
180+ id: tutorialLabel
181+ anchors { left: parent.left; top: parent.top; right: parent.right; margins: units.gu(4); topMargin: units.gu(10) }
182+ opacity: 0
183+ fontSize: "large"
184+ color: "white"
185+ wrapMode: Text.WordWrap
186+ }
187+
188+ Item {
189+ id: tutorialFinger1
190+ width: units.gu(5)
191+ height: width
192+ property real scale: 1
193+ opacity: 0
194+ Rectangle {
195+ width: parent.width * parent.scale
196+ height: width
197+ anchors.centerIn: parent
198+ radius: width / 2
199+ color: UbuntuColors.inkstone
200+ }
201+ }
202+
203+ Item {
204+ id: tutorialFinger2
205+ width: units.gu(5)
206+ height: width
207+ property real scale: 1
208+ opacity: 0
209+ Rectangle {
210+ width: parent.width * parent.scale
211+ height: width
212+ anchors.centerIn: parent
213+ radius: width / 2
214+ color: UbuntuColors.inkstone
215+ }
216+ }
217+
218+ SequentialAnimation {
219+ id: tutorial
220+ PauseAnimation { duration: UbuntuAnimation.SleepyDuration }
221+ PropertyAction { target: tutorialLabel; property: "text"; value: i18n.tr("Tap left button to click") }
222+ UbuntuNumberAnimation { target: tutorialLabel; property: "opacity"; to: 1; duration: UbuntuAnimation.FastDuration }
223+ SequentialAnimation {
224+ loops: 2
225+ PropertyAction { target: leftButton; property: "highlight"; value: true }
226+ PauseAnimation { duration: UbuntuAnimation.FastDuration }
227+ PropertyAction { target: leftButton; property: "highlight"; value: false }
228+ PauseAnimation { duration: UbuntuAnimation.SleepyDuration }
229+ }
230+ UbuntuNumberAnimation { target: tutorialLabel; property: "opacity"; to: 0; duration: UbuntuAnimation.FastDuration }
231+
232+ PauseAnimation { duration: UbuntuAnimation.SleepyDuration }
233+ PropertyAction { target: tutorialLabel; property: "text"; value: i18n.tr("Tap right button to right click") }
234+ UbuntuNumberAnimation { target: tutorialLabel; property: "opacity"; to: 1; duration: UbuntuAnimation.FastDuration }
235+ SequentialAnimation {
236+ loops: 2
237+ PropertyAction { target: rightButton; property: "highlight"; value: true }
238+ PauseAnimation { duration: UbuntuAnimation.FastDuration }
239+ PropertyAction { target: rightButton; property: "highlight"; value: false }
240+ PauseAnimation { duration: UbuntuAnimation.SleepyDuration }
241+ }
242+ UbuntuNumberAnimation { target: tutorialLabel; property: "opacity"; to: 0; duration: UbuntuAnimation.FastDuration }
243+
244+ PauseAnimation { duration: UbuntuAnimation.SleepyDuration }
245+ PropertyAction { target: tutorialLabel; property: "text"; value: i18n.tr("Swipe with two fingers to scroll") }
246+ UbuntuNumberAnimation { target: tutorialLabel; property: "opacity"; to: 1; duration: UbuntuAnimation.FastDuration }
247+ PropertyAction { target: tutorialFinger1; property: "x"; value: root.width / 2 - tutorialFinger1.width - units.gu(1) }
248+ PropertyAction { target: tutorialFinger2; property: "x"; value: root.width / 2 + tutorialFinger1.width + units.gu(1) - tutorialFinger2.width }
249+ PropertyAction { target: tutorialFinger1; property: "y"; value: root.height / 2 - units.gu(10) }
250+ PropertyAction { target: tutorialFinger2; property: "y"; value: root.height / 2 - units.gu(10) }
251+ SequentialAnimation {
252+ ParallelAnimation {
253+ UbuntuNumberAnimation { target: tutorialFinger1; property: "opacity"; to: 1; duration: UbuntuAnimation.FastDuration }
254+ UbuntuNumberAnimation { target: tutorialFinger2; property: "opacity"; to: 1; duration: UbuntuAnimation.FastDuration }
255+ UbuntuNumberAnimation { target: tutorialFinger1; property: "scale"; from: 0; to: 1; duration: UbuntuAnimation.FastDuration }
256+ UbuntuNumberAnimation { target: tutorialFinger2; property: "scale"; from: 0; to: 1; duration: UbuntuAnimation.FastDuration }
257+ }
258+ ParallelAnimation {
259+ UbuntuNumberAnimation { target: tutorialFinger1; property: "y"; to: root.height / 2 + units.gu(10); duration: UbuntuAnimation.SleepyDuration }
260+ UbuntuNumberAnimation { target: tutorialFinger2; property: "y"; to: root.height / 2 + units.gu(10); duration: UbuntuAnimation.SleepyDuration }
261+ }
262+ ParallelAnimation {
263+ UbuntuNumberAnimation { target: tutorialFinger1; property: "opacity"; to: 0; duration: UbuntuAnimation.FastDuration }
264+ UbuntuNumberAnimation { target: tutorialFinger2; property: "opacity"; to: 0; duration: UbuntuAnimation.FastDuration }
265+ UbuntuNumberAnimation { target: tutorialFinger1; property: "scale"; from: 1; to: 0; duration: UbuntuAnimation.FastDuration }
266+ UbuntuNumberAnimation { target: tutorialFinger2; property: "scale"; from: 1; to: 0; duration: UbuntuAnimation.FastDuration }
267+ }
268+ PauseAnimation { duration: UbuntuAnimation.SlowDuration }
269+ ParallelAnimation {
270+ UbuntuNumberAnimation { target: tutorialFinger1; property: "opacity"; to: 1; duration: UbuntuAnimation.FastDuration }
271+ UbuntuNumberAnimation { target: tutorialFinger2; property: "opacity"; to: 1; duration: UbuntuAnimation.FastDuration }
272+ UbuntuNumberAnimation { target: tutorialFinger1; property: "scale"; from: 0; to: 1; duration: UbuntuAnimation.FastDuration }
273+ UbuntuNumberAnimation { target: tutorialFinger2; property: "scale"; from: 0; to: 1; duration: UbuntuAnimation.FastDuration }
274+ }
275+ ParallelAnimation {
276+ UbuntuNumberAnimation { target: tutorialFinger1; property: "y"; to: root.height / 2 - units.gu(10); duration: UbuntuAnimation.SleepyDuration }
277+ UbuntuNumberAnimation { target: tutorialFinger2; property: "y"; to: root.height / 2 - units.gu(10); duration: UbuntuAnimation.SleepyDuration }
278+ }
279+ ParallelAnimation {
280+ UbuntuNumberAnimation { target: tutorialFinger1; property: "opacity"; to: 0; duration: UbuntuAnimation.FastDuration }
281+ UbuntuNumberAnimation { target: tutorialFinger2; property: "opacity"; to: 0; duration: UbuntuAnimation.FastDuration }
282+ UbuntuNumberAnimation { target: tutorialFinger1; property: "scale"; from: 1; to: 0; duration: UbuntuAnimation.FastDuration }
283+ UbuntuNumberAnimation { target: tutorialFinger2; property: "scale"; from: 1; to: 0; duration: UbuntuAnimation.FastDuration }
284+ }
285+ PauseAnimation { duration: UbuntuAnimation.SleepyDuration }
286+ }
287+ UbuntuNumberAnimation { target: tutorialLabel; property: "opacity"; to: 0; duration: UbuntuAnimation.FastDuration }
288+ }
138289}
qml/DisabledScreenNotice.qml+8−5
@@ -75,21 +75,24 @@ Item {
7575 }
7676 transformOrigin: Item.Center
7777
78+ Rectangle {
79+ anchors.fill: parent
80+ color: UbuntuColors.jet
81+ }
82+
7883 VirtualTouchPad {
7984 anchors.fill: parent
8085
8186 onPressedChanged: {
8287 if (pressed && infoNoteDisplayed) {
8388 infoNoteDisplayed = false;
89+ if (true) {
90+ runTutorial();
91+ }
8492 }
8593 }
8694 }
8795
88− Rectangle {
89− anchors.fill: parent
90− color: "#3b3b3b"
91− }
92−
9396 Item {
9497 objectName: "infoNoticeArea"
9598 anchors.fill: parent
tests/qmltests/Components/tst_VirtualTouchPad.qml+1
@@ -29,6 +29,7 @@ Item {
2929 VirtualTouchPad {
3030 id: touchScreenPad
3131 anchors.fill: parent
32+ property int internalGu: units.gu(1)
3233 }
3334
3435 SignalSpy {
tests/qmltests/tst_DisabledScreenNotice.qml+8−2
@@ -32,6 +32,12 @@ Item {
3232 anchors.fill: parent
3333 anchors.rightMargin: units.gu(40)
3434
35+ // Mock some things here
36+ property int internalGu: units.gu(1)
37+ property var applicationArguments: {
38+ deviceName: "mako"
39+ }
40+
3541 screen: QtObject {
3642 property int orientation: {
3743 switch (orientationSelector.selectedIndex) {
@@ -52,8 +58,8 @@ Item {
5258 }
5359
5460 Column {
55− anchors.fill: parent
56− anchors.leftMargin: units.gu(40)
61+ anchors { top: parent.top; right: parent.right; bottom: parent.bottom }
62+ width: units.gu(40)
5763
5864 ItemSelector {
5965 id: orientationSelector