Warning, /libraries/kirigami-addons/src/formcard/FormGridContainer.qml is written in an unsupported language. File is not indexed.
0001 // SPDX-FileCopyrightText: 2022 Devin Lin <devin@kde.org>
0002 // SPDX-FileCopyrightText: 2023 Rishi Kumar <rsi.dev17@gmail.com>
0003 // SPDX-FileCopyrightText: 2023 Carl Schwan <carl@carlschwan.eu>
0004 // SPDX-License-Identifier: LGPL-2.0-or-later
0005
0006 import QtQml
0007 import QtQuick
0008 import QtQuick.Controls as QQC2
0009 import QtQuick.Templates as T
0010 import QtQuick.Layouts
0011
0012 import org.kde.kirigami as Kirigami
0013
0014 import "private" as Private
0015
0016 /**
0017 * This component render a grid of small cards.
0018 *
0019 * This is used to display multiple information in a MobileForm.FormLayout
0020 * without taking too much vertical space.
0021 *
0022 * @code{.qml}
0023 * import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
0024 *
0025 * MobileForm.FormGridContainer {
0026 * id: container
0027 *
0028 * Layout.topMargin: Kirigami.Units.largeSpacing
0029 * Layout.fillWidth: true
0030 *
0031 * infoCards: [
0032 * MobileForm.FormGridContainer.InfoCard {
0033 * title: "42"
0034 * subtitle: i18nc("@info:Number of Posts", "Posts")
0035 * },
0036 * MobileForm.FormGridContainer.InfoCard {
0037 * title: "42"
0038 * subtitle: i18nc("@info:Number of followers.", "Followers")
0039 * }
0040 * ]
0041 * }
0042 * @endcode
0043 *
0044 *
0045 * @since KirigamiAddons 0.11.0
0046 *
0047 * @inherit QtQuick.Item
0048 */
0049 Item {
0050 id: root
0051
0052 /**
0053 * This property holds the maximum width of the grid.
0054 */
0055 property real maximumWidth: Kirigami.Units.gridUnit * 30
0056
0057 /**
0058 * @brief This property holds the padding used around the content edges.
0059 *
0060 * default: `0`
0061 */
0062 property real padding: 0
0063 property real verticalPadding: padding
0064 property real horizontalPadding: padding
0065 property real topPadding: verticalPadding
0066 property real bottomPadding: verticalPadding
0067 property real leftPadding: horizontalPadding
0068 property real rightPadding: horizontalPadding
0069
0070 /**
0071 * This property holds whether the card's width is being restricted.
0072 */
0073 readonly property bool cardWidthRestricted: root.width > root.maximumWidth
0074
0075 /**
0076 * This property holds the InfoCards which should be displayed.
0077 *
0078 * Each InfoCard contains a title and an optional subtitle
0079 *
0080 * @code{.qml}
0081 * import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
0082 *
0083 * MobileForm.FormGridContainer {
0084 * infoCards: [
0085 * MobileForm.FormGridContainer.InfoCard {
0086 * title: "42"
0087 * subtitle: i18nc("@info:Number of Posts", "Posts")
0088 * },
0089 * MobileForm.FormGridContainer.InfoCard {
0090 * title: "42"
0091 * },
0092 * MobileForm.FormGridContainer.InfoCard {
0093 * title: "Details"
0094 * action: Kirigami.Action {
0095 * onClicked: pageStack.push("Details.qml")
0096 * }
0097 * }
0098 * ]
0099 * }
0100 * @endcode
0101 */
0102 property list<QtObject> infoCards
0103
0104 component InfoCard: QtObject {
0105 property bool visible: true
0106 property string title
0107 property string subtitle
0108 property string buttonIcon
0109 property string tooltipText
0110 property int subtitleTextFormat: Text.AutoText
0111 property Kirigami.Action action
0112 }
0113
0114 Kirigami.Theme.colorSet: Kirigami.Theme.View
0115 Kirigami.Theme.inherit: false
0116
0117 implicitHeight: topPadding + bottomPadding + grid.implicitHeight
0118
0119 Item {
0120 anchors {
0121 top: parent.top
0122 bottom: parent.bottom
0123 left: parent.left
0124 right: parent.right
0125
0126 leftMargin: root.cardWidthRestricted ? Math.round((root.width - root.maximumWidth) / 2) : 0
0127 rightMargin: root.cardWidthRestricted ? Math.round((root.width - root.maximumWidth) / 2) : 0
0128 }
0129
0130 GridLayout {
0131 id: grid
0132
0133 readonly property int cellWidth: Kirigami.Units.gridUnit * 10
0134 readonly property int visibleChildrenCount: visibleChildren.length - 1
0135
0136 anchors {
0137 fill: parent
0138 leftMargin: root.leftPadding
0139 rightMargin: root.rightPadding
0140 topMargin: root.topPadding
0141 bottomMargin: root.bottomPadding
0142 }
0143
0144 columns: root.cardWidthRestricted && grid.visibleChildrenCount % 3 === 0 ? 3 : 2
0145 columnSpacing: Kirigami.Units.smallSpacing
0146 rowSpacing: Kirigami.Units.smallSpacing
0147
0148 Repeater {
0149 id: cardRepeater
0150
0151 model: root.infoCards
0152
0153 QQC2.AbstractButton {
0154 id: infoCardDelegate
0155
0156 required property int index
0157 required property QtObject modelData
0158
0159 readonly property string title: modelData.title
0160 readonly property string subtitle: modelData.subtitle
0161 readonly property string buttonIcon: modelData.buttonIcon
0162 readonly property string tooltipText: modelData.tooltipText
0163 readonly property int subtitleTextFormat: modelData.subtitleTextFormat
0164
0165 visible: modelData.visible
0166
0167 action: modelData.action
0168
0169 leftPadding: Kirigami.Units.largeSpacing
0170 rightPadding: Kirigami.Units.largeSpacing
0171 topPadding: Kirigami.Units.largeSpacing
0172 bottomPadding: Kirigami.Units.largeSpacing
0173
0174 leftInset: root.cardWidthRestricted ? 0 : -infoCardDelegate.background.border.width
0175 rightInset: root.cardWidthRestricted ? 0 : -infoCardDelegate.background.border.width
0176
0177 hoverEnabled: true
0178
0179 Accessible.name: title + " " + subtitle
0180 Accessible.role: action ? Accessible.Button : Accessible.Note
0181
0182 Layout.preferredWidth: grid.cellWidth
0183 Layout.columnSpan: grid.visibleChildrenCount % grid.columns !== 0 && index === grid.visibleChildrenCount - 1 ? 2 : 1
0184 Layout.fillWidth: true
0185 Layout.fillHeight: true
0186
0187 QQC2.ToolTip.text: tooltipText
0188 QQC2.ToolTip.visible: tooltipText && hovered
0189 QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
0190
0191 background: Rectangle {
0192 radius: root.cardWidthRestricted ? Kirigami.Units.smallSpacing : 0
0193 color: Kirigami.Theme.backgroundColor
0194
0195 border {
0196 color: Kirigami.ColorUtils.linearInterpolation(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, Kirigami.Theme.frameContrast)
0197 width: 1
0198 }
0199
0200 Rectangle {
0201 anchors.fill: parent
0202 radius: root.cardWidthRestricted ? Kirigami.Units.smallSpacing : 0
0203
0204 color: {
0205 let alpha = 0;
0206
0207 if (!infoCardDelegate.enabled || !infoCardDelegate.action) {
0208 alpha = 0;
0209 } else if (infoCardDelegate.pressed) {
0210 alpha = 0.2;
0211 } else if (infoCardDelegate.visualFocus) {
0212 alpha = 0.1;
0213 } else if (!Kirigami.Settings.tabletMode && infoCardDelegate.hovered) {
0214 alpha = 0.07;
0215 }
0216
0217 return Qt.rgba(Kirigami.Theme.textColor.r, Kirigami.Theme.textColor.g, Kirigami.Theme.textColor.b, alpha)
0218 }
0219
0220 Behavior on color {
0221 ColorAnimation { duration: Kirigami.Units.shortDuration }
0222 }
0223 }
0224 }
0225
0226 contentItem: RowLayout {
0227 Kirigami.Icon {
0228 id: icon
0229
0230 source: infoCardDelegate.buttonIcon
0231 visible: source
0232 Layout.alignment: Qt.AlignTop
0233 }
0234
0235 ColumnLayout {
0236 spacing: 0
0237
0238 // Title
0239 Kirigami.Heading {
0240 Layout.fillWidth: true
0241 level: 4
0242 text: infoCardDelegate.title
0243 verticalAlignment: Text.AlignVCenter
0244 horizontalAlignment: icon.visible ? Text.AlignLeft : Text.AlignHCenter
0245 maximumLineCount: 2
0246 elide: Text.ElideRight
0247 wrapMode: Text.Wrap
0248 }
0249
0250 // Subtitle
0251 QQC2.Label {
0252 Layout.fillWidth: true
0253 Layout.fillHeight: true
0254 visible: infoCardDelegate.subtitle
0255 text: infoCardDelegate.subtitle
0256 horizontalAlignment: icon.visible ? Text.AlignLeft : Text.AlignHCenter
0257 elide: Text.ElideRight
0258 wrapMode: Text.Wrap
0259 textFormat: infoCardDelegate.subtitleTextFormat
0260 opacity: 0.6
0261 verticalAlignment: Text.AlignTop
0262 onLinkActivated: (link) => modelData.linkActivated(link)
0263 }
0264 }
0265 }
0266 }
0267 }
0268 }
0269 }
0270 }