Skip to content

Commit

Permalink
[NEW] Tooltips (#18399)
Browse files Browse the repository at this point in the history
Co-authored-by: Gabriel Henriques <[email protected]>
  • Loading branch information
ggazzo and gabriellsh authored Jul 28, 2020
1 parent 9b49a44 commit 0afa7f4
Show file tree
Hide file tree
Showing 21 changed files with 110 additions and 125 deletions.
2 changes: 1 addition & 1 deletion app/apps/client/gameCenter/gameCenter.html
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
<td>
<div class="rc-table-wrapper">
<div class="rc-table-info">
<button class="rc-tooltip game-center__invite-players js-invite" aria-label="Invite Friends">
<button class="game-center__invite-players js-invite" title="Invite Friends">
{{> icon block="game-center__invite-players-icon" icon="plus"}}
</button>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
<i class="icon-left-circled"></i>
</button>
{{/if}}
<button class="rc-tooltip rc-tooltip--down js-button lc-date-picker-btn">
<button class="js-button lc-date-picker-btn">
{{#with daterange}}
<span class="lc-datarange-from">{{from}}</span>
<span class="fade">{{_ "to" }}</span>
Expand Down
2 changes: 1 addition & 1 deletion app/message-attachments/client/messageAttachment.html
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
{{#if title_link}}
<a href="{{getURL title_link}}" target="_blank" rel="noopener noreferrer">{{title}}</a>
{{#if title_link_download}}
<a class="attachment-download-icon rc-tooltip" aria-label="{{_ 'Download'}}" href="{{getURL title_link}}?download" target="_blank" download="{{title}}" rel="noopener noreferrer">{{> icon icon="download"}}</a>
<a class="attachment-download-icon" title="{{_ 'Download'}}" href="{{getURL title_link}}?download" target="_blank" download="{{title}}" rel="noopener noreferrer">{{> icon icon="download"}}</a>
{{/if}}
{{else}}
{{title}}
Expand Down
88 changes: 0 additions & 88 deletions app/theme/client/imports/components/tooltip.css

This file was deleted.

1 change: 0 additions & 1 deletion app/theme/client/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,6 @@
@import 'imports/components/alerts.css';
@import 'imports/components/popout.css';
@import 'imports/components/modal.css';
@import 'imports/components/tooltip.css';
@import 'imports/components/slider.css';
@import 'imports/components/chip.css';
@import 'imports/components/messages.css';
Expand Down
2 changes: 1 addition & 1 deletion app/threads/client/components/ThreadComponent.js
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ export default function ThreadComponent({ mid, rid, jump, room, ...props }) {
<VerticalBar.Text dangerouslySetInnerHTML={{ __html: headerTitle }} />
<VerticalBar.Action aria-label={expandLabel} onClick={handleExpandButton} name={expandIcon}/>
<VerticalBar.Action aria-label={actionLabel} onClick={handleFollowButton} name={button}/>
<VerticalBar.Close aria-label={t('Close')} onClick={handleClose}/>
<VerticalBar.Close onClick={handleClose}/>
</VerticalBar.Header>
<VerticalBar.Content paddingInline={0} flexShrink={1} flexGrow={1} ref={ref}/>
</VerticalBar>
Expand Down
2 changes: 1 addition & 1 deletion app/tokenpass/client/tokenpassChannelSettings.html
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
{{#if list}}
<ul class="chip-container">
{{#each list}}
<li class="js-remove rc-tooltip" aria-label="balance: {{balance}}" title="{{token}} {{balance}}">{{#if editing}}<i class="icon-cancel-circled"></i>{{/if}}{{token}}</li>
<li class="js-remove" title="balance: {{balance}}" aria-label="{{token}} {{balance}}">{{#if editing}}<i class="icon-cancel-circled"></i>{{/if}}{{token}}</li>
{{/each}}
</ul>
{{/if}}
Expand Down
8 changes: 4 additions & 4 deletions app/ui-flextab/client/flexTabBar.html
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ <h1 class="contextual-bar__header-title">{{_ label}}</h1>
<div class="rc-room-actions iframe-toolbar">
{{#each .}}
<div class="rc-room-actions__action tab-button {{active}} {{visible}} {{class}} js-iframe-action" data-id="{{id}}">
<button class="rc-tooltip rc-tooltip--down rc-tooltip--end rc-room-actions__button" aria-label="{{title}}">
<button class="rc-room-actions__button" title="{{title}}">
{{> icon block="tab-button-icon" icon=icon }}
</button>
</div>
Expand All @@ -48,14 +48,14 @@ <h1 class="contextual-bar__header-title">{{_ label}}</h1>
{{#with badge}}
<span class="rc-badge {{class}}">{{body}}</span>
{{/with}}
<button class="rc-tooltip rc-tooltip--down rc-tooltip--end rc-room-actions__button" aria-label="{{title}}">
<button class="rc-room-actions__button" title="{{title}}">
{{> icon block="tab-button-icon" icon=icon }}
</button>
</div>
{{/each}}
{{# with moreButtons}}
<div class="rc-room-actions__action {{opened}}">
<button class="rc-tooltip rc-tooltip--down rc-tooltip--end rc-room-actions__button js-more" aria-label="{{_ 'More'}}">
<button class="rc-room-actions__button js-more" title="{{_ 'More'}}">
{{> icon block="tab-button-icon" icon="menu" }}
</button>
</div>
Expand All @@ -74,7 +74,7 @@ <h1 class="contextual-bar__header-title">{{_ label}}</h1>
<!-- <div class=""> -->
{{#each buttons}}
<div class="rc-room-actions__more-action tab-button {{active}} {{visible}} {{class}} js-action" title="{{title}}">
<button class="rc-tooltip rc-room-actions__button">
<button class="rc-room-actions__button">
{{> icon block="tab-button-icon" icon=icon }}
</button>
<span class="rc-room-actions__description">{{title}}</span>
Expand Down
22 changes: 11 additions & 11 deletions app/ui-message/client/message.html
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
{{getName}}{{#if showUsername}} <span class="message-alias border-component-color color-info-font-color">@{{msg.u.username}}</span>{{/if}}
</button>
{{#if getStatus}}
<button class="message-custom-status rc-tooltip rc-tooltip--up rc-tooltip--start" aria-label="{{getStatus}}">💬</button>
<button class="message-custom-status" title="{{getStatus}}">💬</button>
{{/if}}
<span class="info border-component-color color-info-font-color"></span>
{{# if showRoles }}
Expand All @@ -57,28 +57,28 @@
<time class="time" title='{{date}} {{time}}' datetime='{{date}} {{time}}'>{{time}}</time>
{{#if showTranslated}}
<span class="translated">
<i class="icon-language {{#if msg.autoTranslateFetching}}loading{{/if}}" aria-label="{{_ "Translated"}}"></i>
<i class="icon-language {{#if msg.autoTranslateFetching}}loading{{/if}}" title="{{_ "Translated"}}"></i>
<span class="translation-provider">{{ translationProvider }}</span>
</span>
{{/if}}
{{#if msg.sentByEmail}}
<span class="sent-by-email">
<i class="icon-mail" title='{{_ "Message_sent_by_email"}}' aria-label='{{_ "Message_sent_by_email"}}'></i>
<i class="icon-mail" title='{{_ "Message_sent_by_email"}}'></i>
</span>
{{/if}}
{{#if edited}}
<span class="edited" title='{{_ "edited"}} {{_ "at"}} {{editTime}} {{_ "by"}} {{editedBy}}'>
<i class="icon-pencil{{#if $neq editedBy msg.u.username}} error-color{{/if}}" aria-label="{{_ "Edited"}}"></i>
<i class="icon-pencil{{#if $neq editedBy msg.u.username}} error-color{{/if}}" title="{{_ "Edited"}}"></i>
</span>
{{/if}}
{{#if msg.pinned}}
<span aria-label="{{_ "Message_has_been_pinned"}}" class="pinned rc-tooltip rc-tooltip--up rc-tooltip--start"><i class="icon-pin"></i></span>
<span title="{{_ "Message_has_been_pinned"}}" class="pinned"><i class="icon-pin"></i></span>
{{/if}}
{{#if showStar}}
<span aria-label="{{_ "Message_has_been_starred"}}" class="starred rc-tooltip rc-tooltip--up rc-tooltip--start"><i class="icon-star"></i></span>
<span title="{{_ "Message_has_been_starred"}}" class="starred"><i class="icon-star"></i></span>
{{/if}}
{{#if msg.alert}}
<div aria-label="{{_ msg.alert }}" class="rc-tooltip message-unread"></div>
<div title="{{_ msg.alert }}" class="message-unread"></div>
{{/if}}
{{#if msg.private}}
<span class="private">{{_ "Only_you_can_see_this_message"}}</span>
Expand Down Expand Up @@ -135,7 +135,7 @@
{{/if}}
<span class="discussion-reply-lm">{{ formatDateAndTime msg.dlm }}</span>
{{# if unread }}
<div aria-label="{{_ 'Unread' }}" class="rc-tooltip message-unread"></div>
<div title="{{_ 'Unread' }}" class="message-unread"></div>
{{/if}}
</div>
{{/if}}
Expand All @@ -148,14 +148,14 @@
<span class='reply-counter'>{{_ i18nReplyCounter counter=msg.tcount }}</span>
<span class="discussion-reply-lm">{{ formatDateAndTime msg.tlm}}</span>
{{# if unread }}
<div aria-label="{{_ 'Unread' }}" class="rc-tooltip message-unread {{class}}"></div>
<div title="{{_ 'Unread' }}" class="message-unread {{class}}"></div>
{{/if}}
{{# if following }}
<div role="button" class="rc-tooltip js-unfollow-thread" aria-label="{{_ "Following"}}">
<div role="button" class="js-unfollow-thread" title="{{_ "Following"}}">
{{> icon icon="bell" block="thread-icons"}}
</div>
{{else}}
<div role="button" class="rc-tooltip js-follow-thread" aria-label="{{_ "Not_following"}}">
<div role="button" class="js-follow-thread" title="{{_ "Not_following"}}">
{{> icon icon="bell-off" block="thread-icons"}}
</div>
{{/if}}
Expand Down
4 changes: 2 additions & 2 deletions app/ui-message/client/messageBox/messageBox.html
Original file line number Diff line number Diff line change
Expand Up @@ -68,11 +68,11 @@
<div class="rc-message-box__toolbar-formatting">
{{#each formattingButton in formattingButtons}}
{{#if formattingButton.icon}}
<button class="rc-message-box__toolbar-formatting-item rc-tooltip js-format" data-id="{{formattingButton.label}}" aria-label="{{_ formattingButton.label}}">
<button class="rc-message-box__toolbar-formatting-item js-format" data-id="{{formattingButton.label}}" title="{{_ formattingButton.label}}">
{{> icon block="rc-message-box__toolbar-formatting-icon" icon=formattingButton.icon }}
</button>
{{else}}
<span class="rc-message-box__toolbar-formatting-item rc-tooltip" aria-label="{{_ formattingButton.label}}">
<span class="rc-message-box__toolbar-formatting-item" title="{{_ formattingButton.label}}">
<a href="{{formattingButton.link}}" target="_blank" rel="noopener noreferrer" class="rc-message-box__toolbar-formatting-link">{{formattingButton.text}}</a>
</span>
{{/if}}
Expand Down
6 changes: 3 additions & 3 deletions app/ui-message/client/messageThread.html
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<template name="messageThread">
<q role="button" aria-label="{{_ " Open_thread "}}" class="thread-quote js-open-thread">
<q role="button" title="{{_ " Open_thread "}}" class="thread-quote js-open-thread">
{{> icon icon="thread" block="thread-icons"}} <div class="thread-quote__message "><span class="message-body--unstyled">{{{parentMessage}}}</span></div>
{{# if following }}
<div role="button" class="rc-tooltip js-unfollow-thread" aria-label="{{_ "Following"}}">
<div role="button" class="js-unfollow-thread" title="{{_ "Following"}}">
{{> icon icon="bell" block="thread-icons"}}
</div>
{{else}}
<div role="button" class="rc-tooltip js-follow-thread" aria-label="{{_ "Not_following"}}">
<div role="button" class="js-follow-thread" title="{{_ "Not_following"}}">
{{> icon icon="bell-off" block="thread-icons"}}
</div>
{{/if}}
Expand Down
2 changes: 1 addition & 1 deletion app/ui-sidenav/client/sidebarHeader.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
</div>
<div class="sidebar__toolbar">
{{#each toolbarButtons}}
<button class="sidebar__toolbar-button rc-tooltip rc-tooltip--down js-button" aria-label="{{name}}" aria-haspopup="{{hasPopup}}">
<button class="sidebar__toolbar-button js-button" title="{{name}}" aria-haspopup="{{hasPopup}}">
{{> icon block="sidebar__toolbar-button-icon" icon=icon }}
</button>
{{/each}}
Expand Down
2 changes: 1 addition & 1 deletion app/ui-utils/client/lib/modal.html
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ <h1 class="rc-modal__title">
{{title}}
{{/if}}
</h1>
<button aria-label="{{_ "Close"}}" class="rc-tooltip contextual-bar__close js-close">
<button title="{{_ "Close"}}" class="contextual-bar__close js-close">
{{> icon classes="rc-modal__close" icon="plus"}}
</button>
</header>
Expand Down
8 changes: 4 additions & 4 deletions app/ui/client/components/header/headerRoom.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,14 @@
</div>

{{#if isDiscussion}}
<div class="rc-header__block rc-header__block--action js-open-parent-channel rc-tooltip rc-tooltip--down rc-tooltip--start" aria-label={{_ "Back_to_room"}}>
<div class="rc-header__block rc-header__block--action js-open-parent-channel" title={{_ "Back_to_room"}}>
<span class="rc-header__first-icon">{{> icon block="rc-header__icon rc-header__icon" icon="back"}}</span>
</div>
{{/if}}

{{#if isToggleFavoriteButtonVisible}}
<div class="rc-header__block rc-header__favorite rc-header__block--action">
<button aria-label="{{toggleFavoriteButtonIconLabel}}" type="button" class="rc-header__toggle-favorite {{#if isToggleFavoriteButtonChecked}}rc-header__toggle-favorite--checked{{/if}} rc-header__first-icon rc-tooltip rc-tooltip--down rc-tooltip--start js-favorite">
<button title="{{toggleFavoriteButtonIconLabel}}" type="button" class="rc-header__toggle-favorite {{#if isToggleFavoriteButtonChecked}}rc-header__toggle-favorite--checked{{/if}} rc-header__first-icon js-favorite">
{{> icon block="rc-header__icon" icon=toggleFavoriteButtonIcon}}
</button>
</div>
Expand Down Expand Up @@ -55,7 +55,7 @@
<span class="sentiment">{{sentimentSmile}}</span>
{{/if}}
{{#if isTranslated}}
<i class="icon-language" aria-label="{{_ "Translated"}}"></i>
<i class="icon-language" title="{{_ "Translated"}}"></i>
{{/if}}
</div>

Expand All @@ -65,7 +65,7 @@
{{#if encryptionState}}
<div class="rc-header__block rc-header__block-action rc-header__encryption">
<div class="rc-room-actions">
<button aria-label="{{_ 'E2E_Enabled'}}" class="rc-tooltip rc-tooltip--down rc-room-actions__action tab-button rc-header__toggle-encryption js-toggle-encryption {{encryptionState}}">{{> icon icon="key"}}</button>
<button title="{{_ 'E2E_Enabled'}}" class="rc-room-actions__action tab-button rc-header__toggle-encryption js-toggle-encryption {{encryptionState}}">{{> icon icon="key"}}</button>
</div>
</div>
{{/if}}
Expand Down
1 change: 1 addition & 0 deletions app/ui/client/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ import './components/header/headerRoom';
import './components/contextualBar.html';
import './components/contextualBar';
import './components/tooltip';
import './lib/Tooltip';

export { ChatMessages } from './lib/chatMessages';
export { fileUpload } from './lib/fileUpload';
Expand Down
55 changes: 55 additions & 0 deletions app/ui/client/lib/Tooltip.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import { Tracker } from 'meteor/tracker';

import { createEphemeralPortal } from '../../../../client/reactAdapters';

const Dep = new Tracker.Dependency();

let state;
let dom;
let unregister;

const createAchor = () => {
const div = document.createElement('div');
div.id = 'react-tooltip';
document.body.appendChild(div);
return div;
};


const props = () => {
Dep.depend();
return state;
};

export const closeTooltip = () => {
if (!dom) {
return;
}
unregister = unregister && unregister();
};

export const openToolTip = async (title, anchor) => {
dom = dom || createAchor();
state = {
title,
anchor,
};
Dep.changed();
unregister = unregister || await createEphemeralPortal(() => import('./TooltipComponent'), props, dom);
};

document.body.addEventListener('mouseover', (() => {
let timeout;
return (e) => {
timeout = timeout && clearTimeout(timeout);
timeout = setTimeout(() => {
const element = e.target.title || e.dataset?.title ? e.target : e.target.closest('[title], [data-title]');
if (element) {
element.dataset.title = element.dataset.title || element.title;
element.removeAttribute('title');
openToolTip(element.dataset.title, element);
}
}, 1000);
closeTooltip();
};
})());
Loading

0 comments on commit 0afa7f4

Please sign in to comment.