sufone/qawl

Make command bar draggable

mr-islam opened this issue ยท 4 comments

Add a small :: to the right and make the thing draggable

Not sure how this would work technically, but would be awesome

axon4 commented

It looks like making elements draggable may simply require adding '-webkit-app-region: drag' to the class.

https://www.electronjs.org/docs/api/frameless-window#draggable-region
https://www.codegrepper.com/code-examples/html/electron+draggable

Oh wow, that's a great find @yusufabukar ! Jazakumullahu khayran ๐Ÿ’

So we can just make the entire toolbar draggable, and mark every element inside undraggable except the :: symbol one one side.

(But this might make it draggable by empty space on the bar... is that a problem? We can test)

We can use the same technique for the page image elements too... ๐Ÿค”๐Ÿ’ก

axon4 commented

Perhaps making the background a child div (or svg) element within the main container would mitigate the empty space issue? Since the background element would have the no-drag attribute.

Something along the lines of:

div class='container -webkit-app-region: drag'
div class='background'
...
/div
/div

.container * {
-webkit-app-region: no-drag
}

That is excellent, sounds like exactly what we want ๐Ÿ’ฏ

If you'd like to make a PR for this it would be amazing brother @yusufabukar

Or if you're busy, I'll try and do this in the future inshaAllah, though maybe not this month since I'm trying to finish i18n for Layl