ui: Adds CRD popover 'informed action' for intentions managed by CRDs (#10100)
* ui: Adds CRD popover 'informed action' for intentions add via CRDs
This commit is contained in:
parent
ec38cf3206
commit
07496c0180
|
@ -0,0 +1,3 @@
|
|||
```release-note:improvement
|
||||
ui: Added CRD popover 'informed action' for intentions managed by CRDs
|
||||
```
|
|
@ -129,6 +129,12 @@ export default Component.extend({
|
|||
},
|
||||
open: function(e) {
|
||||
set(this, 'expanded', true);
|
||||
const $items = [...this.dom.elements(MENU_ITEMS, this.$menu)];
|
||||
if ($items.length === 0) {
|
||||
this.dom
|
||||
.element('input[type="checkbox"]', this.$menu.parentElement)
|
||||
.dispatchEvent(new MouseEvent('click'));
|
||||
}
|
||||
// Take the trigger out of the tabbing whilst the menu is open
|
||||
this.$trigger.setAttribute('tabindex', '-1');
|
||||
this._listeners.add(this.dom.document(), {
|
||||
|
|
|
@ -20,6 +20,9 @@
|
|||
tr > *:last-child {
|
||||
width: 60px;
|
||||
}
|
||||
.menu-panel.confirmation {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$--lt-horizontal-nav} {
|
||||
|
|
|
@ -54,7 +54,10 @@ as |item index|>
|
|||
</td>
|
||||
</BlockSlot>
|
||||
<BlockSlot @name="actions" as |index change checked|>
|
||||
<PopoverMenu @expanded={{if (eq checked index) true false}} @onchange={{action change index}} @keyboardAccess={{false}}>
|
||||
<PopoverMenu
|
||||
@expanded={{if (eq checked index) true false}}
|
||||
@onchange={{action change index}} @keyboardAccess={{false}}
|
||||
>
|
||||
<BlockSlot @name="trigger">
|
||||
More
|
||||
</BlockSlot>
|
||||
|
@ -100,7 +103,38 @@ as |item index|>
|
|||
</li>
|
||||
{{else}}
|
||||
<li role="none">
|
||||
<a role="menuitem" tabindex="-1" href={{href-to (or @routeName 'dc.intentions.edit') item.ID}}>View</a>
|
||||
<div role="menu">
|
||||
<InformedAction
|
||||
class="info kubernetes"
|
||||
>
|
||||
<:header>
|
||||
Managed by CRD
|
||||
</:header>
|
||||
<:body>
|
||||
<p>
|
||||
This intention is being managed through an Intention Custom Resource in your Kubernetes cluster. It is view only in the UI.
|
||||
</p>
|
||||
</:body>
|
||||
<:actions as |Actions|>
|
||||
<Actions.Action>
|
||||
<Action
|
||||
tabindex="-1"
|
||||
class="action"
|
||||
@href={{href-to (or @routeName 'dc.intentions.edit') item.ID}}
|
||||
>
|
||||
View
|
||||
</Action>
|
||||
</Actions.Action>
|
||||
<Actions.Action>
|
||||
<Action
|
||||
@onclick={{action change}}
|
||||
>
|
||||
Cancel
|
||||
</Action>
|
||||
</Actions.Action>
|
||||
</:actions>
|
||||
</InformedAction>
|
||||
</div>
|
||||
</li>
|
||||
{{/if}}
|
||||
</BlockSlot>
|
||||
|
|
|
@ -66,6 +66,13 @@
|
|||
background-color: $yellow-050;
|
||||
}
|
||||
}
|
||||
/* brands */
|
||||
&.kubernetes {
|
||||
header::before {
|
||||
@extend %with-logo-kubernetes-color-icon, %without-mask, %as-pseudo;
|
||||
}
|
||||
}
|
||||
/**/
|
||||
> ul > .action > * {
|
||||
color: $blue-500;
|
||||
}
|
||||
|
|
|
@ -2,7 +2,14 @@
|
|||
{{#let (hash
|
||||
change=(action "change")
|
||||
) as |api|}}
|
||||
<div class="menu-panel {{position}}">
|
||||
<div
|
||||
class={{join ' ' (compact (array
|
||||
'menu-panel'
|
||||
position
|
||||
(if isConfirmation 'confirmation')
|
||||
))}}
|
||||
{{did-insert (action 'connect')}}
|
||||
>
|
||||
<YieldSlot @name="controls">
|
||||
{{yield api}}
|
||||
</YieldSlot>
|
||||
|
|
|
@ -1,12 +1,27 @@
|
|||
import Component from '@ember/component';
|
||||
import { inject as service } from '@ember/service';
|
||||
import { next } from '@ember/runloop';
|
||||
import { set } from '@ember/object';
|
||||
|
||||
import Slotted from 'block-slots';
|
||||
|
||||
export default Component.extend(Slotted, {
|
||||
tagName: '',
|
||||
dom: service('dom'),
|
||||
isConfirmation: false,
|
||||
actions: {
|
||||
connect: function($el) {
|
||||
next(() => {
|
||||
// if theres only a single choice in the menu and it doesn't have an
|
||||
// immediate button/link/label to click then it will be a
|
||||
// confirmation/informed action
|
||||
const isConfirmationMenu = this.dom.element(
|
||||
'li:only-child > [role="menu"]:first-child',
|
||||
$el
|
||||
);
|
||||
set(this, 'isConfirmation', typeof isConfirmationMenu !== 'undefined');
|
||||
});
|
||||
},
|
||||
change: function(e) {
|
||||
const id = e.target.getAttribute('id');
|
||||
const $trigger = this.dom.element(`[for='${id}']`);
|
||||
|
|
|
@ -9,12 +9,15 @@
|
|||
transition: min-height 150ms, max-height 150ms;
|
||||
min-height: 0;
|
||||
}
|
||||
%menu-panel [type='checkbox'] ~ * {
|
||||
%menu-panel:not(.confirmation) [type='checkbox'] ~ * {
|
||||
transition: transform 150ms;
|
||||
}
|
||||
%menu-panel [type='checkbox']:checked ~ * {
|
||||
transform: translateX(calc(-100% - 10px));
|
||||
}
|
||||
%menu-panel.confirmation [role='menu'] {
|
||||
min-height: 200px !important;
|
||||
}
|
||||
%menu-panel [role='menuitem'] {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
@ -37,7 +40,8 @@
|
|||
min-height: 143px;
|
||||
max-height: 143px;
|
||||
}
|
||||
%menu-panel [id$='-']:first-child:checked ~ ul label[for$='-'] + [role='menu'] {
|
||||
%menu-panel [id$='-']:first-child:checked ~ ul label[for$='-'] * [role='menu'],
|
||||
%menu-panel [id$='-']:first-child:checked ~ ul > li > [role='menu'] {
|
||||
display: block;
|
||||
}
|
||||
/**/
|
||||
|
|
|
@ -1874,3 +1874,9 @@
|
|||
-webkit-mask-image: $webhook-svg;
|
||||
mask-image: $webhook-svg;
|
||||
}
|
||||
|
||||
%without-mask {
|
||||
-webkit-mask-image: none;
|
||||
mask-image: none;
|
||||
background-color: $transparent !important;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue