openclaw/oikos
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: migrate remaining 5 modules to shared modal system

Browse Source 
Migrate budget, contacts, notes, meals, calendar to use the shared
openModal/closeModal from components/modal.js. Each module now gets
focus-trap, escape-handler, overlay-click, focus-restore, scroll-lock.

Removed ~460 lines of duplicate modal CSS (.budget-modal-overlay,
.contact-modal-overlay, .note-modal-overlay, .meal-modal-overlay,
.event-modal-overlay and their children). Content-specific styles
(color-picker, autocomplete, ingredient-list, etc.) are preserved.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
ulsklyc
2026-03-26 12:22:21 +01:00
parent 7e718e2422
commit c796d3ad6f
10 changed files with 552 additions and 1097 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/styles/notes.css
+1 -83
View File
@@ -214,81 +214,8 @@
}
/* --------------------------------------------------------
* Modal
* Notes-Modal Content-Styles (Overlay/Panel via shared modal.js)
* -------------------------------------------------------- */
.note-modal-overlay {
position: fixed;
inset: 0;
background-color: var(--color-overlay);
z-index: var(--z-modal);
display: flex;
align-items: flex-end;
justify-content: center;
animation: fadeIn var(--transition-fast) ease;
}
@media (min-width: 768px) {
.note-modal-overlay {
align-items: center;
padding: var(--space-4);
}
}
.note-modal {
background-color: var(--color-surface);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
width: 100%;
max-height: 90dvh;
display: flex;
flex-direction: column;
overflow: hidden;
animation: slideUp var(--transition-base) ease;
}
@media (min-width: 768px) {
.note-modal {
border-radius: var(--radius-lg);
max-width: 520px;
max-height: 80dvh;
}
}
.note-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-4);
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
}
.note-modal__title {
font-size: var(--text-lg);
font-weight: var(--font-weight-bold);
}
.note-modal__close {
width: 32px;
height: 32px;
border-radius: var(--radius-full);
background: var(--color-border);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-secondary);
min-height: unset;
}
.note-modal__body {
flex: 1;
overflow-y: auto;
padding: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
/* Farb-Auswahl */
.note-color-picker {
@@ -309,12 +236,3 @@
.note-color-swatch:hover { transform: scale(1.15); }
.note-color-swatch--active { border-color: var(--color-text-primary); transform: scale(1.1); }
.note-modal__footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-3);
padding: var(--space-4);
border-top: 1px solid var(--color-border);
flex-shrink: 0;
}