contents/ui/FolderGrid.qml

0001 // SPDX-FileCopyrightText: 2022 Devin Lin <devin@kde.org>
0002 // SPDX-License-Identifier: LGPL-2.0-or-later
0003
0004 import QtQuick
0005 import QtQuick.Controls as QQC2
0006 import QtQuick.Layouts
0007 import QtQuick.Effects
0008 import QtQml.Models
0009
0010 import org.kde.plasma.components 3.0 as PC3
0011 import org.kde.draganddrop as DragDrop
0012
0013 import org.kde.kirigami as Kirigami
0014 import org.kde.plasma.private.mobileshell as MobileShell
0015 import org.kde.private.mobile.homescreen.halcyon as Halcyon
0016
0017 MobileShell.GridView {
0018     id: root
0019     property Halcyon.ApplicationFolder folder: null
0020
0021     property string folderName: folder ? folder.name : ""
0022     property var folderModel: folder ? folder.applications : []
0023
0024     required property bool twoColumn
0025
0026     signal openConfigureRequested()
0027     signal closeRequested()
0028
0029     property bool inFolderTitleEditMode: false
0030
0031     TapHandler {
0032         onLongPressed: root.openConfigureRequested()
0033         onTapped: root.closeRequested()
0034     }
0035
0036     header: MobileShell.BaseItem {
0037         topPadding: Math.round(root.height * 0.2)
0038         bottomPadding: Kirigami.Units.gridUnit
0039         leftPadding: 0
0040         rightPadding: 0
0041         implicitWidth: root.width
0042
0043         background: Rectangle {
0044             color: 'transparent'
0045             TapHandler {
0046                 onLongPressed: root.openConfigureRequested()
0047                 onTapped: root.closeRequested()
0048             }
0049         }
0050
0051         Component {
0052             id: folderTitleEdit
0053
0054             TextEdit {
0055                 text: root.folderName
0056                 color: "white"
0057                 selectByMouse: true
0058                 wrapMode: TextEdit.Wrap
0059
0060                 Component.onCompleted: forceActiveFocus()
0061
0062                 font.weight: Font.Bold
0063                 font.pointSize: 18
0064
0065                 layer.enabled: true
0066                 layer.effect: MobileShell.TextDropShadow {}
0067
0068                 onTextChanged: {
0069                     if (text.includes('\n')) {
0070                         // exit text edit mode when new line is entered
0071                         root.inFolderTitleEditMode = false;
0072                     } else {
0073                         root.folder.name = text;
0074                     }
0075                 }
0076                 onEditingFinished: root.inFolderTitleEditMode = false
0077             }
0078         }
0079
0080         Component {
0081             id: folderTitleLabel
0082
0083             QQC2.Label {
0084                 text: root.folderName
0085                 color: "white"
0086                 style: Text.Normal
0087                 styleColor: "transparent"
0088                 horizontalAlignment: Text.AlignLeft
0089                 textFormat: Text.MarkdownText
0090
0091                 elide: Text.ElideRight
0092                 wrapMode: Text.Wrap
0093                 maximumLineCount: 2
0094
0095                 font.weight: Font.Bold
0096                 font.pointSize: 18
0097
0098                 layer.enabled: true
0099                 layer.effect: MobileShell.TextDropShadow {}
0100
0101                 MouseArea {
0102                     anchors.fill: parent
0103                     onClicked: root.inFolderTitleEditMode = true
0104                 }
0105             }
0106         }
0107
0108         contentItem: RowLayout {
0109             id: rowLayout
0110             spacing: Kirigami.Units.smallSpacing * 2
0111
0112             // close folder button
0113             MouseArea {
0114                 id: button
0115                 Layout.alignment: Qt.AlignVCenter
0116                 implicitHeight: Kirigami.Units.iconSizes.small + Kirigami.Units.gridUnit
0117                 implicitWidth: Kirigami.Units.iconSizes.small + Kirigami.Units.gridUnit
0118
0119                 cursorShape: Qt.PointingHandCursor
0120                 onClicked: root.closeRequested()
0121
0122                 // button background
0123                 Rectangle {
0124                     anchors.fill: parent
0125                     color: Qt.rgba(255, 255, 255, button.pressed ? 0.2 : 0)
0126                     radius: button.width / 2
0127                 }
0128
0129                 // button icon
0130                 Kirigami.Icon {
0131                     anchors.centerIn: parent
0132                     implicitHeight: Kirigami.Units.iconSizes.small
0133                     implicitWidth: Kirigami.Units.iconSizes.small
0134                     isMask: true
0135                     color: 'white'
0136                     source: 'arrow-left'
0137
0138                     layer.enabled: true
0139                     layer.effect: MultiEffect {
0140                         shadowEnabled: true
0141                         shadowVerticalOffset: 1
0142                         blurMax: 8
0143                         shadowOpacity: 0.6
0144                     }
0145                 }
0146             }
0147
0148             // folder title
0149             Loader {
0150                 Layout.alignment: Qt.AlignVCenter
0151                 Layout.fillWidth: true
0152                 Layout.maximumWidth: rowLayout.width - button.width - rowLayout.spacing
0153                 sourceComponent: root.inFolderTitleEditMode ? folderTitleEdit : folderTitleLabel
0154             }
0155         }
0156     }
0157
0158     model: DelegateModel {
0159         id: visualModel
0160         model: root.folderModel
0161
0162         delegate: Item {
0163             id: delegateRoot
0164             width: root.cellWidth
0165             height: root.cellHeight
0166
0167             property int visualIndex: DelegateModel.itemsIndex
0168
0169             DropArea {
0170                 anchors.fill: parent
0171                 onEntered: (drag) => {
0172                     let from = drag.source.visualIndex;
0173                     let to = appDelegate.visualIndex;
0174                     visualModel.items.move(from, to);
0175                     root.folder.moveEntry(from, to);
0176                 }
0177             }
0178
0179             FavoritesAppDelegate {
0180                 id: appDelegate
0181                 visualIndex: delegateRoot.visualIndex
0182
0183                 isFolder: false
0184                 application: model.application
0185
0186                 menuActions: [
0187                     Kirigami.Action {
0188                         icon.name: "emblem-favorite"
0189                         text: i18n("Remove from favourites")
0190                         onTriggered: root.folder.removeApp(model.index)
0191                     },
0192                     Kirigami.Action {
0193                         icon.name: "document-open-folder"
0194                         text: i18n("Move out of folder")
0195                         onTriggered: root.folder.moveAppOut(model.index)
0196                     }
0197                 ]
0198
0199                 implicitWidth: root.cellWidth
0200                 implicitHeight: visible ? root.cellHeight : 0
0201
0202                 anchors.horizontalCenter: parent.horizontalCenter
0203                 anchors.verticalCenter: parent.verticalCenter
0204
0205                 states: [
0206                     State {
0207                         when: appDelegate.drag.active
0208                         ParentChange {
0209                             target: appDelegate
0210                             parent: root
0211                         }
0212
0213                         AnchorChanges {
0214                             target: appDelegate
0215                             anchors.horizontalCenter: undefined
0216                             anchors.verticalCenter: undefined
0217                         }
0218                     }
0219                 ]
0220             }
0221         }
0222     }
0223
0224     // animations
0225     displaced: Transition {
0226         NumberAnimation {
0227             properties: "x,y"
0228             easing.type: Easing.OutQuad
0229         }
0230     }
0231 }