Update style layer layout

src/editor/config/config.js

@@ -165,6 +165,13 @@ export default {
   // Import asynchronously CSS to use as icons
   cssIcons: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css',
 
+  // Experimental: don't use.
+  icons: {
+    close:
+      '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"></path></svg>',
+    move: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M13,6V11H18V7.75L22.25,12L18,16.25V13H13V18H16.25L12,22.25L7.75,18H11V13H6V16.25L1.75,12L6,7.75V11H11V6H7.75L12,1.75L16.25,6H13Z"/></svg>',
+  },
+
   // Dom element
   el: '',
 

src/style_manager/view/LayerView.js

@@ -11,20 +11,24 @@ export default View.extend({
 
   template() {
     const { pfx, ppfx } = this;
+    const icons = this.em?.getConfig('icons');
+    const iconClose = icons?.close || '⨯';
+    const iconMove = icons?.move || '';
 
     return `
-      <div id="${pfx}move" class="${ppfx}no-touch-actions" data-move-layer>
-        <i class="fa fa-arrows"></i>
-      </div>
-      <div id="${pfx}label" data-label></div>
-      <div id="${pfx}preview-box">
-      	<div id="${pfx}preview" style="display: none" data-preview></div>
-      </div>
-      <div id="${pfx}close-layer" class="${pfx}btn-close" data-close-layer>
-        &Cross;
+      <div class="${pfx}label-wrp">
+        <div id="${pfx}move" class="${ppfx}no-touch-actions" data-move-layer>
+          ${iconMove}
+        </div>
+        <div id="${pfx}label" data-label></div>
+        <div id="${pfx}preview-box">
+          <div id="${pfx}preview" style="display: none" data-preview></div>
+        </div>
+        <div id="${pfx}close-layer" class="${pfx}btn-close" data-close-layer>
+          ${iconClose}
+        </div>
       </div>
       <div id="${pfx}inputs" data-properties></div>
-      <div style="clear:both"></div>
     `;
   },
 

src/styles/scss/_gjs_style_manager.scss

@@ -328,16 +328,45 @@
       margin: 2px 0;
       padding: 7px;
       position: relative;
-      cursor: pointer;
 
-      > ##{$sm-prefix}preview-box {
+      &.#{$sm-prefix}active {
+        background-color: rgba(255, 255, 255, 0.12);
+      }
+
+      .#{$sm-prefix}label-wrp {
+        display: flex;
+        align-items: center;
+      }
+
+      ##{$sm-prefix}move {
+        height: 14px;
+        width: 14px;
+        min-width: 14px;
+        cursor: grab;
+      }
+
+      ##{$sm-prefix}label {
+        flex-grow: 1;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        margin: 0 5px;
+      }
+
+      ##{$sm-prefix}preview-box {
         @extend .checker-bg;
 
         height: 15px;
-        position: absolute;
-        right: 27px;
-        top: 6px;
         width: 15px;
+        min-width: 15px;
+        margin-right: 5px;
+      }
+
+      ##{$sm-prefix}preview {
+        background-color: white;
+        height: 100%;
+        width: 100%;
+        background-size: cover !important;
       }
 
       ##{$sm-prefix}preview,
@@ -347,11 +376,10 @@
 
       ##{$sm-prefix}close-layer {
         display: block;
-        font-size: 23px;
-        position: absolute;
         cursor: pointer;
-        right: 5px;
-        top: 0;
+        height: 14px;
+        width: 14px;
+        min-width: 14px;
 
         @include opacity(0.5);
 
@@ -359,21 +387,6 @@
           @include opacity(0.8);
         }
       }
-
-      > ##{$sm-prefix}preview-box ##{$sm-prefix}preview {
-        background-color: white;
-        height: 100%;
-        width: 100%;
-        background-size: cover !important;
-      }
-
-      &.#{$sm-prefix}active {
-        background-color: rgba(255, 255, 255, 0.12);
-      }
-
-      &.#{$sm-prefix}no-preview ##{$sm-prefix}preview-box {
-        display: none;
-      }
     }
   }