Stylistic changes on layers

src/navigator/index.js

@@ -17,8 +17,10 @@ module.exports = () => {
       }
 
       let View = ItemsView;
+      const level = 0;
       const opened = opts.opened || {};
       const options = {
+        level,
         config,
         opened
       }

src/navigator/view/ItemView.js

@@ -6,28 +6,31 @@ module.exports = Backbone.View.extend({
 
   template: _.template(`
   <% if (hidable) { %>
-  	<i id="<%= prefix %>btn-eye" class="btn fa fa-eye <%= (visible ? '' : 'fa-eye-slash') %>"></i>
+    <i id="<%= prefix %>btn-eye" class="btn fa fa-eye <%= (visible ? '' : 'fa-eye-slash') %>"></i>
   <% } %>
 
   <div class="<%= prefix %>title-c">
-    <div class="<%= prefix %>title <%= addClass %>">
-    	<i id="<%= prefix %>caret" class="fa fa-chevron-right <%= caretCls %>"></i>
-  		<i class="fa fa-pencil <%= editBtnCls %>"></i>
-      <%= icon %>
-  		<input class="<%= ppfx %>no-app <%= inputNameCls %>" value="<%= title %>" readonly>
+    <div class="<%= prefix %>title <%= addClass %>" style="padding-left: <%= 42 + level * 10 %>px">
+      <div class="<%= prefix %>title-inn">
+        <i class="fa fa-pencil <%= editBtnCls %>"></i>
+        <i id="<%= prefix %>caret" class="fa fa-chevron-right <%= caretCls %>"></i>
+        <%= icon %>
+        <input class="<%= ppfx %>no-app <%= inputNameCls %>" value="<%= title %>" readonly>
+      </div>
     </div>
   </div>
 
   <div id="<%= prefix %>counter"><%= (count ? count : '') %></div>
 
   <div id="<%= prefix %>move">
-  	<i class="fa fa-arrows"></i>
+    <i class="fa fa-arrows"></i>
   </div>
 
   <div class="<%= prefix %>children"></div>`),
 
-  initialize(o) {
+  initialize(o = {}) {
     this.opt = o;
+    this.level = o.level;
     this.config = o.config;
     this.em = o.config.em;
     this.ppfx = this.em.get('Config').stylePrefix;
@@ -252,7 +255,7 @@ module.exports = Backbone.View.extend({
   getCaret() {
     if (!this.caret) {
       const pfx = this.pfx;
-      this.caret = this.$el.find(`> .${pfx}title-c > .${pfx}title > #${pfx}caret`);
+      this.caret = this.$el.find(`> .${pfx}title-c > .${pfx}title > .${pfx}title-inn > #${pfx}caret`);
     }
     return this.caret;
   },
@@ -262,6 +265,7 @@ module.exports = Backbone.View.extend({
     var pfx = this.pfx;
     var vis = this.isVisible();
     var count = this.countChildren(model);
+    const level = this.level + 1;
 
     this.$el.html( this.template({
       title: model.getName(),
@@ -274,17 +278,19 @@ module.exports = Backbone.View.extend({
       visible: vis,
       hidable: this.config.hidable,
       prefix: pfx,
-      ppfx: this.ppfx
+      ppfx: this.ppfx,
+      level
     }));
 
     if(typeof ItemsView == 'undefined')
     	ItemsView = require('./ItemsView');
     this.$components = new ItemsView({
-      collection 	: model.components,
+      collection: model.components,
       config: this.config,
       sorter: this.sorter,
       opened: this.opt.opened,
-      parent: model
+      parent: model,
+      level
     }).render().$el;
     this.$el.find('.'+ pfx +'children').html(this.$components);
     if(!model.get('draggable') || !this.config.sortable){

src/navigator/view/ItemsView.js

@@ -6,6 +6,7 @@ module.exports = Backbone.View.extend({
   initialize(o = {}) {
     this.opt = o;
     const config = o.config || {};
+    this.level = o.level;
     this.config = config;
     this.preview = o.preview;
     this.ppfx = config.pStylePrefix || '';
@@ -60,10 +61,12 @@ module.exports = Backbone.View.extend({
    * @return Object Object created
    * */
   addToCollection(model, fragmentEl, index) {
+    const level = this.level;
     var fragment  = fragmentEl || null;
     var viewObject  = ItemView;
 
     var view = new viewObject({
+      level,
       model,
       config: this.config,
       sorter: this.sorter,

src/styles/scss/_gjs_layers.scss

@@ -50,8 +50,11 @@
 .#{$nv-prefix}item ##{$nv-prefix}caret {
   font-size: 7px;
   width: 8px;
-  padding: 5px;
+  padding: 2px;
   cursor: pointer;
+  position: absolute;
+  left: -9px;
+  top: 6px;
   @include opacity(0.7);
 
   &:hover {
@@ -71,16 +74,28 @@
   align-items: center;
 }
 
+.#{$nv-prefix}title-inn {
+  position: relative;
+}
+
 .#{$nv-prefix}item .#{$nv-prefix}children .#{$nv-prefix}title{
   border-left: 1px solid lighten($mainDkColor,2%);
 }
 .#{$nv-prefix}item > .#{$nv-prefix}children {
-  margin-left: 7px;
   display: none;
 }
-.#{$nv-prefix}item.open > .#{$nv-prefix}children { display: block; }
-.#{$nv-prefix}item > .#{$nv-prefix}no-chld > ##{$nv-prefix}caret::before{ content:''; }
-.#{$nv-prefix}no-chld > ##{$nv-prefix}caret{ display:none; }
+.#{$nv-prefix}item.open > .#{$nv-prefix}children {
+  display: block;
+}
+
+.#{$nv-prefix}item > .#{$nv-prefix}no-chld > ##{$nv-prefix}caret::before{
+  content:'';
+}
+
+.#{$nv-prefix}no-chld > .#{$nv-prefix}title-inn > ##{$nv-prefix}caret {
+  display:none;
+}
+
 .#{$nv-prefix}item > ##{$nv-prefix}move {
   position: absolute;
   cursor: move;
@@ -102,7 +117,11 @@
 .#{$nv-prefix}nav-item-edit {
   visibility: hidden;
   padding: 5px;
-  font-size: 10px;
+  font-size: 9px;
+  position: absolute;
+  left: -27px;
+  top: 1px;
+
   @include opacity(0.7);
 
   &:hover {