mobileshell-kcm: Port to FormCard

kcms/mobileshell/ui/QuickSettingsForm.qml

@@ -9,31 +9,28 @@ 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 {
+    component Delegate : FormCard.AbstractFormDelegate {
-        id: listItemComponent
-
-        MobileForm.AbstractFormDelegate {
         id: qsDelegate
 
-            readonly property bool isEnabled: parent ? parent.parentView.isEnabled : false
+        property bool isEnabled: false
 
+        width: ListView.view.width
+
+        background: null
         contentItem: RowLayout {
             Kirigami.ListItemDragHandle {
                 visible: qsDelegate.isEnabled
                 Layout.rightMargin: Kirigami.Units.gridUnit
                 listItem: qsDelegate
-                    listView: qsDelegate.parent ? qsDelegate.parent.parentView : null
+                listView: qsDelegate.ListView.view
                 onMoveRequested: savedQuickSettings.enabledModel.moveRow(oldIndex, newIndex)
             }
 
@@ -47,107 +44,82 @@ Kirigami.ScrollablePage {
                 implicitHeight: iconAvailable ? Kirigami.Units.iconSizes.small : 0
             }
 
-                ColumnLayout {
-                    Layout.fillWidth: true
-                    spacing: Kirigami.Units.smallSpacing
-
             QQC2.Label {
                 Layout.fillWidth: true
                 text: model ? model.name : ""
                 elide: Text.ElideRight
             }
-                }
 
             QQC2.ToolButton {
-                    icon.name: model ? qsDelegate.isEnabled ? "hide_table_row" : "show_table_row" : ""
+                display: QQC2.AbstractButton.IconOnly
+                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
-        width: root.width
-        
-        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.")
+        visible: enabledRepeater.count > 0
+    }
+
+    FormCard.FormSectionText {
+        text: i18n("Customize the order of quick settings in the pull-down panel and hide them.")
+        visible: enabledRepeater.count > 0
+    }
+
+    FormCard.FormCard {
+        visible: enabledRepeater.count > 0
+
+        ListView {
+            id: enabledRepeater
+
+            interactive: false
+
+            model: savedQuickSettings.enabledModel
+            delegate: Delegate {
+                isEnabled: true
             }
 
-                Loader {
             Layout.fillWidth: true
-                    Layout.preferredHeight: item ? item.contentHeight : 0
+            Layout.preferredHeight: contentHeight
-
-                    asynchronous: true
-                    sourceComponent: listViewComponent
-
-                    onLoaded: item.isEnabled = true
-                }
         }
     }
 
-        MobileForm.FormCard {
+    FormCard.FormHeader {
-            Layout.fillWidth: true
-
-            contentItem: ColumnLayout {
-                spacing: 0
-
-                MobileForm.FormCardHeader {
         title: i18n("Disabled Quick Settings")
-                    subtitle: i18n("Re-enable previously disabled quick settings.")
+        visible: disabledRepeater.count > 0
+    }
+
+    FormCard.FormSectionText {
+        text: i18n("Re-enable previously disabled quick settings.")
+        visible: disabledRepeater.count > 0
+    }
+
+    FormCard.FormCard {
+        visible: disabledRepeater.count > 0
+
+        ListView {
+            id: disabledRepeater
+
+            interactive: false
+
+            model: savedQuickSettings.disabledModel
+            delegate: Delegate {
+                isEnabled: false
             }
 
-                Loader {
             Layout.fillWidth: true
-                    Layout.preferredHeight: item ? item.contentHeight : 0
+            Layout.preferredHeight: contentHeight
-
-                    asynchronous: true
-                    sourceComponent: listViewComponent
-
-                    onLoaded: item.isEnabled = false
-                }
-            }
         }
     }
 }

kcms/mobileshell/ui/VibrationForm.qml

@@ -3,34 +3,24 @@
  * 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
-    topPadding: Kirigami.Units.gridUnit
-    bottomPadding: Kirigami.Units.gridUnit
 
-    ColumnLayout {
+    FormCard.FormCard {
-        spacing: 0
+        Layout.topMargin: Kirigami.Units.gridUnit
-        width: root.width
 
-        MobileForm.FormCard {
+        FormCard.FormSwitchDelegate {
-            Layout.fillWidth: true
-            
-            contentItem: ColumnLayout {
-                spacing: 0
-                
-                MobileForm.FormSwitchDelegate {
             id: shellVibrationsSwitch
             text: i18n("Shell Vibrations")
             description: i18n("Whether to have vibrations enabled in the shell.")
@@ -42,9 +32,9 @@ Kirigami.ScrollablePage {
             }
         }
 
-                MobileForm.FormDelegateSeparator { above: shellVibrationsSwitch; below: vibrationIntensityDelegate }
+        FormCard.FormDelegateSeparator { above: shellVibrationsSwitch; below: vibrationIntensityDelegate }
 
-                MobileForm.FormComboBoxDelegate {
+        FormCard.FormComboBoxDelegate {
             id: vibrationIntensityDelegate
             text: i18n("Vibration Intensity")
             description: i18n("How intense shell vibrations should be.")
@@ -73,9 +63,9 @@ Kirigami.ScrollablePage {
             onCurrentValueChanged: ShellSettings.Settings.vibrationIntensity = currentValue;
         }
 
-                MobileForm.FormDelegateSeparator { above: vibrationIntensityDelegate; below: vibrationDurationDelegate }
+        FormCard.FormDelegateSeparator { above: vibrationIntensityDelegate; below: vibrationDurationDelegate }
 
-                MobileForm.FormComboBoxDelegate {
+        FormCard.FormComboBoxDelegate {
             id: vibrationDurationDelegate
             text: i18n("Vibration Duration")
             description: i18n("How long shell vibrations should be.")
@@ -104,10 +94,8 @@ Kirigami.ScrollablePage {
             onCurrentValueChanged: ShellSettings.Settings.vibrationDuration = currentValue;
         }
     }
-        }
 
-        MobileForm.FormSectionText {
+    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,34 +17,26 @@ KCM.SimpleKCM {
 
     title: i18n("Shell")
 
+    topPadding: 0
+    bottomPadding: 0
     leftPadding: 0
     rightPadding: 0
-    topPadding: Kirigami.Units.gridUnit
-    bottomPadding: Kirigami.Units.gridUnit
 
     ColumnLayout {
-        spacing: 0
+        FormCard.FormHeader {
-        width: root.width
-        
-        MobileForm.FormCard {
-            Layout.fillWidth: true
-            
-            contentItem: ColumnLayout {
-                spacing: 0
-                
-                MobileForm.FormCardHeader {
             title: i18n("General")
         }
 
-                MobileForm.FormButtonDelegate {
+        FormCard.FormCard {
+            FormCard.FormButtonDelegate {
                 id: shellVibrationsButton
                 text: i18n("Shell Vibrations")
                 onClicked: kcm.push("VibrationForm.qml")
             }
 
-                MobileForm.FormDelegateSeparator { above: shellVibrationsButton; below: animationsSwitch }
+            FormCard.FormDelegateSeparator { above: shellVibrationsButton; below: animationsSwitch }
 
-                MobileForm.FormSwitchDelegate {
+            FormCard.FormSwitchDelegate {
                 id: animationsSwitch
                 text: i18n("Animations")
                 description: i18n("If this is off, animations will be reduced as much as possible.")
@@ -56,20 +48,13 @@ KCM.SimpleKCM {
                 }
             }
         }
-        }
 
-        MobileForm.FormCard {
+        FormCard.FormHeader {
-            Layout.fillWidth: true
-            Layout.topMargin: Kirigami.Units.gridUnit
-            
-            contentItem: ColumnLayout {
-                spacing: 0
-                
-                MobileForm.FormCardHeader {
             title: i18n("Navigation Panel")
         }
 
-                MobileForm.FormSwitchDelegate {
+        FormCard.FormCard {
+            FormCard.FormSwitchDelegate {
                 id: gestureDelegate
                 text: i18n("Gesture-only Mode")
                 description: i18n("Whether to hide the navigation panel.")
@@ -81,20 +66,13 @@ KCM.SimpleKCM {
                 }
             }
         }
-        }
 
-        MobileForm.FormCard {
+        FormCard.FormHeader {
-            Layout.fillWidth: true
-            Layout.topMargin: Kirigami.Units.gridUnit
-            
-            contentItem: ColumnLayout {
-                spacing: 0
-                
-                MobileForm.FormCardHeader {
             title: i18n("Task Switcher")
         }
 
-                MobileForm.FormSwitchDelegate {
+        FormCard.FormCard {
+            FormCard.FormSwitchDelegate {
                 text: i18n("Show Application Previews")
                 description: i18n("Turning this off may help improve performance.")
                 checked: ShellSettings.Settings.taskSwitcherPreviewsEnabled
@@ -105,32 +83,26 @@ KCM.SimpleKCM {
                 }
             }
         }
-        }
 
-        MobileForm.FormCard {
+        FormCard.FormHeader {
-            Layout.fillWidth: true
-            Layout.topMargin: Kirigami.Units.gridUnit
-            
-            contentItem: ColumnLayout {
-                id: parentCol
-                spacing: 0
-                
-                MobileForm.FormCardHeader {
             title: i18n("Action Drawer")
         }
 
-                MobileForm.FormButtonDelegate {
+        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")
             }
 
-                MobileForm.FormDelegateSeparator { above: quickSettingsButton; below: topLeftActionDrawerModeDelegate }
+            FormCard.FormDelegateSeparator { above: quickSettingsButton; below: topLeftActionDrawerModeDelegate }
 
-                property string pinnedString: i18nc("Pinned action drawer mode", "Pinned Mode")
+            FormCard.FormComboBoxDelegate {
-                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.")
@@ -139,8 +111,8 @@ KCM.SimpleKCM {
                 model: ListModel {
                     // we can't use i18n with ListElement
                     Component.onCompleted: {
-                            append({"name": parentCol.pinnedString, "value": ShellSettings.Settings.Pinned});
+                        append({"name": quickSettings.pinnedString, "value": ShellSettings.Settings.Pinned});
-                            append({"name": parentCol.expandedString, "value": ShellSettings.Settings.Expanded});
+                        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)
@@ -154,9 +126,9 @@ KCM.SimpleKCM {
                 onCurrentValueChanged: ShellSettings.Settings.actionDrawerTopLeftMode = currentValue
             }
 
-                MobileForm.FormDelegateSeparator { above: topLeftActionDrawerModeDelegate; below: topRightActionDrawerModeDelegate }
+            FormCard.FormDelegateSeparator { above: topLeftActionDrawerModeDelegate; below: topRightActionDrawerModeDelegate }
 
-                MobileForm.FormComboBoxDelegate {
+            FormCard.FormComboBoxDelegate {
                 id: topRightActionDrawerModeDelegate
                 text: i18n("Top Right Drawer Mode")
                 description: i18n("Mode when opening from the top right.")
@@ -164,8 +136,8 @@ KCM.SimpleKCM {
                 model: ListModel {
                     // we can't use i18n with ListElement
                     Component.onCompleted: {
-                            append({"name": parentCol.pinnedString, "value": ShellSettings.Settings.Pinned});
+                        append({"name": quickSettings.pinnedString, "value": ShellSettings.Settings.Pinned});
-                            append({"name": parentCol.expandedString, "value": ShellSettings.Settings.Expanded});
+                        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)
@@ -182,5 +154,4 @@ KCM.SimpleKCM {
             }
         }
     }
-    }
 }