ukui-menu/qml/extensions/FullScreenFolder.qml

/*
 * Copyright (C) 2023, KylinSoft Co., Ltd.
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 *
 */

import QtQuick 2.0
import QtQml.Models 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.5
import org.ukui.menu.core 1.0
import org.ukui.quick.platform 1.0 as Platform
import org.ukui.quick.items 1.0 as UkuiItems

Loader {
    id: root
    active: false
    property var folderModel
    property string folderName: ""
    property int folderX: 0
    property int folderY: 0
    property int viewMaxRow: 0
    property bool isFolderOpened: false

    property bool isFullScreen: true
    property int margins: isFullScreen? 20 : 0
    property int animationDuration: 300
    signal turnPageFinished()

    function initFolder(id, name, x, y) {
        extensionData.folderModel.setFolderId(id);
        folderName = name;
        folderX = x;
        folderY = y;
        viewMaxRow = Math.ceil(folderModel.count / 4) > 4 ? 4 : Math.ceil(folderModel.count / 4);
        active = true;
        isFolderOpened = true;
    }

    sourceComponent: folderComponent

    Component {
        id: folderComponent
        Item {
            UkuiItems.StyleBackground {
                id: folderIconBase
                paletteRole: Platform.Theme.Text
                useStyleTransparency: false
                property int folderIconSize: 0
                property int iconSpacing: 0
                property int imageX: 0
                property int imageY: 0
                property int gridViewMargin: 8
                alpha: 0.25

                state: isFolderOpened ? "folderOpened" : "folderHidden"
                states: [
                    State {
                        name: "folderOpened"
                        PropertyChanges {
                            target: folderIconBase
                            width: isFullScreen ? 720 : 348
                            height: isFullScreen ? (viewMaxRow * 170 + margins * 2) : (viewMaxRow * 85 + margins * 2)
                            radius: Platform.Theme.maxRadius
                            gridViewMargin: margins
                            x: isFullScreen ? (parent.width - width) / 2 : 56
                            y: isFullScreen ? (parent.height - height) / 2 : 104
                            // 内部图标尺寸和布局
                            folderIconSize:isFullScreen ? 96 : 48
                            iconSpacing: 8
                            imageX: isFullScreen ? 37 : 13
                            imageY: isFullScreen ? 17 : 8
                        }
                        PropertyChanges { target: folderNameText; opacity: 1 }
                    },
                    State {
                        name: "folderHidden"
                        PropertyChanges {
                            target: folderIconBase
                            width: 86
                            height: 86
                            radius: Platform.Theme.maxRadius
                            gridViewMargin: 8
                            x: root.mapFromGlobal(folderX, 0).x
                            y: root.mapFromGlobal(0, folderY).y
                            // 内部图标尺寸和布局
                            folderIconSize: 16
                            iconSpacing: 0
                            imageX: 0
                            imageY: 0
                        }
                        PropertyChanges { target: folderNameText; opacity: 0 }
                    }
                ]
                transitions: [
                    Transition {
                        to: "folderHidden"
                        SequentialAnimation {
                            ScriptAction { script: content.mouseEnable = false }
                            ParallelAnimation {
                                PropertyAnimation {
                                    duration: animationDuration; easing.type: Easing.InOutCubic
                                    properties: "x, y, width, height, folderIconSize, iconSpacing, radius, imageX, imageY, gridViewMargin"
                                }
                                PropertyAnimation {
                                    duration: animationDuration; easing.type: Easing.OutQuint
                                    properties: "opacity"
                                }
                            }
                            ScriptAction { script: content.folderSwipeView.hideFolder() }
                        }
                    },
                    Transition {
                        to: "folderOpened"
                        SequentialAnimation {
                            ParallelAnimation {
                                PropertyAnimation {
                                    duration: animationDuration; easing.type: Easing.InOutCubic
                                    properties: "x, y, width, height, folderIconSize, iconSpacing, radius, imageX, imageY, gridViewMargin"
                                }
                                PropertyAnimation {
                                    duration: animationDuration; easing.type: Easing.InQuint
                                    properties: "opacity"
                                }
                            }
                            ScriptAction {
                                script: {
                                    content.folderSwipeView.contentItem.highlightMoveDuration = 0;
                                    content.mouseEnable = true
                                }
                            }
                        }
                    }
                ]
                FolderContent {
                    id: content
                    anchors.fill: parent
                    folderContentModel: folderModel
                    contentMargins: folderIconBase.gridViewMargin
                    labelMagrins: isFullScreen ? 16 : 8
                }
            }

            EditText {
                id: folderNameText
                anchors.bottom: folderIconBase.top
                anchors.bottomMargin: 30
                anchors.horizontalCenter: folderIconBase.horizontalCenter
                height: 47; width: folderIconBase.width
                textEdited: folderName
                textCenterIn: true
                isFolder: true
                isFullScreen: isFullScreen
            }
        }
    }

}