Adicionar botão de fechar no modal do renderizador

dgadelha · Jan 6, 2025 · 78fcb74 · 78fcb74
1 parent 2ed75fb
commit 78fcb74
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/packages/ide/src/app/dialog-renderer/dialog-renderer.component.html b/packages/ide/src/app/dialog-renderer/dialog-renderer.component.html
@@ -1,5 +1,9 @@
 <header mat-dialog-title>
   <span [innerText]="title"></span>
+  <s></s>
+  <button tabindex="-1" type="button" mat-dialog-close mat-icon-button aria-label="Fechar diálogo">
+    <svg-icon src="assets/mdi/close.svg" svgAriaLabel="Ícone de fechar diálogo" />
+  </button>
 </header>
 
 <mat-dialog-content class="renderer-content">

diff --git a/packages/ide/src/app/dialog-renderer/dialog-renderer.component.scss b/packages/ide/src/app/dialog-renderer/dialog-renderer.component.scss
@@ -1,3 +1,10 @@
+header {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  border-bottom: 1px solid var(--pws-border-color);
+}
+
 .renderer-content {
   padding: 0 !important;
 }
diff --git a/packages/ide/src/app/dialog-renderer/dialog-renderer.component.ts b/packages/ide/src/app/dialog-renderer/dialog-renderer.component.ts
@@ -1,10 +1,12 @@
 import { Component, ElementRef, Input, ViewChild } from "@angular/core";
-import { MatDialogContent, MatDialogTitle } from "@angular/material/dialog";
+import { MatButtonModule } from "@angular/material/button";
+import { MatDialogClose, MatDialogContent, MatDialogTitle } from "@angular/material/dialog";
+import { AngularSvgIconModule } from "angular-svg-icon";
 import { IGraphicsRendererComponent } from "../../renderer";
 
 @Component({
   selector: "app-dialog-renderer",
-  imports: [MatDialogContent, MatDialogTitle],
+  imports: [MatButtonModule, MatDialogClose, MatDialogContent, MatDialogTitle, AngularSvgIconModule],
   templateUrl: "./dialog-renderer.component.html",
   styleUrl: "./dialog-renderer.component.scss",
   standalone: true,