Button added. Behaviour almost finished. We need to set the mps publi…

…sh event

app/assets/javascripts/compare/presenters/CompareGridButtonBoxPresenter.js

@@ -0,0 +1,30 @@
+define([
+  'backbone',
+  'mps',
+  'compare/presenters/PresenterClass',
+], function(Backbone, mps, PresenterClass) {
+
+  'use strict';
+
+  var CompareSelectorsPresenter = PresenterClass.extend({
+
+    init: function(view) {
+      this._super();
+      this.view = view;
+    },
+
+    /**
+     * Application subscriptions.
+     */
+    _subscriptions: [],
+
+    showIndicatorModal: function() {
+      // mps publish an event that makes the indicator modal show
+      console.log("Let's show the indicator modal")
+    }
+
+  });
+
+  return CompareSelectorsPresenter;
+
+});

app/assets/javascripts/compare/templates/compareGridButtonBox.handlebars

@@ -0,0 +1 @@
+<button class="addIndicators btn medium blue">Customize indicators</button>

app/assets/javascripts/compare/views/CompareIndexView.js

@@ -4,7 +4,8 @@ define([
   'compare/views/index/CompareGridView',
   'compare/views/index/CompareModalView',
   'compare/views/index/CompareFixedHeaderView',
-], function(Backbone, CompareSelectorsView, CompareGridView, CompareModalView, CompareFixedHeaderView) {
+  'compare/views/index/CompareGridButtonBoxView',
+], function(Backbone, CompareSelectorsView, CompareGridView, CompareModalView, CompareFixedHeaderView, CompareGridButtonBoxView) {
 
   var CompareIndexView = Backbone.View.extend({
 
@@ -13,6 +14,7 @@ define([
       new CompareGridView();
       new CompareModalView();
       new CompareFixedHeaderView();
+      new CompareGridButtonBoxView();
     }
 
   });

app/assets/javascripts/compare/views/index/CompareGridButtonBoxView.js

@@ -0,0 +1,36 @@
+define([
+  'backbone',
+  'compare/presenters/CompareGridButtonBoxPresenter',
+  'text!compare/templates/compareGridButtonBox.handlebars',
+], function(Backbone, CompareGridButtonBoxPresenter, tpl) {
+
+  var CompareGridButtonBoxView = Backbone.View.extend({
+
+    el: '#compareGridButtonBox',
+
+    template: Handlebars.compile(tpl),
+
+    events: {
+      'click .addIndicators' : 'showIndicatorModal'
+    },
+
+    initialize:function() {
+      this.presenter = new CompareGridButtonBoxPresenter(this);
+      this.render();
+    },
+
+    render: function() {
+      this.$el.html(this.template());
+    },
+
+    // Events
+    showIndicatorModal: function(e) {
+      e && e.preventDefault();
+      this.presenter.showIndicatorModal();
+    }
+
+  });
+
+  return CompareGridButtonBoxView;
+
+});

app/assets/stylesheets/modules/compare/_m-compare-grid-button-box.scss

@@ -0,0 +1,5 @@
+.m-compare-grid-button-box {
+  display: flex;
+  flex-direction: row-reverse;
+  padding: 0 0 50px;
+}

app/views/compare/index.html.slim

@@ -34,6 +34,7 @@ section.l-compare-countries
 
     .l-main-content
       .inner
-        #compareGridView
+        .m-compare-grid-button-box#compareGridButtonBox
+        .m-compare-grid#compareGridView
 
     .l-cutpoint#offsetBottom