more styling of the searchview

bzr revid: mit@openerp.com-20120525170053-54m17it6lzwnea33

4 files changed, 99 insertions, 52 deletions

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index a77ea87bf4e..183c0b2212e 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -1,4 +1,4 @@
-@charset "utf-8";
+@charset "UTF-8";
 @font-face {
   font-family: "mnmliconsRegular";
   src: url("/web/static/src/font/mnmliconsv21-webfont.eot") format("eot");
@@ -1350,6 +1350,11 @@
   border-top: none;
   margin: 0;
 }
+.openerp .oe_searchview .oe_searchview_drawer h3 {
+  margin: 8px 4px 4px 12px;
+  color: #8786b7;
+  font-size: 13px;
+}
 .openerp .oe_searchview .oe_searchview_drawer h4, .openerp .oe_searchview .oe_searchview_drawer h4 * {
   margin: 0;
   cursor: pointer;
@@ -1377,28 +1382,23 @@
   -webkit-border-radius: 0;
   border-radius: 0;
 }
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_filters {
+.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_section {
   display: table;
   width: 100%;
 }
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_filters > div {
+.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_section > div {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   display: table-cell;
   width: 50%;
 }
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_filters h3 {
-  margin: 8px 4px 4px 12px;
-  color: #8786b7;
-  font-size: 13px;
-}
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_filters ul {
+.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_filters li {
+.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_section li {
   list-style: none;
   padding: 2px 4px 2px 20px;
   line-height: 14px;
@@ -1406,7 +1406,7 @@
   cursor: pointer;
   position: relative;
 }
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_filters li.oe_selected:before {
+.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_section li.oe_selected:before {
   content: "W";
   font-family: "entypoRegular" !important;
   font-size: 24px;
@@ -1416,20 +1416,27 @@
   left: 4px;
   top: -2px;
 }
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_filters li:hover {
+.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_section li:hover {
   background-color: #f0f0fa;
 }
+.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_section form {
+  margin-left: 12px;
+}
+.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_section form p {
+  margin: 4px 0;
+  line-height: 18px;
+}
+.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_section form button {
+  margin: 0 0 8px 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: 1.2em;
-  padding: 2px 20px 2px 25px;
-}
-.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_custom li.oe_searchview_custom_private {
-  background: url(/web/static/src/img/icons/terp-locked.png) 5px center no-repeat;
+  line-height: 14px;
+  padding: 2px 4px 2px 20px;
 }
 .openerp .oe_searchview .oe_searchview_drawer .oe_searchview_custom li:hover {
   background-color: #f0f0fa;
@@ -1441,6 +1448,7 @@
 }
 .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";
@@ -1454,6 +1462,7 @@
   padding: 0;
 }
 .openerp .oe_searchview .oe_searchview_drawer .oe_searchview_advanced li {
+  position: relative;
   list-style: none;
   margin: 0;
   white-space: nowrap;
@@ -1466,16 +1475,28 @@
 .openerp .oe_searchview .oe_searchview_drawer .oe_opened form {
   display: block;
 }
+.openerp .oe_searchview .oe_searchview_drawer .oe_searchview_custom_delete {
+  position: absolute;
+  left: 4px;
+  top: 3px;
+}
 .openerp .oe_searchview .oe_searchview_drawer .oe_searchview_custom_delete, .openerp .oe_searchview .oe_searchview_drawer .searchview_extended_delete_prop {
-  font-size: 1px;
-  letter-spacing: -1px;
-  color: transparent;
+  width: 12px;
+  height: 12px;
+  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:before, .openerp .oe_searchview .oe_searchview_drawer .searchview_extended_delete_prop:before {
-  font-family: "mnmliconsRegular";
-  content: "d";
-  font-size: 20px;
-  color: #404040;
+.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_view_nocontent > img {
   float: left;
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index 9fedeed6a51..eadb99c8353 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -1067,6 +1067,10 @@ $colour4: #8a89ba
             > div:first-child
                 border-top: none
                 margin: 0
+            h3
+                margin: 8px 4px 4px 12px
+                color: $section-title-color
+                font-size: 13px
             h4, h4 *
                 margin: 0
                 cursor: pointer
@@ -1085,17 +1089,13 @@ $colour4: #8a89ba
                 padding: 0 2px
                 @include box-shadow(none)
                 @include radius(0)
-            .oe_searchview_filters
+            .oe_searchview_section
                 display: table
                 width: 100%
                 > div
                     @include unscrew-box
                     display: table-cell
                     width: 50%
-                h3
-                    margin: 8px 4px 4px 12px
-                    color: $section-title-color
-                    font-size: 13px
                 ul
                     margin: 0 8px 8px
                     padding: 0
@@ -1119,16 +1119,21 @@ $colour4: #8a89ba
                     // 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 0
             .oe_searchview_custom
                 form
                     display: none
                 li
                     cursor: pointer
                     position: relative
-                    line-height: 1.2em
-                    padding: 2px 20px 2px 25px
-                    &.oe_searchview_custom_private
-                        background: url(/web/static/src/img/icons/terp-locked.png) 5px center no-repeat
+                    line-height: 14px
+                    padding: 2px 4px 2px 20px
                     &:hover
                         background-color: $hover-background
                     button
@@ -1138,6 +1143,7 @@ $colour4: #8a89ba
             .oe_searchview_advanced
                 form
                     display: none
+                    margin-top: 8px
 
                 button.oe_add_condition:before
                     content: "Z"
@@ -1149,6 +1155,7 @@ $colour4: #8a89ba
                     list-style: none
                     padding: 0
                 li
+                    position: relative
                     list-style: none
                     margin: 0
                     white-space: nowrap
@@ -1161,8 +1168,24 @@ $colour4: #8a89ba
                     display: block
 
             // delete buttons
+            .oe_searchview_custom_delete
+                position: absolute
+                left: 4px
+                top: 3px
             .oe_searchview_custom_delete, .searchview_extended_delete_prop
-                @include text-to-icon("d")
+                width: 12px
+                height: 12px
+                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)
     // }}}
     // Views Common {{{
     .oe_view_nocontent
diff --git a/addons/web/static/src/js/search.js b/addons/web/static/src/js/search.js
index c70cf2ab470..9ccb41e1c3f 100644
--- a/addons/web/static/src/js/search.js
+++ b/addons/web/static/src/js/search.js
@@ -1564,15 +1564,14 @@ instance.web.search.CustomFilters = instance.web.search.Input.extend({
                                          : 'oe_searchview_custom_public')
                 .text(filter.name);
 
-            $('<button type="button" class="oe_searchview_custom_delete">')
-                .text(_t("Delete"))
+            $('<a class="oe_searchview_custom_delete">x</a>')
                 .click(function (e) {
                     e.stopPropagation();
                     self.model.call('unlink', [id]).then(function () {
                         $filter.remove();
                     });
                 })
-                .appendTo($filter);
+                .prependTo($filter);
         }
 
         $filter.unbind('click').click(function () {
@@ -1643,7 +1642,7 @@ instance.web.search.Filters = instance.web.search.Input.extend({
         var col1 = [], col2 = _(this.view.controls).map(function (inputs, group) {
             var filters = _(inputs).filter(is_group);
             return {
-                name: group === 'null' ? _t("Filters") : group,
+                name: group === 'null' ? _t("<span class='oe_i'>q</span> Filters") : "<span class='oe_i'>w</span> " + group,
                 filters: filters,
                 length: _(filters).chain().map(function (i) {
                     return i.filters.length; }).sum().value()
@@ -1666,7 +1665,7 @@ instance.web.search.Filters = instance.web.search.Input.extend({
     },
     render_column: function (column, $el) {
         return $.when.apply(null, _(column).map(function (group) {
-            $('<h3>').text(group.name).appendTo($el);
+            $('<h3>').html(group.name).appendTo($el);
             return $.when.apply(null,
                 _(group.filters).invoke('appendTo', $el));
         }));
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index e73b0983951..6c191984e97 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1475,19 +1475,23 @@
         </t>
     </t>
 </t>
-<div t-name="SearchView.Filters" class="oe_searchview_filters">
+<div t-name="SearchView.Filters" class="oe_searchview_section">
 
 </div>
-<div t-name="SearchView.CustomFilters" class="oe_searchview_custom">
-    <ul class="oe_searchview_custom_list"/>
-    <h4 class="oe_searchview_custom_title">
-        <label for="oe_searchview_custom_input">Save search</label></h4>
-    <form>
-        <input id="oe_searchview_custom_input" placeholder="Search name"/>
-        <label for="oe_searchview_custom_public">Share with all users:</label>
-        <input id="oe_searchview_custom_public" type="checkbox"/><br/>
-        <button>Save</button><br/>
-    </form>
+<div t-name="SearchView.CustomFilters" class="oe_searchview_section">
+    <div>
+        <h3><span class="oe_i">M</span> Custom Filters</h3>
+        <ul class="oe_searchview_custom_list"/>
+    </div>
+    <div>
+        <h3>Save current search</h3>
+        <form>
+          <p><input id="oe_searchview_custom_input" placeholder="Search name"/></p>
+          <p><input id="oe_searchview_custom_public" type="checkbox"/>
+            <label for="oe_searchview_custom_public">Share with all users</label></p>
+          <button>Save</button>
+        </form>
+    </div>
 </div>
 <div t-name="SearchView.advanced" class="oe_searchview_advanced">
     <h4>Advanced Search</h4>
@@ -1512,7 +1516,7 @@
         </select>
         <select class="searchview_extended_prop_op"/>
         <span class="searchview_extended_prop_value"/>
-        <button type="button" class="searchview_extended_delete_prop button">Delete</button>
+        <a class="searchview_extended_delete_prop button">x</a>
     </li>
 </t>
 <t t-name="SearchView.extended_search.proposition.char">