Fix file property view

src/style_manager/view/LayerView.js

@@ -21,8 +21,8 @@ export default View.extend({
           ${iconMove}
         </div>
         <div id="${pfx}label" data-label></div>
-        <div id="${pfx}preview-box" style="display: none" data-preview-box>
+        <div id="${pfx}preview-box" class="${pfx}layer-preview" style="display: none" data-preview-box>
-          <div id="${pfx}preview" data-preview></div>
+          <div id="${pfx}preview" class="${pfx}layer-preview-cnt" data-preview></div>
         </div>
         <div id="${pfx}close-layer" class="${pfx}btn-close" data-close-layer>
           ${iconClose}

src/style_manager/view/PropertyFileView.js

@@ -9,20 +9,20 @@ export default PropertyView.extend({
     const { pfx, em } = this;
 
     return `
-    <div class="${pfx}field ${pfx}file">
+      <div class="${pfx}field ${pfx}file">
-      <div id='${pfx}input-holder'>
+        <div id='${pfx}input-holder'>
-        <div class="${pfx}btn-c">
+          <div class="${pfx}btn-c">
-          <button class="${pfx}btn" id="${pfx}images" type="button">
+            <button class="${pfx}btn" id="${pfx}images" type="button">
-            ${em.t('styleManager.fileButton')}
+              ${em.t('styleManager.fileButton')}
-          </button>
+            </button>
+          </div>
+          <div style="clear:both;"></div>
+        </div>
+        <div id="${pfx}preview-box" class="${pfx}preview-file-box">
+          <div id="${pfx}preview-file" class="${pfx}preview-file"></div>
+          <div id="${pfx}close" class="${pfx}preview-file-close">&Cross;</div>
         </div>
-        <div style="clear:both;"></div>
-      </div>
-      <div id="${pfx}preview-box">
-        <div id="${pfx}preview-file"></div>
-        <div id="${pfx}close">&Cross;</div>
       </div>
-    </div>
     `;
   },
 
@@ -133,7 +133,7 @@ export default PropertyView.extend({
         },
         target: this.getTargetModel(),
         types: ['image'],
-        accept: 'image/*'
+        accept: 'image/*',
       });
-  }
+  },
 });

src/styles/scss/_gjs_style_manager.scss

@@ -303,7 +303,7 @@
       width: 100%;
     }
 
-    &.#{$sm-prefix}file ##{$sm-prefix}preview-box {
+    .#{$sm-prefix}preview-file-box {
       background-color: $lightBorder;
       border-radius: 2px;
       margin-top: 5px;
@@ -315,7 +315,7 @@
         padding: 3px 20px;
       }
 
-      ##{$sm-prefix}close {
+      .#{$sm-prefix}preview-file-close {
         @extend .#{$sm-prefix}close-btn;
 
         top: -5px;
@@ -370,25 +370,22 @@
         margin: 0 5px;
       }
 
-      ##{$sm-prefix}preview-box {
+      &-preview {
         @extend .checker-bg;
 
         height: 15px;
         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,
-      ##{$sm-prefix}preview-box {
         border-radius: 2px;
+
+        &-cnt {
+          border-radius: 2px;
+          background-color: white;
+          height: 100%;
+          width: 100%;
+          background-size: cover !important;
+        }
       }
 
       ##{$sm-prefix}close-layer {