diff --git a/public/index.html b/public/index.html index 1e7ffb78e..2346c3cee 100644 --- a/public/index.html +++ b/public/index.html @@ -1491,7 +1491,10 @@
- +
+ + +
@@ -1570,7 +1573,10 @@
- +
+ + +
@@ -1765,6 +1771,14 @@ +
+
+
+
 entries
+
+
+
+
diff --git a/public/scripts/tags.js b/public/scripts/tags.js index 6b489ae16..05301a38c 100644 --- a/public/scripts/tags.js +++ b/public/scripts/tags.js @@ -1,4 +1,4 @@ -import { characters, saveSettingsDebounced, this_chid, selected_button } from "../script.js"; +import { characters, saveSettingsDebounced, this_chid, selected_button, callPopup } from "../script.js"; import { group_rm_panel_mode, selected_group } from "./group-chats.js"; export { @@ -285,6 +285,46 @@ function createTagInput(inputSelector, listSelector) { .focus(onTagInputFocus); // <== show tag list on click } +function onViewTagsListClick() { + const list = document.createElement('div'); + const everything = Object.values(tag_map).flat(); + $(list).append('

Tags

Click on the tag name to edit it.') + + 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); + + list.appendChild(template.get(0)); + } + + callPopup(list.outerHTML, 'text'); +} + +function onTagDeleteClick() { + const id = $(this).closest('.tag_view_item').attr('id'); + for (const key of Object.keys(tag_map)) { + tag_map[key] = tag_map[key].filter(x => x.id !== id); + } + const index = tags.findIndex(x => x.id === id); + tags.splice(index, 1); + $(`.tag[id="${id}"]`).remove(); + $(`.tag_view_item[id="${id}"]`).remove(); + saveSettingsDebounced(); +} + +function onTagRenameInput() { + const id = $(this).closest('.tag_view_item').attr('id'); + const newName = $(this).text(); + const tag = tags.find(x => x.id === id); + tag.name = newName; + $(`.tag[id="${id}"] .tag_name`).text(newName); + saveSettingsDebounced(); +} + $(document).ready(() => { createTagInput('#tagInput', '#tagList'); createTagInput('#groupTagInput', '#groupTagList'); @@ -294,5 +334,8 @@ $(document).ready(() => { $(document).on("click", ".character_select", onCharacterSelectClick); $(document).on("click", ".group_select", onGroupSelectClick); $(document).on("click", ".tag_remove", onTagRemoveClick); - $(document).on("input", '.tag_input', onTagInput); + $(document).on("input", ".tag_input", onTagInput); + $(document).on("click", ".tags_view", onViewTagsListClick); + $(document).on("click", ".tag_delete", onTagDeleteClick); + $(document).on("input", ".tag_view_name", onTagRenameInput); }); \ No newline at end of file diff --git a/public/style.css b/public/style.css index 841dbaad3..6fae63939 100644 --- a/public/style.css +++ b/public/style.css @@ -2379,6 +2379,33 @@ h5 { min-width: 0; } +.tag_controls { + display: flex; + flex-direction: row; + gap: 10px; +} + +.tag_view_item { + display: flex; + flex-direction: row; + align-items: baseline; + gap: 15px; +} + +.tag_view_name { + text-align: left; + flex: 2; +} + +.tag_view_counter { + text-align: right; + flex: 1; +} + +.tag_delete { + padding-right: 0; +} + .tag { border-radius: 5px; border-style: solid; @@ -2407,7 +2434,6 @@ h5 { } .tags { - display: flex; flex-direction: row; flex-wrap: wrap; @@ -2421,30 +2447,12 @@ h5 { } .tags.tags_inline { - /* position: absolute; */ - /* margin-right: 5px; - margin-left: 5px; */ - /* top: 30px; - left: 70px; */ opacity: 0.6; column-gap: 0.2rem; row-gap: 0.2rem; justify-content: flex-start; max-height: 66%; overflow: hidden; - /* max-width: calc(100% - 75px); */ - /* - position: absolute; - margin-right: 5px; - right: 0; - opacity: 0.6; - column-gap: 0.2rem; - row-gap: 0.2rem; - justify-content: flex-end; - max-width: 50%; - max-height: 100%; - overflow: hidden; - */ } .tag_name { @@ -2467,15 +2475,46 @@ h5 { cursor: pointer; } +body .ui-autocomplete { + max-height: 300px; + overflow-y: auto; +} + body .ui-front { z-index: 10000; } body .ui-widget-content { - background-color: var(--SmartThemeFastUIBGColor); + background-color: var(--SmartThemeBlurTintColor); + border: 1px solid var(--white30a) !important; + border-radius: 15px; + box-shadow: 0 0 5px black; + text-shadow: 0px 0px calc(var(--shadowWidth) * 1px) var(--SmartThemeShadowColor); + backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)*2)); color: var(--SmartThemeBodyColor); } +body .ui-widget-content .ui-state-active { + margin: unset !important; +} + +body .ui-widget-content .ui-menu-item-wrapper { + background: unset; + border: unset; +} + +body .ui-widget-content li { + padding: 0.75rem 1.25rem; + text-decoration: none; + display: flex; + align-items: center; + cursor: pointer; +} + +body .ui-widget-content li:hover { + background-color: var(--SmartThemeEmColor); +} + /* GROUP CHATS */ #rm_group_top_bar { @@ -3555,7 +3594,8 @@ body.no-blur #dialogue_popup, body.no-blur #select_chat_popup, body.no-blur .options-content, body.no-blur #send_form, -body.no-blur .list-group { +body.no-blur .list-group, +body.no-blur .ui-widget-content { background-color: var(--SmartThemeFastUIBGColor) !important; }