rixty
/
SillyTavern
mirror of https://github.com/SillyTavern/SillyTavern.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

#1761 Personas grid view (slight return)

This commit is contained in:
Cohee 2024-01-31 12:13:01 +02:00
parent 33c452df3e
commit 872418757c
4 changed files with 39 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
public/css/toggle-dependent.css
View File

@ -36,7 +36,8 @@ body.charListGrid #rm_print_characters_block {
}
body.charListGrid #rm_print_characters_block .bogus_folder_select,
body.charListGrid #rm_print_characters_block .character_select {
body.charListGrid #rm_print_characters_block .character_select,
#user_avatar_block.gridView .avatar-container {
width: 30%;
align-items: flex-start;
height: min-content;
@ -47,7 +48,8 @@ body.charListGrid #rm_print_characters_block .character_select {
body.charListGrid #rm_print_characters_block .bogus_folder_select .ch_name,
body.charListGrid #rm_print_characters_block .character_select .ch_name,
body.charListGrid #rm_print_characters_block .group_select .ch_name {
body.charListGrid #rm_print_characters_block .group_select .ch_name,
#user_avatar_block.gridView .avatar-container .ch_name {
width: 100%;
max-width: 100px;
text-align: center;
@ -55,12 +57,20 @@ body.charListGrid #rm_print_characters_block .group_select .ch_name {
}
body.charListGrid #rm_print_characters_block .bogus_folder_select .character_name_block,
body.charListGrid #rm_print_characters_block .character_select .character_name_block {
body.charListGrid #rm_print_characters_block .character_select .character_name_block,
#user_avatar_block.gridView .avatar-container .character_name_block {
width: 100%;
flex-direction: column;
}
#user_avatar_block.gridView .avatar-container .avatar-buttons {
flex-wrap: wrap;
justify-content: space-evenly;
}
body.charListGrid #rm_print_characters_block .bogus_folder_select .character_select_container,
body.charListGrid #rm_print_characters_block .character_select .character_select_container {
body.charListGrid #rm_print_characters_block .character_select .character_select_container,
#user_avatar_block.gridView .avatar-container .character_select_container {
width: 100%;
justify-content: center;
max-width: 100px;
@ -83,7 +93,8 @@ body.charListGrid #rm_print_characters_block .bogus_folder_counter_block,
body.charListGrid #rm_print_characters_block .ch_description,
body.charListGrid #rm_print_characters_block .tags_inline,
body.charListGrid #rm_print_characters_block .character_version,
body.charListGrid #rm_print_characters_block .ch_avatar_url {
body.charListGrid #rm_print_characters_block .ch_avatar_url,
#user_avatar_block.gridView .avatar-container .ch_description {
display: none;
}
@ -150,7 +161,7 @@ body.big-avatars .avatar_collage {
}
body.big-avatars .ch_description,
.avatar-container .ch_description {
body.big-avatars .avatar-container .ch_description {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

5
public/index.html
View File

@ -3656,7 +3656,7 @@
</div>
</div>
<div id="persona-management-block" class="flex-container wide100p flexGap10">
<div class="flex1">
<div class="flex1 overflowHidden">
<div class="flex-container marginBot10 alignitemscenter">
<div id="create_dummy_persona" class="menu_button menu_button_icon" title="Create a dummy persona" data-i18n="[title]Create a dummy persona">
<i class="fa-solid fa-person-circle-question fa-fw"></i>
@ -3664,6 +3664,7 @@
</div>
<input id="persona_search_bar" class="text_pole width100p flex1 margin0" type="search" data-i18n="[placeholder]Search..." placeholder="Search..." maxlength="100">
<div id="persona_pagination_container" class="flex1"></div>
<i id="persona_grid_toggle" class="fa-solid fa-table-cells-large menu_button" title="Toggle grid view"></i>
</div>
<div id="user_avatar_block">
<div class="avatar_upload">+</div>
@ -5326,7 +5327,7 @@
<div id="rawPromptWrapper" class="tokenItemizingSubclass"></div>
</div>
<div id="user_avatar_template" class="template_element">
<div class="avatar-container wide100p">
<div class="avatar-container">
<div imgfile="" class="avatar">
<img src="" alt="User Avatar">
</div>

13
public/scripts/personas.js
View File

@ -21,6 +21,13 @@ import { persona_description_positions, power_user } from './power-user.js';
import { getTokenCount } from './tokenizers.js';
import { debounce, delay, download, parseJsonFile } from './utils.js';
const GRID_STORAGE_KEY = 'Personas_GridView';
function switchPersonaGridView() {
const state = localStorage.getItem(GRID_STORAGE_KEY) === 'true';
$('#user_avatar_block').toggleClass('gridView', state);
}
/**
* Uploads an avatar file to the server
* @param {string} url URL for the avatar file
@ -633,6 +640,11 @@ export function initPersonas() {
$('#personas_backup').on('click', onBackupPersonas);
$('#personas_restore').on('click', () => $('#personas_restore_input').trigger('click'));
$('#personas_restore_input').on('change', onPersonasRestoreInput);
$('#persona_grid_toggle').on('click', () => {
const state = localStorage.getItem(GRID_STORAGE_KEY) === 'true';
localStorage.setItem(GRID_STORAGE_KEY, String(!state));
switchPersonaGridView();
});
eventSource.on('charManagementDropdown', (target) => {
if (target === 'convert_to_persona') {
@ -640,4 +652,5 @@ export function initPersonas() {
}
});
eventSource.on(event_types.CHAT_CHANGED, setChatLockedPersona);
switchPersonaGridView();
}

14
public/style.css
View File

@ -1586,10 +1586,10 @@ input[type=search]:focus::-webkit-search-cancel-button {
}
/*applies to both groups and solos chars in the char list*/
#rm_print_characters_block .ch_name {
#rm_print_characters_block .ch_name,
.avatar-container .ch_name {
flex: 1;
white-space: nowrap;
/* max-width: calc(100% - 29px); */
overflow: hidden;
text-overflow: ellipsis;
display: block;
@ -1828,6 +1828,9 @@ input[type=search]:focus::-webkit-search-cancel-button {
border-radius: 10px;
cursor: pointer;
margin-bottom: 1px;
width: 100%;
outline: 2px solid transparent;
border: 2px solid transparent;
}
grammarly-extension {
@ -2272,7 +2275,7 @@ input[type="checkbox"]:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button
#user_avatar_block {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
justify-content: space-around;
}
.avatar-container .avatar {
@ -2284,11 +2287,6 @@ input[type="checkbox"]:not(#nav-toggle):not(#rm_button_panel_pin):not(#lm_button
outline: 2px solid transparent;
}
.avatar-container {
outline: 2px solid transparent;
border: 2px solid transparent;
}
.avatar-container.selected {
border: 2px solid rgba(255, 255, 255, 0.7);
}