diff --git a/__snapshots__/bay-editor.md b/__snapshots__/bay-editor.md index bfe07396d4..f6e5987036 100644 --- a/__snapshots__/bay-editor.md +++ b/__snapshots__/bay-editor.md @@ -39,10 +39,7 @@ -
+
@@ -99,10 +96,7 @@ -
+
diff --git a/__snapshots__/substation-editor.md b/__snapshots__/substation-editor.md index 0c837f5a64..1aa898d987 100644 --- a/__snapshots__/substation-editor.md +++ b/__snapshots__/substation-editor.md @@ -39,9 +39,9 @@ - + - + @@ -88,15 +88,9 @@ - + - + diff --git a/__snapshots__/voltage-level-editor.md b/__snapshots__/voltage-level-editor.md index 4060db6e6f..8c252926b4 100644 --- a/__snapshots__/voltage-level-editor.md +++ b/__snapshots__/voltage-level-editor.md @@ -40,10 +40,7 @@ -
+
@@ -95,10 +92,7 @@ -
+
diff --git a/__snapshots__/zeroline-pane.md b/__snapshots__/zeroline-pane.md index 70407a3c77..ac4841d37a 100644 --- a/__snapshots__/zeroline-pane.md +++ b/__snapshots__/zeroline-pane.md @@ -35,7 +35,7 @@ -
+
@@ -79,7 +79,7 @@ -
+
@@ -123,7 +123,7 @@ -
+
diff --git a/src/editor-container.ts b/src/editor-container.ts index fa65d5d9a8..40f96ea24c 100644 --- a/src/editor-container.ts +++ b/src/editor-container.ts @@ -76,7 +76,9 @@ export class EditorContainer extends LitElement { async firstUpdated(): Promise { await super.updateComplete; + if (this.addMenu) this.addMenu.anchor = this.headerContainer; + const parentEditorContainer = ( (this.parentNode).host?.closest('editor-container') @@ -89,6 +91,8 @@ export class EditorContainer extends LitElement { ); this.contrasted = !parentEditorContainer.contrasted; + + this.tabIndex = 0; } private renderAddButtons(): TemplateResult[] { @@ -122,6 +126,7 @@ export class EditorContainer extends LitElement { id="menu" corner="TOP_RIGHT" menuCorner="END" + .anchor=${this.headerContainer} @selected=${(e: Event) => { const tagName = ((e.target).selected).value; this.openCreateWizard(tagName); @@ -178,15 +183,14 @@ export class EditorContainer extends LitElement { contrasted: this.contrasted, nomargin: this.nomargin, })}" - tabindex="0" > ${this.renderHeader()} - +
`; } static styles = css` - :host(.moving) section { + :host(.moving) .container { opacity: 0.3; } @@ -195,7 +199,7 @@ export class EditorContainer extends LitElement { transition: all 200ms linear; outline-style: solid; margin: 8px 12px 16px; - padding: 0.02px; /*Dirty hack to force outline around content with margin*/ + overflow: hidden; outline-width: 0px; outline-color: var(--mdc-theme-primary); opacity: 1; @@ -215,34 +219,31 @@ export class EditorContainer extends LitElement { .nomargin { margin: 0px; + overflow: visible; } - .container:focus { - box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), - 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); + :host { + outline: none; } - .container:focus-within { + :host(:focus-within) .container { + box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), + 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); outline-width: 2px; transition: all 250ms linear; } - .container:focus-within h1, - .container:focus-within h2, - .container:focus-within h3 { + :host(:focus-within) h1, + :host(:focus-within) h2, + :host(:focus-within) h3 { color: var(--mdc-theme-surface); transition: background-color 200ms linear; - } - - .container:focus-within h1, - .container:focus-within h2, - .container:focus-within h3 { background-color: var(--mdc-theme-primary); } - .container.secondary:focus-within h1, - .container.secondary:focus-within h2, - .container.secondary:focus-within h3 { + :host(:focus-within) .container.secondary h1, + :host(:focus-within) .container.secondary h2, + :host(:focus-within) .container.secondary h3 { background-color: var(--mdc-theme-secondary); } diff --git a/src/zeroline-pane.ts b/src/zeroline-pane.ts index 36bf777c21..75abf52ded 100644 --- a/src/zeroline-pane.ts +++ b/src/zeroline-pane.ts @@ -121,7 +121,7 @@ export class ZerolinePane extends LitElement { ${this.renderIedContainer()} ${this.doc?.querySelector(':root > Substation') - ? html`
+ ? html`
${Array.from(this.doc.querySelectorAll('Substation') ?? []) .filter(isPublic) .map( diff --git a/src/zeroline/bay-editor.ts b/src/zeroline/bay-editor.ts index 5eb0cb8bb3..62b1153837 100644 --- a/src/zeroline/bay-editor.ts +++ b/src/zeroline/bay-editor.ts @@ -60,7 +60,7 @@ export class BayEditor extends LitElement { renderIedContainer(): TemplateResult { const ieds = this.getAttachedIeds?.(this.element) ?? []; return ieds?.length - ? html`
+ ? html`
${ieds.map(ied => html``)}
` : html``; @@ -99,7 +99,7 @@ export class BayEditor extends LitElement { > ${this.renderIedContainer()} -
+
${Array.from( getChildElementsByTagName(this.element, 'ConductingEquipment') ).map( diff --git a/src/zeroline/substation-editor.ts b/src/zeroline/substation-editor.ts index 0bed9b13ef..3a970313b7 100644 --- a/src/zeroline/substation-editor.ts +++ b/src/zeroline/substation-editor.ts @@ -63,7 +63,7 @@ export class SubstationEditor extends LitElement { renderIedContainer(): TemplateResult { const ieds = this.getAttachedIeds?.(this.element) ?? []; return ieds?.length - ? html`
+ ? html`
${ieds.map(ied => html``)}
` : html``; @@ -110,7 +110,6 @@ export class SubstationEditor extends LitElement { ).map( voltageLevel => html` + ? html`
${ieds.map(ied => html``)}
` : html``; @@ -121,7 +121,7 @@ export class VoltageLevelEditor extends LitElement { > ${this.renderIedContainer()} -
+
${Array.from(this.element?.querySelectorAll(selectors.Bay) ?? []).map( bay => html` { ); beforeEach(async () => { parent = await fixture( - `` + `` ); element = parent @@ -217,7 +217,7 @@ describe('editor-container', () => { it('negated the set contrasted property of the parent', async () => { parent = await fixture( - `` + `` ); element = parent @@ -230,7 +230,7 @@ describe('editor-container', () => { it('makes sure maximum level is 6', async () => { parent = await fixture( - `` + `` ); element = parent