contents/ui/FavoritesView.qml

0001 // SPDX-FileCopyrightText: 2022 Devin Lin <devin@kde.org>
0002 // SPDX-License-Identifier: LGPL-2.0-or-later
0003
0004 import QtQuick 2.12
0005 import QtQuick.Controls 2.15 as QQC2
0006 import QtQuick.Layouts 1.1
0007 import QtQml.Models 2.15
0008
0009 import org.kde.plasma.components 3.0 as PC3
0010 import org.kde.draganddrop 2.0 as DragDrop
0011
0012 import org.kde.kirigami 2.19 as Kirigami
0013 import org.kde.plasma.private.mobileshell as MobileShell
0014 import org.kde.plasma.private.mobileshell.shellsettingsplugin as ShellSettings
0015
0016 Item {
0017     id: root
0018     layer.enabled: true
0019
0020     required property bool interactive
0021     required property var searchWidget
0022
0023     readonly property real twoColumnThreshold: Kirigami.Units.gridUnit * 16
0024     readonly property bool twoColumn: root.width / 2 > twoColumnThreshold
0025
0026     readonly property real cellWidth: twoColumn ? (root.width - leftMargin - rightMargin) / 2 : (root.width - leftMargin - rightMargin)
0027     readonly property real cellHeight: delegateHeight
0028
0029     readonly property real leftMargin: Math.round(width * 0.1)
0030     readonly property real rightMargin: Math.round(width * 0.1)
0031     readonly property real delegateHeight: Math.round(Kirigami.Units.gridUnit * 3)
0032
0033     property bool folderShown: false
0034
0035     signal openConfigureRequested()
0036     signal pageForwardRequested();
0037
0038     Connections {
0039         target: parent
0040
0041         function onFocusRequested() {
0042             favoritesGrid.forceActiveFocus();
0043         }
0044     }
0045
0046     function goToBeginning() {
0047         goToBeginningAnim.restart();
0048     }
0049
0050     function closeFolder() {
0051         folderShown = false;
0052         closeFolderAnim.restart()
0053     }
0054
0055     function openFolder() {
0056         folderShown = true;
0057         openFolderAnim.restart()
0058     }
0059
0060     function resetHighlight() {
0061         favoritesGrid.currentIndex = -1;
0062     }
0063
0064     FavoritesGrid {
0065         id: favoritesGrid
0066
0067         property real openFolderProgress: 0
0068         anchors.fill: parent
0069
0070         interactive: root.interactive
0071         searchWidget: root.searchWidget
0072
0073         cellWidth: root.cellWidth
0074         cellHeight: root.cellHeight
0075
0076         leftMargin: root.leftMargin
0077         rightMargin: root.rightMargin
0078         twoColumn: root.twoColumn
0079
0080         onOpenConfigureRequested: root.openConfigureRequested()
0081         onRequestOpenFolder: (folder) => {
0082             folderGrid.folder = folder;
0083             root.openFolder();
0084         }
0085
0086         property real translateX: openFolderProgress * -Kirigami.Units.gridUnit
0087         transform: Translate { x: favoritesGrid.translateX }
0088         opacity: 1 - openFolderProgress
0089         visible: opacity !== 0
0090
0091         rightEdgeCallback: () => {
0092             pageForwardRequested();
0093         }
0094     }
0095
0096     FolderGrid {
0097         id: folderGrid
0098
0099         property real openProgress: 0
0100         anchors.fill: parent
0101
0102         folder: null
0103
0104         interactive: root.interactive
0105
0106         cellWidth: root.cellWidth
0107         cellHeight: root.cellHeight
0108
0109         leftMargin: root.leftMargin
0110         rightMargin: root.rightMargin
0111         twoColumn: root.twoColumn
0112
0113         onOpenConfigureRequested: root.openConfigureRequested()
0114         onCloseRequested: root.closeFolder()
0115
0116         property real translateX: (1 - openProgress) * Kirigami.Units.gridUnit
0117         transform: Translate { x: folderGrid.translateX }
0118         opacity: openProgress
0119         visible: opacity !== 0
0120     }
0121
0122     // handle horizontal dragging in a folder
0123     DragHandler {
0124         id: dragHandler
0125         target: folderGrid
0126         enabled: folderGrid.visible
0127
0128         yAxis.enabled: false
0129         xAxis.enabled: true
0130         grabPermissions: PointerHandler.TakeOverForbidden
0131
0132         property real oldTranslationX
0133         property bool isClosing: false
0134
0135         // when dragged
0136         onTranslationChanged: {
0137             let moveAmount = Math.max(0, translation.x) / (Kirigami.Units.gridUnit * 5);
0138             folderGrid.openProgress = 1 - Math.min(1, Math.max(0, moveAmount));
0139             isClosing = translation.x > oldTranslationX;
0140             oldTranslationX = translation.x;
0141         }
0142
0143         // when drag is let go
0144         onActiveChanged: {
0145             if (!active) {
0146                 isClosing ? closeFolder() : openFolder();
0147             }
0148         }
0149     }
0150
0151     NumberAnimation {
0152         id: goToBeginningAnim
0153         target: favoritesGrid
0154         properties: 'contentY'
0155         to: favoritesGrid.originY
0156         duration: 200
0157         easing.type: Easing.InOutQuad
0158     }
0159
0160     SequentialAnimation {
0161         id: openFolderAnim
0162
0163         ParallelAnimation {
0164             NumberAnimation {
0165                 target: favoritesGrid
0166                 properties: 'openFolderProgress'
0167                 duration: ShellSettings.Settings.animationsEnabled ? 200 : 0
0168                 to: 1
0169                 easing.type: Easing.InOutQuad
0170             }
0171         }
0172
0173         ParallelAnimation {
0174             NumberAnimation {
0175                 target: folderGrid
0176                 properties: 'openProgress'
0177                 duration: ShellSettings.Settings.animationsEnabled ? 200 : 0
0178                 to: 1
0179                 easing.type: Easing.InOutQuad
0180             }
0181         }
0182     }
0183
0184     SequentialAnimation {
0185         id: closeFolderAnim
0186
0187         ParallelAnimation {
0188             NumberAnimation {
0189                 target: folderGrid
0190                 properties: 'openProgress'
0191                 duration: ShellSettings.Settings.animationsEnabled ? 200 : 0
0192                 to: 0
0193                 easing.type: Easing.InOutQuad
0194             }
0195         }
0196
0197         ParallelAnimation {
0198             NumberAnimation {
0199                 target: favoritesGrid
0200                 properties: 'openFolderProgress'
0201                 duration: ShellSettings.Settings.animationsEnabled ? 200 : 0
0202                 to: 0
0203                 easing.type: Easing.InOutQuad
0204             }
0205         }
0206     }
0207 }