Warning, /maui/mauikit/src/controls.6/AltBrowser.qml is written in an unsupported language. File is not indexed.

0001 import QtQuick
0002 import QtQml
0003 import QtQuick.Controls
0004 
0005 import org.mauikit.controls 1.3 as Maui
0006 
0007 /**
0008  * @inherit Page
0009  * @since org.mauikit.controls 1.0
0010  * 
0011  *    @brief A convinient way of switching between a grid an a list view.
0012  * 
0013  *    This controls inherits from MauiKit Page, to checkout its inherited properties refer to the docs.
0014  *    @see Page
0015  * 
0016  *    @note This control supports the attached `Controls.showCSD` property to display the window control buttons when using CSD.
0017  * 
0018  *    The AltBrowser makes use of the GridView and ListBrowser components, there is a property to dinamically switch between the two.
0019  * 
0020  *    For some navigation patterns is a good idea to provide a grid view when the application screen size is wide enough to fit numerous items and a list view when the space is contrained - since the list is much more compact - and makes navigation quicker. 
0021  *    @see viewType
0022  *    
0023  *    @image html AltBrowser/views.gif "Switching between the list and grid view"
0024  * 
0025  *    @section notes Notes
0026  *    The data model is shared by both of the view types, but the delagates to be used have to be assigment for each one.
0027  *    @see listDelegate
0028  *    @see gridDelegate
0029  * 
0030  *    There is a MauiKit Holder element that can be used to display a placeholder message, for example, when the views are empty.
0031  *    @see holder
0032  * 
0033  *    @code
0034  *    Maui.AltBrowser
0035  *    {
0036  *        id: _altBrowser
0037  *        anchors.fill: parent
0038  * 
0039  *        Maui.Controls.showCSD: true
0040  *        viewType: Maui.AltBrowser.ViewType.Grid
0041  * 
0042  *        gridView.itemSize: 120
0043  * 
0044  *        headBar.leftContent: ToolButton
0045  *        {
0046  *            icon.name: _altBrowser.viewType === Maui.AltBrowser.ViewType.Grid ? "view-list-details" : "view-list-icons"
0047  *            onClicked: _altBrowser.toggle()
0048  *        }
0049  * 
0050  *        model: 20
0051  * 
0052  *        listDelegate: Maui.ListBrowserDelegate
0053  *        {
0054  *            width:ListView.view.width
0055  *            label1.text: index
0056  *            label2.text: "Example"
0057  *            iconSource: "folder"
0058  *        }
0059  * 
0060  *        gridDelegate: Maui.GridBrowserDelegate
0061  *        {
0062  *            height: GridView.view.cellHeight
0063  *            width: GridView.view.itemSize
0064  * 
0065  *            iconSource: "folder"
0066  *            label1.text: index
0067  *            label2.text: "Example"
0068  *        }
0069  *    }
0070  *    @endcode
0071  *    
0072  *      <a href="https://invent.kde.org/maui/mauikit/-/blob/qt6-2/examples/AltBrowser.qml">You can find a more complete example at this link.</a>
0073  */
0074 Maui.Page
0075 {
0076     id: control
0077     
0078     Maui.Theme.colorSet: Maui.Theme.View
0079     Maui.Theme.inherit: false
0080     
0081     focus: true
0082     clip: false
0083     
0084     /**
0085      * @brief The current view being used, the GridView or the ListBrowser.
0086      * To access the precise view use the aliases for the GridView or ListView.
0087      * @see listView
0088      * @see gridView
0089      */
0090     readonly property Item currentView : control.viewType === AltBrowser.ViewType.List ? _listView : _gridView
0091     
0092     onCurrentViewChanged: control.currentView.forceActiveFocus()
0093     
0094     /**
0095      * @brief The two different view types possible.
0096      * @enum Grid AltBrowser.Grid handled by the GridBrowser control.
0097      * @enum List AltBrowser.List hanlded by the ListBrowser control.
0098      */
0099     enum ViewType
0100     {
0101         Grid,
0102         List
0103     }
0104     
0105     /**
0106      * @brief Sets the view type that's going to be in use.
0107      * 
0108      * The type can be one of:
0109      * - ViewType.Grid
0110      * - ViewType.List      The default
0111      * 
0112      * @see ViewType
0113      */
0114     property int viewType: AltBrowser.ViewType.List
0115     
0116     /**
0117      * @brief The index of the current item selected in either view type.
0118      * This value is synced to both view types.
0119      */
0120     property int currentIndex : -1
0121     Binding on currentIndex
0122     {
0123         when: control.currentView
0124         value: control.currentView.currentIndex
0125     }
0126     
0127     /**
0128      * @brief The delegate to be used by the ListBrowser.
0129      */
0130     property Component listDelegate : null
0131     
0132     /**
0133      * @brief The delegate to be used by the GridView.
0134      */
0135     property Component gridDelegate : null
0136     
0137     /**
0138      * @brief The shared data model to be used by both view types.
0139      */
0140     property var model : null
0141     
0142     /**
0143      * @brief Allow the lasso selection for multiple items with mouse or track based input methods.
0144      */
0145     property bool enableLassoSelection: false
0146     
0147     /**
0148      * @brief Allow the selection mode, which sets the views in the mode to accept to select multiple items.
0149      */
0150     property bool selectionMode: false
0151     
0152     /**
0153      * @brief Item to set a place holder emoji and message.
0154      * For more details on its properties check the Holder component.
0155      * @property Holder AltBrowser::holder
0156      * 
0157      * @see Holder
0158      */
0159     property alias holder : _holder
0160     
0161     /**
0162      * @brief The GridBrowser used as the grid view alternative.
0163      * @property GridBrowser AltBrowser::gridView
0164      */
0165     readonly property alias gridView : _gridView
0166     
0167     /**
0168      * The ListBrowser used as the list view alternative.
0169      * @property ListBrowser AltBrowser::listView
0170      */
0171     readonly property alias listView : _listView
0172     
0173     /**
0174      * @brief The total amount of items in the current view.
0175      */
0176     readonly property int count : currentView.count
0177     
0178     flickable:  currentView.flickable
0179     
0180     Maui.GridBrowser
0181     {
0182         id: _gridView
0183         focus: control.focus
0184         anchors.fill: parent
0185         visible: control.viewType === AltBrowser.ViewType.Grid
0186         currentIndex: control.currentIndex
0187         model: control.model
0188         delegate: control.gridDelegate
0189         enableLassoSelection: control.enableLassoSelection
0190         selectionMode: control.selectionMode
0191         adaptContent: true
0192         clip: control.clip
0193     }
0194     
0195     Maui.ListBrowser
0196     {
0197         anchors.fill: parent
0198         focus: control.focus
0199         id: _listView
0200         visible: control.viewType === AltBrowser.ViewType.List 
0201         currentIndex: control.currentIndex
0202         model: control.model
0203         delegate: control.listDelegate
0204         enableLassoSelection: control.enableLassoSelection
0205         selectionMode: control.selectionMode
0206         clip: control.clip
0207     }
0208     
0209     Maui.Holder
0210     {
0211         id: _holder
0212         anchors.fill: parent
0213         visible: false
0214     }
0215     
0216     /**
0217      * @brief Toggle between the two views. If in list view then switches to grid, and from grid to list.
0218      */
0219     function toggle()
0220     {
0221         control.viewType = (control.viewType == Maui.AltBrowser.ViewType.Grid ? Maui.AltBrowser.ViewType.List : Maui.AltBrowser.ViewType.Grid)
0222     }
0223 }