new tabbed ui for the top panel

containments/panel/contents/ui/SignalStrength.qml

@@ -28,6 +28,7 @@ import org.kde.plasma.components 2.0 as PlasmaComponents
 
 Item {
 
+    width: strengthIcon.height + strengthLabel.width
     Layout.minimumWidth: strengthIcon.height + strengthLabel.width
     OfonoManager {
         id: ofonoManager

containments/panel/contents/ui/main.qml

@@ -44,24 +44,18 @@ PlasmaCore.ColorScope {
     }
 
     function addApplet(applet, x, y) {
-        var container = appletContainerComponent.createObject(tabGroup)
-        container.visible = true
-        print("Applet added: " + applet + " " + applet.title)
          
-        var appletWidth = applet.width;
+        var container = appletContainerComponent.createObject(appletIconsRow)
-        var appletHeight = applet.height;
+        print("Applet added: " + applet + " " + applet.title)
+        container.width = units.iconSizes.medium
+        container.height = container.height
+
         applet.parent = container;
         container.applet = applet;
         applet.anchors.fill = container;
         applet.visible = true;
         container.visible = true;
         
-        //container.parent = tabs;
-
-        //The tab
-        var tab = tabComponent.createObject(tabBar.layout);
-        tab.iconSource = applet.icon;
-        tab.tab = container;
     }
 
     Component.onCompleted: {
@@ -96,6 +90,22 @@ PlasmaCore.ColorScope {
             property Item applet
             Layout.fillWidth: true
             Layout.fillHeight: true
+            Layout.minimumWidth: appletIconsRow.height
+
+            MouseArea {
+                anchors.fill: parent
+                z: 999
+                onClicked: {
+                    if (root.expandedApplet != applet) {
+                        applet.expanded = true;
+                        appletsStack.replace(applet.fullRepresentationItem);
+                        if (root.expandedApplet) {
+                            root.expandedApplet.expanded = false;
+                        }
+                        root.expandedApplet = applet;
+                    }
+                }
+            }
         }
     }
 
@@ -131,23 +141,15 @@ PlasmaCore.ColorScope {
             anchors.fill: parent
         }
         Loader {
+            id: strengthLoader
             height: parent.height
-            width: item.width
+            width: item ? item.width : 0
             source: Qt.resolvedUrl("SignalStrength.qml")
         }
 
-        PlasmaComponents.Label {
-            id: clock
-            anchors.fill: parent
-            text: Qt.formatTime(timeSource.data.Local.DateTime, "hh:mm")
-            color: PlasmaCore.ColorScope.textColor
-            horizontalAlignment: Qt.AlignHCenter
-            verticalAlignment: Qt.AlignVCenter
-            font.pixelSize: height / 2
-        }
-
         Row {
-            anchors.right: batteryIcon.left
+            id: sniRow
+            anchors.left: strengthLoader.right
             height: parent.height
             Repeater {
                 id: statusNotifierRepeater
@@ -165,31 +167,31 @@ PlasmaCore.ColorScope {
             }
         }
 
-        PlasmaWorkspace.BatteryIcon {
+        PlasmaComponents.Label {
-            id: batteryIcon
+            id: clock
-            anchors {
+            anchors.fill: parent
-                right: parent.right
+            text: Qt.formatTime(timeSource.data.Local.DateTime, "hh:mm")
-                verticalCenter: parent.verticalCenter
+            color: PlasmaCore.ColorScope.textColor
+            horizontalAlignment: Qt.AlignHCenter
+            verticalAlignment: Qt.AlignVCenter
+            font.pixelSize: height / 2
         }
-            width: height
-            height: parent.height
-            hasBattery: pmSource.data["Battery"]["Has Battery"]
-        // batteryType: "Phone"
-            percent: pmSource.data["Battery0"] ? pmSource.data["Battery0"]["Percent"] : 0
 
-            PlasmaCore.DataSource {
+        RowLayout {
-                id: pmSource
+            id: appletIconsRow
-                engine: "powermanagement"
+            anchors {
-                connectedSources: sources
+                bottom: parent.bottom
-                onSourceAdded: {
+                right: parent.right
-                    disconnectSource(source);
-                    connectSource(source);
             }
-                onSourceRemoved: {
+            height: slidingPanel.visible ? units.iconSizes.huge : parent.height
-                    disconnectSource(source);
+            Behavior on height {
+                PropertyAnimation {
+                    duration: units.longDuration
+                    easing.type: Easing.InOutQuad
                 }
             }
         }
+
         Rectangle {
             height: units.smallSpacing/2
             color: PlasmaCore.ColorScope.highlightColor
@@ -226,25 +228,11 @@ PlasmaCore.ColorScope {
             id: panelContents
             anchors.fill: parent
 
-            PlasmaComponents.TabBar {
+            PlasmaComponents.PageStack {
-                id: tabBar
+                id: appletsStack
-                visible: plasmoid.applets.length > 1
                 anchors {
-                    left: parent.left
+                    fill: parent
-                    top: parent.top
+                    bottomMargin: units.iconSizes.huge
-                    right: parent.right
-                    margins: units.smallSpacing
-                }
-                height: units.iconSizes.huge
-            }
-            PlasmaComponents.TabGroup {
-                id: tabGroup
-                anchors {
-                    left: parent.left
-                    top: plasmoid.applets.length > 1 ? tabBar.bottom : parent.top
-                    right: parent.right
-                    bottom: parent.bottom
-                    margins: units.smallSpacing
                 }
             }
         }

shell/contents/applet/CompactApplet.qml

@@ -35,12 +35,7 @@ Item {
     onCompactRepresentationChanged: {
         if (compactRepresentation) {
             compactRepresentation.parent = root;
-            compactRepresentation.anchors.fill = undefined;
+            compactRepresentation.anchors.fill = root;
-            compactRepresentation.anchors.right = undefined;
-            compactRepresentation.anchors.left = root.left;
-            compactRepresentation.anchors.top = root.top;
-            compactRepresentation.width = units.iconSizes.medium;
-            compactRepresentation.height = compactRepresentation.width;
             compactRepresentation.visible = true;
         }
         root.visible = true;
@@ -56,36 +51,15 @@ Item {
         fullRepresentation.anchors.fill = fullRepresentation.parent;
     }
 
-    Row {
-        id: label
-        height: units.iconSizes.medium
-        anchors.left: compactRepresentation ? compactRepresentation.right : parent.left
-        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
-        }
-    }
-
     Rectangle {
         id: expandedItem
         anchors {
             left: parent.left
             right: parent.right
         }
-        height: units.iconSizes.medium
+        height: units.smallSpacing
         color: PlasmaCore.ColorScope.highlightColor
-        opacity: plasmoid.expanded ? 0.3 : 0
+        opacity: plasmoid.expanded ? 1 : 0
         Behavior on opacity {
             OpacityAnimator {
                 duration: units.shortDuration
@@ -97,7 +71,7 @@ Item {
     Item {
         id: appletParent
         opacity: plasmoid.expanded ? 1 : 0
-        anchors.top: label.bottom
+        anchors.top: parent.top
         width: parent.width
         height: units.gridUnit * 20 - units.iconSizes.medium