diff --git a/src/navigator/template/item.html b/src/navigator/template/item.html
index f3636b09a..64e80ced3 100644
--- a/src/navigator/template/item.html
+++ b/src/navigator/template/item.html
@@ -5,7 +5,8 @@
diff --git a/src/navigator/view/ItemView.js b/src/navigator/view/ItemView.js
index bade27880..46469a300 100644
--- a/src/navigator/view/ItemView.js
+++ b/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({
diff --git a/styles/css/main.css b/styles/css/main.css
index 58c442b24..b9680749d 100644
--- a/styles/css/main.css
+++ b/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 {
diff --git a/styles/scss/main.scss b/styles/scss/main.scss
index 9bc8c464c..1d880b3d8 100644
--- a/styles/scss/main.scss
+++ b/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 */