Frameless Windows

On this page you'll learn how to create frameless windows with custom decorations.

Basics

A "frameless" windows is a window which hides the default window buttons & handle assigned to it by the operating system.

Default	Frameless

You can use the set_decorations method to remove the window frame.

Example: Removing Window Frame

#include <saucer/smartview.hpp>

int main()
{
    auto app = saucer::application::acquire({
        .id = "frameless",
    });

    saucer::smartview smartview{{
        .application = app,
    }};

    smartview.set_title("Hello World!");

    smartview.set_decorations(false);

    smartview.expose("add_ten", [](int i)
                                {
                                    return i + 10;
                                });

    smartview.set_url("https://google.com");
    smartview.show(); 

    app->run();

    return 0;
}

Move & Resize

A frameless window can not be resized or moved by default. However, saucer supports the HTML Attributes data-webview-drag and data-webview-resize which can be used to conveniently add support for custom drag areas or resize-handles.

In the following example I'll demonstrate how to use the aforementioned methods to make a custom titlebar.

Sketch: Custom Titlebar

<div id="my_awesome_titlebar" data-webview-drag>
  <!-- ... -->
</div>

Now let's also add a resize handle in the bottom right corner.

Sketch: Custom Resize Handle

<div id="my_awesome_titlebar" data-webview-drag>
  <!-- ... -->
</div>

<div id="my_awesome_resize_handle" data-webview-resize="br">
  <!-- ... -->
</div>

As you can see data-webview-resize requires a value, in this case br.
The value should correspond to a window edge, here br is equal to bottom-right.

The following edges are defined:

window_edge:
{
  top,
  bottom,
  left,
  right,
}

The data-webview-resize attribute should use the short-form of the given edges, e.g. top-left as tl.

tip

Should an element trigger a move / resize when it shouldn't (this can happen if the given element is a child of a parent with special attributes), you can give it the data-webview-ignore attribute.
This will prevent clicks on this element from triggering any move or resize.