ukui-menu/qml/AppUI/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 QtQuick.Layouts 1.12
import org.ukui.menu.core 1.0
import AppControls2 1.0 as AppControls2

Item {
    property alias model: folderGridView.model
    property string folderName: ""
    property int margins: 20
    property int folderX: 0
    property int folderY: 0
    property bool isFolderOpened: false
    property int animationDuration: 300

    AppControls2.StyleBackground {
        id: folderIconBase
        paletteRole: Palette.Text
        useStyleTransparent: false
        property int folderIconSize: 0
        property int iconSpacing: 0
        property int imageX: 0
        property int imageY: 0
        alpha: 0.25

        state: isFolderOpened ? "folderOpened" : "folderHidden"
        states: [
            State {
                name: "folderOpened"
                PropertyChanges {
                    target: folderIconBase
                    width: 720; height: folderGridView.viewMaxHeight; radius: 36
                    x: (parent.width - width) / 2; y: (parent.height - height) / 2
                    folderIconSize: 96; iconSpacing: 8
                    imageX: 37; imageY: 17
                }
                PropertyChanges { target: folderGridView; anchors.margins: margins }
                PropertyChanges { target: folderNameText; opacity: 1 }
            },
            State {
                name: "folderHidden"
                PropertyChanges {
                    target: folderIconBase
                    width: 86; height: width; radius: 16
                    x: parent.parent.mapFromGlobal(folderX, 0).x; y: parent.parent.mapFromGlobal(0, folderY).y
                    folderIconSize: 16; iconSpacing: 0
                    imageX: 0; imageY: 0
                }
                PropertyChanges { target: folderGridView; anchors.margins: 8 }
                PropertyChanges { target: folderNameText; opacity: 0 }
            }
        ]
        transitions: [
            Transition {
                to: "folderHidden"
                SequentialAnimation {
                    ScriptAction { script: folderGridView.positionViewAtBeginning() }
                    ParallelAnimation {
                        PropertyAnimation {
                            duration: animationDuration; easing.type: Easing.InOutCubic
                            properties: "x, y, width, height, folderIconSize, iconSpacing, radius, imageX, imageY, anchors.margins"
                        }
                        PropertyAnimation {
                            duration: animationDuration; easing.type: Easing.OutQuint
                            properties: "opacity"
                        }
                    }
                    ScriptAction { script: parent.active = false }
                }
            },
            Transition {
                to: "folderOpened"
                ParallelAnimation {
                    PropertyAnimation {
                        duration: animationDuration; easing.type: Easing.InOutCubic
                        properties: "x, y, width, height, folderIconSize, iconSpacing, radius, imageX, imageY, anchors.margins"
                    }
                    PropertyAnimation {
                        duration: animationDuration; easing.type: Easing.InQuint
                        properties: "opacity"
                    }
                }
            }
        ]

        GridView {
            id: folderGridView
            anchors.fill: parent
            cellHeight: width / 4; cellWidth: cellHeight
            boundsBehavior: Flickable.StopAtBounds
            property int viewMaxHeight: Math.ceil(count / 4) * 170 > width ? width + margins*2 : (Math.ceil(count / 4) * 170 + margins*2)
            model: modelManager.getFolderModel()
            delegate: MouseArea {
                hoverEnabled: true
                width: GridView.view.cellHeight; height: width
                acceptedButtons: Qt.LeftButton | Qt.RightButton

                AppControls2.StyleBackground {
                    anchors.fill: parent
                    useStyleTransparent: false
                    paletteRole: Palette.Light
                    radius: 16
                    alpha: parent.containsPress ? 0.25 : parent.containsMouse ? 0.15 : 0.00

                    Image {
                        id: iconImage
                        source: icon
                        height: folderIconBase.folderIconSize; width: height
                        x: folderIconBase.imageX; y: folderIconBase.imageY
                    }

                    AppControls2.StyleText {
                        width: parent.width
                        horizontalAlignment: Text.AlignHCenter
                        anchors.top: iconImage.bottom
                        anchors.topMargin: folderIconBase.iconSpacing
                        anchors.horizontalCenter: parent.horizontalCenter
                        text: name
                        font.pixelSize: 14
                        elide: Text.ElideRight
                        paletteRole:  Palette.HighlightedText
                    }
                }
                onClicked: {
                    if (mouse.button === Qt.RightButton) {
                        menuManager.showMenu(id);
                        return;
                    }
                    if (mouse.button === Qt.LeftButton) {
                        appManager.launchApp(id);
                        return;
                    }
                }
            }
        }
    }

    EditText {
        id: folderNameText
        anchors.bottom: folderGridView.parent.top
        anchors.bottomMargin: 30
        anchors.horizontalCenter: folderGridView.parent.horizontalCenter
        height: 47; width: folderGridView.width
        textEdited: folderName
        textCenterIn: true
        isFullScreenFolder: true
    }
}