on xenial help sign in
Visual updates for the windowed spread Fixes: #1488148
5ffa1eaMichael Zanetti
qml/Components/EdgeBarrier.qml+1−1
@@ -105,7 +105,7 @@ Item {
105 },
105 },
106 Transition {
106 Transition {
107 from: "resisting"; to: "passed"
107 from: "resisting"; to: "passed"
108− UbuntuNumberAnimation { target: materialContainer; property: "opacity" }
108+ UbuntuNumberAnimation { duration: UbuntuAnimation.BriskDuration; target: materialContainer; property: "opacity" }
109 }
109 }
110 ]
110 ]
111}
111}
qml/Launcher/Launcher.qml+2−2
@@ -329,8 +329,8 @@ FocusScope {
329 rotation: -90
329 rotation: -90
330 anchors.centerIn: parent
330 anchors.centerIn: parent
331 gradient: Gradient {
331 gradient: Gradient {
332− GradientStop { position: 0.0; color: panel.color}
332+ GradientStop { position: 0.0; color: Qt.rgba(panel.color.r, panel.color.g, panel.color.b, .5)}
333− GradientStop { position: 1.0; color: Qt.rgba(panel.r,panel.g,panel.b,0)}
333+ GradientStop { position: 1.0; color: Qt.rgba(panel.color.r,panel.color.g,panel.color.b,0)}
334 }
334 }
335 }
335 }
336 }
336 }
qml/Stages/DesktopSpread.qml+59−16
@@ -19,6 +19,7 @@ import QtQuick.Layouts 1.1
19import Ubuntu.Components 1.3
19import Ubuntu.Components 1.3
20import Ubuntu.Gestures 0.1
20import Ubuntu.Gestures 0.1
21import Unity.Application 0.1
21import Unity.Application 0.1
22+import "../Components"
22
23
23FocusScope {
24FocusScope {
24 id: root
25 id: root
@@ -26,8 +27,11 @@ FocusScope {
26 property bool altTabPressed: false
27 property bool altTabPressed: false
27 property Item workspace: null
28 property Item workspace: null
28
29
30+ readonly property alias ready: blurLayer.ready
29 readonly property alias highlightedIndex: spreadRepeater.highlightedIndex
31 readonly property alias highlightedIndex: spreadRepeater.highlightedIndex
30
32
33+ signal playFocusAnimation(int index)
34+
31 function show() {
35 function show() {
32 spreadContainer.animateIn = true;
36 spreadContainer.animateIn = true;
33 root.state = "altTab";
37 root.state = "altTab";
@@ -91,6 +95,9 @@ FocusScope {
91
95
92 function focusSelected() {
96 function focusSelected() {
93 if (spreadRepeater.highlightedIndex != -1) {
97 if (spreadRepeater.highlightedIndex != -1) {
98+ if (spreadContainer.visible) {
99+ root.playFocusAnimation(spreadRepeater.highlightedIndex)
100+ }
94 var application = ApplicationManager.get(spreadRepeater.highlightedIndex);
101 var application = ApplicationManager.get(spreadRepeater.highlightedIndex);
95 ApplicationManager.requestFocusApplication(application.appId);
102 ApplicationManager.requestFocusApplication(application.appId);
96 }
103 }
@@ -101,6 +108,31 @@ FocusScope {
101 state = ""
108 state = ""
102 }
109 }
103
110
111+ BlurLayer {
112+ id: blurLayer
113+ anchors.fill: parent
114+ source: root.workspace
115+ visible: false
116+ }
117+
118+ Rectangle {
119+ id: spreadBackground
120+ anchors.fill: parent
121+ color: "#B2000000"
122+ visible: false
123+ opacity: visible ? 1 : 0
124+ Behavior on opacity {
125+ UbuntuNumberAnimation { duration: UbuntuAnimation.SnapDuration }
126+ }
127+ }
128+
129+ MouseArea {
130+ id: eventEater
131+ anchors.fill: parent
132+ visible: spreadBackground.visible
133+ enabled: visible
134+ }
135+
104 Item {
136 Item {
105 id: spreadContainer
137 id: spreadContainer
106 objectName: "spreadContainer"
138 objectName: "spreadContainer"
@@ -226,13 +258,20 @@ FocusScope {
226 Transition {
258 Transition {
227 from: ""
259 from: ""
228 to: "altTab"
260 to: "altTab"
261+ SequentialAnimation {
262+ ParallelAnimation {
229− PropertyAction { target: spreadDelegate; properties: "y,height,width,angle,z,itemScale,itemScaleOriginY,visible" }
263+ PropertyAction { target: spreadDelegate; properties: "y,height,width,angle,z,itemScale,itemScaleOriginY,visible" }
230− PropertyAction { target: clippedSpreadDelegate; properties: "anchors.topMargin" }
264+ PropertyAction { target: clippedSpreadDelegate; properties: "anchors.topMargin" }
231− PropertyAnimation {
265+ PropertyAnimation {
232− target: spreadDelegate; properties: "x"
266+ target: spreadDelegate; properties: "x"
233− from: root.width
267+ from: root.width
234− duration: spreadContainer.animateIn ? UbuntuAnimation.FastDuration :0
268+ duration: spreadContainer.animateIn ? UbuntuAnimation.FastDuration :0
235− easing: UbuntuAnimation.StandardEasing
269+ easing: UbuntuAnimation.StandardEasing
270+ }
271+ UbuntuNumberAnimation { target: clippedSpreadDelegate; property: "shadowOpacity"; from: 0; to: spreadMaths.shadowOpacity; duration: spreadContainer.animateIn ? UbuntuAnimation.FastDuration : 0 }
272+ UbuntuNumberAnimation { target: tileInfo; property: "opacity"; from: 0; to: spreadMaths.tileInfoOpacity; duration: spreadContainer.animateIn ? UbuntuAnimation.FastDuration : 0 }
273+ }
274+ PropertyAction { target: spreadSelectArea; property: "enabled" }
236 }
275 }
237 }
276 }
238 ]
277 ]
@@ -262,12 +301,20 @@ FocusScope {
262 anchors { left: parent.left; top: parent.top; right: parent.right }
301 anchors { left: parent.left; top: parent.top; right: parent.right }
263 spacing: units.gu(1)
302 spacing: units.gu(1)
264
303
265− UbuntuShape {
304+ UbuntuShapeForItem {
266 Layout.preferredHeight: Math.min(units.gu(6), root.height * .05)
305 Layout.preferredHeight: Math.min(units.gu(6), root.height * .05)
267 Layout.preferredWidth: height * 8 / 7.6
306 Layout.preferredWidth: height * 8 / 7.6
268 image: Image {
307 image: Image {
269 anchors.fill: parent
308 anchors.fill: parent
270 source: model.icon
309 source: model.icon
310+ Rectangle {
311+ anchors.fill: parent
312+ color: "black"
313+ opacity: clippedSpreadDelegate.highlightShown ? 0 : .1
314+ Behavior on opacity {
315+ UbuntuNumberAnimation { duration: UbuntuAnimation.SnapDuration }
316+ }
317+ }
271 }
318 }
272 }
319 }
273 Label {
320 Label {
@@ -420,7 +467,7 @@ FocusScope {
420
467
421 property var source: ShaderEffectSource {
468 property var source: ShaderEffectSource {
422 id: shaderEffectSource
469 id: shaderEffectSource
423− sourceItem: appContainer
470+ sourceItem: root.workspace
424 }
471 }
425
472
426 fragmentShader: "
473 fragmentShader: "
@@ -494,20 +541,17 @@ FocusScope {
494 from: "*"
541 from: "*"
495 to: "altTab"
542 to: "altTab"
496 SequentialAnimation {
543 SequentialAnimation {
497− PropertyAction { target: hoverMouseArea; property: "progressiveScrollingEnabled"; value: false }
498 PropertyAction { target: spreadRepeater; property: "highlightedIndex"; value: Math.min(ApplicationManager.count - 1, 1) }
544 PropertyAction { target: spreadRepeater; property: "highlightedIndex"; value: Math.min(ApplicationManager.count - 1, 1) }
499− PauseAnimation { duration: 140 }
545+ PauseAnimation { duration: spreadContainer.animateIn ? 0 : 140 }
500 PropertyAction { target: workspaceSelector; property: "visible" }
546 PropertyAction { target: workspaceSelector; property: "visible" }
501 PropertyAction { target: spreadContainer; property: "visible" }
547 PropertyAction { target: spreadContainer; property: "visible" }
502 ParallelAnimation {
548 ParallelAnimation {
503− UbuntuNumberAnimation {
504− target: blurLayer; properties: "saturation,blurRadius";
549+ UbuntuNumberAnimation { target: blurLayer; properties: "saturation,blurRadius"; duration: UbuntuAnimation.SnapDuration }
505− duration: spreadContainer.animateIn ? UbuntuAnimation.FastDuration : 0
506− }
507 PropertyAction { target: spreadFlickable; property: "visible" }
550 PropertyAction { target: spreadFlickable; property: "visible" }
508 PropertyAction { targets: [currentSelectedLabel,spreadBackground]; property: "visible" }
551 PropertyAction { targets: [currentSelectedLabel,spreadBackground]; property: "visible" }
509 PropertyAction { target: spreadFlickable; property: "contentX"; value: 0 }
552 PropertyAction { target: spreadFlickable; property: "contentX"; value: 0 }
510 }
553 }
554+ PropertyAction { target: hoverMouseArea; properties: "enabled,progressiveScrollingEnabled"; value: false }
511 }
555 }
512 },
556 },
513 Transition {
557 Transition {
@@ -518,6 +562,5 @@ FocusScope {
518 PropertyAction { target: spreadRepeater; property: "highlightedIndex"; value: -1 }
562 PropertyAction { target: spreadRepeater; property: "highlightedIndex"; value: -1 }
519 PropertyAction { target: spreadContainer; property: "animateIn"; value: false }
563 PropertyAction { target: spreadContainer; property: "animateIn"; value: false }
520 }
564 }
521−
522 ]
565 ]
523}
566}
qml/Stages/DesktopSpreadDelegate.qml+15−1
@@ -56,6 +56,11 @@ Item {
56 }
56 }
57 ]
57 ]
58
58
59+ scale: highlightShown ? 1.025 : 1
60+ Behavior on scale {
61+ UbuntuNumberAnimation { duration: UbuntuAnimation.SnapDuration }
62+ }
63+
59 BorderImage {
64 BorderImage {
60 anchors {
65 anchors {
61 fill: root
66 fill: root
@@ -70,7 +75,7 @@ Item {
70 anchors.fill: parent
75 anchors.fill: parent
71 anchors.margins: -units.gu(1)
76 anchors.margins: -units.gu(1)
72 color: "white"
77 color: "white"
73− opacity: highlightShown ? 0.15 : 0
78+ opacity: highlightShown ? 0.55 : 0
74 antialiasing: true
79 antialiasing: true
75 }
80 }
76
81
@@ -108,4 +113,13 @@ Item {
108 ]
113 ]
109 }
114 }
110 }
115 }
116+
117+ Rectangle {
118+ anchors.fill: parent
119+ color: "black"
120+ opacity: root.highlightShown ? 0 : .1
121+ Behavior on opacity {
122+ UbuntuNumberAnimation { duration: UbuntuAnimation.SnapDuration }
123+ }
124+ }
111}
125}
qml/Stages/DesktopStage.qml+19−23
@@ -350,6 +350,19 @@ AbstractStage {
350 ApplicationManager.focusApplication(appId);
350 ApplicationManager.focusApplication(appId);
351 }
351 }
352
352
353+ function playFocusAnimation() {
354+ focusAnimation.start()
355+ }
356+
357+ UbuntuNumberAnimation {
358+ id: focusAnimation
359+ target: appDelegate
360+ property: "scale"
361+ from: 0.98
362+ to: 1
363+ duration: UbuntuAnimation.SnapDuration
364+ }
365+
353 states: [
366 states: [
354 State {
367 State {
355 name: "fullscreen"; when: decoratedWindow.fullscreen
368 name: "fullscreen"; when: decoratedWindow.fullscreen
@@ -440,7 +453,7 @@ AbstractStage {
440 target: appDelegate
453 target: appDelegate
441 property: "z"
454 property: "z"
442 value: ApplicationManager.count + 1
455 value: ApplicationManager.count + 1
443− when: index == spread.highlightedIndex && blurLayer.ready
456+ when: index == spread.highlightedIndex && spread.ready
444 }
457 }
445
458
446 WindowResizeArea {
459 WindowResizeArea {
@@ -476,27 +489,6 @@ AbstractStage {
476 }
489 }
477 }
490 }
478
491
479− BlurLayer {
480− id: blurLayer
481− anchors.fill: appContainer
482− source: appContainer
483− visible: false
484− }
485−
486− Rectangle {
487− id: spreadBackground
488− anchors.fill: parent
489− color: "#55000000"
490− visible: false
491− }
492−
493− MouseArea {
494− id: eventEater
495− anchors.fill: parent
496− visible: spreadBackground.visible
497− enabled: visible
498− }
499−
500 EdgeBarrier {
492 EdgeBarrier {
501 id: edgeBarrier
493 id: edgeBarrier
502
494
@@ -512,7 +504,7 @@ AbstractStage {
512 rotation: 90
504 rotation: 90
513 anchors.centerIn: parent
505 anchors.centerIn: parent
514 gradient: Gradient {
506 gradient: Gradient {
515− GradientStop { position: 0.0; color: Qt.rgba(0.16,0.16,0.16,0.7)}
507+ GradientStop { position: 0.0; color: Qt.rgba(0.16,0.16,0.16,0.5)}
516 GradientStop { position: 1.0; color: Qt.rgba(0.16,0.16,0.16,0)}
508 GradientStop { position: 1.0; color: Qt.rgba(0.16,0.16,0.16,0)}
517 }
509 }
518 }
510 }
@@ -534,5 +526,9 @@ AbstractStage {
534 workspace: appContainer
526 workspace: appContainer
535 focus: state == "altTab"
527 focus: state == "altTab"
536 altTabPressed: root.altTabPressed
528 altTabPressed: root.altTabPressed
529+
530+ onPlayFocusAnimation: {
531+ appRepeater.itemAt(index).playFocusAnimation();
532+ }
537 }
533 }
538}
534}
tests/qmltests/Stages/tst_DesktopStage.qml+2−1
@@ -65,8 +65,9 @@ Item {
65 property bool itemDestroyed: false
65 property bool itemDestroyed: false
66 sourceComponent: Component {
66 sourceComponent: Component {
67 DesktopStage {
67 DesktopStage {
68− color: "darkblue"
68+ color: "white"
69 anchors.fill: parent
69 anchors.fill: parent
70+ background: "../../../qml/graphics/tablet_background.jpg"
70
71
71 Component.onCompleted: {
72 Component.onCompleted: {
72 edgeBarrierControls.target = testCase.findChild(this, "edgeBarrierController");
73 edgeBarrierControls.target = testCase.findChild(this, "edgeBarrierController");