mobileshell-kcm: Port to FormCard

kcms/mobileshell/ui/QuickSettingsForm.qml

@@ -9,145 +9,117 @@ import QtQuick.Controls 2.15 as QQC2
 
 import org.kde.kirigami 2.19 as Kirigami
 import org.kde.kcmutils as KCM
-import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
+import org.kde.kirigamiaddons.formcard as FormCard
 import org.kde.plasma.private.mobileshell.quicksettingsplugin as QS
 
-Kirigami.ScrollablePage {
+FormCard.FormCardPage {
     id: root
+
     title: i18n("Quick Settings")
-    leftPadding: 0
-    rightPadding: 0
-    topPadding: Kirigami.Units.gridUnit
-    bottomPadding: Kirigami.Units.gridUnit
-    
-    Component {
-        id: listItemComponent
 
-        MobileForm.AbstractFormDelegate {
+    component Delegate : FormCard.AbstractFormDelegate {
-            id: qsDelegate
+        id: qsDelegate
 
-            readonly property bool isEnabled: parent ? parent.parentView.isEnabled : false
+        property bool isEnabled: false
 
-            contentItem: RowLayout {
+        width: ListView.view.width
-                Kirigami.ListItemDragHandle {
-                    visible: qsDelegate.isEnabled
-                    Layout.rightMargin: Kirigami.Units.gridUnit
-                    listItem: qsDelegate
-                    listView: qsDelegate.parent ? qsDelegate.parent.parentView : null
-                    onMoveRequested: savedQuickSettings.enabledModel.moveRow(oldIndex, newIndex)
-                }
 
-                Kirigami.Icon {
+        background: null
-                    readonly property bool iconAvailable: model && model.icon !== ""
+        contentItem: RowLayout {
+            Kirigami.ListItemDragHandle {
+                visible: qsDelegate.isEnabled
+                Layout.rightMargin: Kirigami.Units.gridUnit
+                listItem: qsDelegate
+                listView: qsDelegate.ListView.view
+                onMoveRequested: savedQuickSettings.enabledModel.moveRow(oldIndex, newIndex)
+            }
 
-                    visible: iconAvailable
+            Kirigami.Icon {
-                    source: model ? model.icon : ""
+                readonly property bool iconAvailable: model && model.icon !== ""
-                    Layout.rightMargin: iconAvailable ? Kirigami.Units.gridUnit : 0
-                    implicitWidth: iconAvailable ? Kirigami.Units.iconSizes.small : 0
-                    implicitHeight: iconAvailable ? Kirigami.Units.iconSizes.small : 0
-                }
 
-                ColumnLayout {
+                visible: iconAvailable
-                    Layout.fillWidth: true
+                source: model ? model.icon : ""
-                    spacing: Kirigami.Units.smallSpacing
+                Layout.rightMargin: iconAvailable ? Kirigami.Units.gridUnit : 0
+                implicitWidth: iconAvailable ? Kirigami.Units.iconSizes.small : 0
+                implicitHeight: iconAvailable ? Kirigami.Units.iconSizes.small : 0
+            }
 
-                    QQC2.Label {
+            QQC2.Label {
-                        Layout.fillWidth: true
+                Layout.fillWidth: true
-                        text: model ? model.name : ""
+                text: model ? model.name : ""
-                        elide: Text.ElideRight
+                elide: Text.ElideRight
-                    }
+            }
-                }
 
-                QQC2.ToolButton {
+            QQC2.ToolButton {
-                    icon.name: model ? qsDelegate.isEnabled ? "hide_table_row" : "show_table_row" : ""
+                display: QQC2.AbstractButton.IconOnly
-                    onClicked: qsDelegate.isEnabled ? savedQuickSettings.disableQS(model.index) : savedQuickSettings.enableQS(model.index)
+                text: qsDelegate.isEnabled ? i18nc("@action:button", "Hide") : i18nc("@action:button", "Show")
-                }
+                icon.name: qsDelegate.isEnabled ? "hide_table_row" : "show_table_row"
+                onClicked: qsDelegate.isEnabled ? savedQuickSettings.disableQS(model.index) : savedQuickSettings.enableQS(model.index)
+
+                QQC2.ToolTip.visible: hovered
+                QQC2.ToolTip.text: text
+                QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
             }
         }
     }
 
-    Component {
+    data: QS.SavedQuickSettings {
-        id: listViewComponent
-
-        ListView {
-            id: listView
-            Layout.fillWidth: true
-            Layout.preferredHeight: contentHeight
-            interactive: false
-
-            property bool isEnabled: false
-            model: isEnabled ? savedQuickSettings.enabledModel : savedQuickSettings.disabledModel
-
-            moveDisplaced: Transition {
-                YAnimator {
-                    duration: Kirigami.Units.longDuration
-                    easing.type: Easing.InOutQuad
-                }
-            }
-
-            delegate: Kirigami.DelegateRecycler {
-                id: delegate
-
-                width: listView.width
-                sourceComponent: listItemComponent
-
-                readonly property ListView parentView: ListView.view
-            }
-        }
-    }
-
-    QS.SavedQuickSettings {
         id: savedQuickSettings
     }
 
-    ColumnLayout {
+    FormCard.FormHeader {
-        spacing: Kirigami.Units.smallSpacing
+        title: i18n("Quick Settings")
-        width: root.width
+        visible: enabledRepeater.count > 0
-        
+    }
-        MobileForm.FormCard {
-            Layout.fillWidth: true
-            
-            contentItem: ColumnLayout {
-                spacing: 0
-                
-                MobileForm.FormCardHeader {
-                    title: i18n("Quick Settings")
-                    subtitle: i18n("Customize the order of quick settings in the pull-down panel and hide them.")
-                }
 
-                Loader {
+    FormCard.FormSectionText {
-                    Layout.fillWidth: true
+        text: i18n("Customize the order of quick settings in the pull-down panel and hide them.")
-                    Layout.preferredHeight: item ? item.contentHeight : 0
+        visible: enabledRepeater.count > 0
+    }
 
-                    asynchronous: true
+    FormCard.FormCard {
-                    sourceComponent: listViewComponent
+        visible: enabledRepeater.count > 0
 
-                    onLoaded: item.isEnabled = true
+        ListView {
-                }
+            id: enabledRepeater
+
+            interactive: false
+
+            model: savedQuickSettings.enabledModel
+            delegate: Delegate {
+                isEnabled: true
             }
+
+            Layout.fillWidth: true
+            Layout.preferredHeight: contentHeight
         }
+    }
 
-        MobileForm.FormCard {
+    FormCard.FormHeader {
-            Layout.fillWidth: true
+        title: i18n("Disabled Quick Settings")
+        visible: disabledRepeater.count > 0
+    }
 
-            contentItem: ColumnLayout {
+    FormCard.FormSectionText {
-                spacing: 0
+        text: i18n("Re-enable previously disabled quick settings.")
+        visible: disabledRepeater.count > 0
+    }
 
-                MobileForm.FormCardHeader {
+    FormCard.FormCard {
-                    title: i18n("Disabled Quick Settings")
+        visible: disabledRepeater.count > 0
-                    subtitle: i18n("Re-enable previously disabled quick settings.")
-                }
 
-                Loader {
+        ListView {
-                    Layout.fillWidth: true
+            id: disabledRepeater
-                    Layout.preferredHeight: item ? item.contentHeight : 0
 
-                    asynchronous: true
+            interactive: false
-                    sourceComponent: listViewComponent
 
-                    onLoaded: item.isEnabled = false
+            model: savedQuickSettings.disabledModel
-                }
+            delegate: Delegate {
+                isEnabled: false
             }
+
+            Layout.fillWidth: true
+            Layout.preferredHeight: contentHeight
         }
     }
 }

kcms/mobileshell/ui/VibrationForm.qml

@@ -3,111 +3,99 @@
  * SPDX-License-Identifier: LGPL-2.0-or-later
  */
 
-import QtQuick 2.15
+import QtQuick
-import QtQuick.Layouts 1.15
+import QtQuick.Layouts
-import QtQuick.Controls 2.15 as QQC2
+import QtQuick.Controls as QQC2
 
-import org.kde.kirigami 2.19 as Kirigami
+import org.kde.kirigami as Kirigami
 import org.kde.kcmutils as KCM
-import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
+import org.kde.kirigamiaddons.formcard 1 as FormCard
 import org.kde.plasma.private.mobileshell.shellsettingsplugin as ShellSettings
 
-Kirigami.ScrollablePage {
+FormCard.FormCardPage {
     id: root
+
     title: i18n("Shell Vibrations")
-    leftPadding: 0
+
-    rightPadding: 0
+    FormCard.FormCard {
-    topPadding: Kirigami.Units.gridUnit
+        Layout.topMargin: Kirigami.Units.gridUnit
-    bottomPadding: Kirigami.Units.gridUnit
+
-    
+        FormCard.FormSwitchDelegate {
-    ColumnLayout {
+            id: shellVibrationsSwitch
-        spacing: 0
+            text: i18n("Shell Vibrations")
-        width: root.width
+            description: i18n("Whether to have vibrations enabled in the shell.")
-        
+            checked: ShellSettings.Settings.vibrationsEnabled
-        MobileForm.FormCard {
+            onCheckedChanged: {
-            Layout.fillWidth: true
+                if (checked != ShellSettings.Settings.vibrationsEnabled) {
-            
+                    ShellSettings.Settings.vibrationsEnabled = checked;
-            contentItem: ColumnLayout {
-                spacing: 0
-                
-                MobileForm.FormSwitchDelegate {
-                    id: shellVibrationsSwitch
-                    text: i18n("Shell Vibrations")
-                    description: i18n("Whether to have vibrations enabled in the shell.")
-                    checked: ShellSettings.Settings.vibrationsEnabled
-                    onCheckedChanged: {
-                        if (checked != ShellSettings.Settings.vibrationsEnabled) {
-                            ShellSettings.Settings.vibrationsEnabled = checked;
-                        }
-                    }
-                }
-                
-                MobileForm.FormDelegateSeparator { above: shellVibrationsSwitch; below: vibrationIntensityDelegate }
-                
-                MobileForm.FormComboBoxDelegate {
-                    id: vibrationIntensityDelegate
-                    text: i18n("Vibration Intensity")
-                    description: i18n("How intense shell vibrations should be.")
-                    
-                    property string lowIntensityString: i18nc("Low intensity", "Low")
-                    property string mediumIntensityString: i18nc("Medium intensity", "Medium")
-                    property string highIntensityString: i18nc("High intensity", "High")
-                    
-                    currentIndex: indexOfValue(ShellSettings.Settings.vibrationIntensity)
-                    model: ListModel {
-                        // we can't use i18n with ListElement
-                        Component.onCompleted: {
-                            append({"name": vibrationIntensityDelegate.highIntensityString, "value": 1.0});
-                            append({"name": vibrationIntensityDelegate.mediumIntensityString, "value": 0.5});
-                            append({"name": vibrationIntensityDelegate.lowIntensityString, "value": 0.2});
-                            
-                            // indexOfValue doesn't bind to model changes unfortunately, set currentIndex manually here
-                            vibrationIntensityDelegate.currentIndex = vibrationIntensityDelegate.indexOfValue(ShellSettings.Settings.vibrationIntensity)
-                        }
-                    }
-                    
-                    textRole: "name"
-                    valueRole: "value"
-                    
-                    Component.onCompleted: dialog.parent = root
-                    onCurrentValueChanged: ShellSettings.Settings.vibrationIntensity = currentValue;
-                }
-                
-                MobileForm.FormDelegateSeparator { above: vibrationIntensityDelegate; below: vibrationDurationDelegate }
-                
-                MobileForm.FormComboBoxDelegate {
-                    id: vibrationDurationDelegate
-                    text: i18n("Vibration Duration")
-                    description: i18n("How long shell vibrations should be.")
-                    
-                    property string longString: i18nc("Long duration", "Long")
-                    property string mediumString: i18nc("Medium duration", "Medium")
-                    property string shortString: i18nc("Short duration", "Short")
-                    
-                    currentIndex: indexOfValue(ShellSettings.Settings.vibrationDuration)
-                    model: ListModel {
-                        // we can't use i18n with ListElement
-                        Component.onCompleted: {
-                            append({"name": vibrationDurationDelegate.longString, "value": 100});
-                            append({"name": vibrationDurationDelegate.mediumString, "value": 50});
-                            append({"name": vibrationDurationDelegate.shortString, "value": 15});
-                            
-                            // indexOfValue doesn't bind to model changes unfortunately, set currentIndex manually here
-                            vibrationDurationDelegate.currentIndex = vibrationDurationDelegate.indexOfValue(ShellSettings.Settings.vibrationDuration)
-                        }
-                    }
-                    
-                    textRole: "name"
-                    valueRole: "value"
-                    
-                    Component.onCompleted: dialog.parent = root
-                    onCurrentValueChanged: ShellSettings.Settings.vibrationDuration = currentValue;
                 }
             }
         }
-        
+
-        MobileForm.FormSectionText {
+        FormCard.FormDelegateSeparator { above: shellVibrationsSwitch; below: vibrationIntensityDelegate }
-            text: i18n("Keyboard vibrations are controlled separately in the keyboard settings module.")
+
+        FormCard.FormComboBoxDelegate {
+            id: vibrationIntensityDelegate
+            text: i18n("Vibration Intensity")
+            description: i18n("How intense shell vibrations should be.")
+
+            property string lowIntensityString: i18nc("Low intensity", "Low")
+            property string mediumIntensityString: i18nc("Medium intensity", "Medium")
+            property string highIntensityString: i18nc("High intensity", "High")
+
+            currentIndex: indexOfValue(ShellSettings.Settings.vibrationIntensity)
+            model: ListModel {
+                // we can't use i18n with ListElement
+                Component.onCompleted: {
+                    append({"name": vibrationIntensityDelegate.highIntensityString, "value": 1.0});
+                    append({"name": vibrationIntensityDelegate.mediumIntensityString, "value": 0.5});
+                    append({"name": vibrationIntensityDelegate.lowIntensityString, "value": 0.2});
+
+                    // indexOfValue doesn't bind to model changes unfortunately, set currentIndex manually here
+                    vibrationIntensityDelegate.currentIndex = vibrationIntensityDelegate.indexOfValue(ShellSettings.Settings.vibrationIntensity)
+                }
+            }
+
+            textRole: "name"
+            valueRole: "value"
+
+            Component.onCompleted: dialog.parent = root
+            onCurrentValueChanged: ShellSettings.Settings.vibrationIntensity = currentValue;
+        }
+
+        FormCard.FormDelegateSeparator { above: vibrationIntensityDelegate; below: vibrationDurationDelegate }
+
+        FormCard.FormComboBoxDelegate {
+            id: vibrationDurationDelegate
+            text: i18n("Vibration Duration")
+            description: i18n("How long shell vibrations should be.")
+
+            property string longString: i18nc("Long duration", "Long")
+            property string mediumString: i18nc("Medium duration", "Medium")
+            property string shortString: i18nc("Short duration", "Short")
+
+            currentIndex: indexOfValue(ShellSettings.Settings.vibrationDuration)
+            model: ListModel {
+                // we can't use i18n with ListElement
+                Component.onCompleted: {
+                    append({"name": vibrationDurationDelegate.longString, "value": 100});
+                    append({"name": vibrationDurationDelegate.mediumString, "value": 50});
+                    append({"name": vibrationDurationDelegate.shortString, "value": 15});
+
+                    // indexOfValue doesn't bind to model changes unfortunately, set currentIndex manually here
+                    vibrationDurationDelegate.currentIndex = vibrationDurationDelegate.indexOfValue(ShellSettings.Settings.vibrationDuration)
+                }
+            }
+
+            textRole: "name"
+            valueRole: "value"
+
+            Component.onCompleted: dialog.parent = root
+            onCurrentValueChanged: ShellSettings.Settings.vibrationDuration = currentValue;
         }
     }
+
+    FormCard.FormSectionText {
+        text: i18n("Keyboard vibrations are controlled separately in the keyboard settings module.")
+    }
 }

kcms/mobileshell/ui/main.qml

@@ -9,7 +9,7 @@ import QtQuick.Controls 2.15 as QQC2
 
 import org.kde.kirigami 2.19 as Kirigami
 import org.kde.kcmutils as KCM
-import org.kde.kirigamiaddons.labs.mobileform 0.1 as MobileForm
+import org.kde.kirigamiaddons.formcard 1.0 as FormCard
 import org.kde.plasma.private.mobileshell.shellsettingsplugin as ShellSettings
 
 KCM.SimpleKCM {
@@ -17,170 +17,141 @@ KCM.SimpleKCM {
 
     title: i18n("Shell")
 
+    topPadding: 0
+    bottomPadding: 0
     leftPadding: 0
     rightPadding: 0
-    topPadding: Kirigami.Units.gridUnit
-    bottomPadding: Kirigami.Units.gridUnit
-    
-    ColumnLayout {
-        spacing: 0
-        width: root.width
-        
-        MobileForm.FormCard {
-            Layout.fillWidth: true
-            
-            contentItem: ColumnLayout {
-                spacing: 0
-                
-                MobileForm.FormCardHeader {
-                    title: i18n("General")
-                }
-                
-                MobileForm.FormButtonDelegate {
-                    id: shellVibrationsButton
-                    text: i18n("Shell Vibrations")
-                    onClicked: kcm.push("VibrationForm.qml")
-                }
-                
-                MobileForm.FormDelegateSeparator { above: shellVibrationsButton; below: animationsSwitch }
-                
-                MobileForm.FormSwitchDelegate {
-                    id: animationsSwitch
-                    text: i18n("Animations")
-                    description: i18n("If this is off, animations will be reduced as much as possible.")
-                    checked: ShellSettings.Settings.animationsEnabled
-                    onCheckedChanged: {
-                        if (checked != ShellSettings.Settings.animationsEnabled) {
-                            ShellSettings.Settings.animationsEnabled = checked;
-                        }
-                    }
-                }
-            }
-        }
-        
-        MobileForm.FormCard {
-            Layout.fillWidth: true
-            Layout.topMargin: Kirigami.Units.gridUnit
-            
-            contentItem: ColumnLayout {
-                spacing: 0
-                
-                MobileForm.FormCardHeader {
-                    title: i18n("Navigation Panel")
-                }
-                
-                MobileForm.FormSwitchDelegate {
-                    id: gestureDelegate
-                    text: i18n("Gesture-only Mode")
-                    description: i18n("Whether to hide the navigation panel.")
-                    checked: !ShellSettings.Settings.navigationPanelEnabled
-                    onCheckedChanged: {
-                        if (checked != !ShellSettings.Settings.navigationPanelEnabled) {
-                            ShellSettings.Settings.navigationPanelEnabled = !checked;
-                        }
-                    }
-                }
-            }
-        }
-        
-        MobileForm.FormCard {
-            Layout.fillWidth: true
-            Layout.topMargin: Kirigami.Units.gridUnit
-            
-            contentItem: ColumnLayout {
-                spacing: 0
-                
-                MobileForm.FormCardHeader {
-                    title: i18n("Task Switcher")
-                }
-                
-                MobileForm.FormSwitchDelegate {
-                    text: i18n("Show Application Previews")
-                    description: i18n("Turning this off may help improve performance.")
-                    checked: ShellSettings.Settings.taskSwitcherPreviewsEnabled
-                    onCheckedChanged: {
-                        if (checked != ShellSettings.Settings.taskSwitcherPreviewsEnabled) {
-                            ShellSettings.Settings.taskSwitcherPreviewsEnabled = checked;
-                        }
-                    }
-                }
-            }
-        }
-        
-        MobileForm.FormCard {
-            Layout.fillWidth: true
-            Layout.topMargin: Kirigami.Units.gridUnit
-            
-            contentItem: ColumnLayout {
-                id: parentCol
-                spacing: 0
-                
-                MobileForm.FormCardHeader {
-                    title: i18n("Action Drawer")
-                }
-                
-                MobileForm.FormButtonDelegate {
-                    id: quickSettingsButton
-                    text: i18n("Quick Settings")
-                    onClicked: kcm.push("QuickSettingsForm.qml")
-                }
-                
-                MobileForm.FormDelegateSeparator { above: quickSettingsButton; below: topLeftActionDrawerModeDelegate }
-                
-                property string pinnedString: i18nc("Pinned action drawer mode", "Pinned Mode")
-                property string expandedString: i18nc("Expanded action drawer mode", "Expanded Mode")
-                
-                MobileForm.FormComboBoxDelegate {
-                    id: topLeftActionDrawerModeDelegate
-                    text: i18n("Top Left Drawer Mode")
-                    description: i18n("Mode when opening from the top left.")
-                    
-                    currentIndex: indexOfValue(ShellSettings.Settings.actionDrawerTopLeftMode)
-                    model: ListModel {
-                        // we can't use i18n with ListElement
-                        Component.onCompleted: {
-                            append({"name": parentCol.pinnedString, "value": ShellSettings.Settings.Pinned});
-                            append({"name": parentCol.expandedString, "value": ShellSettings.Settings.Expanded});
-                            
-                            // indexOfValue doesn't bind to model changes unfortunately, set currentIndex manually here
-                            topLeftActionDrawerModeDelegate.currentIndex = topLeftActionDrawerModeDelegate.indexOfValue(ShellSettings.Settings.actionDrawerTopLeftMode)
-                        }
-                    }
-                    
-                    textRole: "name"
-                    valueRole: "value"
-                    
-                    Component.onCompleted: dialog.parent = root
-                    onCurrentValueChanged: ShellSettings.Settings.actionDrawerTopLeftMode = currentValue
-                }
-                
-                MobileForm.FormDelegateSeparator { above: topLeftActionDrawerModeDelegate; below: topRightActionDrawerModeDelegate }
-                
-                MobileForm.FormComboBoxDelegate {
-                    id: topRightActionDrawerModeDelegate
-                    text: i18n("Top Right Drawer Mode")
-                    description: i18n("Mode when opening from the top right.")
-                    
-                    model: ListModel {
-                        // we can't use i18n with ListElement
-                        Component.onCompleted: {
-                            append({"name": parentCol.pinnedString, "value": ShellSettings.Settings.Pinned});
-                            append({"name": parentCol.expandedString, "value": ShellSettings.Settings.Expanded});
 
-                            // indexOfValue doesn't bind to model changes unfortunately, set currentIndex manually here
+    ColumnLayout {
-                            topRightActionDrawerModeDelegate.currentIndex = topRightActionDrawerModeDelegate.indexOfValue(ShellSettings.Settings.actionDrawerTopRightMode)
+        FormCard.FormHeader {
-                        }
+            title: i18n("General")
+        }
+
+        FormCard.FormCard {
+            FormCard.FormButtonDelegate {
+                id: shellVibrationsButton
+                text: i18n("Shell Vibrations")
+                onClicked: kcm.push("VibrationForm.qml")
+            }
+
+            FormCard.FormDelegateSeparator { above: shellVibrationsButton; below: animationsSwitch }
+
+            FormCard.FormSwitchDelegate {
+                id: animationsSwitch
+                text: i18n("Animations")
+                description: i18n("If this is off, animations will be reduced as much as possible.")
+                checked: ShellSettings.Settings.animationsEnabled
+                onCheckedChanged: {
+                    if (checked != ShellSettings.Settings.animationsEnabled) {
+                        ShellSettings.Settings.animationsEnabled = checked;
                     }
-                    
-                    textRole: "name"
-                    valueRole: "value"
-                    
-                    Component.onCompleted: {
-                        dialog.parent = root
-                    }
-                    onCurrentValueChanged: ShellSettings.Settings.actionDrawerTopRightMode = currentValue
                 }
             }
         }
+
+        FormCard.FormHeader {
+            title: i18n("Navigation Panel")
+        }
+
+        FormCard.FormCard {
+            FormCard.FormSwitchDelegate {
+                id: gestureDelegate
+                text: i18n("Gesture-only Mode")
+                description: i18n("Whether to hide the navigation panel.")
+                checked: !ShellSettings.Settings.navigationPanelEnabled
+                onCheckedChanged: {
+                    if (checked != !ShellSettings.Settings.navigationPanelEnabled) {
+                        ShellSettings.Settings.navigationPanelEnabled = !checked;
+                    }
+                }
+            }
+        }
+
+        FormCard.FormHeader {
+            title: i18n("Task Switcher")
+        }
+
+        FormCard.FormCard {
+            FormCard.FormSwitchDelegate {
+                text: i18n("Show Application Previews")
+                description: i18n("Turning this off may help improve performance.")
+                checked: ShellSettings.Settings.taskSwitcherPreviewsEnabled
+                onCheckedChanged: {
+                    if (checked != ShellSettings.Settings.taskSwitcherPreviewsEnabled) {
+                        ShellSettings.Settings.taskSwitcherPreviewsEnabled = checked;
+                    }
+                }
+            }
+        }
+
+        FormCard.FormHeader {
+            title: i18n("Action Drawer")
+        }
+
+        FormCard.FormCard {
+            id: quickSettings
+
+            property string pinnedString: i18nc("Pinned action drawer mode", "Pinned Mode")
+            property string expandedString: i18nc("Expanded action drawer mode", "Expanded Mode")
+
+            FormCard.FormButtonDelegate {
+                id: quickSettingsButton
+                text: i18n("Quick Settings")
+                onClicked: kcm.push("QuickSettingsForm.qml")
+            }
+
+            FormCard.FormDelegateSeparator { above: quickSettingsButton; below: topLeftActionDrawerModeDelegate }
+
+            FormCard.FormComboBoxDelegate {
+                id: topLeftActionDrawerModeDelegate
+                text: i18n("Top Left Drawer Mode")
+                description: i18n("Mode when opening from the top left.")
+
+                currentIndex: indexOfValue(ShellSettings.Settings.actionDrawerTopLeftMode)
+                model: ListModel {
+                    // we can't use i18n with ListElement
+                    Component.onCompleted: {
+                        append({"name": quickSettings.pinnedString, "value": ShellSettings.Settings.Pinned});
+                        append({"name": quickSettings.expandedString, "value": ShellSettings.Settings.Expanded});
+
+                        // indexOfValue doesn't bind to model changes unfortunately, set currentIndex manually here
+                        topLeftActionDrawerModeDelegate.currentIndex = topLeftActionDrawerModeDelegate.indexOfValue(ShellSettings.Settings.actionDrawerTopLeftMode)
+                    }
+                }
+
+                textRole: "name"
+                valueRole: "value"
+
+                Component.onCompleted: dialog.parent = root
+                onCurrentValueChanged: ShellSettings.Settings.actionDrawerTopLeftMode = currentValue
+            }
+
+            FormCard.FormDelegateSeparator { above: topLeftActionDrawerModeDelegate; below: topRightActionDrawerModeDelegate }
+
+            FormCard.FormComboBoxDelegate {
+                id: topRightActionDrawerModeDelegate
+                text: i18n("Top Right Drawer Mode")
+                description: i18n("Mode when opening from the top right.")
+
+                model: ListModel {
+                    // we can't use i18n with ListElement
+                    Component.onCompleted: {
+                        append({"name": quickSettings.pinnedString, "value": ShellSettings.Settings.Pinned});
+                        append({"name": quickSettings.expandedString, "value": ShellSettings.Settings.Expanded});
+
+                        // indexOfValue doesn't bind to model changes unfortunately, set currentIndex manually here
+                        topRightActionDrawerModeDelegate.currentIndex = topRightActionDrawerModeDelegate.indexOfValue(ShellSettings.Settings.actionDrawerTopRightMode)
+                    }
+                }
+
+                textRole: "name"
+                valueRole: "value"
+
+                Component.onCompleted: {
+                    dialog.parent = root
+                }
+                onCurrentValueChanged: ShellSettings.Settings.actionDrawerTopRightMode = currentValue
+            }
+        }
     }
 }