src/formcard/FormHeader.qml

0001 /*
0002  * SPDX-FileCopyrightText: 2022 Devin Lin <devin@kde.org>
0003  * SPDX-FileCopyrightText: 2023 James Graham <james.h.graham@protonmail.com>
0004  * SPDX-License-Identifier: LGPL-2.0-or-later
0005  */
0006
0007 import QtQuick 2.15
0008 import QtQuick.Controls 2.15 as QQC2
0009 import QtQuick.Templates 2.15 as T
0010 import QtQuick.Layouts 1.15
0011
0012 import org.kde.kirigami 2.19 as Kirigami
0013
0014 /**
0015  * @brief A header item for a form card.
0016  *
0017  * @note The header should be placed above the card in a layout not as a child.
0018  */
0019 Item {
0020     id: root
0021
0022     /**
0023      * @brief This property holds the header title.
0024      *
0025      * @property string title
0026      */
0027     property alias title: headerContent.text
0028
0029     /**
0030      * @brief The maximum width of the header.
0031      */
0032     property real maximumWidth: Kirigami.Units.gridUnit * 30
0033
0034     property list<T.Action> actions
0035
0036     /**
0037      * @brief These properties hold the padding around the heading.
0038      */
0039     property real topPadding: Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing
0040     property real bottomPadding: Kirigami.Units.smallSpacing
0041     property real leftPadding: cardWidthRestricted ? Kirigami.Units.smallSpacing : Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing
0042     property real rightPadding: cardWidthRestricted ? Kirigami.Units.smallSpacing : Kirigami.Units.largeSpacing + Kirigami.Units.smallSpacing
0043
0044     /**
0045      * @brief Whether the card's width is being restricted.
0046      */
0047     readonly property bool cardWidthRestricted: root.width > root.maximumWidth
0048
0049     Kirigami.Theme.colorSet: Kirigami.Theme.View
0050     Kirigami.Theme.inherit: false
0051
0052     Layout.fillWidth: true
0053
0054     implicitHeight: header.implicitHeight
0055     implicitWidth: header.implicitWidth + header.anchors.leftMargin + header.anchors.rightMargin
0056
0057     RowLayout {
0058         id: header
0059
0060         anchors {
0061             fill: parent
0062             leftMargin: root.cardWidthRestricted ? Math.round((root.width - root.maximumWidth) / 2) : 0
0063             rightMargin: root.cardWidthRestricted ? Math.round((root.width - root.maximumWidth) / 2) : 0
0064         }
0065
0066         QQC2.Label {
0067             id: headerContent
0068
0069             topPadding: root.topPadding
0070             bottomPadding: root.bottomPadding
0071             leftPadding: root.leftPadding
0072             rightPadding: root.rightPadding
0073
0074             font.weight: Font.DemiBold
0075             wrapMode: Text.WordWrap
0076             Accessible.role: Accessible.Heading
0077             Layout.fillWidth: true
0078         }
0079
0080         Repeater {
0081             model: root.actions
0082
0083             QQC2.ToolButton {
0084                 required property var modelData
0085
0086                 action: modelData
0087                 visible: modelData
0088             }
0089         }
0090     }
0091 }