new gallery based on PageStack

declarativeimports/test/gallery/Busy.qml

@@ -20,59 +20,76 @@
 import QtQuick 1.0
 import org.kde.plasma.components 0.1 as PlasmaComponents
 
-Column {
+PlasmaComponents.Page {
-    spacing: 20
+    height: childrenRect.height
+    property int implicitHeight: childrenRect.height
 
-    Text {
+    tools: PlasmaComponents.ToolBarLayout {
-        font.pixelSize: 20
+        spacing: 5
-        text: "Busy Indicator"
+        PlasmaComponents.ToolButton {
-    }
+            text: "ToolButton"
-
+        }
-    PlasmaComponents.BusyIndicator { }
-
-    PlasmaComponents.BusyIndicator { running: true }
-
-    Text {
-        font.pixelSize: 20
-        text: "Progress Bar"
-    }
-
-    Text { text: "Horizontal" }
-
-    PlasmaComponents.ProgressBar {
-        value: 0.3
-    }
-
-    PlasmaComponents.ProgressBar {
-        indeterminate: true
-    }
-
-    PlasmaComponents.ProgressBar {
-        minimumValue: 0
-        maximumValue: 100
-        value: 30
-    }
-
-    Text { text: "Vertical" }
-    Row {
-        spacing: 20
         PlasmaComponents.ProgressBar {
             value: 0.3
-            orientation: Qt.Vertical
-            width: 20
-            height: 100
         }
-        PlasmaComponents.ProgressBar {
+        PlasmaComponents.TextField {
-            value: 0.4
+            text: "Busy widgets"
-            orientation: Qt.Vertical
-            width: 20
-            height: 120
         }
+    }
+    Column {
+        spacing: 20
+
+        Text {
+            font.pixelSize: 20
+            text: "Busy Indicator"
+        }
+
+        PlasmaComponents.BusyIndicator { }
+
+        PlasmaComponents.BusyIndicator { running: true }
+
+        Text {
+            font.pixelSize: 20
+            text: "Progress Bar"
+        }
+
+        Text { text: "Horizontal" }
+
+        PlasmaComponents.ProgressBar {
+            value: 0.3
+        }
+
         PlasmaComponents.ProgressBar {
-            orientation: Qt.Vertical
-            width: 20
-            height: 100
             indeterminate: true
         }
+
+        PlasmaComponents.ProgressBar {
+            minimumValue: 0
+            maximumValue: 100
+            value: 30
+        }
+
+        Text { text: "Vertical" }
+        Row {
+            spacing: 20
+            PlasmaComponents.ProgressBar {
+                value: 0.3
+                orientation: Qt.Vertical
+                width: 20
+                height: 100
+            }
+            PlasmaComponents.ProgressBar {
+                value: 0.4
+                orientation: Qt.Vertical
+                width: 20
+                height: 120
+            }
+            PlasmaComponents.ProgressBar {
+                orientation: Qt.Vertical
+                width: 20
+                height: 100
+                indeterminate: true
+            }
+        }
     }
 }

declarativeimports/test/gallery/Buttons.qml

@@ -20,80 +20,94 @@
 import QtQuick 1.0
 import org.kde.plasma.components 0.1 as PlasmaComponents
 
-Column {
+PlasmaComponents.Page {
-    spacing: 20
+    height: childrenRect.height
-
+    tools: PlasmaComponents.ToolBarLayout {
-    Text {
+        spacing: 5
-        font.pixelSize: 20
+        PlasmaComponents.Button {
-        text: "Buttons"
+            text: "Button"
+        }
+        PlasmaComponents.Button {
+            text: "toolbar of the Buttons page"
+        }
+        PlasmaComponents.TextField {}
     }
 
-    PlasmaComponents.Button {
+    Column {
-        id: bt1
+        spacing: 20
-        width: 140
-        height: 30
-        text: "Button"
 
-        onClicked: {
+        Text {
-            console.log("Clicked");
+            font.pixelSize: 20
+            text: "Buttons"
         }
 
-        Keys.onTabPressed: bt2.forceActiveFocus();
+        PlasmaComponents.Button {
-    }
+            id: bt1
+            width: 140
+            height: 30
+            text: "Button"
 
-    PlasmaComponents.Button {
+            onClicked: {
-        id: bt2
+                console.log("Clicked");
-        width: 140
+            }
-        height: 30
-        text: "Checkable Button"
-        checkable: true
 
-        onCheckedChanged: {
+            Keys.onTabPressed: bt2.forceActiveFocus();
-            if (checked)
-                console.log("Button Checked");
-            else
-                console.log("Button Unchecked");
         }
 
-        Keys.onTabPressed: bt3.forceActiveFocus();
+        PlasmaComponents.Button {
-    }
+            id: bt2
+            width: 140
+            height: 30
+            text: "Checkable Button"
+            checkable: true
 
-    PlasmaComponents.Button {
+            onCheckedChanged: {
-        id: bt3
+                if (checked)
-        width: 140
+                    console.log("Button Checked");
-        height: 30
+                else
-        text: "Different Font"
+                    console.log("Button Unchecked");
-        font {
+            }
-            pixelSize: 20
+
-            family: "Helvetica"
+            Keys.onTabPressed: bt3.forceActiveFocus();
         }
 
-        Keys.onTabPressed: bt4.forceActiveFocus();
+        PlasmaComponents.Button {
-    }
+            id: bt3
+            width: 140
+            height: 30
+            text: "Different Font"
+            font {
+                pixelSize: 20
+                family: "Helvetica"
+            }
 
-    PlasmaComponents.Button {
+            Keys.onTabPressed: bt4.forceActiveFocus();
-        id: bt4
+        }
-        width: 140
-        height: 30
-        text: "Icon Button"
-        iconSource: "/home/dakerfp/work/comics-reader/ui/images/random.png"
 
-        Keys.onTabPressed: bt5.forceActiveFocus();
+        PlasmaComponents.Button {
-    }
+            id: bt4
+            width: 140
+            height: 30
+            text: "Icon Button"
+            iconSource: "/home/dakerfp/work/comics-reader/ui/images/random.png"
 
-    PlasmaComponents.Button {
+            Keys.onTabPressed: bt5.forceActiveFocus();
-        id: bt5
+        }
-        width: 140
-        height: 30
-        iconSource: "/home/dakerfp/work/comics-reader/ui/images/random.png"
 
-        Keys.onTabPressed: bt1.forceActiveFocus();
+        PlasmaComponents.Button {
-    }
+            id: bt5
+            width: 140
+            height: 30
+            iconSource: "/home/dakerfp/work/comics-reader/ui/images/random.png"
 
-    PlasmaComponents.Button {
+            Keys.onTabPressed: bt1.forceActiveFocus();
-        width: 140
+        }
-        height: 30
+
-        text: "Disabled Button"
+        PlasmaComponents.Button {
-        enabled: false
+            width: 140
+            height: 30
+            text: "Disabled Button"
+            enabled: false
+        }
     }
 }

declarativeimports/test/gallery/CheckableButtons.qml

@@ -20,88 +20,106 @@
 import QtQuick 1.0
 import org.kde.plasma.components 0.1 as PlasmaComponents
 
-Column {
-    spacing: 20
 
-    Text {
+PlasmaComponents.Page {
-        font.pixelSize: 20
+    height: childrenRect.height
-        text: "Check Box"
+    property int implicitHeight: childrenRect.height
-    }
 
-    PlasmaComponents.CheckBox {
+    tools: PlasmaComponents.ToolBarLayout {
-        width: 140
+        spacing: 5
-        height: 30
+        PlasmaComponents.ToolButton {
-        text: "Check Box 1"
+            text: "ToolButton"
-
-        onCheckedChanged: {
-            if (checked)
-                console.log("CheckBox checked");
-            else
-                console.log("CheckBox unchecked");
         }
-        onClicked: {
+        PlasmaComponents.CheckBox {
-            console.log("CheckBox clicked");
+            text: "Checkbox in the toolbar"
+        }
+        PlasmaComponents.TextField {
+            text: "hello"
         }
     }
-
+    Column {
-    PlasmaComponents.CheckBox {
-        height: 30
-        text: "Disabled"
-        enabled: false
-    }
-
-    PlasmaComponents.CheckBox {
-        height: 30
-        text: ""
-    }
-
-    PlasmaComponents.CheckBox {
-        height: 30
-        text: "A loooooooooooooong text"
-    }
-
-    Text {
-        font.pixelSize: 20
-        text: "Radio Button"
-    }
-
-    PlasmaComponents.RadioButton {
-        width: 140
-        height: 30
-        text: "RadioButton"
-
-        onCheckedChanged: {
-            if (checked)
-                console.log("RadioButton Checked");
-            else
-                console.log("RadioButton Unchecked");
-        }
-    }
-
-    PlasmaComponents.Switch { }
-
-    Text {
-        font.pixelSize: 20
-        text: "Button Row"
-    }
-
-    PlasmaComponents.ButtonRow {
         spacing: 20
-        PlasmaComponents.RadioButton { text: "A" }
-        PlasmaComponents.RadioButton { text: "B" }
-        PlasmaComponents.RadioButton { text: "C" }
-    }
 
-    Text {
+        Text {
-        font.pixelSize: 20
+            font.pixelSize: 20
-        text: "Button Column"
+            text: "Check Box"
-    }
+        }
 
-    PlasmaComponents.ButtonColumn {
+        PlasmaComponents.CheckBox {
-        spacing: 20
+            width: 140
-        PlasmaComponents.RadioButton { text: "Alice" }
+            height: 30
-        PlasmaComponents.RadioButton { text: "Bob" }
+            text: "Check Box 1"
-        PlasmaComponents.RadioButton { text: "Charles" }
-    }
 
+            onCheckedChanged: {
+                if (checked)
+                    console.log("CheckBox checked");
+                else
+                    console.log("CheckBox unchecked");
+            }
+            onClicked: {
+                console.log("CheckBox clicked");
+            }
+        }
+
+        PlasmaComponents.CheckBox {
+            height: 30
+            text: "Disabled"
+            enabled: false
+        }
+
+        PlasmaComponents.CheckBox {
+            height: 30
+            text: ""
+        }
+
+        PlasmaComponents.CheckBox {
+            height: 30
+            text: "A loooooooooooooong text"
+        }
+
+        Text {
+            font.pixelSize: 20
+            text: "Radio Button"
+        }
+
+        PlasmaComponents.RadioButton {
+            width: 140
+            height: 30
+            text: "RadioButton"
+
+            onCheckedChanged: {
+                if (checked)
+                    console.log("RadioButton Checked");
+                else
+                    console.log("RadioButton Unchecked");
+            }
+        }
+
+        PlasmaComponents.Switch { }
+
+        Text {
+            font.pixelSize: 20
+            text: "Button Row"
+        }
+
+        PlasmaComponents.ButtonRow {
+            spacing: 20
+            PlasmaComponents.RadioButton { text: "A" }
+            PlasmaComponents.RadioButton { text: "B" }
+            PlasmaComponents.RadioButton { text: "C" }
+        }
+
+        Text {
+            font.pixelSize: 20
+            text: "Button Column"
+        }
+
+        PlasmaComponents.ButtonColumn {
+            spacing: 20
+            PlasmaComponents.RadioButton { text: "Alice" }
+            PlasmaComponents.RadioButton { text: "Bob" }
+            PlasmaComponents.RadioButton { text: "Charles" }
+        }
+
+    }
 }

declarativeimports/test/gallery/Gallery.qml

@@ -18,14 +18,14 @@
 */
 
 import QtQuick 1.0
-import org.kde.plasma.components 0.1 as PlasmaComponents
+import org.kde.plasma.components 0.1
 
 Rectangle {
     width: 1000
     height: 800
     color: "lightgrey"
 
-    PlasmaComponents.ToolBar {
+    ToolBar {
         id: toolBar
         z: 10
         anchors {
@@ -33,70 +33,82 @@ Rectangle {
             left: parent.left
             right: parent.right
         }
-        tools: toolbarA
     }
-    Row {
+
-        id: toolbarA
+    
-        visible: false
+    ListView {
-        spacing: 5
+        id: pageSelector
-        PlasmaComponents.ToolButton {
+        width: 200
-            text: "Switch toolbar"
+        anchors {
-            onClicked: toolBar.setTools(toolbarB, "push")
+            top: toolBar.bottom
+            bottom: parent.bottom
         }
-        PlasmaComponents.ToolButton {
+        model:  ListModel {
-            text: "button on first toolbar"
+            id: pagesModel
+            ListElement {
+                page: "Buttons.qml"
+                title: "Buttons"
+            }
+            ListElement {
+                page: "CheckableButtons.qml"
+                title: "Checkable buttons"
+            }
+            ListElement {
+                page: "Busy.qml"
+                title: "Busy indicators"
+            }
+            ListElement {
+                page: "Sliders.qml"
+                title: "Sliders"
+            }
+            ListElement {
+                page: "Scrollers.qml"
+                title: "Scrollers"
+            }
+            ListElement {
+                page: "Texts.qml"
+                title: "Text elements"
+            }
+            ListElement {
+                page: "Misc.qml"
+                title: "Misc stuff"
+            }
+        }
+        delegate: ListItem {
+            enabled: true
+            Column {
+                Label {
+                    text: title
+                }
+            }
+            onClicked: pageStack.replace(Qt.createComponent(page))
         }
     }
-    PlasmaComponents.ToolBarLayout {
+
-        id: toolbarB
+
-        visible: false
-        spacing: 5
-        PlasmaComponents.ToolButton {
-            text: "Switch toolbar"
-            onClicked: toolBar.setTools(toolbarA, "pop")
-        }
-        PlasmaComponents.ToolButton {
-            flat: false
-            text: "button on second toolbar"
-        }
-        PlasmaComponents.TextField {}
-    }
     Flickable {
         id: page
 
         anchors {
             top: toolBar.bottom
-            left: parent.left
+            left: pageSelector.right
             right: parent.right
             bottom: parent.bottom
         }
-        contentWidth: 2200
+        contentWidth: pageStack.currentPage.implicitWidth
-        contentHeight: 1000
+        contentHeight: pageStack.currentPage.implicitHeight
 
-        Row {
+        PageStack {
-            x: 30
+            id: pageStack
-            anchors {
+            toolBar: toolBar
-                top: parent.top
+            width: page.width
-                bottom: parent.bottom
+            height: currentPage.implicitHeight
-                margins: 20
+            initialPage: Qt.createComponent("Buttons.qml")
-            }
-            spacing: 30
-
-            Buttons{ }
-
-            CheckableButtons { }
-
-            Busy { }
-
-            Sliders { }
-
-            Scrollers { }
-
-            Texts { }
         }
+
     }
 
-    PlasmaComponents.ScrollBar {
+    ScrollBar {
         id: horizontalScrollBar
 
 	    stepSize: 30
@@ -110,7 +122,7 @@ Rectangle {
         }
     }
 
-    PlasmaComponents.ScrollBar {
+    ScrollBar {
         id: verticalScrollBar
 
 	    stepSize: 30

declarativeimports/test/gallery/Misc.qml

@@ -0,0 +1,636 @@
+/****************************************************************************
+**
+** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt Components project.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 1.1
+import org.kde.plasma.components 0.1
+
+
+Column {
+    id: column
+
+    // for demonstration and testing purposes each component needs to
+    // set its inverted state explicitly
+    property bool childrenInverted: false
+    property bool windowInverted: false
+
+    spacing: 14
+
+    Label {
+        anchors.horizontalCenter: parent.horizontalCenter
+        text: "Qt Components " + (enabled ? "(enabled)" : "(disabled)")
+    }
+
+    Button {
+        anchors.horizontalCenter: parent.horizontalCenter
+        text: "Push me"
+        width: parent.width - parent.spacing
+    }
+
+    TextField {
+        anchors.horizontalCenter: parent.horizontalCenter
+        placeholderText: "TextField"
+        width: parent.width - parent.spacing
+    }
+
+    TextField {
+        id: clearable
+        anchors.horizontalCenter: parent.horizontalCenter
+        placeholderText: "Clearable TextField"
+        text: "Clearable TextField"
+        width: parent.width - parent.spacing
+
+        Image {
+            id: clearText
+            anchors { top: parent.top; right: parent.right; margins: 6 }
+            fillMode: Image.PreserveAspectFit
+            smooth: true; visible: parent.text
+            source: "qrc:close_stop.svg"
+            height: parent.height - 6
+            width: parent.height - 6
+
+            MouseArea {
+                id: clear
+                anchors { horizontalCenter: parent.horizontalCenter; verticalCenter: parent.verticalCenter }
+                height: clearable.height; width: clearable.height
+                onClicked: clearable.text = ""
+            }
+        }
+    }
+
+    TextField {
+        id: customOperation
+        anchors.horizontalCenter: parent.horizontalCenter
+        placeholderText: "Custom operation"
+        width: parent.width - parent.spacing
+
+        Image {
+            id: addText
+            anchors { top: parent.top; right: parent.right }
+            smooth: true
+            fillMode: Image.PreserveAspectFit
+            source: "qrc:ok.svg"
+            height: parent.height; width: parent.height
+            scale: LayoutMirroring.enabled ? -1 : 1
+
+            MouseArea {
+                id: add
+                anchors.fill: parent
+                onClicked: textSelection.open()
+            }
+
+            SelectionDialog {
+                id: textSelection
+                titleText: "Preset Texts"
+                selectedIndex: -1
+                model: ListModel {
+                    ListElement { name: "Lorem ipsum." }
+                    ListElement { name: "Lorem ipsum dolor sit amet." }
+                    ListElement { name: "Lorem ipsum dolor sit amet ipsum." }
+                }
+
+                onAccepted: {
+                    customOperation.text = textSelection.model.get(textSelection.selectedIndex).name
+                    customOperation.forceActiveFocus()
+                }
+
+                onRejected: selectedIndex = -1
+            }
+        }
+    }
+
+    TextArea {
+        anchors.horizontalCenter: parent.horizontalCenter
+        placeholderText: "This is a\n multiline control."
+        width: parent.width - parent.spacing; height: 280
+    }
+
+    Slider {
+        anchors.horizontalCenter: parent.horizontalCenter
+        value: 50
+    }
+
+    ButtonRow {
+        anchors.horizontalCenter: parent.horizontalCenter
+        spacing: parent.spacing
+
+        exclusive: true
+
+        RadioButton {
+        }
+
+        RadioButton {
+        }
+    }
+
+    Row {
+        anchors.horizontalCenter: parent.horizontalCenter
+        spacing: parent.spacing
+
+        CheckBox {
+        }
+
+        CheckBox {
+            checked: true
+        }
+    }
+
+    Switch {
+        anchors.horizontalCenter: parent.horizontalCenter
+    }
+
+    ProgressBar {
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        Timer {
+            running: true
+            repeat: true
+            interval: 25
+            onTriggered: parent.value = (parent.value + 1) % 1.1
+        }
+    }
+
+    ProgressBar {
+        anchors.horizontalCenter: parent.horizontalCenter
+        indeterminate: true
+    }
+
+    Component {
+        id: dialogComponent
+        CommonDialog {
+            id: dialog
+            titleText: "CommonDialog"
+            buttonTexts: ["Ok", "Cancel"]
+
+            content: Text {
+                text: "This is the content"
+                font { bold: true; pixelSize: 16 }
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+            }
+        }
+    }
+
+    Button {
+        property CommonDialog dialog
+        anchors.horizontalCenter: parent.horizontalCenter
+        width: parent.width - parent.spacing
+        text: "CommonDialog"
+        onClicked: {
+            if (!dialog)
+                dialog = dialogComponent.createObject(column)
+            dialog.open()
+        }
+    }
+
+    Component {
+        id: singleSelectionDialogComponent
+        SelectionDialog {
+            titleText: "Select background color"
+            selectedIndex: 1
+
+            model: ListModel {
+                id: colorModel
+
+                ListElement { name: "Red" }
+                ListElement { name: "Blue" }
+                ListElement { name: "Green" }
+                ListElement { name: "Yellow" }
+                ListElement { name: "Black" }
+                ListElement { name: "White" }
+                ListElement { name: "Grey" }
+                ListElement { name: "Orange" }
+                ListElement { name: "Pink" }
+            }
+
+            onAccepted: { selectionDialogButton.parent.color = colorModel.get(selectedIndex).name }
+        }
+    }
+
+    Rectangle {
+        anchors.horizontalCenter: parent.horizontalCenter
+        height: selectionDialogButton.height
+        width: parent.width - parent.spacing
+        radius: 10
+
+        Button {
+            id: selectionDialogButton
+            property SelectionDialog singleSelectionDialog
+            anchors.centerIn: parent
+            text: "Selection Dialog"
+            onClicked: {
+                if (!singleSelectionDialog)
+                    singleSelectionDialog = singleSelectionDialogComponent.createObject(column)
+                singleSelectionDialog.open()
+            }
+        }
+    }
+
+    Button {
+        property QueryDialog queryDialog
+        anchors.horizontalCenter: parent.horizontalCenter
+        width: parent.width - parent.spacing
+        text: "QueryDialog"
+        onClicked: {
+            if (!queryDialog)
+                queryDialog = queryDialogComponent.createObject(column)
+            queryDialog.open()
+        }
+    }
+
+    Component {
+        id: queryDialogComponent
+        QueryDialog {
+            titleText: "Query Dialog"
+            // Arabic character in the beginning to test right-to-left UI alignment
+            message: (LayoutMirroring.enabled ? "\u062a" : "") + "Lorem ipsum dolor sit amet, consectetur adipisici elit,"
+                     + "sed eiusmod tempor incidunt ut labore et dolore magna aliqua."
+                     + "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris"
+                     + "nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit"
+                     + "in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
+                     + "Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui"
+                     + "officia deserunt mollit anim id est laborum."
+
+            acceptButtonText: "Ok"
+            rejectButtonText: "Cancel"
+
+            titleIcon: "kmail"
+        }
+    }
+
+    Rectangle {
+        anchors.horizontalCenter: parent.horizontalCenter
+        height: contentMenuButton.height
+        width: parent.width - parent.spacing
+        radius: 10
+
+        Button {
+            id: contentMenuButton
+            property ContextMenu contextMenu
+            anchors.horizontalCenter: parent.horizontalCenter
+            text: "ContextMenu"
+            onClicked: {
+                if (!contextMenu)
+                    contextMenu = contextMenuComponent.createObject(contentMenuButton)
+                contextMenu.open()
+            }
+        }
+    }
+
+    Component {
+        id: contextMenuComponent
+        ContextMenu {
+            MenuItem {
+                text: "White"
+                onClicked: contentMenuButton.parent.color = "White"
+            }
+            MenuItem {
+                text: "Red"
+                onClicked: contentMenuButton.parent.color = "Red"
+            }
+            MenuItem {
+                text: "LightBlue"
+                onClicked: contentMenuButton.parent.color = "LightBlue"
+            }
+            MenuItem {
+                text: "LightGreen"
+                onClicked: contentMenuButton.parent.color = "LightGreen"
+            }
+        }
+    }
+
+    ListView {
+        anchors.horizontalCenter: parent.horizontalCenter
+        width: parent.width - parent.spacing; height: 120
+        clip: true
+        delegate: listDelegate
+        model: listModel
+        header: listHeading
+    }
+
+    ListModel {
+        id: listModel
+
+        ListElement {
+            titleText: "Title"
+            subTitleText: "SubTitle"
+        }
+        ListElement {
+            titleText: "Title2"
+            subTitleText: "SubTitle"
+        }
+        ListElement {
+            titleText: "Title3"
+            subTitleText: "SubTitle"
+        }
+    }
+
+    Component {
+        id: listHeading
+        Label {
+            text: "Heading"
+        }
+    }
+
+    Component {
+        id: listDelegate
+        ListItem {
+            id: listItem
+            Column {
+
+                Label {
+                    text: titleText
+                }
+                Label {
+                    text: subTitleText
+                }
+            }
+        }
+    }
+
+    Label {
+        property SelectionDialog selectionDialog
+        text: {
+            if (selectionDialog) {
+                if (selectionDialog.selectedIndex >= 0)
+                    return selectionDialog.model.get(selectionDialog.selectedIndex).name
+            }
+            return "Three"
+        }
+        anchors.horizontalCenter: parent.horizontalCenter
+        width: parent.width - parent.spacing
+
+        MouseArea {
+            anchors.fill: parent
+            onClicked: {
+                if (!selectionDialog)
+                    selectionDialog = selectionDialogComponent.createObject(column)
+                selectionDialog.open()
+            }
+        }
+
+        Component {
+            id: selectionDialogComponent
+            SelectionDialog {
+                titleText: "Select"
+                selectedIndex: 2
+                model: ListModel {
+                    ListElement { name: "One" }
+                    ListElement { name: "Two" }
+                    ListElement { name: "Three" }
+                    ListElement { name: "Four" }
+                    ListElement { name: "Five" }
+                    ListElement { name: "Six" }
+                    ListElement { name: "Seven" }
+                    ListElement { name: "Eight" }
+                    ListElement { name: "Nine" }
+                }
+            }
+        }
+    }
+
+
+    TabBar {
+        //width: parent.width - parent.spacing
+        //height: 50
+        anchors.horizontalCenter: parent.horizontalCenter
+        TabButton { tab: tab1content; text: "1"; iconSource: "qrc:close_stop.svg"}
+        TabButton { tab: tab2content; text: "2"; iconSource: "konqueror"}
+        TabButton { tab: tab3content; text: "3"}
+    }
+
+    TabGroup {
+        height: 100
+        width: parent.width - parent.spacing
+        Button { id: tab1content; text: "tab1" }
+        Text {
+            id: tab2content
+            text: "tab2"
+            horizontalAlignment: "AlignHCenter"
+            verticalAlignment: "AlignVCenter"
+        }
+        Page {
+            id: tab3content
+            width: 50
+            height: 32
+            CheckBox { anchors.fill: parent; text: "tab3"}
+        }
+    }
+
+    ToolButton {
+        id: toolButton
+        text: "ToolButton"
+        iconSource: "konqueror"
+    }
+
+    ToolButton {
+        id: toolButton2
+        flat: true
+        iconSource: "qrc:ok.svg"
+    }
+
+    ToolButton {
+        id: toolButton3
+        text: "ToolButton"
+        iconSource: "qrc:close_stop.svg"
+    }
+
+    Row {
+        spacing: 5
+
+        BusyIndicator {
+            id: busyInd1
+            width: 20
+            height: 20
+            running: true
+        }
+
+        BusyIndicator {
+            // default width/height is 40
+            id: busyInd2
+            running: true
+        }
+
+        BusyIndicator {
+            id: busyInd3
+            width: 60
+            height: 60
+            running: true
+        }
+
+        Button {
+            text: "Toggle"
+            onClicked: {
+                busyInd1.running = !busyInd1.running
+                busyInd2.running = !busyInd2.running
+                busyInd3.running = !busyInd3.running
+            }
+        }
+    }
+
+    Button {
+        property CommonDialog sectionScroll
+        anchors.horizontalCenter: parent.horizontalCenter
+        width: parent.width - parent.spacing
+        text: "SectionScroller"
+        iconSource: "konqueror"
+        onClicked: {
+            if (!sectionScroll)
+                sectionScroll = sectionScrollComponent.createObject(column)
+            sectionScroll.open()
+        }
+    }
+
+    Component {
+        id: sectionScrollComponent
+        CommonDialog {
+            id: sectionScroll
+            titleText: "Section Scroller"
+            buttonTexts: ["Close"]
+            onButtonClicked: close()
+
+            content: Rectangle {
+                color: Qr.rgba(1,1,1,0.8)
+                width: parent.width
+                implicitHeight: 300
+
+                ListModel {
+                    id: testModel
+                    ListElement { name: "A Cat 1"; alphabet: "A" }
+                    ListElement { name: "A Cat 2"; alphabet: "A" }
+                    ListElement { name: "Boo 1"; alphabet: "B" }
+                    ListElement { name: "Boo 2"; alphabet: "B" }
+                    ListElement { name: "Cat 1"; alphabet: "C" }
+                    ListElement { name: "Cat 2"; alphabet: "C" }
+                    ListElement { name: "Dog 1"; alphabet: "D" }
+                    ListElement { name: "Dog 2"; alphabet: "D" }
+                    ListElement { name: "Dog 3"; alphabet: "D" }
+                    ListElement { name: "Dog 4"; alphabet: "D" }
+                    ListElement { name: "Dog 5"; alphabet: "D" }
+                    ListElement { name: "Dog 6"; alphabet: "D" }
+                    ListElement { name: "Dog 7"; alphabet: "D" }
+                    ListElement { name: "Dog 8"; alphabet: "D" }
+                    ListElement { name: "Dog 9"; alphabet: "D" }
+                    ListElement { name: "Dog 10"; alphabet: "D" }
+                    ListElement { name: "Dog 11"; alphabet: "D" }
+                    ListElement { name: "Dog 12"; alphabet: "D" }
+                    ListElement { name: "Elephant 1"; alphabet: "E" }
+                    ListElement { name: "Elephant 2"; alphabet: "E" }
+                    ListElement { name: "FElephant 1"; alphabet: "F" }
+                    ListElement { name: "FElephant 2"; alphabet: "F" }
+                    ListElement { name: "Guinea pig"; alphabet: "G" }
+                    ListElement { name: "Goose"; alphabet: "G" }
+                    ListElement { name: "Horse"; alphabet: "H" }
+                    ListElement { name: "Horse"; alphabet: "H" }
+                    ListElement { name: "Parrot"; alphabet: "P" }
+                    ListElement { name: "Parrot"; alphabet: "P" }
+                }
+
+                ListView {
+                    id: list
+                    anchors.fill: parent
+                    clip: true
+                    cacheBuffer: contentHeight
+                    delegate:  ListItem {
+                        Label {
+                            anchors {
+                                top: parent.top; topMargin: 4
+                                left: parent.left; leftMargin: 4
+                            }
+                            text: name + " (index " + index + ")"
+                            horizontalAlignment: Text.AlignLeft
+                        }
+                    }
+
+                    model: testModel
+                    section.property: "alphabet"
+                    section.criteria: ViewSection.FullString
+                    section.delegate: ListItem {
+                        sectionDelegate: true
+                        Label {
+                            anchors {
+                                top: parent.top; topMargin: 4
+                                left: parent.left; leftMargin: 4
+                            }
+                            text: section
+                            horizontalAlignment: Text.AlignLeft
+                            font { bold: true; }
+                        }
+                    }
+                }
+
+                SectionScroller {
+                    id: sectionScroller
+                    listView: list
+                }
+            }
+        }
+    }
+
+    ButtonRow {
+       id: buttonRow1
+       width: parent.width - parent.spacing
+       exclusive: true
+       checkedButton: b2
+
+       Button { text: "b1" }
+       Button { text: "b2" }
+       Button { text: "b3" }
+   }
+
+   ButtonRow {
+       id: buttonRow2
+       width: parent.width - parent.spacing
+       exclusive: true
+
+       ToolButton { text: "tb1" }
+       ToolButton { text: "tb2" }
+   }
+
+   ButtonColumn {
+       id: buttonColumn
+       width: parent.width - parent.spacing
+       exclusive: true
+
+       Button { text: "b4" }
+       Button { text: "b5" }
+       Button { text: "b6" }
+       Button { text: "b7" }
+   }
+}

declarativeimports/test/gallery/Scrollers.qml

@@ -20,110 +20,130 @@
 import QtQuick 1.0
 import org.kde.plasma.components 0.1 as PlasmaComponents
 
-Column {
+PlasmaComponents.Page {
-    spacing: 20
+    height: childrenRect.height
+    property int implicitHeight: childrenRect.height
 
-    Text {
+    tools: PlasmaComponents.ToolBarLayout {
-        font.pixelSize: 20
+        spacing: 5
-        text: "Scroll Bar"
+        PlasmaComponents.ToolButton {
-    }
+            text: "ToolButton"
-
-    ListView {
-        id: scrollList
-
-        width: 200
-        height: 200
-        clip: true
-        model: 20
-        delegate: Text {
-            width: 200
-            height: 30
-            text: index
-            font.pixelSize: 18
-        }
-
-        Rectangle {
-            anchors.fill: parent
-            color: "grey"
-            opacity: 0.3
-        }
-
-        PlasmaComponents.ScrollBar {
-            id: scrollBar
-            orientation: Qt.Vertical
-            flickableItem: scrollList
-            stepSize: 40
-            scrollButtonInterval: 50
-            anchors {
-                top: scrollList.top
-                right: scrollList.right
-                bottom: scrollList.bottom
-            }
-        }
-    }
-
-    Text {
-        font.pixelSize: 20
-        text: "Scroll Decorator"
-    }
-
-    Item {
-        width: 200
-        height: 200
-        PlasmaComponents.Highlight { anchors.fill: parent }
-        Flickable {
-            id: scrollArea
-            anchors.fill: parent
-            clip: true
-            contentWidth: 400
-            contentHeight: 400
-
-            // Flickable Contents
-            Rectangle {
-                color: "green"
-                width: 100
-                height: 100
-            }
-            Rectangle {
-                x: 80
-                y: 80
-                color: "blue"
-                width: 200
-                height: 200
-            }
-            Rectangle {
-                x: 200
-                y: 200
-                color: "red"
-                width: 150
-                height: 150
-            }
-        }
-
-        // Scroll Decorators
-        PlasmaComponents.ScrollBar {
-            orientation: Qt.Vertical
-            flickableItem: scrollArea
-            inverted: true
-            anchors {
-                top: scrollArea.top
-                right: scrollArea.right
-                bottom: scrollArea.bottom
-            }
-            Text {
-                y: parent.height / 2
-                x: 13
-                rotation: -90
-                text: "inverted"
-            }
         }
         PlasmaComponents.ScrollBar {
             orientation: Qt.Horizontal
+            interactive: true
             flickableItem: scrollArea
-            anchors {
+            width: 200
-                left: scrollArea.left
+        }
-                right: scrollArea.right
+        PlasmaComponents.TextField {
-                bottom: scrollArea.bottom
+            text: "hello"
+        }
+    }
+    Column {
+        spacing: 20
+
+        Text {
+            font.pixelSize: 20
+            text: "Scroll Bar"
+        }
+
+        ListView {
+            id: scrollList
+
+            width: 200
+            height: 200
+            clip: true
+            model: 20
+            delegate: Text {
+                width: 200
+                height: 30
+                text: index
+                font.pixelSize: 18
+            }
+
+            Rectangle {
+                anchors.fill: parent
+                color: "grey"
+                opacity: 0.3
+            }
+
+            PlasmaComponents.ScrollBar {
+                id: scrollBar
+                orientation: Qt.Vertical
+                flickableItem: scrollList
+                stepSize: 40
+                scrollButtonInterval: 50
+                anchors {
+                    top: scrollList.top
+                    right: scrollList.right
+                    bottom: scrollList.bottom
+                }
+            }
+        }
+
+        Text {
+            font.pixelSize: 20
+            text: "Scroll Decorator"
+        }
+
+        Item {
+            width: 200
+            height: 200
+            PlasmaComponents.Highlight { anchors.fill: parent }
+            Flickable {
+                id: scrollArea
+                anchors.fill: parent
+                clip: true
+                contentWidth: 400
+                contentHeight: 400
+
+                // Flickable Contents
+                Rectangle {
+                    color: "green"
+                    width: 100
+                    height: 100
+                }
+                Rectangle {
+                    x: 80
+                    y: 80
+                    color: "blue"
+                    width: 200
+                    height: 200
+                }
+                Rectangle {
+                    x: 200
+                    y: 200
+                    color: "red"
+                    width: 150
+                    height: 150
+                }
+            }
+
+            // Scroll Decorators
+            PlasmaComponents.ScrollBar {
+                orientation: Qt.Vertical
+                flickableItem: scrollArea
+                inverted: true
+                anchors {
+                    top: scrollArea.top
+                    right: scrollArea.right
+                    bottom: scrollArea.bottom
+                }
+                Text {
+                    y: parent.height / 2
+                    x: 13
+                    rotation: -90
+                    text: "inverted"
+                }
+            }
+            PlasmaComponents.ScrollBar {
+                orientation: Qt.Horizontal
+                flickableItem: scrollArea
+                anchors {
+                    left: scrollArea.left
+                    right: scrollArea.right
+                    bottom: scrollArea.bottom
+                }
             }
         }
     }

declarativeimports/test/gallery/Sliders.qml

@@ -20,111 +20,130 @@
 import QtQuick 1.0
 import org.kde.plasma.components 0.1 as PlasmaComponents
 
-Column {
+PlasmaComponents.Page {
-    spacing: 20
+    height: childrenRect.height
+    property int implicitHeight: childrenRect.height
 
-    PlasmaComponents.Label {
+    tools: PlasmaComponents.ToolBarLayout {
-        font.pixelSize: 20
+        spacing: 5
-        text: "Slider"
+        PlasmaComponents.ToolButton {
-    }
+            text: "ToolButton"
-
+        }
-    PlasmaComponents.Highlight {
+        PlasmaComponents.Slider {
-        width: 300
+            width: 140
-        height: 400
+            animated: true
-        Column {
+            enabled: true
-            anchors {
+        }
-                fill: parent
+        PlasmaComponents.TextField {
-            }
+            text: "hello"
-            spacing: 10
-
-            PlasmaComponents.Label { text: "Color Selector"; font.pixelSize: 20 }
-
-            PlasmaComponents.Label { text: "Red" }
-
-            PlasmaComponents.Slider {
-                id: redSlider
-                height: 20
-                width: 255
-                orientation: Qt.Horizontal
-                minimumValue: 0
-                maximumValue: 255
-                stepSize: 10
-                Keys.onTabPressed: greenSlider.forceActiveFocus()
-            }
-
-            PlasmaComponents.Label { text: "Green" }
-
-            PlasmaComponents.Slider {
-                id: greenSlider
-                height: 20
-                width: 255
-                orientation: Qt.Horizontal
-                minimumValue: 0
-                maximumValue: 255
-                stepSize: 10
-                animated: true
-                Keys.onTabPressed: blueSlider.forceActiveFocus()
-            }
-
-            PlasmaComponents.Label { text: "Blue" }
-
-            PlasmaComponents.Slider {
-                id: blueSlider
-                height: 20
-                width: 255
-                orientation: Qt.Horizontal
-                minimumValue: 0
-                maximumValue: 255
-                stepSize: 10
-                Keys.onTabPressed: redSlider.forceActiveFocus()
-            }
-
-            Rectangle {
-                anchors.horizontalCenter: parent.horizontalCenter
-                width: parent.width / 2
-                height: width
-                color: Qt.rgba(redSlider.value / 255, greenSlider.value / 255, blueSlider.value / 255, 1)
-            }
         }
     }
+    Column {
+        spacing: 20
 
-    PlasmaComponents.Label { text: "Disabled Horizontal Slider" }
+        PlasmaComponents.Label {
+            font.pixelSize: 20
+            text: "Slider"
+        }
 
-    PlasmaComponents.Slider {
+        PlasmaComponents.Highlight {
-        id: horizontalSlider
+            width: 300
-        width: 140
+            height: 400
-        height: 20
+            Column {
-        animated: true
+                anchors {
-        enabled: false
+                    fill: parent
-    }
+                }
+                spacing: 10
 
-    PlasmaComponents.Label { text: "Inverted Horizontal Slider" }
+                PlasmaComponents.Label { text: "Color Selector"; font.pixelSize: 20 }
 
-    PlasmaComponents.Slider {
+                PlasmaComponents.Label { text: "Red" }
-        id: invHorizontalSlider
-        width: 140
-        height: 20
-        inverted: true
-        animated: true
-        enabled: true
-    }
 
-    PlasmaComponents.Label { text: "Vertical Slider" }
+                PlasmaComponents.Slider {
+                    id: redSlider
+                    height: 20
+                    width: 255
+                    orientation: Qt.Horizontal
+                    minimumValue: 0
+                    maximumValue: 255
+                    stepSize: 10
+                    Keys.onTabPressed: greenSlider.forceActiveFocus()
+                }
+
+                PlasmaComponents.Label { text: "Green" }
+
+                PlasmaComponents.Slider {
+                    id: greenSlider
+                    height: 20
+                    width: 255
+                    orientation: Qt.Horizontal
+                    minimumValue: 0
+                    maximumValue: 255
+                    stepSize: 10
+                    animated: true
+                    Keys.onTabPressed: blueSlider.forceActiveFocus()
+                }
+
+                PlasmaComponents.Label { text: "Blue" }
+
+                PlasmaComponents.Slider {
+                    id: blueSlider
+                    height: 20
+                    width: 255
+                    orientation: Qt.Horizontal
+                    minimumValue: 0
+                    maximumValue: 255
+                    stepSize: 10
+                    Keys.onTabPressed: redSlider.forceActiveFocus()
+                }
+
+                Rectangle {
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    width: parent.width / 2
+                    height: width
+                    color: Qt.rgba(redSlider.value / 255, greenSlider.value / 255, blueSlider.value / 255, 1)
+                }
+            }
+        }
+
+        PlasmaComponents.Label { text: "Disabled Horizontal Slider" }
 
-    Row {
-        spacing: 30
         PlasmaComponents.Slider {
-            id: verticalSlider
+            id: horizontalSlider
-            width: 20
+            width: 140
-            height: 140
+            height: 20
-            orientation: Qt.Vertical
+            animated: true
-            minimumValue: 10
+            enabled: false
-            maximumValue: 1000
+        }
-            stepSize: 50
+
+        PlasmaComponents.Label { text: "Inverted Horizontal Slider" }
+
+        PlasmaComponents.Slider {
+            id: invHorizontalSlider
+            width: 140
+            height: 20
             inverted: true
             animated: true
+            enabled: true
         }
-        PlasmaComponents.Label { text: verticalSlider.value }
-    }
 
+        PlasmaComponents.Label { text: "Vertical Slider" }
+
+        Row {
+            spacing: 30
+            PlasmaComponents.Slider {
+                id: verticalSlider
+                width: 20
+                height: 140
+                orientation: Qt.Vertical
+                minimumValue: 10
+                maximumValue: 1000
+                stepSize: 50
+                inverted: true
+                animated: true
+            }
+            PlasmaComponents.Label { text: verticalSlider.value }
+        }
+
+    }
 }

declarativeimports/test/gallery/Texts.qml

@@ -20,80 +20,97 @@
 import QtQuick 1.1
 import org.kde.plasma.components 0.1 as PlasmaComponents
 
-Column {
+PlasmaComponents.Page {
-    spacing: 30
+    height: childrenRect.height
-    Text {
+    property int implicitHeight: childrenRect.height
-        text: "Text Fields"
-        font.pixelSize: 20
-    }
 
-    PlasmaComponents.Highlight {
+    tools: PlasmaComponents.ToolBarLayout {
-        width: 200
+        spacing: 5
-        height: 100
+        PlasmaComponents.ToolButton {
-        Column {
+            text: "ToolButton"
-            spacing: 10
+        }
-            Row {
+        PlasmaComponents.TextField {
-                Text {
+            placeholderText: "Place holder text"
-                    text: "Username: "
+        }
-                    anchors.verticalCenter: tf1.verticalCenter
+        PlasmaComponents.TextField {
-                }
+            text: "Text fields page"
-                PlasmaComponents.TextField {
-                    id: tf1
-                    placeholderText: "login"
-                    Keys.onTabPressed: tf2.forceActiveFocus();
-                }
-            }
-
-            Row {
-                Text {
-                    text: "Password: "
-                    anchors.verticalCenter: tf2.verticalCenter
-                }
-                PlasmaComponents.TextField {
-                    id: tf2
-                    width: 120
-                    echoMode: TextInput.Password
-                    Keys.onTabPressed: loginButton.forceActiveFocus();
-                }
-            }
-
-            PlasmaComponents.Button {
-                id: loginButton
-                text: "Login"
-                anchors {
-                    right: parent.right
-                    rightMargin: 0
-                }
-                width: 100
-            }
         }
     }
+    Column {
+        spacing: 30
+        Text {
+            text: "Text Fields"
+            font.pixelSize: 20
+        }
 
-    PlasmaComponents.TextField {
+        PlasmaComponents.Highlight {
-        width: 120
+            width: 200
-        placeholderText: "Disabled Text Field"
+            height: 100
-        Keys.onTabPressed: loginButton.forceActiveFocus();
+            Column {
-        enabled: false
+                spacing: 10
-    }
+                Row {
+                    Text {
+                        text: "Username: "
+                        anchors.verticalCenter: tf1.verticalCenter
+                    }
+                    PlasmaComponents.TextField {
+                        id: tf1
+                        placeholderText: "login"
+                        Keys.onTabPressed: tf2.forceActiveFocus();
+                    }
+                }
 
-    Text {
+                Row {
-        text: "Text Area"
+                    Text {
-        font.pixelSize: 20
+                        text: "Password: "
-    }
+                        anchors.verticalCenter: tf2.verticalCenter
+                    }
+                    PlasmaComponents.TextField {
+                        id: tf2
+                        width: 120
+                        echoMode: TextInput.Password
+                        Keys.onTabPressed: loginButton.forceActiveFocus();
+                    }
+                }
 
-    PlasmaComponents.TextArea {
+                PlasmaComponents.Button {
-        width: 200
+                    id: loginButton
-        height: 200
+                    text: "Login"
-        placeholderText: "Lorem ipsum et dolor"
+                    anchors {
-        wrapMode: TextEdit.WordWrap
+                        right: parent.right
-        contentMaxWidth: 400
+                        rightMargin: 0
-        contentMaxHeight: 400
+                    }
-    }
+                    width: 100
+                }
+            }
+        }
 
-    PlasmaComponents.TextArea {
+        PlasmaComponents.TextField {
-        width: 200
+            width: 120
-        height: 100
+            placeholderText: "Disabled Text Field"
-        enabled: false
+            Keys.onTabPressed: loginButton.forceActiveFocus();
-        text: "Disabled Text Area"
+            enabled: false
+        }
+
+        Text {
+            text: "Text Area"
+            font.pixelSize: 20
+        }
+
+        PlasmaComponents.TextArea {
+            width: 200
+            height: 200
+            placeholderText: "Lorem ipsum et dolor"
+            wrapMode: TextEdit.WordWrap
+            contentMaxWidth: 400
+            contentMaxHeight: 400
+        }
+
+        PlasmaComponents.TextArea {
+            width: 200
+            height: 100
+            enabled: false
+            text: "Disabled Text Area"
+        }
     }
 }