From 87915a5f79ccc940c7acf196284d0d704d15b0e2 Mon Sep 17 00:00:00 2001 From: Wolfsblvt Date: Sat, 22 Jun 2024 08:15:31 +0200 Subject: [PATCH 1/3] Gray out bogus folders if they don't drill down - Implements and resolves #2404 - Common CSS class for entities in char list - entity flag to lower opacity for entities that aren't really useful for navigation --- public/index.html | 6 +++--- public/script.js | 18 ++++++++++++++---- public/scripts/tags.js | 8 +++++--- public/style.css | 4 ++++ 4 files changed, 26 insertions(+), 10 deletions(-) diff --git a/public/index.html b/public/index.html index 97c2f3ec4..841f4831c 100644 --- a/public/index.html +++ b/public/index.html @@ -5465,7 +5465,7 @@
-
+
@@ -5766,7 +5766,7 @@
-
+
@@ -5784,7 +5784,7 @@
-
+
diff --git a/public/script.js b/public/script.js index ca2765ef8..4b877c3d4 100644 --- a/public/script.js +++ b/public/script.js @@ -1368,7 +1368,7 @@ export async function printCharacters(fullRefresh = false) { nextText: '>', formatNavigator: PAGINATION_TEMPLATE, showNavigator: true, - callback: function (data) { + callback: function (/** @type {Entity[]} */ data) { $(listId).empty(); if (power_user.bogus_folders && isBogusFolderOpen()) { $(listId).append(getBackBlock()); @@ -1388,7 +1388,7 @@ export async function printCharacters(fullRefresh = false) { displayCount++; break; case 'tag': - $(listId).append(getTagBlock(i.item, i.entities, i.hidden)); + $(listId).append(getTagBlock(i.item, i.entities, i.hidden, i.isUseless)); break; } } @@ -1442,8 +1442,9 @@ function verifyCharactersSearchSortRule() { * @property {Character|Group|import('./scripts/tags.js').Tag|*} item - The item * @property {string|number} id - The id * @property {'character'|'group'|'tag'} type - The type of this entity (character, group, tag) - * @property {Entity[]} [entities] - An optional list of entities relevant for this item - * @property {number} [hidden] - An optional number representing how many hidden entities this entity contains + * @property {Entity[]?} [entities=null] - An optional list of entities relevant for this item + * @property {number?} [hidden=null] - An optional number representing how many hidden entities this entity contains + * @property {boolean?} [isUseless=null] - Specifies if the entity is useless (not relevant, but should still be displayed for consistency) and should be displayed greyed out */ /** @@ -1538,6 +1539,15 @@ export function getEntitiesList({ doFilter = false, doSort = true } = {}) { } } + // Final step, updating some properties after the last filter run + const nonTagEntitiesCount = entities.filter(entity => entity.type !== 'tag').length; + for (const entity of entities) { + if (entity.type === 'tag') { + if (entity.entities?.length == nonTagEntitiesCount) entity.isUseless = true; + } + } + + // Sort before returning if requested if (doSort) { sortEntitiesList(entities); } diff --git a/public/scripts/tags.js b/public/scripts/tags.js index 519fc47eb..9175ee284 100644 --- a/public/scripts/tags.js +++ b/public/scripts/tags.js @@ -283,11 +283,12 @@ function chooseBogusFolder(source, tagId, remove = false) { * Builds the tag block for the specified item. * * @param {Tag} tag The tag item - * @param {*} entities The list ob sub items for this tag - * @param {*} hidden A count of how many sub items are hidden + * @param {any[]} entities The list ob sub items for this tag + * @param {number} hidden A count of how many sub items are hidden + * @param {boolean} isUseless Whether the tag is useless (should be displayed greyed out) * @returns The html for the tag block */ -function getTagBlock(tag, entities, hidden = 0) { +function getTagBlock(tag, entities, hidden = 0, isUseless = false) { let count = entities.length; const tagFolder = TAG_FOLDER_TYPES[tag.folder_type]; @@ -300,6 +301,7 @@ function getTagBlock(tag, entities, hidden = 0) { template.find('.bogus_folder_hidden_counter').text(hidden > 0 ? `${hidden} hidden` : ''); template.find('.bogus_folder_counter').text(`${count} ${count != 1 ? 'characters' : 'character'}`); template.find('.bogus_folder_icon').addClass(tagFolder.fa_icon); + if (isUseless) template.addClass('useless'); // Fill inline character images buildAvatarList(template.find('.bogus_folder_avatars_block'), entities); diff --git a/public/style.css b/public/style.css index 75a77295d..6ca69bcf7 100644 --- a/public/style.css +++ b/public/style.css @@ -2363,6 +2363,10 @@ input[type="file"] { padding: 1px; } +#rm_print_characters_block .entity_block.useless { + opacity: 0.25; +} + #rm_ch_create_block { display: none; overflow-y: auto; From c79f1e4360019ce78efbed28face56b4de0a617c Mon Sep 17 00:00:00 2001 From: Wolfsblvt Date: Sat, 22 Jun 2024 08:52:13 +0200 Subject: [PATCH 2/3] Fix image enlarge popup image sizing --- public/style.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/public/style.css b/public/style.css index 75a77295d..896b9665f 100644 --- a/public/style.css +++ b/public/style.css @@ -368,6 +368,8 @@ input[type='checkbox']:focus-visible { .img_enlarged_container { padding: 10px; + height: 100%; + width: 100%; } .img_enlarged_container pre code, From 07da2461d00dee9b1acbe677963d6ce4c42e97c9 Mon Sep 17 00:00:00 2001 From: Wolfsblvt Date: Sat, 22 Jun 2024 10:04:14 +0200 Subject: [PATCH 3/3] Fix vertical scaling of images in enlarge popup --- public/style.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/public/style.css b/public/style.css index 896b9665f..ad905cf2f 100644 --- a/public/style.css +++ b/public/style.css @@ -367,6 +367,9 @@ input[type='checkbox']:focus-visible { } .img_enlarged_container { + display: flex; + flex-direction: column; + justify-content: flex-end; padding: 10px; height: 100%; width: 100%; @@ -4481,7 +4484,7 @@ a { max-height: 100%; border-radius: 2px; border: 1px solid transparent; - outline: 1px solid var(--SmartThemeBorderColor); + object-fit: contain; } .cropper-container {