styling, icons, modal

Author: skerbis

CHANGELOG.md

@@ -2,6 +2,19 @@
 
 ## Version 1.2.0 (2026-02-05)
 
+### ✨ Neue Features
+- **Modal-Modus**: Eigenes Modal-System für platzsparende Layouts
+  - `data-relation-mode="modal"` aktiviert Modal-Darstellung
+  - **Badge mit Anzahl** ausgewählter Einträge (live-Update)
+  - Badge ist grau bei 0, blau bei Auswahl
+  - Input-Feld wird ausgeblendet (nur Button sichtbar)
+  - Frontend-kompatibel (keine Bootstrap-Abhängigkeit)
+  - ESC-Taste zum Schließen
+  - Body-Scroll-Lock während Modal aktiv
+  - Smooth Animations mit Scale-Effekt
+- **Inline-Modus**: Standard-Darstellung (wie bisher)
+- **Dual-Mode-Support**: Frei wählbar per Attribut
+
 ### 🔒 Security
 - **XSS-Schutz**: Labels und Values werden jetzt korrekt escaped in JavaScript
 - **Type Safety**: Strikte Typ-Prüfungen für alle API-Parameter implementiert

README.md

@@ -29,9 +29,12 @@ Ermöglicht die Auswahl und Sortierung verknüpfter Datensätze mit erweiterten
 
 ## Anwendung
 
-### Basis-Konfiguration
+### Modi
 
-Das AddOn wird automatisch initialisiert, sobald ein Input-Feld das Attribut `data-relation-config` hat:
+Das AddOn unterstützt zwei Anzeigemodi:
+
+#### **Inline-Modus (Standard)**
+Widget wird direkt unterhalb des Input-Feldes angezeigt:
 
 ```html
 <input type="text" 
@@ -44,16 +47,58 @@ Das AddOn wird automatisch initialisiert, sobald ein Input-Feld das Attribut `da
 >
 ```
 
-**Hinweis:** Das Attribut `data-relation-mode` ist optional und wird aktuell nicht verwendet. Die Widget-Darstellung erfolgt immer inline.
+#### **Modal-Modus**
+Widget wird in einem Overlay-Dialog geöffnet (ideal für platzsparende Layouts und Frontend-Verwendung):
+
+```html
+<input type="text" 
+    name="my_field" 
+    data-relation-mode="modal"
+    data-relation-config='{
+        "table": "rex_article",
+        "valueField": "id",
+        "labelField": "name"
+    }'
+>
+```
+
+**Modal-Features:**
+- 🎯 Eigenes Modal-System (keine Bootstrap-Abhängigkeit)
+- � **Badge mit Anzahl** ausgewählter Einträge (live-Update)
+- 📱 Frontend-kompatibel
+- ⌨️ ESC-Taste zum Schließen
+- 🎨 Dark-Theme-Support
+- 📱 Responsive Design
+- 🔒 Body-Scroll-Lock während Modal offen ist
+- 💨 Smooth Animations
+
+**UX im Modal-Modus:**
+- Input-Feld wird ausgeblendet
+- Button zeigt Badge mit Anzahl der Auswahlen
+- Badge ist grau bei 0 Einträgen, blau bei Auswahl
+- Live-Update der Badge-Anzahl bei Änderungen
 
 ### Beispiel für eine Relation in YForm
 
 Das Feld wird als **Textfeld** mit dem Namen der Relation angelegt (z.B. `autoren_id`).
 
 Bei den **individuellen Attributen** des Feldes wird folgendes eingetragen:
 
+**Inline-Modus:**
+```json
+{
+    "data-relation-config": "{
+        \"table\": \"rex_autoren\",
+        \"valueField\": \"id\",
+        \"labelField\": \"vorname|nachname\"
+    }"
+}
+```
+
+**Modal-Modus:**
 ```json
 {
+    "data-relation-mode": "modal",
     "data-relation-config": "{
         \"table\": \"rex_autoren\",
         \"valueField\": \"id\",
@@ -69,6 +114,7 @@ Bei den **individuellen Attributen** des Feldes wird folgendes eingetragen:
 ```html
 <input type="text" 
     name="authors" 
+    data-relation-mode="modal"
     data-relation-config='{
         "table": "rex_authors",
         "valueField": "id",

assets/relation_select.css

@@ -1,5 +1,12 @@
 /* Relation Select AddOn Styles */
 
+/* SVG Icons */
+.relation-select-icon {
+    display: inline-block;
+    vertical-align: middle;
+    fill: currentColor;
+}
+
 .relation-select-widget {
     display: flex;
     gap: 20px;
@@ -42,13 +49,26 @@
     margin-bottom: 5px;
     border-radius: 3px;
     background: var(--rex-panel-bg, #fff);
-    transition: background-color 0.2s;
+    transition: background-color 0.2s, border-color 0.2s;
 }
 
 .relation-select-list li:hover {
     background-color: var(--rex-hover-bg, #f8f9fa);
 }
 
+/* Available items are clickable */
+.relation-select-item-available {
+    cursor: pointer;
+}
+
+.relation-select-item-available:hover {
+    border-color: var(--rex-link-color, #007bff);
+}
+
+.relation-select-item-available .title {
+    cursor: pointer;
+}
+
 .relation-select-list li:last-child {
     margin-bottom: 0;
 }
@@ -64,6 +84,7 @@
     cursor: move;
     color: var(--rex-text-muted, #6c757d);
     margin-right: 5px;
+    flex-shrink: 0;
 }
 
 .relation-select-list .handle:hover {
@@ -73,17 +94,18 @@
 .relation-select-list .btn-link {
     padding: 2px 8px;
     color: var(--rex-link-color, #007bff);
+    flex-shrink: 0;
 }
 
 .relation-select-list .btn-link:hover {
     color: var(--rex-link-hover-color, #0056b3);
 }
 
-.relation-select-list .add-item i {
+.relation-select-list .add-item .relation-select-icon {
     color: var(--rex-success-color, #28a745);
 }
 
-.relation-select-list .remove-item i {
+.relation-select-list .remove-item .relation-select-icon {
     color: var(--rex-danger-color, #dc3545);
 }
 
@@ -113,6 +135,27 @@
 
 .relation-select-open-modal {
     margin-top: 5px;
+    position: relative;
+}
+
+.relation-select-badge {
+    display: inline-block;
+    min-width: 20px;
+    padding: 3px 7px;
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 1;
+    color: var(--rex-text-muted, #999);
+    background-color: var(--rex-border-light, #e9ecef);
+    border-radius: 10px;
+    margin-left: 8px;
+    transition: all 0.2s ease;
+}
+
+.relation-select-badge.has-items {
+    color: #fff;
+    background-color: var(--rex-link-color, #007bff);
+    transform: scale(1.1);
 }
 
 .relation-select-modal {
@@ -303,6 +346,43 @@ body.rex-theme-dark .relation-select-list li:focus-within {
     outline-color: #409be4;
 }
 
+body.rex-theme-dark .relation-select-modal-dialog {
+    background: #202b35;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
+}
+
+body.rex-theme-dark .relation-select-modal-header,
+body.rex-theme-dark .relation-select-modal-footer {
+    border-color: #26323f;
+}
+
+body.rex-theme-dark .relation-select-modal-title {
+    color: rgba(255, 255, 255, 0.75);
+}
+
+body.rex-theme-dark .relation-select-modal-close {
+    color: rgba(255, 255, 255, 0.45);
+}
+
+body.rex-theme-dark .relation-select-modal-close:hover {
+    background-color: #26323f;
+    color: rgba(255, 255, 255, 0.75);
+}
+
+body.rex-theme-dark .relation-select-modal-overlay {
+    background: rgba(0, 0, 0, 0.7);
+}
+
+body.rex-theme-dark .relation-select-badge {
+    color: rgba(255, 255, 255, 0.45);
+    background-color: #26323f;
+}
+
+body.rex-theme-dark .relation-select-badge.has-items {
+    color: #fff;
+    background-color: #409be4;
+}
+
 /* Apply dark theme based on system preference (auto mode) */
 @media (prefers-color-scheme: dark) {
     body:not(.rex-theme-light) .relation-select-available,
@@ -359,6 +439,43 @@ body.rex-theme-dark .relation-select-list li:focus-within {
     body:not(.rex-theme-light) .relation-select-list li:focus-within {
         outline-color: #409be4;
     }
+
+    body:not(.rex-theme-light) .relation-select-modal-dialog {
+        background: #202b35;
+        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
+    }
+
+    body:not(.rex-theme-light) .relation-select-modal-header,
+    body:not(.rex-theme-light) .relation-select-modal-footer {
+        border-color: #26323f;
+    }
+
+    body:not(.rex-theme-light) .relation-select-modal-title {
+        color: rgba(255, 255, 255, 0.75);
+    }
+
+    body:not(.rex-theme-light) .relation-select-modal-close {
+        color: rgba(255, 255, 255, 0.45);
+    }
+
+    body:not(.rex-theme-light) .relation-select-modal-close:hover {
+        background-color: #26323f;
+        color: rgba(255, 255, 255, 0.75);
+    }
+
+    body:not(.rex-theme-light) .relation-select-modal-overlay {
+        background: rgba(0, 0, 0, 0.7);
+    }
+
+    body:not(.rex-theme-light) .relation-select-badge {
+        color: rgba(255, 255, 255, 0.45);
+        background-color: #26323f;
+    }
+
+    body:not(.rex-theme-light) .relation-select-badge.has-items {
+        color: #fff;
+        background-color: #409be4;
+    }
 }