Update selectors layout

src/selector_manager/view/ClassTagsView.js

@@ -1,38 +1,47 @@
-import { template, debounce } from 'underscore';
+import { isEmpty, debounce } from 'underscore';
 import Backbone from 'backbone';
 import ClassTagView from './ClassTagView';
 
 export default Backbone.View.extend({
-  template: template(`
-  <div id="<%= pfx %>up">
-    <div id="<%= pfx %>label"><%= label %></div>
-    <div id="<%= pfx %>status-c">
-      <span id="<%= pfx %>input-c">
-        <div class="<%= ppfx %>field <%= ppfx %>select">
-          <span id="<%= ppfx %>input-holder">
-            <select id="<%= pfx %>states">
-              <option value=""><%= statesLabel %></option>
-            </select>
-          </span>
-          <div class="<%= ppfx %>sel-arrow">
-            <div class="<%= ppfx %>d-s-arrow"></div>
+  template({ selectedLabel, statesLabel, label, pfx, ppfx }) {
+    return `
+    <div id="${pfx}up">
+      <div id="${pfx}label">${label}</div>
+      <div id="${pfx}status-c">
+        <span id="${pfx}input-c">
+          <div class="${ppfx}field ${ppfx}select">
+            <span id="${ppfx}input-holder">
+              <select id="${pfx}states">
+                <option value="">${statesLabel}</option>
+              </select>
+            </span>
+            <div class="${ppfx}sel-arrow">
+              <div class="${ppfx}d-s-arrow"></div>
+            </div>
           </div>
-        </div>
+        </span>
+      </div>
+    </div>
+    <div id="${pfx}tags-field" class="${ppfx}field">
+      <div id="${pfx}tags-c"></div>
+      <input id="${pfx}new" />
+      <span id="${pfx}add-tag" class="${pfx}tags-btn">
+      <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></svg>
+      </span>
+      <span class="${pfx}tags-btn" data-sync-style>
+        <svg viewBox="0 0 24 24"><path d="M12 18c-3.31 0-6-2.69-6-6 0-1 .25-1.97.7-2.8L5.24 7.74A7.93 7.93 0 0 0 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4m0-11V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1-.25 1.97-.7 2.8l1.46 1.46A7.93 7.93 0 0 0 20 12c0-4.42-3.58-8-8-8z"></path></svg>
       </span>
     </div>
-  </div>
-  <div id="<%= pfx %>tags-field" class="<%= ppfx %>field">
-    <div id="<%= pfx %>tags-c"></div>
-    <input id="<%= pfx %>new" />
-    <span id="<%= pfx %>add-tag" class="fa fa-plus"></span>
-  </div>
-  <div id="<%= pfx %>sel-help">
-    <div id="<%= pfx %>label"><%= selectedLabel %></div>
-    <div id="<%= pfx %>sel"></div>
-    <div style="clear:both"></div>
-  </div>`),
-
-  events: {},
+    <div id="${pfx}sel-help">
+      <div id="${pfx}label">${selectedLabel}</div>
+      <div id="${pfx}sel"></div>
+      <div style="clear:both"></div>
+    </div>`;
+  },
+
+  events: {
+    'click [data-sync-style]': 'syncStyle'
+  },
 
   initialize(o = {}) {
     this.config = o.config || {};
@@ -64,6 +73,13 @@ export default Backbone.View.extend({
     this.delegateEvents();
   },
 
+  syncStyle() {
+    const target = this.getTarget();
+    const style = target.getStyle();
+    const hasStyle = !isEmpty(style); // Remove
+    console.log('syncStyle', { target, style, hasStyle });
+  },
+
   getStyleEmitter() {
     const { em } = this;
     const sm = em && em.get('StyleManager');

src/styles/scss/_gjs_selectors.scss

@@ -6,6 +6,23 @@
   @extend .#{$sm-prefix}field, .#{$sm-prefix}select;
 }
 
+##{$clm-prefix}add-tag,
+.#{$clm-prefix}tags-btn {
+  background-color: rgba(255, 255, 255, 0.15);
+  border-radius: 2px;
+  padding: 3px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  min-width: 24px;
+  height: 24px;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+.#{$clm-prefix}tags-btn svg {
+  fill: currentColor;
+  display: block;
+}
+
 .#{$clm-prefix}tags {
   @extend .#{$sm-prefix}sector;
 
@@ -31,6 +48,8 @@
     clear: both;
     padding: 5px;
     margin-bottom: 5px;
+    display: flex;
+    flex-wrap: wrap;
   }
 
   ##{$clm-prefix}tags-c {
@@ -38,15 +57,6 @@
     vertical-align: top;
   }
 
-  ##{$clm-prefix}add-tag {
-    background-color: rgba(255, 255, 255, 0.15);
-    border-radius: 2px;
-    padding: $paddElClm;
-    box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2) inset;
-    border: 1px solid rgba(0, 0, 0, 0.15);
-    cursor: pointer;
-  }
-
   ##{$clm-prefix}new {
     @extend  .#{$app-prefix}invis-invis;