// SPDX-FileCopyrightText: 2023 Carl Schwan // SPDX-License-Identifier: LGPL-2.0-only OR LGPL-3.0-only OR LicenseRef-KDE-Accepted-GPL import QtQuick 2.15 import QtQuick.Controls 2.15 as QQC2 import QtQuick.Templates 2.15 as T import QtQuick.Layouts 1.15 import org.kde.kirigami 2.20 as Kirigami /*! \qmltype Banner \inqmlmodule org.kde.kirigamiaddons.labs.components \brief An banner Item with support for informational, positive, warning and error types, and with support for associated actions. Banner can be used to inform or interact with the user without requiring the use of a dialog and are positionned in the footer or header of a page. For inline content, see Kirigami.InlineMessage. The Banner is hidden by default. Optionally, actions can be added which are shown alongside an optional close button on the right side of the Item. If more actions are set than can fit, an overflow menu is provided. Example usage: \qml Banner { type: Kirigami.MessageType.Error text: "My error message" actions: [ Kirigami.Action { icon.name: "edit" text: "Action text" onTriggered: { // do stuff } }, Kirigami.Action { icon.name: "edit" text: "Action text" onTriggered: { // do stuff } } ] } \endqml \since 0.10.0 \deprecated Since 1.5.0, use Kirigami.InlineMessage with the appropriate \c position property. */ T.ToolBar { id: root /*! \brief This signal is emitted when a \a link is hovered in the message text. */ signal linkHovered(string link) /*! \brief This signal is emitted when a \a link is clicked or tapped in the message text. */ signal linkActivated(string link) /*! \qmlproperty string hoveredLink \brief This property holds the link embedded in the message text that the user is hovering over. */ readonly property alias hoveredLink: label.hoveredLink /*! \qmlproperty Kirigami.MessageType type \brief This property holds the message type. The following values are allowed: \value Kirigami.MessageType.Information \value Kirigami.MessageType.Positive \value Kirigami.MessageType.Warning \value Kirigami.MessageType.Error \default Kirigami.MessageType.Information */ property int type: Kirigami.MessageType.Information /*! \brief This property holds the message title. */ property string title /*! \brief This property holds the message text. */ property string text /*! \brief This property holds whether the close button is displayed. \default false */ property bool showCloseButton: false /*! This property holds the list of Kirigami Actions to show in the banner's internal ActionToolBar. Actions are added from left to right. If more actions are set than can fit, an overflow menu is provided. */ property list actions padding: Kirigami.Units.smallSpacing implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, contentWidth + leftPadding + rightPadding) implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, contentHeight + topPadding + bottomPadding) visible: false contentItem: GridLayout { columns: 3 columnSpacing: Kirigami.Units.mediumSpacing rowSpacing: 0 Item { Layout.preferredWidth: closeButton.visible ? closeButton.implicitWidth : Kirigami.Units.iconSizes.medium Layout.preferredHeight: closeButton.visible ? closeButton.implicitWidth : Kirigami.Units.iconSizes.medium Layout.alignment: Qt.AlignTop Layout.rowSpan: 2 Kirigami.Icon { source: { switch (root.type) { case Kirigami.MessageType.Positive: return "emblem-success"; case Kirigami.MessageType.Warning: return "data-warning"; case Kirigami.MessageType.Error: return "data-error"; default: return "data-information"; } } anchors.centerIn: parent } } Kirigami.Heading { id: heading level: 2 text: root.title visible: text.length > 0 Layout.row: visible ? 0 : 1 Layout.column: 1 } Kirigami.SelectableLabel { id: label color: Kirigami.Theme.textColor wrapMode: Text.WordWrap text: root.text verticalAlignment: Text.AlignVCenter onLinkHovered: link => root.linkHovered(link) onLinkActivated: link => root.linkActivated(link) Layout.fillWidth: true Layout.fillHeight: true Layout.minimumHeight: closeButton.visible ? closeButton.implicitWidth : Kirigami.Units.iconSizes.medium Layout.alignment: heading.text.length > 0 || label.lineCount > 1 ? Qt.AlignTop : Qt.AlignBaseline Layout.row: heading.visible ? 1 : 0 Layout.column: 1 } QQC2.ToolButton { id: closeButton visible: root.showCloseButton text: i18ndc("kirigami-addons6", "@action:button", "Close") icon.name: "dialog-close" display: QQC2.ToolButton.IconOnly onClicked: root.visible = false Layout.alignment: Qt.AlignTop QQC2.ToolTip.visible: Kirigami.Settings.tabletMode ? closeButton.pressed : closeButton.hovered QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay QQC2.ToolTip.text: text Layout.rowSpan: 2 Layout.column: 2 } Kirigami.ActionToolBar { id: actionsLayout flat: false actions: root.actions visible: root.actions.length > 0 alignment: Qt.AlignRight Layout.column: 0 Layout.columnSpan: 3 Layout.row: 2 } } background: Item { Rectangle { color: { switch (root.type) { case Kirigami.MessageType.Positive: return Kirigami.Theme.positiveBackgroundColor; case Kirigami.MessageType.Warning: return Kirigami.Theme.neutralBackgroundColor; case Kirigami.MessageType.Error: return Kirigami.Theme.negativeBackgroundColor; default: return Kirigami.Theme.activeBackgroundColor; } } anchors.fill: parent } Rectangle { id: separator height: 1 color: { let separatorColor = Kirigami.ColorUtils.linearInterpolation(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, Kirigami.Theme.frameContrast); let textColor = Kirigami.Theme.activeTextColor; switch (root.type) { case Kirigami.MessageType.Positive: textColor = Kirigami.Theme.positiveTextColor; break; case Kirigami.MessageType.Warning: textColor = Kirigami.Theme.neutralTextColor; break; case Kirigami.MessageType.Error: textColor = Kirigami.Theme.negativeTextColor; break; } return Qt.hsla(textColor.hslHue, textColor.hslSaturation, separatorColor.hslLightness, 1); } anchors { left: parent.left right: parent.right top: root.position === QQC2.ToolBar.Header ? parent.bottom : undefined bottom: root.position === QQC2.ToolBar.Header ? undefined : parent.top } } } }