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 }