From bffa8f37f1c9dcb8fd1ef9585238946ab474cecf Mon Sep 17 00:00:00 2001 From: Aaron Bohy Date: Thu, 6 Aug 2015 11:05:53 +0200 Subject: [PATCH] [REF] web_diagram: various tweaks - Ensure compatibility with both editions of web - Use the Pager widget instead of re-implementing it - Fix the use of Dialogs which was broken (wrong type of Dialog was used) - Convert css into less - Some js linting --- .../static/src/css/base_diagram.css | 46 -------- addons/web_diagram/static/src/js/diagram.js | 101 ++++++------------ addons/web_diagram/static/src/js/graph.js | 2 - .../static/src/less/diagram_view.less | 12 +++ .../static/src/xml/base_diagram.xml | 17 ++- addons/web_diagram/views/web_diagram.xml | 2 +- 6 files changed, 54 insertions(+), 126 deletions(-) delete mode 100644 addons/web_diagram/static/src/css/base_diagram.css create mode 100644 addons/web_diagram/static/src/less/diagram_view.less diff --git a/addons/web_diagram/static/src/css/base_diagram.css b/addons/web_diagram/static/src/css/base_diagram.css deleted file mode 100644 index f9bf32ca201..00000000000 --- a/addons/web_diagram/static/src/css/base_diagram.css +++ /dev/null @@ -1,46 +0,0 @@ -.openerp .oe_diagram_header h3.oe_diagram_title { - font-weight: normal; - color: #252424; - margin: 0 0 0 2px; -} - -.openerp .oe_diagram_buttons { - float: left; -} -.openerp .clear{ - clear:both; -} -/* We use a resizable diagram-container. The problem with a - * resizable diagram is that the diagram catches the mouse events - * and the diagram is then impossible to resize. That's why the - * diagram has a height of 98.5%, so that the bottom part of the - * diagram can be used for resize - */ -.openerp .diagram-container{ - margin:0; - padding:0; - width:100%; - height:500px; - resize:vertical; - background-color:#FFF; - border:1px solid #DCDCDC; - overflow:hidden; -} -.openerp .oe_diagram_diagram{ - margin:0; - padding:0; - background-color:#FFF; - width:100%; - height:98.5%; -} - -/* prevent accidental selection of the text in the svg nodes */ -.openerp .oe_diagram_diagram *{ - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - -o-user-select: none; - user-select: none; -} diff --git a/addons/web_diagram/static/src/js/diagram.js b/addons/web_diagram/static/src/js/diagram.js index 9f372f67eec..a5731972157 100644 --- a/addons/web_diagram/static/src/js/diagram.js +++ b/addons/web_diagram/static/src/js/diagram.js @@ -7,6 +7,7 @@ odoo.define('web_diagram.DiagramView', function (require) { var core = require('web.core'); var data = require('web.data'); var form_common = require('web.form_common'); +var Pager = require('web.Pager'); var View = require('web.View'); var _t = core._t; @@ -20,7 +21,6 @@ var DiagramView = View.extend({ searchable: false, multi_record: false, init: function(parent, dataset, view_id, options) { - var self = this; this._super(parent); this.set_default_options(options); this.view_manager = parent; @@ -30,7 +30,6 @@ var DiagramView = View.extend({ this.domain = this.dataset._domain || []; this.context = {}; this.ids = this.dataset.ids; - this.on('pager_action_executed', self, self.pager_action_trigger); }, view_loading: function(r) { @@ -55,15 +54,14 @@ var DiagramView = View.extend({ this.node = this.nodes.attrs.object; this.connector = this.connectors.attrs.object; this.labels = _.filter(this.fields_view.arch.children, function(label) { - return label.tag == "label"; + return label.tag === "label"; }); this.$el.html(QWeb.render("DiagramView", {'widget': self})); - this.$el.addClass(this.fields_view.arch.attrs['class']); + this.$el.addClass('o_diagram_view').addClass(this.fields_view.arch.attrs['class']); _.each(self.labels,function(label){ - var html_label = '

' + label.attrs.string + "

"; - self.$el.find('.oe_diagram_header').append(html_label); + self.$('.o_diagram_header').append($('').html(label.attrs.string)); }); @@ -93,7 +91,7 @@ var DiagramView = View.extend({ }; _.each(this.nodes.children, function(child) { - if(child.attrs.invisible == '1') + if(child.attrs.invisible === '1') params.invisible_nodes.push(child.attrs.name); else { params.visible_nodes.push(child.attrs.name); @@ -178,8 +176,7 @@ var DiagramView = View.extend({ }; // remove previous diagram - var canvas = self.$el.find('div.oe_diagram_diagram') - .empty().get(0); + var canvas = self.$('.o_diagram').empty().get(0); var r = new Raphael(canvas, '100%','100%'); @@ -210,7 +207,6 @@ var DiagramView = View.extend({ CuteNode.double_click_callback = function(cutenode){ self.edit_node(cutenode.id); }; - var i = 0; CuteNode.destruction_callback = function(cutenode){ if(!confirm(_t("Deleting this node cannot be undone.\nIt will also delete all connected transitions.\n\nAre you sure ?"))){ return $.Deferred().reject().promise(); @@ -270,12 +266,11 @@ var DiagramView = View.extend({ add_node: function(){ var self = this; var title = _t('Activity'); - var pop = new form_common.SelectCreateDialog(self, { + var pop = new form_common.FormViewDialog(self, { res_model: self.node, domain: self.dataset.domain, context: self.context || self.dataset.context, title: _t("Create:") + title, - initial_view: 'form', disable_multiple_selection: true, on_selected: function(element_ids) { self.dataset.read_index(_.keys(self.fields_view.fields)).then(self.on_diagram_loaded); @@ -315,12 +310,11 @@ var DiagramView = View.extend({ add_connector: function(node_source_id, node_dest_id, dummy_cuteedge){ var self = this; var title = _t('Transition'); - var pop = new form_common.SelectCreateDialog(self, { + var pop = new form_common.FormViewDialog(self, { res_model: self.connector, domain: this.dataset.domain, context: this.context || this.dataset.context, title: _t("Create:") + title, - initial_view: 'form', disable_multiple_selection: true, on_selected: function(element_ids) { self.dataset.read_index(_.keys(self.fields_view.fields)).then(self.on_diagram_loaded); @@ -354,78 +348,53 @@ var DiagramView = View.extend({ var self = this; this.$buttons = $(QWeb.render("DiagramView.buttons", {'widget': this})); - this.$buttons.on('click', '.oe_diagram_button_new', function() { + this.$buttons.on('click', '.o_diagram_new_button', function() { self.add_node(); }); $node = $node || this.options.$buttons; this.$buttons.appendTo($node); }, - + /** - * Render the pager according to the DiagramView.pager template and add listeners on it. - * Set this.$pager with the produced jQuery element - * @param {jQuery} [$node] a jQuery node where the rendered pager should be inserted - * $node may be undefined, in which case the DiagramView inserts the pager into this.options.$pager - * or into a div of its template + * Instantiate and render the pager and add listeners on it. + * Set this.pager + * @param {jQuery} [$node] a jQuery node where the pager should be inserted + * $node may be undefined, in which case the FormView inserts the pager into this.options.$pager */ render_pager: function($node) { var self = this; - this.$pager = $(QWeb.render("DiagramView.pager", {'widget': self})); - this.$pager.find('a[data-pager-action]').click(function() { - var action = $(this).data('pager-action'); - self.execute_pager_action(action); + this.pager = new Pager(this, this.dataset.ids.length, this.dataset.index + 1, 1); + this.pager.appendTo($node || this.options.$pager); + + this.pager.on('pager_changed', this, function (new_state) { + this.pager.disable(); + this.dataset.index = new_state.current_min - 1; + $.when(this.reload()).then(function () { + self.pager.enable(); + }); }); - this.execute_pager_action('reload'); - - $node = $node || this.options.$pager; - if ($node) { - this.$pager.appendTo($node); - } else { - this.$('.oe_diagram_pager').replaceWith(this.$pager); - } }, - pager_action_trigger: function(){ - var loaded = this.dataset.read_index(_.keys(this.fields_view.fields)) - .then(this.on_diagram_loaded); - this.do_update_pager(); - return loaded; - }, - - execute_pager_action: function(action) { - switch (action) { - case 'first': - this.dataset.index = 0; - break; - case 'previous': - this.dataset.previous(); - break; - case 'next': - this.dataset.next(); - break; - case 'last': - this.dataset.index = this.dataset.ids.length - 1; - break; - } - this.trigger('pager_action_executed'); + update_pager: function() { + if (this.pager) { + this.pager.update_state({ + size: this.dataset.ids.length, + current_min: this.dataset.index + 1, + }); + } }, - do_update_pager: function(hide_index) { - if (this.$pager) { - this.$pager.toggle(this.dataset.ids.length > 1); - if (hide_index) { - this.$pager.find(".oe_diagram_pager_state").html(""); - } else { - this.$pager.find(".oe_diagram_pager_state").html(_.str.sprintf(_t("%d / %d"), this.dataset.index + 1, this.dataset.ids.length)); - } - } + reload: function() { + return this.dataset.read_index(_.keys(this.fields_view.fields)) + .then(this.on_diagram_loaded) + .then(this.proxy('update_pager')); }, do_show: function() { this.do_push_state({}); - return $.when(this._super(), this.execute_pager_action('reload')); + return $.when(this._super(), this.reload()); } }); diff --git a/addons/web_diagram/static/src/js/graph.js b/addons/web_diagram/static/src/js/graph.js index 6e3b018d85a..57eaff582ee 100644 --- a/addons/web_diagram/static/src/js/graph.js +++ b/addons/web_diagram/static/src/js/graph.js @@ -88,12 +88,10 @@ if(entity_type == "node"){ $.when(GraphNode.destruction_callback(entity)).done(function () { - //console.log("remove node",entity); entity.remove(); }); }else if(entity_type == "edge"){ $.when(GraphEdge.destruction_callback(entity)).done(function () { - //console.log("remove edge",entity); entity.remove(); }); } diff --git a/addons/web_diagram/static/src/less/diagram_view.less b/addons/web_diagram/static/src/less/diagram_view.less new file mode 100644 index 00000000000..f77440fc5d7 --- /dev/null +++ b/addons/web_diagram/static/src/less/diagram_view.less @@ -0,0 +1,12 @@ +.o_diagram_view, .o_diagram { + height: 100%; + background-color: white; + + .o_diagram_header { + .o-webclient-padding(@top: 16px, @bottom: 16px); + > span { + display: block; + text-align: justify; + } + } +} diff --git a/addons/web_diagram/static/src/xml/base_diagram.xml b/addons/web_diagram/static/src/xml/base_diagram.xml index cbd5493d700..e8dae3c347d 100644 --- a/addons/web_diagram/static/src/xml/base_diagram.xml +++ b/addons/web_diagram/static/src/xml/base_diagram.xml @@ -1,21 +1,16 @@ diff --git a/addons/web_diagram/views/web_diagram.xml b/addons/web_diagram/views/web_diagram.xml index d7a9db2f1b8..6bb89cb1ee0 100644 --- a/addons/web_diagram/views/web_diagram.xml +++ b/addons/web_diagram/views/web_diagram.xml @@ -3,7 +3,7 @@