Creating a frameless window with draggable title bar / nav-menu, minimize, close, and scrolling content. #1486

sethstenzel · 2024-10-02T18:06:29Z

sethstenzel
Oct 2, 2024

Reading through several of the comments, after wanting to do this myself, I thought I'd just share a general example of doing all these things if you are trying to use the frameless window, but emulate somewhat normal window features like close and minimize.

import webview

# HTML content with a sticky menu, custom scrollbar, and minimize/close buttons
html_content = '''
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sticky Menu Demo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            height: 100vh; /* Take up the full viewport height */
            overflow: hidden; /* Disable body scrolling */
        }
        /* Sticky menu styling */
        .sticky-menu {
            position: -webkit-sticky; /* For Safari */
            position: sticky;
            top: 0;
            background-color: #333;
            color: white;
            padding: 15px;
            text-align: center;
            z-index: 1000;
            -webkit-app-region: drag; /* Make the sticky menu a draggable region */
        }
        .sticky-menu a {
            color: white;
            margin: 0 15px;
            text-decoration: none;
            font-weight: bold;
        }
        /* Scrollable content styling */
        .content {
            height: calc(100vh - 60px); /* Adjust height based on the sticky menu height */
            overflow-y: scroll; /* Enable vertical scrolling */
            padding: 20px;
            background-color: #f4f4f4;
        }
        /* Custom scrollbar styling */
        .content::-webkit-scrollbar {
            width: 10px;
        }
        .content::-webkit-scrollbar-thumb {
            background-color: #888;
            border-radius: 5px;
        }
        .content::-webkit-scrollbar-thumb:hover {
            background-color: #555;
        }
        .content p {
            margin-bottom: 20px;
            line-height: 1.6;
        }
        .menu-button {
            background-color: #007bff; /* Change Minimize button color to blue */
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            margin-left: 5px;
        }
        .close-button {
            background-color: #f00; /* Close button remains red */
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <!-- Sticky menu at the top -->
    <div class="sticky-menu pywebview-drag-region">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
        <!-- Minimize and Close buttons -->
        <button class="menu-button" onclick="webview_api_minimize_window()">Minimize</button>
        <button class="close-button" onclick="webview_api_close_window()">Close</button>
    </div>

    <!-- Scrollable content with custom scrollbar -->
    <div class="content">

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra nisl a dui vehicula, in cursus turpis mollis. Suspendisse potenti. Curabitur vehicula vehicula urna, sit amet tincidunt nisi laoreet ac.</p>
        <p>Phasellus eget sem vitae urna volutpat suscipit non nec erat. Donec venenatis metus at purus condimentum, nec malesuada nulla laoreet. Aliquam erat volutpat. Duis faucibus felis quis justo viverra, ac aliquet eros viverra.</p>
        <p>Etiam a velit ut metus pulvinar pharetra a et dolor. Nulla at tortor id nisi ultrices scelerisque eget id quam. Nulla ac sem odio. Donec eu metus et nulla sagittis suscipit. Maecenas faucibus tellus nec malesuada faucibus.</p>
        <p>Morbi eu nulla risus. Ut luctus lacus sit amet massa efficitur, et accumsan lectus pretium. Pellentesque id magna fermentum, ultricies nisl at, tristique libero. Integer vitae dignissim odio, sed interdum lacus.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sagittis dui. Donec id orci ac metus bibendum convallis. Curabitur quis velit ac nulla blandit cursus at non enim. Duis sit amet nulla eget purus maximus posuere at vitae nunc.</p>
        <p>Sed lacinia ligula ac orci posuere, ut consequat lectus pellentesque. In eget lacus interdum, aliquam libero ut, fringilla magna. Aliquam erat volutpat. Curabitur a pharetra lorem, eget vehicula nisi.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin viverra nisl a dui vehicula, in cursus turpis mollis. Suspendisse potenti. Curabitur vehicula vehicula urna, sit amet tincidunt nisi laoreet ac.</p>
        <p>Phasellus eget sem vitae urna volutpat suscipit non nec erat. Donec venenatis metus at purus condimentum, nec malesuada nulla laoreet. Aliquam erat volutpat. Duis faucibus felis quis justo viverra, ac aliquet eros viverra.</p>
        <p>Etiam a velit ut metus pulvinar pharetra a et dolor. Nulla at tortor id nisi ultrices scelerisque eget id quam. Nulla ac sem odio. Donec eu metus et nulla sagittis suscipit. Maecenas faucibus tellus nec malesuada faucibus.</p>
        <p>Morbi eu nulla risus. Ut luctus lacus sit amet massa efficitur, et accumsan lectus pretium. Pellentesque id magna fermentum, ultricies nisl at, tristique libero. Integer vitae dignissim odio, sed interdum lacus.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in sagittis dui. Donec id orci ac metus bibendum convallis. Curabitur quis velit ac nulla blandit cursus at non enim. Duis sit amet nulla eget purus maximus posuere at vitae nunc.</p>
        <p>Sed lacinia ligula ac orci posuere, ut consequat lectus pellentesque. In eget lacus interdum, aliquam libero ut, fringilla magna. Aliquam erat volutpat. Curabitur a pharetra lorem, eget vehicula nisi.</p>

    </div>

    <script>
        function webview_api_minimize_window() {
            if (window.pywebview) {
                pywebview.api.webview_api_minimize_window();  // Call the exposed Python function
            }
        }
        function webview_api_close_window() {
            if (window.pywebview) {
                pywebview.api.webview_api_close_window();  // Call the exposed Python function
            }
        }
    </script>
</body>
</html>
'''


# Python functions to minimize and close the window
def webview_api_minimize_window():
    webview.windows[0].minimize()


def webview_api_close_window():
# Better handling needed when using a multi-window application.
# For loop would be fine if closing all windows.
    webview.windows[0].destroy()  


def create_window():
    # Create a pywebview window and pass the HTML content directly
    window = webview.create_window('Sticky Menu Demo', html=html_content, frameless=True, easy_drag=False)

    # Expose the Python functions to JavaScript
    window.expose(webview_api_minimize_window)
    window.expose(webview_api_close_window)


if __name__ == '__main__':
    create_window()
    webview.start(debug=False)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Creating a frameless window with draggable title bar / nav-menu, minimize, close, and scrolling content. #1486

{{title}}

Replies: 0 comments

Select a reply

Creating a frameless window with draggable title bar / nav-menu, minimize, close, and scrolling content. #1486

sethstenzel Oct 2, 2024

Replies: 0 comments

sethstenzel
Oct 2, 2024