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

[IMP] form_view: statusbar improvements 

It now uses the bar_fold field instead of the fold field
to hide the stage.
It now uses bar_color to personnalize the stage.

Added css for oe_bar_1 (still WIP, just for testing purpose)

bzr revid: tde@openerp.com-20131018132259-2kip8723ibr296ri
This commit is contained in:
Thibault Delavallée 2013-10-18 15:22:59 +02:00
parent 3853f642ff
commit fa9f367687
4 changed files with 98 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2717,6 +2717,7 @@
width: 24px;
height: 24px;
display: inline-block;
z-index: 1;
margin-left: -12px;
margin-top: 3px;
box-shadow: -1px 1px 2px rgba(255, 255, 255, 0.2), inset -1px 1px 1px rgba(0, 0, 0, 0.2);
@ -2750,24 +2751,54 @@
padding-left: 14px;
}
.openerp ul.oe_form_status li.oe_active, .openerp ul.oe_form_status_clickable li.oe_active {
background-color: #5382b9;
background-image: -webkit-gradient(linear, left top, left bottom, from(#729fcf), to(#3465a4));
background-image: -webkit-linear-gradient(top, #729fcf, #3465a4);
background-image: -moz-linear-gradient(top, #729fcf, #3465a4);
background-image: -ms-linear-gradient(top, #729fcf, #3465a4);
background-image: -o-linear-gradient(top, #729fcf, #3465a4);
background-image: linear-gradient(to bottom, #729fcf, #3465a4);
background-color: #868686;
background-image: -webkit-gradient(linear, left top, left bottom, from(#9c9c9c), to(#707070));
background-image: -webkit-linear-gradient(top, #9c9c9c, #707070);
background-image: -moz-linear-gradient(top, #9c9c9c, #707070);
background-image: -ms-linear-gradient(top, #9c9c9c, #707070);
background-image: -o-linear-gradient(top, #9c9c9c, #707070);
background-image: linear-gradient(to bottom, #9c9c9c, #707070);
}
.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);
background-color: #707070;
background: -moz-linear-gradient(135deg, #707070, #9c9c9c);
background: -o-linear-gradient(135deg, #9c9c9c, #707070);
background: -webkit-gradient(linear, left top, right bottom, from(#9c9c9c), to(#707070));
background: -ms-linear-gradient(top, #9c9c9c, #707070);
}
.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;
text-shadow: 0 1px 1px #9c9c9c, 0 -1px 1px #707070;
}
.openerp ul.oe_form_status li.oe_bar_1:not(.oe_active), .openerp ul.oe_form_status_clickable li.oe_bar_1:not(.oe_active) {
background: #dc5f59;
background-color: #c02c2c;
background-image: -webkit-gradient(linear, left top, left bottom, from(#df3f3f), to(#a21a1a));
background-image: -webkit-linear-gradient(top, #df3f3f, #a21a1a);
background-image: -moz-linear-gradient(top, #df3f3f, #a21a1a);
background-image: -ms-linear-gradient(top, #df3f3f, #a21a1a);
background-image: -o-linear-gradient(top, #df3f3f, #a21a1a);
background-image: linear-gradient(to bottom, #df3f3f, #a21a1a);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(155, 155, 155, 0.4) inset;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(155, 155, 155, 0.4) inset;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(155, 155, 155, 0.4) inset;
}
.openerp ul.oe_form_status li.oe_bar_1:not(.oe_active) > .arrow span, .openerp ul.oe_form_status_clickable li.oe_bar_1:not(.oe_active) > .arrow span {
background: #dc5f59;
background-color: #c02c2c;
background-image: -webkit-gradient(linear, left top, left bottom, from(#df3f3f), to(#a21a1a));
background-image: -webkit-linear-gradient(top, #df3f3f, #a21a1a);
background-image: -moz-linear-gradient(top, #df3f3f, #a21a1a);
background-image: -ms-linear-gradient(top, #df3f3f, #a21a1a);
background-image: -o-linear-gradient(top, #df3f3f, #a21a1a);
background-image: linear-gradient(to bottom, #df3f3f, #a21a1a);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(155, 155, 155, 0.4) inset;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(155, 155, 155, 0.4) inset;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(155, 155, 155, 0.4) inset;
}
.openerp ul.oe_form_status li.oe_bar_1:not(.oe_active) > .label, .openerp ul.oe_form_status_clickable li.oe_bar_1:not(.oe_active) > .label {
color: white;
text-shadow: none;
}
.openerp ul.oe_form_status_clickable li {
cursor: pointer;
@ -2797,23 +2828,23 @@
color: #7c7bad;
}
.openerp ul.oe_form_status_clickable li.oe_active:hover {
background-color: #3a699f;
background-image: -webkit-gradient(linear, left top, left bottom, from(#4c85c2), to(#284d7d));
background-image: -webkit-linear-gradient(top, #4c85c2, #284d7d);
background-image: -moz-linear-gradient(top, #4c85c2, #284d7d);
background-image: -ms-linear-gradient(top, #4c85c2, #284d7d);
background-image: -o-linear-gradient(top, #4c85c2, #284d7d);
background-image: linear-gradient(to bottom, #4c85c2, #284d7d);
background-color: #6d6d6d;
background-image: -webkit-gradient(linear, left top, left bottom, from(#838383), to(#575757));
background-image: -webkit-linear-gradient(top, #838383, #575757);
background-image: -moz-linear-gradient(top, #838383, #575757);
background-image: -ms-linear-gradient(top, #838383, #575757);
background-image: -o-linear-gradient(top, #838383, #575757);
background-image: linear-gradient(to bottom, #838383, #575757);
}
.openerp ul.oe_form_status_clickable li.oe_active:hover > .label {
text-shadow: 0 -1px 1px #729fcf, 0 1px 1px #3465a4;
text-shadow: 0 -1px 1px #9c9c9c, 0 1px 1px #707070;
}
.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);
background-color: #575757;
background: -moz-linear-gradient(135deg, #575757, #838383);
background: -o-linear-gradient(135deg, #838383, #575757);
background: -webkit-gradient(linear, left top, right bottom, from(#838383), to(#575757));
background: -ms-linear-gradient(top, #838383, #575757);
}
.openerp .oe_form .oe_form_field_one2many > .oe_view_manager .oe_list_pager_single_page {
display: none;

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

@ -2166,6 +2166,7 @@ $sheet-padding: 16px
width: 24px
height: 24px
display: inline-block
z-index: 1
margin-left: -12px
margin-top: 3px
box-shadow: -1px 1px 2px rgba(255,255,255,0.2), inset -1px 1px 1px rgba(0,0,0,0.2)
@ -2185,12 +2186,26 @@ $sheet-padding: 16px
padding-left: 14px
li.oe_active
@include vertical-gradient(#729fcf, #3465a4)
@include vertical-gradient(#9c9c9c, #707070)
> .arrow span
@include skew-gradient(#729fcf, #3465a4)
@include skew-gradient(#9c9c9c, #707070)
> .label
color: white
text-shadow: 0 1px 1px #729fcf, 0 -1px 1px #3465a4
text-shadow: 0 1px 1px #9c9c9c, 0 -1px 1px #707070
li.oe_bar_1:not(.oe_active)
background: #DC5F59
@include vertical-gradient(#df3f3f, #a21a1a)
@include box-shadow((0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(155, 155, 155, 0.4) inset))
> .arrow
span
background: #DC5F59
@include vertical-gradient(#df3f3f, #a21a1a)
@include box-shadow((0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(155, 155, 155, 0.4) inset))
> .label
color: white
text-shadow: none
ul.oe_form_status_clickable
li
cursor: pointer
@ -2204,11 +2219,11 @@ $sheet-padding: 16px
color: $link-color
li.oe_active
&:hover
@include vertical-gradient(darken(#729fcf, 10%), darken(#3465a4, 10%))
@include vertical-gradient(darken(#9c9c9c, 10%), darken(#707070, 10%))
> .label
text-shadow: 0 -1px 1px #729fcf, 0 1px 1px #3465a4
text-shadow: 0 -1px 1px #9c9c9c, 0 1px 1px #707070
> .arrow span
@include skew-gradient(darken(#729fcf, 10%), darken(#3465a4, 10%))
@include skew-gradient(darken(#9c9c9c, 10%), darken(#707070, 10%))
// }}}
// FormView.one2many {{{
.oe_form .oe_form_field_one2many > .oe_view_manager

20
addons/web/static/src/js/view_form.js
View File

@ -5522,16 +5522,24 @@ instance.web.form.FieldStatus = instance.web.form.AbstractField.extend({
if (this.field.type == "many2one") {
return self.get_distant_fields().then(function(fields) {
return new instance.web.DataSetSearch(self, self.field.relation, self.build_context(), self.get("evaluated_selection_domain"))
.read_slice(fields.fold ? ['fold'] : ['id'], {}).then(function (records) {
.read_slice(_.union(_.keys(self.distant_fields), ['id']), {}).then(function (records) {
console.log(records);
var ids = _.pluck(records, 'id');
var ids = _.map(records, function (val) {return val.id;});
// var ids = _.map(records, function (val) {return val.id;});
return self.dataset.name_get(ids).then(function (records_name) {
_.each(records, function (record) {
var name = _.find(records_name, function (val) {return val[0] == record.id;})[1];
if (record.fold && record.id != self.get('value')) {
selection_folded.push([record.id, name]);
var widget_item = {
'id': record.id,
'name': name,
'bar_color': record.bar_color || 0,
'bar_fold': record.bar_fold || false,
}
if (record.bar_fold && record.id != self.get('value')) {
selection_folded.push(widget_item);
} else {
selection_unfolded.push([record.id, name]);
selection_unfolded.push(widget_item);
}
});
});
@ -5563,7 +5571,7 @@ instance.web.form.FieldStatus = instance.web.form.AbstractField.extend({
if (this.distant_fields) {
return $.when(this.distant_fields);
}
return new instance.web.Model(self.field.relation).call("fields_get", [["fold"]]).then(function(fields) {
return new instance.web.Model(self.field.relation).call("fields_get", [["bar_fold", "bar_color"]]).then(function(fields) {
self.distant_fields = fields;
return fields;
});

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

@ -1220,9 +1220,9 @@
<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.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>
<t t-foreach="widget.selection.unfolded" t-as="item">
<li t-attf-class="#{item.bar_color and ('oe_bar_' + item.bar_color)} #{item.id === widget.get('value') and 'oe_active'}" t-att-data-id="item.id">
<span class="label"><t t-esc="item.name"/></span>
<!-- are you mit ? -->
<span class="arrow"><span></span></span>
</li>
@ -1231,9 +1231,9 @@
<li>
<span class="label oe_dropdown_toggle oe_dropdown_arrow">More</span>
<ul class="oe_dropdown_menu">
<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>
<t t-foreach="widget.selection.folded" t-as="item">
<li t-att-class="item.id === widget.get('value') ? 'oe_active' : ''" t-att-data-id="item.id">
<span class="label"><t t-esc="item.name"/></span>
</li>
</t>
</ul>