Add tag dynamic text color [SCI-12299]

app/javascript/packs/application.js

@@ -76,3 +76,23 @@ $(document).on('click', 'a[rel*=external]', function(e) {
   e.preventDefault();
   window.open(this.href, '_blank', 'noopener');
 });
+
+window.isColorBright = function(color) {
+  if (!color) return true;
+
+  if (color.startsWith('#')) {
+    color = color.slice(1);
+  }
+
+  if (color.length === 3) {
+    color = color.split('').map((c) => c + c).join('');
+  }
+
+  const r = parseInt(color.substr(0, 2), 16);
+  const g = parseInt(color.substr(2, 2), 16);
+  const b = parseInt(color.substr(4, 2), 16);
+
+  const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+
+  return brightness > 180 ? true : false;
+};

app/javascript/vue/my_modules/modals/tags.vue

@@ -37,10 +37,10 @@
                   <label class="sci-checkbox-label"></label>
                 </div>
                 <div v-if="!tag.editing" @click="startEditMode(tag)"
-                     class="sci-tag max-w-80  text-sn-white cursor-text"
+                     class="sci-tag max-w-80  cursor-text"
-                     :class="{
+                     :class="[tagTextColor(tag.color),{
                        'cursor-pointer': canManage
-                     }"
+                     }]"
                      :style="{ backgroundColor: tag.attributes.color }">
                   {{ tag.attributes.name }}
                 </div>
@@ -325,6 +325,9 @@ export default {
         this.setRandomColor();
       });
     },
+    tagTextColor(color) {
+      return window.isColorBright(color) ? 'text-black' : 'text-white';
+    },
     cancelCreating(e) {
       if (e && e.target.closest('.sn-dropdown')) return;
 

app/javascript/vue/my_modules/renderers/tags.vue

@@ -5,7 +5,8 @@
         <template v-slot:field>
           <div class="flex items-center gap-1.5">
             <div
-                class="sci-tag text-white max-w-[150px]"
+                class="sci-tag max-w-[150px]"
+                :class="tagTextColor(params.data.tags[0].color)"
                 :style="{'background': params.data.tags[0].color}">
               <div class="truncate">{{ params.data.tags[0].name }}</div>
             </div>
@@ -22,7 +23,8 @@
           <hr class="my-2" />
           <div class="max-h-[200px] overflow-y-auto flex flex-wrap gap-1.5 max-w-[240px]">
             <div v-for="tag in params.data.tags" :key="tag.id"
-                class="sci-tag text-white max-w-[150px]"
+                class="sci-tag max-w-[150px]"
+                :class="tagTextColor(tag.color)"
                 :style="{'background': tag.color}">
               <div class="truncate">{{ tag.name }}</div>
             </div>
@@ -54,7 +56,10 @@ export default {
   methods: {
     openModal() {
       this.params.dtComponent.$emit('editTags', null, [this.params.data]);
-    }
+    },
+    tagTextColor(color) {
+      return window.isColorBright(color) ? 'text-black' : 'text-white';
+    },
   }
 };
 </script>

app/javascript/vue/shared/select_dropdown.vue

@@ -489,23 +489,7 @@ export default {
       }
     },
     tagTextColor(color) {
-      if (!color) return 'text-black';
+      return window.isColorBright(color) ? 'text-black' : 'text-white';
-
-      if (color.startsWith('#')) {
-        color = color.slice(1);
-      }
-
-      if (color.length === 3) {
-        color = color.split('').map((c) => c + c).join('');
-      }
-
-      const r = parseInt(color.substr(0, 2), 16);
-      const g = parseInt(color.substr(2, 2), 16);
-      const b = parseInt(color.substr(4, 2), 16);
-
-      const brightness = (r * 299 + g * 587 + b * 114) / 1000;
-
-      return brightness > 200 ? 'text-black' : 'text-white';
     }
   }
 };

app/javascript/vue/shared/select_dropdown_renderers/tag.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="option" class="sci-tag text-white" :style="{
+  <div v-if="option" class="sci-tag" :class="tagTextColor(option[2].color)" :style="{
     'background-color': option[2].color
   }">
     {{ option[1] }}
@@ -14,6 +14,11 @@ export default {
       type: Array,
       required: true
     }
+  },
+  methods: {
+    tagTextColor(color) {
+      return window.isColorBright(color) ? 'text-black' : 'text-white';
+    }
   }
 };
 </script>

app/javascript/vue/shared/tags_input.vue

@@ -9,7 +9,7 @@
                 '!border-transparent': !canAssign
              }">
           <template  v-if="tags.length > 0">
-            <div v-for="tag in tags" :key="tag.id" class="sci-tag  text-white" :style="{ backgroundColor: tag.color }" >
+            <div v-for="tag in tags" :key="tag.id" class="sci-tag" :class="tagTextColor(tag.color)" :style="{ backgroundColor: tag.color }" >
               {{ tag.name }}
               <i v-if="canAssign" @click.stop="unlinkTag(tag)" class="sn-icon sn-icon-close"></i>
             </div>
@@ -32,7 +32,7 @@
                 <input type="checkbox" :checked="tags.map(t => t.id).includes(tag.id)" class="sci-checkbox" />
                 <span class="sci-checkbox-label"></span>
               </div>
-              <div class="sci-tag text-white" :style="{ backgroundColor: tag.color }" >
+              <div class="sci-tag" :class="tagTextColor(tag.color)" :style="{ backgroundColor: tag.color }" >
                 {{ tag.name }}
               </div>
             </div>
@@ -131,6 +131,9 @@ export default {
         this.unlinkTag(this.tags[this.tags.length - 1]);
       }
     },
+    tagTextColor(color) {
+      return window.isColorBright(color) ? 'text-black' : 'text-white';
+    },
     openTagsModal() {
       this.tagsModalOpened = true;
       this.$refs.tagsDropdown.isOpen = false;