Warning, /maui/mauikit/src/controls.6/ToolBar.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 import QtQuick.Controls 2.15 as QQC
0022 import QtQuick.Window
0023
0024 import org.mauikit.controls 1.3 as Maui
0025
0026 import QtQuick.Layouts
0027
0028 import "private" as Private
0029
0030 /**
0031 * @inherit QtQuick.Controls.ToolBar
0032 * @brief An alternative to QQC2 ToolBar, with a custom horizontal layout - divided into three main sections - left, middle and right.
0033 *
0034 * This is a good companion to a page header or footer.
0035 *
0036 * <a href="https://doc.qt.io/qt-6/qml-qtquick-controls-toolbar.html">This control inherits from QQC2 ToolBar, to checkout its inherited properties refer to the Qt Docs.</a>
0037 *
0038 * @code
0039 * QQC2.Page
0040 * {
0041 * header: ToolBar
0042 * {
0043 * width: parent.width
0044 *
0045 * ToolButton
0046 * {
0047 * icon.name: "love"
0048 * }
0049 * }
0050 * }
0051 * @endcode
0052 *
0053 * The ToolBar sections are divided into five [5] sections, and each one can be easily populated via the alias property. The left and right areas are have two sections, the far-left and far-right, alongside with the left and right.
0054 * @see farLeftContent
0055 * @see leftContent
0056 * @see middleContent
0057 * @see rightContent
0058 * @see farRightContent
0059 *
0060 * And lastly there's the middle section - the middle section contents can be centered using the Layout attached properties.
0061 * When the left and right contents are not equal in size, the middle content can be forced to be centered using the force center property.
0062 * @see forceCenterMiddleContent
0063 *
0064 * @image html ToolBar/footbar_sections_color.png
0065 * @note The ToolBar sections divided by colors. The middle section [green] is filling the available space.
0066 *
0067 * The bar contents will become flickable/scrollable when the child items do not fit in the available space. There will be shadows indicating that there is content to be discovered to the left or right sides.
0068 * @see fits
0069 *
0070 * If the application window is using CSD - there is a useful property to allow dragging and moving the window by pressing the toolbar area. This can also be disabled if it is undesired.
0071 * @see draggable
0072 *
0073 * @section notes Notes
0074 * The middle section is handled by a RowLayout, so child items placed in there can be positioned using the Layout attached properties, such as Layout.fillWidth, Layout.alignment, etc.
0075 *
0076 * The other sections will take the size of child items, so any item place into them need to have an implicit size or explicitly set one.
0077 *
0078 * The far left/right sections will not be hidden when the contents of the bar does not fit and becomes scrollable, They will remain in place, so place items in those section which are important to stay always visible, and do not over populate them, instead populate the left and right areas.
0079 *
0080 * @image html ToolBar/footbar_fit.png
0081 * @note Here the contents of the bar does not fit, so it becomes hidden and can be scrolled/flicked horizontally.
0082 *
0083 * @code
0084 * ToolBar
0085 * {
0086 * farLeftContent: ToolButton
0087 * {
0088 * icon.name: "love"
0089 * }
0090 *
0091 * leftContent: ToolButton
0092 * {
0093 * icon.name: "folder"
0094 * }
0095 *
0096 * middleContent: ToolButton
0097 * {
0098 * icon.name: "folder-music"
0099 * Layout.alignment: Qt.AlignHCenter
0100 * }
0101 *
0102 * rightContent: ToolButton
0103 * {
0104 * icon.name: "download"
0105 * }
0106 *
0107 * farRightContent: ToolButton
0108 * {
0109 * icon.name: "application-menu"
0110 * }
0111 * }
0112 * @endcode
0113 *
0114 * @note This control supports the attached Controls.showCSD property to display the window control buttons when using CSD.
0115 *
0116 *
0117 * @image html ToolBar/footbar_sections.png
0118 * @note Using the example as the footer of a page, ToolButtons are placed in the different sections.
0119 *
0120 */
0121 QQC.ToolBar
0122 {
0123 id: control
0124
0125 implicitHeight: preferredHeight + topPadding + bottomPadding
0126
0127 /**
0128 * @brief By default any child item of the ToolBar will be positioned at the left section in a row. So using the leftContent property or just declaring the child items without it will have the same effect.
0129 * @see leftContent
0130 */
0131 default property alias content : leftRowContent.content
0132
0133 /**
0134 * @brief Set the preferred height of the toolbar. This is the preferred way to set a custom height, instead of setting it up explicitly via the height property. This is used, for example, on the Page control for the pull-back bars feature.
0135 */
0136 property int preferredHeight: implicitContentHeight
0137
0138 /**
0139 * @brief Forces the middle content to be centered by adding extra space at the left and right sections to match the maximum width, so both left/right side have the same width.
0140 */
0141 property bool forceCenterMiddleContent : true
0142
0143 /**
0144 * @brief Alias to add items to the left section. Multiple items can be added, separated by a coma and wrapped in brackets [].
0145 * @property list<QtObject> ToolBar::leftContent
0146 *
0147 * @code
0148 * leftContent: [
0149 * Button
0150 * {
0151 * text: "Test"
0152 },
0153
0154 Button
0155 {
0156 text: "Hello"
0157 }
0158 ]
0159 * @endcode
0160 */
0161 property alias leftContent : leftRowContent.content
0162
0163 /**
0164 * @brief Alias to add items to the middle section. Multiple items can be added, separated by a coma and wrapped in brackets [].
0165 * The container used to host the child items is a ColumnLayout, so child items need to be positioned using the Layout attached properties.
0166 * @property list<QtObject> ToolBar::middleContent
0167 */
0168 property alias middleContent : middleRowContent.data
0169
0170 /**
0171 * @brief Alias to add items to the right section. Multiple items can be added, separated by a coma and wrapped in brackets [].
0172 * @property list<QtObject> ToolBar::rightContent
0173 */
0174 property alias rightContent : rightRowContent.content
0175
0176 /**
0177 * @brief Alias to add items to the far left section. Multiple items can be added, separated by a coma and wrapped in brackets [].
0178 * @property list<QtObject> ToolBar::farLeftContent
0179 */
0180 property alias farLeftContent : farLeftRowContent.content
0181
0182 /**
0183 * @brief Alias to add items to the far right section. Multiple items can be added, separated by a coma and wrapped in brackets [].
0184 * @property list<QtObject> ToolBar::farRightContent
0185 */
0186 property alias farRightContent : farRightRowContent.content
0187
0188 /**
0189 * @brief The container for the middle section. Some of its properties can be tweaked, such as the spacing and visibility.
0190 * @property ColumnLayout ToolBar::middleLayout
0191 */
0192 readonly property alias middleLayout : middleRowContent
0193
0194 /**
0195 * @brief The container for the left section. Some of its properties can be tweaked, such as the spacing and visibility.
0196 * @property Item ToolBar::leftLayout
0197 */
0198 readonly property alias leftLayout : leftRowContent
0199
0200 /**
0201 * @brief The container for the right section. Some of its properties can be tweaked, such as the spacing and visibility.
0202 * @property Item ToolBar::rightLayout
0203 */
0204 readonly property alias rightLayout : rightRowContent
0205
0206 /**
0207 * @brief The container for the far right section. Some of its properties can be tweaked, such as the spacing and visibility.
0208 * @property Item ToolBar::farRightLayout
0209 */
0210 readonly property alias farRightLayout : farRightRowContent
0211
0212 /**
0213 * @brief The container for the far left section. Some of its properties can be tweaked, such as the spacing and visibility.
0214 * @property Item ToolBar::farLeftLayout
0215 */
0216 readonly property alias farLeftLayout : farLeftRowContent
0217
0218 /**
0219 * @brief The ColumnLayout that contains all the sections of the toolbar.
0220 * @property ColumnLayout ToolBar::layout
0221 */
0222 readonly property alias layout : layout
0223
0224 /**
0225 * @brief If the contents width is currently smaller then the available area it means that it fits, otherwise the content is wider then the available area and overflowing and has become scrollable/flickable.
0226 */
0227 readonly property alias fits : _scrollView.fits
0228
0229 /**
0230 * @brief The total amount of items in the toolbar sections, items can be non-visible and sum-up.
0231 */
0232 readonly property int count : leftContent.length + middleContent.length + rightContent.length + farLeftContent.length + farRightContent.length
0233
0234 /**
0235 * @brief The total amount of visible items in the tool bar sections.
0236 */
0237 readonly property int visibleCount : leftRowContent.visibleChildren.length + middleRowContent.visibleChildren.length + rightRowContent.visibleChildren.length + farLeftRowContent.visibleChildren.length + farRightRowContent.visibleChildren.length
0238
0239 /**
0240 * @brief Allow to move the window around by dragging from the toolbar area.
0241 * By default this is set to `!Maui.Handy.isMobile`
0242 */
0243 property bool draggable : !Maui.Handy.isMobile
0244
0245 Loader
0246 {
0247 asynchronous: true
0248 width: Maui.Style.iconSizes.medium
0249 height: parent.height
0250 active: !mainFlickable.atXEnd && !control.fits
0251 visible: active
0252 z: 999
0253 parent: control.background
0254 anchors
0255 {
0256 right: parent.right
0257 top: parent.top
0258 bottom: parent.bottom
0259 }
0260
0261 sourceComponent: Maui.EdgeShadow
0262 {
0263 edge: Qt.RightEdge
0264 }
0265 }
0266
0267 Loader
0268 {
0269 parent: control.background
0270 asynchronous: true
0271 width: Maui.Style.iconSizes.medium
0272 height: parent.height
0273 active: !mainFlickable.atXBeginning && !control.fits
0274 visible: active
0275 z: 999
0276 anchors
0277 {
0278 left: parent.left
0279 top: parent.top
0280 bottom: parent.bottom
0281 }
0282
0283 sourceComponent: Maui.EdgeShadow
0284 {
0285 edge: Qt.LeftEdge
0286 }
0287 }
0288
0289 contentItem: Item
0290 {
0291 implicitWidth: _mainLayout.implicitWidth
0292 implicitHeight: _mainLayout.implicitHeight
0293 clip: true
0294
0295 Item
0296 {
0297 id: _container
0298 height: control.preferredHeight
0299 width: parent.width
0300
0301 property bool isHeader: control.position === ToolBar.Header
0302 state: isHeader? "headerState" : "footerState"
0303
0304 Loader
0305 {
0306 asynchronous: true
0307 active: !Maui.Handy.isMobile
0308 sourceComponent: Maui.WheelHandler
0309 {
0310 target: mainFlickable
0311 primaryOrientation : Qt.Horizontal
0312 }
0313 }
0314
0315 Loader
0316 {
0317 // active: control.draggable
0318 // asynchronous: true
0319 anchors.fill: parent
0320 sourceComponent: Item
0321 {
0322 DragHandler
0323 {
0324 grabPermissions: PointerHandler.CanTakeOverFromItems | PointerHandler.CanTakeOverFromHandlersOfDifferentType | PointerHandler.ApprovesTakeOverByAnything
0325 onActiveChanged:
0326 {
0327 if (active)
0328 {
0329 control.Window.window.startSystemMove()
0330 }
0331 }
0332 }
0333 }
0334 }
0335
0336 states: [State
0337 {
0338 name: "headerState"
0339
0340 AnchorChanges
0341 {
0342 target: _container
0343 anchors.top: undefined
0344 anchors.bottom: parent.bottom
0345 }
0346 },
0347
0348 State
0349 {
0350 name: "footerState"
0351
0352 AnchorChanges
0353 {
0354 target: _container
0355 anchors.top: parent.top
0356 anchors.bottom: undefined
0357 }
0358 }
0359 ]
0360
0361 RowLayout
0362 {
0363 id: _mainLayout
0364 anchors.fill: parent
0365 spacing: control.spacing
0366
0367 Private.ToolBarSection
0368 {
0369 id: farLeftRowContent
0370 Layout.fillHeight: true
0371 Layout.maximumWidth: implicitWidth
0372 Layout.minimumWidth: implicitWidth
0373 spacing: control.spacing
0374 }
0375
0376 QQC.ScrollView
0377 {
0378 id: _scrollView
0379 padding: 0
0380 implicitHeight: layout.implicitHeight + topPadding + bottomPadding
0381 readonly property bool fits : contentWidth < width
0382 onFitsChanged: mainFlickable.returnToBounds()
0383
0384 Layout.fillHeight: true
0385 Layout.fillWidth: true
0386
0387 contentWidth: layout.implicitWidth
0388 contentHeight: availableHeight
0389
0390 QQC.ScrollBar.horizontal.policy: QQC.ScrollBar.AlwaysOff
0391 QQC.ScrollBar.vertical.policy: QQC.ScrollBar.AlwaysOff
0392
0393 Flickable
0394 {
0395 id: mainFlickable
0396
0397 flickableDirection: Flickable.HorizontalFlick
0398 interactive: !control.fits && Maui.Handy.isTouch
0399
0400 boundsBehavior: Flickable.StopAtBounds
0401 boundsMovement :Flickable.StopAtBounds
0402
0403 clip: true
0404
0405 RowLayout
0406 {
0407 id: layout
0408
0409 width: _scrollView.availableWidth
0410 height: _scrollView.availableHeight
0411
0412 spacing: control.spacing
0413
0414 Private.ToolBarSection
0415 {
0416 id: leftRowContent
0417
0418 Layout.fillHeight: true
0419
0420 Layout.maximumWidth: implicitWidth
0421 Layout.minimumWidth: implicitWidth
0422 Layout.preferredWidth: implicitWidth
0423 //
0424 spacing: control.spacing
0425 }
0426
0427 Item //helper to force center middle content
0428 {
0429 id: _h1
0430 visible: middleRowContent.visibleChildren.length && control.forceCenterMiddleContent
0431
0432 readonly property int mwidth : visible ? Math.max((rightRowContent.implicitWidth + farRightRowContent.implicitWidth) - (leftRowContent.implicitWidth + farLeftRowContent.implicitWidth), 0) : 0
0433
0434 Layout.minimumWidth: 0
0435
0436 Layout.preferredWidth: mwidth
0437 Layout.maximumWidth: mwidth
0438
0439 Layout.fillHeight: true
0440 Layout.fillWidth: true
0441 }
0442
0443 Item
0444 {
0445 Layout.fillWidth: true
0446 Layout.fillHeight: true
0447 Layout.minimumWidth:implicitWidth
0448 implicitWidth: middleRowContent.implicitWidth
0449 implicitHeight: middleRowContent.implicitHeight
0450 // color: "yellow"
0451 RowLayout
0452 {
0453 id: middleRowContent
0454 anchors.fill: parent
0455 spacing: control.spacing
0456 }
0457 }
0458
0459 Item //helper to force center middle content
0460 {
0461 id: _h2
0462 visible: middleRowContent.visibleChildren.length && control.forceCenterMiddleContent
0463
0464 readonly property int mwidth : visible ? Math.max(( leftRowContent.implicitWidth + farLeftRowContent.implicitWidth) - (rightRowContent.implicitWidth + farRightRowContent.implicitWidth), 0) : 0
0465
0466 Layout.minimumWidth: 0
0467
0468 Layout.fillHeight: true
0469 Layout.fillWidth: true
0470
0471 Layout.preferredWidth: mwidth
0472 Layout.maximumWidth: mwidth
0473 }
0474
0475 Private.ToolBarSection
0476 {
0477 id: rightRowContent
0478
0479 Layout.fillHeight: true
0480
0481 Layout.maximumWidth: implicitWidth
0482 Layout.minimumWidth: implicitWidth
0483 Layout.preferredWidth: implicitWidth
0484
0485 spacing: control.spacing
0486 }
0487 }
0488 }
0489 }
0490
0491 Private.ToolBarSection
0492 {
0493 id: farRightRowContent
0494 Layout.fillHeight: true
0495 Layout.maximumWidth: implicitWidth
0496 Layout.minimumWidth: implicitWidth
0497 spacing: control.spacing
0498 }
0499
0500 Loader
0501 {
0502 active: control.Maui.Controls.showCSD === true
0503 visible: active
0504
0505 asynchronous: true
0506
0507 sourceComponent: Maui.WindowControls {}
0508 }
0509 }
0510 }
0511 }
0512 }