prototype for top panel following the mockup

prototype following the mocups here
http://forums.plasma-mobile.org/showthread.php?tid=11863

if it's decided against this, revert just this commit

containments/panel/contents/ui/main.qml

@@ -45,7 +45,7 @@ PlasmaCore.ColorScope {
     }
 
     function addApplet(applet, x, y) {
-        var container = appletContainerComponent.createObject(tabGroup)
+        var container = appletContainerComponent.createObject(layout)
         container.visible = true
         print("Applet added: " + applet)
 
@@ -53,22 +53,48 @@ PlasmaCore.ColorScope {
         var appletHeight = applet.height;
         applet.parent = container;
         container.applet = applet;
-        applet.anchors.fill = container;
+        //applet.anchors.fill = container;
+        applet.width = units.iconSizes.medium
+        applet.height = units.iconSizes.medium
         applet.visible = true;
         container.visible = true;
 
-        //container.parent = tabs;
+        // If the provided position is valid, use it.
+        if (x >= 0 && y >= 0) {
+            var index = LayoutManager.insertAtCoordinates(container, x , y);
 
-        //The tab
-        var tab = tabComponent.createObject(tabBar.layout);
-        tab.iconSource = applet.icon;
-        tab.tab = container;
+        // Fall through to determining an appropriate insert position.
+        } else {
+            var before = null;
+            container.animationsEnabled = false;
+
+            if (lastSpacer.parent === layout) {
+                before = lastSpacer;
+            }
+
+            if (before) {
+                LayoutManager.insertBefore(before, container);
+
+            // Fall through to adding at the end.
+            } else {
+                container.parent = layout;
+            }
+
+            //event compress the enable of animations
+            //startupTimer.restart();
+        }
+
+        if (applet.Layout.fillWidth) {
+            lastSpacer.parent = root;
+        } else {
+            lastSpacer.parent = layout;
+        }
     }
 
     Component.onCompleted: {
         LayoutManager.plasmoid = plasmoid;
         LayoutManager.root = root;
-        LayoutManager.layout = appletsLayout;
+        LayoutManager.layout = layout;
         LayoutManager.restore();
     }
 
@@ -79,12 +105,21 @@ PlasmaCore.ColorScope {
  
     Component {
         id: appletContainerComponent
-        Item {
+        Rectangle {
+            color: "grey"
             //not used yet
             property bool animationsEnabled: false
             property Item applet
             Layout.fillWidth: true
-            Layout.fillHeight: true
+           // Layout.fillHeight: true
+           Layout.minimumHeight: applet && applet.expanded ? units.gridUnit * 20 : units.iconSizes.medium
+           Layout.maximumHeight: Layout.minimumHeight
+           Behavior on height {
+               NumberAnimation {
+                   duration: units.shortDuration
+                   easing.type: Easing.InOutQuad
+               }
+           }
         }
     }
 
@@ -248,26 +283,14 @@ PlasmaCore.ColorScope {
                 id: panelContents
                 anchors.fill: parent
 
-                PlasmaComponents.TabBar {
-                    id: tabBar
-                    visible: plasmoid.applets.count > 1
-                    anchors {
-                        left: parent.left
-                        top: parent.top
-                        right: parent.right
-                        margins: units.smallSpacing
-                    }
-                    height: units.iconSizes.huge
-                }
-                PlasmaComponents.TabGroup {
-                    id: tabGroup
-                    anchors {
-                        left: parent.left
-                        top: plasmoid.applets.count > 1 ? tabBar.bottom : parent.top
-                        right: parent.right
-                        bottom: parent.bottom
-                        margins: units.smallSpacing
+                Item {
+                    id: lastSpacer
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
                 }
+                ColumnLayout {
+                    id: layout
+                    anchors.fill: parent
                 }
             }
         }

shell/contents/applet/CompactApplet.qml

@@ -15,7 +15,7 @@
  *  along with this program; if not, write to the Free Software
  *  Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  2.010-1301, USA.
  */
-import QtQuick 2.0
+import QtQuick 2.4
 import QtQuick.Layouts 1.1
 import QtQuick.Window 2.0
 
@@ -53,23 +53,23 @@ PlasmaCore.ToolTipArea {
         }
         //if the fullRepresentation size was restored to a stored size, or if is dragged from the desktop, restore popup size
         if (fullRepresentation.width > 0) {
-            popupWindow.mainItem.width = fullRepresentation.width;
+            appletParent.width = fullRepresentation.width;
         } else if (fullRepresentation.Layout && fullRepresentation.Layout.preferredWidth > 0) {
-            popupWindow.mainItem.width = fullRepresentation.Layout.preferredWidth
+            appletParent.width = fullRepresentation.Layout.preferredWidth
         } else if (fullRepresentation.implicitWidth > 0) {
-            popupWindow.mainItem.width = fullRepresentation.implicitWidth
+            appletParent.width = fullRepresentation.implicitWidth
         } else {
-            popupWindow.mainItem.width = theme.mSize(theme.defaultFont).width * 35
+            appletParent.width = theme.mSize(theme.defaultFont).width * 35
         }
 
         if (fullRepresentation.height > 0) {
-            popupWindow.mainItem.height = fullRepresentation.height;
+            appletParent.height = fullRepresentation.height;
         } else if (fullRepresentation.Layout && fullRepresentation.Layout.preferredHeight > 0) {
-            popupWindow.mainItem.height = fullRepresentation.Layout.preferredHeight
+            appletParent.height = fullRepresentation.Layout.preferredHeight
         } else if (fullRepresentation.implicitHeight > 0) {
-            popupWindow.mainItem.height = fullRepresentation.implicitHeight
+            appletParent.height = fullRepresentation.implicitHeight
         } else {
-            popupWindow.mainItem.height = theme.mSize(theme.defaultFont).height * 25
+            appletParent.height = theme.mSize(theme.defaultFont).height * 25
         }
 
         fullRepresentation.parent = appletParent;
@@ -116,38 +116,21 @@ PlasmaCore.ToolTipArea {
         onTriggered: plasmoid.expanded = popupWindow.visible;
     }
 
-    PlasmaCore.Dialog {
-        id: popupWindow
-        objectName: "popupWindow"
-        flags: Qt.WindowStaysOnTopHint
-        visible: plasmoid.expanded && fullRepresentation
-        visualParent: compactRepresentation ? compactRepresentation : null
-        location: plasmoid.location
-        hideOnWindowDeactivate: plasmoid.hideOnWindowDeactivate
-
-        property var oldStatus: PlasmaCore.Types.UnknownStatus
-
-        //It's a MouseEventListener to get all the events, so the eventfilter will be able to catch them
-        mainItem: MouseEventListener {
+    MouseEventListener {
         id: appletParent
+        opacity: plasmoid.expanded ? 1 : 0
+        anchors.top: parent.bottom
         Layout.minimumWidth: (fullRepresentation && fullRepresentation.Layout) ? fullRepresentation.Layout.minimumWidth : 0
         Layout.minimumHeight: (fullRepresentation && fullRepresentation.Layout) ? fullRepresentation.Layout.minimumHeight: 0
         Layout.maximumWidth: (fullRepresentation && fullRepresentation.Layout) ? fullRepresentation.Layout.maximumWidth : Infinity
         Layout.maximumHeight: (fullRepresentation && fullRepresentation.Layout) ? fullRepresentation.Layout.maximumHeight: Infinity
-        }
 
-        onVisibleChanged: {
-            if (!visible) {
-                expandedSync.restart();
-                plasmoid.status = oldStatus;
-            } else {
-                oldStatus = plasmoid.status;
-                plasmoid.status = PlasmaCore.Types.RequiresAttentionStatus;
-                // This call currently fails and complains at runtime:
-                // QWindow::setWindowState: QWindow::setWindowState does not accept Qt::WindowActive
-                popupWindow.requestActivate();
+        Behavior on opacity {
+            OpacityAnimator {
+                duration: units.shortDuration
+                easing.type: Easing.InOutQuad
+            }
         }
     }
 
-    }
 }