From d4b103fb4d656f8480299fb673ebbdd3b95e9aed Mon Sep 17 00:00:00 2001 From: Antony Lesuisse Date: Mon, 9 Apr 2012 20:44:45 +0200 Subject: [PATCH] viewmanager refactor part1 bzr revid: al@openerp.com-20120409184445-nri84zeylu6ur21d --- addons/web/static/src/css/base.css | 151 ++------------------------ addons/web/static/src/css/base.sass | 129 ++-------------------- addons/web/static/src/js/view_form.js | 36 +++--- addons/web/static/src/js/view_page.js | 8 +- addons/web/static/src/js/views.js | 31 +++--- addons/web/static/src/xml/base.xml | 31 +++++- 6 files changed, 86 insertions(+), 300 deletions(-) diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css index 3887dbc9a3b..a34a8bc394c 100644 --- a/addons/web/static/src/css/base.css +++ b/addons/web/static/src/css/base.css @@ -920,6 +920,17 @@ .openerp2 .oe_view_manager_header .oe_view_manager_switch { float: right; } +.openerp2 .oe_view_manager_header .oe_view_manager_buttons { + padding-right: 8px; + float: left; + margin-right: 12px; +} +.openerp2 .oe_view_manager_header .oe_view_manager_sidebar { + display: block; +} +.openerp2 .oe_view_manager_header .oe_view_manager_pager { + float: right; +} .openerp2 .oe_form_dropdown_section { position: relative; display: inline-block; @@ -1162,149 +1173,9 @@ .openerp2 .oe_searchview .oe_searchview_drawer .oe_searchview_advanced.oe_opened div { display: block; } -.openerp2 .searcharea { - position: relative; - float: right; -} -.openerp2 .searcharea .toggle-button { - position: absolute; - top: 10px; - right: 8px; - width: 0; - height: 0; - display: inline-block; - content: "&darr"; - vertical-align: top; - border-top: 5px solid #4c4c4c; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - filter: alpha(opacity=50); - opacity: 0.5; -} -.openerp2 .searcharea .toggle-button:hover { - filter: alpha(opacity=80); - opacity: 0.8; -} -.openerp2 .searcharea .searchmenu { - display: none; - position: absolute; - top: 30px; - right: 7px; - border: 1px solid #afafb6; - width: 432px; - overflow-x: hidden; - z-index: 900; - background: white; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - border-radius: 5px; - -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); - -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); - -box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); -} -.openerp2 .searcharea .searchmenu .dropdown-menu input { - width: 120px; -} -.openerp2 .searcharea .searchmenu input { - width: 25px; -} -.openerp2 .searcharea .searchmenu .toggle:before { - margin-left: 0; - margin-top: 9px; -} -.openerp2 .searcharea .searchmenu .open:before { - margin-top: 14px; -} -.openerp2 .searcharea .searchmenu .menu:last-child { - margin-bottom: 0; -} -.openerp2 .searcharea .searchmenu .menu li { - padding-left: 12px; - margin-right: 8px; -} -.openerp2 .searcharea .searchmenu .custom-filters a:hover:after { - content: "d"; - font-family: "mnmliconsRegular" !important; - font-size: 18px; - font-weight: 300 !important; - float: right; - margin-top: -1px; -} -.openerp2 .searcharea .searchmenu a { - height: 14px; - line-height: 14px; - padding: 3px 6px; - color: #4c4c4c; -} -.openerp2 .searcharea .searchmenu a:hover { - text-decoration: none; - background-color: #f0f0fa; - background-image: -webkit-gradient(linear, left top, left bottom, from(#f0f0fa), to(#eeeef6)); - background-image: -webkit-linear-gradient(top, #f0f0fa, #eeeef6); - background-image: -moz-linear-gradient(top, #f0f0fa, #eeeef6); - background-image: -ms-linear-gradient(top, #f0f0fa, #eeeef6); - background-image: -o-linear-gradient(top, #f0f0fa, #eeeef6); - background-image: linear-gradient(to bottom, #f0f0fa, #eeeef6); -} -.openerp2 .searcharea .searchmenu p { - margin-left: 12px; -} -.openerp2 .searcharea .searchmenu input, .openerp2 .searcharea .searchmenu textarea { - height: 14px; - padding: 2px; - font-size: 11px; - line-height: 18px; - border: 1px solid #cccccc; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - border-radius: 3px; -} -.openerp2 .searcharea .searchmenu .column { - width: 48%; -} -.openerp2 .searcharea .searchmenu .full-column { - margin: 8px 0; - padding: 4px; -} -.openerp2 input.searchbox { - width: 410px; - border: 1px solid #ababab; - margin-top: 0; - margin-bottom: 0; - padding: 4px 19px; - font-size: 13px; - background: url("/web/static/src/img/search.png") no-repeat 5px; - background-color: white; - -moz-border-radius: 13px; - -webkit-border-radius: 13px; - border-radius: 13px; - -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset; - -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset; - -box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset; -} -.openerp2 .search-clear { - position: absolute; - top: 7px; - right: 24px; - width: 12px; - height: 12px; - cursor: pointer; - display: none; -} .openerp2 .oe_form_header { padding: 8px; } -.openerp2 .oe_form_header .oe_form_buttons { - padding-right: 8px; - float: left; - margin-right: 12px; -} -.openerp2 .oe_form_header .oe_form_pager { - float: right; -} -.openerp2 .oe_form_header .oe-sidebar-attachments { - display: none; -} .openerp2 .oe_form_invalid input, .openerp2 .oe_form_invalid select, .openerp2 .oe_form_invalid textarea { background-color: #ff6666 !important; border: 1px solid #dd0000 !important; diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass index 6201312a7f4..8d08c257acd 100644 --- a/addons/web/static/src/css/base.sass +++ b/addons/web/static/src/css/base.sass @@ -667,7 +667,7 @@ $colour4: #8a89ba color: #fff text-shadow: 0 1px 2px rgba(0,0,0,0.4) // }}} - // ViewManager Header {{{ + // ViewManager.header {{{ .oe_view_manager_header border-top: 1px solid #cacaca border-bottom: 1px solid #cacaca @@ -721,13 +721,21 @@ $colour4: #8a89ba padding: 0 8px .oe_view_manager_switch float: right + .oe_view_manager_buttons + padding-right: 8px + float: left + margin-right: 12px + .oe_view_manager_sidebar + display: block + .oe_view_manager_pager + float: right + // }}} - // ViewManager Dropdown {{{ + // ViewManager.sidebar {{{ .oe_form_dropdown_section position: relative display: inline-block margin-right: 4px - .oe_dropdown_toggle:after width: 0 height: 0 @@ -739,11 +747,9 @@ $colour4: #8a89ba border-right: 4px solid transparent border-top: 4px solid white @include opacity(0.5) - margin-top: 7px margin-left: 6px border-top-color: #404040 - .oe_dropdown_menu display: none position: absolute @@ -951,120 +957,9 @@ $colour4: #8a89ba div display: block // }}} - // SearchView mit {{{ - .searcharea - position: relative - float: right - .toggle-button - position: absolute - top: 10px - right: 8px - width: 0 - height: 0 - display: inline-block - content: "&darr" - vertical-align: top - border-top: 5px solid #4c4c4c - border-left: 5px solid transparent - border-right: 5px solid transparent - @include opacity(0.5) - &:hover - @include opacity(0.8) - .searchmenu - display: none - position: absolute - top: 30px - right: 7px - border: 1px solid #afafb6 - width: 432px - overflow-x: hidden - z-index: 900 - background: white - @include radius(5px) - @include box-shadow(0 1px 4px rgba(0,0,0,0.3)) - .dropdown-menu - input - width: 120px - input - width: 25px - .toggle:before - margin-left: 0 - margin-top: 9px - .open:before - margin-top: 14px - .menu - &:last-child - margin-bottom: 0 - li - padding-left: 12px - margin-right: 8px - .custom-filters - a:hover:after - content: 'd' - font-family: "mnmliconsRegular" !important - font-size: 18px - font-weight: 300 !important - float: right - margin-top: -1px - a - height: 14px - line-height: 14px - padding: 3px 6px - color: #4c4c4c - &:hover - text-decoration: none - @include vertical-gradient(#f0f0fa, #eeeef6) - p - margin-left: 12px - input, textarea - height: 14px - padding: 2px - font-size: 11px - line-height: 18px - border: 1px solid #ccc - @include radius(3px) - .column - width: 48% - .full-column - margin: 8px 0 - padding: 4px - - input.searchbox - width: 410px - border: 1px solid #ababab - margin-top: 0 - margin-bottom: 0 - padding: 4px 19px - font-size: 13px - background: url('/web/static/src/img/search.png') no-repeat 5px - background-color: white - @include radius(13px) - @include box-shadow(0 1px 2px rgba(0,0,0,0.2) inset) - - .search-clear - position: absolute - top: 7px - right: 24px - width: 12px - height: 12px - cursor: pointer - display: none - // }}} - // FormView.header {{{ + // FormView.body {{{ .oe_form_header padding: 8px - .oe_form_buttons - padding-right: 8px - float: left - margin-right: 12px - .oe_form_pager - float: right - // FIXME - .oe-sidebar-attachments - display: none - - // }}} - // FormView.body {{{ .oe_form_invalid input, select, textarea background-color: #F66 !important diff --git a/addons/web/static/src/js/view_form.js b/addons/web/static/src/js/view_form.js index 785ab0e544a..a2ac3a54086 100644 --- a/addons/web/static/src/js/view_form.js +++ b/addons/web/static/src/js/view_form.js @@ -5,7 +5,7 @@ var _t = openerp.web._t, var QWeb = openerp.web.qweb; openerp.web.views.add('form', 'openerp.web.FormView'); -openerp.web.FormView = openerp.web.View.extend( /** @lends openerp.web.FormView# */{ +openerp.web.FormView = openerp.web.View.extend({ /** * Indicates that this view is not searchable, and thus that no search * view should be displayed (if there is one active). @@ -41,7 +41,6 @@ openerp.web.FormView = openerp.web.View.extend( /** @lends openerp.web.FormView# this.default_focus_button = null; this.registry = openerp.web.form.widgets; this.has_been_loaded = $.Deferred(); - this.$form_header = null; this.translatable_fields = []; _.defaults(this.options, { "not_interactible_on_create": false @@ -54,10 +53,6 @@ openerp.web.FormView = openerp.web.View.extend( /** @lends openerp.web.FormView# this.rendering_engine = new openerp.web.FormRenderingEngine(this); }, destroy: function() { - if (this.sidebar) { - this.sidebar.attachments.destroy(); - this.sidebar.destroy(); - } _.each(this.get_widgets(), function(w) { w.destroy(); }); @@ -78,23 +73,26 @@ openerp.web.FormView = openerp.web.View.extend( /** @lends openerp.web.FormView# var $dest = this.$element.hasClass("oe_form_container") ? this.$element : this.$element.find('.oe_form_container'); this.rendering_engine.render_to($dest); - this.$form_header = this.$element.find('.oe_form_header:first'); - this.$form_header.find('div.oe_form_pager button[data-pager-action]').click(function() { + this.$buttons = this.options.$buttons || this.$element.find('.oe_form_buttons'); + this.$sidebar = this.options.$sidebar || this.$element.find('.oe_form_sidebar'); + this.$pager = this.options.$pager || this.$element.find('.oe_form_pager'); + + this.$buttons.html(QWeb.render("FormView.buttons", {'widget':self})); + this.$pager.html(QWeb.render("FormView.pager", {'widget':self})); + + this.$buttons.on('click','.oe_form_buttons button.oe_form_button_save',this.on_button_save); + this.$buttons.on('click','.oe_form_buttons button.oe_form_button_cancel',this.on_button_cancel); + this.$pager.on('click','.oe_form_pager button[data-pager-action]',function(event) { var action = $(this).data('pager-action'); self.on_pager_action(action); }); - this.$form_header.find('button.oe_form_button_save').click(this.on_button_save); - this.$form_header.find('button.oe_form_button_cancel').click(this.on_button_cancel); - - if (!this.sidebar && this.options.sidebar && this.options.sidebar_id) { + if (!this.sidebar && this.options.sidebar) { this.sidebar = new openerp.web.Sidebar(this); - this.sidebar.appendTo(this.$element.find(".oe_form_sidebar")); - this.sidebar.attachments = new openerp.web.form.SidebarAttachments(this.sidebar, this); + this.sidebar.appendTo(this.$sidebar); + //this.sidebar.attachments = new openerp.web.form.SidebarAttachments(this.sidebar, this); this.sidebar.add_toolbar(this.fields_view.toolbar); - this.set_common_sidebar_sections(this.sidebar); - this.sidebar.add_section(_t('Customize'), 'customize'); - this.sidebar.add_items('customize', [{ + this.sidebar.add_items('other', [{ label: _t('Set Default'), form: this, callback: function (item) { @@ -173,7 +171,7 @@ openerp.web.FormView = openerp.web.View.extend( /** @lends openerp.web.FormView# self.is_initialized.resolve(); self.do_update_pager(record.id == null); if (self.sidebar) { - self.sidebar.attachments.do_update(); + // self.sidebar.attachments.do_update(); } if (self.default_focus_field) { self.default_focus_field.focus(); @@ -216,7 +214,7 @@ openerp.web.FormView = openerp.web.View.extend( /** @lends openerp.web.FormView# } }, do_update_pager: function(hide_index) { - var $pager = this.$form_header.find('div.oe_form_pager'); + var $pager = this.$pager.find('div.oe_form_pager'); var index = hide_index ? '-' : this.dataset.index + 1; $pager.find('button').prop('disabled', this.dataset.ids.length < 2); $pager.find('span.oe_pager_index').html(index); diff --git a/addons/web/static/src/js/view_page.js b/addons/web/static/src/js/view_page.js index d284470fdde..941aec36650 100644 --- a/addons/web/static/src/js/view_page.js +++ b/addons/web/static/src/js/view_page.js @@ -19,10 +19,10 @@ openerp.web.page = function (openerp) { }, on_loaded: function(data) { this._super(data); - this.$form_header.find('button.oe_form_button_edit').click(this.on_button_edit); - this.$form_header.find('button.oe_form_button_create').click(this.on_button_create); - this.$form_header.find('button.oe_form_button_duplicate').click(this.on_button_duplicate); - this.$form_header.find('button.oe_form_button_delete').click(this.on_button_delete); + this.$buttons.find('button.oe_form_button_edit').click(this.on_button_edit); + this.$buttons.find('button.oe_form_button_create').click(this.on_button_create); + this.$buttons.find('button.oe_form_button_duplicate').click(this.on_button_duplicate); + this.$buttons.find('button.oe_form_button_delete').click(this.on_button_delete); }, on_button_edit: function() { return this.do_switch_view('form'); diff --git a/addons/web/static/src/js/views.js b/addons/web/static/src/js/views.js index 6e4f77d22d8..8bc7a456bac 100644 --- a/addons/web/static/src/js/views.js +++ b/addons/web/static/src/js/views.js @@ -252,7 +252,9 @@ session.web.ViewManager = session.web.OldWidget.extend({ deferred : $.Deferred(), controller : null, options : _.extend({ - sidebar_id : self.element_id + '_sidebar_' + view.view_type, + $buttons : self.$element.find('.oe_view_manager_buttons'), + $sidebar : self.$element.find('.oe_view_manager_sidebar'), + $pager : self.$element.find('.oe_view_manager_pager'), action : self.action, action_views_ids : views_ids }, self.flags, self.flags[view.view_type] || {}, view.options || {}) @@ -274,9 +276,9 @@ session.web.ViewManager = session.web.OldWidget.extend({ * @returns {jQuery.Deferred} new view loading promise */ on_mode_switch: function(view_type, no_store) { - var self = this, - view = this.views[view_type], - view_promise; + var self = this; + var view = this.views[view_type]; + var view_promise; if(!view) return $.Deferred().reject(); @@ -778,17 +780,17 @@ session.web.Sidebar = session.web.Widget.extend({ }, add_toolbar: function(toolbar) { var self = this; - _.each([['print', _t("Reports")], ['action', _t("Actions")], ['relate', _t("Links")]], function(type) { - var items = toolbar[type[0]]; - if (items.length) { + _.each(['print','action','relate'], function(type) { + var items = toolbar[type]; + if (items) { for (var i = 0; i < items.length; i++) { items[i] = { label: items[i]['name'], action: items[i], - classname: 'oe_sidebar_' + type[0] + classname: 'oe_sidebar_' + type } } - self.add_items(type[0], items); + self.add_items(type=='print' ? 'print' : 'other', items); } }); }, @@ -820,11 +822,7 @@ session.web.Sidebar = session.web.Widget.extend({ add_items: function(section_code, items) { var self = this; if (items) { - // generate unique id for items - for (var i = 0; i < items.length; i++) { - items[i].element_id = _.uniqueId(section_code + '_item_'); - this.items[items[i].element_id] = items[i]; - } + this.items[section_code].push.apply(this.items[section_code],items); this.redraw(); } }, @@ -974,7 +972,7 @@ session.web.TranslateDialog = session.web.Dialog.extend({ } }); -session.web.View = session.web.Widget.extend(/** @lends session.web.View# */{ +session.web.View = session.web.Widget.extend({ template: "EmptyComponent", // name displayed in view switchers display_name: '', @@ -1014,7 +1012,8 @@ session.web.View = session.web.Widget.extend(/** @lends session.web.View# */{ * Called after a successful call to fields_view_get. * Must return a promise. */ - on_loaded: function(fields_view_get) {}, + on_loaded: function(fields_view_get) { + }, set_default_options: function(options) { this.options = options || {}; _.defaults(this.options, { diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml index 38a3b4199b9..6cb3412f257 100644 --- a/addons/web/static/src/xml/base.xml +++ b/addons/web/static/src/xml/base.xml @@ -415,6 +415,8 @@
+
+
+
@@ -682,14 +685,34 @@
- - - + +
+
+
+
+
+
+ + +
+ view: - + edit: + +
+ +
+ + 0 / 0 + +
+ + + +