Feat: buttons in testtab are separated by the scope of their action (#…

…834) * feat: buttons in testtab are separated by the scope of their action * fix: extra section for button separation
wearefrank · Dec 17, 2024 · 9160f5a · 9160f5a
1 parent 7440250
commit 9160f5a
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 24 deletions.
diff --git a/src/app/report/edit-display/edit-display.component.css b/src/app/report/edit-display/edit-display.component.css
@@ -2,13 +2,6 @@
   font-size: 11pt;
 }
 
-.button-divider {
-  font-size: 1rem;
-  margin: 0 0.5rem;
-  color: darkgrey;
-  user-select: none;
-}
-
 .rerun-result {
   margin: 0 0 1rem 0.25rem;
   font-size: 10pt;

diff --git a/src/app/test/test.component.css b/src/app/test/test.component.css
@@ -22,6 +22,8 @@ tr {
   flex-wrap: wrap;
   gap: 0.25rem;
   width: fit-content;
+  align-items: center;
+  padding: 0.75rem 0;
 }
 
 .button-width {
@@ -32,3 +34,17 @@ tr {
 button {
   height: fit-content;
 }
+
+.button-section {
+  position: relative;
+}
+
+.button-section-title {
+  position: absolute;
+  top: 0;
+  color: grey;
+  width: 100%;
+  max-lines: 1;
+  font-size: 0.6rem;
+  text-align: center;
+}
diff --git a/src/app/test/test.component.html b/src/app/test/test.component.html
@@ -4,23 +4,44 @@
   </div>
   <div class="col">
     <div class="buttons pt-1">
-      <button data-cy-test="runAll" class="btn btn-info" title="Run All" (click)="runSelected()"><i
-        class="fa fa-play"></i></button>
-      <button data-cy-test="refresh" class="btn btn-info" title="ReloadTestReports"
-              (click)="loadData()"><i class="fa fa-refresh"></i></button>
-      <button class="btn btn-info" title="Reset" (click)="resetRunner()">Reset</button>
-      <button class="btn btn-info" title="Options" (click)="testSettingsModal.open()"><i class="fa fa-cog"></i></button>
-      <button data-cy-test="deleteSelected" class="btn btn-info" title="Delete Selected" (click)="openDeleteModal(false)"><i class="fa fa-trash"></i></button>
-      <button data-cy-test="deleteAll" class="btn btn-info" title="Delete All" (click)="openDeleteModal(true)">Delete all</button>
-      <button class="btn btn-info" title="Clone report" (click)="openCloneModal()">Clone</button>
-      <button data-cy-test="copySelected" class="btn btn-info" title="Copy Selected" (click)="copySelected()"><i class="fa fa-copy"></i></button>
-      <button data-cy-test="downloadBinary" class="btn btn-info" title="Download Binary" (click)="downloadSelected()"><i class="fa fa-download"></i></button>
-      <button data-cy-test="upload" type="button" class="btn btn-info" title="Upload"
-              (click)="uploadFileTest.click()">
-        <i class="fa fa-upload"></i>
-        <input #uploadFileTest data-cy-test="uploadFile" type="file" [hidden]="true"
-               (change)="uploadReport($event)">
-      </button>
+      <div class="buttons button-section">
+        <p class="button-section-title">General</p>
+        <button data-cy-test="refresh" class="btn btn-info" title="Reload test reports"
+                (click)="loadData()"><i class="fa fa-refresh"></i></button>
+        <button class="btn btn-info" title="Options" (click)="testSettingsModal.open()"><i class="fa fa-cog"></i>
+        </button>
+        <button data-cy-test="upload" type="button" class="btn btn-info" title="Upload"
+                (click)="uploadFileTest.click()">
+          <i class="fa fa-upload"></i>
+          <input #uploadFileTest data-cy-test="uploadFile" type="file" [hidden]="true"
+                 (change)="uploadReport($event)">
+        </button>
+      </div>
+      <span class="button-divider">&#124;</span>
+      <div class="buttons button-section">
+        <p class="button-section-title">All</p>
+        <button class="btn btn-info" title="Reset" (click)="resetRunner()">Reset</button>
+        <button data-cy-test="deleteAll" class="btn btn-info" title="Delete all" (click)="openDeleteModal(true)">Delete
+          all
+        </button>
+      </div>
+      <span class="button-divider">&#124;</span>
+      <div class="buttons button-section">
+        <p class="button-section-title">Selected</p>
+        <button data-cy-test="runAll" class="btn btn-info" title="Run selected reports" (click)="runSelected()"><i
+          class="fa fa-play"></i></button>
+        <button data-cy-test="deleteSelected" class="btn btn-info" title="Delete selected reports"
+                (click)="openDeleteModal(false)"><i class="fa fa-trash"></i></button>
+        <button data-cy-test="copySelected" class="btn btn-info" title="Copy selected reports" (click)="copySelected()">
+          <i class="fa fa-copy"></i></button>
+        <button data-cy-test="downloadBinary" class="btn btn-info" title="Download binary" (click)="downloadSelected()">
+          <i class="fa fa-download"></i></button>
+      </div>
+      <span class="button-divider">&#124;</span>
+      <div class="buttons button-section">
+        <p class="button-section-title">One</p>
+        <button class="btn btn-info" title="Clone report" (click)="openCloneModal()">Clone</button>
+      </div>
     </div>
 
     <div class="form-group mt-2">

diff --git a/src/styles.css b/src/styles.css
@@ -157,3 +157,10 @@ html, body {
 .cdk-overlay-container {
   z-index: 1100 !important; /* Ensure it is higher than the modal's z-index */
 }
+
+.button-divider {
+  font-size: 1rem;
+  margin: 0 0.5rem;
+  color: darkgrey;
+  user-select: none;
+}