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:
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user