pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX/IMP] project,web: kanban cover image dialog

Browse Source 
* Fix the grid display of images (use the column property)
* Use Dialog class
* Allow removing a cover image
* Add image selection before choosing it (or double click to choose)

+ add less mixins in web for columns property
This commit is contained in:
qsm-odoo
2016-01-28 17:11:39 +01:00
parent 79c20415b2
commit 31e8cd0949
4 changed files with 64 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/project/static/src/js/project.js
+36 -22
View File
@@ -1,7 +1,9 @@
odoo.define('project.update_kanban', function (require) {
'use strict';
var core = require('web.core');
var data = require('web.data');
var Dialog = require('web.Dialog');
var Model = require('web.Model');
var session = require('web.session');
@@ -9,45 +11,57 @@ var KanbanView = require('web_kanban.KanbanView');
var KanbanRecord = require('web_kanban.Record');
var QWeb = core.qweb;
var _t = core._t;
KanbanRecord.include({
on_card_clicked: function() {
on_card_clicked: function () {
if (this.model === 'project.project') {
this.$('.o_project_kanban_boxes a').first().click();
} else {
this._super.apply(this, arguments);
}
},
on_kanban_action_clicked: function(ev) {
on_kanban_action_clicked: function (ev) {
var self = this;
if (this.model === 'project.task' && $(ev.currentTarget).data('type') === 'set_cover') {
ev.preventDefault();
new Model('ir.attachment').query(['id', 'name'])
.filter([['res_model', '=', 'project.task'], ['res_id', '=', this.id], ['mimetype', 'ilike', 'image']])
.all().then(function (attachment_ids) {
var $cover_modal = $(QWeb.render("project.SetCoverModal", {
widget: self,
attachment_ids: attachment_ids,
}));
$cover_modal.appendTo($('body'));
$cover_modal.modal('toggle');
$cover_modal.on('click', 'img', function(ev){
self.update_record({
data : {
displayed_image_id: $(ev.currentTarget).data('id'),
}
});
$cover_modal.modal('toggle');
$cover_modal.remove();
});
});
.all().then(open_cover_images_dialog);
} else {
this._super.apply(this, arguments, ev);
}
function open_cover_images_dialog(attachment_ids) {
var cover_id = self.record.displayed_image_id.raw_value[0];
var $content = $(QWeb.render("project.SetCoverModal", {
cover_id: cover_id,
attachment_ids: attachment_ids,
}));
var $imgs = $content.find('img');
var dialog = new Dialog(self, {
title: _t("Set a Cover Image"),
buttons: [{text: _t("Select"), classes: 'btn-primary', close: true, disabled: !cover_id, click: function () {
self.update_record({data: {displayed_image_id: $imgs.filter('.o_selected').data('id')}});
}}, {text: _t("Remove Cover Image"), close: true, click: function () {
self.update_record({data: {displayed_image_id: 0}});
}}, {text: _t("Discard"), close: true}],
$content: $content,
}).open();
var $selectBtn = dialog.$footer.find('.btn-primary');
$content.on('click', 'img', function (ev) {
$imgs.not(ev.currentTarget).removeClass('o_selected');
$selectBtn.prop('disabled', !$(ev.currentTarget).toggleClass('o_selected').hasClass('o_selected'));
});
$content.on('dblclick', 'img', function (ev) {
self.update_record({data: {displayed_image_id: $(ev.currentTarget).data('id')}});
dialog.close();
});
}
},
});
});
addons/project/static/src/less/project_dashboard.less
+14
View File
@@ -82,3 +82,17 @@
}
}
}
.o_kanban_task_cover_image {
.o-columns(200px, 4);
> img {
cursor: pointer;
margin-bottom: 1em;
border: 1px solid transparent;
&.o_selected {
border-color: @odoo-brand-secondary;
box-shadow: 0px 0px 2px 2px @odoo-brand-secondary;
}
}
}
addons/project/static/src/xml/project.xml
+5 -26
View File
@@ -1,30 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
<div t-name="project.SetCoverModal" class="modal" tabindex="-1" data-backdrop="static" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&amp;times;</button>
<h4 class="modal-title">Set a Cover Image</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div t-if="attachment_ids.length > 0" class="row">
<t t-foreach="attachment_ids" t-as="attachment">
<div class="col-sm-3 o_image" style="height: 100%">
<img style="cursor: pointer; width: 100%" t-att-src="'/web/image/' + attachment['id'] + '?unique=1'" t-att-data-id="attachment['id']"/>
</div>
</t>
</div>
<div t-if="attachment_ids.length == 0">
There is no available image to be set as cover. Send a message on the task with an attached image.
</div>
</div>
</div>
<div class="modal-footer"><button type="button" class="btn btn-primary" data-dismiss="modal">Close</button></div>
<t t-name="project.SetCoverModal">
<div t-if="attachment_ids.length > 0" class="o_kanban_task_cover_image">
<img t-foreach="attachment_ids" t-as="attachment" t-attf-class="img-responsive#{cover_id == attachment['id'] ? ' o_selected' : ''}" t-attf-src="/web/image/#{attachment['id']}?unique=1" t-att-data-id="attachment['id']"/>
</div>
</div>
</div>
<div t-if="attachment_ids.length == 0">There is no available image to be set as cover. Send a message on the task with an attached image.</div>
</t>
</templates>
addons/web/static/src/less/utils.less
+9
View File
@@ -216,6 +216,15 @@
transition: @property @duration @timing-function @transition-delay;
}
// ------------------------------------------------------------------
// Columns
// ------------------------------------------------------------------
.o-columns(@width: auto, @col: auto) {
-webkit-columns: @width @col;
-moz-columns: @width @col;
columns: @width @col;
}
// ------------------------------------------------------------------
// Position absolute
// ------------------------------------------------------------------