diff options
| author | Olivier Dony <odo@openerp.com> | 2012-10-01 16:53:08 +0200 |
|---|---|---|
| committer | Olivier Dony <odo@openerp.com> | 2012-10-01 16:53:08 +0200 |
| commit | 9e6920415e41a052cffa7b898bf044dbf82b5ccb (patch) | |
| tree | 05e8d64788da1ff9f65e7406e3ff3d96d58a5762 /addons/web_graph/static | |
| parent | 4ed79f3457a0252dcee4780385dc474ff2af356e (diff) | |
| parent | 1370ae133d4477d0a7a2239732f529a1eef39824 (diff) | |
[MERGE] Sync with trunk
bzr revid: odo@openerp.com-20121001145308-ri5rp2cazxqxcxme
Diffstat (limited to 'addons/web_graph/static')
| -rw-r--r-- | addons/web_graph/static/src/css/graph.css | 78 | ||||
| -rw-r--r-- | addons/web_graph/static/src/js/graph.js | 35 | ||||
| -rw-r--r-- | addons/web_graph/static/src/xml/web_graph.xml | 43 |
3 files changed, 89 insertions, 67 deletions
diff --git a/addons/web_graph/static/src/css/graph.css b/addons/web_graph/static/src/css/graph.css index 7e01346cc3a..f3e69c4687a 100644 --- a/addons/web_graph/static/src/css/graph.css +++ b/addons/web_graph/static/src/css/graph.css @@ -1,9 +1,12 @@ -.dropdown-menu-icon { - z-index: 5000; +.openerp a.dropdown-menu-icon { + z-index: 10; position: absolute; - right: 0px; + color: #4c4c4c; + right: 8px; +} +.openerp a.dropdown-menu-icon:hover { + text-decoration: none; } - .editor-render { position: relative; } @@ -12,33 +15,64 @@ width: 650px; height: 350px; } -.graph-dropdown { - padding: 5px; - width: 200px; - border: 1px #333 solid; +.openerp .graph-dropdown { display: none; position: absolute; - right: 0px; - background: #fafaf5; - z-index: 100; + top: 32px; + right: 8px; + padding: 8px; + border: 1px solid #afafb6; + background: white; + z-index: 900; + min-width: 160px; + overflow-x: hidden; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + -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 .graph-dropdown h3 { + margin: 8px 4px 4px 0; + color: #8786b7; + font-size: 13px; } -.open .graph-dropdown { +.openerp .graph-menu > li > a { + position: relative; + display: block; + padding: 2px 4px 2px 20px; + line-height: 14px; + color: #4c4c4c; + text-decoration: none; +} +.openerp .graph-menu > li > a:hover { + text-decoration: none; + background: #f0f0fa; + background: -moz-linear-gradient(#f0f0fa, #eeeef6); + background: -webkit-gradient(linear, left top, left bottom, from(#f0f0fa), to(#eeeef6)); + background: -webkit-linear-gradient(#f0f0fa, #eeeef6); + -moz-box-shadow: none; + -webkit-box-shadow: none; + -box-shadow: none; +} +.openerp .open .graph-dropdown { display: block; } .graph-menu { padding: 3px; } -.graph-menu .active { - background: #aaaaff; +.graph-menu .active:before { + content: "W"; + font-family: "entypoRegular" !important; + font-size: 24px; + font-weight: 300 !important; + color: #a3a3a3; + position: absolute; + left: 4px; + top: -2px; } -li { +.graph-menu li { padding: 2px; margin-left: 10px; } -a .graph-menu-options { - color: white; -} -div .graph-menu-options { - float: right; - top: 0px; -} diff --git a/addons/web_graph/static/src/js/graph.js b/addons/web_graph/static/src/js/graph.js index 52162285f27..b82b1521e87 100644 --- a/addons/web_graph/static/src/js/graph.js +++ b/addons/web_graph/static/src/js/graph.js @@ -53,19 +53,20 @@ instance.web_graph.GraphView = instance.web.View.extend({ // TODO: move to load_view and document var self = this; this.fields_view = fields_view_get; + this.$el.addClass(this.fields_view.arch.attrs['class']); this.mode = this.fields_view.arch.attrs.type || 'bar'; this.orientation = this.fields_view.arch.attrs.orientation == 'horizontal'; - var width = this.$element.parent().width(); - this.$element.css("width", width); - this.container = this.$element.find("#editor-render-body").css({ + var width = this.$el.parent().width(); + this.$el.css("width", width); + this.container = this.$el.find("#editor-render-body").css({ width: width, height: Math.min(500, width * 0.8) })[0]; var graph_render = this.proxy('graph_render'); - this.$element.on('click', '.oe_graph_options a', function (evt) { + this.$el.on('click', '.oe_graph_options a', function (evt) { var $el = $(evt.target); self.graph_render({data: filter_values({ @@ -76,18 +77,18 @@ instance.web_graph.GraphView = instance.web.View.extend({ })}); }); - this.$element.find("#graph_show_data").click(function () { + this.$el.find("#graph_show_data").click(function () { self.spreadsheet = ! self.spreadsheet; self.graph_render(); }); - this.$element.find("#graph_switch").click(function () { + this.$el.find("#graph_switch").click(function () { if (self.mode != 'radar') { self.orientation = ! self.orientation; } self.graph_render(); }); - this.$element.find("#graph_download").click(function () { + this.$el.find("#graph_download").click(function () { if (self.legend == "top") { self.legend = "inside"; } self.forcehtml = true; @@ -109,7 +110,7 @@ instance.web_graph.GraphView = instance.web.View.extend({ switch (this.legend) { case 'top': legend.noColumns = 4; - legend.container = this.$element.find("div.graph_header_legend")[0]; + legend.container = this.$el.find("div.graph_header_legend")[0]; break; case 'inside': legend.position = 'nw'; @@ -141,9 +142,11 @@ instance.web_graph.GraphView = instance.web.View.extend({ options_bar: function (data) { var min = _(data.data).chain() .map(function (record) { - return _.min(record.data, function (item) { - return item[1]; - })[1]; + if (record.data.length > 0){ + return _.min(record.data, function (item) { + return item[1]; + })[1]; + } }).min().value(); return { bars : { @@ -256,24 +259,24 @@ instance.web_graph.GraphView = instance.web.View.extend({ } // Render the graph - this.$element.find(".graph_header_legend").children().remove(); + this.$el.find(".graph_header_legend").children().remove(); this.graph = this.make_graph(this.mode, this.container, data); // Update styles of menus - this.$element.find("a").removeClass("active"); + this.$el.find("a").removeClass("active"); - var $active = this.$element.find('a[data-mode=' + this.mode + ']'); + var $active = this.$el.find('a[data-mode=' + this.mode + ']'); if ($active.length > 1) { $active = $active.filter('[data-stacked=' + this.stacked + ']'); } $active = $active.add( - this.$element.find('a:not([data-mode])[data-legend=' + this.legend + ']')); + this.$el.find('a:not([data-mode])[data-legend=' + this.legend + ']')); $active.addClass('active'); if (this.spreadsheet) { - this.$element.find("#graph_show_data").addClass("active"); + this.$el.find("#graph_show_data").addClass("active"); } return this.graph; }, diff --git a/addons/web_graph/static/src/xml/web_graph.xml b/addons/web_graph/static/src/xml/web_graph.xml index 5cdd0d46ee1..e2e316b22d9 100644 --- a/addons/web_graph/static/src/xml/web_graph.xml +++ b/addons/web_graph/static/src/xml/web_graph.xml @@ -1,48 +1,33 @@ <template> - <div t-name="GraphView" id="element-chart" class="editor-render" style="position:relative; width: 300px;"> + <div t-name="GraphView" id="element-chart" class="oe_semantic_html_override editor-render" style="position:relative; width: 300px;"> + <a href="#" class="oe_e dropdown-menu-icon" data-toggle="dropdown" title="Graph Options">&iacute;</a> <div class="graph_header_legend"> </div> - <a href="#" class="oe_i dropdown-menu-icon" data-toggle="dropdown" title="Graph Options">B</a> <div class="graph-dropdown"> - <div class="menu-section"> - Graph Mode: - </div> + <h3 class="menu-section"> + Graph Mode + </h3> <ul class="graph-menu oe_graph_options"> <li><a href="#" data-mode="pie">Pie</a></li> - <li> - <a href="#" data-mode="bar" data-legend="top" - data-stacked="true">Bars</a> - <div class="oe_i graph-menu-options"> - <a href="#" data-mode="bar" data-legend="top" - data-stacked="true" title="Stacked Bars">w</a> - <a href="#" data-mode="bar" data-legend="top" - data-stacked="false" title="Multiple Bars">O</a> - </div> + <li><a href="#" data-mode="bar" data-legend="top" data-stacked="true">Bars</a> </li> <li><a href="#" data-mode="line">Lines</a></li> - <li><a href="#" data-mode="area" data-legend="top" - data-stacked="true">Areas</a> - <div class="oe_i graph-menu-options"> - <a href="#" data-mode="area" data-legend="top" - data-stacked="true" title="Stacked Areas">w</a> - <a href="#" data-mode="area" data-legend="top" - data-stacked="false" title="Multiple Areas">O</a> - </div> + <li><a href="#" data-mode="area" data-legend="top" data-stacked="true">Areas</a> </li> <li><a href="#" data-mode="radar" data-legend="inside" data-orientation="0">Radar</a></li> </ul> - <div class="menu-section"> - Legend: - </div> + <h3 class="menu-section"> + Legend + </h3> <ul class="graph-menu oe_graph_options"> - <li><a href="#" data-legend="no">Hide</a></li> + <li><a href="#" data-legend="no">Hidden</a></li> <li><a href="#" data-legend="inside">Inside</a></li> <li><a href="#" data-legend="top">Top</a></li> </ul> - <div class="menu-section"> - Actions: - </div> + <h3 class="menu-section"> + Actions + </h3> <ul class="graph-menu"> <li><a href="#" id="graph_switch">Switch Axis</a></li> <li><a href="#" id="graph_show_data">Show Data</a></li> |
