espocrm-extensions/espocrm-base
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

layout manager: ability to make call full width wide

Browse Source
This commit is contained in:
Yuri Kuznetsov
2014-10-15 15:01:17 +03:00
parent ceef826893
commit c67f2b20d4
5 changed files with 94 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/client/res/templates/admin/layouts/grid.tpl
+16 -10
View File
@@ -55,6 +55,10 @@
float: left;
}
#layout ul.panels ul.cells > li[data-full-width="true"] {
width: 94%;
}
#layout ul.cells > li {
list-style: none;
border: 1px solid #CCC;
@@ -138,7 +142,7 @@
<div class="col-md-8">
<div class="well">
<header>Layout</header>
<a href="javascript:;" data-action="add-panel">{{translate 'Add Panel' scope='Admin'}}</a>
<a href="javascript:;" data-action="addPanel">{{translate 'Add Panel' scope='Admin'}}</a>
<ul class="panels"></ul>
</div>
</div>
@@ -148,7 +152,7 @@
<ul class="disabled cells clearfix">
{{#each disabledFields}}
<li class="cell" data-name="{{./this}}">{{translate this scope=../scope category='fields'}}
&nbsp;<a href="javascript:" data-action="remove-field" class="remove-field"><i class="glyphicon glyphicon-remove"></i></a>
&nbsp;<a href="javascript:" data-action="removeField" class="remove-field"><i class="glyphicon glyphicon-remove"></i></a>
</li>
{{/each}}
</ul>
@@ -161,7 +165,7 @@
<header>
<label><%= label %></label>&nbsp;
<a href="javascript:" data-action="edit-panel-label" class="edit-panel-label"><i class="glyphicon glyphicon-pencil"></i></a>
<a href="javascript:" style="float: right;" data-action="remove-panel" class="remove-panel"><i class="glyphicon glyphicon-remove"></i></a>
<a href="javascript:" style="float: right;" data-action="removePanel" class="remove-panel"><i class="glyphicon glyphicon-remove"></i></a>
</header>
<ul class="rows">
<%
@@ -169,7 +173,7 @@
var row = rows[i];
%>
<li>
<div><a href="javascript:" data-action="remove-row" class="remove-row pull-right"><i class="glyphicon glyphicon-remove"></i></a></div>
<div><a href="javascript:" data-action="removeRow" class="remove-row pull-right"><i class="glyphicon glyphicon-remove"></i></a></div>
<ul class="cells">
<%
for (var j in row) {
@@ -179,13 +183,15 @@
var cell = row[j];
if (cell !== false) {
%>
<li class="cell" data-name="<%= cell.name %>"><%= cell.label %>
<a href="javascript:" data-action="remove-field" class="remove-field"><i class="glyphicon glyphicon-remove"></i></a>
<li class="cell" data-name="<%= cell.name %>" data-full-width="<%= cell.fullWidth || '' %>"><%= cell.label %>
<a href="javascript:" data-action="removeField" class="remove-field"><i class="glyphicon glyphicon-remove"></i></a>
</li>
<%
} else {
%>
<li class="empty cell"></li>
<li class="empty cell">
<a href="javascript:" data-action="minusCell" class="remove-field"><i class="glyphicon glyphicon-minus"></i></a>
</li>
<%
}
}
@@ -197,17 +203,17 @@
%>
</ul>
<div>
<a href="javascript:" data-action="add-row"><i class="glyphicon glyphicon-plus"></i></a>
<a href="javascript:" data-action="addRow"><i class="glyphicon glyphicon-plus"></i></a>
</div>
</li>
</div>
<div id="layout-row-tpl" style="display: none;">
<li>
<div><a href="javascript:" data-action="remove-row" class="remove-row pull-right"><i class="glyphicon glyphicon-remove"></i></a></div>
<div><a href="javascript:" data-action="removeRow" class="remove-row pull-right"><i class="glyphicon glyphicon-remove"></i></a></div>
<ul class="cells">
<% for (var i = 0; i < {{columnCount}}; i++) { %>
<li class="empty cell"></li>
<li class="empty cell"><a href="javascript:" data-action="minusCell" class="remove-field"><i class="glyphicon glyphicon-minus"></i></a></li>
<% } %>
</ul>
</li>
frontend/client/res/templates/admin/layouts/rows.tpl
+2 -2
View File
@@ -70,12 +70,12 @@
<header>{{translate 'Enabled' scope='Admin'}}</header>
<ul class="enabled connected">
{{#each layout}}
<li draggable="true" {{#each ../dataAttributes}}data-{{./this}}="{{prop ../this this}}" {{/each}}>
<li draggable="true" {{#each ../dataAttributes}}data-{{toDom this}}="{{prop ../this this}}" {{/each}}>
<div class="left">
<label>{{label}}</label>
</div>
{{#if ../editable}}
<div class="right"><a href="javascript:" data-action="edit-field" class="edit-field"><i class="glyphicon glyphicon-pencil"></i></a></div>
<div class="right"><a href="javascript:" data-action="editField" class="edit-field"><i class="glyphicon glyphicon-pencil"></i></a></div>
{{/if}}
</li>
{{/each}}
frontend/client/src/views/admin/layouts/detail.js
+5 -1
View File
@@ -23,7 +23,11 @@ Espo.define('Views.Admin.Layouts.Detail', 'Views.Admin.Layouts.Grid', function (
return Dep.extend({
dataAttributes: ['name'],
dataAttributes: ['name', 'fullWidth'],
dataAttributesDefs: {
fullWidth: 'bool',
},
ignoreList: ['modifiedAt', 'createdAt', 'modifiedBy', 'createdBy', 'assignedUser', 'teams'],
frontend/client/src/views/admin/layouts/grid.js
+64 -14
View File
@@ -44,11 +44,11 @@ Espo.define('Views.Admin.Layouts.Grid', 'Views.Admin.Layouts.Base', function (De
},
events: _.extend({
'click #layout a[data-action="add-panel"]': function () {
'click #layout a[data-action="addPanel"]': function () {
this.addPanel();
this.makeDraggable();
},
'click #layout a[data-action="remove-panel"]': function (e) {
'click #layout a[data-action="removePanel"]': function (e) {
$(e.target).closest('ul.panels > li').find('ul.cells > li').each(function (i, li) {
if ($(li).attr('data-name')) {
$(li).appendTo($('#layout ul.disabled'));
@@ -56,13 +56,13 @@ Espo.define('Views.Admin.Layouts.Grid', 'Views.Admin.Layouts.Base', function (De
});
$(e.target).closest('ul.panels > li').remove();
},
'click #layout a[data-action="add-row"]': function (e) {
'click #layout a[data-action="addRow"]': function (e) {
var tpl = this.unescape($("#layout-row-tpl").html());
var html = _.template(tpl);
$(e.target).closest('ul.panels > li').find('ul.rows').append(html);
this.makeDraggable();
},
'click #layout a[data-action="remove-row"]': function (e) {
'click #layout a[data-action="removeRow"]': function (e) {
$(e.target).closest('ul.rows > li').find('ul.cells > li').each(function (i, li) {
if ($(li).attr('data-name')) {
$(li).appendTo($('#layout ul.disabled'));
@@ -70,22 +70,56 @@ Espo.define('Views.Admin.Layouts.Grid', 'Views.Admin.Layouts.Base', function (De
});
$(e.target).closest('ul.rows > li').remove();
},
'click #layout a[data-action="remove-field"]': function (e) {
'click #layout a[data-action="removeField"]': function (e) {
var el = $(e.target).closest('li');
var index = el.index();
var parent = el.parent();
var parent = el.parent();
el.appendTo($("ul.disabled"));
var empty = $('<li class="empty disabled"></li>');
if (index == 0) {
parent.prepend(empty);
} else {
empty.insertAfter(parent.children(':nth-child(' + index + ')'));
if (el.data('full-width')) {
for (var i = 0; i < this.columnCount; i++) {
parent.append(empty.clone());
}
} else {
if (index == 0) {
parent.prepend(empty);
} else {
empty.insertAfter(parent.children(':nth-child(' + index + ')'));
}
}
el.data('full-width', null);
el.removeAttr('data-full-width');
this.makeDraggable();
},
'click #layout a[data-action="minusCell"]': function (e) {
if (this.columnCount < 2) {
return;
}
$li = $(e.currentTarget).closest('li');
$ul = $li.parent();
var count = 0;
var isEmpty = false;
if ($ul.children('li:not(.empty)').size() == 0) {
isEmpty = true;
}
$ul.children('li.empty').remove();
$ul.children('li:not(:first-child)').remove();
$ul.children('li').data('full-width', true).attr('data-full-width', true);
if (isEmpty) {
$ul.append($('<li class="empty disabled"></li>').data('full-width', true).attr('data-full-width', true));
this.makeDraggable();
}
},
'click #layout a[data-action="edit-panel-label"]': function (e) {
var el = $(e.target).closest('header').children('label');
var value = el.text();
@@ -117,12 +151,21 @@ Espo.define('Views.Admin.Layouts.Grid', 'Views.Admin.Layouts.Base', function (De
addPanel: function (data) {
var tpl = this.unescape($("#layout-panel-tpl").html());
var empty = false;
if (!data) {
empty = true;
}
data = data || {label: 'new panel', rows: [[]]};
data.rows.forEach(function (row) {
var rest = this.columnCount - row.length;
for (var i = 0; i < rest; i++) {
row.push(false);
if (empty) {
for (var i = 0; i < rest; i++) {
row.push(false);
}
}
for (var i in row) {
if (row[i] != false) {
@@ -175,6 +218,10 @@ Espo.define('Views.Admin.Layouts.Grid', 'Views.Admin.Layouts.Base', function (De
}
}
if ($(this).data('full-width')) {
$(ui.draggable).data('full-width', true).attr('data-full-width', true);
}
ui.draggable.css({
top: 0,
left: 0,
@@ -211,7 +258,10 @@ Espo.define('Views.Admin.Layouts.Grid', 'Views.Admin.Layouts.Base', function (De
if (!$(li).hasClass('empty')) {
cell = {};
self.dataAttributes.forEach(function (attr) {
cell[attr] = $(li).data(attr);
var value = $(li).data(Espo.Utils.toDom(attr)) || null;
if (value) {
cell[attr] = value;
}
});
}
row.push(cell);
frontend/client/src/views/admin/layouts/rows.js
+7 -4
View File
@@ -23,13 +23,14 @@ Espo.define('Views.Admin.Layouts.Rows', 'Views.Admin.Layouts.Base', function (De
return Dep.extend({
template: 'admin.layouts.rows',
template: 'admin.layouts.rows',
events: _.extend({
'click #layout a[data-action="edit-field"]': function (e) {
'click #layout a[data-action="editField"]': function (e) {
var data = {};
this.dataAttributes.forEach(function (attr) {
data[attr] = $(e.target).closest('li').data(attr)
data[attr] = $(e.target).closest('li').data(Espo.Utils.toDom(attr))
});
this.openEditDialog(data);
},
@@ -37,6 +38,8 @@ Espo.define('Views.Admin.Layouts.Rows', 'Views.Admin.Layouts.Base', function (De
dataAttributes: null,
dataAttributesDefs: {},
editable: false,
data: function () {
@@ -64,7 +67,7 @@ Espo.define('Views.Admin.Layouts.Rows', 'Views.Admin.Layouts.Base', function (De
$("#layout ul.enabled > li").each(function (i, el) {
var o = {};
this.dataAttributes.forEach(function (attr) {
var value = $(el).data(attr);
var value = $(el).data(Espo.Utils.toDom(attr)) || null;
if (value) {
o[attr] = value;
}