Replace details view toggle with a button

38751d4fe20b0aa1ef3a3e0ff2952569dd5da220

Cohee <18619528+Cohee1207@users.noreply.github.com>

Parents: 7952b5f2c9a255d0f18a145a653a425d2e3ab13d
4 files changed, +35 -39Ignore whitespace
public/script.js+1 -1
@@ -10082,7 +10082,7 @@ jQuery(async function () {
1008210082 });
1008310083
1008410084 $('#main_api').change(function () {
1008510085 cancelStatusCheck("'Canceled because main api changed"');
1008610086 changeMainAPI();
1008710087 saveSettingsDebounced();
1008810088 });
public/scripts/extensions/connection-manager/index.js+27 -24
@@ -67,7 +67,7 @@ class ConnectionManagerSpinner {
6767 constructor() {
6868 // @ts-ignore
6969 this.spinnerElement = document.getElementById('connection_profile_spinner');
7070 this.abortController = new AbortController();
7171 }
7272
7373 start() {
@@ -318,21 +318,21 @@ function renderConnectionProfiles(profiles) {
318318
319319/**
320320 * Renders the content of the details element.
321- * @param {HTMLDetailsElement} details Details element
322321 * @param {HTMLElement} detailsContent Content element of the details
323322 */
324323async function renderDetailsContent(details, detailsContent) {
325324 detailsContent.innerHTML = '';
326325 if (detailsdetailsContent.openclassList.contains('hidden')) {
327- const selectedProfile = extension_settings.connectionManager.selectedProfile;
326+ return;
328- const profile = extension_settings.connectionManager.profiles.find(p => p.id === selectedProfile);
327+ }
329- if (profile) {
328+ const selectedProfile = extension_settings.connectionManager.selectedProfile;
330- const profileForDisplay = makeFancyProfile(profile);
329+ const profile = extension_settings.connectionManager.profiles.find(p => p.id === selectedProfile);
331- const template = await renderExtensionTemplateAsync(MODULE_NAME, 'view', { profile: profileForDisplay });
330+ if (profile) {
332- detailsContent.innerHTML = template;
331+ const profileForDisplay = makeFancyProfile(profile);
333- } else {
332+ const template = await renderExtensionTemplateAsync(MODULE_NAME, 'view', { profile: profileForDisplay });
334333 detailsContent.textContentinnerHTML = 'No profile selected'template;
335- }
334+ } else {
335+ detailsContent.textContent = 'No profile selected';
336336 }
337337}
338338
@@ -365,7 +365,7 @@ async function renderDetailsContent(details, detailsContent) {
365365 const profileId = selectedProfile.value;
366366 extension_settings.connectionManager.selectedProfile = profileId;
367367 saveSettingsDebounced();
368368 await renderDetailsContent(details, detailsContent);
369369
370370 // None option selected
371371 if (!profileId) {
@@ -393,7 +393,7 @@ async function renderDetailsContent(details, detailsContent) {
393393 return;
394394 }
395395 await applyConnectionProfile(profile);
396396 await renderDetailsContent(details, detailsContent);
397397 await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, profile.name);
398398 toastr.success('Connection profile reloaded', '', { timeOut: 1500 });
399399 });
@@ -408,7 +408,7 @@ async function renderDetailsContent(details, detailsContent) {
408408 extension_settings.connectionManager.selectedProfile = profile.id;
409409 saveSettingsDebounced();
410410 renderConnectionProfiles(profiles);
411411 await renderDetailsContent(details, detailsContent);
412412 await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, profile.name);
413413 });
414414
@@ -421,7 +421,7 @@ async function renderDetailsContent(details, detailsContent) {
421421 return;
422422 }
423423 await updateConnectionProfile(profile);
424424 await renderDetailsContent(details, detailsContent);
425425 saveSettingsDebounced();
426426 await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, profile.name);
427427 toastr.success('Connection profile updated', '', { timeOut: 1500 });
@@ -431,15 +431,18 @@ async function renderDetailsContent(details, detailsContent) {
431431 deleteButton.addEventListener('click', async () => {
432432 await deleteConnectionProfile();
433433 renderConnectionProfiles(profiles);
434434 await renderDetailsContent(details, detailsContent);
435435 await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, NONE);
436436 });
437437
438438 /** @type {HTMLDetailsElementHTMLElement} */
439- // @ts-ignore
439+ const viewDetails = document.getElementById('view_connection_profile');
440- const details = document.getElementById('connection_profile_details');
441440 const detailsContent = document.getElementById('connection_profile_details_content');
442441 detailsviewDetails.addEventListener('toggleclick', async () => renderDetailsContent(details, detailsContent));{
442+ viewDetails.classList.toggle('active');
443+ detailsContent.classList.toggle('hidden');
444+ await renderDetailsContent(detailsContent);
445+ });
443446
444447 SlashCommandParser.addCommandObject(SlashCommand.fromProps({
445448 name: 'profile',
@@ -529,7 +532,7 @@ async function renderDetailsContent(details, detailsContent) {
529532 extension_settings.connectionManager.selectedProfile = profile.id;
530533 saveSettingsDebounced();
531534 renderConnectionProfiles(profiles);
532535 await renderDetailsContent(details, detailsContent);
533536 return profile.name;
534537 },
535538 }));
@@ -545,7 +548,7 @@ async function renderDetailsContent(details, detailsContent) {
545548 return '';
546549 }
547550 await updateConnectionProfile(profile);
548551 await renderDetailsContent(details, detailsContent);
549552 saveSettingsDebounced();
550553 return profile.name;
551554 },
public/scripts/extensions/connection-manager/settings.html+2 -7
@@ -7,16 +7,11 @@
77 </div>
88 <div class="flex-container">
99 <select class="text_pole flex1" id="connection_profiles"></select>
10+ <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>
1011 <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>
1112 <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>
1213 <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>
1314 <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>
1415 </div>
1516 <detailsdiv id="connection_profile_detailsconnection_profile_details_content" class="marginBot10hidden"></div>
16- <summary>
17- <span data-i18n="Profile Details">Profile Details</span>
18- <i id="connection_profile_spinner" class="fa-solid fa-spinner fa-spin hidden"></i>
19- </summary>
20- <div id="connection_profile_details_content" class="marginTop5"></div>
21- </details>
2217</div>
public/scripts/extensions/connection-manager/style.css+5 -7
@@ -1,13 +1,11 @@
11#connection_profile_details>summaryconnection_profile_details_content {
22 cursormargin: pointer5px 0;
3- font-weight: bold;
4- font-size: 1.1em;
53}
64
75#connection_profile_detailsconnection_profile_details_content ul {
86 margin: 5px 0;
97}
108
119#connection_profile_spinner {
1210 margin-lefTleft: 5px;
1311}