MauiKit Controls

InfoDialog.qml
1import QtQuick
2import QtQuick.Controls
3import QtQuick.Layouts
4import org.mauikit.controls as Maui
5
6/**
7 * @inherit QtQuick.Controls.Dialog
8 * @brief A Dialog with a built-in template container for displaying information, with a title, image and message body.
9 *
10 * <a href="https://doc.qt.io/qt-6/qml-qtquick-controls-dialog.html">This controls inherits from QQC2 Dialog, to checkout its inherited properties refer to the Qt Docs.</a>
11 *
12 * @image html Misc/infodialog.png
13 *
14 * @section structure Structure
15 * The dialog container is handled by a MauiKit ScrollColumn - which by default is flickable - so any contents added as children of this dialog will be put inside of it and become scrollable/flickable.
16 *
17 * @note For the scrollable behaviour to work correctly the child element needs to have an `implicitHeight` size set, and further positioning options should use the Layout attached properties: for filling the with use `Layout.fillWidth: true`.
18 *
19 * The InfoDialog uses the ListItemTemplate control to display the information labels and image/icon, this is exposed via the `template` property for further tweaking.
20 * @see template
21 *
22 * To set the title use the `title` property. For the message body use the exposed alias property `message`, or the `template.text2` property, which are the same. To set an icon or image use the alias `template` property, for example `template.iconSource: "dialog-warning"`.
23 * @see ListItemTemplate
24 *
25 * @attention By default the only action button is set to `standardButtons: Dialog.Close`. To know more about other standard button types checkout the Dialog documentation on Qt page.
26 *
27 * And finally, the dialog can display an inline notification alert upon request via the `alert()` function.
28 *
29 * @remark This alert message is positioned at the bottom part and colored according to the emergency level set.
30 * This is useful when the dialog needs to warn the user about certain action.
31 * @see alert
32 *
33 * @image html Misc/infodialog2.png
34 *
35 * @code
36 * Maui.InfoDialog
37 * {
38 * id: _dialog
39 * title: "Hello"
40 * message: "Information about some important action to be reviewed, or just plain information."
41 *
42 * template.iconSource: "dialog-warning"
43 *
44 * standardButtons: Dialog.Close | Dialog.Apply
45 *
46 * onRejected: close()
47 * onApplied: alert("Are you sure? Alert example.", 2)
48 *
49 * Rectangle //an extra child element
50 * {
51 * color: "yellow"
52 * Layout.fillWidth: true
53 * implicitHeight: 68
54 * }
55 * }
56 * @endcode
57 *
58 * <a href="https://invent.kde.org/maui/mauikit/-/blob/qt6-2/examples/InfoDialog.qml">You can find a more complete example at this link.</a>
59 */
60Dialog
61{
62 id: control
63
64 /**
65 * @brief The default content of the dialog. The children elements of this control will be positioned inside a Mauikit ScrollColumn.
66 * @note To position child elements use the Layout attached properties.
67 * @see InfoDialog#structure
68 * @property list<QtObject> InfoDialog::content
69 */
70 default property alias content: _content.content
71
72 /**
73 * @brief The message body.
74 * @property string InfoDialog::message
75 */
76 property alias message : _template.label2.text
77
78 /**
79 * @brief The templated item used for the default dialog message, holding the icon emblem and the message body.
80 * This property gives access to the template for more detailed tweaking, by adding items or changing its properties.
81 * @property ListItemTemplate InfoDialog::template
82 */
83 property alias template : _template
84
85 standardButtons: Dialog.Close
86
87 contentItem: Maui.ScrollColumn
88 {
89 id: _content
90 clip: true
91 spacing: control.spacing
92
93 Maui.ListItemTemplate
94 {
95 id: _template
96 visible: control.message.length
97 Layout.fillWidth: true
98 label2.textFormat : TextEdit.AutoText
99 label2.wrapMode: TextEdit.WordWrap
100 iconVisible: control.width > Maui.Style.units.gridUnit * 10
101
102 iconSizeHint: Maui.Style.iconSizes.large
103 spacing: Maui.Style.space.big
104
105 leftLabels.spacing: control.spacing
106 }
107
108 Maui.Chip
109 {
110 id: _alertMessage
111
112 visible: text.length > 0
113
114 property int level : 0
115
116 Layout.fillWidth: true
117
118 color: switch(level)
119 {
120 case 0: return Maui.Theme.positiveBackgroundColor
121 case 1: return Maui.Theme.neutralBackgroundColor
122 case 2: return Maui.Theme.negativeBackgroundColor
123 }
124
125 SequentialAnimation on x
126 {
127 id: _alertAnim
128 // Animations on properties start running by default
129 running: false
130 loops: 3
131 NumberAnimation { from: 0; to: -10; duration: 100; easing.type: Easing.InOutQuad }
132 NumberAnimation { from: -10; to: 0; duration: 100; easing.type: Easing.InOutQuad }
133 PauseAnimation { duration: 50 } // This puts a bit of time between the loop
134 }
135
136 function reset()
137 {
138 _alertMessage.text = ""
139 _alertMessage.level = 0
140 }
141 }
142 }
143
144 onClosed: _alertMessage.reset()
145
146 /**
147 * @brief Sends an inline alert notification that is displayed in the dialog.
148 * @param message The text for the message. Keep it short if possible.
149 * @param level Depending on the level the color may differ. The levels are:
150 * - 0 positive
151 * - 1 neutral
152 * - 2 negative
153 */
154 function alert(message, level)
155 {
156 _alertMessage.text = message
157 _alertMessage.level = level
158 }
159}
QString text() const
QStringView level(QStringView ifopt)
KGuiItem reset()
This file is part of the KDE documentation.
Documentation copyright © 1996-2024 The KDE developers.
Generated on Fri Nov 8 2024 11:48:43 by doxygen 1.12.0 written by Dimitri van Heesch, © 1997-2006

KDE's Doxygen guidelines are available online.