diff --git a/css/_base.scss b/css/_base.scss
index 9fea2a28b..6491bcbb0 100644
--- a/css/_base.scss
+++ b/css/_base.scss
@@ -153,6 +153,10 @@ form {
display: inline-block !important;
}
+.show-list-item {
+ display: list-item !important;
+}
+
/**
* Shows a flex element.
*/
diff --git a/modules/UI/feedback/Feedback.js b/modules/UI/feedback/Feedback.js
index 37c36c796..f45b85ca4 100644
--- a/modules/UI/feedback/Feedback.js
+++ b/modules/UI/feedback/Feedback.js
@@ -1,31 +1,12 @@
/* global $, APP, JitsiMeetJS */
-import UIEvents from "../../../service/UI/UIEvents";
import FeedbackWindow from "./FeedbackWindow";
-/**
- * Shows / hides the feedback button.
- * @private
- */
-function _toggleFeedbackIcon() {
- document.querySelector('#feedbackButton').classList.toggle('hidden');
-}
-
-/**
- * Shows / hides the feedback button.
- * @param {show} set to {true} to show the feedback button or to {false}
- * to hide it
- * @private
- */
-function _showFeedbackButton (show) {
- document.querySelector('#feedbackButton').classList.toggle('hide', !show);
-}
-
/**
* Defines all methods in connection to the Feedback window.
*
* @type {{openFeedbackWindow: Function}}
*/
-var Feedback = {
+const Feedback = {
/**
* Initialise the Feedback functionality.
@@ -42,24 +23,15 @@ var Feedback = {
if (typeof this.enabled == "undefined")
this.enabled = true;
- _showFeedbackButton(this.enabled);
-
this.window = new FeedbackWindow();
+ this.emitter = emitter;
$("#feedbackButton").click(Feedback.openFeedbackWindow);
-
- // Show / hide the feedback button whenever the film strip is
- // shown / hidden.
- emitter.addListener(UIEvents.TOGGLE_FILM_STRIP, function () {
- _toggleFeedbackIcon();
- });
},
/**
* Enables/ disabled the feedback feature.
*/
enableFeedback: function (enable) {
- if (this.enabled !== enable)
- _showFeedbackButton(enable);
this.enabled = enable;
},
@@ -120,4 +92,4 @@ var Feedback = {
}
};
-module.exports = Feedback;
+export default Feedback;
diff --git a/modules/UI/recording/Recording.js b/modules/UI/recording/Recording.js
index c31ad939f..9f203a336 100644
--- a/modules/UI/recording/Recording.js
+++ b/modules/UI/recording/Recording.js
@@ -387,9 +387,16 @@ var Recording = {
* @param show {true} to show the recording button, {false} to hide it
*/
showRecordingButton (show) {
- var visibility = show && _isRecordingButtonEnabled();
- document.querySelector('#toolbar_button_record')
- .classList.toggle('hide', !visibility);
+ let isVisible = show && _isRecordingButtonEnabled();
+ let id = 'toolbar_button_record';
+
+ console.log('recording is visible', isVisible);
+
+ if (isVisible) {
+ UIUtil.showElement(id);
+ } else {
+ UIUtil.hideElement(id);
+ }
},
/**
@@ -472,6 +479,13 @@ var Recording = {
labelSelector.css({display: "inline-block"});
// Recording spinner
+ let spinnerId = 'recordingSpinner';
+ if(recordingState === Status.RETRYING) {
+ UIUtil.showElement(spinnerId);
+ } else {
+ UIUtil.hideElement(spinnerId);
+ }
+
document.querySelector('#recordingSpinner').classList
.toggle('show-inline', recordingState === Status.RETRYING);
},
diff --git a/modules/UI/side_pannels/chat/Chat.js b/modules/UI/side_pannels/chat/Chat.js
index 7ddbec2b3..195b415a5 100644
--- a/modules/UI/side_pannels/chat/Chat.js
+++ b/modules/UI/side_pannels/chat/Chat.js
@@ -293,11 +293,18 @@ var Chat = {
* @param subject the subject
*/
setSubject (subject) {
+ let toggleFunction;
if (subject) {
subject = subject.trim();
+ toggleFunction = UIUtil.showElement.bind(UIUtil);
+ } else {
+ toggleFunction = UIUtil.hideElement.bind(UIUtil);
}
- $('#subject').html(linkify(UIUtil.escapeHtml(subject)));
- document.querySelector('#subject').classList.toggle('hide', !subject);
+
+ let subjectId = 'subject';
+ let html = linkify(UIUtil.escapeHtml(subject));
+ $(`#${subjectId}`).html(html);
+ toggleFunction(subjectId);
},
/**
diff --git a/modules/UI/toolbars/Toolbar.js b/modules/UI/toolbars/Toolbar.js
index 97a92d545..e87c736af 100644
--- a/modules/UI/toolbars/Toolbar.js
+++ b/modules/UI/toolbars/Toolbar.js
@@ -417,8 +417,12 @@ Toolbar = {
* @param show true to show or false to hide
*/
showAuthenticateButton (show) {
- document.querySelector('#authenticationContainer')
- .classList.toggle('hide', !show);
+ let id = 'authenticationContainer';
+ if (show) {
+ UIUtil.showElement(id);
+ } else {
+ UIUtil.hideElement(id);
+ }
},
showEtherpadButton () {
@@ -429,12 +433,17 @@ Toolbar = {
// Shows or hides the 'shared video' button.
showSharedVideoButton () {
- if (!UIUtil.isButtonEnabled('sharedvideo')) {
- return;
+ let id = 'toolbar_button_sharedvideo';
+ let shouldShow = UIUtil.isButtonEnabled('sharedvideo')
+ && !config.disableThirdPartyRequests;
+
+ if (shouldShow) {
+ let el = document.getElementById(id);
+ UIUtil.setTooltip(el, 'toolbar.sharedvideo', 'right');
+ UIUtil.showElement(id);
+ } else {
+ UIUtil.hideElement(id);
}
- var el = document.querySelector('#toolbar_button_sharedvideo');
- UIUtil.setTooltip(el, 'toolbar.sharedvideo', 'right');
- el.classList.toggle('hide', config.disableThirdPartyRequests === true);
},
// checks whether desktop sharing is enabled and whether
@@ -448,20 +457,26 @@ Toolbar = {
// Shows or hides SIP calls button
showSipCallButton (show) {
- if (!UIUtil.isButtonEnabled('sip')) {
- return;
+ let shouldShow = APP.conference.sipGatewayEnabled()
+ && UIUtil.isButtonEnabled('sip') && show;
+ let id = 'toolbar_button_sip';
+
+ if (shouldShow) {
+ UIUtil.showElement(id);
+ } else {
+ UIUtil.hideElement(id);
}
- document.querySelector('#toolbar_button_sip').classList
- .toggle('hide', !(show && APP.conference.sipGatewayEnabled()));
},
// Shows or hides the dialpad button
showDialPadButton (show) {
- if (!UIUtil.isButtonEnabled('dialpad')) {
- return;
+ let shouldShow = UIUtil.isButtonEnabled('dialpad') && show;
+ let id = 'toolbar_button_dialpad';
+ if (shouldShow) {
+ UIUtil.showElement(id);
+ } else {
+ UIUtil.hideElement(id);
}
- document.querySelector('#toolbar_button_dialpad')
- .classList.toggle('hide', !show);
},
/**
@@ -469,9 +484,14 @@ Toolbar = {
* @param authIdentity identity name to be displayed.
*/
setAuthenticatedIdentity (authIdentity) {
- let selector = $('#toolbar_auth_identity');
- selector.text(authIdentity ? authIdentity : '');
- selector.get(0).classList.toggle('hide', !authIdentity);
+ let id = 'toolbar_auth_identity';
+ if(authIdentity) {
+ UIUtil.showElement(id);
+ $(`#${id}`).text(authIdentity);
+ } else {
+ UIUtil.hideElement(id);
+ $(`#${id}`).text('');
+ }
},
/**
@@ -479,8 +499,12 @@ Toolbar = {
* @param show true to show
*/
showLoginButton (show) {
- document.querySelector('#toolbar_button_login')
- .classList.toggle('hide', !show);
+ let id = 'toolbar_button_login';
+ if (show) {
+ UIUtil.showElement(id);
+ } else {
+ UIUtil.hideElement(id);
+ }
},
/**
@@ -488,8 +512,12 @@ Toolbar = {
* @param show true to show
*/
showLogoutButton (show) {
- document.querySelector('#toolbar_button_logout')
- .classList.toggle('hide', !show);
+ let id = 'toolbar_button_logout';
+ if (show) {
+ UIUtil.showElement(id);
+ } else {
+ UIUtil.hideElement(id);
+ }
},
/**
diff --git a/modules/UI/util/UIUtil.js b/modules/UI/util/UIUtil.js
index 708e3fb65..575f94f9e 100644
--- a/modules/UI/util/UIUtil.js
+++ b/modules/UI/util/UIUtil.js
@@ -18,6 +18,15 @@ const TOOLTIP_POSITIONS = {
'top-right': 'sw'
};
+/**
+ * Associates the default display type with corresponding CSS class
+ */
+const SHOW_CLASSES = {
+ 'block': 'show',
+ 'inline': 'show-inline',
+ 'list-item': 'show-list-item'
+};
+
/**
* Created by hristo on 12/22/14.
*/
@@ -229,7 +238,9 @@ const TOOLTIP_POSITIONS = {
element.classList.remove('hide');
}
- element.classList.add('show');
+ let type = this.getElementDefaultDisplay(element.tagName);
+ let className = SHOW_CLASSES[type];
+ element.classList.add(className);
},
/**
@@ -244,13 +255,31 @@ const TOOLTIP_POSITIONS = {
return;
}
- if(element.classList.contains('show')) {
- element.classList.remove('show');
+ let type = this.getElementDefaultDisplay(element.tagName);
+ let className = SHOW_CLASSES[type];
+
+ if(element.classList.contains(className)) {
+ element.classList.remove(className);
}
element.classList.add('hide');
},
+ /**
+ * Returns default display style for the tag
+ * @param tag
+ * @returns {*}
+ */
+ getElementDefaultDisplay(tag) {
+ let tempElement = document.createElement(tag);
+
+ document.body.appendChild(tempElement);
+ let style = window.getComputedStyle(tempElement).display;
+ document.body.removeChild(tempElement);
+
+ return style;
+ },
+
/**
* Shows / hides the element with the given jQuery selector.
*