homescreens/folio: Animate settings open, and add close button to widget selector

containments/homescreens/folio/README.md

@@ -14,20 +14,15 @@ Most of the homescreen is in C++ in order to keep logic together, with QML only
 As such, all of the positioning and placement of delegates on the screen are top down from the model, as well as drag and drop behaviour.
 
 #### TODO
-- Add folio/halcyon switcher in initial-start
-- If an app gets uninstalled, the homescreen UI needs to ensure that delegates are updated
+- BUG: If an app gets uninstalled, the homescreen UI needs to ensure that delegates are updated
 - BUG: landscape favourites bar duplication when dragging icon from it sometimes
 - BUG: can't insert delegates in-between very well in landscape favourites bar
 - BUG: drag and drop animation when rejected on a different page
 - IMPROVEMENT: can make the touch area only the icon?
-
+- FEATURE: Add folio/halcyon switcher in initial-start
 - FEATURE: add widget import/export
 - FEATURE: keyboard navigation
 - FEATURE: touchpad navigation
 - FEATURE: option to darken wallpaper
 - FEATURE: option to turn off row/column swap
-- FEATURE: animate homescreen config opening
-
-- RESTORE: app drawer overshoot
-
 - PERFORMANCE: ensure that the widget config overlays are in loaders

containments/homescreens/folio/package/contents/ui/settings/AppletListViewer.qml

@@ -33,15 +33,30 @@ MouseArea {
         color: Qt.rgba(0, 0, 0, 0.7)
     }
 
+    RowLayout {
+        id: header
+        spacing: Kirigami.Units.largeSpacing
+        anchors.left: parent.left
+        anchors.leftMargin: Kirigami.Units.gridUnit
+        anchors.top: parent.top
+        anchors.topMargin: Kirigami.Units.gridUnit * 3 + root.homeScreen.topMargin
+
+        PC3.ToolButton {
+            Layout.alignment: Qt.AlignVCenter
+            icon.name: 'go-previous'
+            implicitWidth: Kirigami.Units.gridUnit * 2
+            implicitHeight: Kirigami.Units.gridUnit * 2
+            padding: Kirigami.Units.smallSpacing
+            onClicked: root.requestClose()
+        }
+
         PC3.Label {
             id: heading
             color: 'white'
             text: i18n("Widgets")
             font.weight: Font.Bold
             font.pointSize: Kirigami.Theme.defaultFont.pointSize * 1.5
-        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.top: parent.top
-        anchors.topMargin: Kirigami.Units.gridUnit * 3 + root.homeScreen.topMargin
+        }
     }
 
     GridView {
@@ -51,7 +66,7 @@ MouseArea {
 
         opacity: 0 // we display with the opacity gradient below
 
-        anchors.top: heading.bottom
+        anchors.top: header.bottom
         anchors.topMargin: Kirigami.Units.gridUnit
         anchors.left: parent.left
         anchors.leftMargin: root.homeScreen.leftMargin
@@ -87,6 +102,16 @@ MouseArea {
             cursorShape: Qt.PointingHandCursor
             hoverEnabled: true
 
+            property real zoomScale: pressed ? 0.8 : 1
+            transform: Scale {
+                origin.x: delegate.width / 2;
+                origin.y: delegate.height / 2;
+                xScale: delegate.zoomScale
+                yScale: delegate.zoomScale
+            }
+
+            Behavior on zoomScale { NumberAnimation { duration: 80 } }
+
             readonly property string pluginName: model.pluginName
 
             onPressAndHold: {

containments/homescreens/folio/package/contents/ui/settings/SettingsWindow.qml

@@ -14,18 +14,53 @@ import org.kde.kirigamiaddons.formcard 1.0 as FormCard
 
 import '../delegate'
 
-Kirigami.ApplicationWindow {
+Window {
     id: root
     flags: Qt.FramelessWindowHint
+    color: 'transparent'
+
+    onVisibleChanged: {
+        if (visible) {
+            opacityAnim.to = 1;
+            opacityAnim.restart();
+        }
+    }
+
+    onClosing: (close) => {
+        if (applicationItem.opacity !== 0) {
+            close.accepted = false;
+            opacityAnim.to = 0;
+            opacityAnim.restart();
+        }
+    }
+
+    signal requestConfigureMenu()
+
+    Kirigami.ApplicationItem {
+        id: applicationItem
+        anchors.fill: parent
+
+        opacity: 0
+
+        NumberAnimation on opacity {
+            id: opacityAnim
+            duration: 200
+            easing.type: Easing.OutCubic
+            onFinished: {
+                if (applicationItem.opacity === 0) {
+                    root.close();
+                }
+            }
+        }
+
+        scale: 0.7 + 0.3 * applicationItem.opacity
 
         pageStack.globalToolBar.style: Kirigami.ApplicationHeaderStyle.ToolBar
         pageStack.globalToolBar.showNavigationButtons: Kirigami.ApplicationHeaderStyle.NoNavigationButtons;
 
-    signal requestConfigureMenu()
-
         pageStack.initialPage: Kirigami.ScrollablePage {
             id: page
-        opacity: root.opacity
+            opacity: applicationItem.opacity
 
             titleDelegate: RowLayout {
                 QQC2.ToolButton {
@@ -286,3 +321,4 @@ Kirigami.ApplicationWindow {
             }
         }
     }
+}