Git commit ca1d2a41dc9fcc3eadf357d9e93725c5c7106db6 by Marco Martin.
Committed on 28/02/2011 at 23:18.
Pushed by mart into branch 'master'.

same systray panel in mobile and tablet

M  +82   -34   shell/data/plasma-tablet-homescreen/SystrayPanel.qml     

http://commits.kde.org/plasma-mobile/ca1d2a41dc9fcc3eadf357d9e93725c5c7106db6

diff --git a/shell/data/plasma-tablet-homescreen/SystrayPanel.qml b/shell/data/plasma-tablet-homescreen/SystrayPanel.qml
index e5b0690..2567ce6 100644
--- a/shell/data/plasma-tablet-homescreen/SystrayPanel.qml
+++ b/shell/data/plasma-tablet-homescreen/SystrayPanel.qml
@@ -21,14 +21,71 @@ import Qt 4.7
 import org.kde.plasma.core 0.1 as PlasmaCore
 
 Item {
-    id: systraypanel;
+    id: systrayPanel;
     state: "passive";
 
+    PlasmaCore.FrameSvgItem {
+        id: hideButtonBackground
+        anchors.top: systrayBackground.bottom
+        anchors.topMargin: -10
+        anchors.horizontalCenter: systrayBackground.horizontalCenter
+        width: 128
+        height: 58
+        imagePath: "widgets/background"
+        enabledBorders: "LeftBorder|RightBorder|BottomBorder"
+        opacity: systrayPanel.state == "active"?1:0
+
+        Behavior on opacity {
+            NumberAnimation { duration: 500 }
+        }
+
+        PlasmaCore.SvgItem {
+            anchors.centerIn: parent
+            /*anchors.horizontalCenter: parent.horizontalCenter
+            anchors.top: parent.bottom*/
+            width: 48
+            height: 48
+
+            svg: PlasmaCore.Svg {
+                imagePath: "widgets/arrows"
+            }
+            elementId: "up-arrow"
+            MouseArea {
+                anchors.fill: parent
+                anchors.bottomMargin: -16
+                anchors.leftMargin: -16
+                anchors.rightMargin: -16
+                onClicked: {
+                    systrayPanel.state = "passive"
+                }
+            }
+        }
+    }
+    PlasmaCore.FrameSvgItem {
+        id: systrayBackground
+        anchors.fill: systrayPanel
+        imagePath: "widgets/background"
+        enabledBorders: width < systrayPanel.parent.width?"LeftBorder|RightBorder|BottomBorder":"BottomBorder"
+        Item {
+            id: containmentParent
+            anchors.fill: parent
+            anchors.topMargin: systrayBackground.margins.top
+            anchors.bottomMargin: systrayBackground.margins.bottom
+            anchors.leftMargin: systrayBackground.margins.left
+            anchors.rightMargin: systrayBackground.margins.right
+
+            Behavior on opacity {
+                NumberAnimation { duration: 200 }
+            }
+        }
+        z: 10
+    }
+
     property QGraphicsWidget containment
 
     onContainmentChanged: {
+        containment.parent = containmentParent
         timer.running = true
-        containment.stateChanged.connect(updateState)
     }
     onHeightChanged: resizeTimer.running = true
     onWidthChanged: resizeTimer.running = true
@@ -40,42 +97,49 @@ Item {
 
     Timer {
         id: resizeTimer
-        interval: 100
+        interval: 500
         running: false
         repeat: false
         onTriggered: resizeContainment()
+        onRunningChanged: {
+            if (running) {
+                containmentParent.opacity = 0
+            } else {
+                containmentParent.opacity = 1
+            }
+        }
      }
 
     function resizeContainment()
     {
         containment.x = 0
         containment.y = 0
-        containment.height = height
-        containment.width = width
+        containment.height = containmentParent.height
+        containment.width = containmentParent.width
     }
 
     states: [
         State {
             name: "active";
             PropertyChanges {
-                target: systraypanel;
+                target: systrayPanel;
                 height: 100;
                 width: parent.width;
             }
             PropertyChanges {
-                target: systraypanelarea;
+                target: systrayPanelArea;
                 z : 0;
             }
         },
         State {
             name: "passive";
             PropertyChanges {
-                target: systraypanel;
+                target: systrayPanel;
                 height: 40;
-                width: 300;
+                width: 400;
             }
             PropertyChanges {
-                target: systraypanelarea;
+                target: systrayPanelArea;
                 z : 500;
             }
         }
@@ -84,40 +148,24 @@ Item {
 
     transitions: [
         Transition {
-            from: "passive"; to: "active"; reversible: true;
+            from: "passive"
+            to: "active"
+            reversible: true
             SequentialAnimation {
                 NumberAnimation {
-                    properties: "x, width, height";
-                    duration: 500;
-                    easing.type: Easing.InOutQuad;
+                    properties: "x, width, height"
+                    duration: 500
+                    easing.type: Easing.InOutQuad
                 }
             }
         }
     ]
     MouseArea {
-        id: systraypanelarea;
+        id: systrayPanelArea;
         anchors.fill: parent;
         onClicked: {
-            systraypanel.state = (systraypanel.state == "active") ? "passive" : "active";
-            containment.state = systraypanel.state
+            systrayPanel.state = (systrayPanel.state == "active") ? "passive" : "active";
         }
         z: 500;
     }
-    PlasmaCore.SvgItem {
-        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.top: parent.bottom
-        width: 48
-        height: 48
-        visible: systraypanel.state == "active"
-        svg: PlasmaCore.Svg {
-            imagePath: "widgets/arrows"
-        }
-        elementId: "up-arrow"
-        MouseArea {
-            anchors.fill: parent
-            onClicked: {
-                systraypanel.state = "passive"
-            }
-        }
-    }
 }