Badge.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 Fluid.Private as Private
import "../core/BadgeContent.js" as BadgeContent
import "../core/UiMetrics.js" as UiMetrics
 
T.Control {
    id: control
 
    enum Variant { Auto, Small, Large }
 
    property int variant: MD.Badge.Auto
 
    property real count: -1
 
    property string text: ""
 
    property MD.typescale typescale: MD.Tokens.typescale.labelSmall
 
    property color containerColor: control.MD.Style.errorColor
 
    property color contentColor: control.MD.Style.onErrorColor
 
    property string accessibleDescription: _defaultAccessibleDescription
 
    readonly property string _defaultAccessibleDescription: text.length > 0 ? text
        : BadgeContent.isValidCount(count) ? count.toLocaleString(locale, "f", 0)
        : qsTr("New notification")
 
    
    readonly property int effectiveVariant: variant === MD.Badge.Auto
        ? (text.length > 0 || BadgeContent.isValidCount(count) ? MD.Badge.Large : MD.Badge.Small)
        : variant
 
    readonly property string displayText: {
        if (effectiveVariant === MD.Badge.Small)
            return "";
        if (text.length > 0)
            return Private.BadgeText.elide(text, MD.Tokens.badge.maximumCharacters);
        if (!BadgeContent.isValidCount(count))
            return "";
        const maximum = MD.Tokens.badge.maximumCount;
        return Math.min(count, maximum).toLocaleString(locale, "f", 0)
               + (count > maximum ? "+" : "");
    }
 
    readonly property MD.shapeValue _containerShape: effectiveVariant === MD.Badge.Small
        ? MD.Tokens.badge.shape : MD.Tokens.badge.largeShape
 
    font.family: typescale.face === MD.Style.TypeFace.Brand
        ? control.MD.Style.brandFontFamily : control.MD.Style.plainFontFamily
    font.pixelSize: typescale.fontSize
    font.weight: typescale.fontWeight
    font.letterSpacing: typescale.tracking
 
    implicitWidth: Math.max(implicitHeight,
        implicitBackgroundWidth + leftInset + rightInset,
        (effectiveVariant === MD.Badge.Small ? 0 : implicitContentWidth)
            + leftPadding + rightPadding)
    implicitHeight: Math.max(effectiveVariant === MD.Badge.Small
            ? MD.Tokens.badge.size : MD.Tokens.badge.largeSize,
        implicitBackgroundHeight + topInset + bottomInset,
        (effectiveVariant === MD.Badge.Small ? 0 : implicitContentHeight)
            + topPadding + bottomPadding)
    leftPadding: effectiveVariant === MD.Badge.Small ? 0 : MD.Tokens.badge.horizontalPadding
    rightPadding: leftPadding
    topPadding: 0
    bottomPadding: 0
    // Control otherwise consumes pointer/touch events above its host. Badge has
    // no disabled visual state, so disabling input preserves the passive visual.
    enabled: false
    hoverEnabled: false
    wheelEnabled: false
    focusPolicy: Qt.NoFocus
    Accessible.ignored: true
 
    FontMetrics {
        id: fontMetrics
        font: control.font
    }
 
    contentItem: Text {
        objectName: "badgeLabel"
        text: control.displayText
        font: control.font
        color: control.contentColor
        textFormat: Text.PlainText
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        wrapMode: Text.NoWrap
        lineHeight: Math.max(control.typescale.lineHeight, fontMetrics.height)
        lineHeightMode: Text.FixedHeight
        Accessible.ignored: true
    }
 
    background: Rectangle {
        objectName: "badgeBackground"
        color: control.containerColor
        topLeftRadius: UiMetrics.resolveShapeRadius(control._containerShape.topLeft, width, height)
        topRightRadius: UiMetrics.resolveShapeRadius(control._containerShape.topRight, width, height)
        bottomLeftRadius: UiMetrics.resolveShapeRadius(control._containerShape.bottomLeft, width, height)
        bottomRightRadius: UiMetrics.resolveShapeRadius(control._containerShape.bottomRight, width, height)
        Accessible.ignored: true
    }
}