odoo
/
odoo
2
0
Fork 0
Code Pull Requests Releases Activity

[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.
This commit is contained in:
Géry Debongnie 2014-05-21 13:18:30 +02:00
parent cc64d1d318
commit aec3ba08ae
4 changed files with 48 additions and 439 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

228
addons/web/static/src/css/base.css
View File

@ -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;
}

186
addons/web/static/src/css/base.sass
View File

@ -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

61
addons/web/static/src/js/search.js
View File

@ -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 $first_col = this.$(".col-md-7"),
$snd_col = this.$(".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));
});
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({

12
addons/web/static/src/xml/base.xml
View File

@ -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">