FabMenuItem.qml

Go to the documentation of this file.

// SPDX-FileCopyrightText: 2026 Pier Luigi Fiorini <pierluigi.fiorini@gmail.com>
// SPDX-License-Identifier: MPL-2.0
 
pragma ComponentBehavior: Bound
 
import QtQuick
import QtQuick.Templates as T
import Fluid as MD
import "../core/UiMetrics.js" as UiMetrics
import "../internal/MotionAnimation.js" as MotionAnimation
 
T.AbstractButton {
    id: control
 
    property MD.FabMenu menu: null
 
    property int staggerIndex: 0
 
    property color containerColor: control.menu ? control.menu.itemContainerColor : control.MD.Style.primaryContainerColor
 
    property color contentColor: control.menu ? control.menu.itemContentColor : control.MD.Style.onPrimaryContainerColor
 
    readonly property color effectiveContainerColor: control.containerColor
 
    readonly property color effectiveContentColor: control.contentColor
 
    readonly property bool _hasNamedIcon: icon.name.length > 0
 
    readonly property bool _hasSourceIcon: icon.source.toString().length > 0
 
    readonly property bool _hasIcon: _hasNamedIcon || _hasSourceIcon
 
    readonly property real _contentOpacity: enabled ? 1 : MD.Tokens.fabMenu.disabledContentOpacity
 
    readonly property bool _animated: menu !== null
 
    readonly property int _entranceOrder: control._animated && control.menu._entranceDirection > 0 ? Math.max(0, control.menu.contentChildren.length - 1 - control.staggerIndex) : control.staggerIndex
 
    readonly property real _collapsedScale: 0.8
 
    readonly property real _collapsedOffsetFactor: 0.5
 
    readonly property real _collapsedOffset: _animated ? control.height * control._collapsedOffsetFactor * control.menu._entranceDirection : 0
 
    property real _entranceOffset: 0
 
    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitContentWidth + leftPadding + rightPadding)
    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitContentHeight + topPadding + bottomPadding)
 
    leftInset: 0
    rightInset: 0
    topInset: 0
    bottomInset: 0
    leftPadding: mirrored ? MD.Tokens.fabMenu.listItemTrailingSpace : MD.Tokens.fabMenu.listItemLeadingSpace
    rightPadding: mirrored ? MD.Tokens.fabMenu.listItemLeadingSpace : MD.Tokens.fabMenu.listItemTrailingSpace
    topPadding: 0
    bottomPadding: 0
    spacing: MD.Tokens.fabMenu.listItemIconLabelSpace
 
    hoverEnabled: true
    focusPolicy: menu ? Qt.ClickFocus : Qt.StrongFocus
    LayoutMirroring.childrenInherit: true
 
    transform: Translate {
        y: control._entranceOffset
    }
 
    states: [
        State {
            name: "expanded"
            when: control._animated && control.menu.expanded
        },
        State {
            name: "collapsed"
            when: control._animated && !control.menu.expanded
 
            PropertyChanges {
                control.opacity: 0
                control.scale: control._collapsedScale
                control._entranceOffset: control._collapsedOffset
                control.visible: false
            }
        }
    ]
 
    transitions: [
        Transition {
            from: "expanded"
            to: "collapsed"
 
            SequentialAnimation {
                PauseAnimation {
                    duration: control._entranceOrder * MD.Tokens.fabMenu.listItemStaggerDelay
                }
                ParallelAnimation {
                    NumberAnimation {
                        target: control
                        properties: "scale,_entranceOffset"
                        // qmllint disable unresolved-type
                        easing.type: Easing.BezierSpline
                        easing.bezierCurve: MotionAnimation.expressiveFastSpatialCurve
                        duration: MotionAnimation.expressiveFastSpatialDuration
                        // qmllint enable unresolved-type
                    }
                    NumberAnimation {
                        target: control
                        property: "opacity"
                        // qmllint disable unresolved-type
                        easing.type: Easing.BezierSpline
                        easing.bezierCurve: MotionAnimation.expressiveFastEffectsCurve
                        duration: MotionAnimation.expressiveFastEffectsDuration
                        // qmllint enable unresolved-type
                    }
                }
                PropertyAction {
                    target: control
                    property: "visible"
                }
            }
        },
        Transition {
            from: "collapsed"
            to: "expanded"
 
            SequentialAnimation {
                PropertyAction {
                    target: control
                    property: "visible"
                }
                PauseAnimation {
                    duration: control._entranceOrder * MD.Tokens.fabMenu.listItemStaggerDelay
                }
                ParallelAnimation {
                    NumberAnimation {
                        target: control
                        properties: "scale,_entranceOffset"
                        // qmllint disable unresolved-type
                        easing.type: Easing.BezierSpline
                        easing.bezierCurve: MotionAnimation.expressiveFastSpatialCurve
                        duration: MotionAnimation.expressiveFastSpatialDuration
                        // qmllint enable unresolved-type
                    }
                    NumberAnimation {
                        target: control
                        property: "opacity"
                        // qmllint disable unresolved-type
                        easing.type: Easing.BezierSpline
                        easing.bezierCurve: MotionAnimation.expressiveFastEffectsCurve
                        duration: MotionAnimation.expressiveFastEffectsDuration
                        // qmllint enable unresolved-type
                    }
                }
            }
        }
    ]
 
    contentItem: Item {
        id: itemContent
 
        readonly property real leadingWidth: iconSlot.visible ? iconSlot.width + control.spacing : 0
 
        implicitWidth: leadingWidth + label.implicitWidth
        implicitHeight: Math.max(MD.Tokens.fabMenu.listItemIconSize, label.implicitHeight)
 
        Row {
            anchors.fill: parent
            spacing: control.spacing
            LayoutMirroring.enabled: control.mirrored
            LayoutMirroring.childrenInherit: true
 
            Item {
                id: iconSlot
                objectName: "fabMenuItemIcon"
 
                anchors.verticalCenter: parent.verticalCenter
                width: MD.Tokens.fabMenu.listItemIconSize
                height: MD.Tokens.fabMenu.listItemIconSize
                visible: control._hasIcon
 
                Image {
                    anchors.fill: parent
                    source: control.icon.source
                    sourceSize: Qt.size(width, height)
                    fillMode: Image.PreserveAspectFit
                    opacity: control._contentOpacity
                    visible: control._hasSourceIcon
                }
 
                MD.Symbol {
                    anchors.centerIn: parent
                    name: control.icon.name
                    iconWidth: MD.Tokens.fabMenu.listItemIconSize
                    iconHeight: MD.Tokens.fabMenu.listItemIconSize
                    color: control.effectiveContentColor
                    opacity: control._contentOpacity
                    visible: !control._hasSourceIcon && control._hasNamedIcon
                }
            }
 
            MD.Label {
                id: label
                objectName: "fabMenuItemLabel"
 
                width: Math.max(0, itemContent.width - itemContent.leadingWidth)
                anchors.verticalCenter: parent.verticalCenter
                text: control.text
                // qmllint disable unresolved-type
                typescale: MD.Tokens.typescale.titleMedium
                // qmllint enable unresolved-type
                color: control.effectiveContentColor
                opacity: control._contentOpacity
                horizontalAlignment: control.mirrored ? Text.AlignRight : Text.AlignLeft
                elide: Text.ElideRight
            }
        }
    }
 
    background: MD.ElevationRectangle {
        implicitHeight: MD.Tokens.fabMenu.listItemContainerHeight
        topLeftRadius: UiMetrics.resolveShapeRadius(
                               MD.Tokens.fabMenu.listItemContainerShape.topLeft, width, height)
        topRightRadius: UiMetrics.resolveShapeRadius(
                                MD.Tokens.fabMenu.listItemContainerShape.topRight, width, height)
        bottomLeftRadius: UiMetrics.resolveShapeRadius(
                                  MD.Tokens.fabMenu.listItemContainerShape.bottomLeft, width, height)
        bottomRightRadius: UiMetrics.resolveShapeRadius(
                                   MD.Tokens.fabMenu.listItemContainerShape.bottomRight, width,
                                   height)
        color: control.effectiveContainerColor
        elevation: MD.Tokens.fabMenu.listItemContainerElevation
 
        MD.Ripple {
            objectName: "fabMenuItemRipple"
 
            anchors.fill: parent
            topLeftRadius: parent.topLeftRadius
            topRightRadius: parent.topRightRadius
            bottomLeftRadius: parent.bottomLeftRadius
            bottomRightRadius: parent.bottomRightRadius
            pressed: control.pressed
            pressX: control.pressX
            pressY: control.pressY
            color: control.effectiveContentColor
            stateOpacity: {
                if (!control.enabled)
                    return 0;
                if (control.pressed)
                    return MD.Tokens.fabMenu.pressedStateLayerOpacity;
                if (control.visualFocus)
                    return MD.Tokens.fabMenu.focusStateLayerOpacity;
                if (control.hovered)
                    return MD.Tokens.fabMenu.hoverStateLayerOpacity;
                return 0;
            }
        }
    }
}