[IMP] graph view integration into view manager header

6 files changed, 53 insertions, 60 deletions

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index b93274afa4a..23f5782300c 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -1084,7 +1084,7 @@
 }
 .openerp .oe-view-manager-header {
   height: 90px;
-  overflow: hidden;
+  overflow: visible;
   border-bottom: 1px solid black;
   display: none;
 }
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index 92b5211e256..e39f04f7559 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -936,7 +936,7 @@ $sheet-padding: 16px
     // ViewManager common {{{
     .oe-view-manager-header
         height: 90px
-        overflow: hidden
+        overflow: visible
         border-bottom: 1px solid black
         display: none
         .oe-right-toolbar
diff --git a/addons/web/static/src/js/search.js b/addons/web/static/src/js/search.js
index e28b1185357..c07a82620a9 100644
--- a/addons/web/static/src/js/search.js
+++ b/addons/web/static/src/js/search.js
@@ -440,7 +440,7 @@ instance.web.SearchView = instance.web.Widget.extend(/** @lends instance.web.Sea
         if (view_manager) {
             this.view_manager = view_manager;
             view_manager.on('switch_mode', this, function (e) {
-                self.drawer.toggle(e === 'graph');
+                self.drawer.toggle(false);
             });
         }
         return $.when(p, this.ready);
diff --git a/addons/web_graph/static/src/js/graph_view.js b/addons/web_graph/static/src/js/graph_view.js
index a892f348511..dd4ba800245 100644
--- a/addons/web_graph/static/src/js/graph_view.js
+++ b/addons/web_graph/static/src/js/graph_view.js
@@ -31,10 +31,16 @@ instance.web_graph.GraphView = instance.web.View.extend({
             get_domain: function () {},
             get_groupby: function () {},
         };
-
+        this.$buttons = options.$buttons;
         this.view_loaded = $.Deferred();
     },
 
+    start: function() {
+        var $buttons = instance.web.qweb.render("graph-view-buttons");
+        this.$buttons.html($buttons);
+        return this._super();
+    },
+
     view_loading: function (fields_view_get) {
         var self = this,
             arch = fields_view_get.arch;
@@ -47,6 +53,7 @@ instance.web_graph.GraphView = instance.web.View.extend({
             row_groupby: [],
             col_groupby: [],
             graph_view: this,
+            $buttons: this.$buttons
         };
 
         _.each(arch.children, function (field) {
diff --git a/addons/web_graph/static/src/js/graph_widget.js b/addons/web_graph/static/src/js/graph_widget.js
index 97a5ad66d4e..fc1ed4a9296 100644
--- a/addons/web_graph/static/src/js/graph_widget.js
+++ b/addons/web_graph/static/src/js/graph_widget.js
@@ -26,6 +26,7 @@ openerp.web_graph.Graph = openerp.web.Widget.extend({
         this.graph_view = options.graph_view || null;
         this.pivot_options = options;
         this.title = options.title || 'Data';
+        this.$buttons = options.$buttons;
     },
 
     start: function() {
@@ -33,6 +34,25 @@ openerp.web_graph.Graph = openerp.web.Widget.extend({
         this.table = $('<table>');
         this.$('.graph_main_content').append(this.table);
 
+        var $pivot_button = this.$buttons.find('.oe-pivot-mode');
+        $pivot_button.click(function () {
+            self.set_mode.bind(self)('pivot');
+        });
+        this.$measure_list = this.$buttons.find('.oe-measure-list');
+
+        var $barchart_button = this.$buttons.find('.oe-bar-mode');
+        $barchart_button.click(function () {
+            self.set_mode.bind(self)('bar');
+        });
+        var $line_chart_button = this.$buttons.find('.oe-line-mode');
+        $line_chart_button.click(function () {
+            self.set_mode.bind(self)('line');
+        });
+        var $pie_chart_button = this.$buttons.find('.oe-pie-mode');
+        $pie_chart_button.click(function () {
+            self.set_mode.bind(self)('pie');
+        });
+
         var indexes = {'pivot': 0, 'bar': 1, 'line': 2, 'chart': 3};
         this.$('.graph_mode_selection label').eq(indexes[this.mode]).addClass('active');
 
@@ -42,7 +62,6 @@ openerp.web_graph.Graph = openerp.web.Widget.extend({
         } else {
             this.$('.graph_main_content').addClass('graph_pivot_mode');
         }
-
         // get search view
         var parent = this.getParent();
         while (!(parent instanceof openerp.web.ViewManager)) {
@@ -142,12 +161,13 @@ openerp.web_graph.Graph = openerp.web.Widget.extend({
     },
 
     add_measures_to_options: function() {
-        this.$('.graph_measure_selection').append(
+        this.$measure_list.append(
         _.map(this.measure_list, function (measure) {
             return $('<li>').append($('<a>').attr('data-choice', measure.field)
                                      .attr('href', '#')
                                      .text(measure.string));
         }));
+        this.$measure_list.find('li').click(this.measure_selection.bind(this));
     },
 
     // ----------------------------------------------------------------------
@@ -281,11 +301,11 @@ openerp.web_graph.Graph = openerp.web.Widget.extend({
 
     put_measure_checkmarks: function () {
         var self = this,
-            measures_li = this.$('.graph_measure_selection a');
-        measures_li.removeClass('oe_selected');
+            measures_li = this.$measure_list.find('li');
+        measures_li.removeClass('active');
         _.each(this.measure_list, function (measure, index) {
             if (_.findWhere(self.pivot.measures, measure)) {
-                measures_li.eq(index).addClass('oe_selected');
+                measures_li.eq(index).addClass('active');
             }
         });
 
diff --git a/addons/web_graph/static/src/xml/web_graph.xml b/addons/web_graph/static/src/xml/web_graph.xml
index 828d184dc24..aac5f2433fd 100644
--- a/addons/web_graph/static/src/xml/web_graph.xml
+++ b/addons/web_graph/static/src/xml/web_graph.xml
@@ -1,59 +1,25 @@
 <templates>
-    <div t-name="GraphWidget" class="graph_widget">
-    	<div class="graph_header">
-
-      <div class="btn-toolbar hidden-print" role="toolbar">
 
-        <div class="btn-group graph_mode_selection" data-toggle="buttons">
-            <label class="btn btn-default" data-mode="pivot" title="Table Mode">
-                <input type="radio" name="modes"/><span class="fa fa-table"></span>
-            </label>
-            <label class="btn btn-default" data-mode="bar" title="Bar Chart">
-                <input type="radio" name="modes"/><span class="fa fa-bar-chart-o"></span>
-            </label>
-            <label class="btn btn-default" data-mode="line" title="Line Chart">
-                <input type="radio" name="modes"/><span class="fa fa-check-square"></span>
-            </label>
-            <label class="btn btn-default" data-mode="pie" title="Pie Chart">
-                <input type="radio" name="modes"/><span class="fa fa-adjust"></span>
-            </label>
+    <t t-name="graph-view-buttons">
+        <div class="btn-group btn-group-sm">
+            <button class="btn btn-default fa fa-table oe-pivot-mode"></button>
+            <button class="btn btn-default fa fa-bar-chart-o oe-bar-mode"></button>
+            <button class="btn btn-default fa fa-line-chart oe-line-mode"></button>
+            <button class="btn btn-default fa fa-pie-chart oe-pie-mode"></button>
         </div>
-
-        <div class="btn-group graph_heatmap" data-toggle="buttons" >
-            <label class="btn btn-default" data-mode="both" title="Heat Map">
-                <input type="radio" name="heatmap"/><span class="fa fa-th"></span>
-            </label>
-            <label class="btn btn-default" data-mode="row" title="Heat Map (rows)">
-                <input type="radio" name="heatmap"/><span class="fa fa-bars"></span>
-            </label>
-            <label class="btn btn-default" data-mode="col" title="Heat Map (columns)">
-                <input type="radio" name="heatmap"/><span class="fa fa-bars fa-rotate-90"></span>
-            </label>
+        <div class="btn-group btn-group-sm">
+            <button class="btn btn-default fa fa-expand oe-pivot"></button>
+            <button class="btn btn-default fa fa-arrows-alt oe-pivot"></button>
+            <button class="btn btn-default fa fa-download oe-pivot"></button>
         </div>
-
-        <div class="btn-group graph_options_selection">
-            <label class="btn btn-default" data-choice="swap_axis" title="Swap Axis">
-                <span class="fa fa-expand"></span>
-            </label>
-            <label class="btn btn-default" data-choice="expand_all" title="Expand All">
-                <span class="fa fa-arrows-alt"></span>
-            </label>
-            <label class="btn btn-default" data-choice="update_values" title="Reload Data">
-                <span class="fa fa-refresh"></span>
-            </label>
-            <label class="btn btn-default" data-choice="export_data" title="Export Data" style="display:none">
-                <span class="fa fa-download"></span>
-            </label>
+        <div class="btn-group btn-group-sm"> 
+            <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+                Measures <span class="caret"/>
+            </button>
+            <ul class="oe-measure-list dropdown-menu"/>
         </div>
-        <div class="btn-group">
-            <label class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-                Measures <span class="caret"></span>
-            </label>
-                <ul class="dropdown-menu graph_measure_selection" role="menu">
-                </ul>
-        </div>
-    </div>
-	</div>
+    </t>
+    <div t-name="GraphWidget" class="graph_widget">
     	<div class="graph_main_content"></div>
     </div>