FAB.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
 
T.ToolButton {
    id: control
 
    enum Size {
        Default,
        Medium,
        Large
    }
 
    enum Variant {
        Surface,
        Primary,
        Secondary,
        Tertiary
    }
 
    property int size: FAB.Size.Default
 
    property int variant: FAB.Variant.Primary
 
    property bool lowered: false
 
    property bool mirrorIconInRtl: false
 
    property color containerColor: {
        switch (variant) {
        case FAB.Variant.Surface:
            return lowered ? control.MD.Style.surfaceContainerLowColor : control.MD.Style.surfaceContainerHighColor;
        case FAB.Variant.Primary:
            return control.MD.Style.primaryContainerColor;
        case FAB.Variant.Secondary:
            return control.MD.Style.secondaryContainerColor;
        case FAB.Variant.Tertiary:
            return control.MD.Style.tertiaryContainerColor;
        }
    }
 
    property color contentColor: {
        switch (variant) {
        case FAB.Variant.Surface:
            return control.MD.Style.primaryColor;
        case FAB.Variant.Primary:
            return control.MD.Style.onPrimaryContainerColor;
        case FAB.Variant.Secondary:
            return control.MD.Style.onSecondaryContainerColor;
        case FAB.Variant.Tertiary:
            return control.MD.Style.onTertiaryContainerColor;
        }
    }
 
    readonly property color effectiveContentColor: state.contentColor
 
    readonly property color effectiveContainerColor: state.containerColor
 
    readonly property real effectiveElevation: state.elevation
 
    readonly property string effectiveIconName: icon.name
 
    readonly property url effectiveIconSource: icon.source
 
    readonly property color effectiveIconColor: icon.color.a > 0 ? icon.color : effectiveContentColor
 
    readonly property bool effectiveIconMirrored: mirrorIconInRtl && mirrored
 
    icon.width: state.iconSize
    icon.height: state.iconSize
 
    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
    padding: 0
    spacing: 0
 
    hoverEnabled: true
    focusPolicy: Qt.StrongFocus
 
    Accessible.name: text
    Accessible.role: Accessible.Button
 
    QtObject {
        id: state
 
        readonly property real containerWidth: {
            switch (control.size) {
            case FAB.Size.Default:
                return MD.Tokens.fab.containerWidth;
            case FAB.Size.Medium:
                return MD.Tokens.fab.mediumContainerWidth;
            case FAB.Size.Large:
                return MD.Tokens.fab.largeContainerWidth;
            }
        }
        readonly property real containerHeight: {
            switch (control.size) {
            case FAB.Size.Default:
                return MD.Tokens.fab.containerHeight;
            case FAB.Size.Medium:
                return MD.Tokens.fab.mediumContainerHeight;
            case FAB.Size.Large:
                return MD.Tokens.fab.largeContainerHeight;
            }
        }
        readonly property MD.shapeValue containerShape: {
            switch (control.size) {
            case FAB.Size.Default:
                return MD.Tokens.fab.containerShape;
            case FAB.Size.Medium:
                return MD.Tokens.fab.mediumContainerShape;
            case FAB.Size.Large:
                return MD.Tokens.fab.largeContainerShape;
            }
        }
        readonly property real iconSize: {
            switch (control.size) {
            case FAB.Size.Default:
                return MD.Tokens.fab.iconSize;
            case FAB.Size.Medium:
                return MD.Tokens.fab.mediumIconSize;
            case FAB.Size.Large:
                return MD.Tokens.fab.largeIconSize;
            }
        }
 
        property color containerColor: control.containerColor
        property color contentColor: control.contentColor
        property color stateLayerColor: "transparent"
 
        property real elevation: control.lowered ? MD.Tokens.fab.loweredContainerElevation : MD.Tokens.fab.containerElevation
        property real stateLayerOpacity: 0
    }
 
    states: [
        State {
            name: "pressed"
            when: control.down && control.enabled
 
            PropertyChanges {
                state.elevation: control.lowered ? MD.Tokens.fab.loweredPressedContainerElevation : MD.Tokens.fab.pressedContainerElevation
                state.stateLayerColor: control.effectiveIconColor
                state.stateLayerOpacity: MD.Tokens.fab.pressedStateLayerOpacity
            }
        },
        State {
            name: "focused"
            when: control.visualFocus && control.enabled
 
            PropertyChanges {
                state.elevation: control.lowered ? MD.Tokens.fab.loweredFocusContainerElevation : MD.Tokens.fab.focusContainerElevation
                state.stateLayerColor: control.effectiveIconColor
                state.stateLayerOpacity: MD.Tokens.fab.focusStateLayerOpacity
            }
        },
        State {
            name: "hovered"
            when: control.hovered && control.enabled
 
            PropertyChanges {
                state.elevation: control.lowered ? MD.Tokens.fab.loweredHoverContainerElevation : MD.Tokens.fab.hoverContainerElevation
                state.stateLayerColor: control.effectiveIconColor
                state.stateLayerOpacity: MD.Tokens.fab.hoverStateLayerOpacity
            }
        }
    ]
 
    contentItem: Item {
        id: iconContent
 
        implicitWidth: control.icon.width
        implicitHeight: control.icon.height
 
        transform: Scale {
            origin.x: iconContent.width / 2
            origin.y: iconContent.height / 2
            xScale: control.effectiveIconMirrored ? -1 : 1
        }
 
        Image {
            id: sourceIcon
 
            objectName: "fabSourceImage"
            anchors.centerIn: parent
            width: control.icon.width
            height: control.icon.height
            source: control.effectiveIconSource
            sourceSize: Qt.size(control.icon.width, control.icon.height)
            fillMode: Image.PreserveAspectFit
            visible: control.effectiveIconSource.toString().length > 0
        }
 
        MD.Symbol {
            objectName: "fabSymbol"
            anchors.centerIn: parent
            name: control.effectiveIconName
            iconWidth: control.icon.width
            iconHeight: control.icon.height
            color: control.effectiveIconColor
            visible: control.effectiveIconSource.toString().length === 0 && name.length > 0
        }
    }
 
    background: MD.ElevationRectangle {
        implicitWidth: state.containerWidth
        implicitHeight: state.containerHeight
        topLeftRadius: UiMetrics.resolveShapeRadius(state.containerShape.topLeft, width, height)
        topRightRadius: UiMetrics.resolveShapeRadius(state.containerShape.topRight, width, height)
        bottomLeftRadius: UiMetrics.resolveShapeRadius(state.containerShape.bottomLeft, width, height)
        bottomRightRadius: UiMetrics.resolveShapeRadius(state.containerShape.bottomRight, width,
                                                        height)
        color: state.containerColor
        elevation: state.elevation
 
        MD.Ripple {
            objectName: "fabRipple"
            anchors.fill: parent
            topLeftRadius: parent.topLeftRadius
            topRightRadius: parent.topRightRadius
            bottomLeftRadius: parent.bottomLeftRadius
            bottomRightRadius: parent.bottomRightRadius
            pressed: control.pressed
            pressX: control.pressX
            pressY: control.pressY
            stateOpacity: state.stateLayerOpacity
            color: state.stateLayerColor
        }
    }
}