qawl icon indicating copy to clipboard operation
qawl copied to clipboard

Make command bar draggable

Open mr-islam opened this issue 4 years ago • 4 comments

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

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

mr-islam avatar Feb 06 '21 10:02 mr-islam

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

axon4 avatar Apr 09 '21 11:04 axon4

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... 🤔💡

mr-islam avatar Apr 09 '21 18:04 mr-islam

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 }

axon4 avatar Apr 10 '21 06:04 axon4

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

mr-islam avatar Apr 10 '21 13:04 mr-islam