illogical-impulse/.config/quickshell/modules/common/widgets/FloatingActionButton.qml

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import "root:/modules/common/"
import "root:/modules/common/widgets/"

/**
 * Material 3 FAB.
 */
RippleButton {
    id: root
    property string iconText: "add"
    property bool expanded: false
    property real baseSize: 50
    property real elementSpacing: 5
    implicitWidth: Math.max(contentRowLayout.implicitWidth + 10 * 2, baseSize)
    implicitHeight: baseSize
    buttonRadius: Appearance.rounding.small
    colBackground: Appearance.colors.colSecondaryContainer
    colBackgroundHover: Appearance.colors.colSecondaryContainerHover
    colRipple: Appearance.colors.colSecondaryContainerActive
    contentItem: RowLayout {
        id: contentRowLayout
        property real horizontalMargins: (root.baseSize - icon.width) / 2
        anchors {
            verticalCenter: parent?.verticalCenter
            left: parent?.left
            leftMargin: contentRowLayout.horizontalMargins
        }
        spacing: 0

        MaterialSymbol {
            id: icon
            Layout.fillWidth: true
            horizontalAlignment: Text.AlignHCenter
            iconSize: Appearance.font.pixelSize.huge
            color: Appearance.colors.colOnLayer1
            text: root.iconText
        }
        Revealer {
            visible: root.expanded || implicitWidth > 0
            reveal: root.expanded
            implicitWidth: reveal ? (buttonText.implicitWidth + root.elementSpacing + contentRowLayout.horizontalMargins) : 0
            StyledText {
                id: buttonText
                anchors {
                    left: parent.left
                    leftMargin: root.elementSpacing
                }
                text: root.buttonText
                color: Appearance.colors.colOnLayer1
                font.pixelSize: Appearance.font.pixelSize.small
            }
        }
    }
}