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

SwipeView {
    id: root
    interactive: false
    // 5.15
    // required property AppPageHeader appPageHeader
    // 5.12
    property AppPageHeader appPageHeader: null

    Item {
        id: appListBase
        AppList {
            id: appList
            anchors.fill: parent
            anchors.leftMargin: 4
            onLabelItemClicked: {
                appList.visible = false;
                selectionPage.viewShowStart();
            }
        }

        SelectionPage {
            id: selectionPage
            anchors.fill: parent
            anchors.bottomMargin: 54
            visible: !appList.visible
            onViewHideFinished: appList.visible = true
            onLabelSelected: appList.labelSelection(labelId)
        }
    }

    Loader {
        id: folderPageLoader
        active: false
        sourceComponent: Component {
            AppListView {
                model: modelManager.getFolderModel()
                delegate: Component {
                    Loader {
                        width: ListView.view ? ListView.view.width : 0; height: 40
                        property string id: model.id
                        property string name: model.name
                        property string icon: model.icon
                        sourceComponent: AppControls2.AppItem {
                            acceptedButtons: Qt.LeftButton | Qt.RightButton
                            onClicked: {
                                if (mouse.button === Qt.RightButton) {
                                    menuManager.showMenu(id);
                                    return;
                                }
                                if (mouse.button === Qt.LeftButton) {
                                    appManager.launchApp(id);
                                    return;
                                }
                            }
                        }
                    }
                }
            }
        }

        function showFolderPage(folderId, folderName) {
            active = true;
            item.model.setFolderId(folderId);
            appPageHeader.title = folderName;
            appPageHeader.content = folderPageHeader;
            root.currentIndex = SwipeView.index;
        }
        function hideFolderPage() {
            root.currentIndex = appListBase.SwipeView.index;
            appPageHeader.title = appList.title;
            appPageHeader.content = null;
            //active = false;
        }

        Component.onCompleted: {
            appList.openFolderPageSignal.connect(showFolderPage);
        }
    }

    Component {
        id: folderPageHeader
        Item {
            RowLayout {
                anchors.fill: parent
                anchors.leftMargin: 12
                anchors.rightMargin: 30
                spacing: 2

                ThemeIcon {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Layout.maximumWidth: 16
                    Layout.maximumHeight: 16
                    Layout.alignment: Qt.AlignVCenter
                    source: "image://appicon/ukui-start-symbolic"
                    MouseArea {
                        anchors.fill: parent
                        onClicked: folderPageLoader.hideFolderPage();
                    }
                }

                AppControls2.StyleBackground {
                    Layout.fillWidth: true
                    Layout.fillHeight: true

                    radius: 6
                    alpha: folderText.activeFocus ? 0.04 : 0
                    useStyleTransparent: false
                    paletteRole: Palette.Text
                    border.width: 2
                    borderAlpha: folderText.activeFocus ? 1 : 0
                    borderColor: Palette.Highlight

                    TextInput {
                        id: folderText
                        clip: true
                        font.pixelSize: 14
                        focus: false
                        anchors.left: parent.left
                        anchors.leftMargin: 8
                        anchors.right: buttonMouseArea.left
                        anchors.rightMargin: 8
                        anchors.verticalCenter: parent.verticalCenter
                        activeFocusOnPress: false
                        verticalAlignment: Text.AlignVCenter
                        text: title
                        selectByMouse: true
                        maximumLength: 14

                        onEditingFinished: {
                            modelManager.getFolderModel().renameFolder(text);
                            folderText.focus = false;
                            folderText.z = 0;
                        }

                        function updateTextInputColor() {
                            color = themePalette.paletteColor(Palette.Text);
                            selectionColor = themePalette.paletteColor(Palette.Highlight);
                        }

                        Component.onCompleted: {
                            updateTextInputColor();
                            themePalette.styleColorChanged.connect(updateTextInputColor);
                        }

                        Component.onDestruction: themePalette.styleColorChanged.disconnect(updateTextInputColor);

                    }

                    MouseArea {
                        id: textArea
                        anchors.fill: folderText
                        onDoubleClicked: {
                            forceActiveFocus();
                            folderText.focus = true;
                            folderText.z = 2;
                        }
                    }

                    MouseArea {
                        id: buttonMouseArea
                        hoverEnabled: true
                        width: 16; height: width
                        anchors.right: parent.right
                        anchors.rightMargin: 10
                        anchors.verticalCenter: parent.verticalCenter
                        visible: folderText.activeFocus

                        ThemeIcon {
                            anchors.centerIn: parent
                            width: 16; height: width
                            source: "image://appicon/edit-clear-symbolic"
                        }

                        onClicked: {
                            folderText.text = title;
                            folderText.focus = false;
                            folderText.z = 0;
                        }
                    }
                }
            }
        }
    }
}