actiondrawer/quicksettings/QuickSettings.qml

0001 /*
0002  *   SPDX-FileCopyrightText: 2014 Marco Martin <notmart@gmail.com>
0003  *   SPDX-FileCopyrightText: 2021 Devin Lin <devin@kde.org>
0004  *
0005  *   SPDX-License-Identifier: LGPL-2.0-or-later
0006  */
0007
0008 import QtQuick 2.15
0009 import QtQuick.Controls 2.15
0010 import QtQuick.Layouts 1.1
0011 import QtQuick.Window 2.2
0012
0013 import org.kde.plasma.private.mobileshell as MobileShell
0014 import org.kde.plasma.components 3.0 as PlasmaComponents
0015 import org.kde.plasma.private.mobileshell.quicksettingsplugin as QS
0016 import org.kde.kirigami 2.20 as Kirigami
0017
0018 /**
0019  * Quick settings elements layout, change the height to clip.
0020  */
0021 Item {
0022     id: root
0023     clip: true
0024
0025     required property var actionDrawer
0026     required property int mode
0027
0028     enum Mode {
0029         Pages,
0030         ScrollView
0031     }
0032
0033     readonly property real columns: Math.round(Math.min(6, Math.max(3, width / intendedColumnWidth)))
0034     readonly property real columnWidth: Math.floor(width / columns)
0035     readonly property int minimizedColumns: Math.round(Math.min(8, Math.max(5, width / intendedMinimizedColumnWidth)))
0036     readonly property real minimizedColumnWidth: Math.floor(width / minimizedColumns)
0037
0038     readonly property real rowHeight: columnWidth * 0.7
0039     readonly property real fullHeight: fullView.implicitHeight
0040
0041     readonly property real intendedColumnWidth: Kirigami.Units.gridUnit * 7
0042     readonly property real intendedMinimizedColumnWidth: Kirigami.Units.gridUnit * 4 + Kirigami.Units.smallSpacing
0043     readonly property real minimizedRowHeight: Kirigami.Units.gridUnit * 4 + Kirigami.Units.smallSpacing
0044
0045     property real minimizedViewProgress: 0
0046     property real fullViewProgress: 1
0047
0048     readonly property QS.QuickSettingsModel quickSettingsModel: QS.QuickSettingsModel {}
0049
0050     readonly property int columnCount: Math.floor(width/columnWidth)
0051     readonly property int rowCount: {
0052         let totalRows = Math.ceil(quickSettingsCount / columnCount);
0053
0054         if (root.mode === QuickSettings.Pages) {
0055             // portrait orientation
0056             let maxRows = 5; // more than 5 is just disorienting
0057             let targetRows = Math.floor(Window.height * 0.65 / rowHeight);
0058             return Math.min(maxRows, Math.min(totalRows, targetRows));
0059
0060         } else if (root.mode === QuickSettings.ScrollView) {
0061             // horizontal orientation
0062             let targetRows = Math.floor(Window.height * 0.8 / rowHeight);
0063             return Math.min(totalRows, targetRows);
0064         }
0065     }
0066
0067     readonly property int pageSize: rowCount * columnCount
0068     readonly property int quickSettingsCount: quickSettingsModel.count
0069
0070     function resetSwipeView() {
0071         if (root.mode === QuickSettings.Pages) {
0072             pageLoader.item.view.currentIndex = 0;
0073         }
0074     }
0075
0076     // return to the first page when the action drawer is closed
0077     Connections {
0078         target: actionDrawer
0079
0080         function onOpenedChanged() {
0081             if (!actionDrawer.opened) {
0082                 resetSwipeView();
0083             }
0084         }
0085     }
0086
0087     // view when fully open
0088     ColumnLayout {
0089         id: fullView
0090         opacity: root.fullViewProgress
0091         visible: opacity !== 0
0092         transform: Translate { y: (1 - fullView.opacity) * root.rowHeight }
0093
0094         anchors.top: parent.top
0095         anchors.left: parent.left
0096         anchors.right: parent.right
0097
0098         // Dynamically loads the appropriate view
0099         Loader {
0100             id: pageLoader
0101
0102             Layout.fillWidth: true
0103             Layout.minimumHeight: rowCount * rowHeight
0104
0105             asynchronous: true
0106             sourceComponent: root.mode === QuickSettings.Pages ? swipeViewComponent : scrollViewComponent
0107         }
0108
0109         BrightnessItem {
0110             id: brightnessItem
0111             Layout.bottomMargin: Kirigami.Units.smallSpacing * 2
0112             Layout.leftMargin: Kirigami.Units.smallSpacing
0113             Layout.rightMargin: Kirigami.Units.smallSpacing
0114             Layout.fillWidth: true
0115         }
0116     }
0117
0118     // view when in minimized mode
0119     RowLayout {
0120         id: minimizedView
0121         spacing: 0
0122         opacity: root.minimizedViewProgress
0123         visible: opacity !== 0
0124         transform: Translate { y: (1 - minimizedView.opacity) * -root.rowHeight }
0125
0126         anchors.top: parent.top
0127         anchors.left: parent.left
0128         anchors.right: parent.right
0129
0130         Repeater {
0131             model: QS.PaginateModel {
0132                 sourceModel: quickSettingsModel
0133                 pageSize: minimizedColumns
0134             }
0135             delegate: MobileShell.BaseItem {
0136                 required property var modelData
0137
0138                 implicitHeight: root.minimizedRowHeight
0139                 implicitWidth: root.minimizedColumnWidth
0140                 horizontalPadding: (width - Kirigami.Units.gridUnit * 3) / 2
0141                 verticalPadding: (height - Kirigami.Units.gridUnit * 3) / 2
0142
0143                 contentItem: QuickSettingsMinimizedDelegate {
0144                     restrictedPermissions: actionDrawer.restrictedPermissions
0145
0146                     text: modelData.text
0147                     status: modelData.status
0148                     icon: modelData.icon
0149                     enabled: modelData.enabled
0150                     settingsCommand: modelData.settingsCommand
0151                     toggleFunction: modelData.toggle
0152
0153                     onCloseRequested: {
0154                         actionDrawer.close();
0155                     }
0156                 }
0157             }
0158         }
0159     }
0160
0161     // Loads portrait quick settings view
0162     Component {
0163         id: swipeViewComponent
0164
0165         ColumnLayout {
0166             readonly property var view: swipeView
0167
0168             SwipeView {
0169                 id: swipeView
0170
0171                 Layout.fillWidth: true
0172                 Layout.preferredHeight: rowCount * rowHeight
0173
0174                 Repeater {
0175                     model: Math.ceil(quickSettingsCount / pageSize)
0176                     delegate: Flow {
0177                         id: flow
0178                         spacing: 0
0179
0180                         required property int index
0181
0182                         Repeater {
0183                             model: QS.PaginateModel {
0184                                 sourceModel: quickSettingsModel
0185                                 pageSize: root.pageSize
0186                                 firstItem: pageSize * flow.index
0187                             }
0188                             delegate: Loader {
0189                                 required property var modelData
0190
0191                                 asynchronous: true
0192
0193                                 sourceComponent: quickSettingComponent
0194                             }
0195                         }
0196                     }
0197                 }
0198             }
0199
0200             Loader {
0201                 id: indicatorLoader
0202
0203                 Layout.alignment: Qt.AlignCenter
0204                 Layout.topMargin: Kirigami.Units.smallSpacing
0205                 Layout.leftMargin: Kirigami.Units.smallSpacing
0206                 Layout.rightMargin: Kirigami.Units.smallSpacing
0207
0208                 // Avoid wasting space when not loaded
0209                 Layout.maximumHeight: active ? item.implicitHeight : 0
0210
0211                 active: swipeView.count > 1 ? true: false
0212                 asynchronous: true
0213
0214                 sourceComponent: PageIndicator {
0215                     count: swipeView.count
0216                     currentIndex: swipeView.currentIndex
0217
0218                     delegate: Rectangle {
0219                         implicitWidth: 8
0220                         implicitHeight: count > 1 ? 8 : 0
0221
0222                         radius: parent.width / 2
0223                         color: Kirigami.Theme.disabledTextColor
0224
0225                         opacity: index === currentIndex ? 0.95 : 0.45
0226                     }
0227                 }
0228             }
0229         }
0230     }
0231
0232     // Loads landscape quick settings view
0233     Component {
0234         id: scrollViewComponent
0235
0236         Item {
0237             width: parent.width
0238             height: rowCount * rowHeight
0239
0240             Flickable {
0241                 id: flickable
0242                 anchors.fill: parent
0243                 contentWidth: width
0244                 contentHeight: flow.height
0245
0246                 clip: true
0247
0248                 ScrollIndicator.vertical: ScrollIndicator {
0249                     id: scrollIndicator
0250                     visible: quickSettingsCount > pageSize ? true : false
0251                     position: 0.1
0252
0253                     contentItem: Item {
0254                         implicitWidth: Kirigami.Units.smallSpacing / 4
0255                         Rectangle {
0256                             // shift over the indicator a bit to the right
0257                             anchors.fill: parent
0258                             anchors.leftMargin: 2
0259                             anchors.rightMargin: -2
0260
0261                             color: Kirigami.Theme.textColor
0262                             opacity: scrollIndicator.active ? 0.5 : 0
0263
0264                             Behavior on opacity { NumberAnimation {} }
0265                         }
0266                     }
0267                 }
0268
0269                 Flow {
0270                     id: flow
0271                     width: parent.width
0272                     height: Math.ceil(quickSettingsCount / columnCount) * rowHeight
0273                     spacing: 0
0274
0275                     Repeater {
0276                         model: quickSettingsModel
0277                         delegate: Loader {
0278                             required property var modelData
0279
0280                             asynchronous: true
0281
0282                             sourceComponent: quickSettingComponent
0283                         }
0284                     }
0285                 }
0286             }
0287         }
0288     }
0289
0290     // Quick setting component
0291     Component {
0292         id: quickSettingComponent
0293
0294         MobileShell.BaseItem {
0295             height: root.rowHeight
0296             width: root.columnWidth
0297             padding: Kirigami.Units.smallSpacing
0298
0299             contentItem: QuickSettingsFullDelegate {
0300                 restrictedPermissions: actionDrawer.restrictedPermissions
0301
0302                 text: modelData.text
0303                 status: modelData.status
0304                 icon: modelData.icon
0305                 enabled: modelData.enabled
0306                 settingsCommand: modelData.settingsCommand
0307                 toggleFunction: modelData.toggle
0308
0309                 onCloseRequested: {
0310                     actionDrawer.close();
0311                 }
0312             }
0313         }
0314     }
0315 }