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

[Feature] Electron drag window class #3494

Closed
arkhenstone opened this issue Mar 6, 2019 · 5 comments

Comments

Projects
None yet
3 participants
@arkhenstone
Copy link

commented Mar 6, 2019

Electron frameless windows doesn't have any window decoration. By default, you can't move them around in the window manager. Since there is now a QBar component in Quasar, some of the demos feature the layout of a title bar, close to the one of MacOS or Windows window decoration.

To make a component a draggable area for the window to move around, this is a simple CSS :

.q-electron-draggable {
  -webkit-user-select: none;
  -webkit-app-region: drag;
}
.q-electron-draggable > :not( [ insert clickable components selector]) {
  -webkit-app-region: no-drag;
}

To get a quick demo of this :
Create an electron project
Add all in quasar.conf.js
In electron-src/electron-main.js replace :

mainWindow = new BrowserWindow({
    width: 1000,
    height: 600,
    useContentSize: true,
  })

by

mainWindow = new BrowserWindow({
    width: 1000,
    height: 600,
    useContentSize: true,
    frame: false
  })

In src/layouts/MyLayout.vue add this :

<q-bar dark class="bg-grey-10 text-white q-electron-draggable" >
        <q-img src="statics/quasar-logo.png" style="height: 18px; width: 18px;margin-right:1rem"></q-img>
        <span>Draggable Window</span>

        <q-space />

        <q-btn dense flat icon="minimize"  />
        <q-btn dense flat icon="crop_square" />
        <q-btn dense flat icon="close"  />
      </q-bar>

And add to it the style above. It should be able to move on the QSpace component and the "title" (the span), depending of what selector may be appropriate in the :not part.

Gif demo :
deepin-screen-recorder_desktop_20190306154310

@nothingismagick (as asked by you)

@nothingismagick

This comment has been minimized.

Copy link
Member

commented Mar 6, 2019

Thanks for requesting this and the excellent writeup. Will give it some thought.

@rstoenescu

This comment has been minimized.

Copy link
Member

commented Mar 8, 2019

This is really a nice and useful idea.
Can you test if it works correctly with:

.q-bar
  -webkit-user-select none
  -webkit-app-region drag

.q-bar > *
  -webkit-app-region no-drag

I'll create a prop for QBar specifically for this, but I need confirmation that it would work correctly first.

@nothingismagick

This comment has been minimized.

Copy link
Member

commented Mar 8, 2019

I can confirm that this works splendidly on Mac Electron 3 & Electron 4.

@arkhenstone

This comment has been minimized.

Copy link
Author

commented Mar 8, 2019

I'll add that most title bar have title, and you must be capable to drag the window if you click on it. I take as example VS code (which is electron based), there is a menu in the bar, an icon, 2 spaces, a title and buttons (min max close). Most people expect the drag event to be at least accessible on either space and title. Which .q-bar > * will make title undraggable. That's why I suggested a class, since you could apply the class to the title also and it'll works nice.
If like Razvan suggested, it would be a prop of QBar, then the wildcard child element would be a bit too much. It would make it impossible to drag a window like this :
image
Draggable area on this screenshot is on the title and vscode icon.

rstoenescu added a commit that referenced this issue Mar 9, 2019

@rstoenescu

This comment has been minimized.

Copy link
Member

commented Mar 9, 2019

Took a bit more time to think this through. I think the best option is to simply have 2 classes that can be applied on any element. So not just on QBar.

So, added q-electron-drag and q-electron-drag--exception CSS classes.

I will also add some basic info for beginners on the event handlers for minimize, maximize/unmaximize and close buttons.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.