Warning, /frameworks/kirigami/src/controls/InlineViewHeader.qml is written in an unsupported language. File is not indexed.

0001 /*
0002  *  SPDX-FileCopyrightText: 2023 by Nate Graham <nate@kde.org>
0003  *
0004  *  SPDX-License-Identifier: LGPL-2.0-or-later
0005  */
0006 
0007 import QtQuick
0008 import QtQuick.Layouts
0009 import QtQuick.Templates as T
0010 import QtQuick.Controls as QQC2
0011 import org.kde.kirigami as Kirigami
0012 
0013 /**
0014  * @brief A fancy inline view header showing a title and optional actions.
0015  *
0016  * Designed to be set as the header: property of a ListView or GridView, this
0017  * component provides a fancy inline header suitable for explaining the contents
0018  * of its view to the user in an attractive and standardized way. Actions globally
0019  * relevant to the view can be defined using the actions: property. They will
0020  * appear on the right side of the header as buttons, and collapse into an
0021  * overflow menu when there isn't room to show them all.
0022  *
0023  * The width: property must be manually set to the parent view's width.
0024  *
0025  * Example usage:
0026  * @code{.qml}
0027  * import org.kde.kirigami as Kirigami
0028  *
0029  * ListView {
0030  *     id: listView
0031  *
0032  *     headerPositioning: ListView.OverlayHeader
0033  *     header: InlineViewHeader {
0034  *         width: listView.width
0035  *         text: "My amazing view"
0036  *         actions: [
0037  *             Kirigami.Action {
0038  *                 icon.name: "list-add-symbolic"
0039  *                 text: "Add item"
0040  *                 onTriggered: {
0041  *                     // do stuff
0042  *                 }
0043  *             }
0044  *         ]
0045  *     }
0046  *
0047  *     model: [...]
0048  *     delegate: [...]
0049  * }
0050  * @endcode
0051  * @inherit QtQuick.QQC2.ToolBar
0052  */
0053 T.ToolBar {
0054     id: root
0055 
0056 //BEGIN properties
0057     /**
0058      * @brief This property holds the title text.
0059      */
0060     property string text
0061 
0062     /**
0063      * This property holds the list of actions to show on the header. Actions
0064      * are added from left to right. If more actions are set than can fit, an
0065      * overflow menu is provided.
0066      */
0067     property list<T.Action> actions
0068 //END properties
0069 
0070     implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
0071                             Math.ceil(label.implicitWidth)
0072                             + rowLayout.spacing
0073                             + Math.ceil(Math.max(buttonsLoader.implicitWidth, buttonsLoader.Layout.minimumWidth))
0074                             + leftPadding + rightPadding)
0075     implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
0076                              implicitContentHeight + topPadding + bottomPadding)
0077 
0078     topPadding: Kirigami.Units.smallSpacing + (root.position === T.ToolBar.Footer ? separator.implicitHeight : 0)
0079     leftPadding: Kirigami.Units.largeSpacing
0080     rightPadding: Kirigami.Units.smallSpacing
0081     bottomPadding: Kirigami.Units.smallSpacing + (root.position === T.ToolBar.Header ? separator.implicitHeight : 0)
0082 
0083     z: 999 // don't let content overlap it
0084 
0085     // HACK Due to the lack of a GridView.headerPositioning property,
0086     // we need to "stick" ourselves to the top manually by translating Y accordingly.
0087     // see see https://bugreports.qt.io/browse/QTBUG-117035.
0088     // Conveniently, GridView is only attached to the root of the delegate (or headerItem),
0089     // so this will only be done if the InlineViewHeader itself is the header item.
0090     // And of course it won't be there for ListView either, where we have headerPositioning.
0091     transform: Translate {
0092         y: root.GridView.view ? root.GridView.view.contentY + height : 0
0093     }
0094 
0095     background: Rectangle {
0096         Kirigami.Theme.colorSet: Kirigami.Theme.View
0097         Kirigami.Theme.inherit: false
0098         // We want a color that's basically halfway between the view background
0099         // color and the window background color. But due to the use of color
0100         // scopes, only one will be available at a time. So to get basically the
0101         // same thing, we blend the view background color with a smidgen of the
0102         // text color.
0103         color: Qt.tint(Kirigami.Theme.backgroundColor, Qt.alpha(Kirigami.Theme.textColor, 0.03))
0104 
0105         Kirigami.Separator {
0106             id: separator
0107 
0108             anchors {
0109                 top: root.position === T.ToolBar.Footer ? parent.top : undefined
0110                 left: parent.left
0111                 right: parent.right
0112                 bottom: root.position === T.ToolBar.Header ? parent.bottom : undefined
0113             }
0114         }
0115     }
0116 
0117     contentItem: RowLayout {
0118         id: rowLayout
0119 
0120         spacing: 0
0121 
0122         Kirigami.Heading {
0123             id: label
0124 
0125             Layout.fillWidth: !buttonsLoader.active
0126             Layout.maximumWidth: {
0127                 if (!buttonsLoader.active) {
0128                     return -1;
0129                 }
0130                 return rowLayout.width
0131                     - rowLayout.spacing
0132                     - buttonsLoader.Layout.minimumWidth;
0133             }
0134             Layout.alignment: Qt.AlignVCenter
0135             level: 2
0136             text: root.text
0137             elide: Text.ElideRight
0138             wrapMode: Text.NoWrap
0139             maximumLineCount: 1
0140         }
0141 
0142         Loader {
0143             id: buttonsLoader
0144 
0145             Layout.fillWidth: true
0146             Layout.alignment: Qt.AlignVCenter
0147             Layout.minimumWidth: item?.Layout.minimumWidth ?? 0
0148             active: root.actions.length > 0
0149             sourceComponent: Kirigami.ActionToolBar {
0150                 actions: root.actions
0151                 alignment: Qt.AlignRight
0152             }
0153         }
0154     }
0155 }