feat(form-headers): display delete btn on row hover

gravitee-io · Mar 9, 2022 · 4be9d1d · 4be9d1d
1 parent 95bd353
commit 4be9d1d
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 3 deletions.
diff --git a/...ar/projects/ui-particles-angular/src/lib/gio-form-headers/gio-form-headers.component.html b/...ar/projects/ui-particles-angular/src/lib/gio-form-headers/gio-form-headers.component.html
@@ -20,7 +20,6 @@
     <tr>
       <th>KEY</th>
       <th>VALUE</th>
-      <th></th>
     </tr>
   </thead>
   <tbody formArrayName="headers">
@@ -38,9 +37,8 @@
         <mat-form-field class="gio-form-headers__table__header-row__td-value__field" [floatLabel]="'never'">
           <input formControlName="value" matInput type="text" placeholder="Value..." />
         </mat-form-field>
-      </td>
-      <td class="gio-form-headers__table__header-row__td-remove">
         <button
+          class="gio-form-headers__table__header-row__td-value__button"
           *ngIf="headersFormArray.controls.length - 1 !== headerIndex"
           mat-icon-button
           aria-label="Delete"

diff --git a/...ar/projects/ui-particles-angular/src/lib/gio-form-headers/gio-form-headers.component.scss b/...ar/projects/ui-particles-angular/src/lib/gio-form-headers/gio-form-headers.component.scss
@@ -13,6 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@use '@angular/material' as mat;
+
+@use '../../scss' as gio;
 
 :host {
   display: block;
@@ -22,16 +25,30 @@
   &__table {
     width: 100%;
 
+    &__header-row:hover .gio-form-headers__table__header-row__td-value__button {
+      display: block;
+    }
+
     &__header-row {
       &__td-key,
       &__td-value {
+        position: relative;
+
         &__field {
           display: flex;
           overflow: hidden;
           height: 32px;
           flex-direction: column;
           justify-content: center;
         }
+
+        &__button {
+          display: none;
+          position: absolute;
+          top: 3px;
+          right: 3px;
+          display: none;
+        }
       }
 
       &__td-remove {
@@ -40,6 +57,13 @@
         padding: 0;
       }
     }
+
+    &__header-row:hover .gio-form-headers__table__header-row__td-value__button {
+      z-index: 110;
+      display: block;
+      background-color: mat.get-color-from-palette(gio.$mat-content-palette, 'lighter');
+      opacity: 0.9;
+    }
   }
 }