[styles] Fixes up the markup for integration with style framework

addon/-private/collapse-tree.js

@@ -46,6 +46,17 @@ class TableRowMeta extends EmberObject {
 
   @readOnly('_tree.selectMode') selectMode;
 
+  @computed('selectMode')
+  get canSelect() {
+    let selectMode = this.get('selectMode');
+
+    return (
+      selectMode === SELECT_MODE.MULTIPLE ||
+      selectMode === SELECT_MODE.GROUPING ||
+      selectMode === SELECT_MODE.SINGLE
+    );
+  }
+
   @computed('selectMode')
   get canMultiSelect() {
     let selectMode = this.get('selectMode');
@@ -81,7 +92,7 @@ class TableRowMeta extends EmberObject {
     return isArray(children) && get(children, 'length') > 0;
   }
 
-  @computed('_parentMeta')
+  @computed('_parentMeta.depth')
   get depth() {
     let parentMeta = get(this, '_parentMeta');
 

addon/-private/column-tree.js

@@ -714,7 +714,7 @@ export default class ColumnTree extends EmberObject {
     this._reorderMainIndicator = new MainIndicator(this.container, node.element, bounds);
     this._reorderDropIndicator = new DropIndicator(this.container, node.element, bounds);
 
-    this.container.classList.add('et-unselectable');
+    this.container.classList.add('is-reordering');
   }
 
   updateReorder(node, clientX) {
@@ -762,15 +762,15 @@ export default class ColumnTree extends EmberObject {
       this._nextUpdateScroll = null;
     }
 
-    this.container.classList.remove('et-unselectable');
+    this.container.classList.remove('is-reordering');
 
     this.sendAction('onReorder', get(node, 'column'), get(closestColumn, 'column'));
   }
 
   startResize(node, clientX) {
     this.clientX = clientX;
 
-    this.container.classList.add('et-unselectable');
+    this.container.classList.add('is-resizing');
   }
 
   updateResize(node, clientX) {
@@ -836,7 +836,7 @@ export default class ColumnTree extends EmberObject {
       this._nextUpdateScroll = null;
     }
 
-    this.container.classList.remove('et-unselectable');
+    this.container.classList.remove('is-resizing');
 
     this.sendAction('onResize', get(node, 'column'));
   }

addon/-private/utils/reorder-indicators.js

@@ -1,7 +1,5 @@
 import { getScale, getOuterClientRect, getInnerClientRect } from './element';
 
-const DROP_INDICATOR_WIDTH = 5;
-
 function createElement(mainClass, dimensions) {
   let element = document.createElement('div');
 
@@ -15,32 +13,31 @@ function createElement(mainClass, dimensions) {
 }
 
 class ReorderIndicator {
-  constructor(container, element, bounds, mainClass, width) {
+  constructor(container, element, bounds, mainClass, child) {
     this.container = container;
     this.element = element;
     this.bounds = bounds;
-    this.width = width;
+    this.child = child;
     this.scale = getScale(container);
 
     let scrollTop = this.container.scrollTop;
     let scrollLeft = this.container.scrollLeft;
 
-    let { height: containerHeight, top: containerTop, left: containerLeft } = getInnerClientRect(
-      this.container
-    );
+    let { top: containerTop, left: containerLeft } = getInnerClientRect(this.container);
 
-    let { top: elementTop, left: elementLeft } = getOuterClientRect(this.element);
+    let { top: elementTop, left: elementLeft, width: elementWidth } = getOuterClientRect(
+      this.element
+    );
 
     let top = (elementTop - containerTop) * this.scale + scrollTop;
     let left = (elementLeft - containerLeft) * this.scale + scrollLeft;
-    let height = (containerHeight - (containerTop - elementTop)) * this.scale;
+    let width = elementWidth * this.scale;
 
-    this.indicatorElement = createElement(mainClass, {
-      width,
-      height,
-      top,
-      left,
-    });
+    this.indicatorElement = createElement(mainClass, { top, left, width });
+
+    if (child) {
+      this.indicatorElement.appendChild(child);
+    }
 
     this.container.appendChild(this.indicatorElement);
     this._left = left;
@@ -57,10 +54,12 @@ class ReorderIndicator {
   set left(newLeft) {
     let { leftBound, rightBound } = this.bounds;
 
+    let width = this.indicatorElement.offsetWidth;
+
     if (newLeft < leftBound) {
       newLeft = leftBound;
-    } else if (newLeft + this.width > rightBound) {
-      newLeft = rightBound - this.width;
+    } else if (newLeft + width > rightBound) {
+      newLeft = rightBound - width;
     }
 
     this.indicatorElement.style.left = `${newLeft}px`;
@@ -70,14 +69,15 @@ class ReorderIndicator {
 
 export class MainIndicator extends ReorderIndicator {
   constructor(container, element, bounds) {
-    let width = getOuterClientRect(element).width * getScale(element);
+    // let width = getOuterClientRect(element).width * getScale(element);
+    let child = element.cloneNode(true);
 
-    super(container, element, bounds, 'et-reorder-main-indicator', width);
+    super(container, element, bounds, 'et-reorder-main-indicator', child);
   }
 }
 
 export class DropIndicator extends ReorderIndicator {
   constructor(container, element, bounds) {
-    super(container, element, bounds, 'et-reorder-drop-indicator', DROP_INDICATOR_WIDTH);
+    super(container, element, bounds, 'et-reorder-drop-indicator');
   }
 }

addon/components/ember-td/component.js

@@ -32,6 +32,7 @@ export default class EmberTd extends Component {
   @readOnly('unwrappedApi.rowValue') rowValue;
   @readOnly('unwrappedApi.rowMeta') rowMeta;
 
+  @className
   @equal('columnMeta.index', 0)
   isFirstColumn;
 
@@ -54,6 +55,11 @@ export default class EmberTd extends Component {
   @equal('columnMeta.isFixed', 'right')
   isFixedRight;
 
+  @computed('rowMeta.depth')
+  get depthClass() {
+    return `depth-${this.get('rowMeta.depth')}`;
+  }
+
   @attribute
   @computed('columnMeta.{width,offsetLeft,offsetRight}', 'isFixed')
   get style() {

addon/components/ember-td/template.hbs

@@ -1,25 +1,44 @@
 {{#if isFirstColumn}}
-  {{#if canMultiSelect}}
-    {{-ember-table-private/simple-checkbox
-      data-test-select-row=true
-      checked=rowMeta.isSelected
-      onChange="onSelectionToggled"
-      ariaLabel="Select row"
-    }}
-  {{/if}}
+  <div class="et-cell-container">
+    {{#if canMultiSelect}}
+      <span class="et-toggle-select">
+        {{-ember-table-private/simple-checkbox
+          data-test-select-row=true
+          checked=rowMeta.isSelected
+          onChange="onSelectionToggled"
+          ariaLabel="Select row"
+        }}
+        <span></span>
+      </span>
+    {{/if}}
 
-  {{#if canCollapse}}
-    {{-ember-table-private/simple-checkbox
-      data-test-collapse-row=true
-      checked=rowMeta.isCollapsed
-      onChange="onCollapseToggled"
-      ariaLabel="Collapse row"
-    }}
-  {{/if}}
-{{/if}}
+    {{#if canCollapse}}
+      <span class="et-toggle-collapse et-depth-indent {{depthClass}}">
+        {{-ember-table-private/simple-checkbox
+          data-test-collapse-row=true
+          checked=rowMeta.isCollapsed
+          onChange="onCollapseToggled"
+          ariaLabel="Collapse row"
+        }}
+        <span></span>
+      </span>
+    {{else}}
+      <div class="et-depth-indent et-depth-placeholder {{depthClass}}"></div>
+    {{/if}}
 
-{{#if hasBlock}}
-  {{yield cellValue columnValue rowValue cellMeta columnMeta rowMeta}}
+    <div class="et-cell-content">
+      {{#if hasBlock}}
+        {{yield cellValue columnValue rowValue cellMeta columnMeta rowMeta}}
+      {{else}}
+        {{cellValue}}
+      {{/if}}
+    </div>
+  </div>
 {{else}}
-  {{cellValue}}
+  {{#if hasBlock}}
+    {{yield cellValue columnValue rowValue cellMeta columnMeta rowMeta}}
+  {{else}}
+    {{cellValue}}
+  {{/if}}
 {{/if}}
+

addon/components/ember-th/action-dropdown/component.js

@@ -0,0 +1,24 @@
+import Component from '@ember/component';
+
+import { action } from '@ember-decorators/object';
+import { tagName, classNames } from '@ember-decorators/component';
+import { argument } from '@ember-decorators/argument';
+
+import layout from './template';
+
+@tagName('button')
+@classNames('et-action-dropdown')
+export default class EmberThDropdown extends Component {
+  layout = layout;
+
+  @argument dropdownActions;
+
+  @argument onDropdownAction;
+
+  @action
+  sendDropdownAction(close, ...args) {
+    this.sendAction('onDropdownAction', ...args);
+
+    close();
+  }
+}

addon/components/ember-th/component.js

@@ -37,12 +37,16 @@ export default class EmberTh extends Component {
   /**
     Indicates if this column can be resized.
   */
-  @readOnly('unwrappedApi.enableResize') resizeEnabled;
+  @className('is-resizable')
+  @readOnly('unwrappedApi.enableResize')
+  resizeEnabled;
 
   /**
     Indicates if this column can be reordered.
   */
-  @readOnly('unwrappedApi.enableReorder') reorderEnabled;
+  @className('is-reorderable')
+  @readOnly('unwrappedApi.enableReorder')
+  reorderEnabled;
 
   /**
     Any sorts applied to the table.

addon/components/ember-th/template.hbs

@@ -4,11 +4,11 @@
   {{columnValue.name}}
 
   {{#if isSorted}}
-    <div data-test-sort-indicator class="et-sort-indicator {{if isSortedAsc 'is-ascending' 'is-descending'}}">
+    <span data-test-sort-indicator class="et-sort-indicator {{if isSortedAsc 'is-ascending' 'is-descending'}}">
       {{#if isMultiSorted}}
         {{sortIndex}}
       {{/if}}
-    </div>
+    </span>
   {{/if}}
 {{/if}}
 

addon/components/ember-thead/component.js

@@ -11,6 +11,7 @@ import { computed } from '@ember-decorators/object';
 import { notEmpty } from '@ember-decorators/object/computed';
 import { tagName } from '@ember-decorators/component';
 
+import { closest } from '../../-private/utils/element';
 import { sortMultiple, compareValues } from '../../-private/utils/sort';
 
 import ColumnTree, { RESIZE_MODE, FILL_MODE, WIDTH_CONSTRAINT } from '../../-private/column-tree';
@@ -190,7 +191,7 @@ export default class EmberTHead extends Component {
   didInsertElement() {
     super.didInsertElement(...arguments);
 
-    this._container = this.element.closest('.ember-table');
+    this._container = closest(this.element, '.ember-table');
 
     this.columnTree.registerContainer(this._container);
 

addon/components/ember-tr/component.js

@@ -43,6 +43,10 @@ export default class EmberTableRow extends Component {
   @readOnly('rowMeta.isSelected')
   isSelected;
 
+  @className
+  @readOnly('rowMeta.canSelect')
+  isSelectable;
+
   click(event) {
     let inputParent = closest(event.target, 'input, button, label, a, select');
 

addon/styles/addon.scss

@@ -24,6 +24,22 @@
     }
   }
 
+  th {
+    z-index: 2;
+
+    &:not(.is-fixed-right) {
+      .et-header-resize-area {
+        right: 0;
+      }
+    }
+
+    &.is-fixed-right {
+      .et-header-resize-area {
+        left: 0;
+      }
+    }
+  }
+
   td.is-fixed-left,
   td.is-fixed-right {
     z-index: 3;
@@ -69,6 +85,16 @@
     display: none;
   }
 
+  .et-header-resize-area {
+    cursor: col-resize;
+
+    width: 10px;
+    height: 100%;
+
+    position: absolute;
+    top: 0;
+  }
+
   @media speech {
     .et-sort-toggle {
       display: block;