From 26bee398a6329d43ed2096324923c57c14008a9a Mon Sep 17 00:00:00 2001 From: seb Date: Mon, 5 Oct 2026 14:54:43 +0200 Subject: [PATCH] u --- src/colors.js | 17 +++ src/components/AppDialog.jsx | 107 ++++++++++++++++++ src/components/CompanySettingsDialog.jsx | 6 +- src/components/CompanySetupDialog.jsx | 6 +- src/components/NameDialog.jsx | 6 +- .../article/ArticleImageSearchDialog.jsx | 6 +- src/components/article/ArticleNameDialog.jsx | 6 +- .../article/ArticlePhotosDialog.jsx | 6 +- .../article/ArticlePriceTiersDialog.jsx | 6 +- src/components/article/ArticleSearch.jsx | 6 +- .../article/ArticleStockAdjustDialog.jsx | 6 +- .../article/ArticleSupplierDialog.jsx | 6 +- .../article/ArticleUnitEditorDialog.jsx | 6 +- .../article/CategoryPickerDialog.jsx | 6 +- .../article/boxes/ArticleViewLists.jsx | 10 +- .../brand/BrandImageSearchDialog.jsx | 6 +- .../category/CategoryNameDialog.jsx | 6 +- src/components/category/CategoryTree.jsx | 14 +-- src/components/chat/NewConversationDialog.jsx | 6 +- .../manifest/ArticleSearchDialog.jsx | 6 +- .../manifest/BookDeliveryDialog.jsx | 6 +- src/components/manifest/ManifestPdfDialog.jsx | 6 +- .../settings/PrinterSettingsPanel.jsx | 6 +- src/components/settings/SettingsDialog.jsx | 6 +- src/index.css | 10 ++ src/routes/artikel/vorlagen.jsx | 6 +- 26 files changed, 209 insertions(+), 75 deletions(-) create mode 100644 src/components/AppDialog.jsx diff --git a/src/colors.js b/src/colors.js index 55d046b..e68bdb0 100644 --- a/src/colors.js +++ b/src/colors.js @@ -332,6 +332,22 @@ export const SHADOW_TAB = `drop-shadow(0px 2px 4px ${shade(0.2)}) drop-shadow(0p export const SHADOW_BUBBLE_USER = `0 2px 8px ${BLUE_SHADOW}`; export const SHADOW_BUBBLE_ASSISTANT = `0 1px 4px ${TINT_ROW_HOVER}`; +/* ──────────────────────────────────────────────────────────────────────────── + * 10b. DIALOG FOG + * Shared backdrop for every dialog (`src/components/AppDialog.jsx`). + * Darker and more bluish than `MAIN_BACKGROUND`: deep-navy solid base + * plus a translucent variant for the MUI backdrop layer. The solid + * variant is also published as `--df-dialog-fog` so the + * scrollbar-gutter placeholder can switch to the fog color while a + * dialog is open (`html.df-dialog-open` in `src/index.css`). + * -------------------------------------------------------------------------*/ + +/** Opaque fog base — deep navy with a blue push. */ +export const DIALOG_FOG_SOLID = mix(DARK_6, CHROMA.BLUE.dark, 0.42); + +/** Translucent backdrop wash painted over the page. */ +export const DIALOG_FOG = alpha(DIALOG_FOG_SOLID, 0.72); + /* ──────────────────────────────────────────────────────────────────────────── * 11. CSS VARIABLE BRIDGE * `src/index.css` cannot import this module, so these few tokens are @@ -340,6 +356,7 @@ export const SHADOW_BUBBLE_ASSISTANT = `0 1px 4px ${TINT_ROW_HOVER}`; export const CSS_VARS = { '--df-main-background': MAIN_BACKGROUND, + '--df-dialog-fog': DIALOG_FOG_SOLID, '--df-sort-ghost': SORT_GHOST, '--df-sort-ghost-tint': SORT_GHOST_BG, '--df-shadow-sortable': SHADOW_SORTABLE, diff --git a/src/components/AppDialog.jsx b/src/components/AppDialog.jsx new file mode 100644 index 0000000..41a7824 --- /dev/null +++ b/src/components/AppDialog.jsx @@ -0,0 +1,107 @@ +import { Component } from 'react'; +import Dialog from '@mui/material/Dialog'; +import { DIALOG_FOG } from '../colors'; + +/** + * Shared dialog shell — drop-in replacement for MUI `Dialog`. + * + * Guarantees across the whole app: + * - instant open/close (no Fade/scale animation): `transitionDuration={0}` + * - darker, bluish fog: backdrop `backgroundColor` = `DIALOG_FOG` + * - scrollbar-gutter matches the fog: toggles `df-dialog-open` on + * `` while any `AppDialog` is open (see `src/index.css`). + * + * Class component on purpose (PureComponent-free: open state is driven + * by props, state lives in the wrapped content). + * + * Usage: + * import AppDialog from '../AppDialog'; + * + */ +class AppDialog extends Component { + static openCount = 0; + + static updateFogClass() { + if (typeof document === 'undefined') return; + const html = document.documentElement; + if (!html) return; + if (AppDialog.openCount > 0) { + html.classList.add('df-dialog-open'); + } else { + html.classList.remove('df-dialog-open'); + } + } + + static enter() { + AppDialog.openCount += 1; + AppDialog.updateFogClass(); + } + + static exit() { + AppDialog.openCount = Math.max(0, AppDialog.openCount - 1); + AppDialog.updateFogClass(); + } + + componentDidMount() { + if (this.props.open) AppDialog.enter(); + } + + componentDidUpdate(prevProps) { + if (this.props.open && !prevProps.open) AppDialog.enter(); + else if (!this.props.open && prevProps.open) AppDialog.exit(); + } + + componentWillUnmount() { + if (this.props.open) AppDialog.exit(); + } + + render() { + const { + transitionDuration: _transitionDuration, + TransitionProps: _transitionProps, + TransitionComponent: _transitionComponent, + slotProps: userSlotProps, + slots: userSlots, + ...rest + } = this.props; + void _transitionDuration; + void _transitionProps; + void _transitionComponent; + + const userBackdrop = userSlotProps?.backdrop ?? {}; + const { sx: userBackdropSx, ...restBackdrop } = userBackdrop; + const userTransition = userSlotProps?.transition ?? {}; + const { transition: _userTransitionSlot, ...restSlots } = userSlots ?? {}; + void _userTransitionSlot; + + const slotProps = { + ...userSlotProps, + backdrop: { + ...restBackdrop, + sx: [ + { backgroundColor: DIALOG_FOG }, + ...(Array.isArray(userBackdropSx) + ? userBackdropSx + : userBackdropSx + ? [userBackdropSx] + : []), + ], + }, + transition: { + ...userTransition, + timeout: 0, + }, + }; + + return ( + + ); + } +} + +export default AppDialog; diff --git a/src/components/CompanySettingsDialog.jsx b/src/components/CompanySettingsDialog.jsx index e394443..0271f01 100644 --- a/src/components/CompanySettingsDialog.jsx +++ b/src/components/CompanySettingsDialog.jsx @@ -2,7 +2,7 @@ import { Component } from 'react'; import Alert from '@mui/material/Alert'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; -import Dialog from '@mui/material/Dialog'; +import AppDialog from './AppDialog'; import DialogActions from '@mui/material/DialogActions'; import DialogContent from '@mui/material/DialogContent'; import DialogTitle from '@mui/material/DialogTitle'; @@ -180,7 +180,7 @@ export default class CompanySettingsDialog extends Component { parsedReducedtaxrate != null; return ( - + Unternehmen bearbeiten @@ -334,7 +334,7 @@ export default class CompanySettingsDialog extends Component { - + ); } } diff --git a/src/components/CompanySetupDialog.jsx b/src/components/CompanySetupDialog.jsx index 6c2d65e..96c9af7 100644 --- a/src/components/CompanySetupDialog.jsx +++ b/src/components/CompanySetupDialog.jsx @@ -4,7 +4,7 @@ import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import Chip from '@mui/material/Chip'; import CircularProgress from '@mui/material/CircularProgress'; -import Dialog from '@mui/material/Dialog'; +import AppDialog from './AppDialog'; import DialogContent from '@mui/material/DialogContent'; import DialogTitle from '@mui/material/DialogTitle'; import Divider from '@mui/material/Divider'; @@ -268,7 +268,7 @@ class CompanySetupDialog extends Component { parsedReducedtaxrate != null; return ( - )} - + ); } } diff --git a/src/components/NameDialog.jsx b/src/components/NameDialog.jsx index 48d8c05..2242d74 100644 --- a/src/components/NameDialog.jsx +++ b/src/components/NameDialog.jsx @@ -1,7 +1,7 @@ import { Component } from 'react'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; -import Dialog from '@mui/material/Dialog'; +import AppDialog from './AppDialog'; import DialogActions from '@mui/material/DialogActions'; import DialogContent from '@mui/material/DialogContent'; import DialogTitle from '@mui/material/DialogTitle'; @@ -65,7 +65,7 @@ class NameDialog extends Component { const canSave = name.trim() !== ''; return ( - + {title} @@ -97,7 +97,7 @@ class NameDialog extends Component { - + ); } } diff --git a/src/components/article/ArticleImageSearchDialog.jsx b/src/components/article/ArticleImageSearchDialog.jsx index b743852..9c96e78 100644 --- a/src/components/article/ArticleImageSearchDialog.jsx +++ b/src/components/article/ArticleImageSearchDialog.jsx @@ -3,7 +3,7 @@ import Alert from '@mui/material/Alert'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import CircularProgress from '@mui/material/CircularProgress'; -import Dialog from '@mui/material/Dialog'; +import AppDialog from '../AppDialog'; import DialogActions from '@mui/material/DialogActions'; import DialogContent from '@mui/material/DialogContent'; import DialogTitle from '@mui/material/DialogTitle'; @@ -317,7 +317,7 @@ export default class ArticleImageSearchDialog extends PureComponent { const isSerperKeyError = error && error.toLowerCase().includes('keys.serper'); return ( - - + ); } } diff --git a/src/components/article/ArticleNameDialog.jsx b/src/components/article/ArticleNameDialog.jsx index 74c84e3..1f9afce 100644 --- a/src/components/article/ArticleNameDialog.jsx +++ b/src/components/article/ArticleNameDialog.jsx @@ -1,7 +1,7 @@ import { Component } from 'react'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; -import Dialog from '@mui/material/Dialog'; +import AppDialog from '../AppDialog'; import DialogActions from '@mui/material/DialogActions'; import DialogContent from '@mui/material/DialogContent'; import DialogTitle from '@mui/material/DialogTitle'; @@ -107,7 +107,7 @@ class ArticleNameDialog extends Component { const canSubmitBulk = bulkNames.length > 0; return ( - + Neuer Artikel {!isBulk && ( @@ -202,7 +202,7 @@ class ArticleNameDialog extends Component { )} - + ); } } diff --git a/src/components/article/ArticlePhotosDialog.jsx b/src/components/article/ArticlePhotosDialog.jsx index 6a355a1..1eb782f 100644 --- a/src/components/article/ArticlePhotosDialog.jsx +++ b/src/components/article/ArticlePhotosDialog.jsx @@ -2,7 +2,7 @@ import { Component, createRef } from 'react'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import Chip from '@mui/material/Chip'; -import Dialog from '@mui/material/Dialog'; +import AppDialog from '../AppDialog'; import DialogActions from '@mui/material/DialogActions'; import DialogContent from '@mui/material/DialogContent'; import DialogTitle from '@mui/material/DialogTitle'; @@ -271,7 +271,7 @@ class ArticlePhotosDialog extends Component { return ( <> - + Bilder {photos.length === 0 ? ( @@ -324,7 +324,7 @@ class ArticlePhotosDialog extends Component { Schließen - + + Staffelpreise {tiers.length === 0 ? ( @@ -174,7 +174,7 @@ class ArticlePriceTiersDialog extends Component { Übernehmen - + ); } } diff --git a/src/components/article/ArticleSearch.jsx b/src/components/article/ArticleSearch.jsx index c98a948..0cb6e33 100644 --- a/src/components/article/ArticleSearch.jsx +++ b/src/components/article/ArticleSearch.jsx @@ -2,7 +2,7 @@ import { PureComponent, createRef } from 'react'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import CircularProgress from '@mui/material/CircularProgress'; -import Dialog from '@mui/material/Dialog'; +import AppDialog from '../AppDialog'; import DialogActions from '@mui/material/DialogActions'; import DialogContent from '@mui/material/DialogContent'; import DialogTitle from '@mui/material/DialogTitle'; @@ -597,7 +597,7 @@ export default class ArticleSearch extends PureComponent { const isDialogOpen = isControlled ? Boolean(controlledOpen) : internalOpen; return ( - - + ); } diff --git a/src/components/article/ArticleStockAdjustDialog.jsx b/src/components/article/ArticleStockAdjustDialog.jsx index 1f102f6..058ac4f 100644 --- a/src/components/article/ArticleStockAdjustDialog.jsx +++ b/src/components/article/ArticleStockAdjustDialog.jsx @@ -4,7 +4,7 @@ import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import Chip from '@mui/material/Chip'; import CircularProgress from '@mui/material/CircularProgress'; -import Dialog from '@mui/material/Dialog'; +import AppDialog from '../AppDialog'; import DialogActions from '@mui/material/DialogActions'; import DialogContent from '@mui/material/DialogContent'; import DialogTitle from '@mui/material/DialogTitle'; @@ -307,7 +307,7 @@ export default class ArticleStockAdjustDialog extends PureComponent { ''; return ( - - + ); } } diff --git a/src/components/article/ArticleSupplierDialog.jsx b/src/components/article/ArticleSupplierDialog.jsx index 90adf96..216b024 100644 --- a/src/components/article/ArticleSupplierDialog.jsx +++ b/src/components/article/ArticleSupplierDialog.jsx @@ -2,7 +2,7 @@ import { PureComponent } from 'react'; import Autocomplete from '@mui/material/Autocomplete'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; -import Dialog from '@mui/material/Dialog'; +import AppDialog from '../AppDialog'; import DialogActions from '@mui/material/DialogActions'; import DialogContent from '@mui/material/DialogContent'; import DialogTitle from '@mui/material/DialogTitle'; @@ -111,7 +111,7 @@ export default class ArticleSupplierDialog extends PureComponent { const puValid = parsedPu != null && parsedPu > 0; return ( - +
{isEdit ? 'Lieferant bearbeiten' : 'Lieferant zuweisen'} @@ -226,7 +226,7 @@ export default class ArticleSupplierDialog extends PureComponent { -
+ ); } } diff --git a/src/components/article/ArticleUnitEditorDialog.jsx b/src/components/article/ArticleUnitEditorDialog.jsx index 9132bd2..9215c9a 100644 --- a/src/components/article/ArticleUnitEditorDialog.jsx +++ b/src/components/article/ArticleUnitEditorDialog.jsx @@ -4,7 +4,7 @@ import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import Chip from '@mui/material/Chip'; import CircularProgress from '@mui/material/CircularProgress'; -import Dialog from '@mui/material/Dialog'; +import AppDialog from '../AppDialog'; import DialogActions from '@mui/material/DialogActions'; import DialogContent from '@mui/material/DialogContent'; import DialogTitle from '@mui/material/DialogTitle'; @@ -165,7 +165,7 @@ export default class ArticleUnitEditorDialog extends Component { const loading = unitsLoading && units.length === 0; return ( - + Einheiten @@ -299,7 +299,7 @@ export default class ArticleUnitEditorDialog extends Component { Schließen - + ); } } diff --git a/src/components/article/CategoryPickerDialog.jsx b/src/components/article/CategoryPickerDialog.jsx index 62f1564..3d07eae 100644 --- a/src/components/article/CategoryPickerDialog.jsx +++ b/src/components/article/CategoryPickerDialog.jsx @@ -1,5 +1,5 @@ import { PureComponent } from 'react'; -import Dialog from '@mui/material/Dialog'; +import AppDialog from '../AppDialog'; import DialogTitle from '@mui/material/DialogTitle'; import DialogContent from '@mui/material/DialogContent'; import DialogActions from '@mui/material/DialogActions'; @@ -145,7 +145,7 @@ export default class CategoryPickerDialog extends PureComponent { : EMPTY_ARRAY; return ( - - + ); } } diff --git a/src/components/article/boxes/ArticleViewLists.jsx b/src/components/article/boxes/ArticleViewLists.jsx index d1a1893..bc52a9a 100644 --- a/src/components/article/boxes/ArticleViewLists.jsx +++ b/src/components/article/boxes/ArticleViewLists.jsx @@ -6,7 +6,7 @@ import Button from '@mui/material/Button'; import Checkbox from '@mui/material/Checkbox'; import Chip from '@mui/material/Chip'; import CircularProgress from '@mui/material/CircularProgress'; -import Dialog from '@mui/material/Dialog'; +import AppDialog from '../../AppDialog'; import DialogActions from '@mui/material/DialogActions'; import DialogContent from '@mui/material/DialogContent'; import DialogContentText from '@mui/material/DialogContentText'; @@ -1753,7 +1753,7 @@ export default class ArticleViewLists extends PureComponent { {/* Remove Child Confirmation Dialog */} - - + {/* Clear Stückliste / Optionen Confirmation Dialog */} - this.setState({ confirmClearType: null })} maxWidth="xs" @@ -1835,7 +1835,7 @@ export default class ArticleViewLists extends PureComponent { Auflösen - + ); } diff --git a/src/components/brand/BrandImageSearchDialog.jsx b/src/components/brand/BrandImageSearchDialog.jsx index b994dd5..11a6bd4 100644 --- a/src/components/brand/BrandImageSearchDialog.jsx +++ b/src/components/brand/BrandImageSearchDialog.jsx @@ -3,7 +3,7 @@ import Alert from '@mui/material/Alert'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import CircularProgress from '@mui/material/CircularProgress'; -import Dialog from '@mui/material/Dialog'; +import AppDialog from '../AppDialog'; import DialogActions from '@mui/material/DialogActions'; import DialogContent from '@mui/material/DialogContent'; import DialogTitle from '@mui/material/DialogTitle'; @@ -238,7 +238,7 @@ export default class BrandImageSearchDialog extends PureComponent { error && error.toLowerCase().includes('keys.serper'); return ( - - + ); } } diff --git a/src/components/category/CategoryNameDialog.jsx b/src/components/category/CategoryNameDialog.jsx index 41005cb..4bde4cb 100644 --- a/src/components/category/CategoryNameDialog.jsx +++ b/src/components/category/CategoryNameDialog.jsx @@ -1,7 +1,7 @@ import { Component } from 'react'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; -import Dialog from '@mui/material/Dialog'; +import AppDialog from '../AppDialog'; import DialogActions from '@mui/material/DialogActions'; import DialogContent from '@mui/material/DialogContent'; import DialogTitle from '@mui/material/DialogTitle'; @@ -119,7 +119,7 @@ class CategoryNameDialog extends Component { const canSubmitBulk = bulkNames.length > 0; return ( - + {TITLES[mode]} {!isBulk && ( @@ -216,7 +216,7 @@ class CategoryNameDialog extends Component { )} - + ); } } diff --git a/src/components/category/CategoryTree.jsx b/src/components/category/CategoryTree.jsx index 6cd7054..82de4d3 100644 --- a/src/components/category/CategoryTree.jsx +++ b/src/components/category/CategoryTree.jsx @@ -10,7 +10,7 @@ import InputAdornment from '@mui/material/InputAdornment'; import Typography from '@mui/material/Typography'; import Chip from '@mui/material/Chip'; import Tooltip from '@mui/material/Tooltip'; -import Dialog from '@mui/material/Dialog'; +import AppDialog from '../AppDialog'; import DialogTitle from '@mui/material/DialogTitle'; import DialogContent from '@mui/material/DialogContent'; import DialogContentText from '@mui/material/DialogContentText'; @@ -663,7 +663,7 @@ export default class CategoryTree extends PureComponent { {/* Add Dialog */} - !isSubmitting && this.setState({ addDialogOpen: false })} maxWidth="xs" @@ -710,10 +710,10 @@ export default class CategoryTree extends PureComponent { Anlegen - + {/* Rename Dialog */} - !isSubmitting && this.setState({ renameDialogOpen: false })} maxWidth="xs" @@ -753,10 +753,10 @@ export default class CategoryTree extends PureComponent { Speichern - + {/* Delete Confirmation Dialog */} - !isSubmitting && this.setState({ deleteDialogOpen: false })} maxWidth="xs" @@ -788,7 +788,7 @@ export default class CategoryTree extends PureComponent { Löschen - + ); } diff --git a/src/components/chat/NewConversationDialog.jsx b/src/components/chat/NewConversationDialog.jsx index a7e3e1a..1b3c5ef 100644 --- a/src/components/chat/NewConversationDialog.jsx +++ b/src/components/chat/NewConversationDialog.jsx @@ -1,5 +1,5 @@ import { PureComponent } from 'react'; -import Dialog from '@mui/material/Dialog'; +import AppDialog from '../AppDialog'; import DialogTitle from '@mui/material/DialogTitle'; import DialogContent from '@mui/material/DialogContent'; import DialogActions from '@mui/material/DialogActions'; @@ -67,7 +67,7 @@ export default class NewConversationDialog extends PureComponent { const { provider, model, customModel, isCustom, loading, error } = this.state; return ( - - + ); } } diff --git a/src/components/manifest/ArticleSearchDialog.jsx b/src/components/manifest/ArticleSearchDialog.jsx index fc7dc09..033a799 100644 --- a/src/components/manifest/ArticleSearchDialog.jsx +++ b/src/components/manifest/ArticleSearchDialog.jsx @@ -1,7 +1,7 @@ import { PureComponent } from 'react'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; -import Dialog from '@mui/material/Dialog'; +import AppDialog from '../AppDialog'; import DialogActions from '@mui/material/DialogActions'; import DialogContent from '@mui/material/DialogContent'; import DialogTitle from '@mui/material/DialogTitle'; @@ -52,7 +52,7 @@ export default class ArticleSearchDialog extends PureComponent { const rawSku = line?.sku != null ? String(line.sku).trim() : ''; return ( - - + ); } } diff --git a/src/components/manifest/BookDeliveryDialog.jsx b/src/components/manifest/BookDeliveryDialog.jsx index 180f9e8..77d09c3 100644 --- a/src/components/manifest/BookDeliveryDialog.jsx +++ b/src/components/manifest/BookDeliveryDialog.jsx @@ -2,7 +2,7 @@ import { PureComponent } from 'react'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import CircularProgress from '@mui/material/CircularProgress'; -import Dialog from '@mui/material/Dialog'; +import AppDialog from '../AppDialog'; import DialogActions from '@mui/material/DialogActions'; import DialogContent from '@mui/material/DialogContent'; import DialogTitle from '@mui/material/DialogTitle'; @@ -507,7 +507,7 @@ export default class BookDeliveryDialog extends PureComponent { const isWarehouseMissing = !selectedWarehouseId; return ( - )} - + ); } } diff --git a/src/components/manifest/ManifestPdfDialog.jsx b/src/components/manifest/ManifestPdfDialog.jsx index 7a7630e..388d824 100644 --- a/src/components/manifest/ManifestPdfDialog.jsx +++ b/src/components/manifest/ManifestPdfDialog.jsx @@ -4,7 +4,7 @@ import Button from '@mui/material/Button'; import Chip from '@mui/material/Chip'; import CircularProgress from '@mui/material/CircularProgress'; import Collapse from '@mui/material/Collapse'; -import Dialog from '@mui/material/Dialog'; +import AppDialog from '../AppDialog'; import DialogActions from '@mui/material/DialogActions'; import DialogContent from '@mui/material/DialogContent'; import DialogTitle from '@mui/material/DialogTitle'; @@ -113,7 +113,7 @@ export default function ManifestPdfDialog({ const handleAbortOrClose = streaming ? (onAbort || onClose) : onClose; return ( - - + ); } diff --git a/src/components/settings/PrinterSettingsPanel.jsx b/src/components/settings/PrinterSettingsPanel.jsx index 2e453e7..48870e3 100644 --- a/src/components/settings/PrinterSettingsPanel.jsx +++ b/src/components/settings/PrinterSettingsPanel.jsx @@ -3,7 +3,7 @@ import Alert from '@mui/material/Alert'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import CircularProgress from '@mui/material/CircularProgress'; -import Dialog from '@mui/material/Dialog'; +import AppDialog from '../AppDialog'; import DialogActions from '@mui/material/DialogActions'; import DialogContent from '@mui/material/DialogContent'; import DialogTitle from '@mui/material/DialogTitle'; @@ -110,7 +110,7 @@ class PrinterFormDialog extends Component { const { open, onClose, title } = this.props; const { form, busy, error } = this.state; return ( - + {title} @@ -180,7 +180,7 @@ class PrinterFormDialog extends Component { {busy ? : 'Speichern'} - + ); } } diff --git a/src/components/settings/SettingsDialog.jsx b/src/components/settings/SettingsDialog.jsx index 5acddad..11931df 100644 --- a/src/components/settings/SettingsDialog.jsx +++ b/src/components/settings/SettingsDialog.jsx @@ -1,6 +1,6 @@ import { Component } from 'react'; import Box from '@mui/material/Box'; -import Dialog from '@mui/material/Dialog'; +import AppDialog from '../AppDialog'; import DialogContent from '@mui/material/DialogContent'; import DialogTitle from '@mui/material/DialogTitle'; import Tab from '@mui/material/Tab'; @@ -47,7 +47,7 @@ export default class SettingsDialog extends Component { const { tab } = this.state; return ( - + Einstellungen - + ); } } \ No newline at end of file diff --git a/src/index.css b/src/index.css index 47a1d70..634d0a7 100644 --- a/src/index.css +++ b/src/index.css @@ -43,6 +43,16 @@ html { scrollbar-gutter: stable; } +/* While any AppDialog is open, the reserved scrollbar-gutter strip must read + as fog, not app background. AppDialog toggles `df-dialog-open` on + (ref-counted for stacked dialogs). The solid fog token is published by + src/colors.js (installCssVars) with a hard-coded fallback. */ +html.df-dialog-open, +html.df-dialog-open body, +html.df-dialog-open #root { + background-color: var(--df-dialog-fog, #152e73); +} + /* SortableJS: Kategorie-Reorder im Edit-Modus. Colors come from CSS custom properties injected by src/colors.js (installCssVars), so this file stays in sync with the JS token module. diff --git a/src/routes/artikel/vorlagen.jsx b/src/routes/artikel/vorlagen.jsx index aab352a..63abf37 100644 --- a/src/routes/artikel/vorlagen.jsx +++ b/src/routes/artikel/vorlagen.jsx @@ -2,7 +2,7 @@ import { PureComponent, lazy, Suspense } from 'react'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import CircularProgress from '@mui/material/CircularProgress'; -import Dialog from '@mui/material/Dialog'; +import AppDialog from '../../components/AppDialog'; import DialogActions from '@mui/material/DialogActions'; import DialogContent from '@mui/material/DialogContent'; import DialogTitle from '@mui/material/DialogTitle'; @@ -326,7 +326,7 @@ class ArtikelVorlagenPage extends PureComponent { const minHeightPx = getMinHeightPx(editorDpi); return ( - - + ); }