design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(dees-modal): refactor modal to use dees-tile component for improved layout and styling

Browse Source
This commit is contained in:
Jürgen Kunz
2026-04-03 13:13:43 +00:00
parent 2e24d77f6a
commit a2e0760cc6
1 changed files with 50 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
ts_web/elements/00group-overlay/dees-modal/dees-modal.ts
View File

@@ -21,6 +21,7 @@ import {
import * as domtools from '@design.estate/dees-domtools'; import * as domtools from '@design.estate/dees-domtools';
import { DeesWindowLayer } from '../dees-windowlayer/dees-windowlayer.js'; import { DeesWindowLayer } from '../dees-windowlayer/dees-windowlayer.js';
import '../../00group-utility/dees-icon/dees-icon.js'; import '../../00group-utility/dees-icon/dees-icon.js';
import '../../00group-layout/dees-tile/dees-tile.js';
import { themeDefaultStyles } from '../../00theme.js'; import { themeDefaultStyles } from '../../00theme.js';
declare global { declare global {
@@ -142,94 +143,89 @@ export class DeesModal extends DeesElement {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.modal { dees-tile {
will-change: transform; will-change: transform;
transform: translateY(0px) scale(0.95); transform: translateY(0px) scale(0.95);
opacity: 0; opacity: 0;
min-height: 120px; min-height: 120px;
max-height: calc(100vh - 40px); max-height: calc(100vh - 40px);
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
border-radius: 6px;
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
transition: all 0.2s ease; transition: all 0.2s ease;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
margin: 20px; margin: 20px;
display: flex;
flex-direction: column;
overscroll-behavior: contain; overscroll-behavior: contain;
} }
dees-tile::part(outer) {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}
/* Width variations */ /* Width variations */
.modal.width-small { dees-tile.width-small {
width: 380px; width: 380px;
} }
.modal.width-medium { dees-tile.width-medium {
width: 560px; width: 560px;
} }
.modal.width-large { dees-tile.width-large {
width: 800px; width: 800px;
} }
.modal.width-fullscreen { dees-tile.width-fullscreen {
width: calc(100vw - 40px); width: calc(100vw - 40px);
height: calc(100vh - 40px); height: calc(100vh - 40px);
max-height: calc(100vh - 40px); max-height: calc(100vh - 40px);
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.modal { dees-tile {
width: calc(100vw - 40px) !important; width: calc(100vw - 40px) !important;
max-width: none !important; max-width: none !important;
} }
/* Allow full height on mobile when content needs it */
.modalContainer { .modalContainer {
padding: 10px; padding: 10px;
} }
.modal { dees-tile {
margin: 10px; margin: 10px;
max-height: calc(100vh - 20px); max-height: calc(100vh - 20px);
} }
/* Full screen mode on mobile */ dees-tile.mobile-fullscreen {
.modal.mobile-fullscreen {
width: 100vw !important; width: 100vw !important;
height: 100vh !important; height: 100vh !important;
max-height: 100vh !important; max-height: 100vh !important;
margin: 0; margin: 0;
}
dees-tile.mobile-fullscreen::part(outer) {
border-radius: 0; border-radius: 0;
border: none; border: none;
} }
} }
.modal.show { dees-tile.show {
opacity: 1; opacity: 1;
transform: translateY(0px) scale(1); transform: translateY(0px) scale(1);
} }
.modal.show.predestroy { dees-tile.show.predestroy {
opacity: 0; opacity: 0;
transform: translateY(10px) scale(1); transform: translateY(10px) scale(1);
} }
.modal .heading { .heading {
height: 40px; height: 40px;
min-height: 40px;
font-family: ${cssGeistFontFamily}; font-family: ${cssGeistFontFamily};
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0 12px; padding: 0 12px;
border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
position: relative; position: relative;
flex-shrink: 0;
} }
.modal .heading .header-buttons { .heading .header-buttons {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 4px; gap: 4px;
@@ -239,7 +235,7 @@ export class DeesModal extends DeesElement {
transform: translateY(-50%); transform: translateY(-50%);
} }
.modal .heading .header-button { .heading .header-button {
width: 28px; width: 28px;
height: 28px; height: 28px;
border-radius: 4px; border-radius: 4px;
@@ -252,22 +248,22 @@ export class DeesModal extends DeesElement {
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')}; color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
} }
.modal .heading .header-button:hover { .heading .header-button:hover {
background: ${cssManager.bdTheme('#f4f4f5', '#27272a')}; background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
color: ${cssManager.bdTheme('#09090b', '#fafafa')}; color: ${cssManager.bdTheme('#09090b', '#fafafa')};
} }
.modal .heading .header-button:active { .heading .header-button:active {
background: ${cssManager.bdTheme('#e5e7eb', '#3f3f46')}; background: ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
} }
.modal .heading .header-button dees-icon { .heading .header-button dees-icon {
width: 16px; width: 16px;
height: 16px; height: 16px;
display: block; display: block;
} }
.modal .heading .heading-text { .heading .heading-text {
flex: 1; flex: 1;
text-align: center; text-align: center;
font-weight: 600; font-weight: 600;
@@ -277,23 +273,22 @@ export class DeesModal extends DeesElement {
color: ${cssManager.bdTheme('#09090b', '#fafafa')}; color: ${cssManager.bdTheme('#09090b', '#fafafa')};
} }
.modal .content { .content {
flex: 1;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
overscroll-behavior: contain; overscroll-behavior: contain;
} }
.modal .bottomButtons { .bottomButtons {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
border-top: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
justify-content: flex-end; justify-content: flex-end;
gap: 8px; gap: 8px;
padding: 8px; padding: 8px;
flex-shrink: 0; width: 100%;
box-sizing: border-box;
} }
.modal .bottomButtons .bottomButton { .bottomButtons .bottomButton {
padding: 8px 16px; padding: 8px 16px;
border-radius: 4px; border-radius: 4px;
line-height: 16px; line-height: 16px;
@@ -309,27 +304,27 @@ export class DeesModal extends DeesElement {
white-space: nowrap; white-space: nowrap;
} }
.modal .bottomButtons .bottomButton:hover { .bottomButtons .bottomButton:hover {
background: ${cssManager.bdTheme('#f4f4f5', '#3f3f46')}; background: ${cssManager.bdTheme('#f4f4f5', '#3f3f46')};
border-color: ${cssManager.bdTheme('#d1d5db', '#52525b')}; border-color: ${cssManager.bdTheme('#d1d5db', '#52525b')};
} }
.modal .bottomButtons .bottomButton:active { .bottomButtons .bottomButton:active {
background: ${cssManager.bdTheme('#e5e7eb', '#52525b')}; background: ${cssManager.bdTheme('#e5e7eb', '#52525b')};
} }
.modal .bottomButtons .bottomButton:last-child { .bottomButtons .bottomButton:last-child {
border-right: none; border-right: none;
} }
.modal .bottomButtons .bottomButton.primary { .bottomButtons .bottomButton.primary {
background: ${cssManager.bdTheme('#3b82f6', '#3b82f6')}; background: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
border-color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')}; border-color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
color: #ffffff; color: #ffffff;
} }
.modal .bottomButtons .bottomButton.primary:hover { .bottomButtons .bottomButton.primary:hover {
background: ${cssManager.bdTheme('#2563eb', '#2563eb')}; background: ${cssManager.bdTheme('#2563eb', '#2563eb')};
border-color: ${cssManager.bdTheme('#2563eb', '#2563eb')}; border-color: ${cssManager.bdTheme('#2563eb', '#2563eb')};
} }
.modal .bottomButtons .bottomButton.primary:active { .bottomButtons .bottomButton.primary:active {
background: ${cssManager.bdTheme('#1d4ed8', '#1d4ed8')}; background: ${cssManager.bdTheme('#1d4ed8', '#1d4ed8')};
border-color: ${cssManager.bdTheme('#1d4ed8', '#1d4ed8')}; border-color: ${cssManager.bdTheme('#1d4ed8', '#1d4ed8')};
} }
@@ -345,13 +340,13 @@ export class DeesModal extends DeesElement {
return html` return html`
<style> <style>
${customWidth ? `.modal { width: ${customWidth}; }` : ''} ${customWidth ? `dees-tile { width: ${customWidth}; }` : ''}
${maxWidthStyle ? `.modal { max-width: ${maxWidthStyle}; }` : ''} ${maxWidthStyle ? `dees-tile { max-width: ${maxWidthStyle}; }` : ''}
${minWidthStyle ? `.modal { min-width: ${minWidthStyle}; }` : ''} ${minWidthStyle ? `dees-tile { min-width: ${minWidthStyle}; }` : ''}
</style> </style>
<div class="modalContainer" @click=${this.handleOutsideClick} style="z-index: ${this.modalZIndex}"> <div class="modalContainer" @click=${this.handleOutsideClick} style="z-index: ${this.modalZIndex}">
<div class="modal ${widthClass} ${mobileFullscreenClass}"> <dees-tile class="${widthClass} ${mobileFullscreenClass}">
<div class="heading"> <div slot="header" class="heading">
<div class="heading-text">${this.heading}</div> <div class="heading-text">${this.heading}</div>
<div class="header-buttons"> <div class="header-buttons">
${this.showHelpButton ? html` ${this.showHelpButton ? html`
@@ -368,7 +363,7 @@ export class DeesModal extends DeesElement {
</div> </div>
<div class="content" style="padding: ${this.contentPadding}px;">${this.content}</div> <div class="content" style="padding: ${this.contentPadding}px;">${this.content}</div>
${this.menuOptions.length > 0 ? html` ${this.menuOptions.length > 0 ? html`
<div class="bottomButtons"> <div slot="footer" class="bottomButtons">
${this.menuOptions.map( ${this.menuOptions.map(
(actionArg, index) => html` (actionArg, index) => html`
<div class="bottomButton ${index === this.menuOptions.length - 1 ? 'primary' : ''} ${actionArg.name === 'OK' ? 'ok' : ''}" @click=${() => { <div class="bottomButton ${index === this.menuOptions.length - 1 ? 'primary' : ''} ${actionArg.name === 'OK' ? 'ok' : ''}" @click=${() => {
@@ -378,7 +373,7 @@ export class DeesModal extends DeesElement {
)} )}
</div> </div>
` : ''} ` : ''}
</div> </dees-tile>
</div> </div>
`; `;
} }
@@ -388,8 +383,8 @@ export class DeesModal extends DeesElement {
super.firstUpdated(_changedProperties); super.firstUpdated(_changedProperties);
const domtools = await this.domtoolsPromise; const domtools = await this.domtoolsPromise;
await domtools.convenience.smartdelay.delayFor(30); await domtools.convenience.smartdelay.delayFor(30);
const modal = this.shadowRoot!.querySelector('.modal'); const tile = this.shadowRoot!.querySelector('dees-tile');
modal!.classList.add('show'); tile!.classList.add('show');
} }
public async handleOutsideClick(eventArg: MouseEvent) { public async handleOutsideClick(eventArg: MouseEvent) {
@@ -402,8 +397,8 @@ export class DeesModal extends DeesElement {
public async destroy() { public async destroy() {
const domtools = await this.domtoolsPromise; const domtools = await this.domtoolsPromise;
const modal = this.shadowRoot!.querySelector('.modal'); const tile = this.shadowRoot!.querySelector('dees-tile');
modal!.classList.add('predestroy'); tile!.classList.add('predestroy');
await domtools.convenience.smartdelay.delayFor(200); await domtools.convenience.smartdelay.delayFor(200);
document.body.removeChild(this); document.body.removeChild(this);
await this.windowLayer.destroy(); await this.windowLayer.destroy();