Warning, /libraries/kirigami-addons/tests/FormTestApp.qml is written in an unsupported language. File is not indexed.

0001 /*
0002  * Copyright 2022 Devin Lin <devin@kde.org>
0003  * SPDX-License-Identifier: LGPL-2.0-or-later
0004  */
0005 
0006 import QtQuick 2.15
0007 import QtQuick.Controls 2.15 as Controls
0008 import QtQuick.Layouts 1.2
0009 import QtQuick.Layouts 1.15
0010 
0011 import org.kde.kirigami 2.20 as Kirigami
0012 import org.kde.kirigamiaddons.formcard 1.0 as FormCard
0013 import org.kde.kirigamiaddons.components 1.0 as Components
0014 
0015 Kirigami.ApplicationWindow {
0016     id: appwindow
0017 
0018     title: "Mobile Form Test"
0019 
0020     width: Kirigami.Settings.isMobile ? 400 : 800
0021     height: Kirigami.Settings.isMobile ? 550 : 500
0022 
0023     pageStack.defaultColumnWidth: Kirigami.Units.gridUnit * 35
0024     pageStack.globalToolBar.style: Kirigami.ApplicationHeaderStyle.ToolBar;
0025     pageStack.globalToolBar.showNavigationButtons: Kirigami.ApplicationHeaderStyle.ShowBackButton;
0026 
0027     pageStack.initialPage: pageComponent
0028     // Dummy implementation of ki18n
0029     function i18nd(context, text) {
0030         return text;
0031     }
0032 
0033     function i18ndp(context, text1, text2, number) {
0034         return number === 1 ? text1 : text2;
0035     }
0036 
0037     function i18nc(context, text) {
0038         return text;
0039     }
0040 
0041     function i18ndc(context, strng, text) {
0042         return text;
0043     }
0044 
0045     LayoutMirroring.enabled: false
0046 
0047 
0048     Component {
0049         id: aboutComponent
0050         FormCard.AboutPage {
0051             aboutData: {
0052                 "displayName": "KirigamiApp",
0053                "productName" : "kirigami/app",
0054                "componentName" : "kirigamiapp",
0055                "shortDescription" : "A Kirigami example",
0056                "homepage" : "",
0057                "bugAddress" : "submit@bugs.kde.org",
0058                "version" : "5.14.80",
0059                "otherText" : "",
0060                "authors" : [
0061                    {
0062                        "name" : "Paul Müller",
0063                        "task" : "Concept and development",
0064                        "emailAddress" : "somebody@kde.org",
0065                        "webAddress" : "",
0066                        "ocsUsername" : ""
0067                    }
0068                ],
0069                "credits" : [],
0070                "translators" : [],
0071                "licenses" : [
0072                    {
0073                        "name" : "GPL v2",
0074                        "text" : "long, boring, license text",
0075                        "spdx" : "GPL-2.0"
0076                    }
0077                ],
0078                "copyrightStatement" : "© 2010-2018 Plasma Development Team",
0079                "desktopFileName" : "org.kde.kirigamiapp"
0080            }
0081         }
0082     }
0083 
0084     Component {
0085         id: pageComponent
0086         Kirigami.ScrollablePage {
0087             id: page
0088             title: "Mobile Form Layout"
0089 
0090             Kirigami.Theme.colorSet: Kirigami.Theme.Window
0091             Kirigami.Theme.inherit: false
0092 
0093             topPadding: Kirigami.Units.gridUnit
0094             leftPadding: 0
0095             rightPadding: 0
0096             bottomPadding: Kirigami.Units.gridUnit
0097 
0098             header: Components.Banner {
0099                 title: "My title"
0100                 text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Inde sermone vario sex illa a Dipylo stadia confecimus. In eo enim positum est id, quod dicimus esse expetendum.\n\n\
0101 Duo Reges: constructio interrete. Primum Theophrasti, Strato, physicum se voluit; Aliter enim explicari, quod quaeritur, non potest. Quamquam id quidem, infinitum est in hac urbe;"
0102                 type: Kirigami.MessageType.Warning
0103                 width: page.width
0104                 visible: true
0105 
0106                 showCloseButton: true
0107 
0108                 actions: Kirigami.Action {
0109                     text: "Do something"
0110                 }
0111             }
0112 
0113             ColumnLayout {
0114                 spacing: 0
0115 
0116                 // Form Grid
0117                 FormCard.FormGridContainer {
0118                     id: container
0119 
0120                     Layout.fillWidth: true
0121 
0122                     infoCards: [
0123                         FormCard.FormGridContainer.InfoCard {
0124                             title: "42"
0125                             subtitle: "Posts"
0126                         },
0127                         FormCard.FormGridContainer.InfoCard {
0128                             title: "42"
0129                             subtitle: "Followers"
0130                         },
0131                         FormCard.FormGridContainer.InfoCard {
0132                             title: "42"
0133                             subtitle: "Follows"
0134                             action: Kirigami.Action {
0135                                 onTriggered: applicationWindow().showPassiveNotification("42 Follows")
0136                             }
0137                         }
0138                     ]
0139                 }
0140 
0141                 FormCard.FormHeader {
0142                     title: "About"
0143                 }
0144                 FormCard.FormCard {
0145                     FormCard.FormButtonDelegate {
0146                         id: aboutDelegate
0147                         text: "About"
0148                         onClicked: applicationWindow().pageStack.push(aboutComponent)
0149                     }
0150                 }
0151 
0152                 FormCard.FormHeader {
0153                     title: "Date and time"
0154                 }
0155 
0156                 FormCard.FormCard {
0157                     FormCard.FormDateTimeDelegate {}
0158 
0159                     FormCard.FormDelegateSeparator {}
0160 
0161                     FormCard.FormDateTimeDelegate {
0162                         text: "Arrival day:"
0163                         minimumDate: new Date()
0164                         dateTimeDisplay: FormCard.FormDateTimeDelegate.DateTimeDisplay.Date
0165                     }
0166 
0167                     FormCard.FormDelegateSeparator {}
0168 
0169                     FormCard.FormDateTimeDelegate {
0170                         text: "Arrival time:"
0171                         dateTimeDisplay: FormCard.FormDateTimeDelegate.DateTimeDisplay.Time
0172                         status: Kirigami.MessageType.Warning
0173                         statusMessage: value.getHours() < 8 ? "Very early!" : ""
0174                     }
0175                 }
0176 
0177                 FormCard.FormHeader {
0178                     title: "Buttons"
0179                 }
0180                 FormCard.FormCard {
0181                     Layout.fillWidth: true
0182 
0183                     FormCard.FormButtonDelegate {
0184                         id: delegate1
0185                         text: "Button"
0186                         description: "Click me!"
0187                         onClicked: applicationWindow().pageStack.push(pageComponent)
0188                     }
0189 
0190                     FormCard.FormDelegateSeparator { above: delegate1; below: delegate2 }
0191 
0192                     FormCard.FormButtonDelegate {
0193                         id: delegate2
0194                         text: "Button 2"
0195                     }
0196 
0197                     FormCard.FormDelegateSeparator { above: delegate2; below: delegate3 }
0198 
0199                     FormCard.FormButtonDelegate {
0200                         id: delegate3
0201                         text: "Notification Settings"
0202                         icon.name: "notifications"
0203                     }
0204                 }
0205 
0206                 FormCard.FormSectionText {
0207                     text: "The form components support keyboard navigation with Tab and Shift+Tab."
0208                 }
0209 
0210                 // checkboxes
0211                 FormCard.FormHeader {
0212                     title: "Checkboxes"
0213                 }
0214                 FormCard.FormCard {
0215                     FormCard.FormCheckDelegate {
0216                         id: checkbox1
0217                         text: "Check the first box"
0218                     }
0219 
0220                     FormCard.FormCheckDelegate {
0221                         id: checkbox2
0222                         text: "Check the second box"
0223                     }
0224 
0225                     FormCard.FormCheckDelegate {
0226                         id: checkbox3
0227                         text: "Check the third box"
0228                     }
0229                 }
0230                 
0231                 FormCard.FormSectionText {
0232                     text: "Use cards to denote relevant groups of settings."
0233                 }
0234 
0235                 // switches
0236                 FormCard.FormHeader {
0237                     title: "Switches"
0238                 }
0239                 FormCard.FormCard {
0240                     FormCard.FormSwitchDelegate {
0241                         id: switch1
0242                         text: "Toggle the first switch"
0243                     }
0244 
0245                     FormCard.FormDelegateSeparator { above: switch1; below: switch2 }
0246 
0247                     FormCard.FormSwitchDelegate {
0248                         id: switch2
0249                         text: "Toggle the second switch"
0250                     }
0251 
0252                     FormCard.FormDelegateSeparator { above: switch2; below: switch3 }
0253 
0254                     FormCard.FormSwitchDelegate {
0255                         id: switch3
0256                         text: "Toggle the third switch"
0257                         description: "This is a description for the switch."
0258                     }
0259                     
0260                     FormCard.FormDelegateSeparator { above: switch3; below: layoutMirroring }
0261 
0262                     FormCard.FormSwitchDelegate {
0263                         id: layoutMirroring
0264                         text: "Layout mirroring"
0265                         description: "Toggle layout mirroring to test flipped layouts."
0266                         onCheckedChanged: {
0267                             applicationWindow().LayoutMirroring.enabled = checked;
0268                         }
0269                     }
0270                 }
0271 
0272                 // dropdowns
0273                 // large amount of options -> push a new page
0274                 // small amount of options -> open dialog
0275                 FormCard.FormHeader {
0276                     title: "Dropdowns"
0277                 }
0278                 FormCard.FormCard {
0279                     FormCard.FormComboBoxDelegate {
0280                         id: dropdown1
0281                         text: "Select a color"
0282                         Component.onCompleted: currentIndex = indexOfValue("Breeze Blue")
0283                         model: ["Breeze Blue", "Konqi Green", "Velvet Red", "Bright Yellow"]
0284                     }
0285 
0286                     FormCard.FormDelegateSeparator { above: dropdown1; below: dropdown2 }
0287 
0288                     FormCard.FormComboBoxDelegate {
0289                         id: dropdown2
0290                         text: "Select a shape"
0291                         Component.onCompleted: currentIndex = indexOfValue("Pentagon")
0292                         model: ["Circle", "Square", "Pentagon", "Triangle"]
0293                     }
0294 
0295                     FormCard.FormDelegateSeparator { above: dropdown2; below: dropdown3 }
0296 
0297                     FormCard.FormComboBoxDelegate {
0298                         id: dropdown3
0299                         text: "Select a time format"
0300                         description: "This will be used system-wide."
0301                         Component.onCompleted: currentIndex = indexOfValue("Use System Default")
0302                         model: ["Use System Default", "24 Hour Time", "12 Hour Time"]
0303                     }
0304 
0305                     FormCard.FormDelegateSeparator { above: dropdown3; below: dropdown4 }
0306 
0307                     FormCard.FormComboBoxDelegate {
0308                         id: dropdown4
0309                         text: "Select a color (page)"
0310                         displayMode: FormCard.FormComboBoxDelegate.DisplayMode.Page
0311                         Component.onCompleted: currentIndex = indexOfValue("Breeze Blue")
0312                         model: ["Breeze Blue", "Konqi Green", "Velvet Red", "Bright Yellow"]
0313                     }
0314                 }
0315 
0316                 // radio buttons
0317                 FormCard.FormHeader {
0318                     title: "Radio buttons"
0319                 }
0320                 FormCard.FormCard {
0321                     FormCard.FormRadioDelegate {
0322                         id: radio1
0323                         text: "Always on"
0324                     }
0325 
0326                     FormCard.FormRadioDelegate {
0327                         id: radio2
0328                         text: "On during the day"
0329                     }
0330 
0331                     FormCard.FormRadioDelegate {
0332                         id: radio3
0333                         text: "Always off"
0334                     }
0335                 }
0336 
0337                 // misc
0338                 FormCard.FormCard {
0339                     Layout.topMargin: Kirigami.Units.largeSpacing
0340 
0341                     FormCard.AbstractFormDelegate {
0342                         id: slider1
0343                         Layout.fillWidth: true
0344 
0345                         background: Item {}
0346 
0347                         contentItem: RowLayout {
0348                             spacing: Kirigami.Units.gridUnit
0349                             Kirigami.Icon {
0350                                 implicitWidth: Kirigami.Units.iconSizes.smallMedium
0351                                 implicitHeight: Kirigami.Units.iconSizes.smallMedium
0352                                 source: "brightness-low"
0353                             }
0354 
0355                             Controls.Slider {
0356                                 Layout.fillWidth: true
0357                             }
0358 
0359                             Kirigami.Icon {
0360                                 implicitWidth: Kirigami.Units.iconSizes.smallMedium
0361                                 implicitHeight: Kirigami.Units.iconSizes.smallMedium
0362                                 source: "brightness-high"
0363                             }
0364                         }
0365                     }
0366 
0367                     FormCard.FormDelegateSeparator { below: textinput1 }
0368 
0369                     FormCard.AbstractFormDelegate {
0370                         id: textinput1
0371                         Layout.fillWidth: true
0372                         contentItem: RowLayout {
0373                             Controls.Label {
0374                                 Layout.fillWidth: true
0375                                 text: "Enter text"
0376                             }
0377 
0378                             Controls.TextField {
0379                                 Layout.preferredWidth: Kirigami.Units.gridUnit * 8
0380                                 placeholderText: "Insert text…"
0381                             }
0382                         }
0383                     }
0384 
0385                     FormCard.FormDelegateSeparator { above: textinput1; below: action1 }
0386 
0387                     FormCard.AbstractFormDelegate {
0388                         id: action1
0389                         Layout.fillWidth: true
0390                         contentItem: RowLayout {
0391                             Controls.Label {
0392                                 Layout.fillWidth: true
0393                                 text: "Do an action"
0394                             }
0395 
0396                             Controls.Button {
0397                                 text: "Do Action"
0398                                 icon.name: "edit-clear-all"
0399                             }
0400                         }
0401                     }
0402                 }
0403 
0404                 // info block
0405                 FormCard.FormHeader {
0406                     title: "Information"
0407                 }
0408                 FormCard.FormCard {
0409                     FormCard.FormTextDelegate {
0410                         id: info1
0411                         text: "Color"
0412                         description: "Blue"
0413                     }
0414 
0415                     FormCard.FormDelegateSeparator {}
0416 
0417                     FormCard.FormTextDelegate {
0418                         id: info2
0419                         text: "Best Desktop Environment"
0420                         description: "KDE Plasma (Mobile)"
0421                     }
0422 
0423                     FormCard.FormDelegateSeparator {}
0424 
0425                     FormCard.FormTextDelegate {
0426                         id: info3
0427                         text: "Best Dragon"
0428                         description: "Konqi"
0429                         trailing: Controls.Button {
0430                             text: "Agree"
0431                             icon.name: "dialog-ok"
0432                         }
0433                     }
0434                 }
0435 
0436                 FormCard.FormSectionText {
0437                     text: "Use the text form delegates to display information."
0438                 }
0439                 
0440                 // text fields
0441                 FormCard.FormHeader {
0442                     title: "Text Fields"
0443                 }
0444 
0445                 FormCard.FormCard {
0446                     FormCard.FormTextFieldDelegate {
0447                         id: account
0448                         label: "Account name"
0449                     }
0450 
0451                     FormCard.FormTextFieldDelegate {
0452                         id: password1
0453                         label: "Password"
0454                         statusMessage: "Password incorrect"
0455                         status: Kirigami.MessageType.Error
0456                         echoMode: TextInput.Password
0457                         text: "666666666"
0458                     }
0459 
0460                     // don't put above and below, since we don't care about hover events
0461                     FormCard.FormDelegateSeparator {}
0462 
0463                     FormCard.FormTextFieldDelegate {
0464                         id: password2
0465                         label: "Password"
0466                         statusMessage: "Password match"
0467                         text: "4242424242"
0468                         status: Kirigami.MessageType.Positive
0469                         echoMode: TextInput.Password
0470                     }
0471                 }
0472 
0473                 // spin boxes fields
0474                 FormCard.FormHeader {
0475                     title: "Spin boxes"
0476                 }
0477                 FormCard.FormCard {
0478                     FormCard.FormSpinBoxDelegate {
0479                         label: "Amount"
0480                         value: 42
0481                     }
0482 
0483                     FormCard.FormDelegateSeparator {}
0484 
0485                     FormCard.FormSpinBoxDelegate {
0486                         label: "Amount 2"
0487                         value: 84
0488                         statusMessage: "This is too high"
0489                         status: Kirigami.MessageType.Error
0490                     }
0491                 }
0492             }
0493         }
0494     }
0495 }
0496