fix: styling issue with SubEquipment editor (openscd#1130)

Author: JakobVogelsang

src/editors/substation/conducting-equipment-editor.ts

@@ -21,6 +21,7 @@ import '../../action-icon.js';
 import '../../action-pane.js';
 import './eq-function-editor.js';
 import './l-node-editor.js';
+import './sub-equipment-editor.js';
 import { startMove, getIcon, styles } from './foundation.js';
 import {
   getChildElementsByTagName,
@@ -32,8 +33,6 @@ import {
 import { BayEditor } from './bay-editor.js';
 import { emptyWizard, wizards } from '../../wizards/wizard-library.js';
 
-import './sub-equipment-editor.js';
-
 function childTags(element: Element | null | undefined): SCLTag[] {
   if (!element) return [];
 
@@ -127,6 +126,23 @@ export class ConductingEquipmentEditor extends LitElement {
     )}`;
   }
 
+  private renderSubEquipments(): TemplateResult {
+    if (!this.showfunctions) return html``;
+
+    const subEquipments = getChildElementsByTagName(
+      this.element,
+      'SubEquipment'
+    );
+
+    return html` ${subEquipments.map(
+      subEquipment =>
+        html`<sub-equipment-editor
+          .doc=${this.doc}
+          .element=${subEquipment}
+        ></sub-equipment-editor>`
+    )}`;
+  }
+
   private renderAddButtons(): TemplateResult[] {
     return childTags(this.element).map(
       child =>
@@ -222,27 +238,6 @@ export class ConductingEquipmentEditor extends LitElement {
       ></mwc-fab>`;
   }
 
-  private renderSubEquipments(): TemplateResult {
-    if (!this.showfunctions) return html``;
-
-    const subEquipments = getChildElementsByTagName(
-      this.element,
-      'SubEquipment'
-    );
-
-    return subEquipments.length
-      ? html`<div class="container subequipment">
-          ${subEquipments.map(
-            subEquipment =>
-              html`<sub-equipment-editor
-                .doc=${this.doc}
-                .element=${subEquipment}
-              ></sub-equipment-editor>`
-          )}
-        </div>`
-      : html``;
-  }
-
   render(): TemplateResult {
     if (this.showfunctions)
       return html`<action-pane label="${this.name}"

src/editors/substation/foundation.ts

@@ -659,14 +659,6 @@ export const styles = css`
     grid-template-columns: repeat(auto-fit, minmax(64px, auto));
   }
 
-  .container.subequipment {
-    display: grid;
-    grid-gap: 12px;
-    padding: 8px 12px 16px;
-    box-sizing: border-box;
-    grid-template-columns: repeat(auto-fit, minmax(64px, auto));
-  }
-
   mwc-dialog {
     display: flex;
     flex-direction: column;

src/editors/substation/powertransformer-editor.ts

@@ -19,6 +19,9 @@ import { Menu } from '@material/mwc-menu';
 
 import '../../action-icon.js';
 import '../../action-pane.js';
+import './sub-equipment-editor.js';
+import './eq-function-editor.js';
+import './transformer-winding-editor.js';
 import { powerTransformerTwoWindingIcon } from '../../icons/icons.js';
 import { emptyWizard, wizards } from '../../wizards/wizard-library.js';
 import {
@@ -33,9 +36,6 @@ import { SubstationEditor } from './substation-editor.js';
 import { BayEditor } from './bay-editor.js';
 import { VoltageLevelEditor } from './voltage-level-editor.js';
 
-import './sub-equipment-editor.js';
-import './transformer-winding-editor.js';
-
 function childTags(element: Element | null | undefined): SCLTag[] {
   if (!element) return [];
 
@@ -130,6 +130,22 @@ export class PowerTransformerEditor extends LitElement {
     )}`;
   }
 
+  private renderSubEquipments(): TemplateResult {
+    if (!this.showfunctions) return html``;
+    const subEquipments = getChildElementsByTagName(
+      this.element,
+      'SubEquipment'
+    );
+
+    return html` ${subEquipments.map(
+      subEquipment =>
+        html`<sub-equipment-editor
+          .doc=${this.doc}
+          .element=${subEquipment}
+        ></sub-equipment-editor>`
+    )}`;
+  }
+
   private renderAddButtons(): TemplateResult[] {
     return childTags(this.element).map(
       child =>
@@ -201,26 +217,6 @@ export class PowerTransformerEditor extends LitElement {
       </abbr>`;
   }
 
-  private renderSubEquipments(): TemplateResult {
-    if (!this.showfunctions) return html``;
-    const subEquipments = getChildElementsByTagName(
-      this.element,
-      'SubEquipment'
-    );
-
-    return subEquipments.length
-      ? html`<div class="container subequipment">
-          ${subEquipments.map(
-            subEquipment =>
-              html`<sub-equipment-editor
-                .doc=${this.doc}
-                .element=${subEquipment}
-              ></sub-equipment-editor>`
-          )}
-        </div>`
-      : html``;
-  }
-
   private renderTransformerWinding(): TemplateResult {
     if (!this.showfunctions) return html``;
     const transformerWindings = getChildElementsByTagName(

src/editors/substation/sub-equipment-editor.ts

@@ -19,8 +19,8 @@ import { Menu } from '@material/mwc-menu';
 
 import '../../action-icon.js';
 import '../../action-pane.js';
-
-import { styles } from './foundation.js';
+import './l-node-editor.js';
+import './eq-function-editor.js';
 import {
   getChildElementsByTagName,
   newWizardEvent,
@@ -178,15 +178,17 @@ export class SubEquipmentEditor extends LitElement {
   }
 
   static styles = css`
-    ${styles}
-
-    :host(.moving) {
-      opacity: 0.3;
-    }
-
     abbr {
       text-decoration: none;
       border-bottom: none;
     }
+
+    .container.lnode {
+      display: grid;
+      grid-gap: 12px;
+      padding: 8px 12px 16px;
+      box-sizing: border-box;
+      grid-template-columns: repeat(auto-fit, minmax(64px, auto));
+    }
   `;
 }

test/unit/editors/substation/__snapshots__/conducting-equipment-editor.test.snap.js

@@ -458,16 +458,14 @@ snapshots["conducting-equipment-editor rendered as action pane with SubEquipment
       </mwc-list-item>
     </mwc-menu>
   </abbr>
-  <div class="container subequipment">
-    <sub-equipment-editor>
-    </sub-equipment-editor>
-    <sub-equipment-editor>
-    </sub-equipment-editor>
-    <sub-equipment-editor>
-    </sub-equipment-editor>
-    <sub-equipment-editor>
-    </sub-equipment-editor>
-  </div>
+  <sub-equipment-editor>
+  </sub-equipment-editor>
+  <sub-equipment-editor>
+  </sub-equipment-editor>
+  <sub-equipment-editor>
+  </sub-equipment-editor>
+  <sub-equipment-editor>
+  </sub-equipment-editor>
 </action-pane>
 `;
 /* end snapshot conducting-equipment-editor rendered as action pane with SubEquipment children looks like the latest snapshot */

test/unit/editors/substation/__snapshots__/powertransformer-editor.test.snap.js

@@ -461,14 +461,12 @@ snapshots["powertransformer-editor rendered as action pane with SubEquipment chi
       </mwc-list-item>
     </mwc-menu>
   </abbr>
-  <div class="container subequipment">
-    <sub-equipment-editor>
-    </sub-equipment-editor>
-    <sub-equipment-editor>
-    </sub-equipment-editor>
-    <sub-equipment-editor>
-    </sub-equipment-editor>
-  </div>
+  <sub-equipment-editor>
+  </sub-equipment-editor>
+  <sub-equipment-editor>
+  </sub-equipment-editor>
+  <sub-equipment-editor>
+  </sub-equipment-editor>
 </action-pane>
 `;
 /* end snapshot powertransformer-editor rendered as action pane with SubEquipment children looks like the latest snapshot */