From f9c3e1cf33a182ba0f8fdfa4e95c6d35897e4de9 Mon Sep 17 00:00:00 2001 From: Offir Golan Date: Tue, 6 Sep 2016 18:03:09 -0700 Subject: [PATCH 1/5] Lots of changes / fixes --- addon/components/cells/base.js | 14 ++++++++-- addon/components/columns/base.js | 14 ++++++++-- addon/components/light-table.js | 9 +++---- addon/components/lt-column-resizer.js | 22 +++++++++++++--- addon/styles/addon.css | 31 ++++++++++++++++++----- addon/templates/components/cells/base.hbs | 2 +- addon/templates/components/lt-body.hbs | 1 + addon/templates/components/lt-row.hbs | 1 + addon/utils/css-styleify.js | 20 +++++++++++++++ ember-cli-build.js | 8 ++++-- package.json | 1 + 11 files changed, 101 insertions(+), 22 deletions(-) create mode 100644 addon/utils/css-styleify.js diff --git a/addon/components/cells/base.js b/addon/components/cells/base.js index 82a24cf2..d07022d9 100644 --- a/addon/components/cells/base.js +++ b/addon/components/cells/base.js @@ -1,5 +1,6 @@ import Ember from 'ember'; import layout from 'ember-light-table/templates/components/cells/base'; +import cssStyleify from 'ember-light-table/utils/css-styleify'; const { Component, @@ -20,16 +21,25 @@ const Cell = Component.extend({ layout, tagName: 'td', classNames: ['lt-cell'], - attributeBindings: ['width'], + attributeBindings: ['style'], classNameBindings: ['align', 'isSorted', 'column.cellClassNames'], - width: computed.readOnly('column.width'), isSorted: computed.readOnly('column.sorted'), + style: computed('column.width', function() { + return cssStyleify(this.get('column').getProperties(['width'])); + }), + align: computed('column.align', function() { return `align-${this.get('column.align')}`; }).readOnly(), + /** + * @property table + * @type {Table} + */ + table: null, + /** * @property column * @type {Column} diff --git a/addon/components/columns/base.js b/addon/components/columns/base.js index 085b16d8..d6b846b8 100644 --- a/addon/components/columns/base.js +++ b/addon/components/columns/base.js @@ -1,5 +1,6 @@ import Ember from 'ember'; import layout from 'ember-light-table/templates/components/columns/base'; +import cssStyleify from 'ember-light-table/utils/css-styleify'; const { Component, @@ -21,20 +22,29 @@ const Column = Component.extend({ layout, tagName: 'th', classNames: ['lt-column'], - attributeBindings: ['width', 'colspan', 'rowspan'], + attributeBindings: ['style', 'colspan', 'rowspan'], classNameBindings: ['align', 'isGroupColumn:lt-group-column', 'isHideable', 'isSortable', 'isSorted', 'isResizable', 'column.classNames'], - width: computed.readOnly('column.width'), isGroupColumn: computed.readOnly('column.isGroupColumn'), isSortable: computed.readOnly('column.sortable'), isSorted: computed.readOnly('column.sorted'), isHideable: computed.readOnly('column.hideable'), isResizable: computed.readOnly('column.resizable'), + style: computed('column.width', function() { + return cssStyleify(this.get('column').getProperties(['width'])); + }), + align: computed('column.align', function () { return `align-${this.get('column.align')}`; }).readOnly(), + /** + * @property table + * @type {Table} + */ + table: null, + /** * @property column * @type {Column} diff --git a/addon/components/light-table.js b/addon/components/light-table.js index 3c096187..407b49d4 100644 --- a/addon/components/light-table.js +++ b/addon/components/light-table.js @@ -1,12 +1,12 @@ import Ember from 'ember'; import layout from 'ember-light-table/templates/components/light-table'; import Table from 'ember-light-table/classes/Table'; +import cssStyleify from 'ember-light-table/utils/css-styleify'; const { assert, Component, - computed, - String:{htmlSafe} + computed } = Ember; /** @@ -102,10 +102,7 @@ const LightTable = Component.extend({ }).readOnly(), style: computed('height', function () { - let height = this.get('height'); - if (height) { - return htmlSafe(`height:${this.get('height')};`); - } + return cssStyleify(this.getProperties(['height'])); }), init() { diff --git a/addon/components/lt-column-resizer.js b/addon/components/lt-column-resizer.js index 820f936c..9983abff 100644 --- a/addon/components/lt-column-resizer.js +++ b/addon/components/lt-column-resizer.js @@ -9,8 +9,8 @@ export default Ember.Component.extend({ layout, classNameBindings: [':lt-column-resizer', 'isResizing'], column: null, - isResizing: false, + isResizing: false, startWidth: null, startX: null, @@ -31,8 +31,16 @@ export default Ember.Component.extend({ $(document).off('mouseup', this.__mouseUp); }, + click(e) { + /* + Prevent click events from propagating (i.e. onColumnClick) + */ + e.preventDefault(); + e.stopPropagation(); + }, + mouseDown(e) { - const $column = $(this.get('element')).parent('th'); + const $column = this._getColumn(); e.preventDefault(); e.stopPropagation(); @@ -49,7 +57,10 @@ export default Ember.Component.extend({ e.preventDefault(); e.stopPropagation(); + const $column = this._getColumn(); + this.set('isResizing', false); + this.set('column.width', `${$column.width()}px`); this.sendAction('columnResized', this.get('column.width')); } }, @@ -59,10 +70,15 @@ export default Ember.Component.extend({ e.preventDefault(); e.stopPropagation(); + const $column = this._getColumn(); const { startX, startWidth } = this.getProperties(['startX', 'startWidth']); const width = startWidth + (e.pageX - startX); - this.set('column.width', `${width}px`); + $column.width(`${width}px`); } + }, + + _getColumn() { + return $(this.get('element')).parent('th'); } }); diff --git a/addon/styles/addon.css b/addon/styles/addon.css index 72121db6..03809468 100644 --- a/addon/styles/addon.css +++ b/addon/styles/addon.css @@ -1,8 +1,13 @@ .ember-light-table { height: inherit; overflow: auto; + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; } .ember-light-table table { @@ -29,13 +34,22 @@ .ember-light-table .lt-head-wrap, .ember-light-table .lt-foot-wrap { - flex: 0 1 auto; + -webkit-box-flex: 0; + -ms-flex: 0 1 auto; + flex: 0 1 auto; } .ember-light-table .lt-body-wrap { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; - flex: 1 0 auto; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-flex: 1; + -ms-flex: 1 0 auto; + flex: 1 0 auto; } .ember-light-table .lt-column { @@ -44,7 +58,9 @@ .ember-light-table .lt-scrollable { width: 100%; - flex: 1 0 auto; + -webkit-box-flex: 1; + -ms-flex: 1 0 auto; + flex: 1 0 auto; } .ember-light-table .align-left { @@ -65,7 +81,10 @@ .ember-light-table .lt-column.is-sortable { cursor: pointer; - user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } .ember-light-table .lt-column .lt-column-resizer { diff --git a/addon/templates/components/cells/base.hbs b/addon/templates/components/cells/base.hbs index 518efb4e..ede2667c 100644 --- a/addon/templates/components/cells/base.hbs +++ b/addon/templates/components/cells/base.hbs @@ -1,5 +1,5 @@ {{#if column.cellComponent}} - {{component column.cellComponent tableActions=tableActions column=column row=row value=value}} + {{component column.cellComponent tableActions=tableActions table=table column=column row=row value=value}} {{else}} {{value}} {{/if}} diff --git a/addon/templates/components/lt-body.hbs b/addon/templates/components/lt-body.hbs index 64414259..4e4d1f19 100644 --- a/addon/templates/components/lt-body.hbs +++ b/addon/templates/components/lt-body.hbs @@ -12,6 +12,7 @@ {{else}} {{#each rows as |row|}} {{lt-row row columns + table=table tableActions=tableActions canExpand=canExpand canSelect=canSelect diff --git a/addon/templates/components/lt-row.hbs b/addon/templates/components/lt-row.hbs index 249b954d..c2266435 100644 --- a/addon/templates/components/lt-row.hbs +++ b/addon/templates/components/lt-row.hbs @@ -1,5 +1,6 @@ {{#each columns as |column|}} {{component (concat 'light-table/cells/' column.cellType) column row + table=table rawValue=(get row column.valuePath) tableActions=tableActions}} {{/each}} diff --git a/addon/utils/css-styleify.js b/addon/utils/css-styleify.js new file mode 100644 index 00000000..274f724a --- /dev/null +++ b/addon/utils/css-styleify.js @@ -0,0 +1,20 @@ +import Ember from 'ember'; + +const { + isPresent, + String: { dasherize, htmlSafe } +} = Ember; + +export default function cssStyleify(hash = {}) { + let styles = []; + + Object.keys(hash).forEach(key => { + let value = hash[key]; + + if(isPresent(value)) { + styles.push(`${dasherize(key)}: ${hash[key]}`); + } + }); + + return htmlSafe(styles.join('; ')); +} diff --git a/ember-cli-build.js b/ember-cli-build.js index 9d34f512..d515b4cf 100644 --- a/ember-cli-build.js +++ b/ember-cli-build.js @@ -4,8 +4,12 @@ var EmberAddon = require('ember-cli/lib/broccoli/ember-addon'); module.exports = function(defaults) { var app = new EmberAddon(defaults, { - snippetSearchPaths: ['addon','tests/dummy/app'], - snippetPaths: ['snippets','tests/dummy/snippets'] + snippetSearchPaths: ['addon', 'tests/dummy/app'], + snippetPaths: ['snippets', 'tests/dummy/snippets'], + autoprefixer: { + browsers: ['last 2 versions'], + cascade: false + } }); return app.toTree(); diff --git a/package.json b/package.json index 97cf8ee8..1fcc5ace 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "ember-ajax": "2.5.1", "ember-cli": "2.6.3", "ember-cli-app-version": "^2.0.0", + "ember-cli-autoprefixer": "0.6.0", "ember-cli-blanket": "0.9.8", "ember-cli-changelog": "0.3.4", "ember-cli-dependency-checker": "^1.2.0", From a086f85dd78eba30f95bda3cbbcbb961bb9c10c1 Mon Sep 17 00:00:00 2001 From: Offir Golan Date: Tue, 6 Sep 2016 18:05:18 -0700 Subject: [PATCH 2/5] Fix test cases --- tests/integration/components/light-table/cells/base-test.js | 5 +++-- .../integration/components/light-table/columns/base-test.js | 5 +++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/tests/integration/components/light-table/cells/base-test.js b/tests/integration/components/light-table/cells/base-test.js index 82d7fadd..42757fdc 100644 --- a/tests/integration/components/light-table/cells/base-test.js +++ b/tests/integration/components/light-table/cells/base-test.js @@ -1,14 +1,15 @@ import Ember from 'ember'; import { moduleForComponent, test } from 'ember-qunit'; import hbs from 'htmlbars-inline-precompile'; -import { Row, Column} from 'ember-light-table'; +import { Row, Column } from 'ember-light-table'; moduleForComponent('light-table/cells/base', 'Integration | Component | Cells | base', { integration: true }); test('it renders', function(assert) { - this.render(hbs`{{light-table/cells/base}}`); + this.set('column', new Column()); + this.render(hbs`{{light-table/cells/base column=column}}`); assert.equal(this.$().text().trim(), ''); }); diff --git a/tests/integration/components/light-table/columns/base-test.js b/tests/integration/components/light-table/columns/base-test.js index c3ea0cc5..0020468a 100644 --- a/tests/integration/components/light-table/columns/base-test.js +++ b/tests/integration/components/light-table/columns/base-test.js @@ -1,5 +1,6 @@ import { moduleForComponent, test } from 'ember-qunit'; import hbs from 'htmlbars-inline-precompile'; +import { Column } from 'ember-light-table'; moduleForComponent('light-table/columns/base', 'Integration | Component | Columns | base', { integration: true @@ -8,7 +9,7 @@ moduleForComponent('light-table/columns/base', 'Integration | Component | Column test('it renders', function(assert) { // Set any properties with this.set('myProperty', 'value'); // Handle any actions with this.on('myAction', function(val) { ... });" - - this.render(hbs`{{light-table/columns/base}}`); + this.set('column', new Column()); + this.render(hbs`{{light-table/columns/base column=column}}`); assert.equal(this.$().text().trim(), ''); }); From 36f29b2180b5bf546dd3d3177ed9ddd41bdb96b2 Mon Sep 17 00:00:00 2001 From: Offir Golan Date: Tue, 6 Sep 2016 18:07:52 -0700 Subject: [PATCH 3/5] Pass rawValue to custom component --- addon/templates/components/cells/base.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addon/templates/components/cells/base.hbs b/addon/templates/components/cells/base.hbs index ede2667c..fb9a3167 100644 --- a/addon/templates/components/cells/base.hbs +++ b/addon/templates/components/cells/base.hbs @@ -1,5 +1,5 @@ {{#if column.cellComponent}} - {{component column.cellComponent tableActions=tableActions table=table column=column row=row value=value}} + {{component column.cellComponent tableActions=tableActions table=table column=column row=row value=value rawValue=rawValue}} {{else}} {{value}} {{/if}} From 0c22b8981527edbeb4459080ffd6bf2ac04b18ad Mon Sep 17 00:00:00 2001 From: Offir Golan Date: Tue, 6 Sep 2016 18:08:42 -0700 Subject: [PATCH 4/5] Remove readOnly from value --- addon/components/cells/base.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addon/components/cells/base.js b/addon/components/cells/base.js index d07022d9..02d0908a 100644 --- a/addon/components/cells/base.js +++ b/addon/components/cells/base.js @@ -75,7 +75,7 @@ const Cell = Component.extend({ return format.call(this, rawValue); } return rawValue; - }).readOnly() + }) }); Cell.reopenClass({ From 070328af331411260ca328eb3aac35a7e6c0ff11 Mon Sep 17 00:00:00 2001 From: offirgolan Date: Wed, 7 Sep 2016 10:43:41 -0700 Subject: [PATCH 5/5] Use value --- addon/utils/css-styleify.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addon/utils/css-styleify.js b/addon/utils/css-styleify.js index 274f724a..24797a4b 100644 --- a/addon/utils/css-styleify.js +++ b/addon/utils/css-styleify.js @@ -12,7 +12,7 @@ export default function cssStyleify(hash = {}) { let value = hash[key]; if(isPresent(value)) { - styles.push(`${dasherize(key)}: ${hash[key]}`); + styles.push(`${dasherize(key)}: ${value}`); } });