src/controls/InlineMessage.qml

0001 /*
0002  *  SPDX-FileCopyrightText: 2018 Eike Hein <hein@kde.org>
0003  *  SPDX-FileCopyrightText: 2018 Marco Martin <mart@kde.org>
0004  *  SPDX-FileCopyrightText: 2018 Kai Uwe Broulik <kde@privat.broulik.de>
0005  *
0006  *  SPDX-License-Identifier: LGPL-2.0-or-later
0007  */
0008
0009 import QtQuick
0010 import org.kde.kirigami as Kirigami
0011 import org.kde.kirigami.templates as KT
0012
0013 /**
0014  * An inline message item with support for informational, positive,
0015  * warning and error types, and with support for associated actions.
0016  *
0017  * InlineMessage can be used to give information to the user or
0018  * interact with the user, without requiring the use of a dialog.
0019  *
0020  * The InlineMessage item is hidden by default. It also manages its
0021  * height (and implicitHeight) during an animated reveal when shown.
0022  * You should avoid setting height on an InlineMessage unless it is
0023  * already visible.
0024  *
0025  * Optionally an icon can be set, defaulting to an icon appropriate
0026  * to the message type otherwise.
0027  *
0028  * Optionally a close button can be shown.
0029  *
0030  * Actions are added from left to right. If more actions are set than
0031  * can fit, an overflow menu is provided.
0032  *
0033  * Example usage:
0034  * @code
0035  * import org.kde.kirigami as Kirigami
0036  *
0037  * InlineMessage {
0038  *     type: Kirigami.MessageType.Error
0039  *
0040  *     text: "My error message"
0041  *
0042  *     actions: [
0043  *         Kirigami.Action {
0044  *             icon.name: "edit"
0045  *             text: "Action text"
0046  *             onTriggered: {
0047  *                 // do stuff
0048  *             }
0049  *         },
0050  *         Kirigami.Action {
0051  *             icon.name: "edit"
0052  *             text: "Action text"
0053  *             onTriggered: {
0054  *                 // do stuff
0055  *             }
0056  *         }
0057  *     ]
0058  * }
0059  * @endcode
0060  * @inherit org::kde::kirigami::templates::InlineMessage
0061  * @since 5.45
0062  */
0063 KT.InlineMessage {
0064     id: root
0065
0066     // a rectangle padded with anchors.margins is used to simulate a border
0067     padding: bgFillRect.anchors.margins + Kirigami.Units.smallSpacing
0068
0069     background: Rectangle {
0070         id: bgBorderRect
0071
0072         color: switch (root.type) {
0073             case Kirigami.MessageType.Positive: return Kirigami.Theme.positiveTextColor;
0074             case Kirigami.MessageType.Warning: return Kirigami.Theme.neutralTextColor;
0075             case Kirigami.MessageType.Error: return Kirigami.Theme.negativeTextColor;
0076             default: return Kirigami.Theme.activeTextColor;
0077         }
0078
0079         radius: Kirigami.Units.smallSpacing / 2
0080
0081         Rectangle {
0082             id: bgFillRect
0083
0084             anchors.fill: parent
0085             anchors.margins: 1
0086
0087             color: Kirigami.Theme.backgroundColor
0088
0089             radius: bgBorderRect.radius * 0.60
0090         }
0091
0092         Rectangle {
0093             anchors.fill: bgFillRect
0094
0095             color: bgBorderRect.color
0096
0097             opacity: 0.20
0098
0099             radius: bgFillRect.radius
0100         }
0101     }
0102 }