Wrong documentation for opacity

[jmEvoqua]

The docs for the opacity and visible properties contains mistake.
https://docs.slint.dev/latest/docs/slint/reference/common/#opacity

Compared to the ones in 1.8: https://releases.slint.dev/1.8.0/docs/slint/src/language/builtins/elements.html

• The visible property does not impact layouting. Only conditional element (if ...: construct) does it.
• The Example for visibility should go to opacity.
• The description of the example is still the previous description
• The previous example was maybe not pretty, but demonstrated opacity and its layer system better.

Original description

Bug Description

If I understand the docs correctly, then an element with visible: false should not take any space in a layout?

When an element has 0 opacity it will still take up layout space and any gesture handling will continue to work. If the intent is to hide an element so it has no gesture handling or no longer takes up layout space, use the visible property instead.

https://docs.slint.dev/latest/docs/slint/reference/common/#opacity

But this seems not to be the case. The element still takes its space in the layout. Even if the size is 0px it counts as extra element, which causes extra spacing, if defined in the layout.

Reproducible Code (if applicable)

export component Demo {
    VerticalLayout {
        spacing: 20px;
        Rectangle {
            width: 180px;
            height: 180px;
            background: #315afd;
            opacity: 0.5;
        }

        Rectangle {
            width: 180px;
            height: 180px;
            background: green;
            opacity: 0.5;
            visible: false;
        }

        Rectangle {
            width: 180px;
            height: 180px;
            background: green;
            opacity: 1;
            
        }
        Rectangle {
            width: 180px;
            height: 0px;
            background: green;
            opacity: 0.5;
            visible: false;
        }
    }
}

Environment Details

• Slint Version: 1.9.1

Product Impact

No response

[ogoffart]

Thanks for the Bug report. The documentation is indeed wrong. I edited the description.

[jmEvoqua]

Thanks.

Is there another way to ignore an element in the layout? I want to create a pseudo element (like the timer)

import { Permission, UserManagement } from "...";

export struct MethodResponse {
    // random number to ensure, that property changed event is fired
    rand: int,
    success: bool,
}

export global Methods {
	callback flow_start_calibration(calibrationType: string);
	out property<Permission> flow_start_calibration_permission: Permission.None;
	in-out property<MethodResponse> flow_start_calibration_response;
	in-out property<bool> flow_start_calibration_in_progress: false;
}

export component flow_start_calibration {
    visible: false;

    public function call(calibrationType: string) {
        // if method is currently called by this or from somewhere else, do not call it again
        if root.in_progress {
            return;
        }
        root.called_by_this = true;
        Methods.flow_start_calibration(calibrationType);
    }

    callback call_completed(success: bool);

    out property <bool> in_progress: Methods.flow_start_calibration_in_progress;
    out property <bool> has_permission: UserManagement.has_permission(UserManagement.permissions, Methods.flow_start_calibration_permission);

    changed response => {
        if root.called_by_this {
            call_completed(root.response.success);
            root.called_by_this = false;
        }
    }

    property <bool> called_by_this;
    property <MethodResponse> response: Methods.flow_start_calibration_response;
}

We have dozens of these methods which do not immediatly return a response. These methods/components are all autogenereted and I think the pseudo-element would be a nice way to allow for different reactions on method completion.