rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-02-09 16:49:01 +01:00
Code Issues Packages Projects Releases Wiki Activity

custom colors for tag text

Browse Source
This commit is contained in:
RossAscends 2023-09-16 18:37:19 +09:00
parent 5ab449d8a1
commit 2d774f32b2
3 changed files with 43 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/css/tags.css
View File

@ -109,6 +109,7 @@
overflow: hidden;
text-align: left;
white-space: nowrap;
text-shadow: none !important;
}
.tags_inline .tag {
@ -128,6 +129,13 @@
cursor: pointer;
opacity: 0.6;
filter: brightness(0.8);
transition: opacity 200ms;
}
.rm_tag_filter .tag:hover {
opacity: 1;
filter: brightness(1);
}
.tags_view,
@ -163,4 +171,4 @@
-1px 1px 0px black,
1px -1px 0px black;
opacity: 1;
}
}

1
public/index.html
View File

@ -3805,6 +3805,7 @@
<div id="tag_view_template" class="template_element">
<div class="tag_view_item">
<div class="tagColorPickerHolder"></div>
<div class="tagColorPicker2Holder"></div>
<div class="tag_view_name" contenteditable="true"></div>
<div class="tag_view_counter"><span class="tag_view_counter_value"></span>&nbsp;entries</div>
<div title="Delete tag" class="tag_delete fa-solid fa-trash-can right_menu_button" data-i18n="[title]Delete tag"></div>

35
public/scripts/tags.js
View File

@ -263,6 +263,7 @@ function createNewTag(tagName) {
id: uuidv4(),
name: tagName,
color: '',
color2: '',
};
tags.push(tag);
return tag;
@ -273,12 +274,12 @@ function appendTagToList(listElement, tag, { removable, selectable, action, isGe
return;
}
let tagElement = $('#tag_template .tag').clone();
tagElement.attr('id', tag.id);
tagElement.css('color', 'var(--SmartThemeBodyColor)');
//tagElement.css('color', 'var(--SmartThemeBodyColor)');
tagElement.css('background-color', tag.color);
tagElement.css('color', tag.color2);
tagElement.find('.tag_name').text(tag.name);
const removeButton = tagElement.find(".tag_remove");
@ -462,22 +463,40 @@ function onViewTagsListClick() {
template.find('.tag_view_counter_value').text(count);
template.find('.tag_view_name').text(tag.name);
template.find('.tag_view_name').addClass('tag');
template.find('.tag_view_name').css('background-color', tag.color);
template.find('.tag_view_name').css('color', tag.color2);
const colorPickerId = tag.id + "-tag-color";
const colorPicker2Id = tag.id + "-tag-color2";
template.find('.tagColorPickerHolder').html(
`<toolcool-color-picker id="${colorPickerId}" color="${tag.color}" class="tag-color"></toolcool-color-picker>`
);
template.find('.tagColorPicker2Holder').html(
`<toolcool-color-picker id="${colorPicker2Id}" color="${tag.color2}" class="tag-color2"></toolcool-color-picker>`
);
template.find('.tag-color').attr('id', colorPickerId);
template.find('.tag-color2').attr('id', colorPicker2Id);
list.appendChild(template.get(0));
setTimeout(function () {
document.querySelector(`.tag-color[id="${colorPickerId}"`).addEventListener('change', (evt) => {
onTagColorize(evt);
});
}, 100);
setTimeout(function () {
document.querySelector(`.tag-color2[id="${colorPicker2Id}"`).addEventListener('change', (evt) => {
onTagColorize2(evt);
});
}, 100);
$(colorPickerId).color = tag.color;
$(colorPicker2Id).color = tag.color2;
}
callPopup(list.outerHTML, 'text');
@ -520,6 +539,18 @@ function onTagColorize(evt) {
saveSettingsDebounced();
}
function onTagColorize2(evt) {
console.debug(evt);
const id = $(evt.target).closest('.tag_view_item').attr('id');
const newColor = evt.detail.rgba;
$(evt.target).parent().parent().find('.tag_view_name').css('color', newColor);
$(`.tag[id="${id}"]`).css('color', newColor);
const tag = tags.find(x => x.id === id);
tag.color2 = newColor;
console.debug(tag);
saveSettingsDebounced();
}
function onTagListHintClick() {
console.log($(this));
$(this).toggleClass('selected');