added support for legend in palettes

CHANGELOG.md

@@ -1,6 +1,9 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
+## [2.8.0] - 2020-10-06
+- added legend support to palettes
+
 ## [2.7.6] - 2020-10-06
 - fixed subpalettes not working with checkboxes
 

README.md

@@ -26,13 +26,13 @@ Install with composer:
 
 Use the inputType "multiColumnEditor" for your field.
 
-```
-'someField' => array(
+```php
+'someField' => [
     'label'     => &$GLOBALS['TL_LANG']['tl_my_table']['someField'],
     'inputType' => 'multiColumnEditor',
     'exclude'   => true,
-    'eval'      => array(
-        'multiColumnEditor' => array(
+    'eval'      => [
+        'multiColumnEditor' => [
             // set to true if the rows should be sortable (backend only atm)
             'sortable' => true,
             'class' => 'some-class',
@@ -43,7 +43,8 @@ Use the inputType "multiColumnEditor" for your field.
             // defaults to false
             'skipCopyValuesOnAdd' => false,
             'editorTemplate' => 'multi_column_editor_backend_default',
-            // add palette and subpalette if you need supalettes support
+            // Optional: add palette and subpalette if you need supalettes support (otherwise all fields will be shows)
+            // Legends are supported since verison 2.8
             'palettes'    => [
                 '__selector__' => ['field1'],
                 'default'      => 'field1',
@@ -52,9 +53,10 @@ Use the inputType "multiColumnEditor" for your field.
                 'field1'  => 'field2', // key selector
                 'field1_10' => 'field3' // key_value selector
             ],
-            'fields' => array(
-                // place your fields here as you would normally in your DCA
-                // (sql is not required)
+            // place your fields here as you would normally in your DCA
+            // (sql is not required)
+            'fields' => [
+
                 'field1' => [
                     'label' => 'field 1',
                     'inputType' => 'text',
@@ -70,11 +72,11 @@ Use the inputType "multiColumnEditor" for your field.
                     'inputType' => 'text',
                     'eval' => ['groupStyle' => 'width:150px']
                 ]
-            )
-        )
-    ),
+            ]
+        ]
+    ],
     'sql'       => "blob NULL"
-),
+],
 ```
 
 ### Add support for special fields (like fileTrees) in Rocksolid Custom Content Elements (RSCE)

src/Resources/assets/scss/contao-multi-column-editor-bundle.scss

@@ -78,6 +78,41 @@
         }
       }
     }
+
+    .rows.grouped {
+      border: none;
+
+      > .mce-row {
+        border: 1px solid #d0d0d2;
+        display: block;
+        padding: 0;
+        margin-bottom: 2px;
+        position: relative;
+
+        & > fieldset {
+          display: flex;
+          flex-direction: column;
+          margin: 0;
+          padding: 0;
+
+          & > legend {
+            padding: 9px 0 9px 28px;
+            background-position-y: 11px;
+          }
+
+          & > .fields {
+            padding: .5rem 15px 0;
+          }
+        }
+
+        .actions {
+          position: absolute;
+          top: 9px;
+          right: 9px;
+          margin: 0;
+        }
+      }
+    }
   }
 
   & + .tl_tip {