Permalink
Browse files

Add the ability to resize and toggle columns

- To resize a column drag its border.
- To show/hide a column right click the table's header and toggle that column.

Resizes and showing/hiding of columns are cached so they will persist any time the inspector is reopened.
  • Loading branch information...
1 parent d26bce0 commit 37ed25a9a3eb3fabd4a43d22f1802849a92fe93a @teddyzeenny teddyzeenny committed Aug 9, 2016
Showing with 1,939 additions and 447 deletions.
  1. +21 −0 app/components/container-instance.js
  2. +8 −0 app/components/deprecation-item-source.js
  3. +44 −5 app/components/drag-handle.js
  4. +33 −2 app/components/draggable-column.js
  5. +4 −4 app/components/promise-item.js
  6. +23 −8 app/components/record-item.js
  7. +9 −2 app/components/route-item.js
  8. +22 −20 app/components/view-item.js
  9. +124 −0 app/components/x-list-cell.js
  10. +61 −5 app/components/x-list-content.js
  11. +224 −10 app/components/x-list.js
  12. +17 −1 app/controllers/container-type.js
  13. +66 −9 app/controllers/records.js
  14. +19 −0 app/helpers/build-style.js
  15. +16 −0 app/helpers/one-way.js
  16. +16 −0 app/helpers/schema-for.js
  17. +369 −0 app/libs/resizable-columns.js
  18. +105 −0 app/mixins/row-events.js
  19. +23 −4 app/routes/application.js
  20. +0 −6 app/routes/container-type.js
  21. +0 −6 app/routes/records.js
  22. +14 −0 app/schemas/info-list.js
  23. +22 −0 app/schemas/promise-tree.js
  24. +15 −0 app/schemas/render-tree.js
  25. +26 −0 app/schemas/route-tree.js
  26. +30 −0 app/schemas/view-tree.js
  27. +15 −0 app/services/layout.js
  28. +63 −0 app/services/local-storage.js
  29. +1 −0 app/styles/app.scss
  30. +11 −0 app/styles/context_menu.scss
  31. +4 −0 app/styles/drag_handle.scss
  32. +61 −35 app/styles/list.scss
  33. +17 −17 app/templates/components/deprecation-item.hbs
  34. +1 −1 app/templates/components/draggable-column.hbs
  35. +37 −37 app/templates/components/promise-item.hbs
  36. +2 −2 app/templates/components/record-item.hbs
  37. +7 −7 app/templates/components/render-item.hbs
  38. +10 −10 app/templates/components/route-item.hbs
  39. +12 −12 app/templates/components/view-item.hbs
  40. +1 −0 app/templates/components/x-list-cell.hbs
  41. +10 −0 app/templates/components/x-list-content.hbs
  42. +36 −0 app/templates/components/x-list.hbs
  43. +8 −10 app/templates/container-type.hbs
  44. +20 −17 app/templates/deprecations.hbs
  45. +9 −20 app/templates/info.hbs
  46. +13 −31 app/templates/promise-tree.hbs
  47. +15 −19 app/templates/records.hbs
  48. +10 −21 app/templates/render-tree.hbs
  49. +12 −34 app/templates/route-tree.hbs
  50. +8 −32 app/templates/view-tree.hbs
  51. +11 −0 app/utils/compare-arrays.js
  52. +2 −1 bower.json
  53. +2 −0 ember-cli-build.js
  54. +4 −2 ember_debug/data-debug.js
  55. +2 −2 ember_debug/deprecation-debug.js
  56. +5 −5 ember_debug/libs/source-map.js
  57. +2 −0 package.json
  58. +5 −4 tests/acceptance/{container_test.js → container-test.js}
  59. +12 −12 tests/acceptance/data-test.js
  60. +13 −13 tests/acceptance/promise-test.js
  61. +0 −1 tests/acceptance/render-tree-test.js
  62. +10 −14 tests/acceptance/route-tree-test.js
  63. +5 −5 tests/acceptance/view-tree-test.js
  64. +10 −0 tests/unit/build-style-test.js
  65. +1 −1 tests/unit/{check_current_route_test.js → check-current-route-test.js}
  66. +161 −0 tests/unit/resizable-columns-test.js
@@ -0,0 +1,21 @@
+/**
+ * This component is used to wrap every row in the container
+ * instances template.
+ *
+ * The main purpose for this component is to use the `RowEvents`
+ * mixin so we can send `on-click` events when a row is clicked.
+ *
+ * Since it has no tag it has no effect on the DOM hierarchy.
+ */
+import Ember from 'ember';
+import RowEventsMixin from 'ember-inspector/mixins/row-events';
+const { Component } = Ember;
+export default Component.extend(RowEventsMixin, {
+ /**
+ * No tag
+ *
+ * @property tagName
+ * @type {String}
+ */
+ tagName: ''
+});
@@ -3,6 +3,14 @@ const { Component, computed } = Ember;
const { bool, readOnly, and } = computed;
export default Component.extend({
+ /**
+ * No tag.
+ *
+ * @property tagName
+ * @type {String}
+ */
+ tagName: '',
+
known: bool('model.map.source'),
url: computed('model.map.source', 'model.map.line', 'known', function() {
@@ -1,15 +1,52 @@
import Ember from "ember";
-const { computed, String: { htmlSafe } } = Ember;
+const { computed, String: { htmlSafe }, K } = Ember;
export default Ember.Component.extend({
classNames: ['drag-handle'],
- classNameBindings: ['isLeft:drag-handle--left', 'isRight:drag-handle--right', 'class'],
+ classNameBindings: ['isLeft:drag-handle--left', 'isRight:drag-handle--right', 'faded:drag-handle--faded'],
attributeBindings: ['style'],
position: 0,
side: '',
isRight: Ember.computed.equal('side', 'right'),
isLeft: Ember.computed.equal('side', 'left'),
minWidth: 60,
+ /**
+ * The maximum width this handle can be dragged to.
+ *
+ * @property maxWidth
+ * @type {Number}
+ * @default Infinity
+ */
+ maxWidth: Infinity,
+
+ /**
+ * The left offset to add to the initial position.
+ *
+ * @property left
+ * @type {Number}
+ * @default 0
+ */
+ left: 0,
+
+ /**
+ * Modifier added to the class to fade the drag handle.
+ *
+ * @property faded
+ * @type {Boolean}
+ * @default false
+ */
+ faded: false,
+
+ /**
+ * Action to trigger whenever the drag handle is moved.
+ * Pass this action through the template.
+ *
+ * @property on-drag
+ * @type {Function}
+ * @default Ember.K
+ */
+ 'on-drag': K,
+
startDragging() {
let $container = this.$().parent();
let $containerOffsetLeft = $container.offset().left;
@@ -23,8 +60,10 @@ export default Ember.Component.extend({
e.pageX - $containerOffsetLeft :
$containerOffsetRight - e.pageX;
- if (position >= this.get('minWidth')) {
+ position -= this.get('left');
+ if (position >= this.get('minWidth') && position <= this.get('maxWidth')) {
this.set('position', position);
+ this.get('on-drag')(position);
}
})
.on(`mouseup.${namespace} mouseleave.${namespace}`, () => {
@@ -47,10 +86,10 @@ export default Ember.Component.extend({
return false;
},
- style: computed('side', 'position', function () {
+ style: computed('side', 'position', 'left', function () {
let string;
if (this.get('side')) {
- string = `${this.get('side')}: ${this.get('position')}px;`;
+ string = `${this.get('side')}: ${(this.get('position') + this.get('left'))}px;`;
} else {
string = '';
}
@@ -3,17 +3,48 @@
// A wrapper for a resizable-column and a drag-handle component
import Ember from "ember";
-
-const { Component } = Ember;
+const { Component, inject } = Ember;
+const { service } = inject;
export default Component.extend({
tagName: '', // Prevent wrapping in a div
side: 'left',
minWidth: 60,
setIsDragging: 'setIsDragging',
+
+ /**
+ * Injected `layout` service. Used to broadcast
+ * changes the layout of the app.
+ *
+ * @property layout
+ * @type {Service}
+ */
+ layout: service(),
+
+ /**
+ * Trigger that the application dimensions have changed due to
+ * something being dragged/resized such as the main nav or the
+ * object inspector.
+ *
+ * @method triggerResize
+ */
+ triggerResize() {
+ this.get('layout').trigger('resize', { source: 'draggable-column' });
+ },
+
actions: {
setIsDragging(isDragging) {
this.sendAction('setIsDragging', isDragging);
+ },
+
+ /**
+ * Action called whenever the draggable column has been
+ * resized.
+ *
+ * @method didDrag
+ */
+ didDrag() {
+ this.triggerResize();
}
}
});
@@ -48,14 +48,14 @@ export default Component.extend({
relevant = this.get('model').matchesExactly(this.get('effectiveSearch'));
}
if (!relevant) {
- return htmlSafe('opacity: 0.3;');
+ return 'opacity: 0.3;';
} else {
- return htmlSafe('');
+ return '';
}
}),
- labelStyle: computed('model.level', function() {
- return htmlSafe(`padding-left: ${+this.get('model.level') * 20 + 5}px;`);
+ labelStyle: computed('model.level', 'nodeStyle', function() {
+ return htmlSafe(`padding-left: ${+this.get('model.level') * 20 + 5}px;${this.get('nodeStyle')}`);
}),
expandedClass: computed('hasChildren', 'model.isExpanded', function() {
@@ -1,15 +1,35 @@
import Ember from 'ember';
+import RowEventsMixin from 'ember-inspector/mixins/row-events';
const { Component, computed, String: { htmlSafe }, isEmpty } = Ember;
const COLOR_MAP = {
red: '#ff2717',
blue: '#174fff',
green: '#006400'
};
-export default Component.extend({
+export default Component.extend(RowEventsMixin, {
+ /**
+ * No tag. This component should not affect
+ * the DOM.
+ *
+ * @property tagName
+ * @type {String}
+ * @default ''
+ */
+ tagName: '',
+
modelTypeColumns: null,
- classNames: ['list__row', 'list__row_highlight'],
+ /**
+ * The index of the current row. Currently used for the
+ * `RowEvents` mixin. This property is passed through
+ * the template.
+ *
+ * @property index
+ * @type {Number}
+ * @default null
+ */
+ index: null,
// TODO: Color record based on `color` property.
style: computed('model.color', function() {
@@ -27,10 +47,5 @@ export default Component.extend({
columns: computed('modelTypeColumns.[]', 'model.columnValues', function() {
let columns = this.get('modelTypeColumns') || [];
return columns.map(col => ({ name: col.name, value: this.get(`model.columnValues.${col.name}`) }));
- }),
-
- click() {
- this.sendAction('inspect', this.get('model'));
- return false;
- }
+ })
});
@@ -6,8 +6,15 @@ export default Component.extend({
// passed as an attribute to the component
currentRoute: null,
- classNames: ['list__row'],
- classNameBindings: ['isCurrent:list__row_highlight'],
+ /**
+ * No tag. This component should not affect
+ * the DOM.
+ *
+ * @property tagName
+ * @type {String}
+ * @default ''
+ */
+ tagName: '',
labelStyle: computed('model.parentCount', function() {
return htmlSafe(`padding-left: ${+this.get('model.parentCount') * 20 + 5}px;`);
@@ -1,16 +1,36 @@
import Ember from "ember";
+import RowEventsMixin from 'ember-inspector/mixins/row-events';
const { computed, Component, String: { htmlSafe } } = Ember;
const { not, bool } = computed;
-export default Component.extend({
- classNames: ['list__row'],
+export default Component.extend(RowEventsMixin, {
+ /**
+ * No tag. This component should not affect
+ * the DOM.
+ *
+ * @property tagName
+ * @type {String}
+ * @default ''
+ */
+ tagName: '',
hasView: not('model.value.isVirtual'),
hasElement: not('model.value.isVirtual'),
hasModel: bool('model.value.model'),
hasController: bool('model.value.controller'),
+ /**
+ * The index of the current row. Currently used for the
+ * `RowEvents` mixin. This property is passed through
+ * the template.
+ *
+ * @property index
+ * @type {Number}
+ * @default null
+ */
+ index: null,
+
modelInspectable: computed('hasModel', 'model.value.model.type', function() {
return this.get('hasModel') && this.get('model.value.model.type') === 'type-ember-object';
}),
@@ -19,24 +39,6 @@ export default Component.extend({
return htmlSafe(`padding-left: ${+this.get('model.parentCount') * 20 + 5}px;`);
}),
- /**
- * @method mouseEnter
- * @param {Object} e event object
- */
- mouseEnter(e) {
- this.sendAction('previewLayer', this.get('model'));
- e.stopPropagation();
- },
-
- /**
- * @method mouseLeave
- * @param {Object} e event object
- */
- mouseLeave(e) {
- this.sendAction('hidePreview', this.get('model'));
- e.stopPropagation();
- },
-
actions: {
inspectView() {
if (this.get('hasView')) {
Oops, something went wrong.

0 comments on commit 37ed25a

Please sign in to comment.