search

sufone / qawl

📖 Quran Reader for Linux, Windows, macOS
https://qawl.app
GNU Affero General Public License v3.0
82 stars 11 forks source link

Make command bar draggable #64

Open mr-islam opened 3 years ago

mr-islam commented 3 years ago

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

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

axon4 commented 3 years ago

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

mr-islam commented 3 years ago

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 3 years ago

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 }

mr-islam commented 3 years ago

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