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/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 {