Update tags layout

src/selector_manager/view/ClassTagView.js

@@ -8,10 +8,10 @@ export default Backbone.View.extend({
     const label = model.get('label') || '';
 
     return `
-      <span id="${pfx}checkbox" class="fa" data-tag-status></span>
+      <span id="${pfx}checkbox" class="${pfx}tag-status" data-tag-status></span>
       <span id="${pfx}tag-label" data-tag-name>${label}</span>
-      <span id="${pfx}close" data-tag-remove>
+      <span id="${pfx}close" class="${pfx}tag-close" data-tag-remove>
-        &Cross;
+        <svg viewBox="0 0 24 24"><path 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>
       </span>
     `;
   },
@@ -108,15 +108,17 @@ export default Backbone.View.extend({
    */
   updateStatus() {
     const { model, $el } = this;
-    const chkOn = 'fa-check-square-o';
-    const chkOff = 'fa-square-o';
     const $chk = $el.find('[data-tag-status]');
+    const iconOff =
+      '<svg viewBox="0 0 24 24"><path d="M19 3H5c-1.11 0-2 .89-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5a2 2 0 0 0-2-2m0 2v14H5V5h14z"></path></svg>';
+    const iconOn =
+      '<svg viewBox="0 0 24 24"><path d="M19 19H5V5h10V3H5c-1.11 0-2 .89-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-8h-2m-11.09-.92L6.5 11.5 11 16 21 6l-1.41-1.42L11 13.17l-3.09-3.09z"></path></svg>';
 
     if (model.get('active')) {
-      $chk.removeClass(chkOff).addClass(chkOn);
+      $chk.html(iconOn);
       $el.removeClass('opac50');
     } else {
-      $chk.removeClass(chkOn).addClass(chkOff);
+      $chk.html(iconOff);
       $el.addClass('opac50');
     }
   },

src/styles/scss/_gjs_selectors.scss

@@ -24,6 +24,27 @@
   display: block;
 }
 
+.#{$clm-prefix}tag {
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  border-radius: 3px;
+  margin: 0 3px 3px 0;
+  padding: 5px;
+  cursor: default;
+
+  &-status,
+  &-close {
+    min-width: 12px;
+    flex-shrink: 1;
+
+    svg {
+      vertical-align: middle;
+      fill: currentColor;
+    }
+  }
+}
+
 .#{$clm-prefix}tags {
   @extend .#{$sm-prefix}sector;
 
@@ -54,8 +75,10 @@
   }
 
   ##{$clm-prefix}tags-c {
-    display: inline-block;
+    display: flex;
+    flex-wrap: wrap;
     vertical-align: top;
+    overflow: hidden;
   }
 
   ##{$clm-prefix}new {
@@ -66,17 +89,8 @@
     display: none;
   }
 
-  .#{$clm-prefix}tag {
-    display: inline-block;
-    border-radius: 3px;
-    margin: 0 3px 3px 0;
-    padding: 5px;
-    cursor: default;
-  }
-
   ##{$clm-prefix}close {
-    @extend  .opac50;
+    @include opacity(0.85);
-
     font-size: 20px;
     line-height: 0;
     cursor: pointer;
@@ -84,7 +98,7 @@
     @extend  .no-select;
 
     &:hover {
-      @include opacity(0.7);
+      @include opacity(1);
     }
   }
 
@@ -96,6 +110,8 @@
   }
 
   ##{$clm-prefix}tag-label {
+    text-overflow: ellipsis;
+    overflow: hidden;
     padding: 0 3px;
     cursor: text;
   }