From 28b4595561fe255bad93333ec72e039f3130850e Mon Sep 17 00:00:00 2001 From: Leonard Kim Date: Wed, 16 Aug 2017 13:10:02 -0700 Subject: [PATCH] ref(tooltips): remove old tooltips --- css/_base.scss | 15 ----- css/_variables.scss | 1 - modules/UI/UI.js | 21 ------ modules/UI/util/Tooltip.js | 86 ------------------------- package.json | 4 +- react/features/toolbox/actions.web.js | 3 - react/features/toolbox/functions.web.js | 35 ---------- 7 files changed, 1 insertion(+), 164 deletions(-) delete mode 100644 modules/UI/util/Tooltip.js diff --git a/css/_base.scss b/css/_base.scss index 3147d412a..773d533b3 100644 --- a/css/_base.scss +++ b/css/_base.scss @@ -119,21 +119,6 @@ form { font-size: 12px; } -/** -* Tooltips -**/ -.tipsy { - z-index: $tooltipsZ; - &-inner { - background-color: $tooltipBg; - max-width: 350px; - } - - &-arrow { - border-color: $tooltipBg; - } -} - /** * Dialogs fade */ diff --git a/css/_variables.scss b/css/_variables.scss index d94762c9a..76bc7641b 100644 --- a/css/_variables.scss +++ b/css/_variables.scss @@ -28,7 +28,6 @@ $defaultColor: #F1F1F1; $defaultSideBarFontColor: #44A5FF; $defaultSemiDarkColor: #ACACAC; $defaultDarkColor: #2b3d5c; -$tooltipBg: rgba(0,0,0, 0.7); /** * Toolbar diff --git a/modules/UI/UI.js b/modules/UI/UI.js index 9e998ff35..4f9823687 100644 --- a/modules/UI/UI.js +++ b/modules/UI/UI.js @@ -10,7 +10,6 @@ import Avatar from "./avatar/Avatar"; import SideContainerToggler from "./side_pannels/SideContainerToggler"; import messageHandler from "./util/MessageHandler"; import UIUtil from "./util/UIUtil"; -import { activateTooltips } from './util/Tooltip'; import UIEvents from "../../service/UI/UIEvents"; import EtherpadManager from './etherpad/Etherpad'; 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 // (2) APP.conference as means of communication between the participants. followMeHandler = new FollowMe(APP.conference, UI); - - activateTooltips(); }; UI.mucJoined = function () { @@ -249,22 +246,6 @@ UI.mucJoined = function () { */ 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. * @return {EtherpadManager} the shared document manager object @@ -285,8 +266,6 @@ UI.start = function () { // Set the defaults for prompt dialogs. $.prompt.setDefaults({persistent: false}); - // Set the defaults for tooltips. - _setTooltipDefaults(); SideContainerToggler.init(eventEmitter); Filmstrip.init(eventEmitter); diff --git a/modules/UI/util/Tooltip.js b/modules/UI/util/Tooltip.js deleted file mode 100644 index 88ad7b44f..000000000 --- a/modules/UI/util/Tooltip.js +++ /dev/null @@ -1,86 +0,0 @@ -/* global $, APP, AJS */ - -/** - * Associates tooltip element position (in the terms of - * {@link UIUtil#setTooltip} which do not look like CSS position) with - * AUI tooltip gravity. - */ -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. - * tooltip-n) and the attribute content. - */ -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',''); -} diff --git a/package.json b/package.json index dccceea52..9791ddabf 100644 --- a/package.json +++ b/package.json @@ -121,8 +121,6 @@ "aui-experimental-css": "./node_modules/@atlassian/aui/dist/aui/css/aui-experimental.min.css", "autosize": "./node_modules/autosize/build/jquery.autosize.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", - "tooltip": "./node_modules/bootstrap/js/tooltip.js" + "strophe-disco": "./node_modules/strophejs-plugins/disco/strophe.disco.js" } } diff --git a/react/features/toolbox/actions.web.js b/react/features/toolbox/actions.web.js index 54d58473b..d0913b55f 100644 --- a/react/features/toolbox/actions.web.js +++ b/react/features/toolbox/actions.web.js @@ -4,7 +4,6 @@ import Recording from '../../../modules/UI/recording/Recording'; import SideContainerToggler from '../../../modules/UI/side_pannels/SideContainerToggler'; -import { removeTooltip } from '../../../modules/UI/util/Tooltip'; import UIEvents from '../../../service/UI/UIEvents'; import { @@ -272,8 +271,6 @@ export function setProfileButtonUnclickable(unclickable: boolean): Function { dispatch(setToolbarButton(buttonName, { unclickable })); - - removeTooltip(document.getElementById('toolbar_button_profile')); }; } diff --git a/react/features/toolbox/functions.web.js b/react/features/toolbox/functions.web.js index ae8c0cc41..2dc5cfded 100644 --- a/react/features/toolbox/functions.web.js +++ b/react/features/toolbox/functions.web.js @@ -3,8 +3,6 @@ import SideContainerToggler import defaultToolbarButtons from './defaultToolbarButtons'; -declare var $: Function; -declare var AJS: Object; declare var interfaceConfig: Object; export { abstractMapStateToProps, getButton } from './functions.native'; @@ -107,39 +105,6 @@ export function isButtonEnabled(name) { || 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 * secondary Toolbar.