Improve popup layout and CodeMirror integration

Updated the `ContentTemplate` to enhance the layout of the
`#attachment-content` container by using `display: flex` and
ensuring full height utilization. Added CSS rules for consistent
styling of the `.CodeMirror` editor, including font size and
height adjustments.

Simplified CodeMirror initialization for XML files by removing
redundant `<textarea>` creation and directly embedding the
editor. Added `viewportMargin: Infinity` for better rendering
and used `setTimeout` to ensure proper sizing and refresh.

Refined plain text rendering for non-XML files to maintain a
clean and consistent display.
This commit is contained in:
OlgunR
2026-06-02 15:32:42 +02:00
parent 8065c589bc
commit f7cac8c0a7

View File

@@ -126,7 +126,7 @@ else
.Shading(true) .Shading(true)
.ShadingColor("rgba(0, 0, 0, 0.5)") .ShadingColor("rgba(0, 0, 0, 0.5)")
.ContentTemplate(new JS(@"function() { .ContentTemplate(new JS(@"function() {
return '<div id=""attachment-content"" style=""width:100%;height:100%;overflow:auto;""></div>'; return '<div id=""attachment-content"" style=""width:100%;height:100%;overflow:hidden;display:flex;flex-direction:column;""></div>';
}")) }"))
) )
} }
@@ -145,6 +145,16 @@ else
#pdf-viewer-popup .dx-overlay-content { #pdf-viewer-popup .dx-overlay-content {
z-index: 10500 !important; z-index: 10500 !important;
} }
/* CodeMirror soll volle Höhe des Popups nutzen */
#attachment-content {
height: 100% !important;
}
#attachment-content .CodeMirror {
height: 100% !important;
font-size: 14px;
}
</style> </style>
<script> <script>
@@ -205,9 +215,8 @@ else
// Text/XML laden und mit Syntax-Highlighting anzeigen // Text/XML laden und mit Syntax-Highlighting anzeigen
$.get('/Invoices/ViewAttachment?filePath=' + encodedFilePath, function(data) { $.get('/Invoices/ViewAttachment?filePath=' + encodedFilePath, function(data) {
if (extension === '.xml') { if (extension === '.xml') {
// CodeMirror für XML // CodeMirror für XML - Container leeren
var textarea = $('<textarea id="code-viewer"></textarea>'); $content.html('');
$content.html('').append(textarea);
// CodeMirror laden (falls noch nicht geladen) // CodeMirror laden (falls noch nicht geladen)
if (typeof CodeMirror === 'undefined') { if (typeof CodeMirror === 'undefined') {
@@ -230,14 +239,22 @@ else
} }
function initCodeMirror(content) { function initCodeMirror(content) {
CodeMirror(document.getElementById('attachment-content'), { // CodeMirror direkt in den Container einfügen
var editor = CodeMirror($content[0], {
value: content, value: content,
mode: 'xml', mode: 'xml',
lineNumbers: true, lineNumbers: true,
readOnly: true, readOnly: true,
theme: 'monokai', theme: 'monokai',
lineWrapping: true lineWrapping: true,
viewportMargin: Infinity
}); });
// Höhe explizit setzen nach kurzer Verzögerung
setTimeout(function() {
editor.setSize('100%', '100%');
editor.refresh();
}, 100);
} }
} else { } else {
// Plain Text // Plain Text