[IMP] view_form: statusbar with folded selection
bzr revid: chm@openerp.com-20130321124952-kwexraafd2681isg
This commit is contained in:
parent
185b405b96
commit
0cecdac970
|
@ -2158,6 +2158,7 @@
|
|||
}
|
||||
.openerp .oe_form header {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border-bottom: 1px solid #cacaca;
|
||||
padding-left: 2px;
|
||||
background-color: #ededed;
|
||||
|
@ -2630,17 +2631,17 @@
|
|||
background-image: -o-linear-gradient(top, #fcfcfc, #dedede);
|
||||
background-image: linear-gradient(to bottom, #fcfcfc, #dedede);
|
||||
}
|
||||
.openerp ul.oe_form_status li:first-child .label, .openerp ul.oe_form_status_clickable li:first-child .label {
|
||||
.openerp ul.oe_form_status li:first-child .label, .openerp ul.oe_form_status_clickable li:first-child > .label {
|
||||
border-left: 1px solid #cacaca;
|
||||
padding-left: 14px;
|
||||
}
|
||||
.openerp ul.oe_form_status li:last-child, .openerp ul.oe_form_status_clickable li:last-child {
|
||||
border-right: 1px solid #cacaca;
|
||||
}
|
||||
.openerp ul.oe_form_status li:last-child .label, .openerp ul.oe_form_status_clickable li:last-child .label {
|
||||
.openerp ul.oe_form_status li:last-child .label, .openerp ul.oe_form_status_clickable li:last-child > .label {
|
||||
padding-right: 14px;
|
||||
}
|
||||
.openerp ul.oe_form_status li:last-child .arrow, .openerp ul.oe_form_status_clickable li:last-child .arrow {
|
||||
.openerp ul.oe_form_status li:last-child .arrow, .openerp ul.oe_form_status_clickable li:last-child > .arrow {
|
||||
display: none;
|
||||
}
|
||||
.openerp ul.oe_form_status li .label, .openerp ul.oe_form_status_clickable li .label {
|
||||
|
@ -2690,18 +2691,18 @@
|
|||
background-image: -o-linear-gradient(top, #729fcf, #3465a4);
|
||||
background-image: linear-gradient(to bottom, #729fcf, #3465a4);
|
||||
}
|
||||
.openerp ul.oe_form_status li.oe_active .arrow span, .openerp ul.oe_form_status_clickable li.oe_active .arrow span {
|
||||
.openerp ul.oe_form_status li.oe_active .arrow span, .openerp ul.oe_form_status_clickable li.oe_active > .arrow span {
|
||||
background-color: #3465a4;
|
||||
background: -moz-linear-gradient(135deg, #3465a4, #729fcf);
|
||||
background: -o-linear-gradient(135deg, #729fcf, #3465a4);
|
||||
background: -webkit-gradient(linear, left top, right bottom, from(#729fcf), to(#3465a4));
|
||||
background: -ms-linear-gradient(top, #729fcf, #3465a4);
|
||||
}
|
||||
.openerp ul.oe_form_status li.oe_active .label, .openerp ul.oe_form_status_clickable li.oe_active .label {
|
||||
.openerp ul.oe_form_status li.oe_active .label, .openerp ul.oe_form_status_clickable li.oe_active > .label {
|
||||
color: white;
|
||||
text-shadow: 0 1px 1px #729fcf, 0 -1px 1px #3465a4;
|
||||
}
|
||||
.openerp ul.oe_form_status_clickable li {
|
||||
.openerp ul.oe_form_status_clickable > li {
|
||||
cursor: pointer;
|
||||
}
|
||||
.openerp ul.oe_form_status_clickable li:hover {
|
||||
|
@ -2713,10 +2714,10 @@
|
|||
background-image: -o-linear-gradient(top, #e8e8e8, #cacaca);
|
||||
background-image: linear-gradient(to bottom, #e8e8e8, #cacaca);
|
||||
}
|
||||
.openerp ul.oe_form_status_clickable li:hover .label {
|
||||
.openerp ul.oe_form_status_clickable li:hover > .label {
|
||||
text-shadow: 0 -1px 1px #fcfcfc, 0 1px 1px #dedede;
|
||||
}
|
||||
.openerp ul.oe_form_status_clickable li:hover .arrow span {
|
||||
.openerp ul.oe_form_status_clickable li:hover > .arrow span {
|
||||
background-color: #d9d9d9;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#e8e8e8), to(#cacaca));
|
||||
background-image: -webkit-linear-gradient(top, #e8e8e8, #cacaca);
|
||||
|
@ -2725,7 +2726,7 @@
|
|||
background-image: -o-linear-gradient(top, #e8e8e8, #cacaca);
|
||||
background-image: linear-gradient(to bottom, #e8e8e8, #cacaca);
|
||||
}
|
||||
.openerp ul.oe_form_status_clickable li .label {
|
||||
.openerp ul.oe_form_status_clickable li > .label {
|
||||
color: #7c7bad;
|
||||
}
|
||||
.openerp ul.oe_form_status_clickable li.oe_active:hover {
|
||||
|
@ -2737,16 +2738,42 @@
|
|||
background-image: -o-linear-gradient(top, #4c85c2, #284d7d);
|
||||
background-image: linear-gradient(to bottom, #4c85c2, #284d7d);
|
||||
}
|
||||
.openerp ul.oe_form_status_clickable li.oe_active:hover .label {
|
||||
.openerp ul.oe_form_status_clickable li.oe_active:hover > .label {
|
||||
text-shadow: 0 -1px 1px #729fcf, 0 1px 1px #3465a4;
|
||||
}
|
||||
.openerp ul.oe_form_status_clickable li.oe_active:hover .arrow span {
|
||||
.openerp ul.oe_form_status_clickable li.oe_active:hover > .arrow span {
|
||||
background-color: #284d7d;
|
||||
background: -moz-linear-gradient(135deg, #284d7d, #4c85c2);
|
||||
background: -o-linear-gradient(135deg, #4c85c2, #284d7d);
|
||||
background: -webkit-gradient(linear, left top, right bottom, from(#4c85c2), to(#284d7d));
|
||||
background: -ms-linear-gradient(top, #4c85c2, #284d7d);
|
||||
}
|
||||
.openerp ul.oe_form_field_status li.oe_folded .label{
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
.openerp ul.oe_form_field_status li.oe_folded ul{
|
||||
position: absolute;
|
||||
border-top: 1px solid #cacaca;
|
||||
float: none;
|
||||
top: 30px;
|
||||
right: 0;
|
||||
display: none;
|
||||
}
|
||||
.openerp ul.oe_form_field_status li.oe_folded:hover ul{
|
||||
display: block;
|
||||
}
|
||||
.openerp ul.oe_form_field_status li.oe_folded ul li{
|
||||
margin: 0;
|
||||
border-left: 1px solid #cacaca;
|
||||
display: block;
|
||||
}
|
||||
.openerp ul.oe_form_field_status li.oe_folded ul li .label{
|
||||
border: 0;
|
||||
padding-left: 24px;
|
||||
}
|
||||
.openerp ul.oe_form_field_status li.oe_folded ul li:last-child {
|
||||
border-bottom: 1px solid #cacaca;
|
||||
}
|
||||
.openerp .oe_form .oe_form_field_one2many > .oe_view_manager .oe_list_pager_single_page {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
@ -1707,6 +1707,7 @@ $sheet-padding: 16px
|
|||
// FormView.header {{{
|
||||
.oe_form header
|
||||
position: relative
|
||||
z-index: 1
|
||||
border-bottom: 1px solid #cacaca
|
||||
padding-left: 2px
|
||||
@include vertical-gradient(#fcfcfc, #dedede)
|
||||
|
@ -2092,16 +2093,16 @@ $sheet-padding: 16px
|
|||
margin: 0 -18px 0 0
|
||||
padding: 0
|
||||
@include vertical-gradient(#fcfcfc, #dedede)
|
||||
&:first-child .label
|
||||
&:first-child > .label
|
||||
border-left: 1px solid #cacaca
|
||||
padding-left: 14px
|
||||
&:last-child
|
||||
border-right: 1px solid #cacaca
|
||||
.label
|
||||
> .label
|
||||
padding-right: 14px
|
||||
.arrow
|
||||
> .arrow
|
||||
display: none
|
||||
.label
|
||||
> .label
|
||||
color: #4c4c4c
|
||||
text-shadow: 0 1px 1px #fcfcfc, 0 -1px 1px #dedede
|
||||
padding: 7px
|
||||
|
@ -2109,7 +2110,7 @@ $sheet-padding: 16px
|
|||
padding-left: 24px
|
||||
margin: 0
|
||||
position: relative
|
||||
.arrow
|
||||
> .arrow
|
||||
width: 17px
|
||||
display: inline-block
|
||||
vertical-align: top
|
||||
|
@ -2128,9 +2129,9 @@ $sheet-padding: 16px
|
|||
@include transform(rotate(45deg))
|
||||
li.oe_active
|
||||
@include vertical-gradient(#729fcf, #3465a4)
|
||||
.arrow span
|
||||
> .arrow span
|
||||
@include skew-gradient(#729fcf, #3465a4)
|
||||
.label
|
||||
> .label
|
||||
color: white
|
||||
text-shadow: 0 1px 1px #729fcf, 0 -1px 1px #3465a4
|
||||
ul.oe_form_status_clickable
|
||||
|
@ -2138,18 +2139,18 @@ $sheet-padding: 16px
|
|||
cursor: pointer
|
||||
&:hover
|
||||
@include vertical-gradient(darken(#fcfcfc, 8%), darken(#dedede, 8%))
|
||||
.label
|
||||
> .label
|
||||
text-shadow: 0 -1px 1px #fcfcfc, 0 1px 1px #dedede
|
||||
.arrow span
|
||||
> .arrow span
|
||||
@include vertical-gradient(darken(#fcfcfc, 8%), darken(#dedede, 8%))
|
||||
.label
|
||||
> .label
|
||||
color: $link-color
|
||||
li.oe_active
|
||||
&:hover
|
||||
@include vertical-gradient(darken(#729fcf, 10%), darken(#3465a4, 10%))
|
||||
.label
|
||||
> .label
|
||||
text-shadow: 0 -1px 1px #729fcf, 0 1px 1px #3465a4
|
||||
.arrow span
|
||||
> .arrow span
|
||||
@include skew-gradient(darken(#729fcf, 10%), darken(#3465a4, 10%))
|
||||
// }}}
|
||||
// FormView.one2many {{{
|
||||
|
@ -2609,26 +2610,26 @@ div.ui-widget-overlay
|
|||
&:last-child
|
||||
overflow: hidden
|
||||
border-right: 1px solid #cacaca
|
||||
.label
|
||||
> .label
|
||||
padding-right: 14px
|
||||
border-right: none
|
||||
.arrow
|
||||
> .arrow
|
||||
display: inline-block
|
||||
opacity: 0
|
||||
filter: alpha(opacity = 0)
|
||||
border: none
|
||||
width: 0
|
||||
border-right: none
|
||||
.label
|
||||
border-bottom: 1px solid #cacaca
|
||||
background: transparent
|
||||
.arrow
|
||||
span
|
||||
background-color: #fefefe !important
|
||||
> .label
|
||||
border-bottom: 1px solid #cacaca
|
||||
background: transparent
|
||||
> .arrow
|
||||
span
|
||||
background-color: #fefefe !important
|
||||
li.oe_active
|
||||
.label
|
||||
> .label
|
||||
border-bottom: 1px solid #729fcf
|
||||
.arrow span
|
||||
> .arrow span
|
||||
background-color: #729fcf !important
|
||||
|
||||
// jquery ui for ie
|
||||
|
|
|
@ -5263,8 +5263,8 @@ instance.web.form.FieldStatus = instance.web.form.AbstractField.extend({
|
|||
this.options.clickable = this.options.clickable || (this.node.attrs || {}).clickable || false;
|
||||
this.options.visible = this.options.visible || (this.node.attrs || {}).statusbar_visible || false;
|
||||
this.set({value: false});
|
||||
this.selection = [];
|
||||
this.set("selection", []);
|
||||
this.selection = {'unfolded': [], 'folded': []};
|
||||
this.set("selection", {'unfolded': [], 'folded': []});
|
||||
this.selection_dm = new instance.web.DropMisordered();
|
||||
},
|
||||
start: function() {
|
||||
|
@ -5278,7 +5278,7 @@ instance.web.form.FieldStatus = instance.web.form.AbstractField.extend({
|
|||
});
|
||||
this.get_selection();
|
||||
if (this.options.clickable) {
|
||||
this.$el.on('click','li',this.on_click_stage);
|
||||
this.$el.on('click','li:not(.oe_folded)',this.on_click_stage);
|
||||
}
|
||||
if (this.$el.parent().is('header')) {
|
||||
this.$el.after('<div class="oe_clear"/>');
|
||||
|
@ -5293,7 +5293,10 @@ instance.web.form.FieldStatus = instance.web.form.AbstractField.extend({
|
|||
},
|
||||
render_value: function() {
|
||||
var self = this;
|
||||
var content = QWeb.render("FieldStatus.content", {widget: self});
|
||||
var content = QWeb.render("FieldStatus.content", {
|
||||
'widget': self,
|
||||
'value_folded': _.find(self.selection.folded, function(i){return i[0] === self.get('value')})
|
||||
});
|
||||
self.$el.html(content);
|
||||
var colors = JSON.parse((self.node.attrs || {}).statusbar_colors || "{}");
|
||||
var color = colors[self.get('value')];
|
||||
|
@ -5303,15 +5306,8 @@ instance.web.form.FieldStatus = instance.web.form.AbstractField.extend({
|
|||
},
|
||||
calc_domain: function() {
|
||||
var d = instance.web.pyeval.eval('domain', this.build_domain());
|
||||
var domain = []; //if there is no domain defined, fetch all the records
|
||||
|
||||
if (d.length) {
|
||||
domain = ['|',['id', '=', this.get('value')]].concat(d);
|
||||
}
|
||||
|
||||
if (! _.isEqual(domain, this.get("evaluated_selection_domain"))) {
|
||||
this.set("evaluated_selection_domain", domain);
|
||||
}
|
||||
this.set("evaluated_selection_domain", ['&', ['fold', '=', false], '|', ['id', '=', this.get('value')]].concat(d));
|
||||
this.set("evaluated_selection_domain_folded", ['&', ['fold', '!=', false], '|', ['id', '=', this.get('value')]].concat(d));
|
||||
},
|
||||
/** Get the selection and render it
|
||||
* selection: [[identifier, value_to_display], ...]
|
||||
|
@ -5320,18 +5316,24 @@ instance.web.form.FieldStatus = instance.web.form.AbstractField.extend({
|
|||
*/
|
||||
get_selection: function() {
|
||||
var self = this;
|
||||
var selection = [];
|
||||
var selection_unfolded = [];
|
||||
var selection_folded = [];
|
||||
|
||||
var calculation = _.bind(function() {
|
||||
if (this.field.type == "many2one") {
|
||||
var domain = [];
|
||||
var ds = new instance.web.DataSetSearch(this, this.field.relation,
|
||||
self.build_context(), this.get("evaluated_selection_domain"));
|
||||
return ds.read_slice(['name'], {}).then(function (records) {
|
||||
for(var i = 0; i < records.length; i++) {
|
||||
selection.push([records[i].id, records[i].name]);
|
||||
}
|
||||
});
|
||||
var ds_unfold = new instance.web.DataSetSearch(self, self.field.relation, self.build_context(), this.get("evaluated_selection_domain"))
|
||||
.read_slice(['name'], {}).then(function (records) {
|
||||
_.each(records, function (record) {
|
||||
selection_unfolded.push([record.id, record.name]);
|
||||
});
|
||||
});
|
||||
var ds_fold = new instance.web.DataSetSearch(self, self.field.relation, self.build_context(), this.get("evaluated_selection_domain_folded"))
|
||||
.read_slice(['name'], {}).then(function (records) {
|
||||
_.each(records, function (record) {
|
||||
selection_folded.push([record.id, record.name]);
|
||||
});
|
||||
});
|
||||
return $.when(ds_unfold, ds_fold);
|
||||
} else {
|
||||
// For field type selection filter values according to
|
||||
// statusbar_visible attribute of the field. For example:
|
||||
|
@ -5347,6 +5349,7 @@ instance.web.form.FieldStatus = instance.web.form.AbstractField.extend({
|
|||
}
|
||||
}, this);
|
||||
this.selection_dm.add(calculation()).then(function () {
|
||||
var selection = {'unfolded': selection_unfolded, 'folded': selection_folded};
|
||||
if (! _.isEqual(selection, self.get("selection"))) {
|
||||
self.set("selection", selection);
|
||||
}
|
||||
|
|
|
@ -1190,13 +1190,25 @@
|
|||
<ul t-att-class="'oe_form_field_status ' + (widget.options.clickable ? 'oe_form_status_clickable' : 'oe_form_status')" t-att-style="widget.node.attrs.style"/>
|
||||
</t>
|
||||
<t t-name="FieldStatus.content">
|
||||
<t t-foreach="widget.selection" t-as="i">
|
||||
<t t-foreach="widget.selection.unfolded" t-as="i">
|
||||
<li t-att-class="i[0] === widget.get('value') ? 'oe_active' : ''" t-att-data-id="i[0]">
|
||||
<span class="label"><t t-esc="i[1]"/></span>
|
||||
<!-- are you mit ? -->
|
||||
<span class="arrow"><span></span></span>
|
||||
</li>
|
||||
</t>
|
||||
<t t-if="widget.selection.folded.length">
|
||||
<li t-att-class="value_folded ? 'oe_active oe_folded' : 'oe_folded'">
|
||||
<span class="label"> ... </span>
|
||||
<ul>
|
||||
<t t-foreach="widget.selection.folded" t-as="i">
|
||||
<li t-att-class="i[0] === widget.get('value') ? 'oe_active' : ''" t-att-data-id="i[0]">
|
||||
<span class="label"><t t-esc="i[1]"/></span>
|
||||
</li>
|
||||
</t>
|
||||
</ul>
|
||||
</li>
|
||||
</t>
|
||||
</t>
|
||||
<t t-name="FieldBinaryImage">
|
||||
<span class="oe_form_field oe_form_field_image" t-att-style="widget.node.attrs.style">
|
||||
|
|
Loading…
Reference in New Issue