viewmanager refactor part1

bzr revid: al@openerp.com-20120409184445-nri84zeylu6ur21d

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;

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 {{{
+    // FormView.body {{{
-    .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 {{{
     .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

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.$buttons = this.options.$buttons || this.$element.find('.oe_form_buttons');
-        this.$form_header.find('div.oe_form_pager button[data-pager-action]').click(function() {
+        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);
+        if (!this.sidebar && this.options.sidebar) {
-        this.$form_header.find('button.oe_form_button_cancel').click(this.on_button_cancel);
-
-        if (!this.sidebar && this.options.sidebar && this.options.sidebar_id) {
             this.sidebar = new openerp.web.Sidebar(this);
-            this.sidebar.appendTo(this.$element.find(".oe_form_sidebar"));
+            this.sidebar.appendTo(this.$sidebar);
-            this.sidebar.attachments = new openerp.web.form.SidebarAttachments(this.sidebar, this);
+            //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_items('other', [{
-            this.sidebar.add_section(_t('Customize'), 'customize');
-            this.sidebar.add_items('customize', [{
                 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);

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.$buttons.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.$buttons.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.$buttons.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_delete').click(this.on_button_delete);
         },
         on_button_edit: function() {
             return this.do_switch_view('form');

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,
+        var self = this;
-            view = this.views[view_type],
+        var view = this.views[view_type];
-            view_promise;
+        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) {
+        _.each(['print','action','relate'], function(type) {
-            var items = toolbar[type[0]];
+            var items = toolbar[type];
-            if (items.length) {
+            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
+            this.items[section_code].push.apply(this.items[section_code],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.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, {

addons/web/static/src/xml/base.xml

@@ -415,6 +415,8 @@
                 <div t-attf-id="#{widget.element_id}_search" t-opentag="true"/>
             </div>
             <div class="oe_view_manager_row">
+                <div class="oe_view_manager_buttons"/>
+                <div class="oe_view_manager_sidebar"/>
                 <div class="oe_view_manager_switch oe_button_group">
                     <t t-if="widget.views_src.length != 1" t-foreach="widget.views_src" t-as="view">
                         <button type="button" t-attf-class="oe_vm_switch_#{view.view_type}" t-att-data-view-type="view.view_type" t-att-title="view.label || view.view_type">
@@ -422,6 +424,7 @@
                         </button>
                     </t>
                 </div>
+                <div class="oe_view_manager_pager"/>
             </div>
         </div>
         <div class="oe_view_manager_body">
@@ -682,14 +685,34 @@
         <div class="oe_form_container"/>
     </div>
 </t>
-<t t-name="PageView" t-extend="FormView">
+<t t-name="FormView">
-    <t t-jquery=".oe_form_buttons" t-operation="inner">
+    <div class="oe_formview">
-        <button type="button" class="oe_button oe_form_button_edit">Edit</button>
+        <div class="oe_form_buttons"/>
+        <div class="oe_form_sidebar"/>
+        <div class="oe_form_pager"/>
+        <div class="oe_form_container"/>
+    </div>
+</t>
+<t t-name="FormView.buttons">
+    <div class="oe_form_buttons" t-if="widget.options.action_buttons !== false">
+        view:<button type="button" class="oe_button oe_form_button_edit">Edit</button>
         <button type="button" class="oe_button oe_form_button_create">Create</button>
         <button type="button" class="oe_button oe_form_button_duplicate">Duplicate</button>
         <button type="button" class="oe_button oe_form_button_delete">Delete</button>
-    </t>
+        edit:<button type="button" class="oe_button oe_form_button_save">Save</button>
+        <button type="button" class="oe_button oe_form_button_cancel">Cancel</button>
+    </div>
 </t>
+<t t-name="FormView.pager">
+    <div class="oe_form_pager" t-if="widget.options.pager !== false">
+        <t t-call="ViewPager">
+            <span class="oe_pager_index">0</span><span class="oe_pager_separator"> / </span><span class="oe_pager_count">0</span>
+        </t>
+    </div>
+</t>
+<t t-name="PageView" t-extend="FormView">
+</t>
+
 <t t-name="FormView.sidebar.attachments">
     <div class="oe-sidebar-attachments-toolbar">
         <div class="oe-binary-file-set" style="float: right">