Update layer name editing

src/navigator/view/ItemView.js

@@ -19,14 +19,14 @@ export default Backbone.View.extend({
   },
 
   template(model) {
-    const { pfx, ppfx, config, clsEllip } = this;
+    const { pfx, ppfx, config, clsNoEdit } = this;
     const { hidable } = config;
     const count = this.countChildren(model);
     const addClass = !count ? this.clsNoChild : '';
     const clsTitle = `${this.clsTitle} ${addClass}`;
     const clsTitleC = `${this.clsTitleC} ${ppfx}one-bg`;
     const clsCaret = `${this.clsCaret} fa fa-chevron-right`;
-    const clsInput = `${this.inputNameCls} ${clsEllip} ${ppfx}no-app`;
+    const clsInput = `${this.inputNameCls} ${clsNoEdit} ${ppfx}no-app`;
     const level = this.level + 1;
     const gut = `${30 + level * 10}px`;
     const name = model.getName();
@@ -84,7 +84,8 @@ export default Backbone.View.extend({
     this.clsMove = `${pfx}layer-move`;
     this.clsChildren = `${pfx}layer-children`;
     this.clsNoChild = `${pfx}layer-no-chld`;
-    this.clsEllip = `${this.inputNameCls}--ell`;
+    this.clsEdit = `${this.inputNameCls}--edit`;
+    this.clsNoEdit = `${this.inputNameCls}--no-edit`;
     this.$el.data('model', model);
     this.$el.data('collection', components);
     model.viewLayer = this;
@@ -135,12 +136,15 @@ export default Backbone.View.extend({
    */
   handleEdit(e) {
     e && e.stopPropagation();
-    const { em, $el, clsEllip } = this;
+    const { em, $el, clsNoEdit, clsEdit } = this;
     const inputEl = this.getInputName();
     inputEl[inputProp] = true;
     inputEl.focus();
     em && em.setEditing(1);
-    $el.find(`.${this.inputNameCls}`).removeClass(clsEllip);
+    $el
+      .find(`.${this.inputNameCls}`)
+      .removeClass(clsNoEdit)
+      .addClass(clsEdit);
   },
 
   /**
@@ -148,13 +152,17 @@ export default Backbone.View.extend({
    */
   handleEditEnd(e) {
     e && e.stopPropagation();
-    const { em, $el, clsEllip } = this;
+    const { em, $el, clsNoEdit, clsEdit } = this;
     const inputEl = this.getInputName();
     const name = inputEl.textContent;
+    inputEl.scrollLeft = 0;
     inputEl[inputProp] = false;
     this.model.set({ name });
     em && em.setEditing(0);
-    $el.find(`.${this.inputNameCls}`).addClass(clsEllip);
+    $el
+      .find(`.${this.inputNameCls}`)
+      .addClass(clsNoEdit)
+      .removeClass(clsEdit);
   },
 
   /**

src/styles/scss/_gjs_layers.scss

@@ -1,4 +1,5 @@
 $layerIconSize: 15px !default;
+$layerNameSpacing: 5px !default;
 
 .#{$nv-prefix} {
   &selected-parent {
@@ -80,15 +81,15 @@ $layerIconSize: 15px !default;
     }
 
     &-name {
-      padding: 5px;
+      padding: $layerNameSpacing 0;
       display: inline-block;
       box-sizing: content-box;
       overflow: hidden;
       white-space: nowrap;
-      margin-right: 20px;
+      margin: 0 30px 0 $layerNameSpacing;
       @extend .#{$app-prefix}no-user-select;
 
-      &--ell {
+      &--no-edit {
         text-overflow: ellipsis;
       }
     }