Skip to content

InlineMessage: Fix corner case glitch when component is sized almost enough to fix the label

ivan tkachenko requested to merge work/ratijas/inline-message-sizing into master

Lesson for today: don't round intermediate geometry calculations down to int.

Second lesson for tomorrow: Use more expensive indirect values like something.anchors.leftMargin, so your sizes won't drift away by an amount of an extra smallSpacing or whatever.

Before After
Before After

Test case:

/*
 *  SPDX-FileCopyrightText: 2022 ivan tkachenko <me@ratijas.tk>
 *
 *  SPDX-License-Identifier: LGPL-2.0-or-later
 */

import QtQuick 2.15
import QtQuick.Controls 2.15 as QQC2
import QtQuick.Window 2.15
import QtQml 2.15

import org.kde.kirigami 2.20 as Kirigami

QQC2.ApplicationWindow {
    id: root

    width: 400
    height: 300

    SequentialAnimation on width {
        id: animation

        running: false
        NumberAnimation {
            id: a1
            from: 160; to: 170
            duration: Kirigami.Units.veryLongDuration
        }
        NumberAnimation {
            to: a1.from
            duration: a1.duration
        }
    }

    property bool showActions: false
    property list<QtObject> actions: [
        Kirigami.Action {
            icon.name: "starred-symbolic"
            text: "You found me!"
        },
        Kirigami.Action {
            icon.name: "system-shutdown-symbolic"
            text: "Bye!"
        }
    ]

    Kirigami.Page {
        anchors.fill: parent

        Kirigami.InlineMessage {
            id: message

            anchors.top: parent.top
            anchors.left: parent.left
            anchors.right: parent.right

            text: "Ya-ha ha!"
            icon.source: "https://static.wikia.nocookie.net/zelda_gamepedia_en/images/a/a0/BotW_Chio_Model.png/revision/latest?cb=20170417190848"
            type: Kirigami.MessageType.Positive
            showCloseButton: true
            actions: showActions ? root.actions : []

            visible: true
        }

        Column {
            anchors.bottom: parent.bottom
            anchors.left: parent.left
            anchors.margins: Kirigami.Units.smallSpacing
            spacing: Kirigami.Units.smallSpacing

            QQC2.Button {
                text: "Animate"
                onClicked: animation.running = !animation.running
                onDoubleClicked: clicked()
            }
            QQC2.Button {
                text: "Toggle"
                onClicked: message.visible = !message.visible
            }
            QQC2.CheckBox {
                text: "Actions"
                checked: root.showActions
                onToggled: root.showActions = !root.showActions
            }
            QQC2.CheckBox {
                text: "Close Button"
                checked: message.showCloseButton
                onToggled: message.showCloseButton = checked
            }
        }
    }
}

CC @carlschwan

Merge request reports