While looking through the source of windows sample (https://github.com/GoogleChrome/chrome-app-samples/tree/master/windows ) I noticed a CSS property:
-webkit-app-region: drag;
What this does is that if you drag on any element with this style, it moves the whole app window around. No other mouse and keyboard interactions with the elements area are possible though. To work around that you have to use the style:
-webkit-app-region: no-drag;
on the sub-element with which you want to allow normal keyboard and mouse interaction.
This is very handy when you create chrome app windows with 'frame' : 'none' window creation option. In fact, -webkit-app-region works only when you create the window with 'frame' : 'none' . You don't have to implement the logic to support window move.
BTW even when using with 'frame' : 'none' which results in lack of system supplied titlebar and borders, the system menu to move, resize, minimize, maximize, restore and close the window is available by right clicking on the areas defined by:
-webkit-app-region: drag;
The standard keyboard shortcut such as Alt+SPACE on windows can be used to invoke the menu also. The window can be resized using the window edges.
I used it in smart phone browser simulator apps, Desktop App for YouTube and Chrome Packaged App Manifest Version 2 Editor App.
Hope this helps other Chrome App writers.
-webkit-app-region: drag;
What this does is that if you drag on any element with this style, it moves the whole app window around. No other mouse and keyboard interactions with the elements area are possible though. To work around that you have to use the style:
-webkit-app-region: no-drag;
on the sub-element with which you want to allow normal keyboard and mouse interaction.
This is very handy when you create chrome app windows with 'frame' : 'none' window creation option. In fact, -webkit-app-region works only when you create the window with 'frame' : 'none' . You don't have to implement the logic to support window move.
BTW even when using with 'frame' : 'none' which results in lack of system supplied titlebar and borders, the system menu to move, resize, minimize, maximize, restore and close the window is available by right clicking on the areas defined by:
-webkit-app-region: drag;
The standard keyboard shortcut such as Alt+SPACE on windows can be used to invoke the menu also. The window can be resized using the window edges.
I used it in smart phone browser simulator apps, Desktop App for YouTube and Chrome Packaged App Manifest Version 2 Editor App.
Hope this helps other Chrome App writers.
No comments:
Post a Comment