ref(tooltips): remove old tooltips
This commit is contained in:
parent
e3361e2f3b
commit
28b4595561
|
@ -119,21 +119,6 @@ form {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Tooltips
|
|
||||||
**/
|
|
||||||
.tipsy {
|
|
||||||
z-index: $tooltipsZ;
|
|
||||||
&-inner {
|
|
||||||
background-color: $tooltipBg;
|
|
||||||
max-width: 350px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-arrow {
|
|
||||||
border-color: $tooltipBg;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Dialogs fade
|
* Dialogs fade
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -28,7 +28,6 @@ $defaultColor: #F1F1F1;
|
||||||
$defaultSideBarFontColor: #44A5FF;
|
$defaultSideBarFontColor: #44A5FF;
|
||||||
$defaultSemiDarkColor: #ACACAC;
|
$defaultSemiDarkColor: #ACACAC;
|
||||||
$defaultDarkColor: #2b3d5c;
|
$defaultDarkColor: #2b3d5c;
|
||||||
$tooltipBg: rgba(0,0,0, 0.7);
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Toolbar
|
* Toolbar
|
||||||
|
|
|
@ -10,7 +10,6 @@ import Avatar from "./avatar/Avatar";
|
||||||
import SideContainerToggler from "./side_pannels/SideContainerToggler";
|
import SideContainerToggler from "./side_pannels/SideContainerToggler";
|
||||||
import messageHandler from "./util/MessageHandler";
|
import messageHandler from "./util/MessageHandler";
|
||||||
import UIUtil from "./util/UIUtil";
|
import UIUtil from "./util/UIUtil";
|
||||||
import { activateTooltips } from './util/Tooltip';
|
|
||||||
import UIEvents from "../../service/UI/UIEvents";
|
import UIEvents from "../../service/UI/UIEvents";
|
||||||
import EtherpadManager from './etherpad/Etherpad';
|
import EtherpadManager from './etherpad/Etherpad';
|
||||||
import SharedVideoManager from './shared_video/SharedVideo';
|
import SharedVideoManager from './shared_video/SharedVideo';
|
||||||
|
@ -232,8 +231,6 @@ UI.initConference = function () {
|
||||||
// to the UI (depending on the moderator role of the local participant) and
|
// to the UI (depending on the moderator role of the local participant) and
|
||||||
// (2) APP.conference as means of communication between the participants.
|
// (2) APP.conference as means of communication between the participants.
|
||||||
followMeHandler = new FollowMe(APP.conference, UI);
|
followMeHandler = new FollowMe(APP.conference, UI);
|
||||||
|
|
||||||
activateTooltips();
|
|
||||||
};
|
};
|
||||||
|
|
||||||
UI.mucJoined = function () {
|
UI.mucJoined = function () {
|
||||||
|
@ -249,22 +246,6 @@ UI.mucJoined = function () {
|
||||||
*/
|
*/
|
||||||
UI.handleToggleFilmstrip = () => UI.toggleFilmstrip();
|
UI.handleToggleFilmstrip = () => UI.toggleFilmstrip();
|
||||||
|
|
||||||
/**
|
|
||||||
* 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
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Returns the shared document manager object.
|
* Returns the shared document manager object.
|
||||||
* @return {EtherpadManager} the shared document manager object
|
* @return {EtherpadManager} the shared document manager object
|
||||||
|
@ -285,8 +266,6 @@ UI.start = function () {
|
||||||
// Set the defaults for prompt dialogs.
|
// Set the defaults for prompt dialogs.
|
||||||
$.prompt.setDefaults({persistent: false});
|
$.prompt.setDefaults({persistent: false});
|
||||||
|
|
||||||
// Set the defaults for tooltips.
|
|
||||||
_setTooltipDefaults();
|
|
||||||
|
|
||||||
SideContainerToggler.init(eventEmitter);
|
SideContainerToggler.init(eventEmitter);
|
||||||
Filmstrip.init(eventEmitter);
|
Filmstrip.init(eventEmitter);
|
||||||
|
|
|
@ -1,86 +0,0 @@
|
||||||
/* global $, APP, AJS */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Associates tooltip element position (in the terms of
|
|
||||||
* {@link UIUtil#setTooltip} which do not look like CSS <tt>position</tt>) with
|
|
||||||
* AUI tooltip <tt>gravity</tt>.
|
|
||||||
*/
|
|
||||||
const TOOLTIP_POSITIONS = {
|
|
||||||
'bottom': 'n',
|
|
||||||
'bottom-left': 'ne',
|
|
||||||
'bottom-right': 'nw',
|
|
||||||
'left': 'e',
|
|
||||||
'right': 'w',
|
|
||||||
'top': 's',
|
|
||||||
'top-left': 'se',
|
|
||||||
'top-right': 'sw'
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Sets a global handler for all tooltips. Once invoked, create a new
|
|
||||||
* tooltip by merely updating a DOM node with the appropriate class (e.g.
|
|
||||||
* <tt>tooltip-n</tt>) and the attribute <tt>content</tt>.
|
|
||||||
*/
|
|
||||||
export function activateTooltips() {
|
|
||||||
AJS.$('[data-tooltip]').tooltip({
|
|
||||||
gravity() {
|
|
||||||
return this.getAttribute('data-tooltip');
|
|
||||||
},
|
|
||||||
|
|
||||||
title() {
|
|
||||||
return this.getAttribute('content');
|
|
||||||
},
|
|
||||||
|
|
||||||
html: true, // Handle multiline tooltips.
|
|
||||||
|
|
||||||
// The following two prevent tooltips from being stuck:
|
|
||||||
hoverable: false, // Make custom tooltips behave like native ones.
|
|
||||||
live: true // Attach listener to document element.
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 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
|
|
||||||
*/
|
|
||||||
export function setTooltip(element, key, position) {
|
|
||||||
if (element) {
|
|
||||||
const selector = element.jquery ? element : $(element);
|
|
||||||
|
|
||||||
selector.attr('data-tooltip', TOOLTIP_POSITIONS[position]);
|
|
||||||
selector.attr('data-i18n', `[content]${key}`);
|
|
||||||
|
|
||||||
APP.translation.translateElement(selector);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Sets the tooltip to the given element, but instead of using translation
|
|
||||||
* key uses text value.
|
|
||||||
*
|
|
||||||
* @param element the element to set the tooltip to
|
|
||||||
* @param text the tooltip text
|
|
||||||
* @param position the position of the tooltip in relation to the element
|
|
||||||
*/
|
|
||||||
export function setTooltipText(element, text, position) {
|
|
||||||
if (element) {
|
|
||||||
removeTooltip(element);
|
|
||||||
|
|
||||||
element.setAttribute('data-tooltip', TOOLTIP_POSITIONS[position]);
|
|
||||||
element.setAttribute('content', text);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Removes the tooltip to the given element.
|
|
||||||
*
|
|
||||||
* @param element the element to remove the tooltip from
|
|
||||||
*/
|
|
||||||
export function removeTooltip(element) {
|
|
||||||
element.removeAttribute('data-tooltip', '');
|
|
||||||
element.removeAttribute('data-i18n','');
|
|
||||||
element.removeAttribute('content','');
|
|
||||||
}
|
|
|
@ -121,8 +121,6 @@
|
||||||
"aui-experimental-css": "./node_modules/@atlassian/aui/dist/aui/css/aui-experimental.min.css",
|
"aui-experimental-css": "./node_modules/@atlassian/aui/dist/aui/css/aui-experimental.min.css",
|
||||||
"autosize": "./node_modules/autosize/build/jquery.autosize.js",
|
"autosize": "./node_modules/autosize/build/jquery.autosize.js",
|
||||||
"jQuery-Impromptu": "jQuery-Impromptu/src/jquery-impromptu.js",
|
"jQuery-Impromptu": "jQuery-Impromptu/src/jquery-impromptu.js",
|
||||||
"popover": "./node_modules/bootstrap/js/popover.js",
|
"strophe-disco": "./node_modules/strophejs-plugins/disco/strophe.disco.js"
|
||||||
"strophe-disco": "./node_modules/strophejs-plugins/disco/strophe.disco.js",
|
|
||||||
"tooltip": "./node_modules/bootstrap/js/tooltip.js"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,7 +4,6 @@ import Recording from '../../../modules/UI/recording/Recording';
|
||||||
import SideContainerToggler
|
import SideContainerToggler
|
||||||
from '../../../modules/UI/side_pannels/SideContainerToggler';
|
from '../../../modules/UI/side_pannels/SideContainerToggler';
|
||||||
|
|
||||||
import { removeTooltip } from '../../../modules/UI/util/Tooltip';
|
|
||||||
import UIEvents from '../../../service/UI/UIEvents';
|
import UIEvents from '../../../service/UI/UIEvents';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
@ -272,8 +271,6 @@ export function setProfileButtonUnclickable(unclickable: boolean): Function {
|
||||||
dispatch(setToolbarButton(buttonName, {
|
dispatch(setToolbarButton(buttonName, {
|
||||||
unclickable
|
unclickable
|
||||||
}));
|
}));
|
||||||
|
|
||||||
removeTooltip(document.getElementById('toolbar_button_profile'));
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -3,8 +3,6 @@ import SideContainerToggler
|
||||||
|
|
||||||
import defaultToolbarButtons from './defaultToolbarButtons';
|
import defaultToolbarButtons from './defaultToolbarButtons';
|
||||||
|
|
||||||
declare var $: Function;
|
|
||||||
declare var AJS: Object;
|
|
||||||
declare var interfaceConfig: Object;
|
declare var interfaceConfig: Object;
|
||||||
|
|
||||||
export { abstractMapStateToProps, getButton } from './functions.native';
|
export { abstractMapStateToProps, getButton } from './functions.native';
|
||||||
|
@ -107,39 +105,6 @@ export function isButtonEnabled(name) {
|
||||||
|| interfaceConfig.MAIN_TOOLBAR_BUTTONS.indexOf(name) !== -1;
|
|| interfaceConfig.MAIN_TOOLBAR_BUTTONS.indexOf(name) !== -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Show custom popup/tooltip for a specified button.
|
|
||||||
*
|
|
||||||
* @param {string} popupSelectorID - The selector id of the popup to show.
|
|
||||||
* @param {boolean} show - True or false/show or hide the popup.
|
|
||||||
* @param {number} timeout - The time to show the popup.
|
|
||||||
* @returns {void}
|
|
||||||
*/
|
|
||||||
export function showCustomToolbarPopup(
|
|
||||||
popupSelectorID: string,
|
|
||||||
show: boolean,
|
|
||||||
timeout: number) {
|
|
||||||
AJS.$(popupSelectorID).tooltip({
|
|
||||||
gravity: $(popupSelectorID).attr('data-popup'),
|
|
||||||
html: true,
|
|
||||||
title: 'title',
|
|
||||||
trigger: 'manual'
|
|
||||||
});
|
|
||||||
|
|
||||||
if (show) {
|
|
||||||
AJS.$(popupSelectorID).tooltip('show');
|
|
||||||
|
|
||||||
setTimeout(
|
|
||||||
() => {
|
|
||||||
// hide the tooltip
|
|
||||||
AJS.$(popupSelectorID).tooltip('hide');
|
|
||||||
},
|
|
||||||
timeout);
|
|
||||||
} else {
|
|
||||||
AJS.$(popupSelectorID).tooltip('hide');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Get place for toolbar button. Now it can be in the primary Toolbar or in the
|
* Get place for toolbar button. Now it can be in the primary Toolbar or in the
|
||||||
* secondary Toolbar.
|
* secondary Toolbar.
|
||||||
|
|
Loading…
Reference in New Issue