Popup is rendered weirdly on macos

[lukas-jung]

On macos a PopupWindow without a background rectangle is rendered like this:

I'm not sure whether is should be translucent, but if it should we at least need the native background color as a color.

Also: the popup somehow renders over everything. even over system application like the spotlight search.

here's the code (the bla buttons show the popup):

// Copyright © SixtyFPS GmbH <info@slint-ui.com>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial

import { SpinBox, Button, CheckBox, Slider, LineEdit, ScrollView, ListView, HorizontalBox, VerticalBox, GridBox } from "std-widgets.slint";

export struct TodoItem := {
    title: string,
    checked: bool,
}

MainWindow := Window {
    preferred-width: 400px;
    preferred-height: 600px;
    callback todo-added(string);
    callback remove-done();

    callback popup_confirmed;
    callback show_confirm_popup;
    show_confirm_popup => { confirm_popup.show(); }

    confirm_popup := PopupWindow {
        x: 40px;
        y: 100px;
        //Rectangle { height:100%; width: 100%; background: white; }
        VerticalLayout {
           Text {
               text: "Some items are not done, are you sure you wish to quit";
            }
            HorizontalLayout {
                 Button { text: "Yes"; clicked => { popup_confirmed(); } }
                 Button { text: "No"; }
            }
         }
    }

    property <[TodoItem]> todo-model: [
        { title: "Implement the .slint file", checked: true },
        { title: "Do the Rust part", checked: false },
        { title: "Make the C++ code", checked: false },
        { title: "Write some JavaScript code", checked: false },
        { title: "Test the application", checked: false },
        { title: "Ship to customer", checked: false },
        { title: "???", checked: false },
        { title: "Profit", checked: false },
    ];

    VerticalBox {
        HorizontalBox {
            text-edit := LineEdit {
                placeholder-text: "What needs to be done?";
                accepted(text) => {
                    todo-added(text);
                    self.text = "";
                }
            }
            btn := Button {
                text: "Add New Entry";
                enabled: text-edit.text != "";
                clicked => {
                    todo-added(text-edit.text);
                    text-edit.text = "";
                }
            }
        }

        list-view := ListView {
            for todo in todo-model:  HorizontalLayout {
                CheckBox {
                    text: todo.title;
                    checked: todo.checked;
                    toggled => {
                        todo.checked = checked;
                    }
                }
            }
        }
        HorizontalBox {
            alignment: end;
            Button {
                text: "Remove Done Items";
                clicked => { root.remove-done(); }
            }
            Button {
                text: "bla";
                clicked => { confirm_popup.show(); }
            }
        }
    }
}

[tronical]

The background color for PopupWindow should indeed be the same by default as for Window.

The compiler transforms a PopupWindow to a Window element in the lower_popups pass in the compiler. And a Window gets a default binding for the background color from the native style assigned in the apply_default_properties_from_style pass. However that pass is applied /before/ the lowering, so that pass sees a PopupWindow element, not a Window.

I think apply_default_properties_from_style should be taught about PopupWindow. However that means adding a background property to PopupWindow in builtins.slint.

I /think/ that could work, and it would allow us to remove the current workaround we have in place wherever we use PopupWindow right now in the examples/demos where we have a Rectangle at the bottom that draws a background.

[tronical]

Also: the popup somehow renders over everything. even over system application like the spotlight search.

This relates to #38 . Right now with Qt a popup is known to the windowing system, so it should render above everything. But with the GL backend the popup is rendered like a "widget" inside the window. It would be great to fix this. One issue is that winit currently doesn't just support this, but I think with the existing extension traits for macOS, Windows, etc. it might be possible to hack this on the usual windowing systems.

[ogoffart]

Closing in favor of #1143