Improve dragging experience

The entire page is draggable, except:

- buttons
- any input type
- the filmstrip
- the chat panel
fix-builder
Saúl Ibarra Corretgé 4 years ago committed by Hristo Terezov
parent 79db9fab88
commit 1d3cfbb569
  1. 21
      app/features/conference/components/Conference.js
  2. 3
      app/index.html

@ -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.
*

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

Loading…
Cancel
Save