alecs/plasma-framework
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

new gallery based on PageStack

Browse Source
This commit is contained in:
Marco Martin 2011-11-09 21:32:45 +01:00
parent 5e6b5c1829
commit b9f9153c4a
8 changed files with 1243 additions and 490 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
declarativeimports/test/gallery/Busy.qml
View File

@ -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
}
}
}
}

130
declarativeimports/test/gallery/Buttons.qml
View File

@ -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
}
}
}

168
declarativeimports/test/gallery/CheckableButtons.qml
View File

@ -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" }
}
}
}

114
declarativeimports/test/gallery/Gallery.qml
View File

@ -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

636
declarativeimports/test/gallery/Misc.qml Normal file
View File

@ -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" }
}
}

218
declarativeimports/test/gallery/Scrollers.qml
View File

@ -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
}
}
}
}

205
declarativeimports/test/gallery/Sliders.qml
View File

@ -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 }
}
}
}

153
declarativeimports/test/gallery/Texts.qml
View File

@ -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"
}
}
}