git.iko.soy/unity8
on xenial help sign in
update the vtp visuals and add a tutorial
40d65dcMichael Zanetti
qml/Components/VirtualTouchPad.qml+152−1
compare with xenial
unifiedsplit
@@ -15,16 +15,22 @@
15 */
15 */
16
16
17import QtQuick 2.4
17import QtQuick 2.4
18+import QtQuick.Layouts 1.1
18import Ubuntu.Components 1.3
19import Ubuntu.Components 1.3
19import UInput 0.1
20import UInput 0.1
20
21
21Item {
22Item {
23+ id: root
22 property var uinput: UInput {
24 property var uinput: UInput {
23 Component.onCompleted: createMouse();
25 Component.onCompleted: createMouse();
24 Component.onDestruction: removeMouse();
26 Component.onDestruction: removeMouse();
25 }
27 }
26
28
29+ function runTutorial() {
30+ tutorial.start()
31+ }
32+
27− readonly property bool pressed: point1.pressed || point2.pressed
33+ readonly property bool pressed: point1.pressed || point2.pressed || leftButton.pressed || rightButton.pressed
28
34
29 MultiPointTouchArea {
35 MultiPointTouchArea {
30 objectName: "touchPadArea"
36 objectName: "touchPadArea"
@@ -135,4 +141,149 @@ Item {
135 }
141 }
136 ]
142 ]
137 }
143 }
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+ }
138}
289}
qml/DisabledScreenNotice.qml+8−5
@@ -75,21 +75,24 @@ Item {
75 }
75 }
76 transformOrigin: Item.Center
76 transformOrigin: Item.Center
77
77
78+ Rectangle {
79+ anchors.fill: parent
80+ color: UbuntuColors.jet
81+ }
82+
78 VirtualTouchPad {
83 VirtualTouchPad {
79 anchors.fill: parent
84 anchors.fill: parent
80
85
81 onPressedChanged: {
86 onPressedChanged: {
82 if (pressed && infoNoteDisplayed) {
87 if (pressed && infoNoteDisplayed) {
83 infoNoteDisplayed = false;
88 infoNoteDisplayed = false;
89+ if (true) {
90+ runTutorial();
91+ }
84 }
92 }
85 }
93 }
86 }
94 }
87
95
88− Rectangle {
89− anchors.fill: parent
90− color: "#3b3b3b"
91− }
92−
93 Item {
96 Item {
94 objectName: "infoNoticeArea"
97 objectName: "infoNoticeArea"
95 anchors.fill: parent
98 anchors.fill: parent
tests/qmltests/Components/tst_VirtualTouchPad.qml+1
@@ -29,6 +29,7 @@ Item {
29 VirtualTouchPad {
29 VirtualTouchPad {
30 id: touchScreenPad
30 id: touchScreenPad
31 anchors.fill: parent
31 anchors.fill: parent
32+ property int internalGu: units.gu(1)
32 }
33 }
33
34
34 SignalSpy {
35 SignalSpy {
tests/qmltests/tst_DisabledScreenNotice.qml+8−2
@@ -32,6 +32,12 @@ Item {
32 anchors.fill: parent
32 anchors.fill: parent
33 anchors.rightMargin: units.gu(40)
33 anchors.rightMargin: units.gu(40)
34
34
35+ // Mock some things here
36+ property int internalGu: units.gu(1)
37+ property var applicationArguments: {
38+ deviceName: "mako"
39+ }
40+
35 screen: QtObject {
41 screen: QtObject {
36 property int orientation: {
42 property int orientation: {
37 switch (orientationSelector.selectedIndex) {
43 switch (orientationSelector.selectedIndex) {
@@ -52,8 +58,8 @@ Item {
52 }
58 }
53
59
54 Column {
60 Column {
55− anchors.fill: parent
61+ anchors { top: parent.top; right: parent.right; bottom: parent.bottom }
56− anchors.leftMargin: units.gu(40)
62+ width: units.gu(40)
57
63
58 ItemSelector {
64 ItemSelector {
59 id: orientationSelector
65 id: orientationSelector