643 lines
27 KiB
QML
643 lines
27 KiB
QML
/*
|
|
SPDX-FileCopyrightText: 2011 Nokia Corporation and /or its subsidiary(-ies) <qt-info@nokia.com>
|
|
|
|
This file is part of the Qt Components project.
|
|
|
|
SPDX-License-Identifier: BSD-3-Clause
|
|
*/
|
|
|
|
import QtQuick 2.0
|
|
import org.kde.plasma.components 2.0
|
|
import org.kde.plasma.extras 2.0 as PlasmaExtras
|
|
|
|
|
|
Page {
|
|
implicitWidth: childrenRect.width
|
|
implicitHeight: childrenRect.height
|
|
tools: Row {
|
|
spacing: 5
|
|
ToolButton {
|
|
visible: pageStack.depth > 1
|
|
iconSource: "go-previous"
|
|
onClicked: pageStack.pop()
|
|
}
|
|
Button {
|
|
text: "Button"
|
|
}
|
|
}
|
|
|
|
PlasmaExtras.ScrollArea {
|
|
anchors.fill: parent
|
|
Flickable {
|
|
id: flickable
|
|
contentWidth: column.width
|
|
contentHeight: column.height
|
|
clip: true
|
|
anchors.fill: parent
|
|
|
|
Item {
|
|
width: Math.max(flickable.width, column.width)
|
|
height: column.height
|
|
Column {
|
|
id: column
|
|
spacing: 20
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
|
|
// for demonstration and testing purposes each component needs to
|
|
// set its inverted state explicitly
|
|
property bool childrenInverted: false
|
|
property bool windowInverted: false
|
|
|
|
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
|
|
clearButtonShown: true
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
placeholderText: "Clearable TextField"
|
|
text: "Clearable TextField"
|
|
width: parent.width - parent.spacing
|
|
}
|
|
|
|
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: Label {
|
|
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 {
|
|
visualParent: contentMenuButton
|
|
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" }
|
|
Label {
|
|
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" }
|
|
}
|
|
|
|
PlasmaExtras.ScrollArea {
|
|
anchors.fill: parent
|
|
ListView {
|
|
id: list
|
|
anchors.fill: parent
|
|
clip: true
|
|
cacheBuffer: contentHeight
|
|
delegate: ListItem {
|
|
Label {
|
|
anchors {
|
|
top: parent.top; topMargin: 4
|
|
left: parent.left; leftMargin: 4
|
|
}
|
|
color: Qt.rgba(0,0,0,0.8)
|
|
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
|
|
}
|
|
color: Qt.rgba(0,0,0,0.8)
|
|
text: section
|
|
horizontalAlignment: Text.AlignLeft
|
|
font { bold: true; }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
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" }
|
|
}
|
|
ButtonRow {
|
|
id: buttonRow3
|
|
exclusive: true
|
|
spacing: 0
|
|
|
|
ToolButton { flat:false; iconSource: "go-previous" }
|
|
ToolButton { flat:false; text: "tb2" }
|
|
ToolButton { flat:false; text: "tb3" }
|
|
ToolButton { flat:false; iconSource: "go-next" }
|
|
}
|
|
ButtonColumn {
|
|
id: buttonRow4
|
|
exclusive: true
|
|
spacing: 0
|
|
|
|
ToolButton { flat:false; text: "tb1" }
|
|
ToolButton { flat:false; text: "tb2" }
|
|
ToolButton { flat:false; text: "tb3" }
|
|
ToolButton { flat:false; text: "tb4" }
|
|
}
|
|
|
|
ButtonColumn {
|
|
id: buttonColumn
|
|
width: parent.width - parent.spacing
|
|
exclusive: true
|
|
|
|
Button { text: "b4" }
|
|
Button { text: "b5" }
|
|
Button { text: "b6" }
|
|
Button { text: "b7" }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|