From 7bca56a8c8a2d555ea93cd12c0da207b76645b4f Mon Sep 17 00:00:00 2001 From: Markus Grigull 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}}