From 7bca56a8c8a2d555ea93cd12c0da207b76645b4f Mon Sep 17 00:00:00 2001
From: Markus Grigull <web@grigull.me>
Date: Tue, 19 Jul 2016 16:45:45 +0200
Subject: [PATCH] Add plots.css

Add grid option to plots.
---
 app/components/plot-abstract.js             | 15 +++++-
 app/components/plot-container.js            |  6 ++-
 app/components/plot-table.js                |  3 +-
 app/components/plot-value.js                |  3 +-
 app/styles/app.css                          | 47 +-----------------
 app/styles/plots.css                        | 55 +++++++++++++++++++++
 app/templates/components/plot-container.hbs |  2 +-
 7 files changed, 79 insertions(+), 52 deletions(-)
 create mode 100644 app/styles/plots.css

diff --git a/app/components/plot-abstract.js b/app/components/plot-abstract.js
index 75efb26..933d85f 100644
--- a/app/components/plot-abstract.js
+++ b/app/components/plot-abstract.js
@@ -3,9 +3,13 @@ import Resizable from '../mixins/resizable';
 import Draggable from '../mixins/draggable';
 
 export default Ember.Component.extend(Resizable, Draggable, {
+  tagName: 'div',
+  classNames: [ 'plotAbstract' ],
   attributeBindings: [ 'style' ],
 
   plot: null,
+  editing: false,
+  grid: false,
 
   disabled_resize: false,
   autoHide_resize: false,
@@ -14,6 +18,7 @@ export default Ember.Component.extend(Resizable, Draggable, {
   disabled_drag: false,
   containment_drag: 'parent',
   grid_drag: [ 10, 10 ],
+  scroll_drag: true,
 
   style: function() {
     return Ember.String.htmlSafe('width: ' + this.get('plot.width') + 'px; height: ' + this.get('plot.height') + 'px; left: ' + this.get('plot.x') + 'px; top: ' + this.get('plot.y') + 'px;');
@@ -42,5 +47,13 @@ export default Ember.Component.extend(Resizable, Draggable, {
       this.set('autoHide_resize', true);
       this.set('disabled_drag', true);
     }
-  }.observes('editing').on('init')
+
+    if (this.get('grid') === true) {
+      this.set('grid_resize', [ 10, 10 ]);
+      this.set('grid_drag', [ 10, 10 ]);
+    } else {
+      this.set('grid_resize', false);
+      this.set('grid_drag', false);
+    }
+  }.observes('editing', 'grid').on('init')
 });
diff --git a/app/components/plot-container.js b/app/components/plot-container.js
index 0461155..3dfba34 100644
--- a/app/components/plot-container.js
+++ b/app/components/plot-container.js
@@ -4,9 +4,10 @@ export default Ember.Component.extend({
   tagName: 'div',
   classNames: [ 'plots' ],
   attributeBindings: [ 'style' ],
-  editing: false,
 
   plots: null,
+  editing: false,
+  grid: true,
 
   style: function() {
     return Ember.String.htmlSafe('height: ' + this._calculateHeight() + 'px;');
@@ -23,6 +24,9 @@ export default Ember.Component.extend({
       }
     });
 
+    // add padding to height
+    maxHeight += 40;
+
     return maxHeight;
   }
 });
diff --git a/app/components/plot-table.js b/app/components/plot-table.js
index a416184..be84e2e 100644
--- a/app/components/plot-table.js
+++ b/app/components/plot-table.js
@@ -1,8 +1,7 @@
 import PlotAbstract from './plot-abstract';
 
 export default PlotAbstract.extend({
-  tagName: 'div',
-  classNames: [ 'plotContainer', 'plotTable' ],
+  classNames: [ 'plotTable' ],
 
   minWidth_resize: 200,
   minHeight_resize: 60
diff --git a/app/components/plot-value.js b/app/components/plot-value.js
index 155ccb9..e36977c 100644
--- a/app/components/plot-value.js
+++ b/app/components/plot-value.js
@@ -1,8 +1,7 @@
 import PlotAbstract from './plot-abstract';
 
 export default PlotAbstract.extend({
-  tagName: 'div',
-  classNames: [ 'plotContainer', 'plotValue' ],
+  classNames: [ 'plotValue' ],
 
   minWidth_resize: 50,
   minHeight_resize: 20
diff --git a/app/styles/app.css b/app/styles/app.css
index 3b45171..b2ae1e3 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -1,3 +1,5 @@
+@import 'plots.css';
+
 * {
   margin: 0;
   padding: 0;
@@ -110,19 +112,6 @@ footer {
 /**
  * Visualization
  */
-.plots {
-  margin-top: 20px;
-  margin-bottom: 20px;
-
-  overflow: visible;
-
-  position: relative;
-}
-
-.plot-toolbox {
-  margin-top: 20px;
-}
-
 .draggableDropzone {
   display: block;
 
@@ -151,35 +140,3 @@ footer {
     background-color: #aaa;
   }
 }
-
-.plotContainer {
-  border: 1px solid lightgray;
-
-  margin: 10px;
-  padding: 5px 10px;
-
-  /*display: inline-block;*/
-
-  /*position: absolute;*/
-}
-
-.plotValue {
-  position: absolute;
-}
-
-.plotTable {
-  position: absolute;
-
-  width: 100%;
-  /*height: 100%;*/
-
-  border: 1px solid gray;
-
-  border-collapse: collapse;
-}
-
-.plotTable td, th {
-  border: 1px solid gray;
-
-  padding: 2px 5px;
-}
diff --git a/app/styles/plots.css b/app/styles/plots.css
new file mode 100644
index 0000000..061ed34
--- /dev/null
+++ b/app/styles/plots.css
@@ -0,0 +1,55 @@
+/**
+ * Component: plot-container
+ */
+.plots {
+  overflow: scroll;
+
+  position: relative;
+}
+
+/**
+ * Component: plot-toolbox
+ */
+.plot-toolbox {
+  margin: 20px 0;
+}
+
+/**
+ * Component: plot-abstract
+ */
+.plotAbstract {
+  border: 1px solid lightgray;
+
+  margin: 10px;
+  padding: 5px 10px;
+
+  position: absolute;
+}
+
+/**
+ * Component: plot-value
+ */
+.plotValue {
+
+}
+
+/**
+ * Component: plot-table
+ */
+.plotTable {
+
+}
+
+.plotTable table {
+  width: 100%;
+  /*height: 100%;*/
+
+  border: 1px solid gray;
+  border-collapse: collapse;
+}
+
+.plotTable td, th {
+  border: 1px solid gray;
+
+  padding: 2px 5px;
+}
diff --git a/app/templates/components/plot-container.hbs b/app/templates/components/plot-container.hbs
index 883eed7..2c29da4 100644
--- a/app/templates/components/plot-container.hbs
+++ b/app/templates/components/plot-container.hbs
@@ -1,3 +1,3 @@
 {{#each plots as |plot|}}
-  {{component plot.type plot=plot editing=editing}}
+  {{component plot.type plot=plot editing=editing grid=grid}}
 {{/each}}