=== modified file 'modules/Ubuntu/Components/ListItems/Empty.qml' --- modules/Ubuntu/Components/ListItems/Empty.qml 2013-06-12 18:22:07 +0000 +++ modules/Ubuntu/Components/ListItems/Empty.qml 2013-06-29 03:11:29 +0000 @@ -96,12 +96,21 @@ /*! \preliminary + List orientation. + This determines whether a left/right or up/down swipe will act + as the "delete" gesture. This is useful for things such as + horizontal tab bars, such as in the Ubuntu Touch browser. + Default value if we can't find the parent view is vertical. + */ + readonly property string orientation: (ListView.view)? ListView.view.orientation : ListView.Vertical + + /*! + \preliminary \qmlproperty string swipingState - The current swiping state ("SwipingLeft", "SwipingRight", "") + The current swiping state ("SwipingLeft", "SwipingRight", "SwipingUp", "SwipingDown", "") */ readonly property alias swipingState: backgroundIndicator.state - /*! \preliminary This handler is called when the item is removed from the list @@ -116,6 +125,12 @@ property int __height: units.gu(6) /*! + \internal + Defines the default width of the ListItem, so implicitWidth can be calculated similarly to height. + */ + property int __width: units.gu(31) + + /*! \preliminary Set to show or hide the thin bottom divider line (drawn by the \l ThinDivider component). This line is shown by default except in cases where this item is the delegate of a ListView. @@ -175,8 +190,11 @@ property real __contentsMargins: units.gu(2) width: parent ? parent.width : units.gu(31) + implicitHeight: priv.removed ? 0 : __height + bottomDividerLine.height - __mouseArea.drag.axis: Drag.XAxis + implicitWidth: priv.removed ? 0 : __width + + __mouseArea.drag.axis: (orientation == ListView.Vertical)? Drag.XAxis : Drag.YAxis // Keep compatible with the old version height: implicitHeight @@ -193,7 +211,7 @@ /*! \internal Defines the offset limit to consider the item removed */ - readonly property int itemMoveOffset: width * 0.3 + readonly property int itemMoveOffset: ( (orientation == ListView.Vertical)? width : height) * 0.3 /*! \internal Defines the inital pressed possition @@ -223,6 +241,9 @@ held = true __mouseArea.drag.maximumX = parent.width __mouseArea.drag.minimumX = (parent.width * -1) + __mouseArea.drag.maximumY = parent.height + __mouseArea.drag.minimumY = (parent.height * -1) // It doesn't hurt to set these even if they aren't used. + backgroundIndicator.visible = true } @@ -252,21 +273,42 @@ notify the releaso of the mouse button and the end of the drag operation */ function endDrag() { - if (Math.abs(body.x) < itemMoveOffset && held == true) { - held = false - removeItem = false - if (body.x == 0) { - resetDrag() - } else { - body.x = 0; + // We set and use different properties based on whether it's orientated vertically or horizontally. + if (orientation == ListView.Vertical) { + if (Math.abs(body.x) < itemMoveOffset && held == true) { + held = false + removeItem = false + if (body.x == 0) { + resetDrag() + } else { + body.x = 0; + } + } else if (held == true) { + held = false + removeItem = true + if (body.x > 0) { + body.x = body.width + } else { + body.x = body.width * -1 + } } - } else if (held == true) { - held = false - removeItem = true - if (body.x > 0) { - body.x = body.width - } else { - body.x = body.width * -1 + } else if (orientation == ListView.Horizontal) { + if (Math.abs(body.y) < itemMoveOffset && held == true) { + held = false + removeItem = false + if (body.y == 0) { + resetDrag() + } else { + body.y = 0 + } + } else if (held == true) { + held = false + removeItem = true + if (body.y > 0) { + body.y = body.height + } else { + body.y = body.height * -1 + } } } } @@ -279,10 +321,11 @@ visible: !priv.removed && emptyListItem.swipingState === "" ? emptyListItem.selected || (emptyListItem.highlightWhenPressed && emptyListItem.pressed) : false anchors { left: parent.left - right: parent.right top: parent.top } height: emptyListItem.height - bottomDividerLine.height + width: emptyListItem.width + color: "#E6E6E6" opacity: 0.7 } @@ -291,14 +334,14 @@ ThinDivider { id: bottomDividerLine anchors.bottom: parent.bottom - visible: showDivider && !priv.removed + visible: showDivider && !priv.removed && (orientation == ListView.Vertical) // Only makes sense for vertical lists. } Item { id: bodyMargins - clip: body.x != 0 - visible: body.height > 0 + clip: body.x != 0 && body.y != 0 + visible: body.height > 0 && body.width > 0 anchors { left: parent.left right: parent.right @@ -309,15 +352,36 @@ Item { id: body - anchors { - top: parent.top - bottom: parent.bottom + Component.onCompleted: { + // We need to set our anchors based on our orientation. + // If we don't do this, the ListItem just gets stuck, and you can't drag it anywhere. + if (orientation == ListView.Vertical) { + anchors.top = parent.top + anchors.bottom = parent.bottom + } else if (orientation == ListView.Horizontal) { + anchors.left = parent.left + anchors.right = parent.right + } } width: parent.width + height: parent.height Behavior on x { - enabled: !priv.held + enabled: !priv.held && (orientation == ListView.Vertical) + SequentialAnimation { + UbuntuNumberAnimation { + } + ScriptAction { + script: { + priv.commitDrag() + } + } + } + } + + Behavior on y { + enabled: !priv.held && (orientation == ListView.Horizontal) SequentialAnimation { UbuntuNumberAnimation { } @@ -330,10 +394,23 @@ } onXChanged: { - if (x > 0) { - backgroundIndicator.state = "SwipingRight" - } else { - backgroundIndicator.state = "SwipingLeft" + // Only change this state if we're vertical. + if (orientation == ListView.Vertical) { + if (x > 0) { + backgroundIndicator.state = "SwipingRight" + } else { + backgroundIndicator.state = "SwipingLeft" + } + } + } + + onYChanged: { + if (orientation == ListView.Horizontal) { + if (y > 0) { + backgroundIndicator.state = "SwipingDown" + } else { + backgroundIndicator.state = "SwipingUp" + } } } } @@ -373,6 +450,30 @@ target: backgroundIndicator opacity: 1.0 } + }, + State { + name: "SwipingDown" + AnchorChanges { + target: backgroundIndicator + anchors.top: parent.top + anchors.bottom: body.top + } + PropertyChanges { + target: backgroundIndicator + opacity: 1.0 + } + }, + State { + name: "SwipingUp" + AnchorChanges { + target: backgroundIndicator + anchors.top: body.bottom + anchors.bottom: parent.bottom + } + PropertyChanges { + target: backgroundIndicator + opacity: 1.0 + } } ] } @@ -384,7 +485,7 @@ running: false UbuntuNumberAnimation { target: emptyListItem - property: "implicitHeight" + property: (orientation == ListView.Vertical)? "implicitHeight" : "width" to: 0 } ScriptAction { @@ -400,7 +501,7 @@ target: (emptyListItem.removable) ? __mouseArea : null onPressed: { - priv.pressedPosition = mouse.x + priv.pressedPosition = (orientation == ListView.Vertical)? mouse.x : mouse.y } onMouseXChanged: { @@ -410,6 +511,14 @@ } } + onMouseYChanged: { + var mouseOffset = priv.pressedPosition - mouse.y + if ((priv.pressedPosition != -1) && !priv.held && ( Math.abs(mouseOffset) >= priv.mouseMoveOffset)) { + priv.startDrag(); + } + } + + onReleased: { priv.endDrag(); }