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 }