From 0a5ec4b81c0199d0ffa3da47eb80cd71dd7a71b5 Mon Sep 17 00:00:00 2001 From: yuri Date: Wed, 25 Feb 2015 13:14:50 +0200 Subject: [PATCH] cleanup and backdrop for quickDetail --- frontend/client/src/views/fields/file.js | 78 +++++++++---------- frontend/client/src/views/fields/image.js | 14 ++-- frontend/client/src/views/modal.js | 30 +++---- frontend/client/src/views/modals/detail.js | 2 + .../client/src/views/modals/image-preview.js | 14 ++-- 5 files changed, 70 insertions(+), 68 deletions(-) diff --git a/frontend/client/src/views/fields/file.js b/frontend/client/src/views/fields/file.js index 96d2edad06..717f840aab 100644 --- a/frontend/client/src/views/fields/file.js +++ b/frontend/client/src/views/fields/file.js @@ -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 = ''; } - + 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 = '
' + this.getDetailPreview(name, type, id) + '
'; } 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 = ''; var preview = name; if (this.showPreview && id) { preview = this.getEditPreview(name, type, id); } - + var $att = $('
').css('display', 'inline-block') .css('width', '300px') .addClass('gray-box') .append($('' + preview + '').css('width', '270px')) .append(removeLink); - + var $container = $('
').append($att); this.$attachment.append($container); - + if (!id) { var $loading = $('' + this.translate('Uploading...') + ''); $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 {}; }, - + }); }); diff --git a/frontend/client/src/views/fields/image.js b/frontend/client/src/views/fields/image.js index 0fd7bde85d..9d6ccc2249 100644 --- a/frontend/client/src/views/fields/image.js +++ b/frontend/client/src/views/fields/image.js @@ -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; } }, - + }); }); diff --git a/frontend/client/src/views/modal.js b/frontend/client/src/views/modal.js index c8e8631658..b141ee7427 100644 --- a/frontend/client/src/views/modal.js +++ b/frontend/client/src/views/modal.js @@ -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(); $('
').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(); }, diff --git a/frontend/client/src/views/modals/detail.js b/frontend/client/src/views/modals/detail.js index 9835ea2960..186802a760 100644 --- a/frontend/client/src/views/modals/detail.js +++ b/frontend/client/src/views/modals/detail.js @@ -37,6 +37,8 @@ Espo.define('Views.Modals.Detail', 'Views.Modal', function (Dep) { columnCount: 1, + backdrop: true, + setup: function () { var self = this; diff --git a/frontend/client/src/views/modals/image-preview.js b/frontend/client/src/views/modals/image-preview.js index 6b38ea08eb..fd0039f511 100644 --- a/frontend/client/src/views/modals/image-preview.js +++ b/frontend/client/src/views/modals/image-preview.js @@ -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 = ' '; }, - + 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); - + }, });