From 5ade0cad8b80df7f554531dac0ccc093400c4295 Mon Sep 17 00:00:00 2001 From: Mihai Uscat Date: Thu, 10 Oct 2019 16:10:57 +0300 Subject: [PATCH] feat(welcome): add posibility to extend settings toolbar --- css/_settings_toolbar.scss | 1 + index.html | 1 + interface_config.js | 1 + .../welcome/components/WelcomePage.web.js | 62 +++++++++++++++++++ static/settingsToolbarAdditionalContent.html | 1 + 5 files changed, 66 insertions(+) create mode 100644 css/_settings_toolbar.scss create mode 100644 static/settingsToolbarAdditionalContent.html diff --git a/css/_settings_toolbar.scss b/css/_settings_toolbar.scss new file mode 100644 index 000000000..c0e892562 --- /dev/null +++ b/css/_settings_toolbar.scss @@ -0,0 +1 @@ +/** Insert custom CSS for any additional content in the welcome page settings toolbar **/ diff --git a/index.html b/index.html index 6f42cce92..ab731cfe3 100644 --- a/index.html +++ b/index.html @@ -148,6 +148,7 @@ +
diff --git a/interface_config.js b/interface_config.js index 1bb86142d..5daa3b584 100644 --- a/interface_config.js +++ b/interface_config.js @@ -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', diff --git a/react/features/welcome/components/WelcomePage.web.js b/react/features/welcome/components/WelcomePage.web.js index d2ee3acd6..2cdd33bdc 100644 --- a/react/features/welcome/components/WelcomePage.web.js +++ b/react/features/welcome/components/WelcomePage.web.js @@ -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 (
+ { showAdditionalToolbarContent + ?
+ : null + }
@@ -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)); diff --git a/static/settingsToolbarAdditionalContent.html b/static/settingsToolbarAdditionalContent.html new file mode 100644 index 000000000..a63bae990 --- /dev/null +++ b/static/settingsToolbarAdditionalContent.html @@ -0,0 +1 @@ +