mirror of
https://github.com/SillyTavern/SillyTavern.git
synced 2025-06-05 21:59:27 +02:00
Move persona buttons to right panel
- Move all buttons from the persona list to the right panel, to the already existing ones - Common CSS class/style for '.buttons_block' - Common CSS style for a red button - Refactored a few persona buttons' functionalities
This commit is contained in:
Wolfsblvt
@ -4957,14 +4957,16 @@
|
||||
<div class="persona_management_current_persona">
|
||||
<h4 class="standoutHeader" data-i18n="Current Persona">Current Persona</h4>
|
||||
|
||||
<h4 data-i18n="Name">Name</h4>
|
||||
<div class="change_name">
|
||||
<input id="your_name" name="your_name" data-i18n="[placeholder]Enter your name" placeholder="Enter your name" class="text_pole wide100p" value="" autocomplete="off">
|
||||
<div id="your_name_button" class="menu_button fa-solid fa-check" title="Click to set a new User Name" data-i18n="[title]Click to set a new User Name">
|
||||
</div>
|
||||
<div id="sync_name_button" class="menu_button fa-solid fa-sync" title="Click to set user name for all messages" data-i18n="[title]Click to set user name for all messages">
|
||||
</div>
|
||||
<div id="persona_lore_button" class="menu_button fa-solid fa-globe" title="Persona Lore Alt+Click to open the lorebook" data-i18n="[title]Persona Lore Alt+Click to open the lorebook">
|
||||
<div id="persona_controls" class="flex-container">
|
||||
<h5 id="your_name" class="persona_name">[Persona Name]</h5>
|
||||
<div class="persona_controls_buttons_block buttons_block">
|
||||
<div id="persona_rename_button" class="menu_button fa-solid fa-pencil" title="Rename Persona / Bind Name To Avatar" data-i18n="[title]Rename Persona / Bind Name To Avatar"></div>
|
||||
<div id="sync_name_button" class="menu_button fa-solid fa-sync" title="Click to set user name for all messages" data-i18n="[title]Click to set user name for all messages"></div>
|
||||
<div id="persona_lore_button" class="menu_button fa-solid fa-globe" title="Persona Lore Alt+Click to open the lorebook" data-i18n="[title]Persona Lore Alt+Click to open the lorebook"></div>
|
||||
|
||||
<div id="persona_set_image_button" class="menu_button fa-solid fa-image" title="Change Persona Image" data-i18n="[title]Change Persona Image"></div>
|
||||
<div id="persona_duplicate_button" class="menu_button fa-solid fa-clone" title="Duplicate Persona" data-i18n="[title]Duplicate Persona"></div>
|
||||
<div id="persona_delete_button" class="menu_button fa-solid fa-skull red_button" title="Delete Persona" data-i18n="[title]Delete Persona"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -5109,13 +5111,13 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-container flexFlowColumn expander flexNoGap">
|
||||
<div id="avatar_div" class="avatar_div alignitemsflexstart justifySpaceBetween flexnowrap">
|
||||
<div id="avatar_div" class="avatar_div buttons_block alignitemsflexstart justifySpaceBetween flexnowrap">
|
||||
<label id="avatar_div_div" class="add_avatar avatar" for="add_avatar_button" title="Click to select a new avatar for this character" data-i18n="[title]Click to select a new avatar for this character">
|
||||
<img id="avatar_load_preview" src="img/ai4.png" alt="avatar">
|
||||
<input hidden type="file" id="add_avatar_button" name="avatar" accept="image/*">
|
||||
</label>
|
||||
<div class="flex-container" id="avatar_controls">
|
||||
<div class="form_create_bottom_buttons_block">
|
||||
<div class="form_create_bottom_buttons_block buttons_block">
|
||||
<div id="rm_button_back" class="menu_button fa-solid fa-left-long "></div>
|
||||
<!-- <div id="renameCharButton" class="menu_button fa-solid fa-user-pen" title="Rename Character"></div> -->
|
||||
<div id="favorite_button" class="menu_button fa-solid fa-star" title="Add to Favorites" data-i18n="[title]Add to Favorites"></div>
|
||||
@ -5131,7 +5133,7 @@
|
||||
<label for="create_button" id="create_button_label" class="menu_button fa-solid fa-user-check" title="Create Character" data-i18n="[title]Create Character">
|
||||
<input type="submit" id="create_button" name="create_button">
|
||||
</label>
|
||||
<div id="delete_button" class="menu_button fa-solid fa-skull " title="Delete Character" data-i18n="[title]Delete Character"></div>
|
||||
<div id="delete_button" class="menu_button fa-solid fa-skull red_button" title="Delete Character" data-i18n="[title]Delete Character"></div>
|
||||
</div>
|
||||
<label class="flex1 height100p" for="char-management-dropdown">
|
||||
<select id="char-management-dropdown" class="text_pole">
|
||||
@ -5469,23 +5471,23 @@
|
||||
<div class="wide100p character_name_block">
|
||||
<span class="ch_name flex1"></span>
|
||||
<div class="avatar-buttons">
|
||||
<button class="menu_button bind_user_name" title="Bind user name to that avatar" data-i18n="[title]Bind user name to that avatar">
|
||||
<!-- <button class="menu_button bind_user_name" title="Bind user name to that avatar" data-i18n="[title]Bind user name to that avatar">
|
||||
<i class="fa-fw fa-solid fa-user-edit fa-sm"></i>
|
||||
</button>
|
||||
<button class="menu_button set_persona_image" title="Change persona image" data-i18n="[title]Change persona image">
|
||||
<i class="fa-fw fa-solid fa-image fa-sm"></i>
|
||||
</button>
|
||||
<!--
|
||||
|
||||
<button class="menu_button set_default_persona" title="Select this as default persona for the new chats." data-i18n="[title]Select this as default persona for the new chats.">
|
||||
<i class="fa-fw fa-solid fa-crown fa-sm"></i>
|
||||
</button>
|
||||
-->
|
||||
|
||||
<button class="menu_button duplicate_persona" title="Duplicate persona" data-i18n="[title]Duplicate persona">
|
||||
<i class="fa-fw fa-solid fa-clone fa-sm"></i>
|
||||
</button>
|
||||
<button class="menu_button delete_avatar" title="Delete persona" data-i18n="[title]Delete persona">
|
||||
<i class="fa-fw fa-solid fa-trash-alt fa-sm"></i>
|
||||
</button>
|
||||
</button> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="ch_description"></div>
|
||||
|
||||
@ -6810,7 +6810,7 @@ export function setUserName(value, { toastPersonaNameChange = true } = {}) {
|
||||
if (name1 === undefined || name1 == '')
|
||||
name1 = default_user_name;
|
||||
console.log(`User name changed to ${name1}`);
|
||||
$('#your_name').val(name1);
|
||||
$('#your_name').text(name1);
|
||||
if (toastPersonaNameChange && power_user.persona_show_notifications) {
|
||||
toastr.success(t`Your messages will now be sent as ${name1}`, t`Persona Changed`);
|
||||
}
|
||||
@ -6864,7 +6864,7 @@ export async function getSettings() {
|
||||
settings = JSON.parse(data.settings);
|
||||
if (settings.username !== undefined && settings.username !== '') {
|
||||
name1 = settings.username;
|
||||
$('#your_name').val(name1);
|
||||
$('#your_name').text(name1);
|
||||
}
|
||||
|
||||
await setUserControls(data.enable_accounts);
|
||||
|
||||
@ -466,6 +466,8 @@ const countPersonaDescriptionTokens = debounce(async () => {
|
||||
}, debounce_timeout.relaxed);
|
||||
|
||||
export function setPersonaDescription() {
|
||||
$('#your_name').text(name1);
|
||||
|
||||
if (power_user.persona_description_position === persona_description_positions.AFTER_CHAR) {
|
||||
power_user.persona_description_position = persona_description_positions.IN_PROMPT;
|
||||
}
|
||||
@ -674,9 +676,8 @@ async function updatePersonaNameIfExists(avatarId, newName) {
|
||||
saveSettingsDebounced();
|
||||
}
|
||||
|
||||
async function bindUserNameToPersona(e) {
|
||||
e?.stopPropagation();
|
||||
const avatarId = $(this).closest('.avatar-container').find('.avatar').attr('imgfile');
|
||||
async function bindUserNameToPersona() {
|
||||
const avatarId = user_avatar;
|
||||
|
||||
if (!avatarId) {
|
||||
console.warn('No avatar id found');
|
||||
@ -719,6 +720,7 @@ async function bindUserNameToPersona(e) {
|
||||
if (isCurrentPersona) {
|
||||
console.log(`Auto-updating user name to ${personaName}`);
|
||||
setUserName(personaName);
|
||||
await updatePersonaNameIfExists(user_avatar, personaName);
|
||||
}
|
||||
} else {
|
||||
// If the user clicked ok, but didn't enter a name, delete the persona
|
||||
@ -730,6 +732,8 @@ async function bindUserNameToPersona(e) {
|
||||
saveSettingsDebounced();
|
||||
await getUserAvatars(true, avatarId);
|
||||
setPersonaDescription();
|
||||
|
||||
retriggerFirstMessageOnEmptyChat();
|
||||
}
|
||||
|
||||
function selectCurrentPersona({ toastPersonaNameChange = true } = {}) {
|
||||
@ -969,22 +973,15 @@ async function lockPersona(type = 'chat') {
|
||||
}
|
||||
|
||||
|
||||
async function deleteUserAvatar(e) {
|
||||
e?.stopPropagation();
|
||||
const avatarId = $(this).closest('.avatar-container').find('.avatar').attr('imgfile');
|
||||
async function deleteUserAvatar() {
|
||||
const avatarId = user_avatar;
|
||||
|
||||
if (!avatarId) {
|
||||
console.warn('No avatar id found');
|
||||
return;
|
||||
}
|
||||
|
||||
if (avatarId == user_avatar) {
|
||||
console.warn(`User tried to delete their current avatar ${avatarId}`);
|
||||
toastr.warning(t`You cannot delete the avatar you are currently using`, t`Persona Warning`);
|
||||
return;
|
||||
}
|
||||
|
||||
const confirm = await Popup.show.confirm(t`Are you sure you want to delete this avatar?`, t`All information associated with its linked persona will be lost.`);
|
||||
const confirm = await Popup.show.confirm(t`Delete Persona`,
|
||||
t`Are you sure you want to delete this avatar?` + '<br />' + t`All information associated with its linked persona will be lost.`);
|
||||
|
||||
if (!confirm) {
|
||||
console.debug('User cancelled deleting avatar');
|
||||
@ -1016,8 +1013,9 @@ async function deleteUserAvatar(e) {
|
||||
}
|
||||
|
||||
saveSettingsDebounced();
|
||||
await getUserAvatars();
|
||||
updatePersonaLockIcons();
|
||||
|
||||
// Use the existing mechanism to re-render the persona list and choose the next persona here
|
||||
await loadPersonaForCurrentChat({ doRender: true });
|
||||
}
|
||||
}
|
||||
|
||||
@ -1237,9 +1235,9 @@ function updatePersonaLockIcons() {
|
||||
$('#lock_persona_to_char i.icon').toggleClass('fa-unlock', !hasCharLock);
|
||||
}
|
||||
|
||||
async function loadPersonaForCurrentChat() {
|
||||
async function loadPersonaForCurrentChat({ doRender = false } = {}) {
|
||||
// Cache persona list to check if they exist
|
||||
const userAvatars = await getUserAvatars(false);
|
||||
const userAvatars = await getUserAvatars(doRender);
|
||||
|
||||
// Define a persona for this chat
|
||||
let chatPersona = '';
|
||||
@ -1500,9 +1498,8 @@ async function duplicatePersona(avatarId) {
|
||||
}
|
||||
|
||||
export function initPersonas() {
|
||||
$(document).on('click', '.bind_user_name', bindUserNameToPersona);
|
||||
$(document).on('click', '.set_default_persona', toggleDefaultPersonaClicked);
|
||||
$(document).on('click', '.delete_avatar', deleteUserAvatar);
|
||||
$('#persona_delete_button').on('click', deleteUserAvatar);
|
||||
$('#lock_persona_default').on('click', () => togglePersonaLock('default'));
|
||||
$('#lock_user_name').on('click', () => togglePersonaLock('chat'));
|
||||
$('#lock_persona_to_char').on('click', () => togglePersonaLock('character'));
|
||||
@ -1548,11 +1545,13 @@ export function initPersonas() {
|
||||
retriggerFirstMessageOnEmptyChat();
|
||||
});
|
||||
|
||||
$('#your_name_button').click(async function () {
|
||||
$('#persona_rename_button').click(async function () {
|
||||
const userName = String($('#your_name').val()).trim();
|
||||
setUserName(userName);
|
||||
await updatePersonaNameIfExists(user_avatar, userName);
|
||||
retriggerFirstMessageOnEmptyChat();
|
||||
// TODO: Do both binding and/or rename?
|
||||
//bindUserNameToPersona();
|
||||
});
|
||||
|
||||
$(document).on('click', '#user_avatar_block .avatar_upload', function () {
|
||||
@ -1560,28 +1559,15 @@ export function initPersonas() {
|
||||
$('#avatar_upload_file').trigger('click');
|
||||
});
|
||||
|
||||
$(document).on('click', '#user_avatar_block .duplicate_persona', function (e) {
|
||||
e.stopPropagation();
|
||||
const avatarId = $(this).closest('.avatar-container').find('.avatar').attr('imgfile');
|
||||
$('#persona_duplicate_button').on('click', () => duplicatePersona(user_avatar));
|
||||
|
||||
if (!avatarId) {
|
||||
$('#persona_set_image_button').on('click', function () {
|
||||
if (!user_avatar) {
|
||||
console.log('no imgfile');
|
||||
return;
|
||||
}
|
||||
|
||||
duplicatePersona(avatarId);
|
||||
});
|
||||
|
||||
$(document).on('click', '#user_avatar_block .set_persona_image', function (e) {
|
||||
e.stopPropagation();
|
||||
const avatarId = $(this).closest('.avatar-container').find('.avatar').attr('imgfile');
|
||||
|
||||
if (!avatarId) {
|
||||
console.log('no imgfile');
|
||||
return;
|
||||
}
|
||||
|
||||
$('#avatar_upload_overwrite').val(avatarId);
|
||||
$('#avatar_upload_overwrite').val(user_avatar);
|
||||
$('#avatar_upload_file').trigger('click');
|
||||
});
|
||||
|
||||
|
||||
@ -2919,6 +2919,16 @@ select option:not(:checked) {
|
||||
filter: grayscale(0.5);
|
||||
}
|
||||
|
||||
#persona_controls .persona_name {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
margin-right: 10px;
|
||||
font-size: calc(var(--mainFontSize) * 1.25);
|
||||
color: var(--grey50);
|
||||
}
|
||||
|
||||
input[type=search]::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
height: 1em;
|
||||
@ -3395,12 +3405,7 @@ grammarly-extension {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#rm_characters_block .form_create_bottom_buttons_block {
|
||||
justify-content: space-evenly !important;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.form_create_bottom_buttons_block {
|
||||
.buttons_block {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
gap: 5px;
|
||||
@ -3409,18 +3414,21 @@ grammarly-extension {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.form_create_bottom_buttons_block .menu_button {
|
||||
.buttons_block .menu_button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
filter: grayscale(0.5);
|
||||
}
|
||||
|
||||
#delete_button,
|
||||
.red_button,
|
||||
.redWarningBG {
|
||||
background-color: var(--crimson70a) !important;
|
||||
}
|
||||
|
||||
#delete_button:hover,
|
||||
.red_button:hover,
|
||||
.redWarningBG:hover {
|
||||
background-color: var(--fullred) !important;
|
||||
}
|
||||
@ -3614,13 +3622,6 @@ grammarly-extension {
|
||||
min-width: calc(1.25em + 12px);
|
||||
}
|
||||
|
||||
.avatar_div .menu_button,
|
||||
.form_create_bottom_buttons_block .menu_button {
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
filter: grayscale(0.5);
|
||||
}
|
||||
|
||||
.menu_button:hover,
|
||||
.menu_button.active {
|
||||
background-color: var(--white30a);
|
||||
|
||||
Reference in New Issue
Block a user