src/controls.6/TabViewButton.qml

0001 import QtQuick
0002 import QtQml
0003
0004 import QtQuick.Controls
0005 import QtQuick.Layouts
0006 import Qt5Compat.GraphicalEffects
0007
0008 import org.mauikit.controls 1.3 as Maui
0009
0010 /**
0011  * @inherit TabButton
0012  * @brief A TabButton crafted to be use along with the MauiKit TabView.
0013  *
0014  * This control only adds some extra functionality to integrate well with MauiKit TabView. If you consider changing the tab button of the TabView for a custom one, use this as the base.
0015  *
0016  * This control adds the DnD features, and integrates wiht the TabViewInfo data.
0017  */
0018 Maui.TabButton
0019 {
0020     id: control
0021
0022     autoExclusive: true
0023
0024     /**
0025      * @brief The index of this tab button in the TabBar
0026      */
0027     readonly property int mindex : control.TabBar.index
0028
0029     /**
0030      * @brief The TabView to which this tab button belongs.
0031      * By default this is set to its parent.
0032      * @warning When creating a custom tab button for the TabView, you might need to bind this to the TabView ID.
0033      */
0034     property Item tabView : control.parent
0035
0036     /**
0037      * @brief The object map containing information about this tab.
0038      * The information was provided using the TabViewInfo attached properties.
0039      * @see TabViewInfo
0040      */
0041     readonly property var tabInfo: control.tabView.contentModel.get(mindex).Maui.TabViewInfo
0042
0043     /**
0044      * @brief The color to be used in a bottom strip.
0045      * By default this checks for the TabViewInfo.tabColor attached property, if it has not been set, it fallbacks to being transparent.
0046      */
0047     property color color : tabInfo.tabColor ? tabInfo.tabColor : "transparent"
0048
0049     width: control.tabView.mobile ? ListView.view.width : Math.max(160, implicitWidth)
0050
0051     checked: control.mindex === control.tabView.currentIndex
0052     text: tabInfo.tabTitle
0053
0054     icon.name: tabInfo.tabIcon
0055
0056     ToolTip.delay: 1000
0057     ToolTip.timeout: 5000
0058     ToolTip.visible: control.hovered && !Maui.Handy.isMobile && ToolTip.text.length
0059     ToolTip.text: tabInfo.tabToolTipText
0060
0061     Drag.active: dragArea.active
0062     Drag.source: control
0063     Drag.hotSpot.x: width / 2
0064     Drag.hotSpot.y: height / 2
0065     Drag.dragType: Drag.Automatic
0066     Drag.proposedAction: Qt.IgnoreAction
0067
0068     Rectangle
0069     {
0070         parent: control.background
0071         color: control.color
0072         height: 2
0073         width: parent.width*0.9
0074         anchors.bottom: parent.bottom
0075         anchors.horizontalCenter: parent.horizontalCenter
0076     }
0077
0078     DragHandler
0079     {
0080         id: dragArea
0081         enabled: !control.mobile && control.tabView.count > 1
0082         acceptedDevices: PointerDevice.Mouse
0083         target: null
0084         xAxis.enabled: true
0085         yAxis.enabled: false
0086         cursorShape: Qt.OpenHandCursor
0087
0088         onActiveChanged:
0089         {
0090             if (active)
0091             {
0092                 control.grabToImage(function(result)
0093                 {
0094                     control.Drag.imageSource = result.url;
0095                 })
0096             }
0097         }
0098     }
0099
0100     Timer
0101     {
0102         id: _dropAreaTimer
0103         interval: 250
0104         onTriggered:
0105         {
0106             if(_dropArea.containsDrag)
0107             {
0108                 control.tabView.setCurrentIndex(mindex)
0109             }
0110         }
0111     }
0112
0113     DropArea
0114     {
0115         id: _dropArea
0116         anchors.fill: parent
0117         onDropped:
0118         {
0119             const from = drop.source.mindex
0120             const to = control.mindex
0121
0122             if(to === from)
0123             {
0124                 return
0125             }
0126
0127             console.log("Move ", drop.source.mindex, control.mindex)
0128             control.tabView.moveTab(from , to)
0129         }
0130
0131         onEntered:
0132         {
0133             if(drag.source &&  drag.source.mindex >= 0)
0134             {
0135                 return
0136             }
0137             _dropAreaTimer.restart()
0138         }
0139
0140         onExited:
0141         {
0142             _dropAreaTimer.stop()
0143         }
0144     }
0145 }