Add the possibility to change the item name inside Layers

src/navigator/template/item.html

@@ -5,7 +5,8 @@
 <div class="<%= prefix %>title-c">
   <div class="<%= prefix %>title <%= addClass %>">
   	<i id="<%= prefix %>caret" class="fa fa-chevron-right"></i>
-  	<%= title %>
+		<i class="fa fa-pencil <%= editBtnCls %>"></i>
+		<input class="<%= ppfx %>no-app <%= inputNameCls %>" value="<%= title %>" readonly>
   </div>
 </div>
 

src/navigator/view/ItemView.js

@@ -12,6 +12,7 @@ define(['backbone', 'text!./../template/item.html','require'],
 			this.opt = o;
 			this.config = o.config;
 			this.em = o.config.em;
+			this.ppfx = this.em.get('Config').stylePrefix;
 			this.sorter = o.sorter || {};
 			this.pfx = this.config.stylePrefix;
 			if(typeof this.model.get('open') == 'undefined')
@@ -21,9 +22,13 @@ define(['backbone', 'text!./../template/item.html','require'],
 			this.listenTo(this.model, 'change:status', this.updateStatus);
 			this.listenTo(this.model, 'change:open', this.updateOpening);
 			this.className	= this.pfx + 'item no-select';
+			this.editBtnCls = this.pfx + 'nav-item-edit';
+			this.inputNameCls = this.ppfx + 'nav-comp-name';
 			this.events		= {};
-			this.events['click > #'+this.pfx+'btn-eye']	= 'toggleVisibility';
-			this.events['click .'+this.pfx+'title']		= 'toggleOpening';
+			this.events['click > #'+this.pfx+'btn-eye'] = 'toggleVisibility';
+			this.events['click .'+this.pfx+'title'] = 'toggleOpening';
+			this.events['click .' + this.editBtnCls] = 'handleEdit';
+			this.events['blur .' + this.inputNameCls] = 'handleEditEnd';
 
 			this.$el.data('model', this.model);
 			this.$el.data('collection', this.model.get('components'));
@@ -34,6 +39,37 @@ define(['backbone', 'text!./../template/item.html','require'],
 			this.delegateEvents();
 		},
 
+		/**
+		 * Handle the edit of the component name
+		 */
+		handleEdit: function(e) {
+			e.stopPropagation();
+			var inputName = this.getInputName();
+			inputName.readOnly = false;
+			inputName.focus();
+		},
+
+		/**
+		 * Handle with the end of editing of the component name
+		 */
+		handleEditEnd: function (e) {
+			e.stopPropagation();
+			var inputName = this.getInputName();
+			inputName.readOnly = true;
+			this.model.set('customName', inputName.value);
+		},
+
+		/**
+		 * Get the input containing the name of the component
+		 * @return {HTMLElement}
+		 */
+		getInputName: function () {
+			if(!this.inputName) {
+				this.inputName = this.el.querySelector('.' + this.inputNameCls);
+			}
+			return this.inputName;
+		},
+
 		/**
 		 * Update item opening
 		 *
@@ -206,13 +242,17 @@ define(['backbone', 'text!./../template/item.html','require'],
 			var count = this.countChildren(this.model);
 
 			this.$el.html( this.template({
-				title: this.model.getName(),
+				title: this.model.get('customName') || this.model.getName(),
 				addClass: (count ? '' : pfx+'no-chld'),
+				editBtnCls: this.editBtnCls,
+				inputNameCls: this.inputNameCls,
 				count: count,
 				visible: vis,
 				hidable: this.config.hidable,
-				prefix: pfx
+				prefix: pfx,
+				ppfx: this.ppfx
 			}));
+
 			if(typeof ItemsView == 'undefined')
 				ItemsView = require('./ItemsView');
 			this.$components = new ItemsView({

styles/css/main.css

@@ -2693,7 +2693,8 @@ $fontColorActive: #4f8ef7;
   box-sizing: border-box;
   height: 100%; }
 
-.gjs-freezed {
+.gjs-freezed,
+.gjs-nv-freezed {
   opacity: 0.5;
   filter: alpha(opacity=50);
   pointer-events: none; }
@@ -3070,21 +3071,21 @@ ol.example li.placeholder:before {
     position: absolute;
     cursor: pointer;
     z-index: 1; }
-  .gjs-nv-navigator .gjs-nv-item .gjs-nv-title {
-    font-size: 11px;
-    padding: 7px 10px 7px 30px; }
   .gjs-nv-navigator .gjs-nv-item #gjs-nv-caret {
     font-size: 7px;
-    width: 8px; }
+    width: 8px;
+    margin-right: 5px; }
 
-.gjs-nv-item .gjs-nv-title {
+.gjs-nv-title {
   background-color: rgba(0, 0, 0, 0.1);
-  font-size: 13px;
+  font-size: 11px;
   letter-spacing: 1px;
-  padding: 7px 10px 7px 25px;
+  padding: 3px 10px 5px 30px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.3);
   border-top: 1px solid rgba(255, 255, 255, 0.1);
-  cursor: pointer; }
+  cursor: pointer;
+  display: flex;
+  align-items: center; }
 
 .gjs-nv-item .gjs-nv-children .gjs-nv-title {
   border-left: 1px solid rgba(5, 5, 5, 0.3); }
@@ -3113,6 +3114,15 @@ ol.example li.placeholder:before {
 .gjs-nv-item.gjs-nv-selected {
   border: 2px solid #3b97e3; }
 
+.gjs-nv-nav-item-edit {
+  visibility: hidden; }
+
+.gjs-nv-title-c:hover .gjs-nv-nav-item-edit {
+  visibility: visible; }
+
+.gjs-nav-comp-name {
+  padding: 5px; }
+
 /************* END Navigator *************/
 /* pa-refresh pa-rocket pa-trash pa-columns pa-rotate-left/right */
 .btn.expand, .gjs-nv-navigator .gjs-nv-item .expand#gjs-nv-btn-eye {

styles/scss/main.scss

@@ -194,7 +194,8 @@ $fontV: 20;//random(1000)
 	box-sizing: border-box;
 	height: 100%;
 }
-.#{$app-prefix}freezed{
+.#{$app-prefix}freezed,
+.#{$nv-prefix}freezed {
   @include opacity(0.50);
   pointer-events: none;
 }
@@ -623,27 +624,29 @@ ol.example li.placeholder:before {position: absolute;}
     cursor:pointer;
     z-index: 1;
 	}
-	.#{$nv-prefix}item .#{$nv-prefix}title {
-		font-size: 11px;
-		padding: 7px 10px 7px 30px;
-	}
 	.#{$nv-prefix}item ##{$nv-prefix}caret {
 		font-size: 7px;
 		width: 8px;
+    margin-right: 5px;
 	}
 }
+
 .#{$nv-prefix}item .#{$nv-prefix}title-c {
   @extend .#{$app-prefix}bg-main;
 }
-.#{$nv-prefix}item .#{$nv-prefix}title {
+
+.#{$nv-prefix}title {
   background-color: $mainDklColor;
-  font-size: 13px;
+  font-size: 11px;
   letter-spacing: 1px;
-  padding: 7px 10px 7px 25px;
+  padding: 3px 10px 5px 30px;
   border-bottom: 1px solid $mainDkColor;
   border-top: 1px solid $mainLhColor;
   cursor:pointer;
+  display: flex;
+  align-items: center;
 }
+
 .#{$nv-prefix}item .#{$nv-prefix}children .#{$nv-prefix}title{
 	border-left: 1px solid lighten($mainDkColor,2%);
 }
@@ -667,6 +670,21 @@ ol.example li.placeholder:before {position: absolute;}
 	}
 }
 
+.#{$nv-prefix}nav-item-edit {
+  visibility: hidden;
+}
+
+.#{$nv-prefix}title-c:hover {
+
+  .#{$nv-prefix}nav-item-edit {
+    visibility: visible;
+  }
+}
+
+.#{$app-prefix}nav-comp-name {
+  padding: 5px;
+}
+
 /************* END Navigator *************/
 
 /* pa-refresh pa-rocket pa-trash pa-columns pa-rotate-left/right */