ukui-menu/qml/AppUI/FullScreenContent.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 QtQml.Models 2.12
import QtQuick.Controls 2.5
import org.ukui.menu.core 1.0
import AppControls2 1.0 as AppControls2

RowLayout {
    clip: true
    spacing: 0

    Item {
        Layout.preferredWidth: 90
        Layout.fillHeight: true

        ListView {
            id: labelListView
            signal labelClicked(string labelId)

            anchors.centerIn: parent
            width: parent.width
            height: contentHeight > parent.height ? parent.height : contentHeight
            interactive: contentHeight > parent.height
            spacing: 5
            model: DelegateModel {
                groups: DelegateModelGroup {
                    name: "disabledItem"
                    includeByDefault: false
                }

                items.onChanged: {
                    for (let i = 0; i < items.count;) {
                        let item = items.get(i);
                        if (item.model.isDisable) {
                            items.setGroups(i, 1, "disabledItem");
                            continue;
                        }
                        ++i;
                    }
                }

                model: modelManager.getLabelModel()
                delegate: MouseArea {
                    width: ListView.view.width
                    height: 30
                    hoverEnabled: true
                    AppControls2.StyleBackground {
                        anchors.fill: parent
                        radius: 4
                        paletteRole: Palette.Base
                        alpha: parent.containsPress ? 0.36 : parent.containsMouse ? 0.18 : 0
                        useStyleTransparent: false

                        AppControls2.StyleText {
                            anchors.fill: parent
                            paletteRole: Palette.Text
                            elide: Text.ElideRight
                            horizontalAlignment: Text.AlignHCenter
                            text: model.displayName
                        }
                    }
                    onClicked: {
                        labelListView.labelClicked(model.id)
                    }
                }
            }
        }
    }

    Item {
        id: contentViewBase
        Layout.fillWidth: true
        Layout.fillHeight: true

        property int maxColumns: 8
        property int columns: {
            let c = Math.floor(width / cellWidth);
            return c > maxColumns ? maxColumns : c;
        }
        property int cellWidth: 220
        // property int cellWidth: Math.min(Math.floor(width / columns), 220)
        property int cellHeight: cellWidth
        property int headerHeight: 30

        Component.onCompleted: {
            changeView(modelManager.getLabelGroupModel().containLabel);
            modelManager.getLabelGroupModel().containLabelChanged.connect(changeView);
        }

        Component.onDestruction: {
            modelManager.getLabelGroupModel().containLabelChanged.disconnect(changeView);
            contentViewLoader.sourceComponent = undefined;
        }

        function changeView(toLabelView) {
            contentViewLoader.sourceComponent = toLabelView ? labelViewComponent : appViewComponent;
        }

        Loader {
            id: contentViewLoader
            height: parent.height
            width: contentViewBase.cellWidth * contentViewBase.columns + 2
            anchors.horizontalCenter: parent.horizontalCenter
        }

        // view id: 1
        Component {
            id: appViewComponent
            GridView {
                ScrollBar.vertical: fullScreenScrollBar
                cellWidth: contentViewBase.cellWidth
                cellHeight: contentViewBase.cellHeight
                model: modelManager.getAppModel()

                delegate: Loader {
                    width: GridView.view.cellWidth
                    height: width
                    property int index: model.index
                    property int type: model.type
                    property string name: model.name
                    property string icon: model.icon
                    sourceComponent: {
                        if (type === DataType.Normal) {
                            return appComponent;
                        }
                        if (type === DataType.Folder) {
                            return folderComponent;
                        }
                    }
                }

                Component {
                    id: appComponent
                    MouseArea {
                        anchors.centerIn: parent
                        width: 100
                        height: 140
                        AppControls2.IconLabel {
                            anchors.fill: parent
                            iconWidth: 96
                            iconHeight: 96
                            appName: name
                            appIcon: icon
                        }
                        onClicked: {
                            parent.GridView.view.model.appClicked(index);
                        }
                    }
                }

                Component {
                    id: folderComponent
                    Item {
                        MouseArea {
                            anchors.centerIn: parent
                            width: 100; height: 140
                            AppControls2.IconLabel {
                                anchors.fill: parent
                                iconWidth: 96
                                iconHeight: 96
                                appName: name
                                appIcon: icon
                            }
                        }
                    }
                }
            }
        }

        // view id: 2
        Component {
            id: labelViewComponent
            Flickable {
                id: labelViewFlickable
                ScrollBar.vertical: fullScreenScrollBar
                contentHeight: labelColumn.height
                flickableDirection: Flickable.VerticalFlick
                interactive: !contentYAnimation.running

                Column {
                    id: labelColumn
                    width: parent.width
                    height: childrenRect.height
                    Repeater {
                        id: labelRepeater
                        model: modelManager.getLabelGroupModel()
                        delegate: GridView {
                            id: labelAppsGridView
                            width: parent.width
                            height: contentHeight

                            property int labelIndex: index

                            interactive: false
                            cacheBuffer: 50
                            cellWidth: contentViewBase.cellWidth
                            cellHeight: contentViewBase.cellHeight

                            header: Row {
                                width: labelAppsGridView.width
                                height: contentViewBase.headerHeight
                                spacing: 15
                                Text {
                                    id: labelName
                                    anchors.verticalCenter: parent.verticalCenter
                                    verticalAlignment: Text.AlignVCenter
                                    width: contentWidth
                                    text: name
                                }

                                AppControls2.StyleBackground {
                                    anchors.verticalCenter: parent.verticalCenter
                                    paletteRole: Palette.Light
                                    height: 1
                                    width: parent.width - labelName.width - parent.spacing
                                }
                            }

                            model: extraData
                            delegate: Item {
                                width: GridView.view.cellWidth
                                height: GridView.view.cellHeight

                                MouseArea {
                                    anchors.centerIn: parent
                                    width: 100; height: 140
                                    AppControls2.IconLabel {
                                        anchors.fill: parent
                                        iconWidth: 96
                                        iconHeight: 96
                                        appName: modelData.name
                                        appIcon: modelData.icon
                                    }
                                    onClicked: {
                                        //console.log("clicked", Object.keys(model))
                                        labelRepeater.model.openApp(labelAppsGridView.labelIndex, model.index);
                                    }
                                }
                            }
                        }
                    }
                }

                NumberAnimation {
                    id: contentYAnimation
                    target: labelViewFlickable
                    property: "contentY"
                    duration: 300
                    onFinished: {
                        labelViewFlickable.returnToBounds();
                    }
                }

                function scrollerView(labelId) {
                    let labelindex = labelRepeater.model.getLabelIndex(labelId);
                    if (labelindex < 0 || labelindex >= labelRepeater.count) {
                        return;
                    }

                    let nextY = labelRepeater.itemAt(labelindex).y;
                    let sh = labelColumn.height - nextY;
                    if (sh < height) {
                        nextY -= (height - sh);
                    }

                    contentYAnimation.running = false;
                    if (nextY === contentY) {
                        return;
                    }

                    contentYAnimation.from = contentY;
                    contentYAnimation.to = nextY;
                    contentYAnimation.running = true;
                }

                Component.onCompleted: {
                    labelListView.labelClicked.connect(scrollerView);
                }
                Component.onDestruction: {
                    labelListView.labelClicked.disconnect(scrollerView);
                }
            }
        }
    }

    Item {
        Layout.preferredWidth: 48
        Layout.fillHeight: true

        ScrollBar {
            id: fullScreenScrollBar
            anchors.centerIn: parent
            height: 200
            width: (hovered || pressed) ? 8 : 4
            padding: 0
            opacity: fullScreenScrollBar.size < 1.0 ? 1.0 : 0.0

            Behavior on width {
                NumberAnimation { duration: 200; easing.type: Easing.InOutQuad }
            }

            background: AppControls2.StyleBackground {
                useStyleTransparent: false
                paletteRole: Palette.Dark
                alpha: 0.25
                radius: width / 2
            }

            contentItem: AppControls2.StyleBackground {
                radius: width / 2
                useStyleTransparent: false
                paletteRole: Palette.Light
                alpha: fullScreenScrollBar.pressed ? 0.90 : fullScreenScrollBar.hovered ? 0.78 : 0.60
            }
        }
    }
}