diff --git a/public/index.html b/public/index.html index 27cd28232..adc975d69 100644 --- a/public/index.html +++ b/public/index.html @@ -3059,4 +3059,4 @@ - + \ No newline at end of file diff --git a/public/script.js b/public/script.js index 734e7a544..8be370225 100644 --- a/public/script.js +++ b/public/script.js @@ -5501,7 +5501,7 @@ $(document).ready(function () { $("#chat").on('scroll', debounce(() => { updateVisibleDivs('#chat', false); - }, 5)); + }, 10)); let S_TAFocused = false; let S_TAPreviouslyFocused = false; diff --git a/public/scripts/tags.js b/public/scripts/tags.js index a102c1bac..8360525bb 100644 --- a/public/scripts/tags.js +++ b/public/scripts/tags.js @@ -26,9 +26,14 @@ const TAG_LOGIC_AND = true; // switch to false to use OR logic for combining tag const CHARACTER_SELECTOR = '#rm_print_characters_block > div'; const ACTIONABLE_TAGS = { - VIEW: { id: 2, name: 'Manage tags', color: 'rgba(150, 100, 100, 0.5)', action: onViewTagsListClick, icon: 'fa-solid fa-tags' }, + FAV: { id: 1, name: 'Show only favorites', color: 'rgba(255, 255, 0, 0.5)', action: applyFavFilter, icon: 'fa-solid fa-star' }, GROUP: { id: 0, name: 'Show only groups', color: 'rgba(100, 100, 100, 0.5)', action: filterByGroups, icon: 'fa-solid fa-users' }, + HINT: { id: 3, name: 'Show Tag List', color: 'rgba(150, 100, 100, 0.5)', action: onTagListHintClick, icon: 'fa-solid fa-tags' }, +} + +const InListActionable = { + VIEW: { id: 2, name: 'Manage tags', color: 'rgba(150, 100, 100, 0.5)', action: onViewTagsListClick, icon: 'fa-solid fa-gear' }, } const DEFAULT_TAGS = [ @@ -233,6 +238,9 @@ function appendTagToList(listElement, tag, { removable, selectable, action }) { tagElement.on('click', () => action.bind(tagElement)()); tagElement.addClass('actionable'); } + if (action && tag.id === 2) { + tagElement.addClass('innerActionable hidden'); + } $(listElement).append(tagElement); } @@ -291,6 +299,9 @@ function printTags() { $(FILTER_SELECTOR).find('.actionable').last().addClass('margin-right-10px'); + for (const tag of Object.values(InListActionable)) { + appendTagToList(FILTER_SELECTOR, tag, { removable: false, selectable: false, action: tag.action }); + } for (const tag of tagsToDisplay) { appendTagToList(FILTER_SELECTOR, tag, { removable: false, selectable: true, }); } @@ -437,6 +448,13 @@ function onTagColorize(evt) { saveSettingsDebounced(); } +function onTagListHintClick() { + console.log($(this)); + $(this).toggleClass('selected'); + $(this).siblings(".tag:not(.actionable)").toggle(100); + $(this).siblings(".innerActionable").toggleClass('hidden'); +} + $(document).ready(() => { createTagInput('#tagInput', '#tagList'); createTagInput('#groupTagInput', '#groupTagList'); diff --git a/public/style.css b/public/style.css index eb5d879e6..fbab4afab 100644 --- a/public/style.css +++ b/public/style.css @@ -130,6 +130,7 @@ table.responsiveTable { padding: 5px; } +.hidden, .hiddenByScroll { visibility: hidden !important; } @@ -2332,6 +2333,7 @@ input[type="range"]::-webkit-slider-thumb { .mes_buttons .mes_edit, .mes_buttons .mes_bookmark, .extraMesButtonsHint, +#tagListHint, .extraMesButtons div { cursor: pointer; transition: 0.3s ease-in-out; @@ -2342,6 +2344,7 @@ input[type="range"]::-webkit-slider-thumb { .mes_buttons .mes_edit:hover, .mes_buttons .mes_bookmark:hover, .extraMesButtonsHint:hover, +#tagListHint:hover, .extraMesButtons div:hover { opacity: 1; } @@ -2735,9 +2738,13 @@ h5 { width: fit-content; min-width: 0; text-shadow: none !important; - } +#rm_tag_filter .tag:not(.actionable) { + display: none; +} + + .tag.actionable { border-radius: 50%; aspect-ratio: 1 / 1; @@ -2745,10 +2752,21 @@ h5 { min-width: calc(var(--mainFontSize) * 2); font-size: calc(var(--mainFontSize) * 1); padding: 0; + display: flex; justify-content: center; align-items: center; } +#tagListHint { + align-self: center; + display: flex; + margin-right: 10px; +} + +.opacity1 { + opacity: 1 !important; +} + .margin-right-10px { margin-right: 10px; } @@ -2852,7 +2870,7 @@ body .ui-front { body .ui-widget-content { background-color: var(--SmartThemeBlurTintColor); border: 1px solid var(--white30a) !important; - border-radius: 15px; + border-radius: 10px; box-shadow: 0 0 5px black; text-shadow: 0px 0px calc(var(--shadowWidth) * 1px) var(--SmartThemeShadowColor); backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)*2)); @@ -2869,15 +2887,18 @@ body .ui-widget-content .ui-menu-item-wrapper { } body .ui-widget-content li { - padding: 0.75rem 1.25rem; + padding: 5px; text-decoration: none; display: flex; align-items: center; cursor: pointer; + opacity: 0.5; + transition: all 200ms; } body .ui-widget-content li:hover { - background-color: var(--SmartThemeEmColor); + /* background-color: var(--SmartThemeEmColor); */ + opacity: 1; } /* GROUP CHATS */