Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. Qt for WebAssembly
  4. Style titlebar in QWidgets webassembly
Forum Updated to NodeBB v4.3 + New Features

Style titlebar in QWidgets webassembly

Scheduled Pinned Locked Moved Solved Qt for WebAssembly
2 Posts 1 Posters 334 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • R Offline
    R Offline
    RandomGuy
    wrote on last edited by RandomGuy
    #1

    Is it possible to style the titlebar in webassembly, without removing the "native" decorator and creating/simulating a custom one?

    webassemblytitlebar.png

    In a real OS I know that this is not possible, but since webassembly doesn't run in any native window manager, I wonder if this is possible.

    Edit:

    So I looked deeper into this and seems that window decoration is simple html/css! So it should be easy to change it with a bit of javascript / css / html... I don't have time today but next week I will try to do this and post the solution here. :)

    1 Reply Last reply
    0
    • R RandomGuy has marked this topic as solved on
    • R Offline
      R Offline
      RandomGuy
      wrote on last edited by RandomGuy
      #2

      Here is what I came with:

      #ifdef Q_OS_WASM
      #include <emscripten/emscripten.h>
      #endif
      
      #ifdef Q_OS_WASM
              const QString updatedCss = R"(
                  .qt-window.has-frame {
                      border: var(--border-width) solid #ebe9e9;
                      border-radius: 10px;
                  }
      
                  .qt-window {
                      background-color: #ebe9e9;
                  }
              )";
      
              const QString extendExistingCss =  QString(R"(
                  document.getElementById("screen").shadowRoot.querySelector("style").innerHTML += "%1";
              )").arg(updatedCss.simplified());
      
      
              emscripten_run_script(extendExistingCss.toLatin1());
      #endif
      

      This one adds rounded corners and changes the border style color to something more pleasable (to me). This one is for the default theme but adjust as necessary for other themes. Seems to work nicely in all browsers.

      1 Reply Last reply
      0

      • Login

      • Login or register to search.
      • First post
        Last post
      0
      • Categories
      • Recent
      • Tags
      • Popular
      • Users
      • Groups
      • Search
      • Get Qt Extensions
      • Unsolved