Improve dragging experience

The entire page is draggable, except:

- buttons
- any input type
- the filmstrip
- the chat panel
This commit is contained in:
Saúl Ibarra Corretgé 2018-06-21 09:55:45 +02:00 committed by Hristo Terezov
parent 79db9fab88
commit 1d3cfbb569
2 changed files with 23 additions and 1 deletions

View File

@ -213,7 +213,6 @@ class Conference extends Component<Props, State> {
setupWiFiStats(iframe);
this._api.on('readyToClose', () => this._navigateToHome());
this._api.on('videoConferenceJoined',
(conferenceInfo: Object) =>
this._onVideoConferenceJoined(conferenceInfo));
@ -266,6 +265,7 @@ class Conference extends Component<Props, State> {
* @returns {void}
*/
_onVideoConferenceJoined(conferenceInfo: Object) {
setupDragAreas(this._api.getIFrame());
this._setAvatarURL(this.props._avatarURL);
this._setEmail(this.props._email);
@ -311,6 +311,25 @@ class Conference extends Component<Props, State> {
}
/**
* Inject some style into the iframe so everything except the filmstrip, chat,
* buttons or any input is draggable.
*
* @param {Object} iframe - reference to the iframe where the drag areas will
* be set.
* @returns {void}
*/
function setupDragAreas(iframe) {
const injectStyle = document.createElement('style');
injectStyle.type = 'text/css';
injectStyle.textContent
= 'body { -webkit-app-region: drag; }'
+ 'button, input { -webkit-app-region: no-drag }'
+ '#chatconversation, .filmstrip { -webkit-app-region: no-drag; }';
iframe.contentDocument.head.appendChild(injectStyle);
}
/**
* Maps (parts of) the redux state to the React props.
*

View File

@ -8,6 +8,9 @@
body {
-webkit-app-region: drag
}
button, input {
-webkit-app-region: no-drag
}
</style>
</head>
<body>