on xenial help sign in
tweak launcher folding and visuals according to feedback from design:

- increase foldingStartHeight - Introduces a foldingStopHeight. Folding only happens between the foldingStartHeight and the foldingStopHeight. - Only change brightness while folding - remove highlight of pressed icon - decrease launcher's width by half a grid unit. Approved by PS Jenkins bot, Martin Keary, Vesa Rautiainen, Michał Sawicz.

commita4557f4ba2babd6372866c8f0bdac475b2a82158 authorMichael Zanetti <michael.zanetti@canonical.com> dateMon 26 Aug 2013, 18:56 (13 years ago) parent22ae3c31ba7ec9
5 files changed+59−44
Launcher/FoldingLauncherDelegate.qml+35−24 Launcher/Launcher.qml+1−1 Launcher/LauncherDelegate.qml+2−2 Launcher/LauncherPanel.qml+13−13 tests/qmltests/Launcher/tst_Launcher.qml+8−4
Launcher/FoldingLauncherDelegate.qml+35−24
@@ -26,21 +26,21 @@ LauncherDelegate {
2626 if (index == 0 || index == priv.listView.count-1) {
2727 if (priv.distanceFromEdge < 0) {
2828 // proportion equation: distanceFromTopEdge : angle = totalUnfoldedHeight/2 : maxAngle
29− return Math.max(-maxAngle, priv.distanceFromEdge * maxAngle / (priv.listView.foldingAreaHeight)) * priv.orientationFlag
29+ return Math.max(-maxAngle, priv.distanceFromEdge * maxAngle / (priv.foldingAreaHeight)) * priv.orientationFlag
3030 }
3131 return 0; // Don't fold first/last item as long as inside the view
3232 }
3333
34− // Are we in the already completely outside the flickable? Fold for the last 5 degrees
35− if (priv.distanceFromEdge < 0) {
36− // proportion equation: -distanceFromTopEdge : angle = totalUnfoldedHeight : 5
37− return Math.max(-maxAngle, (priv.distanceFromEdge * 5 / priv.listView.foldingAreaHeight) - (maxAngle-5)) * priv.orientationFlag
34+ // We reached the folded area... fold the last 5 degrees
35+ if (priv.overlapWithFoldedArea > 0) {
36+ // proportion equation: overlap : x = height : 5
37+ return ((maxAngle - 5) + (priv.overlapWithFoldedArea * 5 / priv.foldingAreaHeight)) * -priv.orientationFlag
3838 }
3939
4040 // We are overlapping with the folding area, fold the icon to maxAngle - 5 degrees
4141 if (priv.overlapWithFoldingArea > 0) {
4242 // proportion equation: overlap: totalHeight = angle : (maxAngle - 5)
43− return -priv.overlapWithFoldingArea * (maxAngle -5) / priv.listView.foldingAreaHeight * priv.orientationFlag;
43+ return -priv.overlapWithFoldingArea * (maxAngle -5) / priv.foldingAreaHeight * priv.orientationFlag;
4444 }
4545 return 0;
4646 }
@@ -61,9 +61,9 @@ LauncherDelegate {
6161 return (-priv.distanceFromEdge - (root.height - effectiveHeight)) * priv.orientationFlag;
6262 }
6363
64− // We're touching the edge, move slower than the actual flicking speed.
65− if (priv.distanceFromEdge < 0) {
66− return (Math.abs(priv.distanceFromEdge) * priv.totalEffectiveHeight / priv.totalUnfoldedHeight) * priv.orientationFlag
64+ // We stopped folding, move slower than the actual flicking speed.
65+ if (priv.overlapWithFoldedArea > 0) {
66+ return (priv.overlapWithFoldedArea * priv.totalEffectiveHeight / (priv.totalUnfoldedHeight + priv.listView.foldingStopHeight)) * priv.orientationFlag;
6767 }
6868 return 0;
6969 }
@@ -72,22 +72,23 @@ LauncherDelegate {
7272 // First/last items are special
7373 if (index == 0 || index == priv.listView.count-1) {
7474 if (priv.distanceFromEdge < 0) {
75− // Fade from 1 to 0 in the distance of 3 * foldingAreaHeight (which is when the next item reaches the edge)
76− return 1.0 - (-priv.distanceFromEdge / (priv.listView.foldingAreaHeight * 3))
75+ // Fade from 1 to 0 while traversing a distance of 2*foldingAreaHeight
76+ // proportion equation: 0.5 : x = -2*foldingAreaHeight : distance
77+ return 1 + (priv.distanceFromEdge / (priv.foldingAreaHeight * 2))
7778 }
7879 return 1; // Don't make first/last item transparent as long as inside the view
7980 }
8081
81− // Are we already completely outside the flickable? Fade from 0.75 to 0 in 2 items height
82− if (priv.distanceFromEdge < 0) {
83− // proportion equation: -distanceFromEdge : 1-opacity = totalUnfoldedHeight : 0.75
84− return 0.75 - (-priv.distanceFromEdge * 0.75 / (priv.totalUnfoldedHeight*2))
82+ // Did we stop folding? Fade out to 0 in 2*foldingAreaHeight
83+ if (priv.overlapWithFoldedArea > 0) {
84+ // overlap : foldingAreaHeight = opacity : 0.75
85+ return 0.75 - (priv.overlapWithFoldedArea * 0.75 / (priv.foldingAreaHeight * 2));
8586 }
8687
87− // We are overlapping with the folding area, fade out to 0.75
88+ // We are overlapping with the folding area, fade out to 0.75 transparency
8889 if (priv.overlapWithFoldingArea > 0) {
8990 // proportion equation: overlap : totalHeight = 1-opacity : 0.25
90− return 1 - (priv.overlapWithFoldingArea * 0.25 / priv.listView.foldingAreaHeight)
91+ return 1 - (priv.overlapWithFoldingArea * 0.25 / priv.foldingAreaHeight)
9192 }
9293 return 1;
9394 }
@@ -95,19 +96,27 @@ LauncherDelegate {
9596 brightness: {
9697 // First/last items are special
9798 if (index == 0 || index == priv.listView.count-1) {
99+
100+ // Traversed one foldingAreaHeight. Stop at 0.3
101+ if (priv.distanceFromEdge < -priv.foldingAreaHeight) {
102+ return -0.3
103+ }
104+
105+ // We started moving, fade to 0.3
98106 if (priv.distanceFromEdge < 0) {
99− return -(-priv.distanceFromEdge / (priv.listView.foldingAreaHeight * 3))
107+ return -0.3 * (-priv.distanceFromEdge / (priv.foldingAreaHeight))
100108 }
101109 return 0;
102110 }
103− // Are we already completely outside the flickable? Fade from 0.7 to 0 in 2 items height
104− if (priv.distanceFromEdge < 0) {
105− return -0.3 - (-priv.distanceFromEdge * 0.1 / (priv.totalUnfoldedHeight*2))
111+
112+ // We stopped folding? Stop brightness change at 0.3
113+ if (priv.overlapWithFoldedArea > 0) {
114+ return -0.3;
106115 }
107116
108− // We are overlapping with the folding area, fade out to 0.7
117+ // We are overlapping with the folding area, fade out to 0.3
109118 if (priv.overlapWithFoldingArea > 0) {
110− return - (priv.overlapWithFoldingArea * 0.3 / priv.listView.foldingAreaHeight)
119+ return - (priv.overlapWithFoldingArea * 0.3 / priv.listView.foldingStartHeight);
111120 }
112121 return 0;
113122 }
@@ -127,7 +136,9 @@ LauncherDelegate {
127136 property real distanceFromEdge: Math.abs(distanceFromBottomEdge) < Math.abs(distanceFromTopEdge) ? distanceFromBottomEdge : distanceFromTopEdge
128137 property real orientationFlag: Math.abs(distanceFromBottomEdge) < Math.abs(distanceFromTopEdge) ? -1 : 1
129138
130− property real overlapWithFoldingArea: listView.foldingAreaHeight - distanceFromEdge
139+ property real overlapWithFoldingArea: listView.foldingStartHeight - distanceFromEdge
140+ property real overlapWithFoldedArea: listView.foldingStopHeight - distanceFromEdge
141+ property real foldingAreaHeight: listView.foldingStartHeight - listView.foldingStopHeight
131142 }
132143
133144}
Launcher/Launcher.qml+1−1
@@ -26,7 +26,7 @@ Item {
2626
2727 property bool available: true // can be used to disable all interactions
2828
29− property int panelWidth: units.gu(8.5)
29+ property int panelWidth: units.gu(8)
3030 property int dragAreaWidth: units.gu(1)
3131 property real progress: dragArea.dragging && dragArea.touchX > panel.width ? dragArea.touchX : 0
3232
Launcher/LauncherDelegate.qml+2−2
@@ -80,7 +80,7 @@ Item {
8080 top: parent.top
8181 margins: -units.dp(1)
8282 }
83− width: Math.min(units.gu(7.5), Math.max(units.gu(3), countLabel.implicitWidth + units.gu(2.5)))
83+ width: Math.min(root.itemWidth, Math.max(units.gu(3), countLabel.implicitWidth + units.gu(2.5)))
8484 height: units.gu(3)
8585 source: "graphics/notification.sci"
8686 visible: root.count > 0
@@ -89,7 +89,7 @@ Item {
8989 id: countLabel
9090 text: root.count
9191 anchors.centerIn: parent
92− width: units.gu(6)
92+ width: root.itemWidth - units.gu(1)
9393 horizontalAlignment: Text.AlignHCenter
9494 elide: Text.ElideRight
9595 color: "white"
Launcher/LauncherPanel.qml+13−13
@@ -62,7 +62,7 @@ Item {
6262 z: 1
6363 Image {
6464 objectName: "dashItem"
65− width: units.gu(5.5)
65+ width: units.gu(5)
6666 height: width
6767 anchors.centerIn: parent
6868 source: "graphics/home.png"
@@ -113,9 +113,11 @@ Item {
113113 property int extensionSize: itemHeight * 3
114114
115115 // The height of the area where icons start getting folded
116− property int foldingAreaHeight: itemHeight * 0.75
117− property int itemWidth: width
118− property int itemHeight: width * 7.5 / 8
116+ property int foldingStartHeight: units.gu(6.5)
117+ // The height of the area where the items reach the final folding angle
118+ property int foldingStopHeight: foldingStartHeight - itemHeight - spacing
119+ property int itemWidth: units.gu(7)
120+ property int itemHeight: units.gu(6.5)
119121 property int clickFlickSpeed: units.gu(60)
120122 property int draggedIndex: dndArea.draggedIndex
121123 property real realContentY: contentY - originY + topMargin
@@ -142,9 +144,8 @@ Item {
142144 count: model.count
143145 progress: model.progress
144146 inverted: root.inverted
145− highlighted: dragging && index === root.highlightIndex
146147 z: -Math.abs(offset)
147− maxAngle: 60
148+ maxAngle: 55
148149 property bool dragging: false
149150
150151 ThinDivider {
@@ -235,7 +236,9 @@ Item {
235236 NumberAnimation { target: dropIndicator; properties: "opacity"; duration: UbuntuAnimation.FastDuration }
236237 NumberAnimation { properties: "itemOpacity"; duration: UbuntuAnimation.BriskDuration }
237238 SequentialAnimation {
239+ ScriptAction { script: if (index == launcherListView.count-1) launcherListView.flick(0, -launcherListView.clickFlickSpeed); }
238240 UbuntuNumberAnimation { properties: "height" }
241+ ScriptAction { script: if (index == launcherListView.count-1) launcherListView.flick(0, -launcherListView.clickFlickSpeed); }
239242 PropertyAction { target: dndArea; property: "postDragging"; value: false }
240243 PropertyAction { target: dndArea; property: "draggedIndex"; value: -1 }
241244 }
@@ -265,9 +268,6 @@ Item {
265268
266269 onPressed: {
267270 selectedItem = launcherListView.itemAt(mouseX, mouseY + launcherListView.realContentY)
268− if (selectedItem !== null) {
269− selectedItem.highlighted = true
270− }
271271 }
272272
273273 onClicked: {
@@ -302,7 +302,6 @@ Item {
302302 }
303303
304304 onCanceled: {
305− selectedItem.highlighted = false
306305 selectedItem = undefined;
307306 preDragging = false;
308307 postDragging = false;
@@ -320,7 +319,6 @@ Item {
320319 return;
321320 }
322321
323− selectedItem.highlighted = false
324322 selectedItem.dragging = false;
325323 selectedItem = undefined;
326324 preDragging = false;
@@ -332,6 +330,9 @@ Item {
332330 if (droppedIndex >= launcherListView.count - 2 && postDragging) {
333331 launcherListView.flick(0, -launcherListView.clickFlickSpeed);
334332 }
333+ if (droppedIndex == 0 && postDragging) {
334+ launcherListView.flick(0, launcherListView.clickFlickSpeed);
335+ }
335336 }
336337
337338 onPressAndHold: {
@@ -451,8 +452,7 @@ Item {
451452 height: itemHeight
452453 width: itemWidth
453454 rotation: root.rotation
454− highlighted: true
455− itemOpacity: 0.8
455+ itemOpacity: 0.9
456456
457457 function flatten() {
458458 fakeDragItemAnimation.start();
tests/qmltests/Launcher/tst_Launcher.qml+8−4
@@ -285,12 +285,16 @@ Item {
285285
286286 function test_dragndrop(data) {
287287 revealer.dragLauncherIntoView();
288− var draggedItem = findChild(launcher, "launcherDelegate5")
288+ var draggedItem = findChild(launcher, "launcherDelegate4")
289289 var item0 = findChild(launcher, "launcherDelegate0")
290290 var fakeDragItem = findChild(launcher, "fakeDragItem")
291291 var initialItemHeight = draggedItem.height
292− var item5 = LauncherModel.get(5).appId
293292 var item4 = LauncherModel.get(4).appId
293+ var item3 = LauncherModel.get(3).appId
294+
295+ var listView = findChild(launcher, "launcherListView");
296+ listView.flick(0, units.gu(200));
297+ tryCompare(listView, "flicking", false);
294298
295299 // Initial state
296300 compare(draggedItem.itemOpacity, 1, "Item's opacity is not 1 at beginning")
@@ -333,8 +337,8 @@ Item {
333337 }
334338
335339 waitForRendering(draggedItem)
336− compare(LauncherModel.get(5).appId, item4)
337− compare(LauncherModel.get(4).appId, item5)
340+ compare(LauncherModel.get(4).appId, item3)
341+ compare(LauncherModel.get(3).appId, item4)
338342 }
339343
340344 // Releasing and checking if initial values are restored