Kirigami-addons

Banner.qml
1// SPDX-FileCopyrightText: 2023 Carl Schwan <carl@carlschwan.eu>
2// SPDX-License-Identifier: LGPL-2.0-only OR LGPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
3
4import QtQuick 2.15
5import QtQuick.Controls 2.15 as QQC2
6import QtQuick.Templates 2.15 as T
7import QtQuick.Layouts 1.15
8import org.kde.kirigami 2.20 as Kirigami
9
10/**
11 * @brief An banner Item with support for informational, positive,
12 * warning and error types, and with support for associated actions.
13 *
14 * Banner can be used to inform or interact with the user
15 * without requiring the use of a dialog and are positionned in the footer
16 * or header of a page. For inline content, see org::kde::kirigami::InlineMessage.
17 *
18 * The Banner is hidden by default.
19 *
20 * Optionally, actions can be added which are shown alongside an
21 * optional close button on the right side of the Item. If more
22 * actions are set than can fit, an overflow menu is provided.
23 *
24 * Example usage:
25 * @code{.qml}
26 * Banner {
27 * type: Kirigami.MessageType.Error
28 *
29 * text: "My error message"
30 *
31 * actions: [
32 * Kirigami.Action {
33 * icon.name: "edit"
34 * text: "Action text"
35 * onTriggered: {
36 * // do stuff
37 * }
38 * },
39 * Kirigami.Action {
40 * icon.name: "edit"
41 * text: "Action text"
42 * onTriggered: {
43 * // do stuff
44 * }
45 * }
46 * ]
47 * }
48 * @endcode
49 * @since KirigamiAddons 0.10.0
50 * @inherit QtQuick.Controls.Control
51 * @deprecatde Since 1.5.0, use Kirigami.InlineMessage with the appropriate `position` property.
52 */
53T.ToolBar {
54 id: root
55
56 /**
57 * @brief This signal is emitted when a link is hovered in the message text.
58 * @param The hovered link.
59 */
60 signal linkHovered(string link)
61
62 /**
63 * @brief This signal is emitted when a link is clicked or tapped in the message text.
64 * @param The clicked or tapped link.
65 */
66 signal linkActivated(string link)
68 /**
69 * @brief This property holds the link embedded in the message text that the user is hovering over.
70 */
71 readonly property alias hoveredLink: label.hoveredLink
72
73 /**
74 * @brief This property holds the message type.
75 *
76 * The following values are allowed:
77 * * ``Kirigami.MessageType.Information``
78 * * ``Kirigami.MessageType.Positive``
79 * * ``Kirigami.MessageType.Warning``
80 * * ``Kirigami.MessageType.Error``
81 *
82 * default: ``Kirigami.MessageType.Information``
83 *
84 * @property Kirigami.MessageType type
85 */
86 property int type: Kirigami.MessageType.Information
87
88 /**
89 * @brief This property holds the message title.
90 */
91 property string title
92
93 /**
94 * @brief This property holds the message text.
95 */
96 property string text
97
98 /**
99 * @brief This property holds whether the close button is displayed.
100 *
101 * default: ``false``
102 */
103 property bool showCloseButton: false
104
105 /**
106 * This property holds the list of Kirigami Actions to show in the banner's
107 * internal kirigami::ActionToolBar.
108 *
109 * Actions are added from left to right. If more actions
110 * are set than can fit, an overflow menu is provided.
111 */
112 property list<Kirigami.Action> actions
113
114 padding: Kirigami.Units.smallSpacing
115
116 implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, contentWidth + leftPadding + rightPadding)
117 implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, contentHeight + topPadding + bottomPadding)
118
119 visible: false
120
121 contentItem: GridLayout {
122 columns: 3
123 columnSpacing: Kirigami.Units.mediumSpacing
124 rowSpacing: 0
125
126 Item {
127 Layout.preferredWidth: closeButton.visible ? closeButton.implicitWidth : Kirigami.Units.iconSizes.medium
128 Layout.preferredHeight: closeButton.visible ? closeButton.implicitWidth : Kirigami.Units.iconSizes.medium
129 Layout.alignment: Qt.AlignTop
130 Layout.rowSpan: 2
131
132 Kirigami.Icon {
133 source: {
134 switch (root.type) {
135 case Kirigami.MessageType.Positive:
136 return "emblem-success";
137 case Kirigami.MessageType.Warning:
138 return "data-warning";
139 case Kirigami.MessageType.Error:
140 return "data-error";
141 default:
142 return "data-information";
143 }
144 }
145
146 anchors.centerIn: parent
147 }
148 }
149
150 Kirigami.Heading {
151 id: heading
152
153 level: 2
154 text: root.title
155 visible: text.length > 0
156
157 Layout.row: visible ? 0 : 1
158 Layout.column: 1
159 }
160
161 Kirigami.SelectableLabel {
162 id: label
163
164 color: Kirigami.Theme.textColor
165 wrapMode: Text.WordWrap
166
167 text: root.text
168
169 verticalAlignment: Text.AlignVCenter
170
171 onLinkHovered: link => root.linkHovered(link)
172 onLinkActivated: link => root.linkActivated(link)
173
174 Layout.fillWidth: true
175 Layout.fillHeight: true
176 Layout.minimumHeight: closeButton.visible ? closeButton.implicitWidth : Kirigami.Units.iconSizes.medium
177 Layout.alignment: heading.text.length > 0 || label.lineCount > 1 ? Qt.AlignTop : Qt.AlignBaseline
178
179 Layout.row: heading.visible ? 1 : 0
180 Layout.column: 1
181 }
182
183 QQC2.ToolButton {
184 id: closeButton
185
186 visible: root.showCloseButton
187 text: i18ndc("kirigami-addons6", "@action:button", "Close")
188
189 icon.name: "dialog-close"
190 display: QQC2.ToolButton.IconOnly
191
192 onClicked: root.visible = false
193
194 Layout.alignment: Qt.AlignTop
195
196 QQC2.ToolTip.visible: Kirigami.Settings.tabletMode ? closeButton.pressed : closeButton.hovered
197 QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
198 QQC2.ToolTip.text: text
199
200 Layout.rowSpan: 2
201 Layout.column: 2
202 }
203
204 Kirigami.ActionToolBar {
205 id: actionsLayout
206
207 flat: false
208 actions: root.actions
209 visible: root.actions.length > 0
210 alignment: Qt.AlignRight
211
212 Layout.column: 0
213 Layout.columnSpan: 3
214 Layout.row: 2
215 }
216 }
217
218 background: Item {
219
220 Rectangle {
221 color: {
222 switch (root.type) {
223 case Kirigami.MessageType.Positive:
224 return Kirigami.Theme.positiveBackgroundColor;
225 case Kirigami.MessageType.Warning:
226 return Kirigami.Theme.neutralBackgroundColor;
227 case Kirigami.MessageType.Error:
228 return Kirigami.Theme.negativeBackgroundColor;
229 default:
230 return Kirigami.Theme.activeBackgroundColor;
231 }
232 }
233 anchors.fill: parent
234 }
235
236 Rectangle {
237 id: separator
238
239 height: 1
240 color: {
241 let separatorColor = Kirigami.ColorUtils.linearInterpolation(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, Kirigami.Theme.frameContrast);
242 let textColor = Kirigami.Theme.activeTextColor;
243
244 switch (root.type) {
245 case Kirigami.MessageType.Positive:
246 textColor = Kirigami.Theme.positiveTextColor;
247 break;
248 case Kirigami.MessageType.Warning:
249 textColor = Kirigami.Theme.neutralTextColor;
250 break;
251 case Kirigami.MessageType.Error:
252 textColor = Kirigami.Theme.negativeTextColor;
253 break;
254 }
255
256 return Qt.hsla(textColor.hslHue, textColor.hslSaturation, separatorColor.hslLightness, 1);
257 }
258
259 anchors {
260 left: parent.left
261 right: parent.right
262 top: root.position === QQC2.ToolBar.Header ? parent.bottom : undefined
263 bottom: root.position === QQC2.ToolBar.Header ? undefined : parent.top
264 }
265 }
266 }
267}
QString i18ndc(const char *domain, const char *context, const char *text, const TYPE &arg...)
qsizetype length() const const
QTextStream & left(QTextStream &stream)
QTextStream & right(QTextStream &stream)
This file is part of the KDE documentation.
Documentation copyright © 1996-2024 The KDE developers.
Generated on Fri Dec 6 2024 12:05:53 by doxygen 1.12.0 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.