#1152 updated td-editable

front/core/components/td-editable/index.html

@@ -1,4 +1,2 @@
-<vn-horizontal class="text-container">
-        <span class="text" ng-transclude="text" vn-one></span>
-</vn-horizontal>
 <div class="field"></div>
+<span class="text" ng-transclude="text"></span>

front/core/components/td-editable/index.js

@@ -1,38 +1,58 @@
 import ngModule from '../../module';
 import Component from '../../lib/component';
+import {focus} from '../../directives/focus';
 import './style.scss';
 
 export default class Controller extends Component {
-    constructor($element, $scope, $transclude) {
+    constructor($element, $scope, $transclude, $timeout) {
         super($element, $scope);
+        this.$timeout = $timeout;
         let element = $element[0];
         element.tabIndex = 0;
 
         element.addEventListener('focus', () => {
+            if (this.field) return;
             $transclude((tClone, tScope) => {
                 this.field = tClone;
                 this.tScope = tScope;
                 this.element.querySelector('.field').appendChild(this.field[0]);
+                element.tabIndex = -1;
+                this.timer = $timeout(() => {
+                    this.timer = null;
+                    focus(this.field[0]);
+                });
             }, null, 'field');
             element.classList.add('selected');
         });
 
         element.addEventListener('focusout', event => {
+            this.destroyTimer();
             this.lastEvent = event;
             let target = event.relatedTarget;
-            while (target && target.parentNode != element)
+            while (target && target != element)
                 target = target.parentNode;
 
             if (!target) {
                 this.tScope.$destroy();
                 this.field.remove();
+                this.field = null;
                 element.classList.remove('selected');
+                element.tabIndex = 0;
             }
         });
     }
-}
+    destroyTimer() {
+        if (this.timer) {
+            this.$timeout.cancel(this.timer);
+            this.timer = null;
+        }
+    }
 
-Controller.$inject = ['$element', '$scope', '$transclude'];
+    $onDestroy() {
+        this.destroyTimer();
+    }
+}
+Controller.$inject = ['$element', '$scope', '$transclude', '$timeout'];
 
 ngModule.component('vnTdEditable', {
     template: require('./index.html'),

front/core/components/td-editable/style.scss

@@ -1,16 +1,40 @@
+@import "variables";
+
 vn-td-editable {
     cursor: pointer;
-    & > div.text-container{
-        width: 100%;
-    }
+    outline: none;
+    position: relative;
 
-    &.selected {
-        & > .text-container{
-            display: none;
+    &.selected > .text {
+        visibility: hidden;
+    }
+    & > .field {
+        display: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        align-items: center;
+        padding: .6em;
+        overflow: visible;
+
+        & > field {
+            flex: 1;
+            background-color: $color-bg-panel;
+            padding: .5em;
+            box-shadow: 0 0 .4em rgba(0, 0, 0, .2);
+            border-radius: .1em;
+            min-width: 6em;
+    
+            & > * {
+                width: 100%;
+                max-width: initial;
+            }
         }
     }
-
-    vn-icon {
-        font-size: 1em;
+    &.selected > .field {
+        display: flex;
     }
 }

front/core/directives/focus.js

@@ -1,5 +1,22 @@
 import ngModule from '../module';
 
+export function focus(input) {
+    let selector = 'input, textarea, button, submit';
+
+    if (!input.matches(selector))
+        input = input.querySelector(selector);
+
+    if (!input) {
+        console.warn(`vnFocus: Can't find a focusable element`);
+        return;
+    }
+
+    input.focus();
+
+    if (input.select)
+        input.select();
+}
+
 /**
  * Sets the focus and selects the text on the input.
  *
@@ -8,24 +25,8 @@ import ngModule from '../module';
 export function directive() {
     return {
         restrict: 'A',
-        link: function($scope, $element, $attrs) {
-            $scope.$watch('', function() {
-                let input = $element[0];
-                let selector = 'input, textarea, button, submit';
-
-                if (!input.matches(selector))
-                    input = input.querySelector(selector);
-
-                if (!input) {
-                    console.warn(`vnFocus: Can't find a focusable element`);
-                    return;
-                }
-
-                input.focus();
-
-                if (input.select)
-                    input.select();
-            });
+        link: function($scope, $element) {
+            $scope.$watch('', () => focus($element[0]));
         }
     };
 }