rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-02-09 08:38:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

Replace details view toggle with a button

Browse Source
This commit is contained in:
Cohee 2024-09-08 01:19:52 +03:00
parent 7952b5f2c9
commit 38751d4fe2
4 changed files with 37 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/script.js
View File

@ -10082,7 +10082,7 @@ jQuery(async function () {
}); });
$('#main_api').change(function () { $('#main_api').change(function () {
cancelStatusCheck("Canceled because main api changed"); cancelStatusCheck('Canceled because main api changed');
changeMainAPI(); changeMainAPI();
saveSettingsDebounced(); saveSettingsDebounced();
}); });

51
public/scripts/extensions/connection-manager/index.js
View File

@ -67,7 +67,7 @@ class ConnectionManagerSpinner {
constructor() { constructor() {
// @ts-ignore // @ts-ignore
this.spinnerElement = document.getElementById('connection_profile_spinner'); this.spinnerElement = document.getElementById('connection_profile_spinner');
this.abortController = new AbortController(); this.abortController = new AbortController();
} }
start() { start() {
@ -318,21 +318,21 @@ function renderConnectionProfiles(profiles) {
/** /**
* Renders the content of the details element. * Renders the content of the details element.
* @param {HTMLDetailsElement} details Details element
* @param {HTMLElement} detailsContent Content element of the details * @param {HTMLElement} detailsContent Content element of the details
*/ */
async function renderDetailsContent(details, detailsContent) { async function renderDetailsContent(detailsContent) {
detailsContent.innerHTML = ''; detailsContent.innerHTML = '';
if (details.open) { if (detailsContent.classList.contains('hidden')) {
const selectedProfile = extension_settings.connectionManager.selectedProfile; return;
const profile = extension_settings.connectionManager.profiles.find(p => p.id === selectedProfile); }
if (profile) { const selectedProfile = extension_settings.connectionManager.selectedProfile;
const profileForDisplay = makeFancyProfile(profile); const profile = extension_settings.connectionManager.profiles.find(p => p.id === selectedProfile);
const template = await renderExtensionTemplateAsync(MODULE_NAME, 'view', { profile: profileForDisplay }); if (profile) {
detailsContent.innerHTML = template; const profileForDisplay = makeFancyProfile(profile);
} else { const template = await renderExtensionTemplateAsync(MODULE_NAME, 'view', { profile: profileForDisplay });
detailsContent.textContent = 'No profile selected'; detailsContent.innerHTML = template;
} } else {
detailsContent.textContent = 'No profile selected';
} }
} }
@ -365,7 +365,7 @@ async function renderDetailsContent(details, detailsContent) {
const profileId = selectedProfile.value; const profileId = selectedProfile.value;
extension_settings.connectionManager.selectedProfile = profileId; extension_settings.connectionManager.selectedProfile = profileId;
saveSettingsDebounced(); saveSettingsDebounced();
await renderDetailsContent(details, detailsContent); await renderDetailsContent(detailsContent);
// None option selected // None option selected
if (!profileId) { if (!profileId) {
@ -393,7 +393,7 @@ async function renderDetailsContent(details, detailsContent) {
return; return;
} }
await applyConnectionProfile(profile); await applyConnectionProfile(profile);
await renderDetailsContent(details, detailsContent); await renderDetailsContent(detailsContent);
await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, profile.name); await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, profile.name);
toastr.success('Connection profile reloaded', '', { timeOut: 1500 }); toastr.success('Connection profile reloaded', '', { timeOut: 1500 });
}); });
@ -408,7 +408,7 @@ async function renderDetailsContent(details, detailsContent) {
extension_settings.connectionManager.selectedProfile = profile.id; extension_settings.connectionManager.selectedProfile = profile.id;
saveSettingsDebounced(); saveSettingsDebounced();
renderConnectionProfiles(profiles); renderConnectionProfiles(profiles);
await renderDetailsContent(details, detailsContent); await renderDetailsContent(detailsContent);
await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, profile.name); await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, profile.name);
}); });
@ -421,7 +421,7 @@ async function renderDetailsContent(details, detailsContent) {
return; return;
} }
await updateConnectionProfile(profile); await updateConnectionProfile(profile);
await renderDetailsContent(details, detailsContent); await renderDetailsContent(detailsContent);
saveSettingsDebounced(); saveSettingsDebounced();
await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, profile.name); await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, profile.name);
toastr.success('Connection profile updated', '', { timeOut: 1500 }); toastr.success('Connection profile updated', '', { timeOut: 1500 });
@ -431,15 +431,18 @@ async function renderDetailsContent(details, detailsContent) {
deleteButton.addEventListener('click', async () => { deleteButton.addEventListener('click', async () => {
await deleteConnectionProfile(); await deleteConnectionProfile();
renderConnectionProfiles(profiles); renderConnectionProfiles(profiles);
await renderDetailsContent(details, detailsContent); await renderDetailsContent(detailsContent);
await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, NONE); await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, NONE);
}); });
/** @type {HTMLDetailsElement} */ /** @type {HTMLElement} */
// @ts-ignore const viewDetails = document.getElementById('view_connection_profile');
const details = document.getElementById('connection_profile_details');
const detailsContent = document.getElementById('connection_profile_details_content'); const detailsContent = document.getElementById('connection_profile_details_content');
details.addEventListener('toggle', () => renderDetailsContent(details, detailsContent)); viewDetails.addEventListener('click', async () => {
viewDetails.classList.toggle('active');
detailsContent.classList.toggle('hidden');
await renderDetailsContent(detailsContent);
});
SlashCommandParser.addCommandObject(SlashCommand.fromProps({ SlashCommandParser.addCommandObject(SlashCommand.fromProps({
name: 'profile', name: 'profile',
@ -529,7 +532,7 @@ async function renderDetailsContent(details, detailsContent) {
extension_settings.connectionManager.selectedProfile = profile.id; extension_settings.connectionManager.selectedProfile = profile.id;
saveSettingsDebounced(); saveSettingsDebounced();
renderConnectionProfiles(profiles); renderConnectionProfiles(profiles);
await renderDetailsContent(details, detailsContent); await renderDetailsContent(detailsContent);
return profile.name; return profile.name;
}, },
})); }));
@ -545,7 +548,7 @@ async function renderDetailsContent(details, detailsContent) {
return ''; return '';
} }
await updateConnectionProfile(profile); await updateConnectionProfile(profile);
await renderDetailsContent(details, detailsContent); await renderDetailsContent(detailsContent);
saveSettingsDebounced(); saveSettingsDebounced();
return profile.name; return profile.name;
}, },

9
public/scripts/extensions/connection-manager/settings.html
View File

@ -7,16 +7,11 @@
</div> </div>
<div class="flex-container"> <div class="flex-container">
<select class="text_pole flex1" id="connection_profiles"></select> <select class="text_pole flex1" id="connection_profiles"></select>
<i id="view_connection_profile" class="menu_button fa-solid fa-info-circle" title="View connection profile details" data-i18n="[title]View connection profile details"></i>
<i id="create_connection_profile" class="menu_button fa-solid fa-file-circle-plus" title="Create a new connection profile" data-i18n="[title]Create a new connection profile"></i> <i id="create_connection_profile" class="menu_button fa-solid fa-file-circle-plus" title="Create a new connection profile" data-i18n="[title]Create a new connection profile"></i>
<i id="update_connection_profile" class="menu_button fa-solid fa-save" title="Update a connection profile" data-i18n="[title]Update a connection profile"></i> <i id="update_connection_profile" class="menu_button fa-solid fa-save" title="Update a connection profile" data-i18n="[title]Update a connection profile"></i>
<i id="reload_connection_profile" class="menu_button fa-solid fa-recycle" title="Reload a connection profile" data-i18n="[title]Reload a connection profile"></i> <i id="reload_connection_profile" class="menu_button fa-solid fa-recycle" title="Reload a connection profile" data-i18n="[title]Reload a connection profile"></i>
<i id="delete_connection_profile" class="menu_button fa-solid fa-trash-can" title="Delete a connection profile" data-i18n="[title]Delete a connection profile"></i> <i id="delete_connection_profile" class="menu_button fa-solid fa-trash-can" title="Delete a connection profile" data-i18n="[title]Delete a connection profile"></i>
</div> </div>
<details id="connection_profile_details" class="marginBot10"> <div id="connection_profile_details_content" class="hidden"></div>
<summary>
<span data-i18n="Profile Details">Profile Details</span>
<i id="connection_profile_spinner" class="fa-solid fa-spinner fa-spin hidden"></i>
</summary>
<div id="connection_profile_details_content" class="marginTop5"></div>
</details>
</div> </div>

16
public/scripts/extensions/connection-manager/style.css
View File

@ -1,13 +1,11 @@
#connection_profile_details>summary { #connection_profile_details_content {
cursor: pointer;
font-weight: bold;
font-size: 1.1em;
}
#connection_profile_details ul {
margin: 5px 0; margin: 5px 0;
} }
#connection_profile_spinner { #connection_profile_details_content ul {
margin-lefT: 5px; margin: 0;
}
#connection_profile_spinner {
margin-left: 5px;
} }