Add css class to allow multiple avatar lists

This commit is contained in:
Wolfsblvt 2025-01-24 21:57:47 +01:00
parent 7c9b347116
commit 91dabeff53
4 changed files with 17 additions and 4 deletions

View File

@ -231,10 +231,16 @@ body.big-avatars .avatars_inline_small .avatar img {
body.big-avatars .avatars_inline {
max-height: calc(var(--avatar-base-height) * var(--big-avatar-height-factor) + 2 * var(--avatar-base-border-radius));
}
body.big-avatars .avatars_inline.avatars_multiline {
max-height: fit-content;
}
body.big-avatars .avatars_inline.avatars_inline_small {
height: calc(var(--avatar-base-height) * var(--big-avatar-height-factor) * var(--inline-avatar-small-factor) + 2 * var(--avatar-base-border-radius));
}
body.big-avatars .avatars_inline.avatars_inline_small.avatars_multiline {
height: inherit;
}
body:not(.big-avatars) .avatars_inline_small .avatar_collage {
min-width: calc(var(--avatar-base-width) * var(--inline-avatar-small-factor));

View File

@ -4981,7 +4981,7 @@
<div data-i18n="Character">Character</div>
</div>
</div>
<div id="persona_connections_list" class="text_muted m-b-1 avatars_inline flex-container scroll-reset-container expander" data-i18n="persona_no_connections">
<div id="persona_connections_list" class="text_muted m-b-1 avatars_inline avatars_multiline scroll-reset-container expander" data-i18n="persona_no_connections">
[No connections]
</div>
</div>
@ -5039,7 +5039,7 @@
<div class="right_menu_button fa-solid fa-list-ul" id="rm_button_characters" title="Select/Create Characters" data-i18n="[title]Select/Create Characters"></div>
</div>
<div id="HotSwapWrapper" class="alignitemscenter flex-container margin0auto wide100p">
<div class="hotswap avatars_inline flex-container scroll-reset-container expander" data-i18n="[no_favs]Favorite characters to add them to HotSwaps" no_favs="Favorite characters to add them to HotSwaps"></div>
<div class="hotswap avatars_inline scroll-reset-container expander" data-i18n="[no_favs]Favorite characters to add them to HotSwaps" no_favs="Favorite characters to add them to HotSwaps"></div>
</div>
</div>
<hr>

View File

@ -558,7 +558,7 @@ export async function askForPersonaSelection(title, text, personas) {
content.appendChild(textElement);
const personaListBlock = document.createElement('div');
personaListBlock.classList.add('persona-list', 'avatars_inline', 'flex-container');
personaListBlock.classList.add('persona-list', 'avatars_inline', 'avatars_multiline');
content.appendChild(personaListBlock);
buildPersonaAvatarList(personaListBlock, personas, { interactable: true });
@ -1201,7 +1201,7 @@ async function loadPersonaForCurrentChat() {
toastr.warning(t`More than one persona is connected to this character. Using the first available persona for this chat.`, t`Automatic Persona Selection`);
} else {
chatPersona = await askForPersonaSelection(t`Select Persona`,
t`Select one of multiple with this character connected persona to use for this chat`,
t`Multiple personas are connected to this character. Select a persona to use for this chat.`,
connectedPersonas);
}
}

View File

@ -1191,6 +1191,8 @@ body.swipeAllMessages .mes:not(.last_mes) .swipes-counter {
}
.avatars_inline {
display: flex;
gap: 5px;
flex-wrap: wrap;
overflow: hidden;
max-height: calc(var(--avatar-base-height) + 2 * var(--avatar-base-border-radius));
@ -1227,6 +1229,11 @@ body.swipeAllMessages .mes:not(.last_mes) .swipes-counter {
margin-right: calc(var(--avatar-base-border-radius));
}
.avatars_multiline {
max-height: fit-content;
height: inherit;
}
.mes_block {
padding-top: 0;
padding-left: 10px;