middle panel styles

client/res/layout-types/record.tpl

@@ -1,6 +1,5 @@
-<% var previousStyle = null;%>
 <% _.each(layout, function (panel, columnNumber) { %>
-    <div class="panel panel-<%= panel.style %><% if (previousStyle && previousStyle !== panel.style) {print(' sticked-2');} %><% if (panel.name) { %>{{#if hiddenPanels.<%= panel.name %>}} hidden{{/if}}<% } %>"<% if (panel.name) print(' data-name="'+panel.name+'"') %>>
+    <div class="panel panel-<%= panel.style %><% if (panel.name) { %>{{#if hiddenPanels.<%= panel.name %>}} hidden{{/if}}<% } %>"<% if (panel.name) print(' data-name="'+panel.name+'"') %>>
         {{#if "<%= panel.label %>"}}
         <div class="panel-heading"><h4 class="panel-title"><%= "{{translate \"" + panel.label + "\" scope=\""+model.name+"\"}}" %></h4></div>
         {{/if}}
@@ -37,5 +36,4 @@
         <% }); %>
         </div>
     </div>
-<% previousStyle = panel.style; %>
 <% }); %>

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

@@ -135,13 +135,19 @@ Espo.define('views/admin/layouts/grid', 'views/admin/layouts/base', function (De
                 var style = $header.data('style');
 
                 var attributes = {
-                    panelName: panelName
+                    panelName: panelName,
+                    style: style
                 };
 
-                var attributeList = ['panelName'];
+                var attributeList = ['panelName', 'style'];
                 var attributeDefs = {
                     panelName: {
                         type: 'varchar',
+                    },
+                    style: {
+                        type: 'enum',
+                        options: ['default', 'success', 'danger', 'primary', 'info', 'warning'],
+                        translation: 'LayoutManager.options.style'
                     }
                 };
 
@@ -153,6 +159,7 @@ Espo.define('views/admin/layouts/grid', 'views/admin/layouts/base', function (De
                     view.render();
                     this.listenTo(view, 'after:save', function (attributes) {
                         $label.text(attributes.panelName);
+                        $header.data('style', attributes.style);
                         view.close();
                     }, this);
                 }, this);

frontend/less/espo/custom.less

@@ -882,16 +882,30 @@ body > footer > p a:visited {
 }
 
 .record .middle > .panel {
-    margin-top: -1 * @line-height-computed - 2;
+    margin-top: -1 * @line-height-computed;
+    border-top-width: 0;
+    .panel-heading {
+        .btn-group {
+            top: -6px;
+            .btn {
+                border-top-width: 0;
+            }
+        }
+    }
 }
 
-.bottom > .panel.sticked,
-.side > .panel.sticked {
-    margin-top: -1 * @line-height-computed - 2;
-}
-
-.panel.sticked-2 {
-    margin-top: -1 * @line-height-computed !important;
+.panel.sticked,
+.panel.sticked {
+    margin-top: -1 * @line-height-computed;
+    border-top-width: 0;
+    .panel-heading {
+        .btn-group {
+            top: -6px;
+            .btn {
+                border-top-width: 0;
+            }
+        }
+    }
 }
 
 .stream-head-container {