🐛 Fix dialog rendering issue to ensure full-page coverage

 Add optional page transitions for improved navigation
🎨 Enhance dashboard UI/UX for better user experience
This commit is contained in:
Danny Morabito 2025-04-04 17:54:56 +02:00
parent ff01fc8503
commit aa8d8bb4f3
Signed by: dannym
GPG key ID: 7CC8056A5A04557E
7 changed files with 278 additions and 88 deletions

View file

@ -1,11 +1,13 @@
import { LitElement, css, html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { type Ref, createRef, ref } from 'lit/directives/ref.js';
import { when } from 'lit/directives/when.js';
import '@components/General/Button';
import { StyledInput } from '@components/General/Input';
import { StyledTextarea } from '@components/General/Textarea';
import { StyledToggle } from '@components/General/Toggle';
import type { EveDialog } from '../General/Dialog';
interface InputEvent extends Event {
detail: {
@ -18,6 +20,8 @@ export class CalendarEventDialog extends LitElement {
@property({ type: Boolean })
open = false;
dialogRef: Ref<EveDialog> = createRef();
@state()
private newEvent = {
title: '',
@ -49,7 +53,8 @@ export class CalendarEventDialog extends LitElement {
`;
private handleClose() {
this.dispatchEvent(new CustomEvent('close'));
this.dialogRef.value?.close(false);
this.dispatchEvent(new CustomEvent('close', { bubbles: false }));
}
private handleInputChange(e: Event) {
@ -77,7 +82,7 @@ export class CalendarEventDialog extends LitElement {
if (!this.open) return html``;
return html`
<arx-dialog width="500px" title="Add Event" .open=${this.open}>
<arx-dialog ${ref(this.dialogRef)} width="500px" title="Add Event" .open=${this.open} @close=${this.handleClose}>
<arx-fieldset legend="Title">
<arx-input
type="text"