kirigami/tests/ListItemTest.qml

0001 /*
0002  *  SPDX-FileCopyrightText: 2021 Nate Graham <nate@kde.org>
0003  *  SPDX-FileCopyrightText: 2023 Arjen Hiemstra <ahiemstra@heimr.nl>
0004  *
0005  *  SPDX-License-Identifier: LGPL-2.0-or-later
0006  */
0007
0008 import QtQuick
0009 import QtQuick.Layouts
0010 import QtQuick.Controls as QQC2
0011
0012 import org.kde.kirigami as Kirigami
0013 import org.kde.kirigami.delegates as KD
0014
0015 Kirigami.ApplicationWindow {
0016     GridLayout {
0017         anchors.fill: parent
0018         anchors.margins: Kirigami.Units.gridUnit
0019
0020         rows: 3
0021         rowSpacing: Kirigami.Units.gridUnit
0022         columns: 3
0023         columnSpacing: Kirigami.Units.gridUnit
0024
0025         Kirigami.Theme.inherit: false
0026         Kirigami.Theme.colorSet: Kirigami.Theme.View
0027
0028         // Icon + Label
0029         ColumnLayout {
0030             Layout.fillWidth: true
0031             Layout.preferredWidth: 1
0032
0033             Kirigami.Heading {
0034                 text: "Icon + Label"
0035                 level: 3
0036                 Layout.fillWidth: true
0037                 wrapMode: Text.Wrap
0038             }
0039
0040             KD.SubtitleDelegate {
0041                 Layout.fillWidth: true
0042
0043                 icon.name: "edit-bomb"
0044                 text: "Boom!"
0045             }
0046             KD.CheckSubtitleDelegate {
0047                 Layout.fillWidth: true
0048
0049                 icon.name: "edit-bomb"
0050                 text: "Boom!"
0051             }
0052             KD.RadioSubtitleDelegate {
0053                 Layout.fillWidth: true
0054
0055                 icon.name: "edit-bomb"
0056                 text: "Boom!"
0057             }
0058             KD.SwitchSubtitleDelegate {
0059                 Layout.fillWidth: true
0060
0061                 icon.name: "edit-bomb"
0062                 text: "Boom!"
0063             }
0064         }
0065
0066         // Label + space reserved for icon
0067         ColumnLayout {
0068             Layout.fillWidth: true
0069             Layout.preferredWidth: 1
0070
0071             Kirigami.Heading {
0072                 text: "Icon + Label + space reserved for icon"
0073                 level: 3
0074                 Layout.fillWidth: true
0075                 wrapMode: Text.Wrap
0076             }
0077
0078             KD.SubtitleDelegate {
0079                 Layout.fillWidth: true
0080                 text: "Boom!"
0081                 icon.width: Kirigami.Units.iconSizes.smallMedium
0082             }
0083             KD.CheckSubtitleDelegate {
0084                 Layout.fillWidth: true
0085                 text: "Boom!"
0086                 icon.width: Kirigami.Units.iconSizes.smallMedium
0087             }
0088             KD.RadioSubtitleDelegate {
0089                 Layout.fillWidth: true
0090                 text: "Boom!"
0091                 icon.width: Kirigami.Units.iconSizes.smallMedium
0092             }
0093             KD.SwitchSubtitleDelegate {
0094                 Layout.fillWidth: true
0095                 text: "Boom!"
0096                 icon.width: Kirigami.Units.iconSizes.smallMedium
0097             }
0098         }
0099
0100         // Icon + Label + leading and trailing items
0101         ColumnLayout {
0102             Layout.fillWidth: true
0103             Layout.preferredWidth: 1
0104
0105             Kirigami.Heading {
0106                 text: "Icon + Label + leading and trailing items"
0107                 level: 3
0108                 Layout.fillWidth: true
0109                 wrapMode: Text.Wrap
0110             }
0111
0112             QQC2.ItemDelegate {
0113                 id: plainDelegate
0114                 Layout.fillWidth: true
0115
0116                 icon.name: "edit-bomb"
0117                 text: "Boom!"
0118
0119                 contentItem: RowLayout {
0120                     spacing: Kirigami.Units.smallSpacing
0121                     Rectangle {
0122                         radius: height
0123                         Layout.preferredWidth: Kirigami.Units.largeSpacing
0124                         Layout.preferredHeight: Kirigami.Units.largeSpacing
0125                         color: Kirigami.Theme.neutralTextColor
0126                     }
0127
0128                     KD.IconTitleSubtitle {
0129                         Layout.fillWidth: true
0130                         title: plainDelegate.text
0131                         icon: icon.fromControlsIcon(plainDelegate.icon)
0132                     }
0133
0134                     QQC2.Button {
0135                         icon.name: "edit-delete"
0136                         text: "Defuse the bomb!"
0137                     }
0138                 }
0139             }
0140             QQC2.CheckDelegate {
0141                 id: checkDelegate
0142                 Layout.fillWidth: true
0143
0144                 icon.name: "edit-bomb"
0145                 text: "Boom!"
0146
0147                 contentItem: RowLayout {
0148                     spacing: Kirigami.Units.smallSpacing
0149                     Rectangle {
0150                         radius: height
0151                         Layout.preferredWidth: Kirigami.Units.largeSpacing
0152                         Layout.preferredHeight: Kirigami.Units.largeSpacing
0153                         color: Kirigami.Theme.neutralTextColor
0154                     }
0155
0156                     KD.IconTitleSubtitle {
0157                         Layout.fillWidth: true
0158                         title: checkDelegate.text
0159                         icon: icon.fromControlsIcon(checkDelegate.icon)
0160                     }
0161
0162                     QQC2.Button {
0163                         icon.name: "edit-delete"
0164                         text: "Defuse the bomb!"
0165                     }
0166                 }
0167             }
0168             QQC2.RadioDelegate {
0169                 id: radioDelegate
0170                 Layout.fillWidth: true
0171
0172                 icon.name: "edit-bomb"
0173                 text: "Boom!"
0174
0175                 contentItem: RowLayout {
0176                     spacing: Kirigami.Units.smallSpacing
0177                     Rectangle {
0178                         radius: height
0179                         Layout.preferredWidth: Kirigami.Units.largeSpacing
0180                         Layout.preferredHeight: Kirigami.Units.largeSpacing
0181                         color: Kirigami.Theme.neutralTextColor
0182                     }
0183
0184                     KD.IconTitleSubtitle {
0185                         Layout.fillWidth: true
0186                         title: radioDelegate.text
0187                         icon: icon.fromControlsIcon(radioDelegate.icon)
0188                     }
0189
0190                     QQC2.Button {
0191                         icon.name: "edit-delete"
0192                         text: "Defuse the bomb!"
0193                     }
0194                 }
0195             }
0196             QQC2.SwitchDelegate {
0197                 id: switchDelegate
0198                 Layout.fillWidth: true
0199
0200                 icon.name: "edit-bomb"
0201                 text: "Boom!"
0202
0203                 contentItem: RowLayout {
0204                     spacing: Kirigami.Units.smallSpacing
0205                     Rectangle {
0206                         radius: height
0207                         Layout.preferredWidth: Kirigami.Units.largeSpacing
0208                         Layout.preferredHeight: Kirigami.Units.largeSpacing
0209                         color: Kirigami.Theme.neutralTextColor
0210                     }
0211
0212                     KD.IconTitleSubtitle {
0213                         Layout.fillWidth: true
0214                         title: switchDelegate.text
0215                         icon: icon.fromControlsIcon(switchDelegate.icon)
0216                     }
0217
0218                     QQC2.Button {
0219                         icon.name: "edit-delete"
0220                         text: "Defuse the bomb!"
0221                     }
0222                 }
0223             }
0224         }
0225
0226         // Icon + Label + subtitle
0227         ColumnLayout {
0228             Layout.fillWidth: true
0229             Layout.preferredWidth: 1
0230
0231             Kirigami.Heading {
0232                 text: "Icon + Label + subtitle"
0233                 level: 3
0234                 Layout.fillWidth: true
0235                 wrapMode: Text.Wrap
0236             }
0237
0238             KD.SubtitleDelegate {
0239                 Layout.fillWidth: true
0240
0241                 icon.name: "edit-bomb"
0242                 text: "Boom!"
0243                 subtitle: "smaller boom"
0244             }
0245             KD.CheckSubtitleDelegate {
0246                 Layout.fillWidth: true
0247
0248                 icon.name: "edit-bomb"
0249                 text: "Boom!"
0250                 subtitle: "smaller boom"
0251             }
0252             KD.RadioSubtitleDelegate {
0253                 Layout.fillWidth: true
0254
0255                 icon.name: "edit-bomb"
0256                 text: "Boom!"
0257                 subtitle: "smaller boom"
0258             }
0259             KD.SwitchSubtitleDelegate {
0260                 Layout.fillWidth: true
0261
0262                 icon.name: "edit-bomb"
0263                 text: "Boom!"
0264                 subtitle: "smaller boom"
0265             }
0266         }
0267
0268         // Icon + Label + space reserved for subtitle
0269         ColumnLayout {
0270             Layout.fillWidth: true
0271             Layout.preferredWidth: 1
0272
0273             Kirigami.Heading {
0274                 text: "Icon + Label + space reserved for subtitle"
0275                 level: 3
0276                 Layout.fillWidth: true
0277                 wrapMode: Text.Wrap
0278             }
0279
0280             KD.SubtitleDelegate {
0281                 Layout.fillWidth: true
0282
0283                 icon.name: "edit-bomb"
0284                 text: "Boom!"
0285
0286                 contentItem: KD.IconTitleSubtitle {
0287                     title: parent.text
0288                     icon: icon.fromControlsIcon(parent.icon)
0289                     reserveSpaceForSubtitle: true
0290                 }
0291             }
0292             KD.CheckSubtitleDelegate {
0293                 Layout.fillWidth: true
0294
0295                 icon.name: "edit-bomb"
0296                 text: "Boom!"
0297
0298                 contentItem: KD.IconTitleSubtitle {
0299                     title: parent.text
0300                     icon: icon.fromControlsIcon(parent.icon)
0301                     reserveSpaceForSubtitle: true
0302                 }
0303             }
0304             KD.RadioSubtitleDelegate {
0305                 Layout.fillWidth: true
0306
0307                 icon.name: "edit-bomb"
0308                 text: "Boom!"
0309
0310                 contentItem: KD.IconTitleSubtitle {
0311                     title: parent.text
0312                     icon: icon.fromControlsIcon(parent.icon)
0313                     reserveSpaceForSubtitle: true
0314                 }
0315             }
0316             KD.SwitchSubtitleDelegate {
0317                 Layout.fillWidth: true
0318
0319                 icon.name: "edit-bomb"
0320                 text: "Boom!"
0321
0322                 contentItem: KD.IconTitleSubtitle {
0323                     title: parent.text
0324                     icon: icon.fromControlsIcon(parent.icon)
0325                     reserveSpaceForSubtitle: true
0326                 }
0327             }
0328         }
0329
0330         // Icon + Label + subtitle + leading and trailing items
0331         ColumnLayout {
0332             Layout.fillWidth: true
0333             Layout.preferredWidth: 1
0334
0335             Kirigami.Heading {
0336                 text: "Icon + Label + subtitle + leading/trailing"
0337                 level: 3
0338                 Layout.fillWidth: true
0339                 wrapMode: Text.Wrap
0340             }
0341
0342             KD.SubtitleDelegate {
0343                 id: subtitleDelegate
0344                 Layout.fillWidth: true
0345
0346                 icon.name: "edit-bomb"
0347                 text: "Boom!"
0348                 subtitle: "smaller boom"
0349
0350                 contentItem: RowLayout {
0351                     spacing: Kirigami.Units.smallSpacing
0352                     Rectangle {
0353                         radius: height
0354                         Layout.preferredWidth: Kirigami.Units.largeSpacing
0355                         Layout.preferredHeight: Kirigami.Units.largeSpacing
0356                         color: Kirigami.Theme.neutralTextColor
0357                     }
0358
0359                     KD.IconTitleSubtitle {
0360                         Layout.fillWidth: true
0361                         title: subtitleDelegate.text
0362                         subtitle: subtitleDelegate.subtitle
0363                         selected: subtitleDelegate.highlighted || subtitleDelegate.down
0364                         icon: icon.fromControlsIcon(subtitleDelegate.icon)
0365                     }
0366
0367                     QQC2.Button {
0368                         icon.name: "edit-delete"
0369                         text: "Defuse the bomb!"
0370                     }
0371                 }
0372             }
0373             KD.CheckSubtitleDelegate {
0374                 id: subtitleCheckDelegate
0375                 Layout.fillWidth: true
0376
0377                 icon.name: "edit-bomb"
0378                 text: "Boom!"
0379                 subtitle: "smaller boom"
0380
0381                 contentItem: RowLayout {
0382                     spacing: Kirigami.Units.smallSpacing
0383                     Rectangle {
0384                         radius: height
0385                         Layout.preferredWidth: Kirigami.Units.largeSpacing
0386                         Layout.preferredHeight: Kirigami.Units.largeSpacing
0387                         color: Kirigami.Theme.neutralTextColor
0388                     }
0389
0390                     KD.IconTitleSubtitle {
0391                         Layout.fillWidth: true
0392                         title: subtitleCheckDelegate.text
0393                         subtitle: subtitleCheckDelegate.subtitle
0394                         selected: subtitleCheckDelegate.highlighted || subtitleCheckDelegate.down
0395                         icon: icon.fromControlsIcon(subtitleCheckDelegate.icon)
0396                     }
0397
0398                     QQC2.Button {
0399                         icon.name: "edit-delete"
0400                         text: "Defuse the bomb!"
0401                     }
0402                 }
0403             }
0404             KD.RadioSubtitleDelegate {
0405                 id: subtitleRadioDelegate
0406                 Layout.fillWidth: true
0407
0408                 icon.name: "edit-bomb"
0409                 text: "Boom!"
0410                 subtitle: "smaller boom"
0411
0412                 contentItem: RowLayout {
0413                     spacing: Kirigami.Units.smallSpacing
0414                     Rectangle {
0415                         radius: height
0416                         Layout.preferredWidth: Kirigami.Units.largeSpacing
0417                         Layout.preferredHeight: Kirigami.Units.largeSpacing
0418                         color: Kirigami.Theme.neutralTextColor
0419                     }
0420
0421                     KD.IconTitleSubtitle {
0422                         Layout.fillWidth: true
0423                         title: subtitleRadioDelegate.text
0424                         subtitle: subtitleRadioDelegate.subtitle
0425                         selected: subtitleRadioDelegate.highlighted || subtitleRadioDelegate.down
0426                         icon: icon.fromControlsIcon(subtitleRadioDelegate.icon)
0427                     }
0428
0429                     QQC2.Button {
0430                         icon.name: "edit-delete"
0431                         text: "Defuse the bomb!"
0432                     }
0433                 }
0434             }
0435             KD.SwitchSubtitleDelegate {
0436                 id: subtitleSwitchDelegate
0437                 Layout.fillWidth: true
0438
0439                 icon.name: "edit-bomb"
0440                 text: "Boom!"
0441                 subtitle: "smaller boom"
0442
0443                 contentItem: RowLayout {
0444                     spacing: Kirigami.Units.smallSpacing
0445                     Rectangle {
0446                         radius: height
0447                         Layout.preferredWidth: Kirigami.Units.largeSpacing
0448                         Layout.preferredHeight: Kirigami.Units.largeSpacing
0449                         color: Kirigami.Theme.neutralTextColor
0450                     }
0451
0452                     KD.IconTitleSubtitle {
0453                         Layout.fillWidth: true
0454                         title: subtitleSwitchDelegate.text
0455                         subtitle: subtitleSwitchDelegate.subtitle
0456                         selected: subtitleSwitchDelegate.highlighted || subtitleSwitchDelegate.down
0457                         icon: icon.fromControlsIcon(subtitleSwitchDelegate.icon)
0458                     }
0459
0460                     QQC2.Button {
0461                         icon.name: "edit-delete"
0462                         text: "Defuse the bomb!"
0463                     }
0464                 }
0465             }
0466         }
0467     }
0468 }
0469