Warning, /maui/mauikit/src/controls.6/PopupPage.qml is written in an unsupported language. File is not indexed.
0001 /*
0002 * Copyright 2018 Camilo Higuita <milo.h@aol.com>
0003 *
0004 * This program is free software; you can redistribute it and/or modify
0005 * it under the terms of the GNU Library General Public License as
0006 * published by the Free Software Foundation; either version 2, or
0007 * (at your option) any later version.
0008 *
0009 * This program is distributed in the hope that it will be useful,
0010 * but WITHOUT ANY WARRANTY; without even the implied warranty of
0011 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
0012 * GNU General Public License for more details
0013 *
0014 * You should have received a copy of the GNU Library General Public
0015 * License along with this program; if not, write to the
0016 * Free Software Foundation, Inc.,
0017 * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
0018 */
0019
0020 import QtQuick
0021
0022 import QtQuick.Controls
0023 import QtQuick.Layouts
0024
0025 import org.mauikit.controls 1.3 as Maui
0026
0027 import Qt5Compat.GraphicalEffects
0028
0029 /**
0030 * @inherit QtQuick.Controls.Popup
0031 * @since org.mauikit.controls 1.0
0032 * @brief A QQC2 Popup with extra built-in features, such as a snapping surface, scrollable contents, and action buttons.
0033 *
0034 * <a href="https://doc.qt.io/qt-6/qml-qtquick-controls-popup.html">This control inherits from QQC2 Popup, to checkout its inherited properties refer to the Qt Docs.</a>
0035 *
0036 * @image html Misc/popuppage.png "The image depicts the control a floating VS snapped surface"
0037 *
0038 * @section structure Structure
0039 *
0040 * The inner container is handled by a MauiKit Page, and this can be accessed via the alias property `page` - which means this control can have a header and footer bar, and all the other Page features.
0041 * @see page
0042 *
0043 * By default the children content is positioned into a MauiKit ScrollColumn, that's scrollable. If it's desired, this can be avoided by placing the children manually, using the property `stack`. This way any other element can be positioned manually using the Layout attached properties.
0044 * @see stack
0045 *
0046 * @note The `stack` children are positioned using a ColumnLayout.
0047 *
0048 * @section features Features
0049 *
0050 * @subsection snapping Snapping
0051 * The Popup can snap to the full window area on constrained spaces. To allow this behavior there a few steps to look after, first make `hint: 1`and set `persistent: true`.
0052 * @ref ScrollColumn#notes Notes
0053 * @see persistent
0054 *
0055 * @subsection scrollable Scrollable Layout
0056 * By default the children content of this element will be placed on a MauiKit ScrollColumn, which allows the content to be scrollable/flickable when its implicit height is bigger than the actual popup area.
0057 * To position the children content use the `implicitHeight` and the Layout attached properties, such as `Layout.fillWidth`.
0058 * @see content
0059 * @see ScrollColumn
0060 *
0061 * @subsection actions Action Buttons
0062 * The regular QQC2 Popup control does not have support for setting standard action buttons like the Dialog controls does; but this control allows it. The action buttons will be styled in the same manner as the Dialog buttons, but the actions here are added differently.
0063 * To set the actions, use the `actions` property.
0064 * @see actions
0065 *
0066 * @code
0067 * Maui.PopupPage
0068 * {
0069 * id: _popupPage
0070 *
0071 * title: "Title"
0072 *
0073 * persistent: true
0074 * hint: 1
0075 *
0076 * Rectangle
0077 * {
0078 * implicitHeight: 200
0079 * Layout.fillWidth: true
0080 * color: "purple"
0081 * }
0082 *
0083 * Rectangle
0084 * {
0085 * implicitHeight: 200
0086 * Layout.fillWidth: true
0087 * color: "orange"
0088 * }
0089 *
0090 * Rectangle
0091 * {
0092 * implicitHeight: 200
0093 * Layout.fillWidth: true
0094 * color: "yellow"
0095 * }
0096 *
0097 * actions: [
0098 * Action
0099 * {
0100 * text: "Action1"
0101 * },
0102 *
0103 * Action
0104 * {
0105 * text: "Action2"
0106 * }
0107 * ]
0108 * }
0109 * @endcode
0110 *
0111 * @section notes Notes
0112 * Some properties have been obscure by the Maui Style layer.
0113 * The style layer adds some extra properties to the Popup control:
0114 * - `filling : bool` Whether the popup area should be style as if filling the whole window area.
0115 * - `maxWidth : int` The maximum width the popup area can have. If the window width space becomes smaller then the popup area, then it will be resized to fit. Or if the `hint: 1` then it will snap to fill the whole window area.
0116 * - `maxHeight : int` The maximum height the popup area can have. If the window height space becomes smaller then the popup area, then it will be resized to fit. Or if the `hint: 1` then it will snap to fill the whole window area.
0117 * -` hint : double` Determines the resizing final size of the popup area when it reaches the `maxWidth` or `maxHeight` constrains. For example a `1` value means the popup area will be resize to fill the window available space, but a `0.5` value means it will be conserving a margin when resized of 25% at left and right sides.
0118 * - `heightHint : double` By default this is bind to the `hint` value.
0119 * - `widthHint : double` By default this is bind to the `hint` value.
0120 *
0121 *
0122 * <a href="https://invent.kde.org/maui/mauikit/-/blob/qt6-2/examples/PopupPage.qml">You can find a more complete example at this link.</a>
0123 */
0124 Popup
0125 {
0126 id: control
0127
0128 focus: true
0129
0130 Maui.Theme.colorSet: Maui.Theme.Window
0131 Maui.Theme.inherit: false
0132
0133 closePolicy: control.persistent ? Popup.NoAutoClose | Popup.CloseOnEscape : Popup.CloseOnEscape | Popup.CloseOnPressOutside
0134
0135 maxWidth: 300
0136 maxHeight: implicitHeight
0137 implicitHeight: _layout.implicitHeight + topPadding + bottomPadding + topMargin + bottomMargin
0138
0139 hint: 0.9
0140 heightHint: 0.9
0141 spacing: Maui.Style.space.big
0142
0143 margins: 0
0144
0145 filling: persistent && mWidth === control.parent.width
0146
0147 /**
0148 * @brief Default children content will be added to a scrollable ColumnLayout.
0149 * When adding a item keep on mind that to correctly have the scrollable behavior the item must have an implicit height set. And the positioning should be handled via the Layout attached properties.
0150 * @property list<Item> PopupPage::scrollable
0151 */
0152 default property alias scrollable : _scrollView.content
0153
0154 /**
0155 * @brief To skip the scrollable behavior there is a stacked component to which items can be added, this is also controlled by a ColumnLayout.
0156 * @code
0157 * Maui.PopupPage
0158 * {
0159 * stack: Rectangle
0160 * {
0161 * Layout.fillWidth: true
0162 * Layout.fillHeight: true
0163 * Layout.preferredHeight: 800
0164 * }
0165 * }
0166 * @endcode
0167 * @property list<QtObject> PopupPage::stack
0168 */
0169 property alias stack : _stack.data
0170
0171 /**
0172 * @see Page::title
0173 */
0174 property alias title : _page.title
0175
0176 /**
0177 * @brief Whether the dialog should be closed when it loses focus or not.
0178 * If it is marked as persistent a close button is shown in the header bar, other wise the header bar is hidden if there is not more elements on it.
0179 * By default this is set to `true`.
0180 */
0181 property bool persistent : true
0182
0183 /**
0184 * @brief An alias to the MauiKit Page, which is the main container of this control.
0185 * It is exposed to allow access to the Page properties.
0186 * @see Page
0187 * @property Page PopupPage::page
0188 */
0189 readonly property alias page : _page
0190
0191 /**
0192 * @see Page::footBar
0193 */
0194 property alias footBar : _page.footBar
0195
0196 /**
0197 * @see Page::headBar
0198 */
0199 property alias headBar: _page.headBar
0200
0201 /**
0202 * @brief Whether the close button is visible.
0203 * By default this is bind to the `persistent` value.
0204 * @see persistent.
0205 */
0206 property bool closeButtonVisible: control.persistent
0207
0208 /**
0209 * @see ScrollColumn::flickable
0210 */
0211 readonly property alias flickable : _scrollView.flickable
0212
0213 /**
0214 * @brief An alias to the MauiKit ScrollColumn handling the scrollable content.
0215 * @property ScrollView PopupPage::scrollView
0216 */
0217 readonly property alias scrollView : _scrollView
0218
0219 /**
0220 * @brief The policy for the scroll view vertical scroll bar.
0221 * By default this is set to `ScrollBar.AsNeeded`.
0222 */
0223 property int verticalScrollBarPolicy: ScrollBar.AsNeeded
0224
0225 /**
0226 * @brief The policy for the scroll view horizontal scroll bar.
0227 * By default this is set to `ScrollBar.AlwaysOff`.
0228 */
0229 property int horizontalScrollBarPolicy: ScrollBar.AlwaysOff
0230
0231 /**
0232 * @brief Whether the control should be closed automatically after the close button is pressed.
0233 * If this is set to `false`, then the `closeTriggered` will be emitted instead.
0234 * This is useful if a conformation action needs to take place before closing the control.
0235 * By default this is set to `true`.
0236 */
0237 property bool autoClose : true
0238
0239 /**
0240 * @brief List of actions to be added to the bottom section as buttons.
0241 */
0242 property list<Action> actions
0243
0244 /**
0245 * @brief The GridLayout handling the bottom part of action buttons added via the `actions` property.
0246 * @property GridLayout PopupPage:: actionBar
0247 */
0248 readonly property alias actionBar : _defaultButtonsLayout
0249
0250 /**
0251 * @brief Emitted when the close button has been clicked and the `autoClose` property has been disabled.
0252 * @see autoClose
0253 * @see closeButtonVisible
0254 */
0255 signal closeTriggered()
0256
0257 ColumnLayout
0258 {
0259 id: _layout
0260 anchors.fill: parent
0261 spacing: 0
0262
0263 Maui.Page
0264 {
0265 id: _page
0266
0267 clip: true
0268
0269 Maui.Theme.colorSet: control.Maui.Theme.colorSet
0270
0271 Layout.fillWidth: true
0272 Layout.fillHeight: true
0273
0274 implicitHeight: Math.max(_scrollView.contentHeight + _scrollView.topPadding + _scrollView.bottomPadding, _stack.implicitHeight) + _page.footerContainer.implicitHeight + (_page.topPadding + _page.bottomPadding) + _page.headerContainer.implicitHeight + (_page.topMargin + _page.bottomMargin)
0275
0276 headerPositioning: ListView.InlineHeader
0277
0278 padding: 0
0279 margins: 0
0280
0281 headBar.visible: control.persistent
0282 headBar.borderVisible: false
0283
0284 background: null
0285
0286 headBar.farRightContent: Loader
0287 {
0288 asynchronous: true
0289 visible: active
0290 active: control.persistent && closeButtonVisible
0291
0292 sourceComponent: Maui.CloseButton
0293 {
0294 onClicked:
0295 {
0296 if(control.autoClose)
0297 {
0298 control.close()
0299 }else
0300 {
0301 control.closeTriggered()
0302 }
0303 }
0304 }
0305 }
0306
0307 ColumnLayout
0308 {
0309 id: _stack
0310
0311 anchors.fill: parent
0312 spacing: control.spacing
0313 }
0314
0315 Maui.ScrollColumn
0316 {
0317 id: _scrollView
0318
0319 anchors.fill: parent
0320
0321 visible: _stack.children.length === 0
0322
0323 spacing: control.spacing
0324 padding: Maui.Style.space.big
0325
0326 ScrollBar.horizontal.policy: control.horizontalScrollBarPolicy
0327 ScrollBar.vertical.policy: control.verticalScrollBarPolicy
0328 }
0329 }
0330
0331 GridLayout
0332 {
0333 id: _defaultButtonsLayout
0334
0335 rowSpacing: Maui.Style.space.small
0336 columnSpacing: Maui.Style.space.small
0337
0338 Layout.fillWidth: true
0339 Layout.margins: Maui.Style.contentMargins
0340
0341 property bool isWide : control.width > Maui.Style.units.gridUnit*10
0342
0343 visible: control.actions.length
0344
0345 rows: isWide? 1 : _defaultButtonsLayout.children.length
0346 columns: isWide ? _defaultButtonsLayout.children.length : 1
0347
0348 Repeater
0349 {
0350 model: control.actions
0351
0352 Button
0353 {
0354 id: _actionButton
0355 focus: true
0356 Layout.fillWidth: true
0357
0358 action: modelData
0359 }
0360 }
0361 }
0362 }
0363 }