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); setupWiFiStats(iframe);
this._api.on('readyToClose', () => this._navigateToHome()); this._api.on('readyToClose', () => this._navigateToHome());
this._api.on('videoConferenceJoined', this._api.on('videoConferenceJoined',
(conferenceInfo: Object) => (conferenceInfo: Object) =>
this._onVideoConferenceJoined(conferenceInfo)); this._onVideoConferenceJoined(conferenceInfo));
@ -266,6 +265,7 @@ class Conference extends Component<Props, State> {
* @returns {void} * @returns {void}
*/ */
_onVideoConferenceJoined(conferenceInfo: Object) { _onVideoConferenceJoined(conferenceInfo: Object) {
setupDragAreas(this._api.getIFrame());
this._setAvatarURL(this.props._avatarURL); this._setAvatarURL(this.props._avatarURL);
this._setEmail(this.props._email); 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. * Maps (parts of) the redux state to the React props.
* *

View File

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