feat(welcome): add posibility to extend settings toolbar
This commit is contained in:
parent
0fa6ffc439
commit
5ade0cad8b
|
@ -0,0 +1 @@
|
||||||
|
/** Insert custom CSS for any additional content in the welcome page settings toolbar **/
|
|
@ -148,6 +148,7 @@
|
||||||
<!--#include virtual="title.html" -->
|
<!--#include virtual="title.html" -->
|
||||||
<!--#include virtual="plugin.head.html" -->
|
<!--#include virtual="plugin.head.html" -->
|
||||||
<!--#include virtual="static/welcomePageAdditionalContent.html" -->
|
<!--#include virtual="static/welcomePageAdditionalContent.html" -->
|
||||||
|
<!--#include virtual="static/settingsToolbarAdditionalContent.html" -->
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="react"></div>
|
<div id="react"></div>
|
||||||
|
|
|
@ -27,6 +27,7 @@ var interfaceConfig = {
|
||||||
SHOW_DEEP_LINKING_IMAGE: false,
|
SHOW_DEEP_LINKING_IMAGE: false,
|
||||||
GENERATE_ROOMNAMES_ON_WELCOME_PAGE: true,
|
GENERATE_ROOMNAMES_ON_WELCOME_PAGE: true,
|
||||||
DISPLAY_WELCOME_PAGE_CONTENT: true,
|
DISPLAY_WELCOME_PAGE_CONTENT: true,
|
||||||
|
DISPLAY_WELCOME_PAGE_TOOLBAR_CONTENT: false,
|
||||||
APP_NAME: 'Jitsi Meet',
|
APP_NAME: 'Jitsi Meet',
|
||||||
NATIVE_APP_NAME: 'Jitsi Meet',
|
NATIVE_APP_NAME: 'Jitsi Meet',
|
||||||
PROVIDER_NAME: 'Jitsi',
|
PROVIDER_NAME: 'Jitsi',
|
||||||
|
|
|
@ -53,6 +53,15 @@ class WelcomePage extends AbstractWelcomePage {
|
||||||
*/
|
*/
|
||||||
this._additionalContentRef = null;
|
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
|
* The template to use as the main content for the welcome page. If
|
||||||
* not found then only the welcome page head will display.
|
* not found then only the welcome page head will display.
|
||||||
|
@ -63,11 +72,24 @@ class WelcomePage extends AbstractWelcomePage {
|
||||||
this._additionalContentTemplate = document.getElementById(
|
this._additionalContentTemplate = document.getElementById(
|
||||||
'welcome-page-additional-content-template');
|
'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.
|
// Bind event handlers so they are only bound once per instance.
|
||||||
this._onFormSubmit = this._onFormSubmit.bind(this);
|
this._onFormSubmit = this._onFormSubmit.bind(this);
|
||||||
this._onRoomChange = this._onRoomChange.bind(this);
|
this._onRoomChange = this._onRoomChange.bind(this);
|
||||||
this._setAdditionalContentRef
|
this._setAdditionalContentRef
|
||||||
= this._setAdditionalContentRef.bind(this);
|
= this._setAdditionalContentRef.bind(this);
|
||||||
|
this._setAdditionalToolbarContentRef
|
||||||
|
= this._setAdditionalToolbarContentRef.bind(this);
|
||||||
this._onTabSelected = this._onTabSelected.bind(this);
|
this._onTabSelected = this._onTabSelected.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -90,6 +112,12 @@ class WelcomePage extends AbstractWelcomePage {
|
||||||
this._additionalContentRef.appendChild(
|
this._additionalContentRef.appendChild(
|
||||||
this._additionalContentTemplate.content.cloneNode(true));
|
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 { t } = this.props;
|
||||||
const { APP_NAME } = interfaceConfig;
|
const { APP_NAME } = interfaceConfig;
|
||||||
const showAdditionalContent = this._shouldShowAdditionalContent();
|
const showAdditionalContent = this._shouldShowAdditionalContent();
|
||||||
|
const showAdditionalToolbarContent = this._shouldShowAdditionalToolbarContent();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
|
@ -127,6 +156,12 @@ class WelcomePage extends AbstractWelcomePage {
|
||||||
<div className = 'welcome-page-settings'>
|
<div className = 'welcome-page-settings'>
|
||||||
<SettingsButton
|
<SettingsButton
|
||||||
defaultTab = { SETTINGS_TABS.CALENDAR } />
|
defaultTab = { SETTINGS_TABS.CALENDAR } />
|
||||||
|
{ showAdditionalToolbarContent
|
||||||
|
? <div
|
||||||
|
className = 'settings-toolbar-content'
|
||||||
|
ref = { this._setAdditionalToolbarContentRef } />
|
||||||
|
: null
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
<div className = 'header-image' />
|
<div className = 'header-image' />
|
||||||
<div className = 'header-text'>
|
<div className = 'header-text'>
|
||||||
|
@ -263,6 +298,19 @@ class WelcomePage extends AbstractWelcomePage {
|
||||||
this._additionalContentRef = el;
|
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
|
* Returns whether or not additional content should be displayed below
|
||||||
* the welcome page's header for entering a room name.
|
* the welcome page's header for entering a room name.
|
||||||
|
@ -276,6 +324,20 @@ class WelcomePage extends AbstractWelcomePage {
|
||||||
&& this._additionalContentTemplate.content
|
&& this._additionalContentTemplate.content
|
||||||
&& this._additionalContentTemplate.innerHTML.trim();
|
&& 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));
|
export default translate(connect(_mapStateToProps)(WelcomePage));
|
||||||
|
|
|
@ -0,0 +1 @@
|
||||||
|
<template id="settings-toolbar-additional-content-template"></template>
|
Loading…
Reference in New Issue