scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-11-08 07:21:03 +08:00
Code Issues Projects Releases Packages Wiki Activity

Add tag dynamic text color [SCI-12299]

Browse source
This commit is contained in:
Anton 2025-10-13 11:30:32 +02:00
parent 6d0264f243
commit ae304f6fb3
6 changed files with 46 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
app/javascript/packs/application.js
View file

@ -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;
};

9
app/javascript/vue/my_modules/modals/tags.vue
View file

@ -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="{
class="sci-tag max-w-80 cursor-text"
: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;

11
app/javascript/vue/my_modules/renderers/tags.vue
View file

@ -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>

18
app/javascript/vue/shared/select_dropdown.vue
View file

@ -489,23 +489,7 @@ export default {
}
},
tagTextColor(color) {
if (!color) return 'text-black';
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';
return window.isColorBright(color) ? 'text-black' : 'text-white';
}
}
};

7
app/javascript/vue/shared/select_dropdown_renderers/tag.vue
View file

@ -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>

7
app/javascript/vue/shared/tags_input.vue
View file

@ -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;