Replace details view toggle with a button

38751d4fe20b0aa1ef3a3e0ff2952569dd5da220

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

Parents: 7952b5f2c9a255d0f18a145a653a425d2e3ab13d
4 files changed, +26 -30Showing whitespace changes
public/script.js+1 -1
@@ -10082,7 +10082,7 @@ jQuery(async function () {
10082 });10082 });
1008310083
10084 $('#main_api').change(function () {10084 $('#main_api').change(function () {
10085 cancelStatusCheck("Canceled because main api changed");10085 cancelStatusCheck('Canceled because main api changed');
10086 changeMainAPI();10086 changeMainAPI();
10087 saveSettingsDebounced();10087 saveSettingsDebounced();
10088 });10088 });
public/scripts/extensions/connection-manager/index.js+18 -15
@@ -318,12 +318,13 @@ function renderConnectionProfiles(profiles) {
318318
319/**319/**
320 * Renders the content of the details element.320 * Renders the content of the details element.
321 * @param {HTMLDetailsElement} details Details element
322 * @param {HTMLElement} detailsContent Content element of the details321 * @param {HTMLElement} detailsContent Content element of the details
323 */322 */
324async function renderDetailsContent(details, detailsContent) {323async function renderDetailsContent(detailsContent) {
325 detailsContent.innerHTML = '';324 detailsContent.innerHTML = '';
326 if (details.open) {325 if (detailsContent.classList.contains('hidden')) {
326 return;
327 }
327 const selectedProfile = extension_settings.connectionManager.selectedProfile;328 const selectedProfile = extension_settings.connectionManager.selectedProfile;
328 const profile = extension_settings.connectionManager.profiles.find(p => p.id === selectedProfile);329 const profile = extension_settings.connectionManager.profiles.find(p => p.id === selectedProfile);
329 if (profile) {330 if (profile) {
@@ -334,7 +335,6 @@ async function renderDetailsContent(details, detailsContent) {
334 detailsContent.textContent = 'No profile selected';335 detailsContent.textContent = 'No profile selected';
335 }336 }
336}337}
337}
338338
339(async function () {339(async function () {
340 extension_settings.connectionManager = extension_settings.connectionManager || structuredClone(DEFAULT_SETTINGS);340 extension_settings.connectionManager = extension_settings.connectionManager || structuredClone(DEFAULT_SETTINGS);
@@ -365,7 +365,7 @@ async function renderDetailsContent(details, detailsContent) {
365 const profileId = selectedProfile.value;365 const profileId = selectedProfile.value;
366 extension_settings.connectionManager.selectedProfile = profileId;366 extension_settings.connectionManager.selectedProfile = profileId;
367 saveSettingsDebounced();367 saveSettingsDebounced();
368 await renderDetailsContent(details, detailsContent);368 await renderDetailsContent(detailsContent);
369369
370 // None option selected370 // None option selected
371 if (!profileId) {371 if (!profileId) {
@@ -393,7 +393,7 @@ async function renderDetailsContent(details, detailsContent) {
393 return;393 return;
394 }394 }
395 await applyConnectionProfile(profile);395 await applyConnectionProfile(profile);
396 await renderDetailsContent(details, detailsContent);396 await renderDetailsContent(detailsContent);
397 await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, profile.name);397 await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, profile.name);
398 toastr.success('Connection profile reloaded', '', { timeOut: 1500 });398 toastr.success('Connection profile reloaded', '', { timeOut: 1500 });
399 });399 });
@@ -408,7 +408,7 @@ async function renderDetailsContent(details, detailsContent) {
408 extension_settings.connectionManager.selectedProfile = profile.id;408 extension_settings.connectionManager.selectedProfile = profile.id;
409 saveSettingsDebounced();409 saveSettingsDebounced();
410 renderConnectionProfiles(profiles);410 renderConnectionProfiles(profiles);
411 await renderDetailsContent(details, detailsContent);411 await renderDetailsContent(detailsContent);
412 await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, profile.name);412 await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, profile.name);
413 });413 });
414414
@@ -421,7 +421,7 @@ async function renderDetailsContent(details, detailsContent) {
421 return;421 return;
422 }422 }
423 await updateConnectionProfile(profile);423 await updateConnectionProfile(profile);
424 await renderDetailsContent(details, detailsContent);424 await renderDetailsContent(detailsContent);
425 saveSettingsDebounced();425 saveSettingsDebounced();
426 await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, profile.name);426 await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, profile.name);
427 toastr.success('Connection profile updated', '', { timeOut: 1500 });427 toastr.success('Connection profile updated', '', { timeOut: 1500 });
@@ -431,15 +431,18 @@ async function renderDetailsContent(details, detailsContent) {
431 deleteButton.addEventListener('click', async () => {431 deleteButton.addEventListener('click', async () => {
432 await deleteConnectionProfile();432 await deleteConnectionProfile();
433 renderConnectionProfiles(profiles);433 renderConnectionProfiles(profiles);
434 await renderDetailsContent(details, detailsContent);434 await renderDetailsContent(detailsContent);
435 await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, NONE);435 await eventSource.emit(event_types.CONNECTION_PROFILE_LOADED, NONE);
436 });436 });
437437
438 /** @type {HTMLDetailsElement} */438 /** @type {HTMLElement} */
439 // @ts-ignore439 const viewDetails = document.getElementById('view_connection_profile');
440 const details = document.getElementById('connection_profile_details');
441 const detailsContent = document.getElementById('connection_profile_details_content');440 const detailsContent = document.getElementById('connection_profile_details_content');
442 details.addEventListener('toggle', () => renderDetailsContent(details, detailsContent));441 viewDetails.addEventListener('click', async () => {
442 viewDetails.classList.toggle('active');
443 detailsContent.classList.toggle('hidden');
444 await renderDetailsContent(detailsContent);
445 });
443446
444 SlashCommandParser.addCommandObject(SlashCommand.fromProps({447 SlashCommandParser.addCommandObject(SlashCommand.fromProps({
445 name: 'profile',448 name: 'profile',
@@ -529,7 +532,7 @@ async function renderDetailsContent(details, detailsContent) {
529 extension_settings.connectionManager.selectedProfile = profile.id;532 extension_settings.connectionManager.selectedProfile = profile.id;
530 saveSettingsDebounced();533 saveSettingsDebounced();
531 renderConnectionProfiles(profiles);534 renderConnectionProfiles(profiles);
532 await renderDetailsContent(details, detailsContent);535 await renderDetailsContent(detailsContent);
533 return profile.name;536 return profile.name;
534 },537 },
535 }));538 }));
@@ -545,7 +548,7 @@ async function renderDetailsContent(details, detailsContent) {
545 return '';548 return '';
546 }549 }
547 await updateConnectionProfile(profile);550 await updateConnectionProfile(profile);
548 await renderDetailsContent(details, detailsContent);551 await renderDetailsContent(detailsContent);
549 saveSettingsDebounced();552 saveSettingsDebounced();
550 return profile.name;553 return profile.name;
551 },554 },
public/scripts/extensions/connection-manager/settings.html+2 -7
@@ -7,16 +7,11 @@
7 </div>7 </div>
8 <div class="flex-container">8 <div class="flex-container">
9 <select class="text_pole flex1" id="connection_profiles"></select>9 <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>
10 <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>11 <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>
11 <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>12 <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>
12 <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>13 <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>
13 <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>14 <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>
14 </div>15 </div>
15 <details id="connection_profile_details" class="marginBot10">16 <div id="connection_profile_details_content" class="hidden"></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>
22</div>17</div>
public/scripts/extensions/connection-manager/style.css+5 -7
@@ -1,13 +1,11 @@
1#connection_profile_details>summary {1#connection_profile_details_content {
2 cursor: pointer;2 margin: 5px 0;
3 font-weight: bold;
4 font-size: 1.1em;
5}3}
64
7#connection_profile_details ul {5#connection_profile_details_content ul {
8 margin: 5px 0;6 margin: 0;
9}7}
108
11#connection_profile_spinner {9#connection_profile_spinner {
12 margin-lefT: 5px;10 margin-left: 5px;
13}11}