[IMP] lots of layout work for inline search view (addon web)

mainly to correctly style the custom filters list.

4 files changed, 392 insertions, 26 deletions

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index ade49c3b1fe..085e0d5e08e 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -1780,6 +1780,206 @@
   border-bottom: 1px solid #afafb6;
   overflow: auto;
 }
+.openerp .oe_searchview_drawer {
+  cursor: default;
+  display: none;
+  overflow: hidden;
+  border-bottom: 1px solid #afafb6;
+  border-right: 1px solid #afafb6;
+  text-align: left;
+  padding: 8px 0;
+}
+.openerp .oe_searchview_drawer .badge {
+  font-size: 12px;
+  line-height: 12px;
+}
+.openerp .oe_searchview_drawer > div:first-child {
+  border: none;
+  padding-left: 0;
+}
+.openerp .oe_searchview_drawer > div:first-child li:hover:not(.badge) {
+  background-color: #f0f0fa;
+}
+.openerp .oe_searchview_drawer .col-md-5 {
+  padding-left: 0;
+}
+.openerp .oe_searchview_drawer dl {
+  margin-bottom: 10px;
+}
+.openerp .oe_searchview_drawer dt {
+  color: #7c7bad;
+  font-size: 13px;
+  line-height: 24px;
+}
+.openerp .oe_searchview_drawer dd {
+  line-height: 24px;
+  font-size: 13px;
+  padding-top: 3px;
+}
+.openerp .oe_searchview_drawer h4, .openerp .oe_searchview_drawer h4 * {
+  margin: 0 0 0 2px;
+  padding-left: 20px;
+  cursor: pointer;
+  font-weight: normal;
+  display: inline-block;
+}
+.openerp .oe_searchview_drawer h4:hover, .openerp .oe_searchview_drawer h4 *:hover {
+  background-color: #f0f0fa;
+}
+.openerp .oe_searchview_drawer h4:before {
+  content: "▸ ";
+  color: #a3a3a3;
+}
+.openerp .oe_searchview_drawer button {
+  margin: 4px 0;
+}
+.openerp .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_drawer .oe_searchview_section ul {
+  margin: 0 8px;
+  padding: 0;
+  list-style: none;
+  display: inline;
+}
+.openerp .oe_searchview_drawer .oe_searchview_section li {
+  display: inline-block;
+  cursor: pointer;
+  position: relative;
+  margin-right: 8px;
+}
+.openerp .oe_searchview_drawer form {
+  margin-left: 12px;
+}
+.openerp .oe_searchview_drawer form p {
+  margin: 4px 0;
+  line-height: 18px;
+}
+.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;
+}
+.openerp .oe_searchview_drawer .oe_searchview_custom li {
+  cursor: pointer;
+  position: relative;
+  line-height: 14px;
+  margin-right: 0;
+}
+.openerp .oe_searchview_drawer .oe_searchview_custom li button {
+  position: absolute;
+  top: 0;
+  right: 5px;
+}
+.openerp .oe_searchview_drawer .oe_searchview_custom li a {
+  margin-left: 10px;
+  position: inherit;
+  visibility: hidden;
+  display: inline-block;
+}
+.openerp .oe_searchview_drawer .oe_searchview_custom li span:hover:not(.badge) {
+  background-color: #f0f0fa;
+}
+.openerp .oe_searchview_drawer .oe_searchview_custom li:hover a {
+  visibility: visible;
+}
+.openerp .oe_searchview_drawer .oe_searchview_custom label {
+  font-weight: normal;
+}
+.openerp .oe_searchview_drawer .oe_searchview_dashboard form {
+  display: none;
+  margin-top: 2px;
+}
+.openerp .oe_searchview_drawer .oe_searchview_advanced form {
+  display: none;
+  margin-top: 8px;
+}
+.openerp .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_drawer .oe_searchview_advanced ul {
+  list-style: none;
+  padding: 0;
+}
+.openerp .oe_searchview_drawer .oe_searchview_advanced li {
+  position: relative;
+  list-style: none;
+  margin: 0;
+  white-space: nowrap;
+}
+.openerp .oe_searchview_drawer .oe_searchview_advanced li:first-child .searchview_extended_prop_or {
+  visibility: hidden;
+  margin-left: -14px;
+}
+.openerp .oe_searchview_drawer .oe_searchview_advanced .searchview_extended_prop_or {
+  opacity: 0.5;
+  margin-left: -14px;
+}
+.openerp .oe_searchview_drawer .oe_opened h4:before {
+  content: "▾ ";
+  position: relative;
+  top: -1px;
+}
+.openerp .oe_searchview_drawer .oe_opened form {
+  display: block;
+}
+.openerp .oe_searchview_drawer .oe_searchview_custom_delete, .openerp .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_drawer .oe_searchview_custom_delete:hover, .openerp .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_drawer .oe_searchview_custom_delete {
+  display: none;
+  position: absolute;
+  bottom: 1px;
+  right: 4px;
+}
+.openerp .oe_searchview_drawer .oe_searchview_custom_private:hover .oe_searchview_custom_delete, .openerp .oe_searchview_drawer .oe_searchview_custom_public:hover .oe_searchview_custom_delete {
+  display: inline-block;
+}
+.openerp .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_view_nocontent {
   padding: 15px;
   margin-top: 0;
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index d85b55d854c..9b02b20b82a 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -1461,7 +1461,171 @@ $sheet-padding: 16px
     .oe_searchview_drawer_container
         border-bottom: 1px solid $tag-border
         overflow: auto
+    .oe_searchview_drawer
+        cursor: default
+        display: none
+        overflow: hidden
+        border-bottom: 1px solid $tag-border
+        border-right: 1px solid $tag-border
+        text-align: left
+        padding: 8px 0
+        .badge
+            font-size: 12px
+            line-height: 12px
+        > div:first-child
+            border: none
+            padding-left: 0
+            li:hover:not(.badge)
+                background-color: $hover-background
+        .col-md-5
+            padding-left: 0
+        dl 
+            margin-bottom: 10px
+        dt
+            color: $section-title-color
+            font-size: 13px
+            line-height: 24px
+        dd
+            line-height: 24px
+            font-size: 13px
+            padding-top: 3px
+        h4, h4 *
+            margin: 0 0 0 2px
+            padding-left: 20px
+            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
+            ul
+                margin: 0 8px 
+                padding: 0
+                list-style: none
+                display: inline
+            li
+                display: inline-block
+                cursor: pointer
+                position: relative
+                margin-right: 8px
+        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
+            dt
+                width: 140px
+            dd
+                margin-left: 145px
+            form
+                display: none
+            li
+                cursor: pointer
+                position: relative
+                line-height: 14px
+                margin-right: 0
+                button
+                    position: absolute
+                    top: 0
+                    right: 5px
+                a
+                    margin-left: 10px
+                    position: inherit
+                    visibility: hidden
+                    display: inline-block
+                span:hover:not(.badge)
+                    background-color: $hover-background
+            li:hover a
+                visibility: visible
+            //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
     // }}}
     // Views Common {{{
     .oe_view_nocontent
diff --git a/addons/web/static/src/js/search.js b/addons/web/static/src/js/search.js
index 0bd4c89f002..fa7cc0ce8c0 100644
--- a/addons/web/static/src/js/search.js
+++ b/addons/web/static/src/js/search.js
@@ -1127,7 +1127,7 @@ instance.web.search.FilterGroup = instance.web.search.Input.extend(/** @lends in
      */
     search_change: function () {
         var self = this;
-        var $filters = this.$('> li').removeClass('oe_selected');
+        var $filters = this.$('> li').removeClass('badge');
         var facet = this.view.query.find(_.bind(this.match_facet, this));
         if (!facet) { return; }
         facet.values.each(function (v) {
@@ -1135,7 +1135,7 @@ instance.web.search.FilterGroup = instance.web.search.Input.extend(/** @lends in
             if (i === -1) { return; }
             $filters.filter(function () {
                 return Number($(this).data('index')) === i;
-            }).addClass('oe_selected');
+            }).addClass('badge');
         });
     },
     /**
@@ -1747,7 +1747,7 @@ instance.web.search.CustomFilters = instance.web.search.Input.extend({
         };
     },
     clear_selection: function () {
-        this.$('li.oe_selected').removeClass('oe_selected');
+        this.$('span.badge').removeClass('badge');
     },
     append_filter: function (filter) {
         var self = this;
@@ -1760,12 +1760,13 @@ instance.web.search.CustomFilters = instance.web.search.Input.extend({
         } else {
             var id = filter.id;
             this.filters[key] = filter;
-            $filter = this.$filters[key] = $('<li></li>')
+            $filter = $('<li></li>')
                 .appendTo(this.$('.oe_searchview_custom_list'))
-                .addClass(filter.user_id ? 'oe_searchview_custom_private'
-                                         : 'oe_searchview_custom_public')
                 .toggleClass('oe_searchview_custom_default', filter.is_default)
-                .text(filter.name);
+                .append(this.$filters[key] = $('<span>').text(filter.name));
+
+            this.$filters[key].addClass(filter.user_id ? 'oe_searchview_custom_private'
+                                         : 'oe_searchview_custom_public')
 
             $('<a class="oe_searchview_custom_delete">x</a>')
                 .click(function (e) {
@@ -1782,7 +1783,7 @@ instance.web.search.CustomFilters = instance.web.search.Input.extend({
                 .appendTo($filter);
         }
 
-        $filter.unbind('click').click(function () {
+        this.$filters[key].unbind('click').click(function () {
             self.toggle_filter(filter);
         });
     },
@@ -1792,12 +1793,12 @@ instance.web.search.CustomFilters = instance.web.search.Input.extend({
         });
         if (current) {
             this.view.query.remove(current);
-            this.$filters[this.key_for(filter)].removeClass('oe_selected');
+            this.$filters[this.key_for(filter)].removeClass('badge');
             return;
         }
         this.view.query.reset([this.facet_for(filter)], {
             preventSearch: preventSearch || false});
-        this.$filters[this.key_for(filter)].addClass('oe_selected');
+        this.$filters[this.key_for(filter)].addClass('badge');
     },
     set_filters: function (filters) {
         _(filters).map(_.bind(this.append_filter, this));
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 542a7408f54..93f6ee924f7 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1720,23 +1720,24 @@
 <div t-name="SearchView.Filters" class="oe_searchview_filters oe_searchview_section col-md-7">
 
 </div>
+
 <div t-name="SearchView.CustomFilters" class="oe_searchview_custom oe_searchview_section">
-    <div>
-        <h3><span class="oe_i">M</span> Custom Filters</h3>
-        <ul class="oe_searchview_custom_list"/>
-        <div class="oe_searchview_custom">
-            <h4>Save current filter</h4>
-            <form class="oe_form">
-                <p class="oe_form_required"><input id="oe_searchview_custom_input" placeholder="Filter name"/></p>
-                <p>
-                    <input id="oe_searchview_custom_public" type="checkbox"/>
-                    <label for="oe_searchview_custom_public">Share with all users</label>
-                    <input id="oe_searchview_custom_default" type="checkbox"/>
-                    <label for="oe_searchview_custom_default">Use by default</label>
-                </p>
-                <button>Save</button>
-            </form>
-        </div>
+    <dl class="dl-horizontal">
+        <dt><span class="oe_i">M</span> Custom Filters</dt>
+        <dd><ul class="oe_searchview_custom_list"/></dd>
+    </dl>
+    <div class="oe_searchview_custom">
+        <h4>Save current filter</h4>
+        <form class="oe_form">
+            <p class="oe_form_required"><input id="oe_searchview_custom_input" placeholder="Filter name"/></p>
+            <p>
+                <input id="oe_searchview_custom_public" type="checkbox"/>
+                <label for="oe_searchview_custom_public">Share with all users</label>
+                <input id="oe_searchview_custom_default" type="checkbox"/>
+                <label for="oe_searchview_custom_default">Use by default</label>
+            </p>
+            <button>Save</button>
+        </form>
     </div>
 </div>