GlobalDrawer.qml

/*
 *   Copyright 2015 Marco Martin <mart@kde.org>
 *
 *   This program is free software; you can redistribute it and/or modify
 *   it under the terms of the GNU Library General Public License as
 *   published by the Free Software Foundation; either version 2, 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 Library General Public License for more details
 *
 *   You should have received a copy of the GNU Library General Public
 *   License along with this program; if not, write to the
 *   Free Software Foundation, Inc.,
 *   51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 */

import QtQuick 2.1
import QtQuick.Controls 1.4 as Controls
import QtQuick.Layouts 1.2
import QtGraphicalEffects 1.0
import org.kde.kirigami 1.0

import "private"

OverlayDrawer {
    id: root
    edge: Qt.LeftEdge

    property alias title: heading.text

    property alias titleIcon: headingIcon.source

    property alias bannerImageSource: bannerImage.source

    property list<QtObject> actions


    default property alias content: mainContent.data

    property alias topContent: topContent.data

    property bool resetMenuOnTriggered: true

    readonly property Action currentSubMenu: stackView.currentItem ? stackView.currentItem.current: null

    signal bannerClicked()

    
    function resetMenu() {
        stackView.pop(stackView.initialItem);
        if (root.modal) {
            root.opened = false;
        }
    }

    contentItem: Controls.ScrollView {
        id: scrollView
        anchors.fill: parent
        implicitWidth: Math.min (Units.gridUnit * 20, root.parent.width * 0.8)
        horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
        Flickable {
            id: mainFlickable
            contentWidth: width
            contentHeight: mainColumn.Layout.minimumHeight
            ColumnLayout {
                id: mainColumn
                width: mainFlickable.width
                spacing: 0
                height: Math.max(root.height, Layout.minimumHeight)

                Image {
                    id: bannerImage

                    Layout.fillWidth: true

                    Layout.preferredWidth: title.implicitWidth
                    Layout.preferredHeight: bannerImageSource != "" ? Math.max(title.implicitHeight, Math.floor(width / (sourceSize.width/sourceSize.height))) : title.implicitHeight
                    Layout.minimumHeight: Math.max(headingIcon.height, heading.height) + Units.smallSpacing * 2

                    MouseArea {
                        anchors.fill: parent
                        onClicked: root.bannerClicked()
                    }

                    fillMode: Image.PreserveAspectCrop
                    asynchronous: true

                    anchors {
                        left: parent.left
                        right: parent.right
                        top: parent.top
                    }

                    EdgeShadow {
                        edge: Qt.BottomEdge
                        visible: bannerImageSource != ""
                        anchors {
                            left: parent.left
                            right: parent.right
                            bottom: parent.top
                        }
                    }
                    LinearGradient {
                        anchors {
                            left: parent.left
                            right: parent.right
                            top: parent.top
                        }
                        visible: bannerImageSource != ""
                        height: title.height * 1.3
                        start: Qt.point(0, 0)
                        end: Qt.point(0, height)
                        gradient: Gradient {
                            GradientStop {
                                position: 0.0
                                color: Qt.rgba(0, 0, 0, 0.8)
                            }
                            GradientStop {
                                position: 1.0
                                color: "transparent"
                            }
                        }
                    }

                    RowLayout {
                        id: title
                        anchors {
                            left: parent.left
                            top: parent.top
                            margins: Units.smallSpacing * 2
                        }
                        Icon {
                            id: headingIcon
                            Layout.minimumWidth: Units.iconSizes.large
                            Layout.minimumHeight: width
                        }
                        Heading {
                            id: heading
                            Layout.fillWidth: true
                            Layout.rightMargin: heading.height
                            level: 1
                            color: bannerImageSource != "" ? "white" : Theme.textColor
                            elide: Text.ElideRight
                        }
                    }
                }

                ColumnLayout {
                    id: topContent
                    spacing: 0
                    Layout.alignment: Qt.AlignHCenter
                    Layout.leftMargin: root.leftPadding
                    Layout.rightMargin: root.rightPadding
                    Layout.bottomMargin: Units.smallSpacing
                    Layout.topMargin: root.topPadding
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    //NOTE: why this? just Layout.fillWidth: true doesn't seem sufficient
                    //as items are added only after this column creation
                    Layout.minimumWidth: parent.width - root.leftPadding - root.rightPadding
                    visible: children.length > 0 && childrenRect.height > 0
                }

                Controls.StackView {
                    id: stackView
                    Layout.fillWidth: true
                    Layout.minimumHeight: currentItem ? currentItem.implicitHeight : 0
                    Layout.maximumHeight: Layout.minimumHeight
                    initialItem: menuComponent
                }
                Item {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Layout.minimumHeight: Units.smallSpacing
                }

                ColumnLayout {
                    id: mainContent
                    Layout.alignment: Qt.AlignHCenter
                    Layout.leftMargin: root.leftPadding
                    Layout.rightMargin: root.rightPadding
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    //NOTE: why this? just Layout.fillWidth: true doesn't seem sufficient
                    //as items are added only after this column creation
                    Layout.minimumWidth: parent.width - root.leftPadding - root.rightPadding
                    visible: children.length > 0
                }
                Item {
                    Layout.minimumWidth: Units.smallSpacing
                    Layout.minimumHeight: root.bottomPadding
                }

                Component {
                    id: menuComponent
                    ColumnLayout {
                        spacing: 0
                        property alias model: actionsRepeater.model
                        property Action current

                        property int level: 0
                        Layout.maximumHeight: Layout.minimumHeight


                        BasicListItem {
                            visible: level > 0
                            supportsMouseEvents: true
                            icon: "go-previous"
                            label: qsTr("Back")
                            separatorVisible: false
                            onClicked: stackView.pop()
                        }

                        Repeater {
                            id: actionsRepeater
                            model: actions
                            delegate: BasicListItem {
                                id: listItem
                                supportsMouseEvents: true
                                checked: modelData.checked
                                icon: modelData.iconName
                                label: modelData.text
                                separatorVisible: false
                                visible: model ? model.visible || model.visible===undefined : modelData.visible
                                enabled: model ? model.enabled : modelData.enabled
                                opacity: enabled ? 1.0 : 0.3
                                Icon {
                                    anchors {
                                        verticalCenter: parent.verticalCenter
                                        right: parent.right
                                    }
                                    height: Units.iconSizes.smallMedium
                                    selected: listItem.checked || listItem.pressed
                                    width: height
                                    source: "go-next"
                                    visible: modelData.children!==undefined && modelData.children.length > 0
                                }

                                onClicked: {
                                    modelData.trigger();

                                    if (modelData.children!==undefined && modelData.children.length > 0) {
                                        stackView.push(menuComponent, {model: modelData.children, level: level + 1, current: modelData });
                                    } else if (root.resetMenuOnTriggered) {
                                        root.resetMenu();
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}