git.iko.soy/unity8
on xenial help sign in
allow better control of the scaleToPreview animation
9768945Michael Zanetti
po/unity8.pot+1−1
compare with xenial
unifiedsplit
@@ -8,7 +8,7 @@ msgid ""
8msgstr ""
8msgstr ""
9"Project-Id-Version: unity8\n"
9"Project-Id-Version: unity8\n"
10"Report-Msgid-Bugs-To: \n"
10"Report-Msgid-Bugs-To: \n"
11−"POT-Creation-Date: 2016-07-14 15:54+0200\n"
11+"POT-Creation-Date: 2016-07-14 17:51+0200\n"
12"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
12"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
13"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
13"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
14"Language-Team: LANGUAGE <LL@li.org>\n"
14"Language-Team: LANGUAGE <LL@li.org>\n"
qml/Stages/DecoratedWindow.qml+16−13
@@ -17,6 +17,7 @@
17import QtQuick 2.4
17import QtQuick 2.4
18import Ubuntu.Components 1.3
18import Ubuntu.Components 1.3
19import Unity.Application 0.1
19import Unity.Application 0.1
20+import "Spread/MathUtils.js" as MathUtils
20
21
21FocusScope {
22FocusScope {
22 id: root
23 id: root
@@ -39,7 +40,7 @@ FocusScope {
39
40
40 property real requestedWidth
41 property real requestedWidth
41 property real requestedHeight
42 property real requestedHeight
42− property bool scaleToPreview
43+ property real scaleToPreviewProgress: 0
43 property int scaleToPreviewSize: units.gu(30)
44 property int scaleToPreviewSize: units.gu(30)
44
45
45 property alias surfaceOrientationAngle: applicationWindow.surfaceOrientationAngle
46 property alias surfaceOrientationAngle: applicationWindow.surfaceOrientationAngle
@@ -126,27 +127,29 @@ FocusScope {
126 focus: true
127 focus: true
127
128
128 property real itemScale: 1
129 property real itemScale: 1
130+ property real minSize: Math.min(root.scaleToPreviewSize, Math.min(applicationWindow.requestedHeight, applicationWindow.requestedWidth))
129 states: [
131 states: [
130 State {
132 State {
131− name: "preview"; when: root.scaleToPreview
133+ name: "preview"; when: root.scaleToPreviewProgress > 0
132 PropertyChanges {
134 PropertyChanges {
133 target: applicationWindow;
135 target: applicationWindow;
134 requestedWidth: applicationWindow.oldRequestedWidth
136 requestedWidth: applicationWindow.oldRequestedWidth
135 requestedHeight: applicationWindow.oldRequestedHeight
137 requestedHeight: applicationWindow.oldRequestedHeight
136− implicitWidth: root.scaleToPreviewSize
138+ implicitWidth: MathUtils.linearAnimation(0, 1, applicationWindow.oldRequestedWidth, root.scaleToPreviewSize, root.scaleToPreviewProgress)
137− implicitHeight: root.scaleToPreviewSize
139+ implicitHeight: MathUtils.linearAnimation(0, 1, applicationWindow.oldRequestedHeight, root.scaleToPreviewSize, root.scaleToPreviewProgress)
138− width: Math.min(root.scaleToPreviewSize, Math.min(applicationWindow.requestedHeight, applicationWindow.requestedWidth))
140+ width: MathUtils.linearAnimation(0, 1, applicationWindow.oldRequestedWidth, applicationWindow.minSize, root.scaleToPreviewProgress)
139− height: Math.min(root.scaleToPreviewSize, Math.min(applicationWindow.requestedHeight, applicationWindow.requestedWidth))
141+ height: MathUtils.linearAnimation(0, 1, applicationWindow.oldRequestedHeight, applicationWindow.minSize, root.scaleToPreviewProgress)
142+ // This is not 100% matching as it animates to an animated height, but close enough for the speed the animation plays
140− itemScale: 1.0 * root.scaleToPreviewSize / applicationWindow.width
143+ itemScale: MathUtils.linearAnimation(0, 1, 1, 1.0 * root.scaleToPreviewSize / Math.min(applicationWindow.height, applicationWindow.width), root.scaleToPreviewProgress)
141 }
144 }
142 }
145 }
143 ]
146 ]
144− transitions: [
147+// transitions: [
145− Transition {
148+// Transition {
146− from: "*"; to: "preview"
149+// from: "*"; to: "preview"
147− UbuntuNumberAnimation { properties: "width,height,itemScale,implicitWidth,implicitHeight"; duration: priv.animationDuration }
150+// UbuntuNumberAnimation { properties: "width,height,itemScale,implicitWidth,implicitHeight"; duration: priv.animationDuration }
148− }
151+// }
149− ]
152+// ]
150
153
151 transform: [
154 transform: [
152 Rotation {
155 Rotation {
qml/Stages/DesktopStage.qml+9−8
@@ -718,6 +718,7 @@ AbstractStage {
718 sceneWidth: appContainer.width - root.leftMargin
718 sceneWidth: appContainer.width - root.leftMargin
719 sceneHeight: appContainer.height
719 sceneHeight: appContainer.height
720 progress: 0
720 progress: 0
721+ targetHeight: spreadMaths.stackHeight
721 targetX: spreadMaths.targetX
722 targetX: spreadMaths.targetX
722 targetAngle: spreadMaths.targetAngle
723 targetAngle: spreadMaths.targetAngle
723 }
724 }
@@ -734,7 +735,7 @@ AbstractStage {
734 angle: spreadMaths.targetAngle
735 angle: spreadMaths.targetAngle
735 itemScale: spreadMaths.scale
736 itemScale: spreadMaths.scale
736 scaleToPreviewSize: spreadItem.stackHeight
737 scaleToPreviewSize: spreadItem.stackHeight
737− scaleToPreview: true
738+ scaleToPreviewProgress: 1
738 hasDecoration: root.mode === "windowed"
739 hasDecoration: root.mode === "windowed"
739 }
740 }
740 PropertyChanges {
741 PropertyChanges {
@@ -761,15 +762,16 @@ AbstractStage {
761 y: PanelState.panelHeight
762 y: PanelState.panelHeight
762 x: stagedRightEdgeMaths.animatedX
763 x: stagedRightEdgeMaths.animatedX
763 z: index +1
764 z: index +1
765+ height: stagedRightEdgeMaths.animatedHeight
766+ requestedWidth: decoratedWindow.oldRequestedWidth
767+ requestedHeight: decoratedWindow.oldRequestedHeight
764 }
768 }
765 PropertyChanges {
769 PropertyChanges {
766 target: decoratedWindow;
770 target: decoratedWindow;
767 hasDecoration: false
771 hasDecoration: false
768− requestedWidth: stagedRightEdgeMaths.animatedWidth
769− requestedHeight: stagedRightEdgeMaths.animatedHeight - PanelState.panelHeight
770−// width: appContainer.width - root.leftMargin
771−// height: appContainer.height
772 angle: stagedRightEdgeMaths.animatedAngle
772 angle: stagedRightEdgeMaths.animatedAngle
773+ scaleToPreviewSize: spreadItem.stackHeight
774+ scaleToPreviewProgress: stagedRightEdgeMaths.progress
773 }
775 }
774 },
776 },
775 State {
777 State {
@@ -950,9 +952,8 @@ AbstractStage {
950 to: "spread"
952 to: "spread"
951 // DecoratedWindow wants the sceleToPreviewSize set before enabling scaleToPreview
953 // DecoratedWindow wants the sceleToPreviewSize set before enabling scaleToPreview
952 PropertyAction { target: decoratedWindow; property: "scaleToPreviewSize" }
954 PropertyAction { target: decoratedWindow; property: "scaleToPreviewSize" }
953− PropertyAction { target: decoratedWindow; property: "scaleToPreview" }
954 UbuntuNumberAnimation { target: appDelegate; properties: "x,y,height"; duration: priv.animationDuration }
955 UbuntuNumberAnimation { target: appDelegate; properties: "x,y,height"; duration: priv.animationDuration }
955− UbuntuNumberAnimation { target: decoratedWindow; properties: "width,height,itemScale,angle"; duration: priv.animationDuration }
956+ UbuntuNumberAnimation { target: decoratedWindow; properties: "width,height,itemScale,angle,scaleToPreviewProgress"; duration: priv.animationDuration }
956 },
957 },
957 Transition {
958 Transition {
958 from: "normal,staged"; to: "stagedWithSideStage"
959 from: "normal,staged"; to: "stagedWithSideStage"
@@ -1171,7 +1172,7 @@ AbstractStage {
1171 property var gesturePoints: new Array()
1172 property var gesturePoints: new Array()
1172
1173
1173 property real progress: -touchPosition.x / root.width
1174 property real progress: -touchPosition.x / root.width
1174− onProgressChanged: print("dda progress", progress, root.width, touchPosition.x, root.width + touchPosition.x)
1175+// onProgressChanged: print("dda progress", progress, root.width, touchPosition.x, root.width + touchPosition.x)
1175
1176
1176// Rectangle { color: "blue"; anchors.fill: parent }
1177// Rectangle { color: "blue"; anchors.fill: parent }
1177 onTouchPositionChanged: {
1178 onTouchPositionChanged: {
qml/Stages/Spread/MathUtils.js+5
@@ -72,3 +72,8 @@ function intersectionRect(r1, r2) {
72}
72}
73
73
74function easeOutCubic(t) { return (--t)*t*t+1 }
74function easeOutCubic(t) { return (--t)*t*t+1 }
75+
76+function linearAnimation(startProgress, endProgress, startValue, endValue, progress) {
77+ // progress : progressDiff = value : valueDiff => value = progress * valueDiff / progressDiff
78+ return (progress - startProgress) * (endValue - startValue) / (endProgress - startProgress) + startValue;
79+}
qml/Stages/StagedRightEdgeMaths.qml → qml/Stages/Spread/StagedRightEdgeMaths.qmlrenamed+9−3
@@ -1,5 +1,6 @@
1import QtQuick 2.4
1import QtQuick 2.4
2import Ubuntu.Components 1.3
2import Ubuntu.Components 1.3
3+import "MathUtils.js" as MathUtils
3
4
4QtObject {
5QtObject {
5 id: root
6 id: root
@@ -11,14 +12,19 @@ QtObject {
11 property int sceneHeight: 0
12 property int sceneHeight: 0
12 property int targetX: 0
13 property int targetX: 0
13 property int targetAngle: 0
14 property int targetAngle: 0
15+ property int targetHeight: 0
16+
17+ onProgressChanged: if (itemIndex == 0) { print("progress", progress) }
14
18
15 // Output
19 // Output
20+
16− readonly property int animtedWidth: {
21+ readonly property int animatedWidth: {
17− return root.sceneWidth
22+ return MathUtils.linearAnimation(0, 1, root.sceneWidth, targetHeight, progress)
18 }
23 }
19
24
20 readonly property int animatedHeight: {
25 readonly property int animatedHeight: {
21− return root.sceneHeight
26+ print("animatedHeight:", progress < 0.5 ? root.sceneHeight : MathUtils.linearAnimation(0.5, 1, root.sceneHeight, targetHeight, progress))
27+ return progress < 0.5 ? root.sceneHeight : MathUtils.linearAnimation(0.5, 1, root.sceneHeight, targetHeight, progress)
22 }
28 }
23
29
24 readonly property int animatedX: {
30 readonly property int animatedX: {
qml/Stages/WindowDecoration.qml+2−2
@@ -69,8 +69,8 @@ MouseArea {
69 // Use integer coordinate values to ensure that target is left in a pixel-aligned
69 // Use integer coordinate values to ensure that target is left in a pixel-aligned
70 // position. Mouse movement could have subpixel precision, yielding a fractional
70 // position. Mouse movement could have subpixel precision, yielding a fractional
71 // mouse position.
71 // mouse position.
72− root.target.requestedX = Math.round(pos.x - priv.distanceX);
72+ root.target.windowedX = Math.round(pos.x - priv.distanceX);
73− root.target.requestedY = Math.round(Math.max(pos.y - priv.distanceY, PanelState.panelHeight));
73+ root.target.windowedY = Math.round(Math.max(pos.y - priv.distanceY, PanelState.panelHeight));
74 }
74 }
75 }
75 }
76
76
tests/qmltests/Stages/tst_DecoratedWindow.qml+23−11
@@ -51,12 +51,12 @@ Rectangle {
51
51
52 Loader {
52 Loader {
53 id: spreadDelegateLoader
53 id: spreadDelegateLoader
54− property int requestedX: units.gu(1)
54+ property int windowedX: units.gu(1)
55− property int requestedY: units.gu(1)
55+ property int windowedY: units.gu(1)
56− property int requestedWidth: units.gu(50)
56+ property int windowedWidth: units.gu(50)
57− property int requestedHeight: units.gu(40)
57+ property int windowedHeight: units.gu(40)
58− x: requestedX
58+ x: windowedX
59− y: requestedY
59+ y: windowedY
60 width: item ? item.implicitWidth : 0
60 width: item ? item.implicitWidth : 0
61 height: item ? item.implicitHeight : 0
61 height: item ? item.implicitHeight : 0
62
62
@@ -65,8 +65,8 @@ Rectangle {
65 sourceComponent: DecoratedWindow {
65 sourceComponent: DecoratedWindow {
66 anchors.fill: parent
66 anchors.fill: parent
67 application: fakeApplication
67 application: fakeApplication
68− requestedWidth: spreadDelegateLoader.requestedWidth
68+ requestedWidth: spreadDelegateLoader.windowedWidth
69− requestedHeight: spreadDelegateLoader.requestedHeight
69+ requestedHeight: spreadDelegateLoader.windowedHeight
70 surface: fakeApplication && fakeApplication.surfaceList.count > 0 ? fakeApplication.surfaceList.get(0) : null
70 surface: fakeApplication && fakeApplication.surfaceList.count > 0 ? fakeApplication.surfaceList.get(0) : null
71
71
72 Component.onDestruction: {
72 Component.onDestruction: {
@@ -122,11 +122,23 @@ Rectangle {
122 text: "show/hide decoration"
122 text: "show/hide decoration"
123 onClicked: spreadDelegateLoader.item.showDecoration = !spreadDelegateLoader.item.showDecoration
123 onClicked: spreadDelegateLoader.item.showDecoration = !spreadDelegateLoader.item.showDecoration
124 }
124 }
125− Button {
125+ Label {
126− text: "toggle scaleToPreview"
126+ text: "scale to preview progress"
127− onClicked: spreadDelegateLoader.item.scaleToPreview = !spreadDelegateLoader.item.scaleToPreview
127+ }
128+
129+ Slider {
130+ value: 0
131+ minimumValue: 0
132+ maximumValue: 1
133+ live: true
134+ onValueChanged: spreadDelegateLoader.item.scaleToPreviewProgress = value
128 }
135 }
129
136
137+// Button {
138+// text: "toggle scaleToPreview"
139+// onClicked: spreadDelegateLoader.item.scaleToPreviewProgress == !spreadDelegateLoader.item.scaleToPreview
140+// }
141+
130 Row {
142 Row {
131 anchors { left: parent.left; right: parent.right }
143 anchors { left: parent.left; right: parent.right }
132 CheckBox { id: closeableCheckbox; checked: false }
144 CheckBox { id: closeableCheckbox; checked: false }