cleanup and backdrop for quickDetail

This commit is contained in:
yuri
2015-02-25 13:14:50 +02:00
parent ddba654f00
commit 0a5ec4b81c
5 changed files with 70 additions and 68 deletions
+39 -39
View File
@@ -30,21 +30,21 @@ Espo.define('Views.Fields.File', 'Views.Fields.Link', function (Dep) {
detailTemplate: 'fields.file.detail',
editTemplate: 'fields.file.edit',
showPreview: false,
accept: false,
previewTypeList: [
'image/jpeg',
'image/png',
'image/gif',
],
defaultType: false,
previewSize: 'small',
events: {
'click a.remove-attachment': function (e) {
var $div = $(e.currentTarget).parent();
@@ -71,7 +71,7 @@ Espo.define('Views.Fields.File', 'Views.Fields.Link', function (Dep) {
},
'click a[data-action="showImagePreview"]': function (e) {
e.preventDefault();
var id = this.model.get(this.idName);
this.createView('preview', 'Modals.ImagePreview', {
id: id,
@@ -89,7 +89,7 @@ Espo.define('Views.Fields.File', 'Views.Fields.Link', function (Dep) {
acceptAttribue: this.acceptAttribue
}, Dep.prototype.data.call(this));
},
validateRequired: function () {
if (this.params.required || this.model.isRequired(this.name)) {
if (this.model.get(this.idName) == null) {
@@ -105,21 +105,21 @@ Espo.define('Views.Fields.File', 'Views.Fields.Link', function (Dep) {
this.idName = this.name + 'Id';
this.typeName = this.name + 'Type';
this.foreignScope = 'Attachment';
if ('showPreview' in this.params) {
this.showPreview = this.params.showPreview;
}
if ('accept' in this.params) {
this.accept = this.params.accept;
}
if (this.accept) {
this.acceptAttribue = this.accept.join('|');
}
},
afterRender: function () {
if (this.mode == 'edit') {
this.$attachment = this.$el.find('div.attachment');
@@ -132,10 +132,10 @@ Espo.define('Views.Fields.File', 'Views.Fields.Link', function (Dep) {
}
}
},
getDetailPreview: function (name, type, id) {
var preview = name;
switch (type) {
case 'image/png':
case 'image/jpeg':
@@ -144,17 +144,17 @@ Espo.define('Views.Fields.File', 'Views.Fields.Link', function (Dep) {
}
return preview;
},
getEditPreview: function (name, type, id) {
var preview = name;
switch (type) {
case 'image/png':
case 'image/jpeg':
case 'image/gif':
preview = '<img src="?entryPoint=image&size=small&id=' + id + '" title="' + name + '">';
}
return preview;
},
@@ -163,13 +163,13 @@ Espo.define('Views.Fields.File', 'Views.Fields.Link', function (Dep) {
var name = this.model.get(this.nameName);
var type = this.model.get(this.typeName) || this.defaultType;
var id = this.model.get(this.idName);
if (!id) {
return false;
}
var string = '';
if (this.showPreview && ~this.previewTypeList.indexOf(type)) {
string = '<div class="attachment-preview">' + this.getDetailPreview(name, type, id) + '</div>';
} else {
@@ -178,16 +178,16 @@ Espo.define('Views.Fields.File', 'Views.Fields.Link', function (Dep) {
return string;
}
},
deleteAttachment: function () {
var id = this.model.get(this.idName);
var o = {};
o[this.idName] = null;
o[this.nameName] = null;
this.model.set(o);
this.$attachment.empty();
if (id) {
if (this.model.isNew()) {
this.getModelFactory().create('Attachment', function (attachment) {
@@ -197,7 +197,7 @@ Espo.define('Views.Fields.File', 'Views.Fields.Link', function (Dep) {
}
}
},
setAttachment: function (attachment) {
var arr = _.clone(this.model.get(this.idsName));
var o = {};
@@ -208,17 +208,17 @@ Espo.define('Views.Fields.File', 'Views.Fields.Link', function (Dep) {
uploadFile: function (file) {
var isCanceled = false;
this.getModelFactory().create('Attachment', function (attachment) {
var $att = this.addAttachmentBox(file.name, file.type);
this.$el.find('.attachment-button').addClass('hidden');
$att.find('.remove-attachment').on('click.uploading', function () {
isCanceled = true;
this.$el.find('.attachment-button').removeClass('hidden');
}.bind(this));
var fileReader = new FileReader();
fileReader.onload = function (e) {
this.handleFileUpload(file, e.target.result, function (result, fileParams) {
@@ -236,7 +236,7 @@ Espo.define('Views.Fields.File', 'Views.Fields.Link', function (Dep) {
attachment.set('role', 'Attachment');
attachment.set('parentType', this.model.name);
attachment.set('parentId', this.model.id);
attachment.once('sync', function () {
if (!isCanceled) {
$att.trigger('ready');
@@ -259,28 +259,28 @@ Espo.define('Views.Fields.File', 'Views.Fields.Link', function (Dep) {
};
callback(contents, params);
},
addAttachmentBox: function (name, type, id) {
this.$attachment.empty();
var self = this;
var removeLink = '<a href="javascript:" class="remove-attachment pull-right"><span class="glyphicon glyphicon-remove"></span></a>';
var preview = name;
if (this.showPreview && id) {
preview = this.getEditPreview(name, type, id);
}
var $att = $('<div>').css('display', 'inline-block')
.css('width', '300px')
.addClass('gray-box')
.append($('<span class="preview">' + preview + '</span>').css('width', '270px'))
.append(removeLink);
var $container = $('<div>').append($att);
this.$attachment.append($container);
if (!id) {
var $loading = $('<span class="small">' + this.translate('Uploading...') + '</span>');
$container.append($loading);
@@ -288,14 +288,14 @@ Espo.define('Views.Fields.File', 'Views.Fields.Link', function (Dep) {
$loading.html(self.translate('Ready'));
});
}
return $att;
},
fetch: function () {
return {};
},
});
});
+7 -7
View File
@@ -24,23 +24,23 @@ Espo.define('Views.Fields.Image', 'Views.Fields.File', function (Dep) {
return Dep.extend({
type: 'image',
showPreview: true,
accept: ['image/*'],
defaultType: 'image/jpeg',
previewSize: 'small',
setup: function () {
Dep.prototype.setup.call(this);
if ('previewSize' in this.params && this.params.previewSize) {
this.previewSize = this.params.previewSize;
}
},
});
});
+15 -15
View File
@@ -22,17 +22,17 @@
Espo.define('Views.Modal', 'View', function (Dep) {
return Dep.extend({
cssName: 'modal-dialog',
header: false,
dialog: null,
containerSelector: null,
backdrop: 'static',
buttons: [
{
name: 'cancel',
@@ -42,28 +42,28 @@ Espo.define('Views.Modal', 'View', function (Dep) {
}
}
],
width: false,
init: function () {
var id = this.cssName + '-container-' + Math.floor((Math.random() * 10000) + 1).toString();
var containerSelector = this.containerSelector = '#' + id;
this.options = this.options || {};
this.options.el = this.containerSelector;
this.on('render', function () {
$(containerSelector).remove();
$('<div />').css('display', 'none').attr('id', id).appendTo('body');
var buttons = _.clone(this.buttons);
for (var i in buttons) {
if (!('text' in buttons[i]) && ('label' in buttons[i])) {
buttons[i].text = this.getLanguage().translate(buttons[i].label);
}
}
this.dialog = new Espo.Ui.Dialog({
backdrop: this.backdrop,
header: this.header,
@@ -77,12 +77,12 @@ Espo.define('Views.Modal', 'View', function (Dep) {
});
this.setElement(containerSelector + ' .body');
}, this);
this.on('after:render', function () {
$(containerSelector).show();
this.dialog.show();
});
this.once('remove', function () {
if (this.dialog) {
this.dialog.close();
@@ -90,7 +90,7 @@ Espo.define('Views.Modal', 'View', function (Dep) {
$(containerSelector).remove();
});
},
close: function () {
this.dialog.close();
},
@@ -37,6 +37,8 @@ Espo.define('Views.Modals.Detail', 'Views.Modal', function (Dep) {
columnCount: 1,
backdrop: true,
setup: function () {
var self = this;
@@ -17,7 +17,7 @@
*
* You should have received a copy of the GNU General Public License
* along with EspoCRM. If not, see http://www.gnu.org/licenses/.
************************************************************************/
************************************************************************/
Espo.define('Views.Modals.ImagePreview', 'Views.Modal', function (Dep) {
@@ -28,7 +28,7 @@ Espo.define('Views.Modals.ImagePreview', 'Views.Modal', function (Dep) {
header: true,
template: 'modals.image-preview',
size: 'x-large',
backdrop: true,
@@ -45,11 +45,11 @@ Espo.define('Views.Modals.ImagePreview', 'Views.Modal', function (Dep) {
this.buttons = [];
this.header = '&nbsp;';
},
afterRender: function () {
$container = this.$el.find('.image-container');
$img = this.$el.find('.image-container img');
var manageSize = function () {
var width = this.$el.width();
if (width < 868) {
@@ -58,15 +58,15 @@ Espo.define('Views.Modals.ImagePreview', 'Views.Modal', function (Dep) {
$img.removeAttr('width');
}
}.bind(this);
$(window).on('resize', function () {
manageSize();
});
setTimeout(function () {
manageSize();
}, 100);
},
});