🐛 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:
parent
ff01fc8503
commit
aa8d8bb4f3
GPG key ID:
7CC8056A5A04557E
7 changed files with 278 additions and 88 deletions
|
|
@ -14,26 +14,52 @@ export class AppGrid extends LitElement {
|
|||
name: string;
|
||||
}[] = [];
|
||||
|
||||
override connectedCallback() {
|
||||
super.connectedCallback();
|
||||
this.style.setProperty('--icons-count', this.apps.length.toString());
|
||||
}
|
||||
|
||||
static override styles = [
|
||||
css`
|
||||
:host {
|
||||
display: grid;
|
||||
grid-template-columns: 80px;
|
||||
justify-content: space-around;
|
||||
gap: 20px;
|
||||
padding: 30px;
|
||||
gap: 28px;
|
||||
padding: 42px 30px;
|
||||
margin-top: 10px;
|
||||
|
||||
--stagger-delay: calc(var(--animation-duration) * 2 / var(--icons-count));
|
||||
|
||||
@media (min-width: 500px) {
|
||||
grid-template-columns: repeat(2, 80px);
|
||||
grid-auto-rows: minmax(120px, auto);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
grid-template-columns: repeat(3, 80px);
|
||||
gap: 32px 42px;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
grid-template-columns: repeat(4, 80px);
|
||||
grid-auto-flow: dense;
|
||||
}
|
||||
}
|
||||
|
||||
arx-app-icon {
|
||||
opacity: 0;
|
||||
transform: translateY(20px) scale(0.8);
|
||||
animation: float-in var(--transition) forwards;
|
||||
}
|
||||
|
||||
@keyframes float-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(20px) scale(0.8);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
`,
|
||||
|
|
@ -43,12 +69,13 @@ export class AppGrid extends LitElement {
|
|||
return html`
|
||||
${map(
|
||||
this.apps,
|
||||
(app) => html`
|
||||
(app, index) => html`
|
||||
<arx-app-icon
|
||||
.icon=${app.icon}
|
||||
.color=${app.color}
|
||||
.href=${app.href}
|
||||
.name=${app.name}
|
||||
style="animation-delay: calc(var(--stagger-delay) * ${index});"
|
||||
></arx-app-icon>
|
||||
`,
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -24,37 +24,44 @@ export class AppIcon extends LitElement {
|
|||
css`
|
||||
:host {
|
||||
display: flex;
|
||||
--animation-speed: 0.25s;
|
||||
--shadow-opacity: 0.2;
|
||||
--hover-lift: -6px;
|
||||
--tap-scale: 0.92;
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 10px;
|
||||
text-decoration: none;
|
||||
padding: 6px;
|
||||
padding: 8px;
|
||||
border-radius: 18px;
|
||||
transition: transform var(--animation-speed)
|
||||
cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
transition: transform var(--transition);
|
||||
position: relative;
|
||||
will-change: transform;
|
||||
perspective: 800px;
|
||||
}
|
||||
|
||||
.app-icon:hover {
|
||||
transform: translateY(-2px);
|
||||
transform: translateY(var(--hover-lift));
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
|
||||
box-shadow: 0 3px 8px rgba(0, 0, 0, var(--shadow-opacity));
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
transition: all var(--animation-speed) ease-out;
|
||||
transition:
|
||||
transform var(--overshoot-transition),
|
||||
box-shadow var(--overshoot-transition);
|
||||
transform-style: preserve-3d;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
|
@ -66,7 +73,7 @@ export class AppIcon extends LitElement {
|
|||
);
|
||||
pointer-events: none;
|
||||
opacity: 1;
|
||||
transition: opacity var(--animation-speed) ease-out;
|
||||
transition: opacity var(--transition);
|
||||
}
|
||||
|
||||
&::after {
|
||||
|
|
@ -74,13 +81,14 @@ export class AppIcon extends LitElement {
|
|||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
var(--gradient-angle),
|
||||
rgba(255, 255, 255, 0.25) 20%,
|
||||
rgba(255, 255, 255, 0) 60%
|
||||
var(--gradient-angle, 145deg),
|
||||
rgba(255, 255, 255, 0.35) 10%,
|
||||
rgba(255, 255, 255, 0) 70%
|
||||
);
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity var(--animation-speed) ease-out;
|
||||
transition: opacity var(--undershoot-transition);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
|
|
@ -95,14 +103,17 @@ export class AppIcon extends LitElement {
|
|||
.icon-svg {
|
||||
color: white;
|
||||
filter: drop-shadow(
|
||||
calc(cos(var(--gradient-angle)) * 2px)
|
||||
calc(sin(var(--gradient-angle)) * 2px) rgba(0, 0, 0, 0.2)
|
||||
calc(cos(var(--gradient-angle, 145deg)) * 3px)
|
||||
calc(sin(var(--gradient-angle, 145deg)) * 3px)
|
||||
rgba(0, 0, 0, 0.25)
|
||||
);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: transform var(--overshoot-transition);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.app-name {
|
||||
|
|
@ -114,16 +125,36 @@ export class AppIcon extends LitElement {
|
|||
color: var(--color-base-content);
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
transition: all var(--animation-speed) ease-out;
|
||||
transition: all var(--transition);
|
||||
transform: translateZ(0);
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.app-icon:hover .icon {
|
||||
transform: scale(1.08);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
|
||||
transform: scale(1.05) translateZ(10px) rotateX(var(--rotate-x, 0deg)) rotateY(var(--rotate-y, 0deg));
|
||||
box-shadow:
|
||||
0 10px 20px -5px rgba(0, 0, 0, calc(var(--shadow-opacity) * 1.5)),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.app-icon:hover .app-name {
|
||||
opacity: 1;
|
||||
transform: translateY(2px) scale(1.02);
|
||||
}
|
||||
|
||||
.app-icon:hover .icon-svg {
|
||||
transform: scale(1.08) translateZ(15px);
|
||||
}
|
||||
|
||||
.app-icon:active .icon {
|
||||
transform: scale(0.96);
|
||||
transform: scale(var(--tap-scale)) translateZ(0);
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, calc(var(--shadow-opacity) * 0.8));
|
||||
transition: all var(--transition);
|
||||
}
|
||||
|
||||
.app-icon:active .app-name {
|
||||
transform: translateY(0) scale(0.98);
|
||||
transition: all var(--transition);
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
|
@ -132,6 +163,7 @@ export class AppIcon extends LitElement {
|
|||
this.iconElement = this.shadowRoot?.querySelector('.icon') as HTMLElement;
|
||||
if (this.iconElement) {
|
||||
this.iconElement.addEventListener('mousemove', this.handleMouseMove);
|
||||
this.iconElement.addEventListener('mouseleave', this.handleMouseLeave);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -139,6 +171,7 @@ export class AppIcon extends LitElement {
|
|||
super.disconnectedCallback();
|
||||
if (this.iconElement) {
|
||||
this.iconElement.removeEventListener('mousemove', this.handleMouseMove);
|
||||
this.iconElement.removeEventListener('mouseleave', this.handleMouseLeave);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -153,7 +186,32 @@ export class AppIcon extends LitElement {
|
|||
const dy = e.clientY - centerY;
|
||||
const angle = Math.atan2(dy, dx) * (180 / Math.PI);
|
||||
|
||||
const maxTilt = 20;
|
||||
const percentX = (e.clientX - rect.left) / rect.width - 0.5;
|
||||
const percentY = (e.clientY - rect.top) / rect.height - 0.5;
|
||||
|
||||
const tiltX = -percentY * maxTilt * 1.2;
|
||||
const tiltY = percentX * maxTilt;
|
||||
|
||||
this.iconElement.style.setProperty('--gradient-angle', `${angle}deg`);
|
||||
this.iconElement.style.setProperty('--rotate-x', `${tiltX}deg`);
|
||||
this.iconElement.style.setProperty('--rotate-y', `${tiltY}deg`);
|
||||
};
|
||||
|
||||
handleMouseLeave = () => {
|
||||
if (!this.iconElement) return;
|
||||
|
||||
this.iconElement.style.transition = 'transform var(--transition)';
|
||||
this.iconElement.style.setProperty('--rotate-x', '0deg');
|
||||
this.iconElement.style.setProperty('--rotate-y', '0deg');
|
||||
|
||||
this.iconElement.addEventListener(
|
||||
'transitionend',
|
||||
() => {
|
||||
this.iconElement!.style.transition = '';
|
||||
},
|
||||
{ once: true },
|
||||
);
|
||||
};
|
||||
|
||||
override render() {
|
||||
|
|
@ -162,12 +220,13 @@ export class AppIcon extends LitElement {
|
|||
<div class="icon" style="background: ${this.color};">
|
||||
${when(
|
||||
this.icon,
|
||||
() => html`<iconify-icon
|
||||
icon="${this.icon}"
|
||||
class="icon-svg"
|
||||
width="64"
|
||||
height="64"
|
||||
></iconify-icon>`,
|
||||
() =>
|
||||
html`<iconify-icon
|
||||
icon="${this.icon}"
|
||||
class="icon-svg"
|
||||
width="64"
|
||||
height="64"
|
||||
></iconify-icon>`,
|
||||
)}
|
||||
</div>
|
||||
<span class="app-name">${this.name}</span>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { LitElement, css, html } from 'lit';
|
||||
import { customElement, property, state } from 'lit/decorators.js';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
import { classMap } from 'lit/directives/class-map.js';
|
||||
|
||||
@customElement('arx-dialog')
|
||||
|
|
@ -11,42 +11,59 @@ export class EveDialog extends LitElement {
|
|||
@property({ type: String }) width = '420px';
|
||||
@property({ type: String }) maxWidth = '90%';
|
||||
|
||||
@state() private _previousFocus: HTMLElement | null = null;
|
||||
private rootWindow: HTMLDivElement | null = null;
|
||||
private previousScrollTop = 0;
|
||||
|
||||
static override styles = css`
|
||||
:host {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999999;
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--color-base-200);
|
||||
border-radius: var(--radius-field);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--color-base-300);
|
||||
border-radius: var(--radius-field);
|
||||
border: 2px solid var(--color-base-200);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-neutral);
|
||||
}
|
||||
|
||||
:host {
|
||||
display: none;
|
||||
position: fixed !important;
|
||||
transform: translate3d(-50%, -50%, 1px);
|
||||
will-change: transform;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 2147483647 !important;
|
||||
contain: layout;
|
||||
background-color: oklch(from var(--color-base-content) l c h / 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.2s ease;
|
||||
overflow: hidden;
|
||||
-webkit-app-region: no-drag;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.overlay.active {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
:host([open]) {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.dialog-container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
max-height: 80vh;
|
||||
overflow: auto;
|
||||
background-color: var(--color-base-100);
|
||||
border-radius: var(--radius-box);
|
||||
border: var(--border) solid var(--color-base-300);
|
||||
|
|
@ -58,15 +75,10 @@ export class EveDialog extends LitElement {
|
|||
width: var(--dialog-width, 420px);
|
||||
max-width: var(--dialog-max-width, 90%);
|
||||
padding: 28px;
|
||||
transform: scale(0.95) translateY(10px);
|
||||
transition: transform 0.25s cubic-bezier(0.1, 1, 0.2, 1);
|
||||
color: var(--color-base-content);
|
||||
}
|
||||
|
||||
.overlay.active .dialog-container {
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
|
||||
.dialog-header {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
|
|
@ -76,6 +88,7 @@ export class EveDialog extends LitElement {
|
|||
}
|
||||
|
||||
.dialog-content {
|
||||
overflow: auto;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
|
|
@ -103,6 +116,9 @@ export class EveDialog extends LitElement {
|
|||
override connectedCallback() {
|
||||
super.connectedCallback();
|
||||
document.addEventListener('keydown', this._handleKeyDown);
|
||||
this.rootWindow = document.body
|
||||
.querySelector('arx-eve-router')!
|
||||
.shadowRoot!.querySelector('.window') as HTMLDivElement;
|
||||
}
|
||||
|
||||
override disconnectedCallback() {
|
||||
|
|
@ -111,15 +127,9 @@ export class EveDialog extends LitElement {
|
|||
}
|
||||
|
||||
override updated(changedProps: Map<string, unknown>) {
|
||||
if (changedProps.has('open') && this.open) {
|
||||
this._previousFocus = document.activeElement as HTMLElement;
|
||||
// Focus the dialog container after rendering
|
||||
setTimeout(() => {
|
||||
const container = this.shadowRoot?.querySelector('.dialog-container') as HTMLElement;
|
||||
if (container) container.focus();
|
||||
}, 50);
|
||||
} else if (changedProps.has('open') && !this.open && this._previousFocus) {
|
||||
this._previousFocus.focus();
|
||||
if (changedProps.has('open')) {
|
||||
if (this.open) this.show();
|
||||
else this.close();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -129,24 +139,36 @@ export class EveDialog extends LitElement {
|
|||
}
|
||||
|
||||
private _handleOverlayClick(e: MouseEvent) {
|
||||
if (this.closeOnOverlayClick && e.target === e.currentTarget) {
|
||||
this.close();
|
||||
}
|
||||
if (this.closeOnOverlayClick && e.target === e.currentTarget) this.close();
|
||||
}
|
||||
|
||||
show() {
|
||||
this.open = true;
|
||||
this.style.display = 'block';
|
||||
this.previousScrollTop = this.rootWindow?.scrollTop ?? 0;
|
||||
this.style.height = `${this.rootWindow!.clientHeight * 2}px`; // this is a hack to prevent the overlay background from showing through
|
||||
this.rootWindow?.style.setProperty('overflow', 'hidden', 'important');
|
||||
this.rootWindow?.scrollTo({
|
||||
top: 0,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}
|
||||
|
||||
close() {
|
||||
close(triggerEvent = true) {
|
||||
this.open = false;
|
||||
this.dispatchEvent(new CustomEvent('close'));
|
||||
this.style.display = 'none';
|
||||
this.rootWindow?.style.setProperty('overflow', 'auto', 'important');
|
||||
this.rootWindow?.scrollTo({
|
||||
top: this.previousScrollTop,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
if (triggerEvent) this.dispatchEvent(new CustomEvent('close'));
|
||||
}
|
||||
|
||||
override render() {
|
||||
return html`
|
||||
<div
|
||||
class="${classMap({ overlay: true, active: this.open })}"
|
||||
class="${classMap({ active: this.open })}"
|
||||
@click=${this._handleOverlayClick}
|
||||
style="--dialog-width: ${this.width}; --dialog-max-width: ${this.maxWidth};"
|
||||
>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue