From a29b769d444b21d1937aaf95e1159ce6a022fb43 Mon Sep 17 00:00:00 2001 From: Tasso Evangelista Date: Wed, 7 Aug 2019 19:14:57 -0300 Subject: [PATCH] [IMPROVE] Message tooltips as everyone else (#15135) --- app/reactions/client/init.js | 2 +- app/reactions/client/stylesheets/reaction.css | 2 + app/tooltip/README.md | 0 app/tooltip/client/index.js | 4 - app/tooltip/client/rocketchat-tooltip.js | 87 ------- app/tooltip/client/tooltip.css | 48 ---- app/tooltip/index.js | 1 - app/ui-master/client/main.js | 2 +- app/ui/client/components/tooltip.css | 49 ++++ .../client/components/tooltip.html} | 2 +- app/ui/client/components/tooltip.js | 94 +++++++ app/ui/client/index.js | 1 + client/importPackages.js | 1 - client/importsCss.js | 1 - package-lock.json | 229 ++++++++---------- 15 files changed, 254 insertions(+), 269 deletions(-) delete mode 100644 app/tooltip/README.md delete mode 100644 app/tooltip/client/index.js delete mode 100644 app/tooltip/client/rocketchat-tooltip.js delete mode 100644 app/tooltip/client/tooltip.css delete mode 100644 app/tooltip/index.js create mode 100644 app/ui/client/components/tooltip.css rename app/{tooltip/client/rocketchat-tooltip.html => ui/client/components/tooltip.html} (75%) create mode 100644 app/ui/client/components/tooltip.js diff --git a/app/reactions/client/init.js b/app/reactions/client/init.js index faba7df8d7b2..e6c9acaf7d62 100644 --- a/app/reactions/client/init.js +++ b/app/reactions/client/init.js @@ -6,7 +6,7 @@ import { Rooms } from '../../models'; import { MessageAction } from '../../ui-utils'; import { messageArgs } from '../../ui-utils/client/lib/messageArgs'; import { EmojiPicker } from '../../emoji'; -import { tooltip } from '../../tooltip'; +import { tooltip } from '../../ui/client/components/tooltip'; Template.room.events({ 'click .add-reaction, click [data-message-action="reaction-message"]'(event) { diff --git a/app/reactions/client/stylesheets/reaction.css b/app/reactions/client/stylesheets/reaction.css index cd737daa4880..b8d6e3897130 100644 --- a/app/reactions/client/stylesheets/reaction.css +++ b/app/reactions/client/stylesheets/reaction.css @@ -28,6 +28,8 @@ height: 16px; min-height: 16px; margin: -0.2ex 0.15em 0.2ex; + + pointer-events: none; /* to avoid title attribute to trigger a tooltip */ } } diff --git a/app/tooltip/README.md b/app/tooltip/README.md deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/app/tooltip/client/index.js b/app/tooltip/client/index.js deleted file mode 100644 index 41cf931eaf81..000000000000 --- a/app/tooltip/client/index.js +++ /dev/null @@ -1,4 +0,0 @@ -import './rocketchat-tooltip.html'; -import { tooltip } from './rocketchat-tooltip'; - -export { tooltip }; diff --git a/app/tooltip/client/rocketchat-tooltip.js b/app/tooltip/client/rocketchat-tooltip.js deleted file mode 100644 index 412948a99c23..000000000000 --- a/app/tooltip/client/rocketchat-tooltip.js +++ /dev/null @@ -1,87 +0,0 @@ -import { Template } from 'meteor/templating'; -import { Blaze } from 'meteor/blaze'; - -export const tooltip = { - source: null, - initiated: false, - opened: false, - - init() { - if (this.initiated) { - return; - } - this.initiated = true; - - Blaze.render(Template.rocketchatTooltip, document.body); - }, - - showElement(element, source) { - if (this.opened) { - return; - } - - if (this.timeout) { - clearTimeout(this.timeout); - } - - this.timeout = setTimeout(() => { - this.timeout = null; - this.source = source; - - $('.tooltip .content').empty().append($(element).clone().show()); - - this.setPosition().addClass('show'); - - this.opened = true; - }, 300); - }, - - hide() { - if (this.timeout) { - clearTimeout(this.timeout); - } - - if (this.opened) { - $('.tooltip').removeClass('show'); - $('.tooltip .content').empty(); - this.opened = false; - } - }, - - setPosition() { - const sourcePos = $(this.source).offset(); - - const sourceWidth = $(this.source).outerWidth(); - - const tip = $('.tooltip'); - - let top = sourcePos.top - tip.outerHeight() - 5; - let { left } = sourcePos; - - left = left + (sourceWidth / 2) - (tip.outerWidth() / 2); - - if (left < 0) { - $('.tooltip .tooltip-arrow').css({ - 'margin-left': `${ left - 5 }px`, - }); - left = 0; - } else { - $('.tooltip .tooltip-arrow').css({ - 'margin-left': '', - }); - } - - if (top < 0) { - top = sourcePos.top + $(this.source).outerHeight() + 5; - tip.addClass('bellow'); - } else { - tip.removeClass('bellow'); - } - - return tip - .css({ - top: `${ top }px`, - left: `${ left }px`, - }); - }, -}; diff --git a/app/tooltip/client/tooltip.css b/app/tooltip/client/tooltip.css deleted file mode 100644 index 44184897956a..000000000000 --- a/app/tooltip/client/tooltip.css +++ /dev/null @@ -1,48 +0,0 @@ -.tooltip { - position: absolute; - z-index: 300; - - visibility: hidden; - - max-width: 400px; - padding: 8px 10px; - - transition: opacity 0.3s ease; - text-align: center; - - opacity: 0; - color: #ffffff; - border-radius: 5px; - background: #000000; - - font-size: 0.8rem; - - &.show { - visibility: visible; - - opacity: 0.9; - } - - & .tooltip-arrow { - position: absolute; - top: 100%; - left: 50%; - - width: 0; - height: 0; - margin-left: -5px; - - border-top: 5px solid #000000; - border-right: 5px solid transparent; - border-left: 5px solid transparent; - } - - &.bellow { - & .tooltip-arrow { - top: -5px; - - border-top: none; - border-bottom: 5px solid #000000; - } - } -} diff --git a/app/tooltip/index.js b/app/tooltip/index.js deleted file mode 100644 index 40a7340d3887..000000000000 --- a/app/tooltip/index.js +++ /dev/null @@ -1 +0,0 @@ -export * from './client/index'; diff --git a/app/ui-master/client/main.js b/app/ui-master/client/main.js index 45685d58d9e5..70a04fafee7e 100644 --- a/app/ui-master/client/main.js +++ b/app/ui-master/client/main.js @@ -15,7 +15,7 @@ import { settings } from '../../settings'; import { CachedChatSubscription, Roles, ChatSubscription, Users } from '../../models'; import { CachedCollectionManager } from '../../ui-cached-collection'; import { hasRole } from '../../authorization'; -import { tooltip } from '../../tooltip'; +import { tooltip } from '../../ui/client/components/tooltip'; import { callbacks } from '../../callbacks/client'; function executeCustomScript(script) { diff --git a/app/ui/client/components/tooltip.css b/app/ui/client/components/tooltip.css new file mode 100644 index 000000000000..ac74b1f83793 --- /dev/null +++ b/app/ui/client/components/tooltip.css @@ -0,0 +1,49 @@ +.tooltip { + position: absolute; + z-index: 300; + + visibility: hidden; + + max-width: 25rem; + padding: 0.5em 1em; + + transition: opacity 0.3s ease; + text-align: center; + + opacity: 0; + color: var(--tooltip-text-color); + border-radius: var(--tooltip-radius); + background: var(--tooltip-background); + + font-size: var(--tooltip-text-size); + + &.show { + visibility: visible; + + opacity: 1; + } + + & .tooltip-arrow { + position: absolute; + top: 100%; + left: 50%; + + width: 0; + height: 0; + margin-left: -6px; + + border-width: 6px 6px 0; + border-style: solid; + border-color: var(--tooltip-background) transparent transparent transparent; + } + + &.below { + & .tooltip-arrow { + top: -6px; + + border-color: transparent transparent var(--tooltip-background) transparent; + + border-top: none; + } + } +} diff --git a/app/tooltip/client/rocketchat-tooltip.html b/app/ui/client/components/tooltip.html similarity index 75% rename from app/tooltip/client/rocketchat-tooltip.html rename to app/ui/client/components/tooltip.html index 5fea5460a40d..f5e64a61f960 100644 --- a/app/tooltip/client/rocketchat-tooltip.html +++ b/app/ui/client/components/tooltip.html @@ -1,4 +1,4 @@ -