grid layout manager style impr

client/css/misc/layout-manager-grid.css

@@ -19,6 +19,25 @@
     list-style: none;
 }
 
+#layout ul.panels > li .panel-label {
+    margin-left: 4px;
+}
+
+#layout ul.panels > li[data-tab-break="true"] {
+    margin-top: 28px;
+}
+
+#layout ul.panels > li[data-tab-break="true"]:before {
+    content: " ";
+    display: block;
+    height: 1px;
+    background-color: var(--gray-light);
+    position: relative;
+    top: -20px;
+    width: 50%;
+    margin: 0 auto;
+}
+
 #layout ul.rows {
     min-height: 20px;
 }
@@ -159,11 +178,11 @@ ul.rows > li[data-cell-count="4"]:hover a.add-cell {
 }
 
 ul.panels > li a.edit-panel-label {
-    display: none;
+    visibility: hidden;
 }
 
 ul.panels > li:hover a.edit-panel-label {
-    display: inline-block;
+    visibility: visible;
 }
 
 div.row-actions {

client/res/templates/admin/layouts/grid-panel.tpl

@@ -1,14 +1,15 @@
 <header data-name="{{name}}">
-    <label
-        data-is-custom="{{#if isCustomLabel}}true{{/if}}"
-        data-label="{{label}}"
-    >{{labelTranslated}}</label>&nbsp;
     <a
         role="button"
         tabindex="0"
         data-action="edit-panel-label"
         class="edit-panel-label"
     ><i class="fas fa-pencil-alt fa-sm"></i></a>
+    <label
+        data-is-custom="{{#if isCustomLabel}}true{{/if}}"
+        data-label="{{label}}"
+        class="panel-label"
+    >{{labelTranslated}}</label>&nbsp;
     <a
         role="button"
         tabindex="0"

client/res/templates/admin/layouts/grid.tpl

@@ -11,11 +11,11 @@
         <div class="well enabled-well" tabindex="-1">
             <header>{{translate 'Layout' scope='LayoutManager'}}</header>
             <ul class="panels">
-            {{#each panelDataList}}
-            <li data-number="{{number}}" class="panel-layout">
-            {{{var viewKey ../this}}}
-            </li>
-            {{/each}}
+                {{#each panelDataList}}
+                    <li data-number="{{number}}" class="panel-layout" data-tab-break="{{tabBreak}}">
+                        {{{var viewKey ../this}}}
+                    </li>
+                {{/each}}
             </ul>
 
             <div><a role="button" tabindex="0" data-action="addPanel">{{translate 'Add Panel' scope='Admin'}}</a></div>

client/src/views/admin/layouts/grid.js

@@ -186,7 +186,9 @@ class LayoutGridView extends LayoutBaseView {
             const $label = $header.children('label');
             const panelName = $label.text();
 
-            const id = $header.closest('li').data('number').toString();
+            const $panel = $header.closest('li');
+
+            const id = $panel.data('number').toString();
 
             const attributes = {
                 panelName: panelName,
@@ -208,14 +210,14 @@ class LayoutGridView extends LayoutBaseView {
                 attributeDefs: attributeDefs,
                 attributes: attributes,
                 dynamicLogicDefs: this.panelDynamicLogicDefs,
-            }, (view) => {
+            }, view => {
                 view.render();
 
-                this.listenTo(view, 'after:save', (attributes) => {
+                this.listenTo(view, 'after:save', attributes => {
                     $label.text(attributes.panelName);
                     $label.attr('data-is-custom', 'true');
 
-                    this.panelDataAttributeList.forEach((item) => {
+                    this.panelDataAttributeList.forEach(item => {
                         if (item === 'panelName') {
                             return;
                         }
@@ -223,6 +225,8 @@ class LayoutGridView extends LayoutBaseView {
                         this.panelsData[id][item] = attributes[item];
                     });
 
+                    $panel.attr('data-tab-break', attributes.tabBreak ? 'true' : false);
+
                     view.close();
 
                     this.$el.find('.well').focus();
@@ -295,12 +299,14 @@ class LayoutGridView extends LayoutBaseView {
     getPanelDataList() {
         const panelDataList = [];
 
-        this.panels.forEach((item) => {
+        this.panels.forEach(item => {
             const o = {};
 
             o.viewKey = 'panel-' + item.number;
             o.number = item.number;
 
+            o.tabBreak = !!item.tabBreak;
+
             panelDataList.push(o);
         });