Kirigami2

InlineViewHeader.qml
1/*
2 * SPDX-FileCopyrightText: 2023 by Nate Graham <nate@kde.org>
3 *
4 * SPDX-License-Identifier: LGPL-2.0-or-later
5 */
6
7import QtQuick
8import QtQuick.Layouts
9import QtQuick.Templates as T
10import QtQuick.Controls as QQC2
11import org.kde.kirigami as Kirigami
12
13/**
14 * @brief A fancy inline view header showing a title and optional actions.
15 *
16 * Designed to be set as the header: property of a ListView or GridView, this
17 * component provides a fancy inline header suitable for explaining the contents
18 * of its view to the user in an attractive and standardized way. Actions globally
19 * relevant to the view can be defined using the actions: property. They will
20 * appear on the right side of the header as buttons, and collapse into an
21 * overflow menu when there isn't room to show them all.
22 *
23 * The width: property must be manually set to the parent view's width.
24 *
25 * Example usage:
26 * @code{.qml}
27 * import org.kde.kirigami as Kirigami
28 *
29 * ListView {
30 * id: listView
31 *
32 * headerPositioning: ListView.OverlayHeader
33 * header: InlineViewHeader {
34 * width: listView.width
35 * text: "My amazing view"
36 * actions: [
37 * Kirigami.Action {
38 * icon.name: "list-add-symbolic"
39 * text: "Add item"
40 * onTriggered: {
41 * // do stuff
42 * }
43 * }
44 * ]
45 * }
46 *
47 * model: [...]
48 * delegate: [...]
49 * }
50 * @endcode
51 * @inherit QtQuick.QQC2.ToolBar
52 */
53T.ToolBar {
54 id: root
55
56//BEGIN properties
57 /**
58 * @brief This property holds the title text.
59 */
60 property string text
61
62 /**
63 * This property holds the list of actions to show on the header. Actions
64 * are added from left to right. If more actions are set than can fit, an
65 * overflow menu is provided.
66 */
67 property list<T.Action> actions
68//END properties
69
70 implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
71 Math.ceil(label.implicitWidth)
72 + rowLayout.spacing
73 + Math.ceil(Math.max(buttonsLoader.implicitWidth, buttonsLoader.Layout.minimumWidth))
74 + leftPadding + rightPadding)
75 implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
76 implicitContentHeight + topPadding + bottomPadding)
77
78 topPadding: Kirigami.Units.smallSpacing + (root.position === T.ToolBar.Footer ? separator.implicitHeight : 0)
79 leftPadding: Kirigami.Units.largeSpacing
80 rightPadding: Kirigami.Units.smallSpacing
81 bottomPadding: Kirigami.Units.smallSpacing + (root.position === T.ToolBar.Header ? separator.implicitHeight : 0)
82
83 z: 999 // don't let content overlap it
84
85 // HACK Due to the lack of a GridView.headerPositioning property,
86 // we need to "stick" ourselves to the top manually by translating Y accordingly.
87 // see see https://bugreports.qt.io/browse/QTBUG-117035.
88 // Conveniently, GridView is only attached to the root of the delegate (or headerItem),
89 // so this will only be done if the InlineViewHeader itself is the header item.
90 // And of course it won't be there for ListView either, where we have headerPositioning.
91 transform: Translate {
92 y: root.GridView.view ? root.GridView.view.contentY + height : 0
93 }
94
95 background: Rectangle {
96 Kirigami.Theme.colorSet: Kirigami.Theme.View
97 Kirigami.Theme.inherit: false
98 // We want a color that's basically halfway between the view background
99 // color and the window background color. But due to the use of color
100 // scopes, only one will be available at a time. So to get basically the
101 // same thing, we blend the view background color with a smidgen of the
102 // text color.
103 color: Qt.tint(Kirigami.Theme.backgroundColor, Qt.alpha(Kirigami.Theme.textColor, 0.03))
104
105 Kirigami.Separator {
106 id: separator
107
108 anchors {
109 top: root.position === T.ToolBar.Footer ? parent.top : undefined
110 left: parent.left
111 right: parent.right
112 bottom: root.position === T.ToolBar.Header ? parent.bottom : undefined
113 }
114 }
115 }
116
117 contentItem: RowLayout {
118 id: rowLayout
119
120 spacing: 0
121
122 Kirigami.Heading {
123 id: label
124
125 Layout.fillWidth: !buttonsLoader.active
126 Layout.maximumWidth: {
127 if (!buttonsLoader.active) {
128 return -1;
129 }
130 return rowLayout.width
131 - rowLayout.spacing
132 - buttonsLoader.Layout.minimumWidth;
133 }
134 Layout.alignment: Qt.AlignVCenter
135 level: 2
136 text: root.text
137 elide: Text.ElideRight
138 wrapMode: Text.NoWrap
139 maximumLineCount: 1
140 }
141
142 Loader {
143 id: buttonsLoader
144
145 Layout.fillWidth: true
146 Layout.alignment: Qt.AlignVCenter
147 Layout.minimumWidth: item?.Layout.minimumWidth ?? 0
148 active: root.actions.length > 0
149 sourceComponent: Kirigami.ActionToolBar {
150 actions: root.actions
151 alignment: Qt.AlignRight
152 }
153 }
154 }
155}
This file is part of the KDE documentation.
Documentation copyright © 1996-2024 The KDE developers.
Generated on Tue Mar 26 2024 11:18:46 by doxygen 1.10.0 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.