Update Layers icons

docs/modules/Layers.md

@@ -30,7 +30,7 @@ const editor = grapesjs.init({
 
 Layers are a direct representation of your components, therefore they will only be available once your components are loaded in the editor (eg. you might load your project data from a remote endpoint).
 
-In your configuration, you're able to change the global behavior of layers (eg. make all layers not sortable) and also decide which component layer should be used as a root.
+In your configuration, you're able to change the global behavior of layers (eg. make all the layers not sortable) and also decide which component layer should be used as a root.
 
 ```js
 const editor = grapesjs.init({
@@ -45,14 +45,15 @@ const editor = grapesjs.init({
 });
 ```
 
-The configurations are mainly targeting the default UI provided by GrapesJS core, in case you need more control over the tree of your layers, you can read more in the Customization section below.
+The configurations are mainly targeting the default UI provided by GrapesJS core, in case you need more control over the tree of your layers, you can read more in the [Customization](#customization) section below.
 
 You can check here the full list of available configuration options: [Layer Manager Config](https://github.com/artf/grapesjs/blob/master/src/navigator/config/config.ts)
 
 
 
 ## Programmatic usage
-If you need to manage your selectors programmatically you can use its [APIs][Selector API].
+
+If you need to manage layers programmatically you can use its [APIs][Layers API].
 
 
 
@@ -97,4 +98,4 @@ For a complete list of available events, you can check it [here](/api/layer_mana
 [Style Manager]: <Style-manager.html>
 [Components]: <Components.html>
 [Getting Started]: </getting-started.html>
-[Selector API]: </api/selector_manager.html>
+[Layers API]: </api/layer_manager.html>

src/editor/config/config.ts

@@ -1,5 +1,4 @@
 export default {
-
   // Style prefix
   stylePrefix: 'gjs-',
 
@@ -158,6 +157,11 @@ export default {
     copy: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" /></svg>',
     arrowUp:
       '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z" /></svg>',
+    chevron:
+      '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" /></svg>',
+    eye: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z" /></svg>',
+    eyeOff:
+      '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z" /></svg>',
   },
 
   // Dom element

src/navigator/view/ItemView.ts

@@ -37,41 +37,41 @@ export default class ItemView extends View {
   }
 
   template(model: Component) {
-    const { pfx, ppfx, config, clsNoEdit, module, opt } = this;
+    const { pfx, ppfx, config, clsNoEdit, module, opt, em } = this;
     const { hidable } = config;
     const count = module.getComponents(model).length;
     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} ${clsNoEdit} ${ppfx}no-app`;
     const level = opt.level + 1;
     const gut = `${30 + level * 10}px`;
     const name = model.getName();
     const icon = model.getIcon();
     const clsBase = `${pfx}layer`;
+    const { icons } = em?.getConfig();
+    const { move, eye, eyeOff, chevron } = icons;
 
     return `
       ${
         hidable
-          ? `<i class="${pfx}layer-vis fa fa-eye ${
-              module.isVisible(model) ? '' : 'fa-eye-slash'
-            }" data-toggle-visible></i>`
+          ? `<i class="${pfx}layer-vis" data-toggle-visible>
+            <i class="${pfx}layer-vis-on">${eye}</i>
+            <i class="${pfx}layer-vis-off">${eyeOff}</i>
+          </i>`
           : ''
       }
       <div class="${clsTitleC}">
         <div class="${clsTitle}" style="padding-left: ${gut}" data-toggle-select>
           <div class="${pfx}layer-title-inn" title="${name}">
-            <i class="${clsCaret}" data-toggle-open></i>
+            <i class="${this.clsCaret}" data-toggle-open>${chevron}</i>
             ${icon ? `<span class="${clsBase}__icon">${icon}</span>` : ''}
             <span class="${clsInput}" data-name>${name}</span>
           </div>
         </div>
       </div>
       <div class="${this.clsCount}" data-count>${count || ''}</div>
-      <div class="${this.clsMove}" data-toggle-move>
-        <i class="fa fa-arrows"></i>
-      </div>
+      <div class="${this.clsMove}" data-toggle-move>${move || ''}</div>
       <div class="${this.clsChildren}"></div>`;
   }
 
@@ -178,7 +178,7 @@ export default class ItemView extends View {
     const hidden = !module.isVisible(model);
     const method = hidden ? 'addClass' : 'removeClass';
     this.$el[method](hClass);
-    this.getVisibilityEl()[method]('fa-eye-slash');
+    this.getVisibilityEl()[method](`${pfx}layer-off`);
   }
 
   /**
@@ -248,17 +248,17 @@ export default class ItemView extends View {
    * @return void
    * */
   updateOpening() {
-    const { $el, model } = this;
+    const { $el, model, pfx } = this;
     const clsOpen = 'open';
-    const clsChvDown = 'fa-chevron-down';
+    const clsChvOpen = `${pfx}layer-open`;
     const caret = this.getCaret();
 
     if (this.module.isOpen(model)) {
       $el.addClass(clsOpen);
-      caret.addClass(clsChvDown);
+      caret.addClass(clsChvOpen);
     } else {
       $el.removeClass(clsOpen);
-      caret.removeClass(clsChvDown);
+      caret.removeClass(clsChvOpen);
     }
   }
 

src/styles/scss/_gjs_layers.scss

@@ -29,29 +29,45 @@ $layerNameSpacing: 5px !default;
     }
 
     &-vis {
-      height: auto !important;
-      width: auto !important;
       left: 0;
       top: 0;
       padding: 7px 5px 7px 10px;
       position: absolute;
       cursor: pointer;
+      width: 13px;
       z-index: 1;
+
+      &-off {
+        display: none;
+      }
+
+      &.#{$nv-prefix}layer-off {
+        .#{$nv-prefix}layer-vis-on {
+          display: none;
+        }
+        .#{$nv-prefix}layer-vis-off {
+          display: block;
+        }
+      }
     }
 
     &-caret {
-      font-size: 0.5rem;
-      width: 8px;
+      width: 15px;
       padding: 2px;
       cursor: pointer;
       position: absolute;
-      left: -9px;
-      top: 6px;
+      left: -15px;
+      top: 0;
+      transform: rotate(90deg);
       @include opacity(0.7);
 
       &:hover {
         @include opacity(1);
       }
+
+      &.#{$nv-prefix}layer-open {
+        transform: rotate(180deg);
+      }
     }
 
     &-title {
@@ -109,9 +125,9 @@ $layerNameSpacing: 5px !default;
     }
 
     &-move {
-      padding: 7px 10px 7px 5px;
+      padding: 9px 7px;
       position: absolute;
-      font-size: 12px;
+      width: 13px;
       cursor: move;
       right: 0;
       top: 0;