apitech
/
jitsi-meet
mirror of https://github.com/jitsi/jitsi-meet
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Adds tooltips

Browse Source
pull/886/head 1254
yanas 9 years ago
parent 531e3d2765
commit 96bbf0419c
11 changed files with 136 additions and 41 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 8
      app.js
  2. 1
      css/_toolbars.scss
  3. 30
      index.html
  4. 6
      modules/UI/Feedback.js
  5. 20
      modules/UI/UI.js
  6. 3
      modules/UI/recording/Recording.js
  7. 35
      modules/UI/toolbars/Toolbar.js
  8. 52
      modules/UI/util/UIUtil.js
  9. 3
      modules/UI/videolayout/SmallVideo.js
  10. 9
      modules/keyboardshortcut/keyboardshortcut.js
  11. 10
      package.json

8
app.js
Unescape View File

@ -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";

1
css/_toolbars.scss
Unescape View File

@ -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
Unescape View File

@ -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>

6
modules/UI/Feedback.js
Unescape View File

@ -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 () {

20
modules/UI/UI.js
Unescape View File

@ -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;
}

3
modules/UI/recording/Recording.js
Unescape View File

@ -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";

35
modules/UI/toolbars/Toolbar.js
Unescape View File

@ -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);

52
modules/UI/util/UIUtil.js
Unescape View File

@ -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;
},
/**

3
modules/UI/videolayout/SmallVideo.js
Unescape View File

@ -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

9
modules/keyboardshortcut/keyboardshortcut.js
Unescape View File

@ -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
Unescape View File

@ -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"
},

Write Preview
Loading…
Cancel
Save