[IMP] web: stat buttons: some CSS fixes + added barchart button
that display a barchart. Whoo. bzr revid: tde@openerp.com-20140408113107-y9zstny6a0ybi38l
This commit is contained in:
Thibault Delavallée
parent
a74eb749ae
commit
a43998c41f
|
|
@ -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");
|
||||
|
|
@ -494,9 +494,17 @@
|
|||
width: 37px;
|
||||
text-align: center;
|
||||
}
|
||||
.openerp .oe_button_box .oe_stat_button .oe_form_field_percent_pie {
|
||||
width: 42px;
|
||||
}
|
||||
.openerp .oe_button_box .oe_stat_button .oe_form_field_bar_chart {
|
||||
width: 42px;
|
||||
}
|
||||
.openerp .oe_button_box .oe_stat_button svg {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: inline;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.openerp .oe_avatar > img {
|
||||
max-height: 90px;
|
||||
|
|
|
|||
|
|
@ -461,9 +461,15 @@ $sheet-padding: 16px
|
|||
padding: 0px 3px
|
||||
width: 37px
|
||||
text-align: center
|
||||
.oe_form_field_percent_pie
|
||||
width: 42px
|
||||
.oe_form_field_bar_chart
|
||||
width: 42px
|
||||
svg
|
||||
width: 38px
|
||||
height: 38px
|
||||
display: inline
|
||||
vertical-align: middle
|
||||
.oe_avatar
|
||||
> img
|
||||
max-height: 90px
|
||||
|
|
|
|||
|
|
@ -2834,10 +2834,10 @@ instance.web.form.FieldPercentPie = instance.web.form.AbstractField.extend({
|
|||
|
||||
svg.innerHTML = "";
|
||||
nv.addGraph(function() {
|
||||
var size=43;
|
||||
var width = 42, height = 42;
|
||||
var chart = nv.models.pieChart()
|
||||
.width(size)
|
||||
.height(size)
|
||||
.width(width)
|
||||
.height(height)
|
||||
.margin({top: 0, right: 0, bottom: 0, left: 0})
|
||||
.donut(true)
|
||||
.showLegend(false)
|
||||
|
|
@ -2850,11 +2850,11 @@ instance.web.form.FieldPercentPie = instance.web.form.AbstractField.extend({
|
|||
.datum([{'x': 'value', 'y': value}, {'x': 'complement', 'y': 100 - value}])
|
||||
.transition()
|
||||
.call(chart)
|
||||
.attr({width:size, height:size});
|
||||
.attr('style', 'width: ' + width + 'px; height:' + height + 'px;');
|
||||
|
||||
d3.select(svg)
|
||||
.append("text")
|
||||
.attr({x: size/2, y: size/2 + 3, 'text-anchor': 'middle'})
|
||||
.attr({x: width/2, y: height/2 + 3, 'text-anchor': 'middle'})
|
||||
.style({"font-size": "10px", "font-weight": "bold"})
|
||||
.text(formatted_value);
|
||||
|
||||
|
|
@ -2864,6 +2864,43 @@ instance.web.form.FieldPercentPie = instance.web.form.AbstractField.extend({
|
|||
}
|
||||
});
|
||||
|
||||
/**
|
||||
The FieldBarChart expectsa list of values (indeed)
|
||||
*/
|
||||
instance.web.form.FieldBarChart = instance.web.form.AbstractField.extend({
|
||||
template: 'FieldBarChart',
|
||||
|
||||
render_value: function() {
|
||||
var value = this.get('value');
|
||||
var svg = this.$('svg')[0];
|
||||
svg.innerHTML = "";
|
||||
nv.addGraph(function() {
|
||||
var width = 34, height = 34;
|
||||
var chart = nv.models.discreteBarChart()
|
||||
.x(function (d) { return d.tooltip })
|
||||
.y(function (d) { return d.value })
|
||||
.width(width)
|
||||
.height(height)
|
||||
.margin({top: 0, right: 0, bottom: 0, left: 0})
|
||||
.tooltips(false)
|
||||
.showValues(false)
|
||||
.transitionDuration(350)
|
||||
.showXAxis(false)
|
||||
.showYAxis(false);
|
||||
|
||||
d3.select(svg)
|
||||
.datum([{key: 'values', values: value}])
|
||||
.transition()
|
||||
.call(chart)
|
||||
.attr('style', 'width: ' + (width + 4) + 'px; height: ' + (height + 8) + 'px;');
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
instance.web.form.FieldSelection = instance.web.form.AbstractField.extend(instance.web.form.ReinitializeFieldMixin, {
|
||||
|
|
@ -5924,8 +5961,10 @@ instance.web.form.StatInfo = instance.web.form.AbstractField.extend({
|
|||
render_value: function() {
|
||||
var options = {
|
||||
value: this.get("value") || 0,
|
||||
text: this.string,
|
||||
};
|
||||
if (! this.node.attrs.nolabel) {
|
||||
options.text = this.string
|
||||
}
|
||||
this.$el.html(QWeb.render("StatInfo", options));
|
||||
},
|
||||
|
||||
|
|
@ -5959,6 +5998,7 @@ instance.web.form.widgets = new instance.web.Registry({
|
|||
'boolean' : 'instance.web.form.FieldBoolean',
|
||||
'float' : 'instance.web.form.FieldFloat',
|
||||
'percentpie': 'instance.web.form.FieldPercentPie',
|
||||
'barchart': 'instance.web.form.FieldBarChart',
|
||||
'integer': 'instance.web.form.FieldFloat',
|
||||
'float_time': 'instance.web.form.FieldFloat',
|
||||
'progressbar': 'instance.web.form.FieldProgressBar',
|
||||
|
|
|
|||
|
|
@ -1208,9 +1208,16 @@
|
|||
</span>
|
||||
</t>
|
||||
<t t-name="FieldPercentPie">
|
||||
<span class="oe_form_field oe_form_field_percent_pie" t-att-style="widget.node.attrs.style">
|
||||
<div class="oe_form_field oe_form_field_percent_pie" t-att-style="widget.node.attrs.style">
|
||||
<svg></svg>
|
||||
</span>
|
||||
<span t-if="widget.string"><t t-esc="widget.string"/></span>
|
||||
</div>
|
||||
</t>
|
||||
<t t-name="FieldBarChart">
|
||||
<div class="oe_form_field oe_form_field_bar_chart" t-att-style="widget.node.attrs.style">
|
||||
<svg></svg>
|
||||
<span t-if="widget.string"><t t-esc="widget.string"/></span>
|
||||
</div>
|
||||
</t>
|
||||
<t t-name="FieldStatus">
|
||||
<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"/>
|
||||
|
|
@ -1380,7 +1387,7 @@
|
|||
t-att-autofocus="widget.node.attrs.autofocus"
|
||||
t-att-accesskey="widget.node.attrs.accesskey">
|
||||
<img t-if="!widget.is_stat_button and widget.node.attrs.icon " t-att-src="_s + widget.node.attrs.icon" width="16" height="16"/>
|
||||
<div t-if="widget.is_stat_button" class="stat_button_icon"><t t-if="widget.icon" t-raw="widget.icon"/></div>
|
||||
<div t-if="widget.is_stat_button and widget.icon" class="stat_button_icon"><t t-raw="widget.icon"/></div>
|
||||
<span t-if="widget.string and !widget.is_stat_button"><t t-esc="widget.string"/></span>
|
||||
<div t-if="widget.string and widget.is_stat_button"><t t-esc="widget.string"/></div>
|
||||
</button>
|
||||
|
|
@ -1956,5 +1963,6 @@
|
|||
<a href="javascript:void(0)"><t t-esc="text"/></a>
|
||||
</t>
|
||||
<t t-name="StatInfo">
|
||||
<strong><t t-esc="value"/></strong><br/><t t-esc="text"/></t>
|
||||
<strong><t t-esc="value"/></strong>
|
||||
<t t-esc="text"/></t>
|
||||
</templates>
|
||||
|
|
|
|||
Loading…
Reference in New Issue