From d0e96572f3d57c84674f12d2eeeca93afbe667ad Mon Sep 17 00:00:00 2001
From: Jakob Vogelsang <jakob-vogelsang@posteo.de>
Date: Sat, 14 Jan 2023 19:51:51 +0100
Subject: [PATCH] fix: styling issue with SubEquipment editor (#1130)

---
 .../substation/conducting-equipment-editor.ts | 41 ++++++++----------
 src/editors/substation/foundation.ts          |  8 ----
 .../substation/powertransformer-editor.ts     | 42 +++++++++----------
 .../substation/sub-equipment-editor.ts        | 18 ++++----
 .../conducting-equipment-editor.test.snap.js  | 18 ++++----
 .../powertransformer-editor.test.snap.js      | 14 +++----
 6 files changed, 61 insertions(+), 80 deletions(-)

diff --git a/src/editors/substation/conducting-equipment-editor.ts b/src/editors/substation/conducting-equipment-editor.ts
index 963e68c13..41d2583dc 100644
--- a/src/editors/substation/conducting-equipment-editor.ts
+++ b/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}"
diff --git a/src/editors/substation/foundation.ts b/src/editors/substation/foundation.ts
index ae74c7fc0..d0f65baec 100644
--- a/src/editors/substation/foundation.ts
+++ b/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;
diff --git a/src/editors/substation/powertransformer-editor.ts b/src/editors/substation/powertransformer-editor.ts
index 4fab583e7..73e397513 100644
--- a/src/editors/substation/powertransformer-editor.ts
+++ b/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(
diff --git a/src/editors/substation/sub-equipment-editor.ts b/src/editors/substation/sub-equipment-editor.ts
index 86c15d0a7..ce1fac03d 100644
--- a/src/editors/substation/sub-equipment-editor.ts
+++ b/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));
+    }
   `;
 }
diff --git a/test/unit/editors/substation/__snapshots__/conducting-equipment-editor.test.snap.js b/test/unit/editors/substation/__snapshots__/conducting-equipment-editor.test.snap.js
index fe1efeba0..cb81e2442 100644
--- a/test/unit/editors/substation/__snapshots__/conducting-equipment-editor.test.snap.js
+++ b/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 */
diff --git a/test/unit/editors/substation/__snapshots__/powertransformer-editor.test.snap.js b/test/unit/editors/substation/__snapshots__/powertransformer-editor.test.snap.js
index e2ba536b0..325b5e4db 100644
--- a/test/unit/editors/substation/__snapshots__/powertransformer-editor.test.snap.js
+++ b/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 */