pay/guis/mobile/Page.qml

/*
 * This file is part of the Flowee project
 * Copyright (C) 2022-2025 Tom Zander <tom@flowee.org>
 *
 * 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 <http://www.gnu.org/licenses/>.
 */
import QtQuick
import QtQuick.Controls.Basic as QQC2
import QtQuick.Layouts
import "../Flowee" as Flowee

QQC2.Control {
    id: root

    width: parent == null ? 10 : parent.width
    height: parent == null ? 10 : parent.height

    background: Rectangle {
        color: palette.light
    }

    leftPadding: fullScreen ? 0 : Pay.screenInsets.x + 10
    rightPadding: fullScreen ? 0 : Pay.screenInsets.width + 10
    topPadding: header.height
    bottomPadding: fullScreen ? 0 : Pay.screenInsets.height
    wheelEnabled: true // eat wheel events

    default property alias content: focusScope.children
    property alias headerText: headerLabel.text
    property alias headerButtonVisible: headerButton.visible
    property alias headerButtonText: headerButton.text
    property alias headerButtonEnabled: headerButton.enabled
    /*
     * Enable this to remove all insets and the header that
     * are normally added by the Page to surround child content.
     * Please do take care to honor Pay.ScreenInsets yourself if
     * you set this to true.
     */
    property bool fullScreen: false // TODO rename
    /**
     * A list of action objects to populate the menu with
     * Setting this will make a hamburger button show up in the header
     */
    property var menuItems: [ ]
    signal headerButtonClicked

    /**
     * Handler called when the 'back' button in the page header is called.
     * Replace this with your own function if the inheriting page needs to
     * do something diffrent.
     * Notice that you likely to call `thePile.pop()` from your handler.
     */
    property var backHandler: function handler() { thePile.pop() }

    /**
     * Returns the actual available height to the page.
     * Due to us using the default property concept, classes inheriting from
     * this Page will not be able to use 'height' in a useful way as that doesn't
     * account for things like the header. Giving them a too large number.
     * This provides a simple way for inheriting users to get the available space.
     */
    property alias pageHeight: focusScope.height

    function takeFocus() {
        focusScope.forceActiveFocus()
    }
    function closeHeaderMenu() {
        headerMenu.close()
    }

    onMenuItemsChanged: {
        // remove old ones first
        while (headerMenu.count > 0) {
            headerMenu.takeItem(0)
        }
        // set new ones
        for (let i = 0; i < menuItems.length; ++i) {
            headerMenu.addAction(menuItems[i])
        }
    }

    Rectangle {
        id: header
        width: parent.width
        height: root.fullScreen ? 0 : (Pay.screenInsets.y + 50)
        color: Pay.useDarkSkin ? palette.window : mainWindow.floweeBlue
        visible: !root.fullScreen

        gradient: Gradient {
            GradientStop { position: 0.9; color: header.color }
            GradientStop { position: 1; color: {
                    let c = header.color
                    return Qt.rgba(c.r, c.g, c.b, 0)
                }
            }
        }
        Item {
            id: headerContent // header without all the insets
            height: parent.height - Pay.screenInsets.y
            anchors.bottom: parent.bottom
            x: Pay.screenInsets.x
            width: parent.width - x - Pay.screenInsets.width
        }
        Image {
            id: backButton
            x: headerContent.x + 13
            source: "qrc:/back-arrow.svg"
            width: 20 * 1.1
            height: 15 * 1.1
            anchors.verticalCenter: headerContent.verticalCenter
            MouseArea {
                anchors.fill: parent
                anchors.margins: -15
                onClicked: root.backHandler()
            }
        }

        QQC2.Label {
            id: headerLabel
            color: "white"
            anchors.centerIn: headerContent
        }

        Flowee.Button {
            id: headerButton
            visible: false
            anchors.right: headerContent.right
            anchors.rightMargin: 10
            anchors.verticalCenter: headerContent.verticalCenter
            onClicked: root.headerButtonClicked()
        }
        Flowee.HamburgerMenu {
            id: hamburgerMenu
            visible: root.menuItems.length > 0
            anchors.right: headerContent.right
            anchors.rightMargin: 15
            anchors.verticalCenter: headerContent.verticalCenter
            color: "white"
            MouseArea {
                anchors.fill: parent
                anchors.margins: -15
                onClicked: headerMenu.open()
            }
            QQC2.Menu {
                id: headerMenu
            }
        }
    }

    contentItem: FocusScope {
        id: focusScope
    }
}