[IMP] improvements to inline searchview (web)

this commit splits the widget CustomFilters in two widgets:
CustomReports and SaveFilter.  CustomReports is the widget
displaying the list of reports, and SaveFilter obviously is the
Save Current Filter widget.

The goal was to put the custom reports in the first column and the
Save Current Filter form in the second.

4 files changed, 48 insertions, 439 deletions

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 000a0a0135c..f46a0de5836 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -1556,226 +1556,6 @@
   -webkit-border-radius: 2px;
   border-radius: 2px;
 }
-.openerp .oe_searchview.oe_searchview_open_drawer .oe_searchview_drawer {
-  display: block;
-}
-.openerp .oe_searchview .oe_searchview_drawer {
-  cursor: default;
-  position: absolute;
-  z-index: 2;
-  margin-top: 4px;
-  top: 100%;
-  right: -1px;
-  background-color: white;
-  min-width: 100%;
-  display: none;
-  border: 1px solid #afafb6;
-  text-align: left;
-  -moz-border-radius: 4px;
-  -webkit-border-radius: 4px;
-  border-radius: 4px;
-  -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);
-}
-.openerp .oe_searchview .oe_searchview_drawer > div {
-  border-top: 1px solid #cccccc;
-  margin: 0;
-  padding: 8px;
-}
-.openerp .oe_searchview .oe_searchview_drawer > div:first-child {
-  border-top: none;
-  margin: 0;
-}
-.openerp .oe_searchview .oe_searchview_drawer h3 {
-  margin: 8px 4px 4px 0px;
-  color: #7c7bad;
-  font-size: 13px;
-}
-.openerp .oe_searchview .oe_searchview_drawer h4, .openerp .oe_searchview .oe_searchview_drawer h4 * {
-  margin: 0 0 0 2px;
-  cursor: pointer;
-  font-weight: normal;
-  display: inline-block;
-}
-.openerp .oe_searchview .oe_searchview_drawer h4:hover, .openerp .oe_searchview .oe_searchview_drawer h4 *:hover {
-  background-color: #f0f0fa;
-}
-.openerp .oe_searchview .oe_searchview_drawer h4:before {
-  content: "▸ ";
-  color: #a3a3a3;
-}
-.openerp .oe_searchview .oe_searchview_drawer button {
-  margin: 4px 0;
-}
-.openerp .oe_searchview .oe_searchview_drawer .button {
-  border: none;
-  background: transparent;
-  padding: 0 2px;
-  -moz-box-shadow: none;
-  -webkit-box-shadow: none;
-  box-shadow: none;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_section {
-  display: table;
-  width: 100%;
-}
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_section > div {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-  box-sizing: border-box;
-  display: table-cell;
-  width: 50%;
-  padding-left: 2px;
-}
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_section ul {
-  margin: 0 8px 8px;
-  padding: 0;
-  list-style: none;
-}
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_section li {
-  list-style: none;
-  padding: 2px 4px 2px 20px;
-  line-height: 14px;
-  color: inherit;
-  cursor: pointer;
-  position: relative;
-}
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_section li.oe_selected:before {
-  content: "W";
-  font-family: "entypoRegular" !important;
-  font-size: 24px;
-  font-weight: 300 !important;
-  color: #a3a3a3;
-  position: absolute;
-  left: 4px;
-  top: -2px;
-}
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_section li:hover {
-  background-color: #f0f0fa;
-}
-.openerp .oe_searchview .oe_searchview_drawer form {
-  margin-left: 12px;
-}
-.openerp .oe_searchview .oe_searchview_drawer form p {
-  margin: 4px 0;
-  line-height: 18px;
-}
-.openerp .oe_searchview .oe_searchview_drawer form button {
-  margin: 0 0 8px -3px;
-}
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_custom {
-  padding: 0 8px 8px 8px;
-}
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_custom div {
-  padding: 0;
-}
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_custom div h4 {
-  margin: 0;
-}
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_custom form {
-  display: none;
-}
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_custom li {
-  cursor: pointer;
-  position: relative;
-  line-height: 14px;
-  padding: 2px 4px 2px 20px;
-}
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_custom li:hover {
-  background-color: #f0f0fa;
-}
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_custom li button {
-  position: absolute;
-  top: 0;
-  right: 5px;
-}
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_custom label {
-  font-weight: normal;
-}
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_dashboard form {
-  display: none;
-  margin-top: 2px;
-}
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_advanced form {
-  display: none;
-  margin-top: 8px;
-}
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_advanced button.oe_add_condition:before {
-  content: "Z";
-  font-family: "entypoRegular" !important;
-  font-size: 24px;
-  font-weight: 300 !important;
-  margin-right: 4px;
-}
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_advanced ul {
-  list-style: none;
-  padding: 0;
-}
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_advanced li {
-  position: relative;
-  list-style: none;
-  margin: 0;
-  white-space: nowrap;
-}
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_advanced li:first-child .searchview_extended_prop_or {
-  visibility: hidden;
-  margin-left: -14px;
-}
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_advanced .searchview_extended_prop_or {
-  opacity: 0.5;
-  margin-left: -14px;
-}
-.openerp .oe_searchview .oe_searchview_drawer .oe_opened h4:before {
-  content: "▾ ";
-  position: relative;
-  top: -1px;
-}
-.openerp .oe_searchview .oe_searchview_drawer .oe_opened form {
-  display: block;
-}
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_custom_delete, .openerp .oe_searchview .oe_searchview_drawer .searchview_extended_delete_prop {
-  display: inline-block;
-  width: 12px;
-  height: 12px;
-  line-height: 12px;
-  padding: 1px;
-  color: #8786b7;
-  line-height: 8px;
-  text-align: center;
-  font-weight: bold;
-  text-shadow: 0 1px 1px white;
-}
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_custom_delete:hover, .openerp .oe_searchview .oe_searchview_drawer .searchview_extended_delete_prop:hover {
-  text-decoration: none;
-  color: white;
-  background: #8786b7;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-}
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_custom_delete {
-  display: none;
-  position: absolute;
-  bottom: 1px;
-  right: 4px;
-}
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_custom_private:hover .oe_searchview_custom_delete, .openerp .oe_searchview .oe_searchview_drawer .oe_searchview_custom_public:hover .oe_searchview_custom_delete {
-  display: inline-block;
-}
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_custom_public:after {
-  content: ",";
-  font-family: "entypoRegular" !important;
-  font-size: 22px;
-  font-weight: 300 !important;
-  margin: 0 0 0 4px;
-  padding: 0;
-}
 .openerp .oe_searchview_drawer_container {
   overflow: auto;
 }
@@ -1804,7 +1584,7 @@
   padding-left: 0;
 }
 .openerp .oe_searchview_drawer dl {
-  margin-bottom: 10px;
+  margin-bottom: 0;
 }
 .openerp .oe_searchview_drawer dt {
   color: #7c7bad;
@@ -1866,12 +1646,6 @@
 .openerp .oe_searchview_drawer form button {
   margin: 0 0 8px -3px;
 }
-.openerp .oe_searchview_drawer .oe_searchview_custom dt {
-  width: 140px;
-}
-.openerp .oe_searchview_drawer .oe_searchview_custom dd {
-  margin-left: 145px;
-}
 .openerp .oe_searchview_drawer .oe_searchview_custom form {
   display: none;
 }
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index 9380af85057..18da5a7098c 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -1277,186 +1277,6 @@ $sheet-padding: 16px
                         background: #8786b7
                         text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4)
                         @include radius(2px)
-        &.oe_searchview_open_drawer
-            .oe_searchview_drawer
-                display: block
-
-        .oe_searchview_drawer
-            cursor: default
-            position: absolute
-            z-index: 2
-            // detach drawer from field slightly
-            margin-top: 4px
-            top: 100%
-            right: -1px
-            background-color: white
-            min-width: 100%
-            display: none
-            border: 1px solid $tag-border
-            text-align: left
-            @include radius(4px)
-            @include box-shadow(0 1px 4px rgba(0,0,0,0.3))
-            > div
-                border-top: 1px solid #ccc
-                margin: 0
-                padding: 8px
-            > div:first-child
-                border-top: none
-                margin: 0
-            h3
-                margin: 8px 4px 4px 0px
-                color: $section-title-color
-                font-size: 13px
-            h4, h4 *
-                margin: 0 0 0 2px
-                cursor: pointer
-                font-weight: normal
-                display: inline-block
-                &:hover
-                    background-color: $hover-background
-            h4:before
-                content: "▸ "
-                color: #a3a3a3
-            button
-                margin: 4px 0
-            .button
-                border: none
-                background: transparent
-                padding: 0 2px
-                @include box-shadow(none)
-                @include radius(0)
-            .oe_searchview_section
-                display: table
-                width: 100%
-                > div
-                    @include box-sizing(border)
-                    display: table-cell
-                    width: 50%
-                    padding-left: 2px // Managed padding-left according bootstrap3
-                ul
-                    margin: 0 8px 8px
-                    padding: 0
-                    list-style: none
-                li
-                    list-style: none
-                    padding: 2px 4px 2px 20px
-                    line-height: 14px
-                    color: inherit
-                    cursor: pointer
-                    position: relative
-                    &.oe_selected:before
-                        content: "W"
-                        font-family: "entypoRegular" !important
-                        font-size: 24px
-                        font-weight: 300 !important
-                        color: #a3a3a3
-                        position: absolute
-                        left: 4px
-                        top: -2px
-                    // after oe_selected so background color is not overridden
-                    &:hover
-                        background-color: $hover-background
-            form
-                margin-left: 12px
-                p
-                    margin: 4px 0
-                    line-height: 18px
-                button
-                    margin: 0 0 8px -3px // Managed margin-left according bootstrap3
-            .oe_searchview_custom
-                padding: 0 8px 8px 8px
-                div
-                    padding: 0
-                    h4
-                        margin: 0
-                form
-                    display: none
-                li
-                    cursor: pointer
-                    position: relative
-                    line-height: 14px
-                    padding: 2px 4px 2px 20px
-                    &:hover
-                        background-color: $hover-background
-                    button
-                        position: absolute
-                        top: 0
-                        right: 5px
-                //Customize for searchview label
-                label
-                    font-weight: normal
-                //End of Customize
-            .oe_searchview_dashboard
-                form
-                    display: none
-                    margin-top: 2px
-
-            .oe_searchview_advanced
-                form
-                    display: none
-                    margin-top: 8px
-                button.oe_add_condition:before
-                    content: "Z"
-                    font-family: "entypoRegular" !important
-                    font-size: 24px
-                    font-weight: 300 !important
-                    margin-right: 4px
-                ul
-                    list-style: none
-                    padding: 0
-                li
-                    position: relative
-                    list-style: none
-                    margin: 0
-                    white-space: nowrap
-                    &:first-child .searchview_extended_prop_or
-                        visibility: hidden
-                        margin-left: -14px
-                .searchview_extended_prop_or
-                    opacity: 0.5
-                    margin-left: -14px //Customize 'or' in searchview
-            .oe_opened
-                h4:before
-                    content: "▾ "
-                    position: relative
-                    top: -1px
-                form
-                    display: block
-
-            // delete buttons
-            .oe_searchview_custom_delete, .searchview_extended_delete_prop
-                display: inline-block
-                width: 12px
-                height: 12px
-                line-height: 12px
-                padding: 1px
-                color: #8786b7
-                line-height: 8px
-                text-align: center
-                font-weight: bold
-                text-shadow: 0 1px 1px white
-                &:hover
-                    text-decoration: none
-                    color: white
-                    background: #8786b7
-                    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4)
-                    @include radius(2px)
-            .oe_searchview_custom_delete
-                display: none
-                position: absolute
-                bottom: 1px
-                right: 4px
-            .oe_searchview_custom_private, .oe_searchview_custom_public
-                &:hover
-                    .oe_searchview_custom_delete
-                        display: inline-block
-            .oe_searchview_custom_public:after
-                content: ","
-                font-family: "entypoRegular" !important
-                font-size: 22px
-                font-weight: 300 !important
-                margin: 0 0 0 4px
-                padding: 0
 
     .oe_searchview_drawer_container
         overflow: auto
@@ -1480,7 +1300,7 @@ $sheet-padding: 16px
         .col-md-5
             padding-left: 0
         dl 
-            margin-bottom: 10px
+            margin-bottom: 0
         dt
             color: $section-title-color
             font-size: 13px
@@ -1527,10 +1347,6 @@ $sheet-padding: 16px
             button
                 margin: 0 0 8px -3px // Managed margin-left according bootstrap3
         .oe_searchview_custom
-            dt
-                width: 140px
-            dd
-                margin-left: 145px
             form
                 display: none
             li
diff --git a/addons/web/static/src/js/search.js b/addons/web/static/src/js/search.js
index 2c7ef9948b6..b64b7f21080 100644
--- a/addons/web/static/src/js/search.js
+++ b/addons/web/static/src/js/search.js
@@ -843,19 +843,16 @@ instance.web.SearchViewDrawer = instance.web.Widget.extend({
         // build drawer
         var in_drawer = this.select_for_drawer();
 
-        var self = this;
-        var second_col = $('<div class="col-md-5">');
-
-        var insert_first_col = in_drawer[0].appendTo(this.$el).then(function () {
-            second_col.appendTo(self.$el);
-        }).then(function () {
-            return $.when.apply(null, 
-                _(_.rest(in_drawer)).invoke('appendTo', second_col));
-        });
+        var $first_col = this.$(".col-md-7"),
+            $snd_col = this.$(".col-md-5");
 
-        return $.when.apply(null, _(this.inputs).invoke(
+        var add_custom_reports = in_drawer[0].appendTo($first_col),
+            add_filters = in_drawer[1].appendTo($first_col),
+            add_rest = $.when.apply(null, _(in_drawer.slice(2)).invoke('appendTo', $snd_col)),
+            defaults_fetched = $.when.apply(null, _(this.inputs).invoke(
                 'facet_for_defaults', this.searchview.defaults));
 
+        return $.when(add_custom_reports, add_filters, add_rest, defaults_fetched);
     },
     notify_searchview: function () {
         var defaults = arguments[1];
@@ -943,10 +940,11 @@ instance.web.SearchViewDrawer = instance.web.Widget.extend({
     },
 
     add_common_inputs: function() {
+        // add custom filters to this.inputs
+        this.custom_filters = new instance.web.search.CustomReports(this);
         // add Filters to this.inputs, need view.controls filled
         (new instance.web.search.Filters(this));
-        // add custom filters to this.inputs
-        this.custom_filters = new instance.web.search.CustomFilters(this);
+        (new instance.web.search.SaveFilter(this, this.custom_filters));
         // add Advanced to this.inputs
         (new instance.web.search.Advanced(this));
     },
@@ -1707,12 +1705,12 @@ instance.web.search.ManyToOneField = instance.web.search.CharField.extend({
     }
 });
 
-instance.web.search.CustomFilters = instance.web.search.Input.extend({
-    template: 'SearchView.CustomFilters',
+instance.web.search.CustomReports = instance.web.search.Input.extend({
+    template: 'SearchView.CustomReports',
     _in_drawer: true,
     init: function () {
         this.is_ready = $.Deferred();
-        this._super.apply(this, arguments);
+        this._super.apply(this,arguments);
     },
     start: function () {
         var self = this;
@@ -1727,13 +1725,6 @@ instance.web.search.CustomFilters = instance.web.search.Input.extend({
                 self.clear_selection();
             })
             .on('reset', this.proxy('clear_selection'));
-        this.$el.on('submit', 'form', this.proxy('save_current'));
-        this.$el.on('click', 'input[type=checkbox]', function() {
-            $(this).siblings('input[type=checkbox]').prop('checked', false);
-        });
-        this.$el.on('click', 'h4', function () {
-            self.$el.toggleClass('oe_opened');
-        });
         return this.model.call('get_filters', [this.view.model])
             .then(this.proxy('set_filters'))
             .done(function () { self.is_ready.resolve(); })
@@ -1843,6 +1834,26 @@ instance.web.search.CustomFilters = instance.web.search.Input.extend({
     set_filters: function (filters) {
         _(filters).map(_.bind(this.append_filter, this));
     },
+});
+
+instance.web.search.SaveFilter = instance.web.search.Input.extend({
+    template: 'SearchView.SaveFilter',
+    _in_drawer: true,
+    init: function (parent, custom_reports) {
+        this._super(parent);
+        this.custom_reports = custom_reports;
+    },
+    start: function () {
+        var self = this;
+        this.model = new instance.web.Model('ir.filters');
+        this.$el.on('submit', 'form', this.proxy('save_current'));
+        this.$el.on('click', 'input[type=checkbox]', function() {
+            $(this).siblings('input[type=checkbox]').prop('checked', false);
+        });
+        this.$el.on('click', 'h4', function () {
+            self.$el.toggleClass('oe_opened');
+        });
+    },
     save_current: function () {
         var self = this;
         var $name = this.$('input:first');
@@ -1879,14 +1890,16 @@ instance.web.search.CustomFilters = instance.web.search.Input.extend({
             // FIXME: current context?
             return self.model.call('create_or_replace', [filter]).done(function (id) {
                 filter.id = id;
-                self.append_filter(filter);
+                if (self.custom_reports) {
+                    self.custom_reports.append_filter(filter);
+                }
                 self.$el
                     .removeClass('oe_opened')
                     .find('form')[0].reset();
             });
         });
         return false;
-    }
+    },
 });
 
 instance.web.search.Filters = instance.web.search.Input.extend({
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 93f6ee924f7..e9ade4d14a5 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1562,6 +1562,8 @@
 </div>
 
 <div t-name="SearchViewDrawer" class="oe_searchview_drawer" style="display:none;">
+    <div class="col-md-7"></div>
+    <div class="col-md-5"></div>
 </div>
 
 <div t-name="SearchView.InputView"
@@ -1717,15 +1719,19 @@
         </div>
     </div>
 </t>
-<div t-name="SearchView.Filters" class="oe_searchview_filters oe_searchview_section col-md-7">
+<div t-name="SearchView.Filters" class="oe_searchview_filters oe_searchview_section">
 
 </div>
 
-<div t-name="SearchView.CustomFilters" class="oe_searchview_custom oe_searchview_section">
+
+<div t-name="SearchView.CustomReports" class="oe_searchview_custom oe_searchview_section">
     <dl class="dl-horizontal">
-        <dt><span class="oe_i">M</span> Custom Filters</dt>
+        <dt><span class="oe_i">M</span> Custom Reports</dt>
         <dd><ul class="oe_searchview_custom_list"/></dd>
     </dl>
+</div>
+
+ <div t-name="SearchView.SaveFilter">
     <div class="oe_searchview_custom">
         <h4>Save current filter</h4>
         <form class="oe_form">