diff --git a/css/_toolbars.scss b/css/_toolbars.scss index c09cd3c7e2..ae219dd9ed 100644 --- a/css/_toolbars.scss +++ b/css/_toolbars.scss @@ -42,22 +42,7 @@ margin-right: auto; width: auto; border-radius: 3px; - - /** - * First button in the toolbar. - */ - .first { - border-bottom-left-radius: 3px; - border-top-left-radius: 3px; - } - - /** - * Last button in the toolbar. - */ - .last { - border-bottom-right-radius: 3px; - border-top-right-radius: 3px; - } + overflow: hidden; /** * Splitter button in the toolbar. @@ -75,8 +60,8 @@ display: flex; width: $defaultToolbarSize; height: 100%; - top: 0px; - left: 0px; + top: 0; + left: 0; padding-top: 10px; box-sizing: border-box; flex-direction: column; diff --git a/index.html b/index.html index b84be7198a..c56522a37e 100644 --- a/index.html +++ b/index.html @@ -131,37 +131,13 @@ - +
- - - - - - - - - - - - - - - - - - - - - - +
+
diff --git a/interface_config.js b/interface_config.js index f00a960285..3521747ab3 100644 --- a/interface_config.js +++ b/interface_config.js @@ -24,14 +24,26 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars AUTHENTICATION_ENABLE: true, // the toolbar buttons line is intentionally left in one line, to be able // to easily override values or remove them using regex - MAIN_TOOLBAR_BUTTONS: ['microphone', 'camera', 'desktop', 'invite', 'fullscreen', 'hangup'], // jshint ignore:line /** * The index of the splitter button in the main toolbar. The splitter * button is a button in the toolbar that will be applied a special styling * visually dividing the toolbar buttons. */ //MAIN_TOOLBAR_SPLITTER_INDEX: -1, - TOOLBAR_BUTTONS: ['profile', 'authentication', 'microphone', 'camera', 'desktop', 'recording', 'security', 'raisehand', 'chat', 'etherpad', 'sharedvideo', 'sip', 'dialpad', 'settings', 'hangup', 'filmstrip', 'contacts'], // jshint ignore:line + /** + * the toolbar buttons line is intentionally left in one line, to be able + * to easily override values or remove them using regex + */ + TOOLBAR_BUTTONS: [ + //main toolbar + 'microphone', 'camera', 'desktop', 'invite', 'fullscreen', 'hangup', + //extended toolbar + 'profile', 'contacts', 'chat', 'recording', 'etherpad', 'sharedvideo', 'sip', 'dialpad', 'settings', 'raisehand', 'filmstrip'], // jshint ignore:line + /** + * Main Toolbar Buttons + * All of them should be in TOOLBAR_BUTTONS + */ + MAIN_TOOLBAR_BUTTONS: ['microphone', 'camera', 'desktop', 'invite', 'fullscreen', 'hangup'], // jshint ignore:line SETTINGS_SECTIONS: ['language', 'devices', 'moderator'], // Determines how the video would fit the screen. 'both' would fit the whole // screen, 'height' would fit the original video height to the height of the diff --git a/modules/UI/UI.js b/modules/UI/UI.js index 99b437e8bc..f4cb072858 100644 --- a/modules/UI/UI.js +++ b/modules/UI/UI.js @@ -1021,7 +1021,7 @@ UI.addMessage = function (from, displayName, message, stamp) { // eslint-disable-next-line no-unused-vars UI.updateDTMFSupport = function (isDTMFSupported) { //TODO: enable when the UI is ready - //Toolbar.showDialPadButton(dtmfSupport); + //Toolbar.showDialPadButton(isDTMFSupported); }; /** diff --git a/modules/UI/toolbars/Toolbar.js b/modules/UI/toolbars/Toolbar.js index 9361a50c69..08147e6cf2 100644 --- a/modules/UI/toolbars/Toolbar.js +++ b/modules/UI/toolbars/Toolbar.js @@ -6,6 +6,11 @@ import SideContainerToggler from "../side_pannels/SideContainerToggler"; let emitter = null; let Toolbar; +/** + * Handlers for toolbar buttons. + * + * buttonId {string}: handler {function} + */ const buttonHandlers = { "toolbar_button_profile": function () { JitsiMeetJS.analytics.sendEvent('toolbar.profile.toggled'); @@ -124,6 +129,9 @@ const buttonHandlers = { } }; +/** + * All toolbars buttons description + */ const defaultToolbarButtons = { 'microphone': { id: 'toolbar_button_mute', @@ -194,6 +202,7 @@ const defaultToolbarButtons = { 'chat': { id: 'toolbar_button_chat', tooltipKey: 'toolbar.chat', + className: 'button icon-chat', shortcut: 'C', shortcutAttr: 'toggleChatPopover', shortcutFunc: function() { @@ -201,21 +210,31 @@ const defaultToolbarButtons = { APP.UI.toggleChat(); }, shortcutDescription: 'keyboardShortcuts.toggleChat', - sideContainerId: 'chat_container' + sideContainerId: 'chat_container', + html: ` + + ` }, 'contacts': { id: 'toolbar_contact_list', tooltipKey: 'bottomtoolbar.contactlist', - sideContainerId: 'contacts_container' + className: 'button icon-contactList', + sideContainerId: 'contacts_container', + html: ` + + ` }, 'profile': { id: 'toolbar_button_profile', tooltipKey: 'profile.setDisplayNameLabel', - sideContainerId: 'profile_container' + className: 'button', + sideContainerId: 'profile_container', + html: `` }, 'etherpad': { id: 'toolbar_button_etherpad', tooltipKey: 'toolbar.etherpad', + className: 'button icon-share-doc' }, 'fullscreen': { id: 'toolbar_button_fullScreen', @@ -234,6 +253,7 @@ const defaultToolbarButtons = { 'settings': { id: 'toolbar_button_settings', tooltipKey: 'toolbar.Settings', + className: 'button icon-settings', sideContainerId: "settings_container" }, 'hangup': { @@ -246,6 +266,7 @@ const defaultToolbarButtons = { 'filmstrip': { id: 'toolbar_film_strip', tooltipKey: 'toolbar.filmstrip', + className: "button icon-toggle-filmstrip", shortcut: "F", shortcutAttr: "filmstripPopover", shortcutFunc: function() { @@ -267,6 +288,34 @@ const defaultToolbarButtons = { shortcutDescription: "keyboardShortcuts.raiseHand", content: "Raise Hand", i18n: "[content]toolbar.raiseHand" + }, + //init and btn handler: Recording.initRecordingButton (Recording.js) + 'recording': { + id: 'toolbar_button_record', + tooltipKey: 'liveStreaming.buttonTooltip', + className: 'button' + }, + 'sharedvideo': { + id: 'toolbar_button_sharedvideo', + tooltipKey: 'toolbar.sharedvideo', + className: 'button icon-shared-video', + html: ` +` + }, + 'sip': { + id: 'toolbar_button_sip', + tooltipKey: 'toolbar.sip', + className: 'button icon-telephone' + }, + 'dialpad': { + id: 'toolbar_button_dialpad', + tooltipKey: 'toolbar.dialpad', + className: 'button icon-dialpad', + //TODO: remove it after UI.updateDTMFSupport fix + hidden: true } }; @@ -281,8 +330,7 @@ function showSipNumberInput () { let titleKey = "dialog.sipMsg"; let msgString = (` - `); + value="${defaultNumber}" autofocus>`); APP.UI.messageHandler.openTwoButtonDialog({ titleKey, @@ -297,6 +345,19 @@ function showSipNumberInput () { }); } +/** + * Get place for toolbar button. + * Now it can be in main toolbar or in extended (left) toolbar + * + * @param btn {string} + * @returns {string} + */ +function getToolbarButtonPlace (btn) { + return interfaceConfig.MAIN_TOOLBAR_BUTTONS.includes(btn) ? + 'main' : + 'extended'; +} + Toolbar = { init (eventEmitter) { emitter = eventEmitter; @@ -305,45 +366,14 @@ Toolbar = { this.toolbarSelector = $("#mainToolbarContainer"); this.extendedToolbarSelector = $("#extendedToolbar"); - // First hide all disabled buttons in the extended toolbar. - // TODO: Make the extended toolbar dynamically created. - UIUtil.hideDisabledButtons(defaultToolbarButtons); + // Initialise the toolbar buttons. + // The main toolbar will only take into account + // it's own configuration from interface_config. + this._initToolbarButtons(); - // Initialise the main toolbar. The main toolbar will only take into - // account it's own configuration from interface_config. - this._initMainToolbarButtons(); + this._setShortcutsAndTooltips(); - Object.keys(defaultToolbarButtons).forEach( - id => { - if (UIUtil.isButtonEnabled(id)) { - let button = defaultToolbarButtons[id]; - let buttonElement = document.getElementById(button.id); - - let tooltipPosition - = (interfaceConfig.MAIN_TOOLBAR_BUTTONS - .indexOf(id) > -1) - ? "bottom" : "right"; - - UIUtil.setTooltip( buttonElement, - button.tooltipKey, - tooltipPosition); - - if (button.shortcut) - APP.keyboardshortcut.registerShortcut( - button.shortcut, - button.shortcutAttr, - button.shortcutFunc, - button.shortcutDescription - ); - } - } - ); - - Object.keys(buttonHandlers).forEach( - buttonId => $(`#${buttonId}`).click(function(event) { - !$(this).prop('disabled') && buttonHandlers[buttonId](event); - }) - ); + this._setButtonHandlers(); APP.UI.addListener(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED, (containerId, isVisible) => { @@ -703,16 +733,17 @@ Toolbar = { }, /** - * Initialise main toolbar buttons. + * Initialise toolbar buttons. */ - _initMainToolbarButtons() { - interfaceConfig.MAIN_TOOLBAR_BUTTONS.forEach((value, index) => { + _initToolbarButtons() { + interfaceConfig.TOOLBAR_BUTTONS.forEach((value, index) => { + let place = getToolbarButtonPlace(value); + if (value && value in defaultToolbarButtons) { let button = defaultToolbarButtons[value]; - this._addMainToolbarButton( + this._addToolbarButton( button, - (index === 0), - (index === interfaceConfig.MAIN_TOOLBAR_BUTTONS.length -1), + place, (interfaceConfig.MAIN_TOOLBAR_SPLITTER_INDEX !== undefined && index === interfaceConfig.MAIN_TOOLBAR_SPLITTER_INDEX)); @@ -721,7 +752,7 @@ Toolbar = { }, /** - * Adds the given button to the main (top) toolbar. + * Adds the given button to the main (top) or extended (left) toolbar. * * @param {Object} the button to add. * @param {boolean} isFirst indicates if this is the first button in the @@ -731,16 +762,26 @@ Toolbar = { * @param {boolean} isSplitter if this button is a splitter button for * the dialog, which means that a special splitter style will be applied */ - _addMainToolbarButton(button, isFirst, isLast, isSplitter) { + _addToolbarButton(button, place, isSplitter) { + const places = { + main: 'mainToolbar', + extended: 'extendedToolbarButtons' + }; + let id = places[place]; let buttonElement = document.createElement("a"); if (button.className) buttonElement.className = button.className - + ((isFirst) ? " first" : "") - + ((isLast) ? " last" : "") - + ((isSplitter) ? " splitter": ""); + + ((isSplitter) ? " splitter": ""); buttonElement.id = button.id; + if (button.html) + buttonElement.innerHTML = button.html; + + //TODO: remove it after UI.updateDTMFSupport fix + if (button.hidden) + buttonElement.style.display = 'none'; + if (button.shortcutAttr) buttonElement.setAttribute("shortcut", button.shortcutAttr); @@ -754,7 +795,7 @@ Toolbar = { buttonElement.setAttribute("data-placement", "bottom"); this._addPopups(buttonElement, button.popups); - document.getElementById("mainToolbar") + document.getElementById(id) .appendChild(buttonElement); }, @@ -779,6 +820,52 @@ Toolbar = { */ _setToggledState(elementId, isToggled) { $("#" + elementId).toggleClass("toggled", isToggled); + }, + + /** + * Sets Shortcuts and Tooltips for all toolbar buttons + * + * @private + */ + _setShortcutsAndTooltips() { + Object.keys(defaultToolbarButtons).forEach( + id => { + if (UIUtil.isButtonEnabled(id)) { + let button = defaultToolbarButtons[id]; + let buttonElement = document.getElementById(button.id); + if (!buttonElement) return false; + let tooltipPosition + = (interfaceConfig.MAIN_TOOLBAR_BUTTONS + .indexOf(id) > -1) + ? "bottom" : "right"; + + UIUtil.setTooltip( buttonElement, + button.tooltipKey, + tooltipPosition); + + if (button.shortcut) + APP.keyboardshortcut.registerShortcut( + button.shortcut, + button.shortcutAttr, + button.shortcutFunc, + button.shortcutDescription + ); + } + } + ); + }, + + /** + * Sets Handlers for all toolbar buttons + * + * @private + */ + _setButtonHandlers() { + Object.keys(buttonHandlers).forEach( + buttonId => $(`#${buttonId}`).click(function(event) { + !$(this).prop('disabled') && buttonHandlers[buttonId](event); + }) + ); } };