[IMP] lots of layout work for inline search view (addon web)
mainly to correctly style the custom filters list.
This commit is contained in:
Géry Debongnie
parent
646de9e5af
commit
c70df56174
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue