Remove isDragging from application controller

isDragging was used to keep the col-resize cursor active

app/controllers/application.js

@@ -110,10 +110,4 @@ export default Controller.extend({
     }
 
   },
-
-  actions: {
-    setIsDragging(isDragging) {
-      this.set('isDragging', isDragging);
-    },
-  }
 });

app/controllers/container-types.js

@@ -1,9 +1,7 @@
-import Controller, { inject as controller } from '@ember/controller';
+import Controller from '@ember/controller';
 import { sort } from '@ember/object/computed';
 
 export default Controller.extend({
-  application: controller(),
-
   sorted: sort('model', 'sortProperties'),
 
   init() {

app/controllers/info.js

@@ -1,6 +1,5 @@
-import Controller, { inject as controller } from '@ember/controller';
+import Controller from '@ember/controller';
 
 export default Controller.extend({
-  application: controller(),
   navWidth: 180,
 });

app/controllers/model-types.js

@@ -1,4 +1,4 @@
-import Controller, { inject as controller } from '@ember/controller';
+import Controller from '@ember/controller';
 import { get, computed } from '@ember/object';
 import LocalStorageService from 'ember-inspector/services/storage/local';
 import { sort } from '@ember/object/computed';
@@ -9,7 +9,6 @@ import {
 } from 'ember-inspector/utils/local-storage-keys';
 
 export default Controller.extend({
-  application: controller(),
   navWidth: 180,
   storage: service(`storage/${LocalStorageService.STORAGE_TYPE_TO_USE}`),
 

app/controllers/promise-tree.js

@@ -1,12 +1,10 @@
 import { action, observer } from '@ember/object';
-import Controller, { inject as controller } from '@ember/controller';
+import Controller from '@ember/controller';
 import { isEmpty } from '@ember/utils';
 import { equal, bool, and, not, filter } from '@ember/object/computed';
 import { debounce, next, once } from '@ember/runloop';
 
 export default Controller.extend({
-  application: controller(),
-
   queryParams: ['filter'],
 
   createdAfter: null,

app/controllers/render-tree.js

@@ -1,14 +1,13 @@
 import { action, computed, get } from '@ember/object';
 import { isEmpty } from '@ember/utils';
-import Controller, { inject as controller } from '@ember/controller';
+import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
 import escapeRegExp from "ember-inspector/utils/escape-reg-exp";
 import debounceComputed from "ember-inspector/computed/debounce";
 import LocalStorageService from "ember-inspector/services/storage/local";
 import { and, equal } from '@ember/object/computed';
 
 export default Controller.extend({
-  application: controller(),
   initialEmpty: false,
   modelEmpty: equal('model.length', 0),
   showEmpty: and('initialEmpty', 'modelEmpty'),

app/styles/app.scss

@@ -18,10 +18,6 @@
   z-index: 0;
 }
 
-.app.is-dragging {
-  cursor: col-resize;
-}
-
 @import "base";
 @import "colors";
 @import "utils";

app/templates/application.hbs

@@ -1,17 +1,15 @@
 <div
-  class="ember-view app {{if this.active "" "inactive"}} {{if this.isDragging "isDragging"}}"
+  class="ember-view app {{if this.active "" "inactive"}}"
   tabindex="1"
   {{on "focusin" (fn this.setActive true)}}
   {{on "focusout" (fn this.setActive false)}}
 >
   {{#if this.isEmberApplication}}
     <div class="split">
       <div class="split__panel">
-        {{!-- Begin main --}}
         <div class="split split--main">
           <Ui::DraggableColumn
             @classes="split__panel split__panel--sidebar-1"
-            @setIsDragging={{action "setIsDragging"}}
             @side="left"
             @width={{this.navWidth}}
           >
@@ -44,14 +42,11 @@
             </MainContent>
           </div>
         </div>
-
-        {{!-- End main --}}
       </div>
 
       {{#if this.inspectorExpanded}}
         <Ui::DraggableColumn
           @classes="split__panel"
-          @setIsDragging={{action "setIsDragging"}}
           @side="right"
           @width={{this.inspectorWidth}}
         >

app/templates/components/item-types.hbs

@@ -1,7 +1,6 @@
 <div class="split">
   <Ui::DraggableColumn
     @classes="split__panel split__panel--sidebar-2 nav"
-    @setIsDragging={{@setIsDragging}}
     @side="left"
     @width={{@width}}
   >

app/templates/components/list.hbs

@@ -49,7 +49,6 @@
       @maxWidth={{column.maxWidth}}
       @on-drag={{action "didResize" column.id}}
       @position={{one-way column.width}}
-      @setIsDragging={{@setIsDragging}}
       @side="left"
     />
   {{/if}}

app/templates/container-types.hbs

@@ -1,6 +1,5 @@
 <ItemTypes
   @header="Types"
-  @setIsDragging={{action "setIsDragging" target=application}}
   @sorted={{readonly sorted}}
   @type="container"
   @width={{180}}

app/templates/info.hbs

@@ -1,7 +1,6 @@
 <div class="split">
   <Ui::DraggableColumn
     @classes="split__panel split__panel--sidebar-2 nav"
-    @setIsDragging={{action "setIsDragging" target=this.application}}
     @side="left"
     @width={{this.navWidth}}
   >

app/templates/model-types.hbs

@@ -1,6 +1,5 @@
 <ItemTypes
   @header="Model Types"
-  @setIsDragging={{action "setIsDragging" target=application}}
   @sorted={{readonly (if this.orderByRecordCount this.sortByDescCount this.sortByName)}}
   @type="model"
   @width={{this.navWidth}}

app/templates/promise-tree.hbs

@@ -6,8 +6,7 @@
 {{else}}
   <List
     class="js-promise-tree"
-    @schema={{schema-for "promise-tree"}}
-    @setIsDragging={{action "setIsDragging" target=this.application}} as |list|
+    @schema={{schema-for "promise-tree"}} as |list|
   >
     {{#list.vertical-collection this.filtered as |content index|}}
       <tr class="list__row js-promise-tree-item {{if (mod index 2) "striped"}}">

app/templates/render-tree.hbs

@@ -14,8 +14,7 @@
   <List
     class="js-render-tree list--css-striping"
     @headerHeight={{this.headerHeight}}
-    @schema={{schema-for "render-tree"}}
-    @setIsDragging={{action "setIsDragging" target=this.application}} as |list|
+    @schema={{schema-for "render-tree"}} as |list|
   >
     <tbody>
       {{#each this.filtered as |item|}}

lib/ui/addon/components/drag-handle.js

@@ -59,8 +59,6 @@ export default Component.extend({
   'on-drag'() {},
 
   startDragging() {
-    this.setIsDragging(true);
-
     this._mouseMoveHandler = this.mouseMoveHandler.bind(this);
     this._stopDragging = this.stopDragging.bind(this);
     document.body.addEventListener(`mousemove`, this._mouseMoveHandler);
@@ -69,7 +67,6 @@ export default Component.extend({
   },
 
   stopDragging() {
-    this.setIsDragging(false);
     document.body.removeEventListener(`mousemove`, this._mouseMoveHandler);
     document.body.removeEventListener(`mouseup`, this._stopDragging);
     document.body.removeEventListener(`mouseleave`, this._stopDragging);

lib/ui/addon/styles/_drag-handle.scss

@@ -4,31 +4,52 @@
  The drag handle used for resizing elements
 */
 
+:root {
+  --drag-handle-width: 6px;
+  --drag-handle-active-width: 60px;
+}
+
 .drag-handle {
   bottom: 0;
   cursor: col-resize;
   position: absolute;
   top: 0;
-  width: 6px;
+  width: var(--drag-handle-width);
   z-index: 500;
 }
 
 .drag-handle--right {
-  margin-right: -3px;
+  margin-right: calc(var(--drag-handle-width) / 2 * -1);
 }
 
 .drag-handle--left {
-  margin-left: -3px;
+  margin-left: calc(var(--drag-handle-width) / 2 * -1);
 }
 
 .drag-handle__border {
   border-left: 1px solid var(--base06);
   height: 100%;
-  margin-left: 3px;
+  margin-left: calc(var(--drag-handle-width) / 2);
   pointer-events: none;
   width: 1px;
 }
 
+.drag-handle:active {
+  width: var(--drag-handle-active-width);
+
+  &.drag-handle--right {
+    margin-right: calc(var(--drag-handle-active-width) / 2 * -1);
+  }
+
+  &.drag-handle--left {
+    margin-left: calc(var(--drag-handle-active-width) / 2 * -1);
+  }
+
+  .drag-handle__border {
+    margin-left: calc(var(--drag-handle-active-width) / 2);
+  }
+}
+
 .drag-handle--faded {
   opacity: 0.3;
 }

lib/ui/addon/styles/_nav.scss

@@ -40,10 +40,6 @@
   &:focus { outline: none; }
 }
 
-.app.is-dragging .nav__item {
-  cursor: col-resize;
-}
-
 .nav__item.active {
   background: var(--focus);
   color: var(--focus-text);

lib/ui/addon/templates/components/draggable-column.hbs

@@ -9,6 +9,5 @@
   @minWidth={{this.minWidth}}
   @on-drag={{this.triggerResize}}
   @position={{@width}}
-  @setIsDragging={{@setIsDragging}}
   @side={{@side}}
 />