@@ -131,19 +131,28 @@ Item {
131131 property int sideStageWidth: units.gu(40)
132132 property bool sideStageVisible: priv.sideStageAppId
133133
134+ // Phase of the animation:
135+ // 0: Starting from right edge, a new app (index 1) comes in from the right
136+ // 1: The app has reached the first snap position.
137+ // 2: The list is dragged further and snaps into the spread view when entering phase 2
134138 property int phase
135139
136− property int phase0Width: sideStageWidth
137− property int phase1Width: sideStageWidth
140+ readonly property int phase0Width: sideStageWidth
141+ readonly property int phase1Width: sideStageWidth
138142
139− property real positionMarker1: 0.2
140− property real positionMarker2: sideStageWidth / spreadView.width
141− property real positionMarker3: 0.6
142− property real positionMarker4: 0.8
143+ // Those markers mark the various positions in the spread (ratio to screen width from right to left):
144+ // 0 - 1: following finger, snap back to the beginning on release
145+ readonly property real positionMarker1: 0.2
146+ // 1 - 2: curved snapping movement, snap to nextInStack on release
147+ readonly property real positionMarker2: sideStageWidth / spreadView.width
148+ // 2 - 3: movement follows finger, snaps to phase 2 (full spread) on release
149+ readonly property real positionMarker3: 0.6
150+ // passing 3, we detach movement from the finger and snap to phase 2 (full spread)
151+ readonly property real positionMarker4: 0.8
143152
144− property int startSnapPosition: phase0Width * 0.5
145− property int endSnapPosition: phase0Width * 0.75
146− property real snapPosition: 0.75
153+ readonly property int startSnapPosition: phase0Width * 0.5
154+ readonly property int endSnapPosition: phase0Width * 0.75
155+ readonly property real snapPosition: 0.75
147156
148157 property int selectedIndex: -1
149158 property int draggedIndex: -1
@@ -187,18 +196,18 @@ Item {
187196
188197 states: [
189198 State {
190− name: "invalid"
199+ name: "empty"
191200 },
192201 State {
193202 name: "main"
194203 },
195− State {
204+ State { // Side Stage only in overlay mode
196205 name: "overlay"
197206 },
198− State {
207+ State { // Main Stage and Side Stage in overlay mode
199208 name: "mainAndOverlay"
200209 },
201− State {
210+ State { // Main Stage and Side Stage in split mode
202211 name: "mainAndSplit"
203212 }
204213 ]
@@ -212,7 +221,7 @@ Item {
212221 if (priv.mainStageAppId && priv.sideStageAppId) {
213222 return "mainAndOverlay";
214223 }
215− return "invalid";
224+ return "empty";
216225 }
217226
218227 onContentXChanged: {
@@ -254,32 +263,47 @@ Item {
254263
255264 var isActive = app.appId == priv.mainStageAppId || app.appId == priv.sideStageAppId;
256265 if (isActive && app.stage == ApplicationInfoInterface.MainStage) {
266+ // if this app is active, and its the MainStage, always put it to index 0
257267 return 0;
258268 }
259269 if (isActive && app.stage == ApplicationInfoInterface.SideStage) {
260270 if (!priv.mainStageAppId) {
261− // only have SS apps running
271+ // Only have SS apps running. Put the active one at 0
262272 return 0;
263273 }
264274
275+ // Precondition now: There's an active MS app and this is SS app:
265276 if (spreadView.nextInStack >= 0 && ApplicationManager.get(spreadView.nextInStack).stage == ApplicationInfoInterface.MainStage) {
277+ // If the next app coming from the right is a MS app, we need to elevate this SS ap above it.
278+ // Put it to at least level 2, or higher if there's more apps coming in before this one.
266279 return Math.max(index, 2);
267280 } else {
281+ // if this is no next app to come in from the right, place this one at index 1, just on top the active MS app.
268282 return 1;
269283 }
270284 }
271285 if (index <= 2 && app.stage == ApplicationInfoInterface.MainStage && priv.sideStageAppId) {
286+ // Ok, this is an inactive MS app. If there's an active SS app around, we need to place this one
287+ // in between the active MS app and the active SS app, so that it comes in from there when dragging from the right.
288+ // If there's now active SS app, just leave it where it is.
272289 return priv.indexOf(priv.sideStageAppId) < index ? index - 1 : index;
273290 }
274291 if (index == spreadView.nextInStack && app.stage == ApplicationInfoInterface.SideStage) {
292+ // This is a SS app and the next one to come in from the right:
275293 if (priv.sideStageAppId && priv.mainStageAppId) {
294+ // If there's both, an active MS and an active SS app, put this one right on top of that
276295 return 2;
277296 }
297+ // Or if there's only one other active app, put it on top of that.
298+ // The case that there isn't any other active app is already handled above.
278299 return 1;
279300 }
280301 if (index == 2 && spreadView.nextInStack == 1 && priv.sideStageAppId) {
302+ // If its index 2 but not the next one to come in, it means
303+ // we've pulled another one down to index 2. Move this one up to 2 instead.
281304 return 3;
282305 }
306+ // don't touch all others... (mostly index > 3 + simple cases where the above doesn't shuffle much)
283307 return index;
284308 }
285309