Update sector view layout

src/editor/config/config.js

@@ -171,6 +171,7 @@ export default {
       '<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>',
     plus: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" /></svg>',
+    caret: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M7,10L12,15L17,10H7Z" /></svg>',
   },
 
   // Dom element

src/style_manager/view/SectorView.js

@@ -4,17 +4,20 @@ import PropertiesView from './PropertiesView';
 
 export default class SectorView extends View {
   template({ pfx, label }) {
+    const icons = this.em?.getConfig('icons');
+    const iconCaret = icons?.caret || '';
+
     return html`
       <div class="${pfx}title" data-sector-title>
-        <i id="${pfx}caret" class="fa"></i>
-        ${label}
+        <div class="${pfx}title-caret">$${iconCaret}</div>
+        <div class="${pfx}title-label">${label}</div>
       </div>
     `;
   }
 
   events() {
     return {
-      'click [data-sector-title]': 'toggle'
+      'click [data-sector-title]': 'toggle',
     };
   }
 
@@ -24,8 +27,6 @@ export default class SectorView extends View {
     this.pfx = this.config.stylePrefix || '';
     this.target = o.target || {};
     this.propTarget = o.propTarget || {};
-    this.caretR = 'fa-caret-right';
-    this.caretD = 'fa-caret-down';
     const model = this.model;
     this.listenTo(model, 'change:open', this.updateOpen);
     this.listenTo(model, 'updateVisibility', this.updateVisibility);
@@ -59,7 +60,6 @@ export default class SectorView extends View {
   show() {
     this.$el.addClass(this.pfx + 'open');
     this.getPropertiesEl().style.display = '';
-    this.$caret.removeClass(this.caretR).addClass(this.caretD);
   }
 
   /**
@@ -68,7 +68,6 @@ export default class SectorView extends View {
   hide() {
     this.$el.removeClass(this.pfx + 'open');
     this.getPropertiesEl().style.display = 'none';
-    this.$caret.removeClass(this.caretD).addClass(this.caretR);
   }
 
   getPropertiesEl() {
@@ -89,7 +88,6 @@ export default class SectorView extends View {
     const { id, name } = model.attributes;
     const label = (em && em.t(`styleManager.sectors.${id}`)) || name;
     $el.html(this.template({ pfx, label }));
-    this.$caret = $el.find(`#${pfx}caret`);
     this.renderProperties();
     $el.attr('class', `${pfx}sector ${pfx}sector__${id} no-select`);
     this.updateOpen();
@@ -105,7 +103,7 @@ export default class SectorView extends View {
         collection: objs,
         target,
         propTarget,
-        config
+        config,
       });
       this.$el.append(view.render().el);
     }

src/styles/scss/_gjs_style_manager.scss

@@ -50,17 +50,29 @@
   font-weight: lighter;
   text-align: left;
 
-  ##{$sm-prefix}caret {
-    padding-right: 5px;
-    font-size: 11px;
+  .#{$sm-prefix}title-caret {
+    width: 17px;
+    height: 17px;
+    min-width: 17px;
+    transform: rotate(-90deg);
+  }
+
+  .#{$sm-prefix}title-label {
+    margin-left: 5px;
   }
 
   &.#{$sm-prefix}open {
     @extend .#{$app-prefix}category-open;
+
+    .#{$sm-prefix}title-caret {
+      transform: none;
+    }
   }
 
   .#{$sm-prefix}title {
     @extend .#{$app-prefix}category-title;
+    display: flex;
+    align-items: center;
   }
 
   /* ------------------Field-------------------- */