status-desktop/ui/shared/PopupMenu.qml

import QtQuick 2.13
import QtQuick.Controls 2.13
import QtGraphicalEffects 1.13
import "../imports"
import "../shared"

Menu {
    // This is to add icons to submenu items. QML doesn't have a way to add icons to those sadly so this is a workaround
    property var subMenuIcons: []
    property int paddingSize: 8
    property bool hasArrow: true
    closePolicy: Popup.CloseOnPressOutside | Popup.CloseOnReleaseOutside | Popup.CloseOnEscape 
    id: popupMenu
    topPadding: paddingSize
    bottomPadding: paddingSize

    delegate: MenuItem {
        property color textColor: this.action.icon.color.toString() !== "#00000000" ? this.action.icon.color : Style.current.textColor
        property int subMenuIndex: {
            if (!this.subMenu) {
                return -1
            }

            let child;
            let index = 0;
            for (let i = 0; i < popupMenu.count; i++) {
                child = popupMenu.itemAt(i)
                if (child.subMenu) {
                    if (child === this) {
                        return index
                    } else {
                        index++;
                    }
                }
            }
            return index
        }

        enabled: {
            if (this.subMenu) {
                return this.subMenu.enabled
            }
            return this.action.enabled
        }
        action: Action{} // Meant to be overwritten
        id: popupMenuItem
        implicitWidth: 200
        implicitHeight: 34
        font.pixelSize: 13
        font.weight: checked ? Font.Medium : Font.Normal
        icon.color: popupMenuItem.action.icon.color != "#00000000" ? popupMenuItem.action.icon.color : Style.current.blue
        icon.source: this.subMenu ? subMenuIcons[subMenuIndex].source : popupMenuItem.action.icon.source
        icon.width: this.subMenu ? subMenuIcons[subMenuIndex].width : popupMenuItem.action.icon.width
        icon.height: this.subMenu ? subMenuIcons[subMenuIndex].height : popupMenuItem.action.icon.height
        visible: enabled
        height: visible ? popupMenuItem.implicitHeight : 0

        arrow: SVGImage {
            source: "../app/img/caret.svg"
            rotation: -90
            anchors.verticalCenter: parent.verticalCenter
            anchors.right: parent.right
            anchors.rightMargin: 12
            width: 9
            fillMode: Image.PreserveAspectFit
            visible: popupMenuItem.subMenu && popupMenuItem.subMenu.enabled
            
            ColorOverlay {
                anchors.fill: parent
                source: parent
                color: popupMenuItem.textColor
            }
        }

        // FIXME the icons looks very pixelated on Linux for some reason. Using smooth, mipmap, etc doesn't fix it
        indicator: Item {
            visible: !!popupMenuItem.icon.source.toString()
            width: !isNaN(popupMenuItem.icon.width) ? popupMenuItem.icon.width : 25
            height: !isNaN(popupMenuItem.icon.height) ? popupMenuItem.icon.height : 25
            anchors.left: parent.left
            anchors.leftMargin: Style.current.padding
            anchors.verticalCenter: parent.verticalCenter

            Image {
                id: menuIcon
                source: popupMenuItem.icon.source    
                visible: false
                width: parent.width
                height: parent.width
                sourceSize.width: width
                sourceSize.height: height
            }

            ColorOverlay {
                anchors.fill: menuIcon
                source: menuIcon
                smooth: true
                color: (popupMenuItem.action.icon.color != "#00000000" ? popupMenuItem.action.icon.color : Style.current.primaryMenuItemHover)
            }
        }

        contentItem: StyledText {
            anchors.left: popupMenuItem.indicator.right
            anchors.leftMargin: popupMenu.paddingSize
            text: popupMenuItem.text
            font: popupMenuItem.font
            color: popupMenuItem.textColor
            horizontalAlignment: Text.AlignLeft
            verticalAlignment: Text.AlignVCenter
            opacity: enabled ? 1.0 : 0.3
            elide: Text.ElideRight
        }

        background: Rectangle {
            implicitWidth: 220
            implicitHeight: enabled ? 24 : 0
            color: popupMenuItem.highlighted ? Style.current.backgroundHover : "transparent"
        }
    }

    background: Item {
        id: bgPopupMenu
        implicitWidth: 220

        Rectangle {
            id: bgPopupMenuContent
            implicitWidth: bgPopupMenu.width
            implicitHeight: bgPopupMenu.height
            color: Style.current.modalBackground
            radius: 8
            layer.enabled: true
            layer.effect: DropShadow{
                width: bgPopupMenuContent.width
                height: bgPopupMenuContent.height
                x: bgPopupMenuContent.x
                visible: bgPopupMenuContent.visible
                source: bgPopupMenuContent
                horizontalOffset: 0
                verticalOffset: 4
                radius: 12
                samples: 25
                spread: 0.2
                color: "#22000000"
            }
        }
    }
}

/*##^##
Designer {
    D{i:0;autoSize:true;height:480;width:640}
}
##^##*/