diff --git a/ui/packages/consul-ui/app/components/action/index.hbs b/ui/packages/consul-ui/app/components/action/index.hbs new file mode 100644 index 0000000000..ba1f34ac1f --- /dev/null +++ b/ui/packages/consul-ui/app/components/action/index.hbs @@ -0,0 +1,35 @@ +{{#if @for}} + +{{else if @href}} + {{#if @external}} + + {{yield}} + + {{else}} + + {{yield}} + + {{/if}} +{{else}} + +{{/if}} \ No newline at end of file diff --git a/ui/packages/consul-ui/app/components/confirmation-alert/action/index.hbs b/ui/packages/consul-ui/app/components/confirmation-alert/action/index.hbs deleted file mode 100644 index bb711add68..0000000000 --- a/ui/packages/consul-ui/app/components/confirmation-alert/action/index.hbs +++ /dev/null @@ -1,3 +0,0 @@ -
  • - -
    • diff --git a/ui/packages/consul-ui/app/components/confirmation-alert/action/index.js b/ui/packages/consul-ui/app/components/confirmation-alert/action/index.js deleted file mode 100644 index 4798652642..0000000000 --- a/ui/packages/consul-ui/app/components/confirmation-alert/action/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/confirmation-alert/index.hbs b/ui/packages/consul-ui/app/components/confirmation-alert/index.hbs index 24e553ae5d..803ccd23cf 100644 --- a/ui/packages/consul-ui/app/components/confirmation-alert/index.hbs +++ b/ui/packages/consul-ui/app/components/confirmation-alert/index.hbs @@ -1,22 +1,29 @@ {{yield}} -
    -
    -
    - {{yield}} -
    + + <:header> + {{yield}} + + <:body> {{yield}} -
    - -
    \ No newline at end of file + + <:actions as |Actions|> + + + {{yield}} + + + + + Cancel + + + + \ No newline at end of file diff --git a/ui/packages/consul-ui/app/components/informed-action/index.hbs b/ui/packages/consul-ui/app/components/informed-action/index.hbs new file mode 100644 index 0000000000..5e0e3d0bd3 --- /dev/null +++ b/ui/packages/consul-ui/app/components/informed-action/index.hbs @@ -0,0 +1,17 @@ +
    +
    +
    + {{yield to="header"}} +
    + {{yield to="body"}} +
    + +
    \ No newline at end of file diff --git a/ui/packages/consul-ui/app/components/informed-action/index.scss b/ui/packages/consul-ui/app/components/informed-action/index.scss new file mode 100644 index 0000000000..23d7cd3ea3 --- /dev/null +++ b/ui/packages/consul-ui/app/components/informed-action/index.scss @@ -0,0 +1,11 @@ +@import './skin'; +@import './layout'; + +.informed-action { + @extend %informed-action; +} +%informed-action { + & > ul > li > * { + @extend %internal-button; + } +} diff --git a/ui/packages/consul-ui/app/components/informed-action/layout.scss b/ui/packages/consul-ui/app/components/informed-action/layout.scss new file mode 100644 index 0000000000..726eb31e45 --- /dev/null +++ b/ui/packages/consul-ui/app/components/informed-action/layout.scss @@ -0,0 +1,26 @@ +%informed-action { + & { + min-width: 190px; + } + > div { + padding: 1rem; + } + header { + margin-bottom: 0.5em; + } + header::before { + float: left; + margin-right: 5px; + } + > ul { + display: flex; + margin: 0; + padding: 4px; + } + > ul > li { + width: 50%; + } + > ul > li > * { + width: 100%; + } +} diff --git a/ui/packages/consul-ui/app/components/informed-action/skin.scss b/ui/packages/consul-ui/app/components/informed-action/skin.scss new file mode 100644 index 0000000000..958f42cc94 --- /dev/null +++ b/ui/packages/consul-ui/app/components/informed-action/skin.scss @@ -0,0 +1,79 @@ +%informed-action { + & { + border-radius: $decor-radius-200; + border: $decor-border-100; + border-color: $gray-300; + background-color: $white; + } + > div { + border-top-left-radius: $decor-radius-200; + border-top-right-radius: $decor-radius-200; + cursor: default; + } + header { + @extend %h4; + } + header > * { + @extend %typo-inherit; + } + p { + @extend %p2; + color: $black; + } + > ul { + list-style: none; + } + > ul > li > *:hover, + > ul > li > *:focus { + background-color: $gray-100; + } + /* variants */ + &.info { + header { + color: $blue-700; + } + header::before { + @extend %with-info-circle-fill-mask, %as-pseudo; + background-color: $blue-500; + margin-right: 5px; + } + > div { + background-color: $blue-010; + } + } + &.dangerous { + header { + color: $red-700; + } + header::before { + @extend %with-alert-triangle-mask, %as-pseudo; + background-color: $red-500; + } + > div { + background-color: $red-010; + } + } + &.warning { + header { + color: $orange-700; + } + header::before { + @extend %with-alert-triangle-mask, %as-pseudo; + background-color: $yellow-500; + margin-right: 5px; + } + > div { + background-color: $yellow-050; + } + } + > ul > .action > * { + color: $blue-500; + } + > ul > .dangerous > * { + @extend %frame-red-300; + } + > ul > .dangerous > *:hover, + > ul > .dangerous > *:focus { + @extend %frame-red-700; + } +} diff --git a/ui/packages/consul-ui/app/components/overlay/index.scss b/ui/packages/consul-ui/app/components/overlay/index.scss new file mode 100644 index 0000000000..899162a847 --- /dev/null +++ b/ui/packages/consul-ui/app/components/overlay/index.scss @@ -0,0 +1,2 @@ +@import './none.scss'; +@import './square-tail.scss'; diff --git a/ui/packages/consul-ui/app/components/overlay/none.scss b/ui/packages/consul-ui/app/components/overlay/none.scss new file mode 100644 index 0000000000..81db3ad7b0 --- /dev/null +++ b/ui/packages/consul-ui/app/components/overlay/none.scss @@ -0,0 +1,94 @@ +.tippy-box { + @extend %overlay; +} +[data-tippy-root] { + @extend %overlay-layer; +} +%overlay-layer { + max-width: calc(100vw - 10px); +} +%overlay { + & { + position: relative; + outline: 0; + 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); + } + &[data-animation=fade][data-state=hidden] { + opacity: 0; + } + &[data-inertia][data-state=visible] { + transition-timing-function: cubic-bezier(.54, 1.5, .38, 1.11); + } + & { + background-color: $white; + border-radius: $decor-radius-100; + box-shadow: $decor-elevation-400; + } + .tippy-arrow { + @extend %overlay-tail; + } + &[data-placement^=bottom] > .tippy-arrow { + @extend %overlay-tail-bottom; + } + &[data-placement^=top] > .tippy-arrow { + @extend %overlay-tail-top; + } + &[data-placement^=left] > .tippy-arrow { + @extend %overlay-tail-left; + } + &[data-placement^=right] > .tippy-arrow { + @extend %overlay-tail-right; + } +} +%overlay-tail { + --size: 5px; + &::before { + content: ""; + position: absolute; + } +} +%overlay-tail-top { + & { + bottom: 0; + } + &::before { + left: 0; + bottom: calc(0px - var(--size)); + transform-origin: center top; + } +} +%overlay-tail-bottom { + & { + top: 0 + } + &::before { + left: 0; + top: calc(0px - var(--size)); + transform-origin: center bottom; + } +} +%overlay-tail-left { + & { + right: 0; + } + &::before { + right: calc(0px - var(--size)); + transform-origin: center left; + } +} +%overlay-tail-right { + & { + left: 0 + } + &::before { + left: calc(0px - var(--size)); + transform-origin: center right; + } +} + diff --git a/ui/packages/consul-ui/app/components/overlay/square-tail.scss b/ui/packages/consul-ui/app/components/overlay/square-tail.scss new file mode 100644 index 0000000000..9bbf54f225 --- /dev/null +++ b/ui/packages/consul-ui/app/components/overlay/square-tail.scss @@ -0,0 +1,51 @@ +[data-theme~="square-tail"] { + .tippy-arrow { + --size: 18px; + left: calc(0px - (var(--size) / 2)) !important; + } + .tippy-arrow::before { + background-color: $white; + width: calc(1px + var(--size)); + height: calc(1px + var(--size)); + border: $decor-border-100; + border-color: $gray-300; + } + // potential icon + .tippy-arrow::after { + position: absolute; + left: 1px; + } + &[data-placement^=top] { + & { + bottom: -10px; + } + .informed-action { + border-bottom-left-radius: 0 !important; + } + .tippy-arrow::before { + border-bottom-left-radius: $decor-radius-200; + border-bottom-right-radius: $decor-radius-200; + border-top: 0 !important; + } + .tippy-arrow::after { + bottom: calc(0px - var(--size)); + } + } + &[data-placement^=bottom] { + & { + top: -10px; + } + .informed-action { + border-top-left-radius: 0 !important; + } + .tippy-arrow::before { + border-top-left-radius: $decor-radius-200; + border-top-right-radius: $decor-radius-200; + border-bottom: 0 !important; + } + .tippy-arrow::after { + top: calc(0px - var(--size)); + } + } +} + diff --git a/ui/packages/consul-ui/app/components/tooltip/index.scss b/ui/packages/consul-ui/app/components/tooltip/index.scss index 2746b55412..d4271ce71b 100644 --- a/ui/packages/consul-ui/app/components/tooltip/index.scss +++ b/ui/packages/consul-ui/app/components/tooltip/index.scss @@ -1,10 +1,13 @@ -[data-tippy-root] { - @extend %tooltip-layer; -} .tippy-box[data-theme~=tooltip] { & { @extend %tooltip-bubble; } + .tippy-content { + @extend %tooltip-content; + } + .tippy-arrow { + @extend %tooltip-tail; + } &[data-placement^=bottom] > .tippy-arrow { @extend %tooltip-tail-bottom; } @@ -17,33 +20,19 @@ &[data-placement^=right] > .tippy-arrow { @extend %tooltip-tail-right; } - .tippy-arrow { - @extend %tooltip-tail; - } - .tippy-content { - @extend %tooltip-content; - } +} +%tooltip-content { + @extend %p3; + padding: 12px; + max-width: 192px; + position: relative; + z-index: 1; } -%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 { @@ -54,66 +43,32 @@ 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; +%tooltip-tail-top { + &::before { 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/down-lines/index.hbs b/ui/packages/consul-ui/app/components/topology-metrics/down-lines/index.hbs index 56200bcfb3..af7c4f7d2b 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/down-lines/index.hbs +++ b/ui/packages/consul-ui/app/components/topology-metrics/down-lines/index.hbs @@ -56,10 +56,13 @@ {{/if}} {{#each @items as |item|}} - + {{#if (or (not item.Intention.Allowed) item.Intention.HasPermissions)}} + + {{/if}} {{/each}} diff --git a/ui/packages/consul-ui/app/components/topology-metrics/down-lines/index.js b/ui/packages/consul-ui/app/components/topology-metrics/down-lines/index.js index 1d13e78ad4..78db449157 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/down-lines/index.js +++ b/ui/packages/consul-ui/app/components/topology-metrics/down-lines/index.js @@ -16,8 +16,8 @@ export default class TopoloyMetricsDownLines extends Component { return { id: item.id, - x: thirdLen.x - view.x, - y: thirdLen.y - view.y, + x: Math.round(thirdLen.x - view.x), + y: Math.round(thirdLen.y - view.y), }; }); } diff --git a/ui/packages/consul-ui/app/components/topology-metrics/popover/index.hbs b/ui/packages/consul-ui/app/components/topology-metrics/popover/index.hbs index ed1c2d66fe..f89a28b591 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/popover/index.hbs +++ b/ui/packages/consul-ui/app/components/topology-metrics/popover/index.hbs @@ -1,71 +1,94 @@ -
    -{{#if (and (not @item.Intention.Allowed) (not @item.Intention.HasPermissions))}} - - {{/if}} + + -
    - - -{{else if @item.Intention.HasPermissions}} - - - - + + + + {{/if}} + diff --git a/ui/packages/consul-ui/app/components/topology-metrics/popover/index.js b/ui/packages/consul-ui/app/components/topology-metrics/popover/index.js index d84750af59..68138d503a 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/popover/index.js +++ b/ui/packages/consul-ui/app/components/topology-metrics/popover/index.js @@ -1,14 +1,3 @@ import Component from '@glimmer/component'; -import { action } from '@ember/object'; -import { tracked } from '@glimmer/tracking'; -export default class TopoloyMetricsButton extends Component { - // =attributes - @tracked showToggleablePopover = false; - - // =actions - @action - togglePopover() { - this.showToggleablePopover = !this.showToggleablePopover; - } -} +export default class TopologyMetricsButton extends Component {} diff --git a/ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss b/ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss index daa3282b6e..b359261e8b 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss +++ b/ui/packages/consul-ui/app/components/topology-metrics/popover/index.scss @@ -1,87 +1,27 @@ .topology-metrics-popover { - .deny-target, - .L7-target { - transform: translate(-50%,-50%); + > button { position: absolute; + transform: translate(-50%,-50%); background-color: $white; - padding: 1px 2px; + padding: 1px 1px; + &:hover { + cursor:pointer; + } + &:active, &:focus { + outline: none; + } } - .deny-target:hover, - .L7-target:hover { - cursor:pointer; + &.deny .informed-action header::before { + display: none; } - .deny-target:active, - .deny-target:focus, - .L7-target:active, - .L7-target:focus { - outline: none; - } - .deny-target::before { + &.deny > button::before, + &.deny .tippy-arrow::after { @extend %with-cancel-square-fill-color-mask, %as-pseudo; background-color: $red-500; } - .L7-target::before { + &.l7 > button::before, + &.l7 .tippy-arrow::after { @extend %with-layers-mask, %as-pseudo; background-color: $gray-300; } - .body { - padding: 12px 12px 16px 25px; - h3 { - font-size: 14px; - padding-bottom: 4px; - } - p { - font-size: 12px; - } - } - .actions { - border-top: 1px solid $gray-300; - width: 100%; - display: inline-flex; - a, - button { - width: 50%; - height: 36px; - padding: 10px 0; - font-weight: $typo-weight-medium; - text-align: center; - line-height: normal; - } - button:first-child { - color: $blue-500; - } - button:nth-child(2) { - color: $gray-800; - } - button:hover { - cursor: pointer; - } - } - .ember-popover { - padding: 0; - width: 200px; - z-index: 3 !important; - } } -.L7-popover { - .body { - background-color: $white; - } - h3 { - margin-left: -20px; - color: $blue-500; - } - h3::before { - @extend %with-info-circle-fill-mask, %as-pseudo; - color: $blue-500; - margin-right: 4px; - } -} -.deny-popover { - .body { - background-color: $white; - } - h3 { - color: $red-800; - } -} \ No newline at end of file diff --git a/ui/packages/consul-ui/app/components/topology-metrics/up-lines/index.hbs b/ui/packages/consul-ui/app/components/topology-metrics/up-lines/index.hbs index 41bbfacd93..43085279f0 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/up-lines/index.hbs +++ b/ui/packages/consul-ui/app/components/topology-metrics/up-lines/index.hbs @@ -56,9 +56,12 @@ {{/if}} {{#each @items as |item|}} - + {{#if (or (not item.Intention.Allowed) item.Intention.HasPermissions)}} + + {{/if}} {{/each}} diff --git a/ui/packages/consul-ui/app/components/topology-metrics/up-lines/index.js b/ui/packages/consul-ui/app/components/topology-metrics/up-lines/index.js index 3c622e5490..d726dd3aa6 100644 --- a/ui/packages/consul-ui/app/components/topology-metrics/up-lines/index.js +++ b/ui/packages/consul-ui/app/components/topology-metrics/up-lines/index.js @@ -15,8 +15,8 @@ export default class TopologyMetricsUpLines extends Component { const partLen = item.getPointAtLength(Math.ceil(pathLen * 0.666)); return { id: item.id, - x: partLen.x - center.x, - y: partLen.y - center.y * 0.81, + x: Math.round(partLen.x - center.x), + y: Math.round(partLen.y - center.y * 0.81), }; }); } diff --git a/ui/packages/consul-ui/app/modifiers/with-overlay.js b/ui/packages/consul-ui/app/modifiers/with-overlay.js new file mode 100644 index 0000000000..137663c682 --- /dev/null +++ b/ui/packages/consul-ui/app/modifiers/with-overlay.js @@ -0,0 +1,70 @@ +import { modifier } from 'ember-modifier'; +import tippy, { followCursor } from 'tippy.js'; + +/** + * Overlay 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 = ''; + } + if (hash.returns) { + options.trigger = 'manual'; + } + 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 = popover => { + clearInterval(interval); + interval = setTimeout(() => { + popover.hide(); + }, delay[1]); + }; + } + } + let $trigger = $anchor; + const popover = tippy($anchor, { + triggerTarget: $trigger, + content: $anchor => content, + // showOnCreate: true, + // hideOnClick: false, + interactive: true, + plugins: [typeof options.followCursor !== 'undefined' ? followCursor : undefined].filter(item => + Boolean(item) + ), + ...hash.options, + }); + if (hash.returns) { + hash.returns(popover); + } + return () => { + clearInterval(interval); + popover.destroy(); + }; +}); diff --git a/ui/packages/consul-ui/app/styles/base/color/base-variables.scss b/ui/packages/consul-ui/app/styles/base/color/base-variables.scss index 359e88b672..dc4053afb8 100644 --- a/ui/packages/consul-ui/app/styles/base/color/base-variables.scss +++ b/ui/packages/consul-ui/app/styles/base/color/base-variables.scss @@ -79,6 +79,7 @@ $green-600: #26912f; $green-700: #1e7125; $green-800: #15501a; $green-900: #0d3010; +$blue-010: #fbfcff; $blue-050: #f0f5ff; $blue-100: #bfd4ff; $blue-200: #8ab1ff; @@ -89,6 +90,7 @@ $blue-600: #0f4fd1; $blue-700: #0e40a3; $blue-800: #0a2d74; $blue-900: #061b46; +$red-010: #fdfafb; $red-050: #f9ecee; $red-100: #efc7cc; $red-200: #e5a2aa; diff --git a/ui/packages/consul-ui/app/styles/base/components/confirmation-alert/index.scss b/ui/packages/consul-ui/app/styles/base/components/confirmation-alert/index.scss deleted file mode 100644 index 8047a4544b..0000000000 --- a/ui/packages/consul-ui/app/styles/base/components/confirmation-alert/index.scss +++ /dev/null @@ -1,6 +0,0 @@ -@import './skin'; -@import './layout'; - -%confirmation-alert > ul > li > * { - @extend %internal-button; -} diff --git a/ui/packages/consul-ui/app/styles/base/components/confirmation-alert/layout.scss b/ui/packages/consul-ui/app/styles/base/components/confirmation-alert/layout.scss deleted file mode 100644 index 8903dcf1f9..0000000000 --- a/ui/packages/consul-ui/app/styles/base/components/confirmation-alert/layout.scss +++ /dev/null @@ -1,20 +0,0 @@ -%confirmation-alert > div { - padding: 1rem; -} -%confirmation-alert > ul { - display: flex; - margin: 0; - padding: 4px; -} -%confirmation-alert > ul > li { - width: 50%; -} -%confirmation-alert > ul > li > * { - width: 100%; -} -%confirmation-alert.warning header::before { - margin-right: 5px; -} -%confirmation-alert.warning header { - margin-bottom: 0.5em; -} diff --git a/ui/packages/consul-ui/app/styles/base/components/confirmation-alert/skin.scss b/ui/packages/consul-ui/app/styles/base/components/confirmation-alert/skin.scss deleted file mode 100644 index 0684daed5e..0000000000 --- a/ui/packages/consul-ui/app/styles/base/components/confirmation-alert/skin.scss +++ /dev/null @@ -1,38 +0,0 @@ -%confirmation-alert { - background-color: $white; -} - -%confirmation-alert > div { - background-color: $yellow-050; - border-top-left-radius: $decor-radius-200; - border-top-right-radius: $decor-radius-200; - cursor: default; -} -%confirmation-alert > ul { - list-style: none; -} -%confirmation-alert > ul > li > * { - cursor: pointer; -} -%confirmation-alert > ul > li > *:hover, -%confirmation-alert > ul > li > *:focus { - background-color: $gray-100; -} -%confirmation-alert > ul > .dangerous > * { - @extend %frame-red-300; -} -%confirmation-alert > ul > .dangerous > *:hover, -%confirmation-alert > ul > .dangerous > *:focus { - @extend %frame-red-700; -} -%confirmation-alert.warning header { - color: $orange-700; -} -%confirmation-alert.warning header::before { - @extend %with-alert-triangle-mask, %as-pseudo; - background-color: $yellow-500; - margin-right: 5px; -} -%confirmation-alert p { - color: $black; -} 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 e69ac6a5a8..4b9905d68b 100644 --- a/ui/packages/consul-ui/app/styles/base/components/index.scss +++ b/ui/packages/consul-ui/app/styles/base/components/index.scss @@ -2,7 +2,6 @@ @import './breadcrumbs/index'; @import './buttons/index'; @import './checkbox-group/index'; -@import './confirmation-alert/index'; @import './display-toggle/index'; @import './form-elements/index'; @import './inline-alert/index'; diff --git a/ui/packages/consul-ui/app/styles/base/components/menu-panel/index.scss b/ui/packages/consul-ui/app/styles/base/components/menu-panel/index.scss index 1ada891d33..59e3431dfa 100644 --- a/ui/packages/consul-ui/app/styles/base/components/menu-panel/index.scss +++ b/ui/packages/consul-ui/app/styles/base/components/menu-panel/index.scss @@ -14,3 +14,6 @@ %menu-panel > ul > li.dangerous > *:not(div) { @extend %internal-button-dangerous; } +%menu-panel .informed-action { + border: 0 !important; +} diff --git a/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss b/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss index 9d566199d4..35f6f25261 100644 --- a/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss +++ b/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss @@ -79,7 +79,7 @@ $info-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,'); $key-svg: url('data:image/svg+xml;charset=UTF-8,'); $kubernetes-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,'); -$layers-svg: url('data:image/svg+xml;charset=UTF-8,'); +$layers-svg: url('data:image/svg+xml;charset=UTF-8,'); $learn-svg: url('data:image/svg+xml;charset=UTF-8,'); $link-svg: url('data:image/svg+xml;charset=UTF-8,'); $loading-svg: url('data:image/svg+xml;charset=UTF-8,'); diff --git a/ui/packages/consul-ui/app/styles/base/typography/base-placeholders.scss b/ui/packages/consul-ui/app/styles/base/typography/base-placeholders.scss index c0936bf585..c62cf349dc 100644 --- a/ui/packages/consul-ui/app/styles/base/typography/base-placeholders.scss +++ b/ui/packages/consul-ui/app/styles/base/typography/base-placeholders.scss @@ -1,3 +1,9 @@ +%typo-inherit { + font-size: inherit; + font-weight: inherit; + line-height: inherit; + font-style: inherit; +} %typo-body { font-size: $typo-size-600; font-family: $typo-family-sans; diff --git a/ui/packages/consul-ui/app/styles/components.scss b/ui/packages/consul-ui/app/styles/components.scss index 8c2b5c37ed..2dc01e99f0 100644 --- a/ui/packages/consul-ui/app/styles/components.scss +++ b/ui/packages/consul-ui/app/styles/components.scss @@ -32,7 +32,6 @@ @import './components/tooltip-panel'; @import './components/menu-panel'; @import './components/more-popover-menu'; -@import './components/confirmation-alert'; @import './components/definition-table'; @import './components/radio-card'; @@ -47,11 +46,13 @@ /**/ @import './components/app-view'; +@import 'consul-ui/components/overlay'; @import 'consul-ui/components/tooltip'; @import 'consul-ui/components/notice'; @import 'consul-ui/components/modal-dialog'; @import 'consul-ui/components/filter-bar'; @import 'consul-ui/components/freetext-filter'; +@import 'consul-ui/components/informed-action'; @import 'consul-ui/components/consul/tomography/graph'; @import 'consul-ui/components/consul/discovery-chain'; diff --git a/ui/packages/consul-ui/app/styles/components/confirmation-alert.scss b/ui/packages/consul-ui/app/styles/components/confirmation-alert.scss deleted file mode 100644 index e3edea149a..0000000000 --- a/ui/packages/consul-ui/app/styles/components/confirmation-alert.scss +++ /dev/null @@ -1,3 +0,0 @@ -.confirmation-alert { - @extend %confirmation-alert; -} diff --git a/ui/packages/consul-ui/app/styles/typography.scss b/ui/packages/consul-ui/app/styles/typography.scss index 5b6b8ba605..a4196e48ab 100644 --- a/ui/packages/consul-ui/app/styles/typography.scss +++ b/ui/packages/consul-ui/app/styles/typography.scss @@ -20,7 +20,6 @@ fieldset > header, %app-view-content div > dl > dt, %table caption, %tbody-th, -%confirmation-alert header, %form-element > span { @extend %h4; } diff --git a/ui/packages/consul-ui/package.json b/ui/packages/consul-ui/package.json index c59dfcc638..59c247d935 100644 --- a/ui/packages/consul-ui/package.json +++ b/ui/packages/consul-ui/package.json @@ -131,7 +131,6 @@ "ember-stargate": "^0.2.0", "ember-string-fns": "^1.4.0", "ember-test-selectors": "^4.0.0", - "ember-tooltips": "^3.4.3", "ember-truth-helpers": "^2.0.0", "eslint": "^7.12.1", "eslint-plugin-ember": "^7.7.2", diff --git a/ui/yarn.lock b/ui/yarn.lock index dfb134b1c6..04a620445d 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -5250,7 +5250,7 @@ broccoli-output-wrapper@^3.2.1: heimdalljs-logger "^0.1.10" symlink-or-copy "^1.2.0" -broccoli-persistent-filter@^1.1.5, broccoli-persistent-filter@^1.1.6, broccoli-persistent-filter@^1.4.3: +broccoli-persistent-filter@^1.1.6, broccoli-persistent-filter@^1.4.3: version "1.4.6" resolved "https://registry.yarnpkg.com/broccoli-persistent-filter/-/broccoli-persistent-filter-1.4.6.tgz#80762d19000880a77da33c34373299c0f6a3e615" integrity sha512-0RejLwoC95kv4kta8KAa+FmECJCK78Qgm8SRDEK7YyU0N9Cx6KpY3UCDy9WELl3mCXLN8TokNxc7/hp3lL4lfw== @@ -5400,11 +5400,6 @@ broccoli-source@^1.1.0: resolved "https://registry.yarnpkg.com/broccoli-source/-/broccoli-source-1.1.0.tgz#54f0e82c8b73f46580cbbc4f578f0b32fca8f809" integrity sha1-VPDoLItz9GWAy7xPV48LMvyo+Ak= -broccoli-source@^2.0.0: - version "2.1.2" - resolved "https://registry.yarnpkg.com/broccoli-source/-/broccoli-source-2.1.2.tgz#e9ae834f143b607e9ec114ade66731500c38b90b" - integrity sha512-1lLayO4wfS0c0Sj50VfHJXNWf94FYY0WUhxj0R77thbs6uWI7USiOWFqQV5dRmhAJnoKaGN4WyLGQbgjgiYFwQ== - broccoli-source@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/broccoli-source/-/broccoli-source-3.0.0.tgz#c7c9ba24505941b72a0244568285bc859f69dfbd" @@ -5443,14 +5438,6 @@ broccoli-stew@^3.0.0: symlink-or-copy "^1.2.0" walk-sync "^1.1.3" -broccoli-string-replace@^0.1.2: - version "0.1.2" - resolved "https://registry.yarnpkg.com/broccoli-string-replace/-/broccoli-string-replace-0.1.2.tgz#1ed92f85680af8d503023925e754e4e33676b91f" - integrity sha1-HtkvhWgK+NUDAjkl51Tk4zZ2uR8= - dependencies: - broccoli-persistent-filter "^1.1.5" - minimatch "^3.0.3" - broccoli-uglify-sourcemap@^3.1.0: version "3.2.0" resolved "https://registry.yarnpkg.com/broccoli-uglify-sourcemap/-/broccoli-uglify-sourcemap-3.2.0.tgz#d96f1d41f6c18e9a5d49af1a5ab9489cdcac1c6c" @@ -7541,7 +7528,7 @@ ember-cli-htmlbars@^3.0.0, ember-cli-htmlbars@^3.0.1: json-stable-stringify "^1.0.1" strip-bom "^3.0.0" -ember-cli-htmlbars@^4.0.5, ember-cli-htmlbars@^4.2.0, ember-cli-htmlbars@^4.2.3, ember-cli-htmlbars@^4.3.1: +ember-cli-htmlbars@^4.0.5, ember-cli-htmlbars@^4.2.3, ember-cli-htmlbars@^4.3.1: version "4.4.0" resolved "https://registry.yarnpkg.com/ember-cli-htmlbars/-/ember-cli-htmlbars-4.4.0.tgz#7ca17d5ca8f7550984346d9e6e93da0c3323f8d9" integrity sha512-ohgctqk7dXIZR4TgN0xRoUYltWhghFJgqmtuswQTpZ7p74RxI9PKx+E8WV/95mGcPzraesvMNBg5utQNvcqgNg== @@ -8427,23 +8414,6 @@ ember-text-measurer@^0.6.0: ember-cli-babel "^7.19.0" ember-cli-htmlbars "^4.3.1" -ember-tooltips@^3.4.3: - version "3.4.5" - resolved "https://registry.yarnpkg.com/ember-tooltips/-/ember-tooltips-3.4.5.tgz#c6724cd9d2c274ad567541f6cd50cc3841606afe" - integrity sha512-wElt+f0jujQkOUHIu3MfXqeHcV0bRxOgfmCro2RSNbJ/pM/ndYcsNsMuT3BCPPFikuLoTHEc85XDpzNcKoW9Fw== - dependencies: - broccoli-file-creator "^2.1.1" - broccoli-funnel "^2.0.2" - broccoli-merge-trees "^2.0.0" - broccoli-source "^2.0.0" - broccoli-string-replace "^0.1.2" - ember-cli-babel "^7.13.0" - ember-cli-htmlbars "^4.2.0" - ember-in-element-polyfill "^1.0.0" - popper.js "^1.12.5" - resolve "^1.10.1" - tooltip.js "^1.1.5" - ember-truth-helpers@2.1.0, ember-truth-helpers@^2.0.0, ember-truth-helpers@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/ember-truth-helpers/-/ember-truth-helpers-2.1.0.tgz#d4dab4eee7945aa2388126485977baeb33ca0798" @@ -12558,7 +12528,7 @@ minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1: resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a" integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo= -"minimatch@2 || 3", minimatch@3.0.4, minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4: +"minimatch@2 || 3", minimatch@3.0.4, minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083" integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA== @@ -13669,7 +13639,7 @@ polished@^3.4.4: dependencies: "@babel/runtime" "^7.9.2" -popper.js@^1.0.2, popper.js@^1.12.5, popper.js@^1.14.4, popper.js@^1.14.7: +popper.js@^1.14.4, popper.js@^1.14.7: version "1.16.1" resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b" integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ== @@ -16271,13 +16241,6 @@ toidentifier@1.0.0: resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553" integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw== -tooltip.js@^1.1.5: - version "1.3.3" - resolved "https://registry.yarnpkg.com/tooltip.js/-/tooltip.js-1.3.3.tgz#2ad0d77bb6776a76e117eac0afcd3c7d3a237121" - integrity sha512-XWWuy/dBdF/F/YpRE955yqBZ4VdLfiTAUdOqoU+wJm6phJlMpEzl/iYHZ+qJswbeT9VG822bNfsETF9wzmoy5A== - dependencies: - popper.js "^1.0.2" - topo@2.x.x: version "2.0.2" resolved "https://registry.yarnpkg.com/topo/-/topo-2.0.2.tgz#cd5615752539057c0dc0491a621c3bc6fbe1d182"