finish the new layouting prototype

containments/panel/contents/ui/main.qml

@@ -38,6 +38,7 @@ PlasmaCore.ColorScope {
     property Item toolBox
     property int buttonHeight: width/4
     property bool reorderingApps: false
+    property QtObject expandedApplet
 
     Containment.onAppletAdded: {
         addApplet(applet, x, y);
@@ -54,7 +55,8 @@ PlasmaCore.ColorScope {
         applet.parent = container;
         container.applet = applet;
         //applet.anchors.fill = container;
-        applet.width = units.iconSizes.medium
+        applet.anchors.left = container.left;
+        applet.anchors.right = container.right;
         applet.height = units.iconSizes.medium
         applet.visible = true;
         container.visible = true;
@@ -66,7 +68,6 @@ PlasmaCore.ColorScope {
         // Fall through to determining an appropriate insert position.
         } else {
             var before = null;
-            container.animationsEnabled = false;
 
             if (lastSpacer.parent === layout) {
                 before = lastSpacer;
@@ -105,21 +106,30 @@ PlasmaCore.ColorScope {
  
     Component {
         id: appletContainerComponent
-        Rectangle {
-            color: "grey"
-            //not used yet
-            property bool animationsEnabled: false
+        Item {
             property Item applet
             Layout.fillWidth: 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
-               }
-           }
+            clip: true
+            anchors {
+               left: parent.left
+               right: parent.right
+            }
+            height: applet && applet.expanded ? Math.max(applet.fullRepresentationItem.Layout.minimumHeight, units.iconSizes.medium) : units.iconSizes.medium
+            Behavior on height {
+                NumberAnimation {
+                    duration: units.shortDuration
+                    easing.type: Easing.InOutQuad
+                }
+            }
+            Connections {
+                target: applet
+                onExpandedChanged: {
+                    if (root.expandedApplet) {
+                        root.expandedApplet.expanded = false;
+                    }
+                    root.expandedApplet = applet;
+                }
+            }
         }
     }
 
@@ -282,15 +292,17 @@ PlasmaCore.ColorScope {
             contents: Item {
                 id: panelContents
                 anchors.fill: parent
+                clip: true
 
                 Item {
                     id: lastSpacer
                     Layout.fillWidth: true
                     Layout.fillHeight: true
                 }
-                ColumnLayout {
+                Column {
                     id: layout
                     anchors.fill: parent
+                    spacing: units.smallSpacing
                 }
             }
         }

shell/contents/applet/CompactApplet.qml

@@ -51,7 +51,7 @@ PlasmaCore.ToolTipArea {
         if (!fullRepresentation) {
             return;
         }
-        //if the fullRepresentation size was restored to a stored size, or if is dragged from the desktop, restore popup size
+       /* //if the fullRepresentation size was restored to a stored size, or if is dragged from the desktop, restore popup size
         if (fullRepresentation.width > 0) {
             appletParent.width = fullRepresentation.width;
         } else if (fullRepresentation.Layout && fullRepresentation.Layout.preferredWidth > 0) {
@@ -70,40 +70,19 @@ PlasmaCore.ToolTipArea {
             appletParent.height = fullRepresentation.implicitHeight
         } else {
             appletParent.height = theme.mSize(theme.defaultFont).height * 25
-        }
+        }*/
 
         fullRepresentation.parent = appletParent;
         fullRepresentation.anchors.fill = fullRepresentation.parent;
     }
 
-    PlasmaCore.FrameSvgItem {
+    Rectangle {
         id: expandedItem
         anchors.fill: parent
-        imagePath: "widgets/tabbar"
-        visible: fromCurrentTheme
-        prefix: {
-            var prefix;
-            switch (plasmoid.location) {
-                case PlasmaCore.Types.LeftEdge:
-                    prefix = "west-active-tab";
-                    break;
-                case PlasmaCore.Types.TopEdge:
-                    prefix = "north-active-tab";
-                    break;
-                case PlasmaCore.Types.RightEdge:
-                    prefix = "east-active-tab";
-                    break;
-                default:
-                    prefix = "south-active-tab";
-                }
-                if (!hasElementPrefix(prefix)) {
-                    prefix = "active-tab";
-                }
-                return prefix;
-            }
-        opacity: plasmoid.expanded ? 1 : 0
+        color: PlasmaCore.ColorScope.highlightColor
+        opacity: plasmoid.expanded ? 0.3 : 0
         Behavior on opacity {
-            NumberAnimation {
+            OpacityAnimator {
                 duration: units.shortDuration
                 easing.type: Easing.InOutQuad
             }
@@ -116,7 +95,7 @@ PlasmaCore.ToolTipArea {
         onTriggered: plasmoid.expanded = popupWindow.visible;
     }
 
-    MouseEventListener {
+    Item {
         id: appletParent
         opacity: plasmoid.expanded ? 1 : 0
         anchors.top: parent.bottom
@@ -124,6 +103,8 @@ PlasmaCore.ToolTipArea {
         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
+        width: Math.max(parent.width, Layout.minimumWidth)
+        height: Layout.minimumHeight
 
         Behavior on opacity {
             OpacityAnimator {

shell/contents/applet/DefaultCompactRepresentation.qml

@@ -19,9 +19,11 @@
 import QtQuick 2.0
 import QtQuick.Layouts 1.1
 import org.kde.plasma.core 2.0 as PlasmaCore
+import org.kde.plasma.components 2.0 as PlasmaComponents
 
-PlasmaCore.IconItem {
-    id: icon
+Row {
+    id: main
+    spacing: units.largeSpacing
 
     Layout.minimumWidth: {
         switch (plasmoid.formFactor) {
@@ -45,8 +47,28 @@ PlasmaCore.IconItem {
         }
     }
 
-    source: plasmoid.icon ? plasmoid.icon : "plasma"
-    active: mouseArea.containsMouse
+    PlasmaCore.IconItem {
+        id: icon
+        source: plasmoid.icon ? plasmoid.icon : "plasma"
+        active: mouseArea.containsMouse
+        colorGroup: PlasmaCore.Theme.ComplementaryColorGroup
+        anchors.verticalCenter: parent.verticalCenter
+    }
+    PlasmaCore.SvgItem {
+        svg: PlasmaCore.Svg {
+            id: arrowSvg
+            imagePath: "widgets/arrows"
+            colorGroup: PlasmaCore.Theme.ComplementaryColorGroup
+        }
+        width: units.iconSizes.smallMedium
+        height: width
+        elementId: plasmoid.expanded ? "up-arrow" : "down-arrow"
+        anchors.verticalCenter: parent.verticalCenter
+    }
+    PlasmaComponents.Label {
+        text: plasmoid.title
+        anchors.verticalCenter: parent.verticalCenter
+    }
 
     MouseArea {
         id: mouseArea