From a59a2f8604cc47d7fcf766cadd9c8b2757e7910b Mon Sep 17 00:00:00 2001 From: John Cowen Date: Mon, 30 Nov 2020 16:52:13 +0000 Subject: [PATCH] ui: Modifier based tooltips (#9288) --- .../consul/discovery-chain/index.hbs | 40 +++--- .../consul/discovery-chain/index.js | 67 ++-------- .../consul/discovery-chain/layout.scss | 17 +-- .../discovery-chain/resolver-card/index.hbs | 22 +++- .../discovery-chain/route-card/index.hbs | 4 +- .../consul/discovery-chain/skin.scss | 12 -- .../app/components/copy-button/index.hbs | 37 ++++-- .../app/components/copy-button/index.js | 35 +++--- .../app/components/healthcheck-list/index.hbs | 5 +- .../app/components/tooltip/index.hbs | 18 +-- .../consul-ui/app/components/tooltip/index.js | 5 - .../app/components/tooltip/index.scss | 119 ++++++++++++++++++ .../topology-metrics/stats/index.hbs | 8 +- .../consul-ui/app/helpers/dom-position.js | 30 ++--- .../consul-ui/app/modifiers/tooltip.js | 65 ++++++++++ .../app/styles/base/components/index.scss | 1 - .../styles/base/components/tooltip/index.scss | 32 ----- .../base/components/tooltip/layout.scss | 59 --------- .../styles/base/components/tooltip/skin.scss | 38 ------ .../consul-ui/app/styles/components.scss | 4 +- .../app/styles/components/app-view.scss | 4 - .../app/styles/components/composite-row.scss | 10 +- .../styles/components/healthcheck-output.scss | 10 -- .../app/styles/components/tooltip.scss | 25 ---- .../consul-ui/app/styles/typography.scss | 6 - ui/packages/consul-ui/package.json | 2 + .../integration/components/tooltip-test.js | 25 ---- ui/yarn.lock | 35 +++++- 28 files changed, 355 insertions(+), 380 deletions(-) delete mode 100644 ui/packages/consul-ui/app/components/tooltip/index.js create mode 100644 ui/packages/consul-ui/app/components/tooltip/index.scss create mode 100644 ui/packages/consul-ui/app/modifiers/tooltip.js delete mode 100644 ui/packages/consul-ui/app/styles/base/components/tooltip/index.scss delete mode 100644 ui/packages/consul-ui/app/styles/base/components/tooltip/layout.scss delete mode 100644 ui/packages/consul-ui/app/styles/base/components/tooltip/skin.scss delete mode 100644 ui/packages/consul-ui/app/styles/components/tooltip.scss delete mode 100644 ui/packages/consul-ui/tests/integration/components/tooltip-test.js diff --git a/ui/packages/consul-ui/app/components/consul/discovery-chain/index.hbs b/ui/packages/consul-ui/app/components/consul/discovery-chain/index.hbs index 3ce7b67c87..d9d184964e 100644 --- a/ui/packages/consul-ui/app/components/consul/discovery-chain/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/discovery-chain/index.hbs @@ -20,8 +20,9 @@

{{chain.ServiceName}} Router - - Use routers to intercept traffic using L7 criteria such as path prefixes or http headers. +

@@ -38,8 +39,9 @@

Splitters - - Splitters are configured to split incoming requests across different services or subsets of a single service. +

@@ -56,8 +58,8 @@

Resolvers - - Resolvers are used to define which instances of a service should satisfy discovery requests. + +

@@ -70,10 +72,15 @@ {{/each}} - + {{#each routes as |item|}} - {{#let (dom-position (concat '#' item.ID)) as |src|}} - {{#let (dom-position (concat '#' item.NextNode)) as |destRect|}} + {{#let (dom-position (concat '#' item.ID) '.edges') as |src|}} + {{#let (dom-position (concat '#' item.NextNode) '.edges') as |destRect|}} {{#let (tween-to (hash x=destRect.x y=(add destRect.y (div destRect.height 2)) @@ -93,17 +100,17 @@ {{/let}} {{/each}} {{#each splitters as |splitter|}} - {{#let (dom-position (concat '#' splitter.ID)) as |src|}} + {{#let (dom-position (concat '#' splitter.ID) '.edges') as |src|}} {{#each splitter.Splits as |item index|}} - {{#let (dom-position (concat '#' item.NextNode)) as |destRect|}} + {{#let (dom-position (concat '#' item.NextNode) '.edges') as |destRect|}} {{#let (tween-to (hash x=destRect.x y=(add destRect.y (div destRect.height 2)) ) (concat splitter.ID '-' index)) as |dest|}} ' item.NextNode}} class="split" - data-percentage={{or item.Weight 0}} d={{ svg-curve (hash x=dest.x @@ -121,14 +128,14 @@ {{#each routes as |item|}} {{#if (starts-with 'resolver:' item.NextNode) }} - {{#let (dom-position (concat '#' item.NextNode)) as |dest|}} + {{#let (dom-position (concat '#' item.NextNode) '.edges') as |dest|}} {{/let}} {{/if}} {{/each}} {{#each splitters as |item|}} {{#each item.Splits as |item|}} - {{#let (dom-position (concat '#' item.NextNode)) as |dest|}} + {{#let (dom-position (concat '#' item.NextNode) '.edges') as |dest|}} {{/let}} {{/each}} @@ -137,12 +144,9 @@ {{#each routes as |item|}} {{#if (starts-with 'splitter:' item.NextNode) }} - {{#let (dom-position (concat '#' item.NextNode)) as |dest|}} + {{#let (dom-position (concat '#' item.NextNode) '.edges') as |dest|}} {{/let}} {{/if}} {{/each}} -
- {{round tooltip decimals=2}}% -
diff --git a/ui/packages/consul-ui/app/components/consul/discovery-chain/index.js b/ui/packages/consul-ui/app/components/consul/discovery-chain/index.js index d7fa3142e7..07e19b9533 100644 --- a/ui/packages/consul-ui/app/components/consul/discovery-chain/index.js +++ b/ui/packages/consul-ui/app/components/consul/discovery-chain/index.js @@ -11,21 +11,22 @@ export default Component.extend({ dataStructs: service('data-structs'), classNames: ['discovery-chain'], classNameBindings: ['active'], - isDisplayed: false, selectedId: '', - x: 0, - y: 0, - tooltip: '', - activeTooltip: false, init: function() { this._super(...arguments); this._listeners = this.dom.listeners(); }, - didReceiveAttrs: function() { - this._super(...arguments); - if (this.element) { - this.addPathListeners(); - } + didInsertElement: function() { + this._listeners.add(this.dom.document(), { + click: e => { + // all route/splitter/resolver components currently + // have classes that end in '-card' + if (!this.dom.closest('[class$="-card"]', e.target)) { + set(this, 'active', false); + set(this, 'selectedId', ''); + } + }, + }); }, willDestroyElement: function() { this._super(...arguments); @@ -122,53 +123,7 @@ export default Component.extend({ height: computed('chain.{Nodes,Targets}', function() { return this.element.offsetHeight; }), - // TODO(octane): ember has trouble adding mouse events to svg elements whilst giving - // the developer access to the mouse event therefore we just use JS to add our events - // revisit this post Octane - addPathListeners: function() { - schedule('afterRender', () => { - this._listeners.remove(); - // as this is now afterRender, theoretically - // it could happen after the component is destroyed? - // watch for that incase - if (this.element && !this.isDestroyed) { - this._listeners.add(this.dom.document(), { - click: e => { - // all route/splitter/resolver components currently - // have classes that end in '-card' - if (!this.dom.closest('[class$="-card"]', e.target)) { - set(this, 'active', false); - set(this, 'selectedId', ''); - } - }, - }); - [...this.dom.elements('path.split', this.element)].forEach(item => { - this._listeners.add(item, { - mouseover: e => this.actions.showSplit.apply(this, [e]), - mouseout: e => this.actions.hideSplit.apply(this, [e]), - }); - }); - } - }); - // TODO: currently don't think there is a way to listen - // for an element being removed inside a component, possibly - // using IntersectionObserver. It's a tiny detail, but we just always - // remove the tooltip on component update as its so tiny, ideal - // the tooltip would stay if there was no change to the - // set(this, 'activeTooltip', false); - }, actions: { - showSplit: function(e) { - this.setProperties({ - x: e.clientX, - y: e.clientY - 3, - tooltip: e.target.dataset.percentage, - activeTooltip: true, - }); - }, - hideSplit: function(e = null) { - set(this, 'activeTooltip', false); - }, click: function(e) { const id = e.currentTarget.getAttribute('id'); if (id === this.selectedId) { diff --git a/ui/packages/consul-ui/app/components/consul/discovery-chain/layout.scss b/ui/packages/consul-ui/app/components/consul/discovery-chain/layout.scss index afff6b6994..3c4c9b9d62 100644 --- a/ui/packages/consul-ui/app/components/consul/discovery-chain/layout.scss +++ b/ui/packages/consul-ui/app/components/consul/discovery-chain/layout.scss @@ -25,17 +25,6 @@ %discovery-chain [id*=':']:not(path):hover { @extend %chain-node-active; } -%discovery-chain .tooltip { - position: fixed; - z-index: 5; -} -%discovery-chain .tooltip.active > [role='tooltip'], -%discovery-chain .tooltip.active > [role='tooltip']::after { - @extend %blink-in-fade-out-active; -} -%resolver-card dt { - @extend %with-pseudo-tooltip, %tooltip-right; -} %discovery-chain { position: relative; @@ -49,6 +38,9 @@ padding: 10px 1% 10px 1%; width: 32%; } +%chain-group > header { + height: 18px; +} %chain-group > header span { position: relative; z-index: 1; @@ -102,7 +94,8 @@ } %route-card section header { display: block; - width: 33px; + width: 19px; + margin-right: 14px } /**/ /* resolver */ diff --git a/ui/packages/consul-ui/app/components/consul/discovery-chain/resolver-card/index.hbs b/ui/packages/consul-ui/app/components/consul/discovery-chain/resolver-card/index.hbs index b8d61a539e..479726a66a 100644 --- a/ui/packages/consul-ui/app/components/consul/discovery-chain/resolver-card/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/discovery-chain/resolver-card/index.hbs @@ -7,7 +7,9 @@

{{@item.Name}}

{{#if item.Failover}}
-
+
{{concat @item.Failover.Type ' failover'}}
@@ -30,14 +32,22 @@ {{#if child.Redirect}}
-
Redirect
+
+ Redirect +
{{child.Name}}
{{#if child.Failover}}
-
{{concat child.Failover.Type ' failover'}}
+
+ {{concat child.Failover.Type ' failover'}} +
    {{#each child.Failover.Targets as |target|}} @@ -52,7 +62,11 @@ {{else if child.Failover}} {{child.Name}}
    -
    {{concat child.Failover.Type ' failover'}}
    +
    + {{concat child.Failover.Type ' failover'}} +
      {{#each child.Failover.Targets as |target|}} diff --git a/ui/packages/consul-ui/app/components/consul/discovery-chain/route-card/index.hbs b/ui/packages/consul-ui/app/components/consul/discovery-chain/route-card/index.hbs index 87eabcada8..fd7f94c66e 100644 --- a/ui/packages/consul-ui/app/components/consul/discovery-chain/route-card/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/discovery-chain/route-card/index.hbs @@ -22,7 +22,7 @@ {{#if (gt @item.Definition.Match.HTTP.Header.length 0) }}
      -
      +

      Headers

      @@ -39,7 +39,7 @@ {{/if}} {{#if (gt @item.Definition.Match.HTTP.QueryParam.length 0) }}
      -
      +

      Query Params

      diff --git a/ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss b/ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss index 5016e71829..446980c886 100644 --- a/ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss +++ b/ui/packages/consul-ui/app/components/consul/discovery-chain/skin.scss @@ -3,10 +3,6 @@ /* the styling there almost 100% uses our CSS vars */ /* defined in our CSS files, but be sure to */ /* take a look in the discovery-chain.hbs */ -%discovery-chain .tooltip, -%chain-group > header span { - @extend %with-tooltip; -} %route-card > header ul li { @extend %pill-500, %frame-gray-900; } @@ -63,14 +59,6 @@ height: 1.2em; opacity: 0.6; } -/* TODO: this is tooltip related, we also do this elsewhere */ -/* so would be good to look and see if we can centralize this */ -%chain-group > header span em { - text-transform: none; - width: 250px; - font-style: normal; - white-space: normal !important; -} %chain-node { @extend %discovery-chain-tween; transition-property: opacity background-color border-color; diff --git a/ui/packages/consul-ui/app/components/copy-button/index.hbs b/ui/packages/consul-ui/app/components/copy-button/index.hbs index 541a129e77..bebe79c7ca 100644 --- a/ui/packages/consul-ui/app/components/copy-button/index.hbs +++ b/ui/packages/consul-ui/app/components/copy-button/index.hbs @@ -1,16 +1,29 @@ - - - Copied {{name}}! - - - - - There was an problem! - - -
      - +
      +
      diff --git a/ui/packages/consul-ui/app/components/copy-button/index.js b/ui/packages/consul-ui/app/components/copy-button/index.js index 1e2b950b0f..77b960d736 100644 --- a/ui/packages/consul-ui/app/components/copy-button/index.js +++ b/ui/packages/consul-ui/app/components/copy-button/index.js @@ -1,26 +1,29 @@ -import Component from '@ember/component'; +import Component from '@glimmer/component'; import { inject as service } from '@ember/service'; +import { action } from '@ember/object'; import chart from './chart.xstate'; -export default Component.extend({ - clipboard: service('clipboard/os'), - dom: service('dom'), - tagName: '', - init: function() { - this._super(...arguments); +export default class CopyButton extends Component { + @service('clipboard/os') clipboard; + @service('dom') dom; + + constructor() { + super(...arguments); this.chart = chart; this.guid = this.dom.guid(this); this._listeners = this.dom.listeners(); - }, - willDestroyElement: function() { - this._super(...arguments); - this._listeners.remove(); - }, - didInsertElement: function() { - this._super(...arguments); + } + + @action + connect() { this._listeners.add(this.clipboard.execute(`#${this.guid} button`), { success: () => this.dispatch('SUCCESS'), error: () => this.dispatch('ERROR'), }); - }, -}); + } + + @action + disconnect() { + this._listeners.remove(); + } +} diff --git a/ui/packages/consul-ui/app/components/healthcheck-list/index.hbs b/ui/packages/consul-ui/app/components/healthcheck-list/index.hbs index 6cb6fc0833..502e51bc8d 100644 --- a/ui/packages/consul-ui/app/components/healthcheck-list/index.hbs +++ b/ui/packages/consul-ui/app/components/healthcheck-list/index.hbs @@ -24,7 +24,10 @@
      {{item.Type}} {{#if (and exposed (contains item.Type (array 'http' 'grpc')))}} - Exposed + Exposed {{/if}}
      diff --git a/ui/packages/consul-ui/app/components/tooltip/index.hbs b/ui/packages/consul-ui/app/components/tooltip/index.hbs index 0794f309f2..7e286e8c29 100644 --- a/ui/packages/consul-ui/app/components/tooltip/index.hbs +++ b/ui/packages/consul-ui/app/components/tooltip/index.hbs @@ -1,11 +1,11 @@ - {{yield}} - + diff --git a/ui/packages/consul-ui/app/components/tooltip/index.js b/ui/packages/consul-ui/app/components/tooltip/index.js deleted file mode 100644 index 4798652642..0000000000 --- a/ui/packages/consul-ui/app/components/tooltip/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import Component from '@ember/component'; - -export default Component.extend({ - tagName: '', -}); diff --git a/ui/packages/consul-ui/app/components/tooltip/index.scss b/ui/packages/consul-ui/app/components/tooltip/index.scss new file mode 100644 index 0000000000..2746b55412 --- /dev/null +++ b/ui/packages/consul-ui/app/components/tooltip/index.scss @@ -0,0 +1,119 @@ +[data-tippy-root] { + @extend %tooltip-layer; +} +.tippy-box[data-theme~=tooltip] { + & { + @extend %tooltip-bubble; + } + &[data-placement^=bottom] > .tippy-arrow { + @extend %tooltip-tail-bottom; + } + &[data-placement^=top] > .tippy-arrow { + @extend %tooltip-tail-top; + } + &[data-placement^=left] > .tippy-arrow { + @extend %tooltip-tail-left; + } + &[data-placement^=right] > .tippy-arrow { + @extend %tooltip-tail-right; + } + .tippy-arrow { + @extend %tooltip-tail; + } + .tippy-content { + @extend %tooltip-content; + } +} + +%tooltip-layer { + max-width: calc(100vw - 10px); +} +%tooltip-bubble { + & { + position: relative; + outline: 0; + + background-color: $gray-700; + color: $white; + border-radius: $decor-radius-100; + box-shadow: $decor-elevation-400; + transition-property: transform, visibility, opacity; + } + &[data-animation=fade][data-state=hidden] { + opacity: 0; + } + &[data-inertia][data-state=visible] { + transition-timing-function: cubic-bezier(.54, 1.5, .38, 1.11); + } +} +%tooltip-tail { + --size: 5px; + & { + color: $gray-700; + width: calc(var(--size) * 2); + height: calc(var(--size) * 2); + } + &::before { + content: ""; + position: absolute; + + border-color: $transparent; + border-style: solid; + } +} +%tooltip-tail-top { + & { + bottom: 0; + } + &::before { + bottom: calc(0px - var(--size)); + left: 0; + + border-width: var(--size) var(--size) 0; + border-top-color: initial; + transform-origin: center top; + } +} +%tooltip-tail-bottom { + & { + top: 0 + } + &::before { + top: calc(0px - var(--size)); + left: 0; + border-width: 0 var(--size) var(--size); + border-bottom-color: initial; + transform-origin: center bottom; + } +} +%tooltip-tail-left { + & { + right: 0; + } + &::before { + right: calc(0px - var(--size)); + border-width: var(--size) 0 var(--size) var(--size); + border-left-color: initial; + transform-origin: center left; + } +} +%tooltip-tail-right { + & { + left: 0 + } + &::before { + left: calc(0px - var(--size)); + border-width: var(--size) var(--size) var(--size) 0; + border-right-color: initial; + transform-origin: center right; + } +} + +%tooltip-content { + @extend %p3; + padding: 12px; + max-width: 192px; + position: relative; + z-index: 1; +} + diff --git a/ui/packages/consul-ui/app/components/topology-metrics/stats/index.hbs b/ui/packages/consul-ui/app/components/topology-metrics/stats/index.hbs index c36d14112d..ed6b75f49b 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/stats/index.hbs +++ b/ui/packages/consul-ui/app/components/topology-metrics/stats/index.hbs @@ -9,14 +9,18 @@
      {{#if hasLoaded }} {{#each stats as |stat|}} -
      +
      {{stat.value}}
      {{stat.label}}
      - {{{stat.desc}}}
      {{else}} No Metrics Available diff --git a/ui/packages/consul-ui/app/helpers/dom-position.js b/ui/packages/consul-ui/app/helpers/dom-position.js index dfe69c4c73..c133ddeb4b 100644 --- a/ui/packages/consul-ui/app/helpers/dom-position.js +++ b/ui/packages/consul-ui/app/helpers/dom-position.js @@ -1,28 +1,14 @@ import Helper from '@ember/component/helper'; import { inject as service } from '@ember/service'; - export default Helper.extend({ dom: service('dom'), - compute: function([selector, id], hash) { - const $el = this.dom.element(selector); - const $refs = [$el.offsetParent, $el]; - // TODO: helper probably needs to accept a `reference=` option - // with a selector to use as reference/root - if (selector.startsWith('#resolver:')) { - $refs.unshift($refs[0].offsetParent); - } - return $refs.reduce( - function(prev, item) { - prev.x += item.offsetLeft; - prev.y += item.offsetTop; - return prev; - }, - { - x: 0, - y: 0, - height: $el.offsetHeight, - width: $el.offsetWidth, - } - ); + compute: function([target, from], hash) { + const $target = this.dom.element(target); + const $from = this.dom.element(from); + const fromRect = $from.getBoundingClientRect(); + const rect = $target.getBoundingClientRect(); + rect.x = rect.x - fromRect.x; + rect.y = rect.y - fromRect.y; + return rect; }, }); diff --git a/ui/packages/consul-ui/app/modifiers/tooltip.js b/ui/packages/consul-ui/app/modifiers/tooltip.js new file mode 100644 index 0000000000..af29d2eb09 --- /dev/null +++ b/ui/packages/consul-ui/app/modifiers/tooltip.js @@ -0,0 +1,65 @@ +import { modifier } from 'ember-modifier'; +import tippy, { followCursor } from 'tippy.js'; + +/** + * Tooltip modifier using Tippy.js + * https://atomiks.github.io/tippyjs + * + * {{tooltip 'Text' options=(hash )}} + */ +export default modifier(($element, [content], hash = {}) => { + const options = hash.options || {}; + + let $anchor = $element; + + // make it easy to specify the modified element as the actual tooltip + if (typeof options.triggerTarget === 'string') { + const $el = $anchor; + switch (options.triggerTarget) { + case 'parentNode': + $anchor = $anchor.parentNode; + break; + default: + $anchor = $anchor.querySelectorAll(options.triggerTarget); + } + content = $anchor.cloneNode(true); + $el.remove(); + hash.options.triggerTarget = undefined; + } + // {{tooltip}} will just use the HTML content + if (typeof content === 'undefined') { + content = $anchor.innerHTML; + $anchor.innerHTML = ''; + } + let interval; + if (options.trigger === 'manual') { + // if we are manually triggering, a out delay means only show for the + // amount of time specified by the delay + const delay = options.delay || []; + if (typeof delay[1] !== 'undefined') { + hash.options.onShown = tooltip => { + clearInterval(interval); + interval = setTimeout(() => { + tooltip.hide(); + }, delay[1]); + }; + } + } + let $trigger = $anchor; + const tooltip = tippy($anchor, { + theme: 'tooltip', + triggerTarget: $trigger, + content: $anchor => content, + // showOnCreate: true, + // hideOnClick: false, + plugins: [typeof options.followCursor !== 'undefined' ? followCursor : undefined].filter(item => + Boolean(item) + ), + ...hash.options, + }); + + return () => { + clearInterval(interval); + tooltip.destroy(); + }; +}); diff --git a/ui/packages/consul-ui/app/styles/base/components/index.scss b/ui/packages/consul-ui/app/styles/base/components/index.scss index 8df208d4ac..e69ac6a5a8 100644 --- a/ui/packages/consul-ui/app/styles/base/components/index.scss +++ b/ui/packages/consul-ui/app/styles/base/components/index.scss @@ -14,4 +14,3 @@ @import './table/index'; @import './tabs/index'; @import './toggle-button/index'; -@import './tooltip/index'; diff --git a/ui/packages/consul-ui/app/styles/base/components/tooltip/index.scss b/ui/packages/consul-ui/app/styles/base/components/tooltip/index.scss deleted file mode 100644 index 5ecc1283e8..0000000000 --- a/ui/packages/consul-ui/app/styles/base/components/tooltip/index.scss +++ /dev/null @@ -1,32 +0,0 @@ -@import './skin'; -@import './layout'; - -%with-pseudo-tooltip, -%with-tooltip { - @extend %tooltip; -} -%with-pseudo-tooltip::before, -%with-tooltip [role='tooltip'] { - @extend %tooltip-bubble; -} -%with-pseudo-tooltip::after, -%with-tooltip [role='tooltip']::after { - @extend %tooltip-tail; -} - -%with-pseudo-tooltip::after, -%with-pseudo-tooltip::before, -%with-tooltip [role='tooltip']::after, -%with-tooltip [role='tooltip'] { - @extend %blink-in-fade-out; -} -%with-pseudo-tooltip:hover::after, -%with-pseudo-tooltip:hover::before, -%with-pseudo-tooltip:focus::after, -%with-pseudo-tooltip:focus::before, -%with-tooltip:hover [role='tooltip']::after, -%with-tooltip:hover [role='tooltip'], -%with-tooltip:focus [role='tooltip']::after, -%with-tooltip:focus [role='tooltip'] { - @extend %blink-in-fade-out-active; -} diff --git a/ui/packages/consul-ui/app/styles/base/components/tooltip/layout.scss b/ui/packages/consul-ui/app/styles/base/components/tooltip/layout.scss deleted file mode 100644 index 728b1f9fe2..0000000000 --- a/ui/packages/consul-ui/app/styles/base/components/tooltip/layout.scss +++ /dev/null @@ -1,59 +0,0 @@ -%tooltip { - position: relative; - display: inline-flex; - justify-content: center; - align-items: center; - vertical-align: text-top; -} -%tooltip-bubble, -%tooltip-tail { - position: absolute; - z-index: 1; -} -%tooltip-bubble { - padding: 12px; - white-space: nowrap; - content: attr(data-tooltip); - text-indent: 0; - min-width: 192px; -} -%tooltip-bubble { - /* TODO: structure says left aligned, check this is correct */ - text-align: center; -} - -%tooltip-tail { - content: ''; - transform: scale(1, 0.5); - width: 0; - height: 0; -} -/* TODO: positioning */ -%tooltip-bubble { - bottom: calc(100% + 5px); -} -%tooltip-tail { - left: 50%; - margin-left: -9px; - bottom: -13px; -} -/* TODO: Try and use the same vertical positioning all tooltips */ -/* this is only for pseudo tooltips be want to avoid */ -/* specifying pseudo in this file */ -%tooltip::after { - bottom: calc(100% - 8px); -} -%tooltip-bottom::before { - bottom: auto; - top: calc(100% + 8px); -} -%tooltip-bottom::after { - bottom: -12px; -} - -// Ember Tooltips -.ember-tooltip { - padding: 12px; - max-width: 192px; - z-index: 4; -} diff --git a/ui/packages/consul-ui/app/styles/base/components/tooltip/skin.scss b/ui/packages/consul-ui/app/styles/base/components/tooltip/skin.scss deleted file mode 100644 index d9ff4374d6..0000000000 --- a/ui/packages/consul-ui/app/styles/base/components/tooltip/skin.scss +++ /dev/null @@ -1,38 +0,0 @@ -%tooltip-bubble { - color: $white; - background-color: $gray-700; -} -%tooltip-tail { - background-color: $transparent; - border-color: $transparent; - border-top-color: $gray-700; - border-bottom-color: $gray-700; -} - -/* borders here are used to draw a triangle in CSS */ -/* they are not actual borders */ - -%tooltip-tail { - border-style: solid; - border-bottom-width: 0; - border-top-width: 18px; - border-left-width: 9px; - border-right-width: 9px; -} -%tooltip-bottom::after { - border-top-width: 0; - border-bottom-width: 18px; -} -%tooltip-bubble { - border-radius: $decor-radius-100; - box-shadow: $decor-elevation-400; -} - -// Ember Tooltips -.ember-tooltip { - background-color: $gray-700; - border-radius: $decor-radius-100; -} -.ember-tooltip[x-placement^='top'] .ember-tooltip-arrow { - border-top-color: $gray-700; -} diff --git a/ui/packages/consul-ui/app/styles/components.scss b/ui/packages/consul-ui/app/styles/components.scss index c0ec50a3c4..360d7c3dfc 100644 --- a/ui/packages/consul-ui/app/styles/components.scss +++ b/ui/packages/consul-ui/app/styles/components.scss @@ -17,7 +17,6 @@ @import './components/tabs'; @import './components/pill'; @import './components/table'; -@import './components/tooltip'; @import './components/tag-list'; @import './components/healthcheck-output'; @import './components/freetext-filter'; @@ -46,11 +45,12 @@ @import './components/loader'; @import './components/main-header-horizontal'; @import './components/main-nav-horizontal'; -@import './components/app-view'; @import './components/footer'; /**/ +@import './components/app-view'; +@import 'consul-ui/components/tooltip'; @import 'consul-ui/components/notice'; @import 'consul-ui/components/modal-dialog'; diff --git a/ui/packages/consul-ui/app/styles/components/app-view.scss b/ui/packages/consul-ui/app/styles/components/app-view.scss index 0411272c28..572d1c387f 100644 --- a/ui/packages/consul-ui/app/styles/components/app-view.scss +++ b/ui/packages/consul-ui/app/styles/components/app-view.scss @@ -3,10 +3,6 @@ .app-view { @extend %app-view; } -%app-view-actions label + div { - /* We need this extra to allow tooltips to show */ - overflow: visible !important; -} %app-view header form { @extend %filter-bar; diff --git a/ui/packages/consul-ui/app/styles/components/composite-row.scss b/ui/packages/consul-ui/app/styles/components/composite-row.scss index 56c5263fd3..757b3522b0 100644 --- a/ui/packages/consul-ui/app/styles/components/composite-row.scss +++ b/ui/packages/consul-ui/app/styles/components/composite-row.scss @@ -15,8 +15,8 @@ .consul-lock-session-list ul > li:not(:first-child) { @extend %with-one-action-row; } -/*TODO: This hides the icons-less dt's in the below lists as */ -/* they don't have tooltips */ +// TODO: This hides the icons-less dt's in the below lists as they don't have +// tooltips the todo would be to wrap these texts in spans .consul-nspace-list > ul > li:not(:first-child) dt, .consul-token-list > ul > li:not(:first-child) dt, .consul-policy-list > ul li:not(:first-child) dl:not(.datacenter) dt, @@ -57,13 +57,11 @@ padding: 0 !important; margin: 0 !important; } -/* buttons need to be displayed in order for the tooltip */ -/* to track them */ %composite-row-header .copy-button button { - opacity: 0; + display: none; } %composite-row-header:hover .copy-button button { - opacity: 1; + display: block; } %composite-row .copy-button button:hover { background-color: transparent !important; diff --git a/ui/packages/consul-ui/app/styles/components/healthcheck-output.scss b/ui/packages/consul-ui/app/styles/components/healthcheck-output.scss index 117c43288f..6c3ccb5ed3 100644 --- a/ui/packages/consul-ui/app/styles/components/healthcheck-output.scss +++ b/ui/packages/consul-ui/app/styles/components/healthcheck-output.scss @@ -2,13 +2,3 @@ .healthcheck-output { @extend %healthcheck-output; } -%healthcheck-output dd em[data-tooltip] { - @extend %with-pseudo-tooltip; -} -%healthcheck-output dd em::before { - width: 250px; - /* TODO: All tooltips previously used */ - /* nowrap, they shouldn't */ - white-space: normal !important; -} -/**/ diff --git a/ui/packages/consul-ui/app/styles/components/tooltip.scss b/ui/packages/consul-ui/app/styles/components/tooltip.scss deleted file mode 100644 index 485e8f9f5e..0000000000 --- a/ui/packages/consul-ui/app/styles/components/tooltip.scss +++ /dev/null @@ -1,25 +0,0 @@ -/* override structure min-width for the moment */ -/* TODO: Clarify whether these should actually use */ -/* the min-width from structure */ -/* TODO: See if we can move all these to base */ -%tooltip-bubble { - min-width: 0; -} -%tooltip-below::after { - top: calc(100% - 8px); - bottom: auto; - border-top: none; - border-bottom: 18px solid $gray-500; -} -%tooltip-below::before { - top: calc(100% + 4px); - bottom: auto; - /*TODO: This should probably go into base*/ - line-height: 1em; -} -%tooltip-left::before { - right: 0; -} -%tooltip-right::before { - left: -7px; -} diff --git a/ui/packages/consul-ui/app/styles/typography.scss b/ui/packages/consul-ui/app/styles/typography.scss index 030d06f595..5b6b8ba605 100644 --- a/ui/packages/consul-ui/app/styles/typography.scss +++ b/ui/packages/consul-ui/app/styles/typography.scss @@ -32,7 +32,6 @@ fieldset > header, %healthcheck-output dt, %table th, %table td strong, -%tooltip-bubble, %sliding-toggle label span { @extend %h6; } @@ -133,8 +132,3 @@ pre code, font-size: 16px !important; } } - -//Ember Tooltip -.ember-tooltip { - font-size: $typo-size-800; -} diff --git a/ui/packages/consul-ui/package.json b/ui/packages/consul-ui/package.json index 9be2546019..d8c272fc30 100644 --- a/ui/packages/consul-ui/package.json +++ b/ui/packages/consul-ui/package.json @@ -113,6 +113,7 @@ "ember-load-initializers": "^2.1.1", "ember-math-helpers": "^2.4.0", "ember-maybe-import-regenerator": "^0.1.6", + "ember-modifier": "^2.1.1", "ember-named-blocks-polyfill": "^0.2.3", "ember-on-helper": "^0.1.0", "ember-page-title": "^5.2.3", @@ -150,6 +151,7 @@ "sass": "^1.28.0", "tape": "^5.0.1", "text-encoding": "^0.7.0", + "tippy.js": "^6.2.7", "torii": "^0.10.1" }, "resolutions": { diff --git a/ui/packages/consul-ui/tests/integration/components/tooltip-test.js b/ui/packages/consul-ui/tests/integration/components/tooltip-test.js deleted file mode 100644 index 05dff14318..0000000000 --- a/ui/packages/consul-ui/tests/integration/components/tooltip-test.js +++ /dev/null @@ -1,25 +0,0 @@ -import { module, test } from 'qunit'; -import { setupRenderingTest } from 'ember-qunit'; -import { render } from '@ember/test-helpers'; -import { hbs } from 'ember-cli-htmlbars'; - -module('Integration | Component | tooltip', function(hooks) { - setupRenderingTest(hooks); - - test('it renders', async function(assert) { - // Set any properties with this.set('myProperty', 'value'); - // Handle any actions with this.set('myAction', function(val) { ... }); - - await render(hbs``); - - assert.equal(this.element.textContent.trim(), ''); - - // Template block usage: - await render(hbs` - - - `); - - assert.equal(this.element.textContent.trim(), ''); - }); -}); diff --git a/ui/yarn.lock b/ui/yarn.lock index d9f2fbca75..ed8b3f9183 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -1683,6 +1683,11 @@ dependencies: mkdirp "^1.0.4" +"@popperjs/core@^2.4.4": + version "2.5.4" + resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.5.4.tgz#de25b5da9f727985a3757fd59b5d028aba75841a" + integrity sha512-ZpKr+WTb8zsajqgDkvCEWgp6d5eJT6Q63Ng2neTbzBO76Lbe91vX/iVIW9dikq+Fs3yEo+ls4cxeXABD2LtcbQ== + "@reach/router@^1.3.3": version "1.3.4" resolved "https://registry.yarnpkg.com/@reach/router/-/router-1.3.4.tgz#d2574b19370a70c80480ed91f3da840136d10f8c" @@ -7995,6 +8000,15 @@ ember-data@~3.20.4: ember-cli-typescript "^3.1.3" ember-inflector "^3.0.1" +ember-destroyable-polyfill@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/ember-destroyable-polyfill/-/ember-destroyable-polyfill-2.0.2.tgz#2cc7532bd3c00e351b4da9b7fc683f4daff79671" + integrity sha512-9t+ya+9c+FkNM5IAyJIv6ETG8jfZQaUnFCO5SeLlV0wkSw7TOexyb61jh5GVee0KmknfRhrRGGAyT4Y0TwkZ+w== + dependencies: + ember-cli-babel "^7.22.1" + ember-cli-version-checker "^5.1.1" + ember-compatibility-helpers "^1.2.1" + ember-element-helper@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/ember-element-helper/-/ember-element-helper-0.2.0.tgz#eacdf4d8507d6708812623206e24ad37bad487e7" @@ -8108,7 +8122,7 @@ ember-maybe-in-element@^2.0.1: ember-cli-version-checker "^5.1.1" ember-in-element-polyfill "^1.0.0" -ember-modifier-manager-polyfill@^1.1.0: +ember-modifier-manager-polyfill@^1.1.0, ember-modifier-manager-polyfill@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/ember-modifier-manager-polyfill/-/ember-modifier-manager-polyfill-1.2.0.tgz#cf4444e11a42ac84f5c8badd85e635df57565dda" integrity sha512-bnaKF1LLKMkBNeDoetvIJ4vhwRPKIIumWr6dbVuW6W6p4QV8ZiO+GdF8J7mxDNlog9CeL9Z/7wam4YS86G8BYA== @@ -8117,6 +8131,18 @@ ember-modifier-manager-polyfill@^1.1.0: ember-cli-version-checker "^2.1.2" ember-compatibility-helpers "^1.2.0" +ember-modifier@^2.1.1: + version "2.1.1" + resolved "https://registry.yarnpkg.com/ember-modifier/-/ember-modifier-2.1.1.tgz#aa3a12e2d6cf1622f774f3f1eab4880982a43fa9" + integrity sha512-g9mcpFWgw5lgNU40YNf0USNWqoGTJ+EqjDQKjm7556gaRNDeGnLylFKqx9O3opwLHEt6ZODnRDy9U0S5YEMREg== + dependencies: + ember-cli-babel "^7.22.1" + ember-cli-normalize-entity-name "^1.0.0" + ember-cli-string-utils "^1.1.0" + ember-cli-typescript "^3.1.3" + ember-destroyable-polyfill "^2.0.2" + ember-modifier-manager-polyfill "^1.2.0" + ember-named-blocks-polyfill@^0.2.3: version "0.2.3" resolved "https://registry.yarnpkg.com/ember-named-blocks-polyfill/-/ember-named-blocks-polyfill-0.2.3.tgz#05fb3b40cff98a0d30e8c3b1e3d2155951007d84" @@ -16135,6 +16161,13 @@ tinycolor2@^1.4.1: resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803" integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA== +tippy.js@^6.2.7: + version "6.2.7" + resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.2.7.tgz#62fb34eda23f7d78151ddca922b62818c1ab9869" + integrity sha512-k+kWF9AJz5xLQHBi3K/XlmJiyu+p9gsCyc5qZhxxGaJWIW8SMjw1R+C7saUnP33IM8gUhDA2xX//ejRSwqR0tA== + dependencies: + "@popperjs/core" "^2.4.4" + tmp@0.0.28: version "0.0.28" resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.28.tgz#172735b7f614ea7af39664fa84cf0de4e515d120"