App gets ToolBar, gallery app uses it now

- the Gallery app is now derived from App, so we can test it.
- App now has a toolbar, similar to PageStack.

Toolbar is not yet auto-hidden.

declarativeimports/plasmaextracomponents/qml/App.qml

@@ -49,23 +49,33 @@ Item {
     id: app
     property alias navigation: navigationItem.children
     property alias content: contentItem.children
+    property alias tools: topBar.tools
+
+    property alias contentArea: contentBackground
     property int space: 12
     property int navigationWidth: 340
-    property int contentWidth: app.width - navigationWidth
+    property int contentWidth: app.width - navigationWidth - space*2
     anchors.fill: parent
 
     PlasmaCore.Theme { id: theme }
 
+    PlasmaComponents.ToolBar {
+        id: topBar
+        height: 48
+        anchors { top: parent.top; left: parent.left; right: parent.right; }
+        tools: PlasmaComponents.ToolBarLayout {}
+    }
+
     Image {
         id: contentBackground
-        anchors { left: navigationBackground.right; right: parent.right; top: parent.top; bottom: parent.bottom; }
+        anchors { left: navigationBackground.right; right: parent.right; top: topBar.bottom; bottom: parent.bottom; rightMargin: space*2 }
         source: "image://appbackgrounds/standard"
         fillMode: Image.Tile
         asynchronous: true
-        width: childrenRect.width
+        //width: contentWidth
         Item {
             id: contentItem
-            width: app.width - navigationWidth - space*2
+            width: contentWidth - 100
             height: app.height
             anchors { left: parent.left; leftMargin: space; rightMargin: space; top: parent.top; bottom: parent.bottom; right: parent.right; }
         }
@@ -73,7 +83,7 @@ Item {
     }
     Image {
         id: navigationBackground
-        anchors { left: parent.left; top: parent.top; bottom: parent.bottom; }
+        anchors { left: parent.left; top: topBar.bottom; bottom: parent.bottom; }
         source: "image://appbackgrounds/contextarea"
         fillMode: Image.Tile
         asynchronous: true
@@ -89,12 +99,19 @@ Item {
         fillMode: Image.Tile
         anchors {
             left: navigationBackground.right
-            top: parent.top
+            top: topBar.bottom
             bottom: parent.bottom
             leftMargin: -1
         }
     }
 
+    onContentChanged: {
+        print("content changed to ");
+        //content.parent = contentBackground;
+        //contentItem.width = contentWidth;
+        //contentItem.anchors.rightMargin = 100
+    }
+
     onNavigationWidthChanged: {
         navigationBackground.width = navigationWidth;
         navigationItem.width = navigationWidth;

declarativeimports/test/AppTest.qml

@@ -70,57 +70,12 @@ PlasmaExtras.App {
         //Rectangle { color: "blue"; opacity: 0.3; anchors.fill: parent; }
     }
 
-    Item {
+    Loader {
         id: contentItem
+        source: "gallery/Extras.qml"
         width: app.width - navigationWidth - space*2
-        //anchors.rightMargin: space*2
+        parent: contentArea
-
+        anchors.margins: space*2
-        Column {
-            width: contentItem.width
-            id: contentColumn
-            anchors.fill: contentItem
-            spacing: 8
-            PlasmaExtras.Title {
-                text: "Content Section"
-                elide: Text.ElideMiddle
-                //anchors { top: parent.top; left: parent.left; topMargin: 48; }
-            }
-            PlasmaExtras.Heading {
-                text: "Heading " + level
-                level: 1
-            }
-            PlasmaComponents.Label {
-                width: contentColumn.width
-                wrapMode: Text.WordWrap
-                text: "Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten."
-            }
-            PlasmaExtras.Heading {
-                text: "Heading " + level
-                level: 2
-            }
-            PlasmaExtras.Heading {
-                text: "Heading " + level
-                level: 3
-            }
-            PlasmaComponents.Label {
-                wrapMode: Text.WordWrap
-                width: contentColumn.width
-                text: "Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten."
-            }
-            PlasmaExtras.Heading {
-                text: "Heading " + level
-                level: 4
-            }
-            PlasmaExtras.Heading {
-                text: "Heading " + level
-                level: 5
-            }
-            PlasmaComponents.Label {
-                wrapMode: Text.WordWrap
-                width: contentColumn.width
-                text: "Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten."
-            }
-        }
         Rectangle { color: "green"; opacity: 0.8; anchors.fill: contentItem; }
     }
 

declarativeimports/test/gallery/Busy.qml

@@ -24,7 +24,8 @@ PlasmaComponents.Page {
     height: childrenRect.height
     property int implicitHeight: childrenRect.height
 
-    tools: PlasmaComponents.ToolBarLayout {
+    PlasmaComponents.ToolBarLayout {
+        id: toolbarlayout
         spacing: 5
         PlasmaComponents.ToolButton {
             text: "ToolButton"
@@ -35,6 +36,9 @@ PlasmaComponents.Page {
         PlasmaComponents.TextField {
             text: "Busy widgets"
         }
+        Component.onCompleted: {
+            app.tools = toolbarlayout
+        }
     }
     Column {
         spacing: 20

declarativeimports/test/gallery/Buttons.qml

@@ -22,7 +22,9 @@ import org.kde.plasma.components 0.1 as PlasmaComponents
 
 PlasmaComponents.Page {
     height: childrenRect.height
-    tools: PlasmaComponents.ToolBarLayout {
+    
+    PlasmaComponents.ToolBarLayout {
+        id: toolbarlayout
         spacing: 5
         PlasmaComponents.Button {
             text: "Button"
@@ -32,6 +34,9 @@ PlasmaComponents.Page {
         }
         PlasmaComponents.TextField {}
     }
+    Component.onCompleted: {
+        app.tools = toolbarlayout
+    }
 
     Column {
         spacing: 20

declarativeimports/test/gallery/CheckableButtons.qml

@@ -25,7 +25,8 @@ PlasmaComponents.Page {
     height: childrenRect.height
     property int implicitHeight: childrenRect.height
 
-    tools: PlasmaComponents.ToolBarLayout {
+    PlasmaComponents.ToolBarLayout {
+        id: toolbarlayout
         spacing: 5
         PlasmaComponents.ToolButton {
             text: "ToolButton"
@@ -36,6 +37,9 @@ PlasmaComponents.Page {
         PlasmaComponents.TextField {
             text: "hello"
         }
+        Component.onCompleted: {
+            app.tools = toolbarlayout
+        }
     }
     Column {
         spacing: 20

declarativeimports/test/gallery/Extras.qml

@@ -22,7 +22,9 @@ import org.kde.plasma.components 0.1
 import org.kde.plasma.extras 0.1 as PlasmaExtras
 
 Column {
-    anchors.fill: parent
+    //anchors.fill: parent
+    anchors.margins: space
+    width: 600
     spacing: 12
     PlasmaExtras.Title {
         text: "PlasmaExtras"
@@ -32,6 +34,7 @@ Column {
         text: "Additional Plasma Quick components for Apps"
     }
     PlasmaExtras.Paragraph {
+        //width: contentWidth
         text: "Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten."
     }
    PlasmaExtras.Heading {

declarativeimports/test/gallery/Gallery.qml

@@ -19,29 +19,27 @@
 
 import QtQuick 1.1
 import org.kde.plasma.components 0.1
+import org.kde.plasma.extras 0.1 as PlasmaExtras
 
-Rectangle {
+PlasmaExtras.App {
+    id: app
     width: 1000
     height: 800
-    color: "lightgrey"
 
-    ToolBar {
+    property string formFactor: "tablet"
-        id: toolBar
-        z: 10
-        anchors {
-            top: parent.top
-            left: parent.left
-            right: parent.right
-        }
-    }
 
+    navigation: pageSelector
+    content: page
 
     ListView {
         id: pageSelector
         width: 200
         anchors {
-            top: toolBar.bottom
+            fill: parent
+            top: content.top
             bottom: parent.bottom
+            left: parent.left
+            right: parent.right
         }
         model:  ListModel {
             id: pagesModel
@@ -93,28 +91,30 @@ Rectangle {
         }
     }
 
-
     Flickable {
         id: page
         clip: true
+        width: app.contentWidth
 
-        anchors {
+//         anchors {
-            top: toolBar.bottom
+//             top: toolBar.bottom
-            left: pageSelector.right
+//             left: pageSelector.right
-            right: verticalScrollBar.left
+//             right: verticalScrollBar.left
-            bottom: horizontalScrollBar.top
+//             bottom: horizontalScrollBar.top
-            leftMargin: 5
+//             leftMargin: 5
-            rightMargin: 5
+//             rightMargin: 5
-            topMargin: 5
+//             topMargin: 5
-            bottomMargin: 5
+//             bottomMargin: 5
-        }
+//         }
-        contentWidth: pageStack.currentPage.implicitWidth
+        anchors.fill: parent
+        contentWidth: app.contentWidth
         contentHeight: pageStack.currentPage.implicitHeight
 
         PageStack {
             id: pageStack
-            toolBar: toolBar
+            //toolBar: app.toolBar
-            width: page.width
+            //width: page.width
+            width: contentWidth
             height: currentPage.implicitHeight
             initialPage: Qt.createComponent("Buttons.qml")
         }
@@ -143,7 +143,7 @@ Rectangle {
         orientation: Qt.Vertical
         flickableItem: page
         anchors {
-            top: toolBar.bottom
+            top: content.top
             right: parent.right
             bottom: horizontalScrollBar.top
         }

declarativeimports/test/gallery/Scrollers.qml

@@ -24,7 +24,8 @@ PlasmaComponents.Page {
     height: childrenRect.height
     property int implicitHeight: childrenRect.height
 
-    tools: PlasmaComponents.ToolBarLayout {
+    PlasmaComponents.ToolBarLayout {
+        id: toolbarlayout
         spacing: 5
         PlasmaComponents.ToolButton {
             text: "ToolButton"
@@ -38,6 +39,9 @@ PlasmaComponents.Page {
         PlasmaComponents.TextField {
             text: "hello"
         }
+        Component.onCompleted: {
+            app.tools = toolbarlayout
+        }
     }
     Column {
         spacing: 20

declarativeimports/test/gallery/Sliders.qml

@@ -24,7 +24,8 @@ PlasmaComponents.Page {
     height: childrenRect.height
     property int implicitHeight: childrenRect.height
 
-    tools: PlasmaComponents.ToolBarLayout {
+    PlasmaComponents.ToolBarLayout {
+        id: toolbarlayout
         spacing: 5
         PlasmaComponents.ToolButton {
             text: "ToolButton"
@@ -36,6 +37,9 @@ PlasmaComponents.Page {
         PlasmaComponents.TextField {
             text: "hello"
         }
+        Component.onCompleted: {
+            app.tools = toolbarlayout
+        }
     }
     Column {
         spacing: 20

declarativeimports/test/gallery/TextEditing.qml

@@ -22,10 +22,12 @@ import org.kde.plasma.components 0.1 as PlasmaComponents
 
 PlasmaComponents.Page {
     height: editThing.height
-    property int implicitHeight: childrenRect.height
+    width: 500
+    //property int implicitHeight: childrenRect.height
     //scale: 1.25
 
-    tools: PlasmaComponents.ToolBarLayout {
+    PlasmaComponents.ToolBarLayout {
+        id: toolbarlayout
         spacing: 5
         PlasmaComponents.Label {
             text: "Text label:"
@@ -39,6 +41,9 @@ PlasmaComponents.Page {
         PlasmaComponents.TextField {
             text: "Text fields page"
         }
+        Component.onCompleted: {
+            app.tools = toolbarlayout
+        }
     }
     MouseArea {
         anchors.fill: editThing
@@ -57,11 +62,11 @@ PlasmaComponents.Page {
         PlasmaComponents.TextField {
             placeholderText: "Try copy & paste"
             text: "The cat bites into the socks"
-            width: parent.width
+            width: editThing.width
             clearButtonShown: true
         }
         PlasmaComponents.TextArea {
-            width: parent.width
+            width: editThing.width
             height: 200
             placeholderText: "Touch copy & paste not implemented yet."
         }

declarativeimports/test/gallery/Texts.qml

@@ -24,7 +24,8 @@ PlasmaComponents.Page {
     height: childrenRect.height
     property int implicitHeight: childrenRect.height
 
-    tools: PlasmaComponents.ToolBarLayout {
+    PlasmaComponents.ToolBarLayout {
+        id: toolbarlayout
         spacing: 5
         PlasmaComponents.Label {
             text: "Text label:"
@@ -38,6 +39,9 @@ PlasmaComponents.Page {
         PlasmaComponents.TextField {
             text: "Text fields page"
         }
+        Component.onCompleted: {
+            app.tools = toolbarlayout
+        }
     }
     Column {
         spacing: 30