Warning, /plasma/libplasma/examples/applets/widgetgallery/contents/ui/Misc.qml is written in an unsupported language. File is not indexed.
0001 /*
0002 SPDX-FileCopyrightText: 2011 Nokia Corporation and /or its subsidiary(-ies) <qt-info@nokia.com>
0003
0004 This file is part of the Qt Components project.
0005
0006 SPDX-License-Identifier: BSD-3-Clause
0007 */
0008
0009 import QtQuick
0010 import org.kde.plasma.components
0011 import org.kde.plasma.extras as PlasmaExtras
0012
0013
0014 Page {
0015 implicitWidth: childrenRect.width
0016 implicitHeight: childrenRect.height
0017 tools: Row {
0018 spacing: 5
0019 ToolButton {
0020 visible: pageStack.depth > 1
0021 iconSource: "go-previous"
0022 onClicked: pageStack.pop()
0023 }
0024 Button {
0025 text: "Button"
0026 }
0027 }
0028
0029 PlasmaExtras.ScrollArea {
0030 anchors.fill: parent
0031 Flickable {
0032 id: flickable
0033 contentWidth: column.width
0034 contentHeight: column.height
0035 clip: true
0036 anchors.fill: parent
0037
0038 Item {
0039 width: Math.max(flickable.width, column.width)
0040 height: column.height
0041 Column {
0042 id: column
0043 spacing: 20
0044 anchors.horizontalCenter: parent.horizontalCenter
0045
0046 // for demonstration and testing purposes each component needs to
0047 // set its inverted state explicitly
0048 property bool childrenInverted: false
0049 property bool windowInverted: false
0050
0051 Label {
0052 anchors.horizontalCenter: parent.horizontalCenter
0053 text: "Qt Components " + (enabled ? "(enabled)" : "(disabled)")
0054 }
0055
0056 Button {
0057 anchors.horizontalCenter: parent.horizontalCenter
0058 text: "Push me"
0059 width: parent.width - parent.spacing
0060 }
0061
0062 TextField {
0063 anchors.horizontalCenter: parent.horizontalCenter
0064 placeholderText: "TextField"
0065 width: parent.width - parent.spacing
0066 }
0067
0068 TextField {
0069 id: clearable
0070 clearButtonShown: true
0071 anchors.horizontalCenter: parent.horizontalCenter
0072 placeholderText: "Clearable TextField"
0073 text: "Clearable TextField"
0074 width: parent.width - parent.spacing
0075 }
0076
0077 TextField {
0078 id: customOperation
0079 anchors.horizontalCenter: parent.horizontalCenter
0080 placeholderText: "Custom operation"
0081 width: parent.width - parent.spacing
0082
0083 Image {
0084 id: addText
0085 anchors { top: parent.top; right: parent.right }
0086 smooth: true
0087 fillMode: Image.PreserveAspectFit
0088 source: "qrc:ok.svg"
0089 height: parent.height; width: parent.height
0090 scale: LayoutMirroring.enabled ? -1 : 1
0091
0092 MouseArea {
0093 id: add
0094 anchors.fill: parent
0095 onClicked: textSelection.open()
0096 }
0097
0098 SelectionDialog {
0099 id: textSelection
0100 titleText: "Preset Texts"
0101 selectedIndex: -1
0102 model: ListModel {
0103 ListElement { name: "Lorem ipsum." }
0104 ListElement { name: "Lorem ipsum dolor sit amet." }
0105 ListElement { name: "Lorem ipsum dolor sit amet ipsum." }
0106 }
0107
0108 onAccepted: {
0109 customOperation.text = textSelection.model.get(textSelection.selectedIndex).name
0110 customOperation.forceActiveFocus()
0111 }
0112
0113 onRejected: selectedIndex = -1
0114 }
0115 }
0116 }
0117
0118 TextArea {
0119 anchors.horizontalCenter: parent.horizontalCenter
0120 placeholderText: "This is a\n multiline control."
0121 width: parent.width - parent.spacing; height: 280
0122 wrapMode: TextEdit.Wrap
0123 }
0124
0125 Slider {
0126 anchors.horizontalCenter: parent.horizontalCenter
0127 value: 50
0128 }
0129
0130 ButtonRow {
0131 anchors.horizontalCenter: parent.horizontalCenter
0132 spacing: parent.spacing
0133
0134 exclusive: true
0135
0136 RadioButton {
0137 }
0138
0139 RadioButton {
0140 }
0141 }
0142
0143 Row {
0144 anchors.horizontalCenter: parent.horizontalCenter
0145 spacing: parent.spacing
0146
0147 CheckBox {
0148 }
0149
0150 CheckBox {
0151 checked: true
0152 }
0153 }
0154
0155 Switch {
0156 anchors.horizontalCenter: parent.horizontalCenter
0157 }
0158
0159 ProgressBar {
0160 anchors.horizontalCenter: parent.horizontalCenter
0161
0162 Timer {
0163 running: true
0164 repeat: true
0165 interval: 25
0166 onTriggered: parent.value = (parent.value + 1) % 1.1
0167 }
0168 }
0169
0170 ProgressBar {
0171 anchors.horizontalCenter: parent.horizontalCenter
0172 indeterminate: true
0173 }
0174
0175 Component {
0176 id: dialogComponent
0177 CommonDialog {
0178 id: dialog
0179 titleText: "CommonDialog"
0180 buttonTexts: ["Ok", "Cancel"]
0181
0182 content: Label {
0183 text: "This is the content"
0184 font { bold: true; pixelSize: 16 }
0185 horizontalAlignment: Text.AlignHCenter
0186 verticalAlignment: Text.AlignVCenter
0187 }
0188 }
0189 }
0190
0191 Button {
0192 property CommonDialog dialog
0193 anchors.horizontalCenter: parent.horizontalCenter
0194 width: parent.width - parent.spacing
0195 text: "CommonDialog"
0196 onClicked: {
0197 if (!dialog)
0198 dialog = dialogComponent.createObject(column)
0199 dialog.open()
0200 }
0201 }
0202
0203 Component {
0204 id: singleSelectionDialogComponent
0205 SelectionDialog {
0206 titleText: "Select background color"
0207 selectedIndex: 1
0208
0209 model: ListModel {
0210 id: colorModel
0211
0212 ListElement { name: "Red" }
0213 ListElement { name: "Blue" }
0214 ListElement { name: "Green" }
0215 ListElement { name: "Yellow" }
0216 ListElement { name: "Black" }
0217 ListElement { name: "White" }
0218 ListElement { name: "Grey" }
0219 ListElement { name: "Orange" }
0220 ListElement { name: "Pink" }
0221 }
0222
0223 onAccepted: { selectionDialogButton.parent.color = colorModel.get(selectedIndex).name }
0224 }
0225 }
0226
0227 Rectangle {
0228 anchors.horizontalCenter: parent.horizontalCenter
0229 height: selectionDialogButton.height
0230 width: parent.width - parent.spacing
0231 radius: 10
0232
0233 Button {
0234 id: selectionDialogButton
0235 property SelectionDialog singleSelectionDialog
0236 anchors.centerIn: parent
0237 text: "Selection Dialog"
0238 onClicked: {
0239 if (!singleSelectionDialog)
0240 singleSelectionDialog = singleSelectionDialogComponent.createObject(column)
0241 singleSelectionDialog.open()
0242 }
0243 }
0244 }
0245
0246 Button {
0247 property QueryDialog queryDialog
0248 anchors.horizontalCenter: parent.horizontalCenter
0249 width: parent.width - parent.spacing
0250 text: "QueryDialog"
0251 onClicked: {
0252 if (!queryDialog)
0253 queryDialog = queryDialogComponent.createObject(column)
0254 queryDialog.open()
0255 }
0256 }
0257
0258 Component {
0259 id: queryDialogComponent
0260 QueryDialog {
0261 titleText: "Query Dialog"
0262 // Arabic character in the beginning to test right-to-left UI alignment
0263 message: (LayoutMirroring.enabled ? "\u062a" : "") + "Lorem ipsum dolor sit amet, consectetur adipisici elit,"
0264 + "sed eiusmod tempor incidunt ut labore et dolore magna aliqua."
0265 + "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris"
0266 + "nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit"
0267 + "in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
0268 + "Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui"
0269 + "officia deserunt mollit anim id est laborum."
0270
0271 acceptButtonText: "Ok"
0272 rejectButtonText: "Cancel"
0273
0274 titleIcon: "kmail"
0275 }
0276 }
0277
0278 Rectangle {
0279 anchors.horizontalCenter: parent.horizontalCenter
0280 height: contentMenuButton.height
0281 width: parent.width - parent.spacing
0282 radius: 10
0283
0284 Button {
0285 id: contentMenuButton
0286 property ContextMenu contextMenu
0287 anchors.horizontalCenter: parent.horizontalCenter
0288 text: "ContextMenu"
0289 onClicked: {
0290 if (!contextMenu)
0291 contextMenu = contextMenuComponent.createObject(contentMenuButton)
0292 contextMenu.open()
0293 }
0294 }
0295 }
0296
0297 Component {
0298 id: contextMenuComponent
0299 ContextMenu {
0300 visualParent: contentMenuButton
0301 MenuItem {
0302 text: "White"
0303 onClicked: contentMenuButton.parent.color = "White"
0304 }
0305 MenuItem {
0306 text: "Red"
0307 onClicked: contentMenuButton.parent.color = "Red"
0308 }
0309 MenuItem {
0310 text: "LightBlue"
0311 onClicked: contentMenuButton.parent.color = "LightBlue"
0312 }
0313 MenuItem {
0314 text: "LightGreen"
0315 onClicked: contentMenuButton.parent.color = "LightGreen"
0316 }
0317 }
0318 }
0319
0320 ListView {
0321 anchors.horizontalCenter: parent.horizontalCenter
0322 width: parent.width - parent.spacing; height: 120
0323 clip: true
0324 delegate: listDelegate
0325 model: listModel
0326 header: listHeading
0327 }
0328
0329 ListModel {
0330 id: listModel
0331
0332 ListElement {
0333 titleText: "Title"
0334 subTitleText: "SubTitle"
0335 }
0336 ListElement {
0337 titleText: "Title2"
0338 subTitleText: "SubTitle"
0339 }
0340 ListElement {
0341 titleText: "Title3"
0342 subTitleText: "SubTitle"
0343 }
0344 }
0345
0346 Component {
0347 id: listHeading
0348 Label {
0349 text: "Heading"
0350 }
0351 }
0352
0353 Component {
0354 id: listDelegate
0355 ListItem {
0356 id: listItem
0357 Column {
0358
0359 Label {
0360 text: titleText
0361 }
0362 Label {
0363 text: subTitleText
0364 }
0365 }
0366 }
0367 }
0368
0369 Label {
0370 property SelectionDialog selectionDialog
0371 text: {
0372 if (selectionDialog) {
0373 if (selectionDialog.selectedIndex >= 0)
0374 return selectionDialog.model.get(selectionDialog.selectedIndex).name
0375 }
0376 return "Three"
0377 }
0378 anchors.horizontalCenter: parent.horizontalCenter
0379 width: parent.width - parent.spacing
0380
0381 MouseArea {
0382 anchors.fill: parent
0383 onClicked: {
0384 if (!selectionDialog)
0385 selectionDialog = selectionDialogComponent.createObject(column)
0386 selectionDialog.open()
0387 }
0388 }
0389
0390 Component {
0391 id: selectionDialogComponent
0392 SelectionDialog {
0393 titleText: "Select"
0394 selectedIndex: 2
0395 model: ListModel {
0396 ListElement { name: "One" }
0397 ListElement { name: "Two" }
0398 ListElement { name: "Three" }
0399 ListElement { name: "Four" }
0400 ListElement { name: "Five" }
0401 ListElement { name: "Six" }
0402 ListElement { name: "Seven" }
0403 ListElement { name: "Eight" }
0404 ListElement { name: "Nine" }
0405 }
0406 }
0407 }
0408 }
0409
0410
0411 TabBar {
0412 //width: parent.width - parent.spacing
0413 //height: 50
0414 anchors.horizontalCenter: parent.horizontalCenter
0415 TabButton { tab: tab1content; text: "1"; iconSource: "qrc:close_stop.svg"}
0416 TabButton { tab: tab2content; text: "2"; iconSource: "konqueror"}
0417 TabButton { tab: tab3content; text: "3"}
0418 }
0419
0420 TabGroup {
0421 height: 100
0422 width: parent.width - parent.spacing
0423 Button { id: tab1content; text: "tab1" }
0424 Label {
0425 id: tab2content
0426 text: "tab2"
0427 horizontalAlignment: "AlignHCenter"
0428 verticalAlignment: "AlignVCenter"
0429 }
0430 Page {
0431 id: tab3content
0432 width: 50
0433 height: 32
0434 CheckBox { anchors.fill: parent; text: "tab3"}
0435 }
0436 }
0437
0438 ToolButton {
0439 id: toolButton
0440 text: "ToolButton"
0441 iconSource: "konqueror"
0442 }
0443
0444 ToolButton {
0445 id: toolButton2
0446 flat: true
0447 iconSource: "qrc:ok.svg"
0448 }
0449
0450 ToolButton {
0451 id: toolButton3
0452 text: "ToolButton"
0453 iconSource: "qrc:close_stop.svg"
0454 }
0455
0456 Row {
0457 spacing: 5
0458
0459 BusyIndicator {
0460 id: busyInd1
0461 width: 20
0462 height: 20
0463 running: true
0464 }
0465
0466 BusyIndicator {
0467 // default width/height is 40
0468 id: busyInd2
0469 running: true
0470 }
0471
0472 BusyIndicator {
0473 id: busyInd3
0474 width: 60
0475 height: 60
0476 running: true
0477 }
0478
0479 Button {
0480 text: "Toggle"
0481 onClicked: {
0482 busyInd1.running = !busyInd1.running
0483 busyInd2.running = !busyInd2.running
0484 busyInd3.running = !busyInd3.running
0485 }
0486 }
0487 }
0488
0489 Button {
0490 property CommonDialog sectionScroll
0491 anchors.horizontalCenter: parent.horizontalCenter
0492 width: parent.width - parent.spacing
0493 text: "SectionScroller"
0494 iconSource: "konqueror"
0495 onClicked: {
0496 if (!sectionScroll)
0497 sectionScroll = sectionScrollComponent.createObject(column)
0498 sectionScroll.open()
0499 }
0500 }
0501
0502 Component {
0503 id: sectionScrollComponent
0504 CommonDialog {
0505 id: sectionScroll
0506 titleText: "Section Scroller"
0507 buttonTexts: ["Close"]
0508 onButtonClicked: close()
0509
0510 content: Rectangle {
0511 color: Qr.rgba(1,1,1,0.8)
0512 width: parent.width
0513 implicitHeight: 300
0514
0515 ListModel {
0516 id: testModel
0517 ListElement { name: "A Cat 1"; alphabet: "A" }
0518 ListElement { name: "A Cat 2"; alphabet: "A" }
0519 ListElement { name: "Boo 1"; alphabet: "B" }
0520 ListElement { name: "Boo 2"; alphabet: "B" }
0521 ListElement { name: "Cat 1"; alphabet: "C" }
0522 ListElement { name: "Cat 2"; alphabet: "C" }
0523 ListElement { name: "Dog 1"; alphabet: "D" }
0524 ListElement { name: "Dog 2"; alphabet: "D" }
0525 ListElement { name: "Dog 3"; alphabet: "D" }
0526 ListElement { name: "Dog 4"; alphabet: "D" }
0527 ListElement { name: "Dog 5"; alphabet: "D" }
0528 ListElement { name: "Dog 6"; alphabet: "D" }
0529 ListElement { name: "Dog 7"; alphabet: "D" }
0530 ListElement { name: "Dog 8"; alphabet: "D" }
0531 ListElement { name: "Dog 9"; alphabet: "D" }
0532 ListElement { name: "Dog 10"; alphabet: "D" }
0533 ListElement { name: "Dog 11"; alphabet: "D" }
0534 ListElement { name: "Dog 12"; alphabet: "D" }
0535 ListElement { name: "Elephant 1"; alphabet: "E" }
0536 ListElement { name: "Elephant 2"; alphabet: "E" }
0537 ListElement { name: "FElephant 1"; alphabet: "F" }
0538 ListElement { name: "FElephant 2"; alphabet: "F" }
0539 ListElement { name: "Guinea pig"; alphabet: "G" }
0540 ListElement { name: "Goose"; alphabet: "G" }
0541 ListElement { name: "Horse"; alphabet: "H" }
0542 ListElement { name: "Horse"; alphabet: "H" }
0543 ListElement { name: "Parrot"; alphabet: "P" }
0544 ListElement { name: "Parrot"; alphabet: "P" }
0545 }
0546
0547 PlasmaExtras.ScrollArea {
0548 anchors.fill: parent
0549 ListView {
0550 id: list
0551 anchors.fill: parent
0552 clip: true
0553 cacheBuffer: contentHeight
0554 delegate: ListItem {
0555 Label {
0556 anchors {
0557 top: parent.top; topMargin: 4
0558 left: parent.left; leftMargin: 4
0559 }
0560 color: Qt.rgba(0,0,0,0.8)
0561 text: name + " (index " + index + ")"
0562 horizontalAlignment: Text.AlignLeft
0563 }
0564 }
0565
0566 model: testModel
0567 section.property: "alphabet"
0568 section.criteria: ViewSection.FullString
0569 section.delegate: ListItem {
0570 sectionDelegate: true
0571 Label {
0572 anchors {
0573 top: parent.top; topMargin: 4
0574 left: parent.left; leftMargin: 4
0575 }
0576 color: Qt.rgba(0,0,0,0.8)
0577 text: section
0578 horizontalAlignment: Text.AlignLeft
0579 font { bold: true; }
0580 }
0581 }
0582 }
0583 }
0584 }
0585 }
0586 }
0587
0588 ButtonRow {
0589 id: buttonRow1
0590 width: parent.width - parent.spacing
0591 exclusive: true
0592 checkedButton: b2
0593
0594 Button { text: "b1" }
0595 Button { text: "b2" }
0596 Button { text: "b3" }
0597 }
0598
0599 ButtonRow {
0600 id: buttonRow2
0601 width: parent.width - parent.spacing
0602 exclusive: true
0603
0604 ToolButton { text: "tb1" }
0605 ToolButton { text: "tb2" }
0606 }
0607 ButtonRow {
0608 id: buttonRow3
0609 exclusive: true
0610 spacing: 0
0611
0612 ToolButton { flat:false; iconSource: "go-previous" }
0613 ToolButton { flat:false; text: "tb2" }
0614 ToolButton { flat:false; text: "tb3" }
0615 ToolButton { flat:false; iconSource: "go-next" }
0616 }
0617 ButtonColumn {
0618 id: buttonRow4
0619 exclusive: true
0620 spacing: 0
0621
0622 ToolButton { flat:false; text: "tb1" }
0623 ToolButton { flat:false; text: "tb2" }
0624 ToolButton { flat:false; text: "tb3" }
0625 ToolButton { flat:false; text: "tb4" }
0626 }
0627
0628 ButtonColumn {
0629 id: buttonColumn
0630 width: parent.width - parent.spacing
0631 exclusive: true
0632
0633 Button { text: "b4" }
0634 Button { text: "b5" }
0635 Button { text: "b6" }
0636 Button { text: "b7" }
0637 }
0638 }
0639 }
0640 }
0641 }
0642
0643 }