record grid layout improvement

application/Espo/Resources/layouts/Role/detail.json

@@ -3,13 +3,11 @@
         "rows": [
             [
                 {"name": "name"},
-                {"name": "exportPermission"}
-            ],
-            [
-                {"name": "assignmentPermission"},
+                {"name": "exportPermission"},
                 {"name": "userPermission"}
             ],
             [
+                {"name": "assignmentPermission"},
                 {"name": "portalPermission"},
                 {"name": "groupEmailAccountPermission"}
             ]

client/res/layout-types/record.tpl

@@ -19,8 +19,55 @@
         <% _.each(panel.rows, function (row, rowNumber) { %>
             <div class="row">
             <% _.each(row, function (cell, cellNumber) { %>
+
+                <%
+                    var spanClassBase;
+                    if (columnCount === 1) {
+                        spanClassBase = 'col-sm-12';
+                    } else if (columnCount === 2) {
+                        spanClassBase = 'col-sm-6';
+                    } else if (columnCount === 3) {
+                        spanClassBase = 'col-sm-4';
+                    } else if (columnCount === 4) {
+                        spanClassBase = 'col-md-3 col-sm-6';
+                    } else {
+                        spanClass = 'col-sm-12';
+                    }
+                %>
                 <% if (cell != false) { %>
-                    <div class="cell<% if (columnCount == 1 || cell.fullWidth) { %> col-sm-12<% } else {%> col-sm-6<% } %> form-group<% if (cell.name) { %>{{#if hiddenFields.<%= cell.name %>}} hidden-cell{{/if}}<% } %>" data-name="<%= cell.name %>">
+                    <%
+                        var spanClass;
+                        if (columnCount === 1 || cell.fullWidth) {
+                            spanClass = 'col-sm-12';
+                        } else if (columnCount === 2) {
+                            if (cell.span === 2) {
+                                spanClass = 'col-sm-12';
+                            } else {
+                                spanClass = 'col-sm-6';
+                            }
+                        } else if (columnCount === 3) {
+                            if (cell.span === 2) {
+                                spanClass = 'col-sm-8';
+                            } else if (cell.span === 3) {
+                                spanClass = 'col-sm-12';
+                            } else {
+                                spanClass = 'col-sm-4';
+                            }
+                        } else if (columnCount === 4) {
+                            if (cell.span === 2) {
+                                spanClass = 'col-sm-6';
+                            } else if (cell.span === 3) {
+                                spanClass = 'col-sm-9';
+                            } else if (cell.span === 4) {
+                                spanClass = 'col-sm-12';
+                            } else {
+                                spanClass = 'col-md-3 col-sm-6';
+                            }
+                        } else {
+                            spanClass = 'col-sm-12';
+                        }
+                    %>
+                    <div class="cell <%= spanClass %> form-group<% if (cell.name) { %>{{#if hiddenFields.<%= cell.name %>}} hidden-cell{{/if}}<% } %>" data-name="<%= cell.name %>">
                         <% if (!cell.noLabel) { %><label class="control-label<% if (cell.name) { %>{{#if hiddenFields.<%= cell.name %>}} hidden{{/if}}<% } %>" data-name="<%= cell.name %>"><span class="label-text"><%
                             if ('customLabel' in cell) {
                                 print (cell.customLabel);
@@ -37,7 +84,7 @@
                         %></div>
                     </div>
                 <% } else { %>
-                    <div class="col-sm-6"></div>
+                    <div class="<%= spanClassBase %>"></div>
                 <% } %>
             <% }); %>
             </div>

client/src/views/record/detail.js

@@ -1106,6 +1106,9 @@ Espo.define('views/record/detail', ['views/record/base', 'view-record-helper'],
                         if ('noLabel' in cellDefs) {
                             cell.noLabel = cellDefs.noLabel;
                         }
+                        if ('span' in cellDefs) {
+                            cell.span = cellDefs.span;
+                        }
 
                         row.push(cell);
                     }
@@ -1123,9 +1126,11 @@ Espo.define('views/record/detail', ['views/record/base', 'view-record-helper'],
                 return;
             }
 
+            var gridLayoutType = this.gridLayoutType || 'record';
+
             if (this.detailLayout) {
                 this.gridLayout = {
-                    type: 'record',
+                    type: gridLayoutType,
                     layout: this.convertDetailLayout(this.detailLayout)
                 };
                 callback(this.gridLayout);
@@ -1134,7 +1139,7 @@ Espo.define('views/record/detail', ['views/record/base', 'view-record-helper'],
 
             this._helper.layoutManager.get(this.model.name, this.layoutName, function (simpleLayout) {
                 this.gridLayout = {
-                    type: 'record',
+                    type: gridLayoutType,
                     layout: this.convertDetailLayout(simpleLayout)
                 };
                 callback(this.gridLayout);

client/src/views/role/record/detail.js

@@ -38,6 +38,8 @@ Espo.define('views/role/record/detail', 'views/record/detail', function (Dep) {
 
         editModeDisabled: true,
 
+        columnCount: 3,
+
         setup: function () {
             Dep.prototype.setup.call(this);
             this.createView('extra', this.tableView, {

client/src/views/role/record/edit.js

@@ -36,6 +36,8 @@ Espo.define('views/role/record/edit', 'views/record/edit', function (Dep) {
 
         isWide: true,
 
+        columnCount: 3,
+
         events: _.extend({
 
         }, Dep.prototype.events),