Add css class to allow multiple avatar lists

91dabeff53cfc769bcfca32a7fcf2bd499aa9742

Wolfsblvt <wolfsblvt@gmail.com>

Parents: 7c9b34711623b283b1d413b2ab71e9726dd6bf16
4 files changed, +17 -4Ignore whitespace
public/css/toggle-dependent.css+6 -0
@@ -231,10 +231,16 @@ body.big-avatars .avatars_inline_small .avatar img {
231body.big-avatars .avatars_inline {231body.big-avatars .avatars_inline {
232 max-height: calc(var(--avatar-base-height) * var(--big-avatar-height-factor) + 2 * var(--avatar-base-border-radius));232 max-height: calc(var(--avatar-base-height) * var(--big-avatar-height-factor) + 2 * var(--avatar-base-border-radius));
233}233}
234body.big-avatars .avatars_inline.avatars_multiline {
235 max-height: fit-content;
236}
234237
235body.big-avatars .avatars_inline.avatars_inline_small {238body.big-avatars .avatars_inline.avatars_inline_small {
236 height: calc(var(--avatar-base-height) * var(--big-avatar-height-factor) * var(--inline-avatar-small-factor) + 2 * var(--avatar-base-border-radius));239 height: calc(var(--avatar-base-height) * var(--big-avatar-height-factor) * var(--inline-avatar-small-factor) + 2 * var(--avatar-base-border-radius));
237}240}
241body.big-avatars .avatars_inline.avatars_inline_small.avatars_multiline {
242 height: inherit;
243}
238244
239body:not(.big-avatars) .avatars_inline_small .avatar_collage {245body:not(.big-avatars) .avatars_inline_small .avatar_collage {
240 min-width: calc(var(--avatar-base-width) * var(--inline-avatar-small-factor));246 min-width: calc(var(--avatar-base-width) * var(--inline-avatar-small-factor));
public/index.html+2 -2
@@ -4981,7 +4981,7 @@
4981 <div data-i18n="Character">Character</div>4981 <div data-i18n="Character">Character</div>
4982 </div>4982 </div>
4983 </div>4983 </div>
4984 <div id="persona_connections_list" class="text_muted m-b-1 avatars_inline flex-container scroll-reset-container expander" data-i18n="persona_no_connections">4984 <div id="persona_connections_list" class="text_muted m-b-1 avatars_inline avatars_multiline scroll-reset-container expander" data-i18n="persona_no_connections">
4985 [No connections]4985 [No connections]
4986 </div>4986 </div>
4987 </div>4987 </div>
@@ -5039,7 +5039,7 @@
5039 <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>5039 <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>
5040 </div>5040 </div>
5041 <div id="HotSwapWrapper" class="alignitemscenter flex-container margin0auto wide100p">5041 <div id="HotSwapWrapper" class="alignitemscenter flex-container margin0auto wide100p">
5042 <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>5042 <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>
5043 </div>5043 </div>
5044 </div>5044 </div>
5045 <hr>5045 <hr>
public/scripts/personas.js+2 -2
@@ -558,7 +558,7 @@ export async function askForPersonaSelection(title, text, personas) {
558 content.appendChild(textElement);558 content.appendChild(textElement);
559559
560 const personaListBlock = document.createElement('div');560 const personaListBlock = document.createElement('div');
561 personaListBlock.classList.add('persona-list', 'avatars_inline', 'flex-container');561 personaListBlock.classList.add('persona-list', 'avatars_inline', 'avatars_multiline');
562 content.appendChild(personaListBlock);562 content.appendChild(personaListBlock);
563563
564 buildPersonaAvatarList(personaListBlock, personas, { interactable: true });564 buildPersonaAvatarList(personaListBlock, personas, { interactable: true });
@@ -1201,7 +1201,7 @@ async function loadPersonaForCurrentChat() {
1201 toastr.warning(t`More than one persona is connected to this character. Using the first available persona for this chat.`, t`Automatic Persona Selection`);1201 toastr.warning(t`More than one persona is connected to this character. Using the first available persona for this chat.`, t`Automatic Persona Selection`);
1202 } else {1202 } else {
1203 chatPersona = await askForPersonaSelection(t`Select Persona`,1203 chatPersona = await askForPersonaSelection(t`Select Persona`,
1204 t`Select one of multiple with this character connected persona to use for this chat`,1204 t`Multiple personas are connected to this character. Select a persona to use for this chat.`,
1205 connectedPersonas);1205 connectedPersonas);
1206 }1206 }
1207 }1207 }
public/style.css+7 -0
@@ -1191,6 +1191,8 @@ body.swipeAllMessages .mes:not(.last_mes) .swipes-counter {
1191}1191}
11921192
1193.avatars_inline {1193.avatars_inline {
1194 display: flex;
1195 gap: 5px;
1194 flex-wrap: wrap;1196 flex-wrap: wrap;
1195 overflow: hidden;1197 overflow: hidden;
1196 max-height: calc(var(--avatar-base-height) + 2 * var(--avatar-base-border-radius));1198 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 {
1227 margin-right: calc(var(--avatar-base-border-radius));1229 margin-right: calc(var(--avatar-base-border-radius));
1228}1230}
12291231
1232.avatars_multiline {
1233 max-height: fit-content;
1234 height: inherit;
1235}
1236
1230.mes_block {1237.mes_block {
1231 padding-top: 0;1238 padding-top: 0;
1232 padding-left: 10px;1239 padding-left: 10px;