Skip to content

Commit 1b054b6

Browse files
JakobVogelsangJakobVogelsang
authored
fix(editor-container): some UI related issues (#357)
* fix(editor-container): prevent margin collapse * refactor(editor-container): remove child slot name * fix(editor-container): make sure focus is triggered for slotted elements * fix(editor-container): make sure menu is in the right upper corner
1 parent 423166e commit 1b054b6

File tree

10 files changed

+40
-58
lines changed

10 files changed

+40
-58
lines changed

‎__snapshots__/bay-editor.md‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,7 @@
3939
<mwc-icon-button icon="delete">
4040
</mwc-icon-button>
4141
</abbr>
42-
<div
43-
id="ceContainer"
44-
slot="container"
45-
>
42+
<div id="ceContainer">
4643
<conducting-equipment-editor>
4744
</conducting-equipment-editor>
4845
<conducting-equipment-editor>
@@ -99,10 +96,7 @@
9996
<mwc-icon-button icon="delete">
10097
</mwc-icon-button>
10198
</abbr>
102-
<div
103-
id="ceContainer"
104-
slot="container"
105-
>
99+
<div id="ceContainer">
106100
<conducting-equipment-editor readonly="">
107101
</conducting-equipment-editor>
108102
<conducting-equipment-editor readonly="">

‎__snapshots__/substation-editor.md‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,9 @@
3939
<mwc-icon-button icon="delete">
4040
</mwc-icon-button>
4141
</abbr>
42-
<voltage-level-editor slot="container">
42+
<voltage-level-editor>
4343
</voltage-level-editor>
44-
<voltage-level-editor slot="container">
44+
<voltage-level-editor>
4545
</voltage-level-editor>
4646
</editor-container>
4747

@@ -88,15 +88,9 @@
8888
<mwc-icon-button icon="delete">
8989
</mwc-icon-button>
9090
</abbr>
91-
<voltage-level-editor
92-
readonly=""
93-
slot="container"
94-
>
91+
<voltage-level-editor readonly="">
9592
</voltage-level-editor>
96-
<voltage-level-editor
97-
readonly=""
98-
slot="container"
99-
>
93+
<voltage-level-editor readonly="">
10094
</voltage-level-editor>
10195
</editor-container>
10296

‎__snapshots__/voltage-level-editor.md‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,7 @@
4040
<mwc-icon-button icon="delete">
4141
</mwc-icon-button>
4242
</abbr>
43-
<div
44-
id="bayContainer"
45-
slot="container"
46-
>
43+
<div id="bayContainer">
4744
<bay-editor>
4845
</bay-editor>
4946
<bay-editor>
@@ -95,10 +92,7 @@
9592
<mwc-icon-button icon="delete">
9693
</mwc-icon-button>
9794
</abbr>
98-
<div
99-
id="bayContainer"
100-
slot="container"
101-
>
95+
<div id="bayContainer">
10296
<bay-editor readonly="">
10397
</bay-editor>
10498
<bay-editor readonly="">

‎__snapshots__/zeroline-pane.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
</abbr>
3636
</nav>
3737
</h1>
38-
<section tabindex="0">
38+
<section>
3939
<substation-editor>
4040
</substation-editor>
4141
<substation-editor>
@@ -79,7 +79,7 @@
7979
</abbr>
8080
</nav>
8181
</h1>
82-
<section tabindex="0">
82+
<section>
8383
<substation-editor readonly="">
8484
</substation-editor>
8585
<substation-editor readonly="">
@@ -123,7 +123,7 @@
123123
</abbr>
124124
</nav>
125125
</h1>
126-
<section tabindex="0">
126+
<section>
127127
<substation-editor>
128128
</substation-editor>
129129
<substation-editor>

‎src/editor-container.ts‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,9 @@ export class EditorContainer extends LitElement {
7676

7777
async firstUpdated(): Promise<void> {
7878
await super.updateComplete;
79+
7980
if (this.addMenu) this.addMenu.anchor = this.headerContainer;
81+
8082
const parentEditorContainer =
8183
<EditorContainer>(
8284
(<ShadowRoot>this.parentNode).host?.closest('editor-container')
@@ -89,6 +91,8 @@ export class EditorContainer extends LitElement {
8991
);
9092

9193
this.contrasted = !parentEditorContainer.contrasted;
94+
95+
this.tabIndex = 0;
9296
}
9397

9498
private renderAddButtons(): TemplateResult[] {
@@ -122,6 +126,7 @@ export class EditorContainer extends LitElement {
122126
id="menu"
123127
corner="TOP_RIGHT"
124128
menuCorner="END"
129+
.anchor=${this.headerContainer}
125130
@selected=${(e: Event) => {
126131
const tagName = (<ListItem>(<Menu>e.target).selected).value;
127132
this.openCreateWizard(tagName);
@@ -178,15 +183,14 @@ export class EditorContainer extends LitElement {
178183
contrasted: this.contrasted,
179184
nomargin: this.nomargin,
180185
})}"
181-
tabindex="0"
182186
>
183187
${this.renderHeader()}
184-
<slot name="container"></slot>
188+
<slot></slot>
185189
</section>`;
186190
}
187191

188192
static styles = css`
189-
:host(.moving) section {
193+
:host(.moving) .container {
190194
opacity: 0.3;
191195
}
192196
@@ -195,7 +199,7 @@ export class EditorContainer extends LitElement {
195199
transition: all 200ms linear;
196200
outline-style: solid;
197201
margin: 8px 12px 16px;
198-
padding: 0.02px; /*Dirty hack to force outline around content with margin*/
202+
overflow: hidden;
199203
outline-width: 0px;
200204
outline-color: var(--mdc-theme-primary);
201205
opacity: 1;
@@ -215,34 +219,31 @@ export class EditorContainer extends LitElement {
215219
216220
.nomargin {
217221
margin: 0px;
222+
overflow: visible;
218223
}
219224
220-
.container:focus {
221-
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
222-
0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
225+
:host {
226+
outline: none;
223227
}
224228
225-
.container:focus-within {
229+
:host(:focus-within) .container {
230+
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
231+
0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
226232
outline-width: 2px;
227233
transition: all 250ms linear;
228234
}
229235
230-
.container:focus-within h1,
231-
.container:focus-within h2,
232-
.container:focus-within h3 {
236+
:host(:focus-within) h1,
237+
:host(:focus-within) h2,
238+
:host(:focus-within) h3 {
233239
color: var(--mdc-theme-surface);
234240
transition: background-color 200ms linear;
235-
}
236-
237-
.container:focus-within h1,
238-
.container:focus-within h2,
239-
.container:focus-within h3 {
240241
background-color: var(--mdc-theme-primary);
241242
}
242243
243-
.container.secondary:focus-within h1,
244-
.container.secondary:focus-within h2,
245-
.container.secondary:focus-within h3 {
244+
:host(:focus-within) .container.secondary h1,
245+
:host(:focus-within) .container.secondary h2,
246+
:host(:focus-within) .container.secondary h3 {
246247
background-color: var(--mdc-theme-secondary);
247248
}
248249

‎src/zeroline-pane.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ export class ZerolinePane extends LitElement {
121121
</h1>
122122
${this.renderIedContainer()}
123123
${this.doc?.querySelector(':root > Substation')
124-
? html`<section tabindex="0">
124+
? html`<section>
125125
${Array.from(this.doc.querySelectorAll('Substation') ?? [])
126126
.filter(isPublic)
127127
.map(

‎src/zeroline/bay-editor.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ export class BayEditor extends LitElement {
6060
renderIedContainer(): TemplateResult {
6161
const ieds = this.getAttachedIeds?.(this.element) ?? [];
6262
return ieds?.length
63-
? html`<div slot="container" id="iedcontainer">
63+
? html`<div id="iedcontainer">
6464
${ieds.map(ied => html`<ied-editor .element=${ied}></ied-editor>`)}
6565
</div>`
6666
: html``;
@@ -99,7 +99,7 @@ export class BayEditor extends LitElement {
9999
></mwc-icon-button>
100100
</abbr>
101101
${this.renderIedContainer()}
102-
<div slot="container" id="ceContainer">
102+
<div id="ceContainer">
103103
${Array.from(
104104
getChildElementsByTagName(this.element, 'ConductingEquipment')
105105
).map(

‎src/zeroline/substation-editor.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export class SubstationEditor extends LitElement {
6363
renderIedContainer(): TemplateResult {
6464
const ieds = this.getAttachedIeds?.(this.element) ?? [];
6565
return ieds?.length
66-
? html`<div id="iedcontainer" slot="container">
66+
? html`<div id="iedcontainer">
6767
${ieds.map(ied => html`<ied-editor .element=${ied}></ied-editor>`)}
6868
</div>`
6969
: html``;
@@ -110,7 +110,6 @@ export class SubstationEditor extends LitElement {
110110
).map(
111111
voltageLevel =>
112112
html`<voltage-level-editor
113-
slot="container"
114113
.element=${voltageLevel}
115114
.getAttachedIeds=${this.getAttachedIeds}
116115
?readonly=${this.readonly}

‎src/zeroline/voltage-level-editor.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ export class VoltageLevelEditor extends LitElement {
7979
renderIedContainer(): TemplateResult {
8080
const ieds = this.getAttachedIeds?.(this.element) ?? [];
8181
return ieds?.length
82-
? html`<div id="iedcontainer" slot="container">
82+
? html`<div id="iedcontainer">
8383
${ieds.map(ied => html`<ied-editor .element=${ied}></ied-editor>`)}
8484
</div>`
8585
: html``;
@@ -121,7 +121,7 @@ export class VoltageLevelEditor extends LitElement {
121121
></mwc-icon-button>
122122
</abbr>
123123
${this.renderIedContainer()}
124-
<div id="bayContainer" slot="container">
124+
<div id="bayContainer">
125125
${Array.from(this.element?.querySelectorAll(selectors.Bay) ?? []).map(
126126
bay => html`<bay-editor
127127
.element=${bay}

‎test/unit/editor-container.test.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,7 @@ describe('editor-container', () => {
184184
);
185185
beforeEach(async () => {
186186
parent = await fixture(
187-
`<editor-container header="parent header"><bay-editor .element=${bay} slot="container"></bay-editor></editor-container>`
187+
`<editor-container header="parent header"><bay-editor .element=${bay}></bay-editor></editor-container>`
188188
);
189189

190190
element = parent
@@ -217,7 +217,7 @@ describe('editor-container', () => {
217217

218218
it('negated the set contrasted property of the parent', async () => {
219219
parent = await fixture(
220-
`<editor-container contrasted header="parent header"><bay-editor .element=${bay} slot="container"></bay-editor></editor-container>`
220+
`<editor-container contrasted header="parent header"><bay-editor .element=${bay}></bay-editor></editor-container>`
221221
);
222222

223223
element = parent
@@ -230,7 +230,7 @@ describe('editor-container', () => {
230230

231231
it('makes sure maximum level is 6', async () => {
232232
parent = await fixture(
233-
`<editor-container level="6" header="parent header"><bay-editor .element=${bay} slot="container"></bay-editor></editor-container>`
233+
`<editor-container level="6" header="parent header"><bay-editor .element=${bay}></bay-editor></editor-container>`
234234
);
235235

236236
element = parent

0 commit comments

Comments
 (0)