Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Wrong documentation for opacity #7377

Open
jmEvoqua opened this issue Jan 15, 2025 · 2 comments · May be fixed by #7415
Open

Wrong documentation for opacity #7377

jmEvoqua opened this issue Jan 15, 2025 · 2 comments · May be fixed by #7415
Assignees
Labels
a:documentation Improvements or additions to documentation (infrastructure and text itself) (mN,bS) bug Something isn't working

Comments

@jmEvoqua
Copy link

jmEvoqua commented Jan 15, 2025

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

@jmEvoqua jmEvoqua added bug Something isn't working need triaging Issue that the owner of the area still need to triage labels Jan 15, 2025
@ogoffart ogoffart changed the title Component with visible: false still takes layout space Wrong documentation for opacity Jan 16, 2025
@ogoffart ogoffart added a:documentation Improvements or additions to documentation (infrastructure and text itself) (mN,bS) and removed need triaging Issue that the owner of the area still need to triage labels Jan 16, 2025
@ogoffart
Copy link
Member

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

@jmEvoqua
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a:documentation Improvements or additions to documentation (infrastructure and text itself) (mN,bS) bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants