Make it flash and be more obvious

This commit is contained in:
Wolfsblvt 2024-07-10 18:12:01 +02:00
parent 0987fd34b9
commit 03d4f86d59
3 changed files with 18 additions and 6 deletions

View File

@ -7,7 +7,7 @@ import { getRequestHeaders, callPopup, processDroppedFiles, eventSource, event_t
import { deleteExtension, extensionNames, getContext, installExtension, renderExtensionTemplateAsync } from '../../extensions.js';
import { POPUP_TYPE, callGenericPopup } from '../../popup.js';
import { executeSlashCommands } from '../../slash-commands.js';
import { getStringHash, isValidUrl } from '../../utils.js';
import { flashHighlight, getStringHash, isValidUrl } from '../../utils.js';
export { MODULE_NAME };
const MODULE_NAME = 'assets';
@ -405,6 +405,13 @@ jQuery(async () => {
openCharacterBrowser(false);
});
const installHintButton = windowHtml.find('.assets-install-hint-link');
installHintButton.on('click', async function () {
const installButton = $('#third_party_extension_button');
flashHighlight(installButton, 5000);
toastr.info('Click the flashing button to the right of this to install extensions.', 'How to install extensions?');
});
const connectButton = windowHtml.find('#assets-connect-button');
connectButton.on('click', async function () {
const url = String(assetsJsonUrl.val());

View File

@ -12,6 +12,10 @@
flex-direction: column;
}
.assets-install-hint-link {
cursor: help;
}
.assets-connect-div {
display: flex;
flex-direction: row;

View File

@ -5,11 +5,12 @@
<div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
</div>
<div class="inline-drawer-content">
<div>
<small data-i18n="To install 3rd party extensions, load a custom asset list or select &quot;Install&nbsp;Extension&quot;">
To install 3rd party extensions, load a custom asset list or select "Install&nbsp;Extension"
</small>
</div>
<small>
<span data-i18n="To install 3rd party extensions, load a custom asset list or select">
To install 3rd party extensions, load a custom asset list or select
</span>
<a class="assets-install-hint-link" data-i18n="Install&nbsp;Extension">Install&nbsp;Extension</a>
</small>
<div class="assets-url-block m-b-1 m-t-1">
<label for="assets-json-url-field" data-i18n="Assets URL">Assets URL</label>
<small title="Load a list of extensions & assets based on an asset list file.