From b4c1b37e294ce8dd11a2d153c04d35b435dba596 Mon Sep 17 00:00:00 2001 From: RossAscends <124905043+RossAscends@users.noreply.github.com> Date: Thu, 4 May 2023 03:00:45 +0900 Subject: [PATCH] Custom colors for tags --- public/index.html | 3 ++- public/script.js | 32 ++++++++++++++++++++++---------- public/scripts/tags.js | 41 +++++++++++++++++++++++++++++++++++++---- public/style.css | 34 ++++++++++++++++++++++++++++------ 4 files changed, 89 insertions(+), 21 deletions(-) diff --git a/public/index.html b/public/index.html index c8920f70b..73bd5188c 100644 --- a/public/index.html +++ b/public/index.html @@ -1806,7 +1806,7 @@
-
+
@@ -1815,6 +1815,7 @@
+
 entries
diff --git a/public/script.js b/public/script.js index 96b2aa0e2..cff2194da 100644 --- a/public/script.js +++ b/public/script.js @@ -1055,14 +1055,14 @@ function addOneMessage(mes, { type = "normal", insertAfter = null, scroll = true const bias = messageFormating(mes.extra?.bias ?? ""); let params = { - mesId: count_view_mes, - characterName: characterName, - isUser: mes.is_user, - avatarImg: avatarImg, - bias: bias, - isSystem: isSystem, - title: title, - ...formatGenerationTimer(mes.gen_started, mes.gen_finished), + mesId: count_view_mes, + characterName: characterName, + isUser: mes.is_user, + avatarImg: avatarImg, + bias: bias, + isSystem: isSystem, + title: title, + ...formatGenerationTimer(mes.gen_started, mes.gen_finished), }; const HTMLForEachMes = getMessageFromTemplate(params); @@ -4313,7 +4313,11 @@ $(document).ready(function () { duration: 200, easing: animation_easing, }); - setTimeout(function () { $("#shadow_popup").css("display", "none"); }, 200); + setTimeout(function () { + $("#shadow_popup").css("display", "none"); + $("#dialogue_popup").removeClass('large_dialogue_popup'); + }, 200); + // $("#shadow_popup").css("opacity:", 0.0); if (popup_type == "del_bg") { delBackground(bg_file_for_del.attr("bgfile")); @@ -4421,13 +4425,16 @@ $(document).ready(function () { if (popup_type == 'input') { dialogueResolve($("#dialogue_popup_input").val()); $("#dialogue_popup_input").val(''); + } else { dialogueResolve(true); + } dialogueResolve = null; } + }); $("#dialogue_popup_cancel").click(function (e) { $("#shadow_popup").transition({ @@ -4435,7 +4442,11 @@ $(document).ready(function () { duration: 200, easing: animation_easing, }); - setTimeout(function () { $("#shadow_popup").css("display", "none"); }, 200); + setTimeout(function () { + $("#shadow_popup").css("display", "none"); + $("#dialogue_popup").removeClass('large_dialogue_popup'); + }, 200); + //$("#shadow_popup").css("opacity:", 0.0); popup_type = ""; @@ -4443,6 +4454,7 @@ $(document).ready(function () { dialogueResolve(false); dialogueResolve = null; } + }); $("#add_bg_button").change(function () { diff --git a/public/scripts/tags.js b/public/scripts/tags.js index eafd3f9db..a99e381af 100644 --- a/public/scripts/tags.js +++ b/public/scripts/tags.js @@ -153,6 +153,7 @@ function createNewTag(tagName) { const tag = { id: random_id(), name: tagName, + color: '', }; tags.push(tag); return tag; @@ -165,6 +166,10 @@ function appendTagToList(listElement, tag, { removable, editable, selectable }) let tagElement = $('#tag_template .tag').clone(); tagElement.attr('id', tag.id); + + tagElement.css('color', 'var(--SmartThemeBodyColor)'); + tagElement.css('background-color', tag.color); + tagElement.find('.tag_name').text(tag.name); const removeButton = tagElement.find(".tag_remove"); removable ? removeButton.show() : removeButton.hide(); @@ -278,7 +283,7 @@ function applyTagsOnGroupSelect() { function createTagInput(inputSelector, listSelector) { $(inputSelector) - .autocomplete({ + .autocomplete({ source: (i, o) => findTag(i, o, listSelector), select: (e, u) => selectTag(e, u, listSelector), minLength: 0, @@ -287,21 +292,37 @@ function createTagInput(inputSelector, listSelector) { } function onViewTagsListClick() { + $('#dialogue_popup').addClass('large_dialogue_popup'); const list = document.createElement('div'); const everything = Object.values(tag_map).flat(); - $(list).append('

Tags

Click on the tag name to edit it.') + $(list).append('

Tags

Click on the tag name to edit it.
'); + $(list).append('Click on color box to assign new color.

'); for (const tag of tags) { const count = everything.filter(x => x == tag.id).length; const template = $('#tag_view_template .tag_view_item').clone(); - template.attr('id', tag.id); 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); + const colorPickerId = tag.name + "-tag-color"; + template.find('.tagColorPickerHolder').html( + `` + ); + template.find('.tag-color').attr('id', colorPickerId); list.appendChild(template.get(0)); - } + setTimeout(function () { + document.querySelector(`#${colorPickerId}`).addEventListener('change', (evt) => { + onTagColorize(evt); + }); + }, 100); + + $(colorPickerId).color = tag.color; + + } callPopup(list.outerHTML, 'text'); } @@ -330,6 +351,18 @@ function onTagRenameInput() { saveSettingsDebounced(); } +function onTagColorize(evt) { + console.log(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('background-color', newColor); + $(`.tag[id="${id}"]`).css('background-color', newColor); + const tag = tags.find(x => x.id === id); + tag.color = newColor; + console.log(tag); + saveSettingsDebounced(); +} + $(document).ready(() => { createTagInput('#tagInput', '#tagList'); createTagInput('#groupTagInput', '#groupTagList'); diff --git a/public/style.css b/public/style.css index 060d405cc..be9ac9a3c 100644 --- a/public/style.css +++ b/public/style.css @@ -1355,6 +1355,7 @@ input[type=search]:focus::-webkit-search-cancel-button { #dialogue_popup { width: 500px; + max-width: 90svw; position: absolute; z-index: 9999; margin-left: auto; @@ -1376,6 +1377,16 @@ input[type=search]:focus::-webkit-search-cancel-button { overflow-y: hidden; } +.large_dialogue_popup { + height: 90svh; + max-width: 90svw; +} + +.height100pSpaceEvenly { + align-content: space-evenly; + height: 100%; +} + #dialogue_popup_holder { display: flex; flex-direction: column; @@ -2438,7 +2449,7 @@ h5 { .tag_view_name { text-align: left; - flex: 2; + /* flex: 2; */ } .tag_view_counter { @@ -2448,6 +2459,7 @@ h5 { .tag_delete { padding-right: 0; + color: var(--SmartThemeBodyColor) !important; } .tag { @@ -2455,9 +2467,9 @@ h5 { border-style: solid; border-width: 1px; box-sizing: border-box; - color: var(--SmartThemeQuoteColor); + color: var(--SmartThemeBodyColor); background-color: var(--black30a); - border-color: var(--white30a); + border-color: var(--white50a); padding: 0.2rem 0.3rem; font-size: calc(var(--mainFontSize) - 5%); display: flex; @@ -2467,11 +2479,10 @@ h5 { width: fit-content; min-width: 0; text-shadow: none !important; + } -.tag.selected { - border-color: var(--white70a); -} + .tag_remove { cursor: pointer; @@ -2490,6 +2501,10 @@ h5 { margin: 5px 0; } +#tagList .tag { + opacity: 0.6; +} + .tags.tags_inline { opacity: 0.6; column-gap: 0.2rem; @@ -2517,6 +2532,13 @@ h5 { #rm_tag_filter .tag { cursor: pointer; + opacity: 0.6; + filter: brightness(0.8); +} + +.tag.selected { + opacity: 1 !important; + filter: none !important; } body .ui-autocomplete {