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