haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(welcome): add posibility to extend settings toolbar

This commit is contained in:
Mihai Uscat 2019-10-10 16:10:57 +03:00 committed by Hristo Terezov
parent 0fa6ffc439
commit 5ade0cad8b
5 changed files with 66 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
css/_settings_toolbar.scss Normal file
View File

@ -0,0 +1 @@
/** Insert custom CSS for any additional content in the welcome page settings toolbar **/

1
index.html
View File

@ -148,6 +148,7 @@
<!--#include virtual="title.html" -->
<!--#include virtual="plugin.head.html" -->
<!--#include virtual="static/welcomePageAdditionalContent.html" -->
<!--#include virtual="static/settingsToolbarAdditionalContent.html" -->
</head>
<body>
<div id="react"></div>

1
interface_config.js
View File

@ -27,6 +27,7 @@ var interfaceConfig = {
SHOW_DEEP_LINKING_IMAGE: false,
GENERATE_ROOMNAMES_ON_WELCOME_PAGE: true,
DISPLAY_WELCOME_PAGE_CONTENT: true,
DISPLAY_WELCOME_PAGE_TOOLBAR_CONTENT: false,
APP_NAME: 'Jitsi Meet',
NATIVE_APP_NAME: 'Jitsi Meet',
PROVIDER_NAME: 'Jitsi',

62
react/features/welcome/components/WelcomePage.web.js
View File

@ -53,6 +53,15 @@ class WelcomePage extends AbstractWelcomePage {
*/
this._additionalContentRef = null;
/**
* The HTML Element used as the container for additional toolbar content. Used
* for directly appending the additional content template to the dom.
*
* @private
* @type {HTMLTemplateElement|null}
*/
this._additionalToolbarContentRef = null;
/**
* The template to use as the main content for the welcome page. If
* not found then only the welcome page head will display.
@ -63,11 +72,24 @@ class WelcomePage extends AbstractWelcomePage {
this._additionalContentTemplate = document.getElementById(
'welcome-page-additional-content-template');
/**
* The template to use as the additional content for the welcome page header toolbar.
* If not found then only the settings icon will be displayed.
*
* @private
* @type {HTMLTemplateElement|null}
*/
this._additionalToolbarContentTemplate = document.getElementById(
'settings-toolbar-additional-content-template'
);
// Bind event handlers so they are only bound once per instance.
this._onFormSubmit = this._onFormSubmit.bind(this);
this._onRoomChange = this._onRoomChange.bind(this);
this._setAdditionalContentRef
= this._setAdditionalContentRef.bind(this);
this._setAdditionalToolbarContentRef
= this._setAdditionalToolbarContentRef.bind(this);
this._onTabSelected = this._onTabSelected.bind(this);
}
@ -90,6 +112,12 @@ class WelcomePage extends AbstractWelcomePage {
this._additionalContentRef.appendChild(
this._additionalContentTemplate.content.cloneNode(true));
}
if (this._shouldShowAdditionalToolbarContent()) {
this._additionalToolbarContentRef.appendChild(
this._additionalToolbarContentTemplate.content.cloneNode(true)
);
}
}
/**
@ -114,6 +142,7 @@ class WelcomePage extends AbstractWelcomePage {
const { t } = this.props;
const { APP_NAME } = interfaceConfig;
const showAdditionalContent = this._shouldShowAdditionalContent();
const showAdditionalToolbarContent = this._shouldShowAdditionalToolbarContent();
return (
<div
@ -127,6 +156,12 @@ class WelcomePage extends AbstractWelcomePage {
<div className = 'welcome-page-settings'>
<SettingsButton
defaultTab = { SETTINGS_TABS.CALENDAR } />
{ showAdditionalToolbarContent
? <div
className = 'settings-toolbar-content'
ref = { this._setAdditionalToolbarContentRef } />
: null
}
</div>
<div className = 'header-image' />
<div className = 'header-text'>
@ -263,6 +298,19 @@ class WelcomePage extends AbstractWelcomePage {
this._additionalContentRef = el;
}
/**
* Sets the internal reference to the HTMLDivElement used to hold the
* toolbar additional content.
*
* @param {HTMLDivElement} el - The HTMLElement for the div that is the root
* of the additional toolbar content.
* @private
* @returns {void}
*/
_setAdditionalToolbarContentRef(el) {
this._additionalToolbarContentRef = el;
}
/**
* Returns whether or not additional content should be displayed below
* the welcome page's header for entering a room name.
@ -276,6 +324,20 @@ class WelcomePage extends AbstractWelcomePage {
&& this._additionalContentTemplate.content
&& this._additionalContentTemplate.innerHTML.trim();
}
/**
* Returns whether or not additional content should be displayed inside
* the header toolbar.
*
* @private
* @returns {boolean}
*/
_shouldShowAdditionalToolbarContent() {
return interfaceConfig.DISPLAY_WELCOME_PAGE_TOOLBAR_CONTENT
&& this._additionalToolbarContentTemplate
&& this._additionalToolbarContentTemplate.content
&& this._additionalToolbarContentTemplate.innerHTML.trim();
}
}
export default translate(connect(_mapStateToProps)(WelcomePage));

1
static/settingsToolbarAdditionalContent.html Normal file
View File

@ -0,0 +1 @@
<template id="settings-toolbar-additional-content-template"></template>