controls/templates/AbstractCard.qml

0001 /*
0002  *  SPDX-FileCopyrightText: 2018 Marco Martin <mart@kde.org>
0003  *
0004  *  SPDX-License-Identifier: LGPL-2.0-or-later
0005  */
0006
0007 import QtQuick 2.15
0008 import QtQuick.Layouts 1.15
0009 import QtQuick.Templates 2.15 as T
0010 import org.kde.kirigami 2.20 as Kirigami
0011
0012 /**
0013  * A AbstractCard is the base for cards. A Card is a visual object that serves
0014  * as an entry point for more detailed information. An abstractCard is empty,
0015  * providing just the look and the base properties and signals for an ItemDelegate.
0016  * It can be filled with any custom layout of items, its content is organized
0017  * in 3 properties: header, contentItem and footer.
0018  * Use this only when you need particular custom contents, for a standard layout
0019  * for cards, use the Card component.
0020  *
0021  * @see Card
0022  * @inherit QtQuick.Controls.ItemDelegate
0023  * @since 2.4
0024  */
0025 T.ItemDelegate {
0026     id: root
0027
0028 //BEGIN properties
0029     /**
0030      * @brief This property holds an item that serves as a header.
0031      *
0032      * This item will be positioned on top if headerOrientation is ``Qt.Vertical``
0033      * or on the left if it is ``Qt.Horizontal``.
0034      */
0035     property alias header: headerFooterLayout.header
0036
0037     /**
0038      * @brief This property sets the card's orientation.
0039      *
0040      * * ``Qt.Vertical``: the header will be positioned on top
0041      * * ``Qt.Horizontal``: the header will be positioned on the left (or right if an RTL layout is used)
0042      *
0043      * default: ``Qt.Vertical``
0044      *
0045      * @property Qt::Orientation headerOrientation
0046      */
0047     property int headerOrientation: Qt.Vertical
0048
0049     /**
0050      * @brief This property holds an item that serves as a footer.
0051      *
0052      * This item will be positioned at the bottom if headerOrientation is ``Qt.Vertical``
0053      * or on the right if it is ``Qt.Horizontal``.
0054      */
0055     property alias footer: headerFooterLayout.footer
0056
0057     /**
0058      * @brief This property sets whether clicking or tapping on the card area shows a visual click feedback.
0059      *
0060      * Use this if you want to do an action in the onClicked signal handler of the card.
0061      *
0062      * default: ``false``
0063      */
0064     property bool showClickFeedback: false
0065
0066 //END properties
0067
0068     Layout.fillWidth: true
0069
0070     implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
0071                             outerPaddingLayout.implicitWidth)
0072     implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
0073                              outerPaddingLayout.implicitHeight)
0074
0075     hoverEnabled: !Kirigami.Settings.tabletMode && showClickFeedback
0076
0077     Kirigami.Theme.inherit: false
0078     Kirigami.Theme.colorSet: Kirigami.Theme.View
0079
0080     width: ListView.view ? ListView.view.width - ListView.view.leftMargin - ListView.view.rightMargin : undefined
0081     padding: Kirigami.Units.largeSpacing
0082
0083     // Card component repurposes control's contentItem property, so it has to
0084     // reimplement content layout and its padding manually.
0085     Kirigami.Padding {
0086         id: outerPaddingLayout
0087
0088         anchors.fill: parent
0089
0090         topPadding: root.topPadding
0091         leftPadding: root.leftPadding
0092         rightPadding: root.rightPadding
0093         bottomPadding: root.bottomPadding
0094
0095         contentItem: Kirigami.HeaderFooterLayout {
0096             id: headerFooterLayout
0097
0098             contentItem: Kirigami.Padding {
0099                 id: innerPaddingLayout
0100
0101                 contentItem: root.contentItem
0102
0103                 // Hide it altogether, so that vertical padding won't be
0104                 // included in control's total implicit height.
0105                 visible: contentItem !== null
0106
0107                 topPadding: headerFooterLayout.header ? Kirigami.Units.largeSpacing : 0
0108                 bottomPadding: headerFooterLayout.footer ? Kirigami.Units.largeSpacing : 0
0109             }
0110         }
0111     }
0112
0113     // HACK: A Control like this ItemDelegate tries to manage its
0114     // contentItem's positioning, so we need to override that. This is
0115     // equivalent to declaring x/y/width/height bindings in QQC2 style
0116     // implementations.
0117     Connections {
0118         target: root.contentItem
0119
0120         function onXChanged() {
0121             root.contentItem.x = 0;
0122         }
0123
0124         function onYChanged() {
0125             root.contentItem.y = Qt.binding(() => innerPaddingLayout.topPadding);
0126         }
0127     }
0128 }