sync with mobilecomponents 9d8bf6d77d

- Fixes interactivity in context drawer.

- These are mostly cleanups that have been done pre-merge of these
components. This now is the state of master in plasma-mobile.

- makes navigation a bit more intuitive

Signed-off-by: Sebastian Kügler <sebas@kde.org>

qt-mobile/qml/mobilecomponents/ApplicationWindow.qml

@@ -38,9 +38,9 @@ ApplicationWindow {
     property alias initialPage: __pageStack.initialPage
 
     /**
-     * The stack used to allocate the pages nd to manage the transitions
+     * The stack used to allocate the pages and to manage the transitions
      * between them.
-     * It's using a PageRow, while having the same aPI as PageStack,
+     * It's using a PageRow, while having the same API as PageStack,
      * it positions the pages as adjacent columns, with as many columns
      * as can fit in the screen. An handheld device would usually have a single
      * fullscreen column, a tablet device would have many tiled columns.
@@ -57,11 +57,6 @@ ApplicationWindow {
                 event.accepted = true;
             }
         }
-        onLastVisiblePageChanged: {
-            if (lastVisiblePage != null) {
-                pop(lastVisiblePage)
-            }
-        }
     }
 
     property AbstractDrawer globalDrawer

qt-mobile/qml/mobilecomponents/ContextDrawer.qml

@@ -35,6 +35,7 @@ OverlayDrawer {
     contentItem: QtControls.ScrollView {
         ListView {
             id: menu
+            interactive: contentHeight > height
             model: {
                 if (root.actions.length == 0) {
                     return null;

qt-mobile/qml/mobilecomponents/GlobalDrawer.qml

@@ -46,7 +46,7 @@ OverlayDrawer {
 
             Layout.preferredWidth: title.implicitWidth
             Layout.preferredHeight: bannerImageSource != "" ? Math.max(title.implicitHeight, Math.floor(width / (sourceSize.width/sourceSize.height))) : title.implicitHeight
-            Layout.minimumHeight: Math.max(headingIcon.height, heading.height) + Units.smallSpacing*2
+            Layout.minimumHeight: Math.max(headingIcon.height, heading.height) + Units.smallSpacing * 2
 
             fillMode: Image.PreserveAspectCrop
             asynchronous: true
@@ -97,8 +97,8 @@ OverlayDrawer {
                     color: bannerImageSource != "" ? "white" : Theme.textColor
                 }
                 Item {
-                    height: parent.height
+                    height: 1
-                    Layout.minimumWidth: height
+                    Layout.minimumWidth: heading.height
                 }
             }
         }
@@ -157,9 +157,7 @@ OverlayDrawer {
                             source: "go-previous"
                         }
                         Label {
-                            // Weird, this doesn't work
+                            text: typeof i18n !== "undefined" ? i18n("Back") : "Back"
-                            //text: (typeof(i18n) != undefined) ? i18n("Back") : "Back"
-                            text: "Back"
                         }
                     }
                     onClicked: pageRow.pop()
@@ -167,7 +165,7 @@ OverlayDrawer {
                 delegate: ListItem {
                     enabled: true
                     RowLayout {
-                        height: implicitHeight + Units.smallSpacing*2
+                        height: implicitHeight + Units.smallSpacing * 2
                         anchors {
                             left: parent.left
                             right: parent.right

qt-mobile/qml/mobilecomponents/Heading.qml

@@ -30,12 +30,10 @@ import org.kde.plasma.mobilecomponents 0.2
  * Example usage:
  *
  * @code
- * import org.kde.plasma.extras 2.0 as PlasmaExtras
+ * import org.kde.plasma.mobilecomponents 0.2 as MobileComponents
  * [...]
  * Column {
- *     PlasmaExtras.Title { text: "Fruit sweetness on the rise" }
+ *     MobileComponents.Heading { text: "Apples in the sunlight"; level: 2 }
- *     PlasmaExtras.Heading { text: "Apples in the sunlight"; level: 2 }
- *     PlasmaExtras.Paragraph { text: "Long text about fruit and apples [...]" }
  *   [...]
  * }
  * @endcode

qt-mobile/qml/mobilecomponents/IconGrid.qml

@@ -28,11 +28,11 @@ Item {
     property Component delegate
     property QtObject model
 
-    property int pageSize: Math.floor(iconView.width/main.delegateWidth)*Math.floor(iconView.height/main.delegateHeight)
+    property int pageSize: Math.floor(iconView.width / main.delegateWidth) * Math.floor(iconView.height / main.delegateHeight)
-    property int delegateWidth: Units.iconSizes.huge + Units.gridUnit*2
+    property int delegateWidth: Units.iconSizes.huge + Units.gridUnit * 2
-    property int delegateHeight: Units.iconSizes.huge + Units.gridUnit*2
+    property int delegateHeight: Units.iconSizes.huge + Units.gridUnit * 2
     property alias currentPage: iconView.currentIndex
-    property int pagesCount: Math.ceil(model.count/pageSize)
+    property int pagesCount: Math.ceil(model.count / pageSize)
     property int count: model.count
     property alias contentX: iconView.contentX
     clip: true
@@ -47,7 +47,7 @@ Item {
         running: true
         interval: 100
         onTriggered: {
-            main.pageSize = Math.floor(iconView.width/main.delegateWidth)*Math.floor(iconView.height/main.delegateHeight)
+            main.pageSize = Math.floor(iconView.width / main.delegateWidth) * Math.floor(iconView.height / main.delegateHeight)
             if (iconView.currentItem) {
                 iconView.currentItem.width = iconView.width
                 iconView.currentItem.height = iconView.height
@@ -59,8 +59,8 @@ Item {
         id: iconView
         objectName: "iconView"
         pressDelay: 200
-        cacheBuffer: 100
+        cacheBuffer: Units.gridUnit * 8
-        highlightMoveDuration: 250
+        highlightMoveDuration: Units.shortDuration
         anchors.fill: parent
         onWidthChanged: resizeTimer.restart()
         onHeightChanged: resizeTimer.restart()
@@ -103,8 +103,8 @@ Item {
                     Repeater {
                         id: iconRepeater
                         model: pagedProxyModel
-                        property int columns: Math.min(count, Math.floor(delegatePage.width/main.delegateWidth))
+                        property int columns: Math.min(count, Math.floor(delegatePage.width / main.delegateWidth))
-                        property int suggestedWidth: main.delegateWidth*columns
+                        property int suggestedWidth: main.delegateWidth * columns
                         //property int suggestedHeight: main.delegateHeight*Math.floor(count/columns)
 
                         delegate: main.delegate
@@ -123,7 +123,7 @@ Item {
             right: parent.right
             bottom: parent.bottom
         }
-        height: Math.max( 16, iconView.height - Math.floor(iconView.height/delegateHeight)*delegateHeight)
+        height: Math.max(16, iconView.height - Math.floor(iconView.height / delegateHeight) * delegateHeight)
 
         property int pageCount: main.model ? Math.ceil(main.model.count/main.pageSize) : 0
 
@@ -145,15 +145,14 @@ Item {
                 Rectangle {
                     id: barRectangle
                     color: Theme.textColor
-                    opacity: 2.05
                     height: 4
                     radius: 2
                     anchors {
                         left: parent.left
                         right: parent.right
                         verticalCenter: parent.verticalCenter
-                        leftMargin: (parent.width/pageCount/2)
+                        leftMargin: (parent.width / pageCount / 2)
-                        rightMargin: (parent.width/pageCount/2)
+                        rightMargin: (parent.width / pageCount / 2)
                     }
                 }
                 Rectangle {
@@ -162,10 +161,10 @@ Item {
                     width: height
                     radius: 4
                     anchors.verticalCenter: parent.verticalCenter
-                    x: parent.width/(pageCount/(iconView.currentIndex+1)) - (parent.width/pageCount/2) - 4
+                    x: parent.width / (pageCount / (iconView.currentIndex+1)) - (parent.width / pageCount / 2) - 4
                     Behavior on x {
                         NumberAnimation {
-                            duration: 250
+                            duration: Units.shortDuration
                             easing.type: Easing.InOutQuad
                         }
                     }
@@ -192,7 +191,7 @@ Item {
             Item {
                 Row {
                     anchors.centerIn: parent
-                    spacing: 20
+                    spacing: units.gridUnit
 
                     Repeater {
                         model: scrollArea.pageCount
@@ -209,13 +208,13 @@ Item {
 
                             Behavior on scale {
                                 NumberAnimation {
-                                    duration: 250
+                                    duration: units.shortDuration
                                     easing.type: Easing.InOutQuad
                                 }
                             }
                             Behavior on opacity {
                                 NumberAnimation {
-                                    duration: 250
+                                    duration: units.shortDuration
                                     easing.type: Easing.InOutQuad
                                 }
                             }
@@ -223,7 +222,7 @@ Item {
                             MouseArea {
                                 anchors {
                                     fill: parent
-                                    margins: -10
+                                    margins: Units.gridUnit / 2
                                 }
 
                                 onClicked: {

qt-mobile/qml/mobilecomponents/ListItemWithActions.qml

@@ -50,7 +50,6 @@ Item {
      */
     signal clicked
 
-
     /**
      * The user pressed the item with the mouse and didn't release it for a
      * certain amount of time.
@@ -93,9 +92,9 @@ Item {
     }
 
     width: parent ? parent.width : childrenRect.width
-    height: paddingItem.childrenRect.height + Units.smallSpacing*2
+    height: paddingItem.childrenRect.height + Units.smallSpacing * 2
 
-    property int implicitHeight: paddingItem.childrenRect.height + Units.smallSpacing*2
+    property int implicitHeight: paddingItem.childrenRect.height + Units.smallSpacing * 2
 
 
     Rectangle {
@@ -114,7 +113,7 @@ Item {
                 verticalCenter: parent.verticalCenter
                 rightMargin: y
             }
-            height: Math.min( parent.height/1.5, Units.iconSizes.medium)
+            height: Math.min( parent.height / 1.5, Units.iconSizes.medium)
             property bool exclusive: false
             property Item checkedButton
             spacing: 0
@@ -151,10 +150,10 @@ Item {
     }
     InnerShadow {
         anchors.fill: parent
-        radius: Units.smallSpacing*2
+        radius: Units.smallSpacing * 2
         samples: 16
         horizontalOffset: 0
-        verticalOffset: Units.smallSpacing/2
+        verticalOffset: Units.smallSpacing / 2
         color: Qt.rgba(0, 0, 0, 0.3)
         source: background
     }
@@ -162,7 +161,7 @@ Item {
         id: shadow
         //TODO: depends from app layout
         property bool inverse: true
-        width: Units.smallSpacing*2
+        width: Units.smallSpacing * 2
         anchors {
             right: shadow.inverse ? undefined : itemMouse.left
             left: shadow.inverse ? itemMouse.right : undefined
@@ -210,7 +209,7 @@ Item {
             id : item
             color: listItem.checked || (itemMouse.pressed && itemMouse.changeBackgroundOnPress) ? Theme.highlightColor : Theme.viewBackgroundColor
             anchors.fill: parent
-            
+
             visible: listItem.ListView.view ? listItem.ListView.view.highlight === null : true
             Behavior on color {
                 ColorAnimation { duration: Units.longDuration }
@@ -242,14 +241,14 @@ Item {
                     if (itemMouse.x > -itemMouse.width/2) {
                         itemMouse.x = 0;
                     } else {
-                        itemMouse.x = -itemMouse.width + width*2
+                        itemMouse.x = -itemMouse.width + width * 2
                     }
                 }
                 onClicked: {
                     if (itemMouse.x < -itemMouse.width/2) {
                         itemMouse.x = 0;
                     } else {
-                        itemMouse.x = -itemMouse.width + width*2
+                        itemMouse.x = -itemMouse.width + width * 2
                     }
                 }
                 Icon {

qt-mobile/qml/mobilecomponents/OverlayDrawer.qml

@@ -28,14 +28,20 @@ Imports:
         QtQuick 2.1
 
 Description:
-        Overlay Drawers are used to expose additional UI elements needed for small secondary tasks for which the main UI elements are not needed. For example in Okular Active, an Overlay Drawer is used to display thumbnails of all pages within a document along with a search field. This is used for the distinct task of navigating to another page.
+        Overlay Drawers are used to expose additional UI elements needed for
+        small secondary tasks for which the main UI elements are not needed.
+        For example in Okular Active, an Overlay Drawer is used to display
+        thumbnails of all pages within a document along with a search field.
+        This is used for the distinct task of navigating to another page.
 
 Properties:
         bool opened:
-        If true the drawer is open showing the contents of the "drawer" component.
+        If true the drawer is open showing the contents of the "drawer"
+		component.
 
         Item page:
-        It's the default property. it's the main content of the drawer page, the part that is always shown
+        It's the default property. it's the main content of the drawer page,
+		the part that is always shown
 
         Item contentItem:
         It's the part that can be pulled in and out, will act as a sidebar.
@@ -218,7 +224,7 @@ AbstractDrawer {
             onStateChanged: open = (state != "Closed")
             property bool open: false
             onOpenChanged: {
-                if (drawerPage.children.length == 0) {
+                if (browserFrame.state == "Dragging" || drawerPage.children.length == 0) {
                     return;
                 }
 

qt-mobile/qml/mobilecomponents/PageRow.qml

@@ -82,6 +82,7 @@ Item {
     // Returns the page instance.
     function push(page, properties, immediate)
     {
+        pop(lastVisiblePage, true);
         scrollAnimation.running = false;
         var item = Engine.push(page, properties, false, immediate)
         scrollToLevel(depth)
@@ -102,6 +103,7 @@ Item {
     // See push() for details.
     function replace(page, properties, immediate)
     {
+        pop(lastVisiblePage, true);
         scrollAnimation.running = false;
         var item = Engine.push(page, properties, true, immediate);
         scrollToLevel(depth)
@@ -147,6 +149,11 @@ Item {
         }
         ScriptAction {
             script: {
+                //At startup sometimes the contentX is NaN for an instant
+                if (isNaN(mainFlickable.contentX)) {
+                    return;
+                }
+
                 actualRoot.lastVisiblePage = root.children[Math.floor((mainFlickable.contentX + mainFlickable.width - 1)/columnWidth)].page
             }
         }
@@ -211,8 +218,8 @@ Item {
             contentHeight: height
             Row {
                 id: root
-                spacing: -100
+                spacing: -Units.gridUnit * 8
-                width: Math.max((depth-1+children[children.length-1].takenColumns) * columnWidth, childrenRect.width - 100) 
+                width: Math.max((depth-1+children[children.length-1].takenColumns) * columnWidth, childrenRect.width - Units.gridUnit * 8)
 
                 height: parent.height
                 Behavior on width {
@@ -238,7 +245,7 @@ Item {
         Item {
             id: container
 
-            implicitWidth: actualContainer.width + 100
+            implicitWidth: actualContainer.width + Units.gridUnit * 8
             width: implicitWidth
             height: parent ? parent.height : 0
 
@@ -293,7 +300,7 @@ Item {
                     top: parent.top
                     bottom: parent.bottom
                     right: parent.right
-                    rightMargin: 100
+                    rightMargin: Units.gridUnit * 8
                 }
 
                 property int takenColumns: {
@@ -413,13 +420,13 @@ Item {
                 State {
                     name: "Left"
                     PropertyChanges { target: container; opacity: 0 }
-                    PropertyChanges { target: container; width: 100}
+                    PropertyChanges { target: container; width: Units.gridUnit * 8}
                 },
                 // Start state for push entry, end state for pop exit.
                 State {
                     name: "Right"
                     PropertyChanges { target: container; opacity: 0 }
-                    PropertyChanges { target: container; width: 100}
+                    PropertyChanges { target: container; width: Units.gridUnit * 8}
                 },
                 // Inactive state.
                 State {

qt-mobile/qml/mobilecomponents/private/ActionButton.qml

@@ -25,6 +25,8 @@ import org.kde.plasma.mobilecomponents 0.2
 MouseArea {
     id: button
     property alias iconSource: icon.source
+    property bool checkable: false
+    property bool checked: false
     Layout.minimumWidth: Units.iconSizes.large
     Layout.maximumWidth: Layout.minimumWidth
     implicitWidth: Units.iconSizes.large
@@ -35,9 +37,9 @@ MouseArea {
         minimumX: contextDrawer ? 0 : parent.width/2 - width/2
         maximumX: globalDrawer ? parent.width : parent.width/2 - width/2
     }
-    function toggle() {
+    function toggleVisibility() {
         showAnimation.running = false;
-        if (transform[0].y < button.height) {
+        if (translateTransform.y < button.height) {
             showAnimation.to = button.height;
         } else {
             showAnimation.to = 0;
@@ -45,7 +47,9 @@ MouseArea {
         showAnimation.running = true;
     }
 
-    transform: Translate {}
+    transform: Translate {
+        id: translateTransform
+    }
     onReleased: {
         if (globalDrawer && x > Math.min(parent.width/4*3, parent.width/2 + globalDrawer.contentItem.width/2)) {
             globalDrawer.open();
@@ -66,6 +70,11 @@ MouseArea {
             }
         }
     }
+    onClicked: {
+        if (checkable) {
+            checked = !checked;
+        }
+    }
     Connections {
         target: globalDrawer
         onPositionChanged: {
@@ -99,7 +108,7 @@ MouseArea {
 
     NumberAnimation {
         id: showAnimation
-        target: button.transform[0]
+        target: translateTransform
         properties: "y"
         duration: Units.longDuration
         easing.type: Easing.InOutQuad
@@ -116,7 +125,7 @@ MouseArea {
             anchors.centerIn: parent
             height: parent.height - Units.smallSpacing*2
             width: height
-            color: button.pressed ? Theme.highlightColor : Theme.backgroundColor
+            color: button.pressed || button.checked ? Theme.highlightColor : Theme.backgroundColor
             Icon {
                 id: icon
                 anchors {