mirror of
https://github.com/SillyTavern/SillyTavern.git
synced 2025-02-03 04:37:40 +01:00
Replace details view toggle with a button
This commit is contained in:
parent
7952b5f2c9
commit
38751d4fe2
@ -10082,7 +10082,7 @@ jQuery(async function () {
|
||||
});
|
||||
|
||||
$('#main_api').change(function () {
|
||||
cancelStatusCheck("Canceled because main api changed");
|
||||
cancelStatusCheck('Canceled because main api changed');
|
||||
changeMainAPI();
|
||||
saveSettingsDebounced();
|
||||
});
|
||||
|
@ -67,7 +67,7 @@ class ConnectionManagerSpinner {
|
||||
constructor() {
|
||||
// @ts-ignore
|
||||
this.spinnerElement = document.getElementById('connection_profile_spinner');
|
||||
this.abortController = new AbortController();
|
||||
this.abortController = new AbortController();
|
||||
}
|
||||
|
||||
start() {
|
||||
@ -318,21 +318,21 @@ function renderConnectionProfiles(profiles) {
|
||||
|
||||
/**
|
||||
* Renders the content of the details element.
|
||||
* @param {HTMLDetailsElement} details Details element
|
||||
* @param {HTMLElement} detailsContent Content element of the details
|
||||
*/
|
||||
async function renderDetailsContent(details, detailsContent) {
|
||||
async function renderDetailsContent(detailsContent) {
|
||||
detailsContent.innerHTML = '';
|
||||
if (details.open) {
|
||||
const selectedProfile = extension_settings.connectionManager.selectedProfile;
|
||||
const profile = extension_settings.connectionManager.profiles.find(p => p.id === selectedProfile);
|
||||
if (profile) {
|
||||
const profileForDisplay = makeFancyProfile(profile);
|
||||
const template = await renderExtensionTemplateAsync(MODULE_NAME, 'view', { profile: profileForDisplay });
|
||||
detailsContent.innerHTML = template;
|
||||
} else {
|
||||
detailsContent.textContent = 'No profile selected';
|
||||
}
|
||||
if (detailsContent.classList.contains('hidden')) {
|
||||
return;
|
||||
}
|
||||
const selectedProfile = extension_settings.connectionManager.selectedProfile;
|
||||
const profile = extension_settings.connectionManager.profiles.find(p => p.id === selectedProfile);
|
||||
if (profile) {
|
||||
const profileForDisplay = makeFancyProfile(profile);
|
||||
const template = await renderExtensionTemplateAsync(MODULE_NAME, 'view', { profile: profileForDisplay });
|
||||
detailsContent.innerHTML = template;
|
||||
} else {
|
||||
detailsContent.textContent = 'No profile selected';
|
||||
}
|
||||
}
|
||||
|
||||
@ -365,7 +365,7 @@ async function renderDetailsContent(details, detailsContent) {
|
||||
const profileId = selectedProfile.value;
|
||||
extension_settings.connectionManager.selectedProfile = profileId;
|
||||
saveSettingsDebounced();
|
||||
await renderDetailsContent(details, detailsContent);
|
||||
await renderDetailsContent(detailsContent);
|
||||
|
||||
// None option selected
|
||||
if (!profileId) {
|
||||
@ -393,7 +393,7 @@ async function renderDetailsContent(details, detailsContent) {
|
||||
return;
|
||||
}
|
||||
await applyConnectionProfile(profile);
|
||||
await renderDetailsContent(details, detailsContent);
|
||||
await renderDetailsContent(detailsContent);
|
||||
await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, profile.name);
|
||||
toastr.success('Connection profile reloaded', '', { timeOut: 1500 });
|
||||
});
|
||||
@ -408,7 +408,7 @@ async function renderDetailsContent(details, detailsContent) {
|
||||
extension_settings.connectionManager.selectedProfile = profile.id;
|
||||
saveSettingsDebounced();
|
||||
renderConnectionProfiles(profiles);
|
||||
await renderDetailsContent(details, detailsContent);
|
||||
await renderDetailsContent(detailsContent);
|
||||
await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, profile.name);
|
||||
});
|
||||
|
||||
@ -421,7 +421,7 @@ async function renderDetailsContent(details, detailsContent) {
|
||||
return;
|
||||
}
|
||||
await updateConnectionProfile(profile);
|
||||
await renderDetailsContent(details, detailsContent);
|
||||
await renderDetailsContent(detailsContent);
|
||||
saveSettingsDebounced();
|
||||
await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, profile.name);
|
||||
toastr.success('Connection profile updated', '', { timeOut: 1500 });
|
||||
@ -431,15 +431,18 @@ async function renderDetailsContent(details, detailsContent) {
|
||||
deleteButton.addEventListener('click', async () => {
|
||||
await deleteConnectionProfile();
|
||||
renderConnectionProfiles(profiles);
|
||||
await renderDetailsContent(details, detailsContent);
|
||||
await renderDetailsContent(detailsContent);
|
||||
await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, NONE);
|
||||
});
|
||||
|
||||
/** @type {HTMLDetailsElement} */
|
||||
// @ts-ignore
|
||||
const details = document.getElementById('connection_profile_details');
|
||||
/** @type {HTMLElement} */
|
||||
const viewDetails = document.getElementById('view_connection_profile');
|
||||
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({
|
||||
name: 'profile',
|
||||
@ -529,7 +532,7 @@ async function renderDetailsContent(details, detailsContent) {
|
||||
extension_settings.connectionManager.selectedProfile = profile.id;
|
||||
saveSettingsDebounced();
|
||||
renderConnectionProfiles(profiles);
|
||||
await renderDetailsContent(details, detailsContent);
|
||||
await renderDetailsContent(detailsContent);
|
||||
return profile.name;
|
||||
},
|
||||
}));
|
||||
@ -545,7 +548,7 @@ async function renderDetailsContent(details, detailsContent) {
|
||||
return '';
|
||||
}
|
||||
await updateConnectionProfile(profile);
|
||||
await renderDetailsContent(details, detailsContent);
|
||||
await renderDetailsContent(detailsContent);
|
||||
saveSettingsDebounced();
|
||||
return profile.name;
|
||||
},
|
||||
|
@ -7,16 +7,11 @@
|
||||
</div>
|
||||
<div class="flex-container">
|
||||
<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="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="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>
|
||||
<details id="connection_profile_details" class="marginBot10">
|
||||
<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 id="connection_profile_details_content" class="hidden"></div>
|
||||
</div>
|
||||
|
@ -1,13 +1,11 @@
|
||||
#connection_profile_details>summary {
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
#connection_profile_details ul {
|
||||
#connection_profile_details_content {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
#connection_profile_spinner {
|
||||
margin-lefT: 5px;
|
||||
#connection_profile_details_content ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#connection_profile_spinner {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user