feat: erweiterte Tabellenformatierung im WYSIWYG-Editor ergänzen

README.md

@@ -12,6 +12,9 @@ Ein in NetBox integriertes Markdown-Wiki für Betriebsdokumentationen und Anleit
 - Formatierte Word-Inhalte inklusive Tabellen und unterstützten Zwischenablage-Bildern einfügen
 - Mehrere Dokumentationen mit Ordnern, Zuordnungen und Anhängen als ZIP exportieren und wieder importieren
 - Druckoptimierte A4-Ansicht zum Drucken oder Speichern als PDF
+- Vollbild-Lesemodus für einzelne Dokumentationen
+- Lesbare Tabellen mit vollständigen Zellrahmen und horizontalem Inhalts-Scrolling
+- Tabellen-Presets, farbige Kopfzeilen und Zellhervorhebungen im WYSIWYG-Editor
 - Excel-Mehrblattimport: je Arbeitsblatt eine Dokumentation in einem gewählten Zielordner
 - Optionales Glätten von Excel-Tabellen in kompakte Feld-/Wert-Textblöcke
 - Eine Dokumentation mehreren Objekten zuordnen und umgekehrt
@@ -24,7 +27,7 @@ Ein in NetBox integriertes Markdown-Wiki für Betriebsdokumentationen und Anleit
 
 ## Kompatibilität
 
-Die Version `0.5.5` zielt auf NetBox 4.x (mindestens 4.0). Vor einem produktiven Rollout sollte das Plugin gegen die konkret eingesetzte NetBox-Minor-Version in einer Testinstanz geprüft werden.
+Die Version `0.6.0` zielt auf NetBox 4.x (mindestens 4.0). Vor einem produktiven Rollout sollte das Plugin gegen die konkret eingesetzte NetBox-Minor-Version in einer Testinstanz geprüft werden.
 
 ## Installation
 

netbox_documentation/__init__.py

@@ -5,7 +5,7 @@ class DocumentationConfig(PluginConfig):
     name = "netbox_documentation"
     verbose_name = "NetBox Dokumentation"
     description = "Wiki und Office-Dokumentation direkt in NetBox"
-    version = "0.5.5"
+    version = "0.6.0"
     author = "LKE"
     base_url = "documentation"
     min_version = "4.0.0"

netbox_documentation/templates/netbox_documentation/document.html

@@ -5,32 +5,79 @@
   <style>
     .documentation-content { overflow-x: auto; }
     .documentation-content table {
-      width: auto !important;
+      width: max-content !important;
-      max-width: 100%;
+      min-width: 100%;
+      max-width: none !important;
       table-layout: auto;
+      border-collapse: collapse !important;
+      border: 1px solid var(--tblr-border-color, #adb5bd) !important;
       font-size: .875rem;
       line-height: 1.25;
     }
     .documentation-content th,
     .documentation-content td {
-      min-width: 3rem;
+      min-width: 8rem;
-      max-width: 22rem;
+      max-width: 24rem;
-      padding: .25rem .4rem !important;
+      padding: .4rem .55rem !important;
+      border: 1px solid var(--tblr-border-color, #adb5bd) !important;
       overflow-wrap: anywhere;
       word-break: normal;
       vertical-align: top;
     }
+    .documentation-content th {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+      background: var(--tblr-bg-surface-secondary, #f1f3f5) !important;
+      font-weight: 700;
+    }
+    .documentation-content tbody tr:nth-child(even) td {
+      background: color-mix(in srgb, var(--tblr-bg-surface-secondary, #f1f3f5) 45%, transparent);
+    }
+    .documentation-content table.doc-table-full-width { width: 100% !important; }
+    .documentation-content table.doc-table-compact th,
+    .documentation-content table.doc-table-compact td { min-width: 5rem; padding: .2rem .35rem !important; font-size: .8rem; }
+    .documentation-content table.doc-table-striped tbody tr:nth-child(even) td { background: var(--tblr-bg-surface-secondary, #f1f3f5); }
+    .documentation-content table.doc-table-header-blue thead th { background: #206bc4 !important; color: #fff; }
+    .documentation-content table.doc-table-header-green thead th { background: #2b8a3e !important; color: #fff; }
+    .documentation-content table.doc-table-header-dark thead th { background: #343a40 !important; color: #fff; }
+    .documentation-content table.doc-table-borderless,
+    .documentation-content table.doc-table-borderless th,
+    .documentation-content table.doc-table-borderless td { border: 0 !important; }
+    .documentation-content .doc-cell-yellow { background: #fff3bf !important; color: #212529; }
+    .documentation-content .doc-cell-green { background: #d3f9d8 !important; color: #212529; }
+    .documentation-content .doc-cell-red { background: #ffe3e3 !important; color: #212529; }
+    .documentation-content .doc-cell-blue { background: #dbeafe !important; color: #212529; }
+    .documentation-content .doc-cell-middle { vertical-align: middle !important; }
     .documentation-content p { max-width: 90rem; }
+    #documentation-viewer:fullscreen {
+      width: 100%;
+      max-width: none;
+      height: 100%;
+      padding: 1.25rem;
+      overflow: auto;
+      background: var(--tblr-body-bg, #fff);
+    }
+    #documentation-viewer:fullscreen .card { min-height: calc(100vh - 2.5rem); }
+    #documentation-viewer:fullscreen .fullscreen-document-title,
+    #documentation-viewer:fullscreen .fullscreen-exit { display: block !important; }
+    .fullscreen-document-title { display: none; margin: 0 4rem 1rem 0; }
+    .fullscreen-exit { display: none; position: fixed; top: 1rem; right: 1rem; z-index: 10; }
   </style>
 {% endblock head %}
 {% block extra_controls %}
+  <button type="button" id="documentation-fullscreen" class="btn btn-outline-secondary">
+    <i class="mdi mdi-fullscreen"></i> Vollbild
+  </button>
   <a href="{% url 'plugins:netbox_documentation:document_print' pk=object.pk %}" target="_blank" class="btn btn-outline-secondary">
     <i class="mdi mdi-printer"></i> Drucken / PDF
   </a>
 {% endblock extra_controls %}
 {% block content %}
 <div class="row">
-  <div class="col col-md-9">
+  <div class="col col-md-9" id="documentation-viewer">
+    <h1 class="fullscreen-document-title">{{ object.title }}</h1>
+    <button type="button" class="btn btn-secondary fullscreen-exit" id="documentation-fullscreen-exit"><i class="mdi mdi-fullscreen-exit"></i> Vollbild beenden</button>
     {% if object.summary %}<p class="lead">{{ object.summary }}</p>{% endif %}
     <div class="card"><div class="card-body rendered-markdown documentation-content">{{ object.rendered_body|safe }}</div></div>
   </div>
@@ -45,3 +92,22 @@
   </div>
 </div>
 {% endblock content %}
+
+{% block javascript %}
+  {{ block.super }}
+  <script>
+    document.addEventListener('DOMContentLoaded', () => {
+      const viewer = document.getElementById('documentation-viewer');
+      const openButton = document.getElementById('documentation-fullscreen');
+      const closeButton = document.getElementById('documentation-fullscreen-exit');
+      if (!viewer || !openButton || !viewer.requestFullscreen) {
+        if (openButton) openButton.style.display = 'none';
+        return;
+      }
+      openButton.addEventListener('click', () => viewer.requestFullscreen());
+      closeButton.addEventListener('click', () => {
+        if (document.fullscreenElement) document.exitFullscreen();
+      });
+    });
+  </script>
+{% endblock javascript %}

netbox_documentation/templates/netbox_documentation/document_edit.html

@@ -35,14 +35,62 @@
         menubar: 'file edit view insert format tools table help',
         plugins: 'advlist anchor autolink charmap code fullscreen image link lists media preview searchreplace table visualblocks wordcount',
         toolbar: [
-          'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | forecolor backcolor',
+          'undo redo | blocks styles fontfamily fontsize | bold italic underline strikethrough | forecolor backcolor',
           'alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table link image media | removeformat code netboxfocus fullscreen'
         ],
         toolbar_mode: 'sliding',
         table_toolbar: 'tableprops tablecellprops | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol | tablemergecells tablesplitcells | tabledelete',
+        table_appearance_options: true,
+        table_advtab: true,
+        table_cell_advtab: true,
+        table_row_advtab: true,
+        table_sizing_mode: 'responsive',
+        table_default_attributes: {border: '1'},
+        table_default_styles: {'border-collapse': 'collapse'},
+        table_class_list: [
+          {title: 'Standard mit Rahmen', value: 'doc-table-bordered'},
+          {title: 'Kompakt', value: 'doc-table-compact'},
+          {title: 'Gestreifte Zeilen', value: 'doc-table-striped'},
+          {title: 'Blaue Kopfzeile', value: 'doc-table-header-blue'},
+          {title: 'Grüne Kopfzeile', value: 'doc-table-header-green'},
+          {title: 'Dunkle Kopfzeile', value: 'doc-table-header-dark'},
+          {title: 'Ohne Rahmen', value: 'doc-table-borderless'},
+          {title: 'Volle Breite', value: 'doc-table-full-width'}
+        ],
+        table_cell_class_list: [
+          {title: 'Normal', value: ''},
+          {title: 'Gelb hervorheben', value: 'doc-cell-yellow'},
+          {title: 'Grün hervorheben', value: 'doc-cell-green'},
+          {title: 'Rot hervorheben', value: 'doc-cell-red'},
+          {title: 'Blau hervorheben', value: 'doc-cell-blue'},
+          {title: 'Vertikal mittig', value: 'doc-cell-middle'}
+        ],
+        style_formats_merge: true,
+        style_formats: [
+          {title: 'Tabellenzelle: Gelb', selector: 'td,th', classes: 'doc-cell-yellow'},
+          {title: 'Tabellenzelle: Grün', selector: 'td,th', classes: 'doc-cell-green'},
+          {title: 'Tabellenzelle: Rot', selector: 'td,th', classes: 'doc-cell-red'},
+          {title: 'Tabellenzelle: Blau', selector: 'td,th', classes: 'doc-cell-blue'}
+        ],
         font_family_formats: 'Arial=arial,helvetica,sans-serif; Calibri=calibri,arial,sans-serif; Courier New=courier new,courier,monospace; Georgia=georgia,palatino,serif; Times New Roman=times new roman,times,serif; Verdana=verdana,geneva,sans-serif',
         font_size_formats: '8pt 9pt 10pt 11pt 12pt 14pt 16pt 18pt 20pt 24pt 28pt 32pt 36pt 48pt',
-        content_style: 'body { font-family: Arial, sans-serif; font-size: 11pt; padding: 1rem; } table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid #adb5bd; padding: .45rem; }',
+        content_style: `
+          body { font-family: Arial, sans-serif; font-size: 11pt; padding: 1rem; }
+          table { border-collapse: collapse; width: auto; }
+          th, td { border: 1px solid #adb5bd; padding: .45rem; }
+          table.doc-table-full-width { width: 100%; }
+          table.doc-table-compact th, table.doc-table-compact td { padding: .2rem .35rem; font-size: .875rem; }
+          table.doc-table-striped tbody tr:nth-child(even) td { background: #f1f3f5; }
+          table.doc-table-header-blue thead th { background: #206bc4; color: #fff; }
+          table.doc-table-header-green thead th { background: #2b8a3e; color: #fff; }
+          table.doc-table-header-dark thead th { background: #343a40; color: #fff; }
+          table.doc-table-borderless, table.doc-table-borderless th, table.doc-table-borderless td { border: 0; }
+          .doc-cell-yellow { background: #fff3bf !important; }
+          .doc-cell-green { background: #d3f9d8 !important; }
+          .doc-cell-red { background: #ffe3e3 !important; }
+          .doc-cell-blue { background: #dbeafe !important; }
+          .doc-cell-middle { vertical-align: middle !important; }
+        `,
         browser_spellcheck: true,
         contextmenu: 'link image table',
         promotion: false,

netbox_documentation/templates/netbox_documentation/document_print.html

@@ -18,6 +18,18 @@
     .content img { max-width: 100%; height: auto; }
     .content table { width: auto; max-width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 9pt; line-height: 1.25; }
     .content th, .content td { border: 1px solid #777; padding: .35rem .5rem; vertical-align: top; }
+    .content table.doc-table-full-width { width: 100%; }
+    .content table.doc-table-compact th, .content table.doc-table-compact td { padding: .15rem .25rem; font-size: 8pt; }
+    .content table.doc-table-striped tbody tr:nth-child(even) td { background: #f1f3f5; }
+    .content table.doc-table-header-blue thead th { background: #206bc4; color: #fff; }
+    .content table.doc-table-header-green thead th { background: #2b8a3e; color: #fff; }
+    .content table.doc-table-header-dark thead th { background: #343a40; color: #fff; }
+    .content table.doc-table-borderless, .content table.doc-table-borderless th, .content table.doc-table-borderless td { border: 0; }
+    .content .doc-cell-yellow { background: #fff3bf; }
+    .content .doc-cell-green { background: #d3f9d8; }
+    .content .doc-cell-red { background: #ffe3e3; }
+    .content .doc-cell-blue { background: #dbeafe; }
+    .content .doc-cell-middle { vertical-align: middle; }
     .content pre, .content code { white-space: pre-wrap; overflow-wrap: anywhere; font-family: Consolas, monospace; }
     .content a { color: #174ea6; overflow-wrap: anywhere; }
     @page { size: A4; margin: 15mm; }

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "netbox-documentation"
-version = "0.5.5"
+version = "0.6.0"
 description = "Integrated Markdown wiki and office document importer for NetBox"
 readme = "README.md"
 requires-python = ">=3.10"