diff --git a/declarativeimports/test/gallery/Busy.qml b/declarativeimports/test/gallery/Busy.qml index 8e77db1ec..55ffe20f5 100644 --- a/declarativeimports/test/gallery/Busy.qml +++ b/declarativeimports/test/gallery/Busy.qml @@ -20,59 +20,76 @@ import QtQuick 1.0 import org.kde.plasma.components 0.1 as PlasmaComponents -Column { - spacing: 20 +PlasmaComponents.Page { + height: childrenRect.height + property int implicitHeight: childrenRect.height - 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 { - indeterminate: true - } - - PlasmaComponents.ProgressBar { - minimumValue: 0 - maximumValue: 100 - value: 30 - } - - Text { text: "Vertical" } - Row { - spacing: 20 + tools: PlasmaComponents.ToolBarLayout { + spacing: 5 + PlasmaComponents.ToolButton { + text: "ToolButton" + } 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.TextField { + text: "Busy widgets" } + } + 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 + } + } } } diff --git a/declarativeimports/test/gallery/Buttons.qml b/declarativeimports/test/gallery/Buttons.qml index b1d9ecf7b..39dd2c6d9 100644 --- a/declarativeimports/test/gallery/Buttons.qml +++ b/declarativeimports/test/gallery/Buttons.qml @@ -20,80 +20,94 @@ import QtQuick 1.0 import org.kde.plasma.components 0.1 as PlasmaComponents -Column { - spacing: 20 - - Text { - font.pixelSize: 20 - text: "Buttons" +PlasmaComponents.Page { + height: childrenRect.height + tools: PlasmaComponents.ToolBarLayout { + spacing: 5 + PlasmaComponents.Button { + text: "Button" + } + PlasmaComponents.Button { + text: "toolbar of the Buttons page" + } + PlasmaComponents.TextField {} } - PlasmaComponents.Button { - id: bt1 - width: 140 - height: 30 - text: "Button" + Column { + spacing: 20 - onClicked: { - console.log("Clicked"); + Text { + font.pixelSize: 20 + text: "Buttons" } - Keys.onTabPressed: bt2.forceActiveFocus(); - } + PlasmaComponents.Button { + id: bt1 + width: 140 + height: 30 + text: "Button" - PlasmaComponents.Button { - id: bt2 - width: 140 - height: 30 - text: "Checkable Button" - checkable: true + onClicked: { + console.log("Clicked"); + } - onCheckedChanged: { - if (checked) - console.log("Button Checked"); - else - console.log("Button Unchecked"); + Keys.onTabPressed: bt2.forceActiveFocus(); } - Keys.onTabPressed: bt3.forceActiveFocus(); - } + PlasmaComponents.Button { + id: bt2 + width: 140 + height: 30 + text: "Checkable Button" + checkable: true - PlasmaComponents.Button { - id: bt3 - width: 140 - height: 30 - text: "Different Font" - font { - pixelSize: 20 - family: "Helvetica" + onCheckedChanged: { + if (checked) + console.log("Button Checked"); + else + console.log("Button Unchecked"); + } + + 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 { - id: bt4 - width: 140 - height: 30 - text: "Icon Button" - iconSource: "/home/dakerfp/work/comics-reader/ui/images/random.png" + Keys.onTabPressed: bt4.forceActiveFocus(); + } - 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 { - id: bt5 - width: 140 - height: 30 - iconSource: "/home/dakerfp/work/comics-reader/ui/images/random.png" + Keys.onTabPressed: bt5.forceActiveFocus(); + } - Keys.onTabPressed: bt1.forceActiveFocus(); - } + PlasmaComponents.Button { + id: bt5 + width: 140 + height: 30 + iconSource: "/home/dakerfp/work/comics-reader/ui/images/random.png" - PlasmaComponents.Button { - width: 140 - height: 30 - text: "Disabled Button" - enabled: false + Keys.onTabPressed: bt1.forceActiveFocus(); + } + + PlasmaComponents.Button { + width: 140 + height: 30 + text: "Disabled Button" + enabled: false + } } } diff --git a/declarativeimports/test/gallery/CheckableButtons.qml b/declarativeimports/test/gallery/CheckableButtons.qml index fee6032b4..66223760f 100644 --- a/declarativeimports/test/gallery/CheckableButtons.qml +++ b/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 { - font.pixelSize: 20 - text: "Check Box" - } +PlasmaComponents.Page { + height: childrenRect.height + property int implicitHeight: childrenRect.height - PlasmaComponents.CheckBox { - width: 140 - height: 30 - text: "Check Box 1" - - onCheckedChanged: { - if (checked) - console.log("CheckBox checked"); - else - console.log("CheckBox unchecked"); + tools: PlasmaComponents.ToolBarLayout { + spacing: 5 + PlasmaComponents.ToolButton { + text: "ToolButton" } - onClicked: { - console.log("CheckBox clicked"); + PlasmaComponents.CheckBox { + text: "Checkbox in the toolbar" + } + PlasmaComponents.TextField { + text: "hello" } } - - 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 { + Column { spacing: 20 - PlasmaComponents.RadioButton { text: "A" } - PlasmaComponents.RadioButton { text: "B" } - PlasmaComponents.RadioButton { text: "C" } - } - Text { - font.pixelSize: 20 - text: "Button Column" - } + Text { + font.pixelSize: 20 + text: "Check Box" + } - PlasmaComponents.ButtonColumn { - spacing: 20 - PlasmaComponents.RadioButton { text: "Alice" } - PlasmaComponents.RadioButton { text: "Bob" } - PlasmaComponents.RadioButton { text: "Charles" } - } + PlasmaComponents.CheckBox { + width: 140 + height: 30 + text: "Check Box 1" + 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" } + } + + } } diff --git a/declarativeimports/test/gallery/Gallery.qml b/declarativeimports/test/gallery/Gallery.qml index f1f536d60..515b3db4b 100644 --- a/declarativeimports/test/gallery/Gallery.qml +++ b/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 - spacing: 5 - PlasmaComponents.ToolButton { - text: "Switch toolbar" - onClicked: toolBar.setTools(toolbarB, "push") + + + ListView { + id: pageSelector + width: 200 + anchors { + top: toolBar.bottom + bottom: parent.bottom } - PlasmaComponents.ToolButton { - text: "button on first toolbar" + model: ListModel { + 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 - contentHeight: 1000 + contentWidth: pageStack.currentPage.implicitWidth + contentHeight: pageStack.currentPage.implicitHeight - Row { - x: 30 - anchors { - top: parent.top - bottom: parent.bottom - margins: 20 - } - spacing: 30 - - Buttons{ } - - CheckableButtons { } - - Busy { } - - Sliders { } - - Scrollers { } - - Texts { } + PageStack { + id: pageStack + toolBar: toolBar + width: page.width + height: currentPage.implicitHeight + initialPage: Qt.createComponent("Buttons.qml") } + } - PlasmaComponents.ScrollBar { + ScrollBar { id: horizontalScrollBar stepSize: 30 @@ -110,7 +122,7 @@ Rectangle { } } - PlasmaComponents.ScrollBar { + ScrollBar { id: verticalScrollBar stepSize: 30 diff --git a/declarativeimports/test/gallery/Misc.qml b/declarativeimports/test/gallery/Misc.qml new file mode 100644 index 000000000..aebdd733f --- /dev/null +++ b/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" } + } +} diff --git a/declarativeimports/test/gallery/Scrollers.qml b/declarativeimports/test/gallery/Scrollers.qml index 0fae6bf2a..25aa47ed8 100644 --- a/declarativeimports/test/gallery/Scrollers.qml +++ b/declarativeimports/test/gallery/Scrollers.qml @@ -20,110 +20,130 @@ import QtQuick 1.0 import org.kde.plasma.components 0.1 as PlasmaComponents -Column { - spacing: 20 +PlasmaComponents.Page { + height: childrenRect.height + property int implicitHeight: childrenRect.height - 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" - } + tools: PlasmaComponents.ToolBarLayout { + spacing: 5 + PlasmaComponents.ToolButton { + text: "ToolButton" } PlasmaComponents.ScrollBar { orientation: Qt.Horizontal + interactive: true flickableItem: scrollArea - anchors { - left: scrollArea.left - right: scrollArea.right - bottom: scrollArea.bottom + width: 200 + } + PlasmaComponents.TextField { + 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 + } } } } diff --git a/declarativeimports/test/gallery/Sliders.qml b/declarativeimports/test/gallery/Sliders.qml index 4e1da8ec9..9d37996ad 100644 --- a/declarativeimports/test/gallery/Sliders.qml +++ b/declarativeimports/test/gallery/Sliders.qml @@ -20,111 +20,130 @@ import QtQuick 1.0 import org.kde.plasma.components 0.1 as PlasmaComponents -Column { - spacing: 20 +PlasmaComponents.Page { + height: childrenRect.height + property int implicitHeight: childrenRect.height - PlasmaComponents.Label { - font.pixelSize: 20 - text: "Slider" - } - - PlasmaComponents.Highlight { - width: 300 - height: 400 - Column { - anchors { - fill: parent - } - 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) - } + tools: PlasmaComponents.ToolBarLayout { + spacing: 5 + PlasmaComponents.ToolButton { + text: "ToolButton" + } + PlasmaComponents.Slider { + width: 140 + animated: true + enabled: true + } + PlasmaComponents.TextField { + text: "hello" } } + Column { + spacing: 20 - PlasmaComponents.Label { text: "Disabled Horizontal Slider" } + PlasmaComponents.Label { + font.pixelSize: 20 + text: "Slider" + } - PlasmaComponents.Slider { - id: horizontalSlider - width: 140 - height: 20 - animated: true - enabled: false - } + PlasmaComponents.Highlight { + width: 300 + height: 400 + Column { + anchors { + fill: parent + } + spacing: 10 - PlasmaComponents.Label { text: "Inverted Horizontal Slider" } + PlasmaComponents.Label { text: "Color Selector"; font.pixelSize: 20 } - PlasmaComponents.Slider { - id: invHorizontalSlider - width: 140 - height: 20 - inverted: true - animated: true - enabled: true - } + PlasmaComponents.Label { text: "Red" } - 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 - width: 20 - height: 140 - orientation: Qt.Vertical - minimumValue: 10 - maximumValue: 1000 - stepSize: 50 + id: horizontalSlider + width: 140 + height: 20 + animated: true + enabled: false + } + + 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 } + } + + } } diff --git a/declarativeimports/test/gallery/Texts.qml b/declarativeimports/test/gallery/Texts.qml index ae3d0df48..1b0f4fc46 100644 --- a/declarativeimports/test/gallery/Texts.qml +++ b/declarativeimports/test/gallery/Texts.qml @@ -20,80 +20,97 @@ import QtQuick 1.1 import org.kde.plasma.components 0.1 as PlasmaComponents -Column { - spacing: 30 - Text { - text: "Text Fields" - font.pixelSize: 20 - } +PlasmaComponents.Page { + height: childrenRect.height + property int implicitHeight: childrenRect.height - PlasmaComponents.Highlight { - width: 200 - height: 100 - Column { - spacing: 10 - Row { - Text { - text: "Username: " - anchors.verticalCenter: tf1.verticalCenter - } - 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 - } + tools: PlasmaComponents.ToolBarLayout { + spacing: 5 + PlasmaComponents.ToolButton { + text: "ToolButton" + } + PlasmaComponents.TextField { + placeholderText: "Place holder text" + } + PlasmaComponents.TextField { + text: "Text fields page" } } + Column { + spacing: 30 + Text { + text: "Text Fields" + font.pixelSize: 20 + } - PlasmaComponents.TextField { - width: 120 - placeholderText: "Disabled Text Field" - Keys.onTabPressed: loginButton.forceActiveFocus(); - enabled: false - } + PlasmaComponents.Highlight { + width: 200 + height: 100 + Column { + spacing: 10 + Row { + Text { + text: "Username: " + anchors.verticalCenter: tf1.verticalCenter + } + PlasmaComponents.TextField { + id: tf1 + placeholderText: "login" + Keys.onTabPressed: tf2.forceActiveFocus(); + } + } - Text { - text: "Text Area" - font.pixelSize: 20 - } + Row { + Text { + text: "Password: " + anchors.verticalCenter: tf2.verticalCenter + } + PlasmaComponents.TextField { + id: tf2 + width: 120 + echoMode: TextInput.Password + Keys.onTabPressed: loginButton.forceActiveFocus(); + } + } - PlasmaComponents.TextArea { - width: 200 - height: 200 - placeholderText: "Lorem ipsum et dolor" - wrapMode: TextEdit.WordWrap - contentMaxWidth: 400 - contentMaxHeight: 400 - } + PlasmaComponents.Button { + id: loginButton + text: "Login" + anchors { + right: parent.right + rightMargin: 0 + } + width: 100 + } + } + } - PlasmaComponents.TextArea { - width: 200 - height: 100 - enabled: false - text: "Disabled Text Area" + PlasmaComponents.TextField { + width: 120 + placeholderText: "Disabled Text Field" + Keys.onTabPressed: loginButton.forceActiveFocus(); + 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" + } } }