Adds tooltips
This commit is contained in:
yanas
parent
531e3d2765
commit
96bbf0419c
8
app.js
8
app.js
|
|
@ -8,10 +8,14 @@ import "jquery-ui";
|
|||
import "strophe";
|
||||
import "strophe-disco";
|
||||
import "strophe-caps";
|
||||
import "tooltip";
|
||||
import "popover";
|
||||
import "jQuery-Impromptu";
|
||||
import "autosize";
|
||||
|
||||
import 'aui';
|
||||
import 'aui-experimental';
|
||||
import 'aui-css';
|
||||
import 'aui-experimental-css';
|
||||
|
||||
window.toastr = require("toastr");
|
||||
|
||||
import URLProcessor from "./modules/config/URLProcessor";
|
||||
|
|
|
|||
|
|
@ -129,6 +129,7 @@ a.button:hover,
|
|||
a.button:active,
|
||||
a.button.selected {
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
// sum opacity with background layer should give us 0.8
|
||||
background: $toolbarSelectBackground;
|
||||
}
|
||||
|
|
|
|||
30
index.html
30
index.html
|
|
@ -120,28 +120,28 @@
|
|||
</li>
|
||||
</ul>
|
||||
</span>
|
||||
<a class="button icon-contactList" id="toolbar_contact_list" data-container="body" data-toggle="popover" data-placement="right" shortcut="contactlistpopover" data-i18n="[content]bottomtoolbar.contactlist" content="Open / close contact list">
|
||||
<a class="button icon-contactList" id="toolbar_contact_list" shortcut="contactlistpopover">
|
||||
<span id="numberOfParticipants"></span>
|
||||
</a>
|
||||
<!--a class="button icon-link" id="toolbar_button_link" data-container="body" data-toggle="popover" data-placement="right" data-i18n="[content]toolbar.invite" content="Invite others"></a-->
|
||||
<a class="button icon-chat" id="toolbar_button_chat" data-container="body" data-toggle="popover" shortcut="toggleChatPopover" data-placement="right" data-i18n="[content]toolbar.chat" content="Open / close chat">
|
||||
<!--a class="button icon-link" id="toolbar_button_link"></a-->
|
||||
<a class="button icon-chat" id="toolbar_button_chat" shortcut="toggleChatPopover">
|
||||
<span id="unreadMessages"></span>
|
||||
</a>
|
||||
<a class="button" id="toolbar_button_record" data-container="body" data-toggle="popover" data-placement="right" style="display: none"></a>
|
||||
<a class="button icon-security" id="toolbar_button_security" data-container="body" data-toggle="popover" data-placement="right" data-i18n="[content]toolbar.lock" content="Lock / unlock room"></a>
|
||||
<a class="button icon-share-doc" id="toolbar_button_etherpad" data-container="body" data-toggle="popover" data-placement="right" content="Shared document" data-i18n="[content]toolbar.etherpad"></a>
|
||||
<a class="button icon-shared-video" id="toolbar_button_sharedvideo" data-container="body" data-toggle="popover" data-placement="right" content="Share a YouTube video" data-i18n="[content]toolbar.sharedvideo" style="display: none">
|
||||
<a class="button" id="toolbar_button_record" style="display: none"></a>
|
||||
<a class="button icon-security" id="toolbar_button_security"></a>
|
||||
<a class="button icon-share-doc" id="toolbar_button_etherpad"></a>
|
||||
<a class="button icon-shared-video" id="toolbar_button_sharedvideo" style="display: none">
|
||||
<ul id="sharedVideoMutedPopup" class="loginmenu extendedToolbarPopup">
|
||||
<li data-i18n="[html]toolbar.sharedVideoMutedPopup"></li>
|
||||
</ul>
|
||||
</a>
|
||||
<a class="button icon-telephone" id="toolbar_button_sip" data-container="body" data-toggle="popover" data-placement="right" content="Call SIP number" data-i18n="[content]toolbar.sip" style="display: none"></a>
|
||||
<a class="button icon-dialpad" id="toolbar_button_dialpad" data-container="body" data-toggle="popover" data-placement="right" content="Open dialpad" data-i18n="[content]toolbar.dialpad" style="display: none"></a>
|
||||
<a class="button icon-settings" id="toolbar_button_settings" data-container="body" data-toggle="popover" data-placement="right" content="Settings" data-i18n="[content]toolbar.Settings"></a>
|
||||
<a class="button icon-raised-hand" id="toolbar_button_raisehand" data-container="body" data-toggle="popover" data-placement="right" data-i18n="[content]toolbar.raiseHand" content="Raise Hand" shortcut="raiseHandPopover"></a>
|
||||
<a class="button icon-full-screen" id="toolbar_button_fullScreen" data-container="body" data-toggle="popover" data-placement="right" shortcut="toggleFullscreenPopover" data-i18n="[content]toolbar.fullscreen" content="Enter / Exit Full Screen"></a>
|
||||
<a class="button icon-toggle-filmstrip" id="toolbar_film_strip" data-container="body" data-toggle="popover" shortcut="filmstripPopover" data-placement="right" data-i18n="[content]toolbar.filmstrip" content="Show / hide videos"></a>
|
||||
<a class="button icon-feedback" id="feedbackButton" data-container="body" data-toggle="popover" data-placement="right" data-i18n="[content]feedback"></a>
|
||||
<a class="button icon-telephone" id="toolbar_button_sip" style="display: none"></a>
|
||||
<a class="button icon-dialpad" id="toolbar_button_dialpad" style="display: none"></a>
|
||||
<a class="button icon-settings" id="toolbar_button_settings"></a>
|
||||
<a class="button icon-raised-hand" id="toolbar_button_raisehand" shortcut="raiseHandPopover"></a>
|
||||
<a class="button icon-full-screen" id="toolbar_button_fullScreen" shortcut="toggleFullscreenPopover"></a>
|
||||
<a class="button icon-toggle-filmstrip" id="toolbar_film_strip" data-container="body" shortcut="filmstripPopover"></a>
|
||||
<a class="button icon-feedback" id="feedbackButton"></a>
|
||||
<div id="sideToolbarContainer">
|
||||
<div id="profile_container" class="sideToolbarContainer__inner">
|
||||
<div class="title" data-i18n="profile.title"></div>
|
||||
|
|
@ -208,7 +208,7 @@
|
|||
<input type="checkbox" id="followMeCheckBox">
|
||||
<label class="followMeLabel" for="followMeCheckBox" data-i18n="settings.followMe"></label>
|
||||
</div>
|
||||
<a id="downloadlog" data-container="body" data-toggle="popover" data-placement="right" data-i18n="[data-content]downloadlogs" ><i class="icon-download"></i></a>
|
||||
<a id="downloadlog" data-container="body"><i class="icon-download"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -140,10 +140,14 @@ var Feedback = {
|
|||
|
||||
_showFeedbackButton(this.enabled);
|
||||
|
||||
$("#feedbackButton").click(function (event) {
|
||||
let $feedbackButton = $("#feedbackButton");
|
||||
|
||||
$feedbackButton.click(function (event) {
|
||||
Feedback.openFeedbackWindow();
|
||||
});
|
||||
|
||||
UIUtil.setTooltip($feedbackButton.get(0), 'feedback', 'right');
|
||||
|
||||
// Show / hide the feedback button whenever the film strip is
|
||||
// shown / hidden.
|
||||
emitter.addListener(UIEvents.TOGGLE_FILM_STRIP, function () {
|
||||
|
|
|
|||
|
|
@ -339,6 +339,22 @@ UI.handleToggleFilmStrip = () => {
|
|||
VideoLayout.resizeVideoArea(true, false);
|
||||
};
|
||||
|
||||
/**
|
||||
* Sets tooltip defaults.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
function _setTooltipDefaults() {
|
||||
$.fn.tooltip.defaults = {
|
||||
opacity: 1, //defaults to 1
|
||||
offset: 1,
|
||||
delayIn: 0, //defaults to 500
|
||||
hoverable: true,
|
||||
hideOnClick: true,
|
||||
aria: true
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup some UI event listeners.
|
||||
*/
|
||||
|
|
@ -431,6 +447,9 @@ UI.start = function () {
|
|||
// Set the defaults for prompt dialogs.
|
||||
$.prompt.setDefaults({persistent: false});
|
||||
|
||||
// Set the defaults for tooltips.
|
||||
_setTooltipDefaults();
|
||||
|
||||
registerListeners();
|
||||
|
||||
ToolbarToggler.init();
|
||||
|
|
@ -476,7 +495,6 @@ UI.start = function () {
|
|||
$("#downloadlog").css("display", "none");
|
||||
FilmStrip.setupFilmStripOnly();
|
||||
messageHandler.enableNotifications(false);
|
||||
$('body').popover("disable");
|
||||
JitsiPopover.enabled = false;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -270,6 +270,9 @@ var Recording = {
|
|||
initRecordingButton(recordingType) {
|
||||
let selector = $('#toolbar_button_record');
|
||||
|
||||
let button = selector.get(0);
|
||||
UIUtil.setTooltip(button, 'liveStreaming.buttonTooltip', 'right');
|
||||
|
||||
if (recordingType === 'jibri') {
|
||||
this.baseClass = "fa fa-play-circle";
|
||||
this.recordingTitle = "dialog.liveStreaming";
|
||||
|
|
|
|||
|
|
@ -180,6 +180,7 @@ const buttonHandlers = {
|
|||
const defaultToolbarButtons = {
|
||||
'microphone': {
|
||||
id: 'toolbar_button_mute',
|
||||
tooltipKey: 'toolbar.mute',
|
||||
className: "button icon-microphone",
|
||||
shortcut: 'M',
|
||||
shortcutAttr: 'mutePopover',
|
||||
|
|
@ -205,6 +206,7 @@ const defaultToolbarButtons = {
|
|||
},
|
||||
'camera': {
|
||||
id: 'toolbar_button_camera',
|
||||
tooltipKey: 'toolbar.videomute',
|
||||
className: "button icon-camera",
|
||||
shortcut: 'V',
|
||||
shortcutAttr: 'toggleVideoPopover',
|
||||
|
|
@ -218,6 +220,7 @@ const defaultToolbarButtons = {
|
|||
},
|
||||
'desktop': {
|
||||
id: 'toolbar_button_desktopsharing',
|
||||
tooltipKey: 'toolbar.sharescreen',
|
||||
className: 'button icon-share-desktop',
|
||||
shortcut: 'D',
|
||||
shortcutAttr: 'toggleDesktopSharingPopover',
|
||||
|
|
@ -230,16 +233,19 @@ const defaultToolbarButtons = {
|
|||
i18n: '[content]toolbar.sharescreen'
|
||||
},
|
||||
'security': {
|
||||
id: 'toolbar_button_security'
|
||||
id: 'toolbar_button_security',
|
||||
tooltipKey: 'toolbar.lock'
|
||||
},
|
||||
'invite': {
|
||||
id: 'toolbar_button_link',
|
||||
tooltipKey: 'toolbar.invite',
|
||||
className: 'button icon-link',
|
||||
content: 'Invite others',
|
||||
i18n: '[content]toolbar.invite'
|
||||
},
|
||||
'chat': {
|
||||
id: 'toolbar_button_chat',
|
||||
tooltipKey: 'toolbar.chat',
|
||||
shortcut: 'C',
|
||||
shortcutAttr: 'toggleChatPopover',
|
||||
shortcutFunc: function() {
|
||||
|
|
@ -251,17 +257,21 @@ const defaultToolbarButtons = {
|
|||
},
|
||||
'contacts': {
|
||||
id: 'toolbar_contact_list',
|
||||
tooltipKey: 'bottomtoolbar.contactlist',
|
||||
sideContainerId: 'contacts_container'
|
||||
},
|
||||
'profile': {
|
||||
id: 'toolbar_button_profile',
|
||||
tooltipKey: 'profile.setDisplayNameLabel',
|
||||
sideContainerId: 'profile_container'
|
||||
},
|
||||
'etherpad': {
|
||||
id: 'toolbar_button_etherpad'
|
||||
id: 'toolbar_button_etherpad',
|
||||
tooltipKey: 'toolbar.etherpad',
|
||||
},
|
||||
'fullscreen': {
|
||||
id: 'toolbar_button_fullScreen',
|
||||
tooltipKey: 'toolbar.fullscreen',
|
||||
className: "button icon-full-screen",
|
||||
shortcut: 'F',
|
||||
shortcutAttr: 'toggleFullscreenPopover',
|
||||
|
|
@ -275,16 +285,19 @@ const defaultToolbarButtons = {
|
|||
},
|
||||
'settings': {
|
||||
id: 'toolbar_button_settings',
|
||||
tooltipKey: 'toolbar.Settings',
|
||||
sideContainerId: "settings_container"
|
||||
},
|
||||
'hangup': {
|
||||
id: 'toolbar_button_hangup',
|
||||
tooltipKey: 'toolbar.hangup',
|
||||
className: "button icon-hangup",
|
||||
content: "Hang Up",
|
||||
i18n: "[content]toolbar.hangup"
|
||||
},
|
||||
'filmstrip': {
|
||||
id: 'toolbar_film_strip',
|
||||
tooltipKey: 'toolbar.filmstrip',
|
||||
shortcut: "F",
|
||||
shortcutAttr: "filmstripPopover",
|
||||
shortcutFunc: function() {
|
||||
|
|
@ -295,6 +308,7 @@ const defaultToolbarButtons = {
|
|||
},
|
||||
'raisehand': {
|
||||
id: "toolbar_button_raisehand",
|
||||
tooltipKey: 'toolbar.raiseHand',
|
||||
className: "button icon-raised-hand",
|
||||
shortcut: "R",
|
||||
shortcutAttr: "raiseHandPopover",
|
||||
|
|
@ -351,7 +365,17 @@ const Toolbar = {
|
|||
Object.keys(defaultToolbarButtons).forEach(
|
||||
id => {
|
||||
if (UIUtil.isButtonEnabled(id)) {
|
||||
var button = defaultToolbarButtons[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(
|
||||
|
|
@ -452,9 +476,11 @@ const Toolbar = {
|
|||
|
||||
// Shows or hides the 'shared video' button.
|
||||
showSharedVideoButton () {
|
||||
let $element = $('#toolbar_button_sharedvideo');
|
||||
if (UIUtil.isButtonEnabled('sharedvideo')
|
||||
&& config.disableThirdPartyRequests !== true) {
|
||||
$('#toolbar_button_sharedvideo').css({display: "inline-block"});
|
||||
$element.css({display: "inline-block"});
|
||||
UIUtil.setTooltip($element.get(0), 'toolbar.sharedvideo', 'right');
|
||||
} else {
|
||||
$('#toolbar_button_sharedvideo').css({display: "none"});
|
||||
}
|
||||
|
|
@ -744,7 +770,6 @@ const Toolbar = {
|
|||
buttonElement.setAttribute("data-i18n", button.i18n);
|
||||
|
||||
buttonElement.setAttribute("data-container", "body");
|
||||
buttonElement.setAttribute("data-toggle", "popover");
|
||||
buttonElement.setAttribute("data-placement", "bottom");
|
||||
this._addPopups(buttonElement, button.popups);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
/* global $, config, interfaceConfig */
|
||||
/* global $, APP, config, AJS, interfaceConfig */
|
||||
|
||||
import KeyboardShortcut from '../../keyboardshortcut/keyboardshortcut';
|
||||
|
||||
/**
|
||||
* Created by hristo on 12/22/14.
|
||||
|
|
@ -82,12 +84,50 @@
|
|||
context.putImageData(imgData, 0, 0);
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets the tooltip to the given element.
|
||||
*
|
||||
* @param element the element to set the tooltip to
|
||||
* @param key the tooltip data-i18n key
|
||||
* @param position the position of the tooltip in relation to the element
|
||||
*/
|
||||
setTooltip: function (element, key, position) {
|
||||
element.setAttribute("data-i18n", "[data-content]" + key);
|
||||
element.setAttribute("data-toggle", "popover");
|
||||
element.setAttribute("data-placement", position);
|
||||
element.setAttribute("data-html", true);
|
||||
element.setAttribute("data-container", "body");
|
||||
let positions = {
|
||||
'top': 's',
|
||||
'top-left': 'se',
|
||||
'left': 'e',
|
||||
'bottom-left': 'ne',
|
||||
'bottom': 'n',
|
||||
'bottom-right': 'nw',
|
||||
'right': 'w',
|
||||
'top-right': 'sw'
|
||||
};
|
||||
|
||||
element.setAttribute("data-i18n", "[content]" + key);
|
||||
APP.translation.translateElement($(element));
|
||||
|
||||
AJS.$(element).tooltip({
|
||||
gravity: positions[position],
|
||||
title: this._getTooltipText.bind(this, element),
|
||||
html: true
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Internal util function for generating tooltip title.
|
||||
*
|
||||
* @param element
|
||||
* @returns {string|*}
|
||||
* @private
|
||||
*/
|
||||
_getTooltipText: function (element) {
|
||||
let title = element.getAttribute('content');
|
||||
let shortcut = element.getAttribute('shortcut');
|
||||
if(shortcut) {
|
||||
let shortcutString = KeyboardShortcut.getShortcutTooltip(shortcut);
|
||||
title += ` ${shortcutString}`;
|
||||
}
|
||||
return title;
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -197,7 +197,6 @@ SmallVideo.prototype.showAudioIndicator = function(isMuted) {
|
|||
|
||||
if (!isMuted) {
|
||||
if (audioMutedSpan.length > 0) {
|
||||
audioMutedSpan.popover('hide');
|
||||
audioMutedSpan.remove();
|
||||
this.updateIconPositions();
|
||||
}
|
||||
|
|
@ -304,7 +303,7 @@ SmallVideo.prototype.createModeratorIndicatorElement = function () {
|
|||
|
||||
UIUtil.setTooltip(indicatorSpan[0],
|
||||
"videothumbnail.moderator",
|
||||
"top");
|
||||
"top-left");
|
||||
|
||||
//translates text in focus indicators
|
||||
APP.translation
|
||||
|
|
|
|||
|
|
@ -74,13 +74,6 @@ var KeyboardShortcut = {
|
|||
}
|
||||
}
|
||||
};
|
||||
$('body').popover({ selector: '[data-toggle=popover]',
|
||||
trigger: 'click hover',
|
||||
content: function() {
|
||||
return this.getAttribute("content")
|
||||
+ self._getShortcutTooltip(this.getAttribute("shortcut"));
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -128,7 +121,7 @@ var KeyboardShortcut = {
|
|||
* or an empty string if the shortcutAttr is null, an empty string or not
|
||||
* found in the shortcut mapping
|
||||
*/
|
||||
_getShortcutTooltip: function (shortcutAttr) {
|
||||
getShortcutTooltip: function (shortcutAttr) {
|
||||
if (typeof shortcutAttr === "string" && shortcutAttr.length > 0) {
|
||||
for (var key in _shortcuts) {
|
||||
if (_shortcuts.hasOwnProperty(key)
|
||||
|
|
|
|||
10
package.json
10
package.json
|
|
@ -16,6 +16,7 @@
|
|||
"readmeFilename": "README.md",
|
||||
"//": "Callstats.io does not work with recent versions of jsSHA (2.0.1 in particular)",
|
||||
"dependencies": {
|
||||
"@atlassian/aui": "^6.0.0",
|
||||
"async": "0.9.0",
|
||||
"autosize": "^1.18.13",
|
||||
"bootstrap": "3.1.1",
|
||||
|
|
@ -83,7 +84,11 @@
|
|||
"tooltip": "./node_modules/bootstrap/js/tooltip.js",
|
||||
"popover": "./node_modules/bootstrap/js/popover.js",
|
||||
"jQuery-Impromptu": "./node_modules/jQuery-Impromptu/dist/jquery-impromptu.js",
|
||||
"autosize": "./node_modules/autosize/build/jquery.autosize.js"
|
||||
"autosize": "./node_modules/autosize/build/jquery.autosize.js",
|
||||
"aui": "./node_modules/@atlassian/aui/dist/aui/js/aui.js",
|
||||
"aui-experimental": "./node_modules/@atlassian/aui/dist/aui/js/aui-experimental.js",
|
||||
"aui-css": "./node_modules/@atlassian/aui/dist/aui/css/aui.min.css",
|
||||
"aui-experimental-css": "./node_modules/@atlassian/aui/dist/aui/css/aui-experimental.min.css"
|
||||
},
|
||||
"browserify-shim": {
|
||||
"jquery": [
|
||||
|
|
@ -109,6 +114,9 @@
|
|||
"jQuery-Impromptu": {
|
||||
"depends": "jquery:jQuery"
|
||||
},
|
||||
"aui-experimental": {
|
||||
"depends": "aui:AJS"
|
||||
},
|
||||
"jquery-contextmenu": {
|
||||
"depends": "jquery:jQuery"
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue