refactor(editors/cleanup): show edit button on hover (openscd#747)

* Show edit button using CSS instead of JS, partially closes openscd#746

* Add hover css to dataset container, update snapshot for control blocks

Author: danyill

src/editors/cleanup/control-blocks-container.ts

@@ -170,6 +170,18 @@ export class CleanupControlBlocks extends LitElement {
       ><span class="unreferencedControl"
         >${controlBlock.getAttribute('name')!}
       </span>
+      <span>
+        <mwc-icon-button
+          label="warning"
+          icon="warning_amber"
+          class="cautionItem"
+          title="${translate(
+            'cleanup.unreferencedControls.addressDefinitionTooltip'
+          )}"
+          ?disabled="${!(getCommAddress(controlBlock) !== null)}"
+        >
+        </mwc-icon-button>
+      </span>
       <span>
         <mwc-icon-button
           label="Edit"
@@ -196,18 +208,6 @@ export class CleanupControlBlocks extends LitElement {
           }}
         ></mwc-icon-button>
       </span>
-      <span>
-        <mwc-icon-button
-          label="warning"
-          icon="warning_amber"
-          class="cautionItem"
-          title="${translate(
-            'cleanup.unreferencedControls.addressDefinitionTooltip'
-          )}"
-          ?disabled="${!(getCommAddress(controlBlock) !== null)}"
-        >
-        </mwc-icon-button>
-      </span>
       <span slot="secondary"
         >${controlBlock.tagName} -
         ${controlBlock.closest('IED')?.getAttribute('name')}
@@ -352,6 +352,17 @@ export class CleanupControlBlocks extends LitElement {
       --mdc-icon-size: 16px;
     }
 
+    .editItem {
+      visibility: hidden;
+      opacity: 0;
+    }
+
+    .cleanupListItem:hover .editItem {
+      visibility: visible;
+      opacity: 1;
+      transition: visibility 0s, opacity 0.5s linear;
+    }
+
     .cautionItem {
       color: var(--yellow);
     }

src/editors/cleanup/datasets-container.ts

@@ -206,6 +206,17 @@ export class CleanupDatasets extends LitElement {
       --mdc-icon-size: 16px;
     }
 
+    .editItem {
+      visibility: hidden;
+      opacity: 0;
+    }
+
+    .checkListItem:hover .editItem {
+      visibility: visible;
+      opacity: 1;
+      transition: visibility 0s, opacity 0.5s linear;
+    }
+
     .cleanupDeleteButton {
       float: right;
     }

test/unit/editors/cleanup/__snapshots__/control-blocks-container.test.snap.js

@@ -132,14 +132,6 @@ snapshots["Cleanup: Control Blocks Container With a test file loaded looks like
         <span class="unreferencedControl">
           GCB2_NP
         </span>
-        <span>
-          <mwc-icon-button
-            class="editItem"
-            icon="edit"
-            label="Edit"
-          >
-          </mwc-icon-button>
-        </span>
         <span>
           <mwc-icon-button
             class="cautionItem"
@@ -150,6 +142,14 @@ snapshots["Cleanup: Control Blocks Container With a test file loaded looks like
           >
           </mwc-icon-button>
         </span>
+        <span>
+          <mwc-icon-button
+            class="editItem"
+            icon="edit"
+            label="Edit"
+          >
+          </mwc-icon-button>
+        </span>
         <span slot="secondary">
           GSEControl -
         IED1
@@ -174,18 +174,18 @@ snapshots["Cleanup: Control Blocks Container With a test file loaded looks like
         </span>
         <span>
           <mwc-icon-button
-            class="editItem"
-            icon="edit"
-            label="Edit"
+            class="cautionItem"
+            icon="warning_amber"
+            label="warning"
+            title="[cleanup.unreferencedControls.addressDefinitionTooltip]"
           >
           </mwc-icon-button>
         </span>
         <span>
           <mwc-icon-button
-            class="cautionItem"
-            icon="warning_amber"
-            label="warning"
-            title="[cleanup.unreferencedControls.addressDefinitionTooltip]"
+            class="editItem"
+            icon="edit"
+            label="Edit"
           >
           </mwc-icon-button>
         </span>
@@ -213,20 +213,20 @@ snapshots["Cleanup: Control Blocks Container With a test file loaded looks like
         </span>
         <span>
           <mwc-icon-button
-            class="editItem"
+            class="cautionItem"
             disabled=""
-            icon="edit"
-            label="Edit"
+            icon="warning_amber"
+            label="warning"
+            title="[cleanup.unreferencedControls.addressDefinitionTooltip]"
           >
           </mwc-icon-button>
         </span>
         <span>
           <mwc-icon-button
-            class="cautionItem"
+            class="editItem"
             disabled=""
-            icon="warning_amber"
-            label="warning"
-            title="[cleanup.unreferencedControls.addressDefinitionTooltip]"
+            icon="edit"
+            label="Edit"
           >
           </mwc-icon-button>
         </span>
@@ -252,14 +252,6 @@ snapshots["Cleanup: Control Blocks Container With a test file loaded looks like
         <span class="unreferencedControl">
           ReportCb
         </span>
-        <span>
-          <mwc-icon-button
-            class="editItem"
-            icon="edit"
-            label="Edit"
-          >
-          </mwc-icon-button>
-        </span>
         <span>
           <mwc-icon-button
             class="cautionItem"
@@ -270,6 +262,14 @@ snapshots["Cleanup: Control Blocks Container With a test file loaded looks like
           >
           </mwc-icon-button>
         </span>
+        <span>
+          <mwc-icon-button
+            class="editItem"
+            icon="edit"
+            label="Edit"
+          >
+          </mwc-icon-button>
+        </span>
         <span slot="secondary">
           ReportControl -
         IED2
@@ -294,18 +294,18 @@ snapshots["Cleanup: Control Blocks Container With a test file loaded looks like
         </span>
         <span>
           <mwc-icon-button
-            class="editItem"
-            icon="edit"
-            label="Edit"
+            class="cautionItem"
+            icon="warning_amber"
+            label="warning"
+            title="[cleanup.unreferencedControls.addressDefinitionTooltip]"
           >
           </mwc-icon-button>
         </span>
         <span>
           <mwc-icon-button
-            class="cautionItem"
-            icon="warning_amber"
-            label="warning"
-            title="[cleanup.unreferencedControls.addressDefinitionTooltip]"
+            class="editItem"
+            icon="edit"
+            label="Edit"
           >
           </mwc-icon-button>
         </span>