Move built-in extensions to fixed wand containers

This commit is contained in:
Cohee 2024-06-24 23:17:58 +03:00
parent 444705a5f8
commit 62a1cb1dce
13 changed files with 48 additions and 22 deletions

View File

@ -101,3 +101,7 @@ input.extension_missing[type="checkbox"] {
.extension_container {
display: contents;
}
#extensionsMenu>div.extension_container:empty {
display: none;
}

View File

@ -347,13 +347,11 @@ function autoConnectInputHandler() {
saveSettingsDebounced();
}
function addExtensionsButtonAndMenu() {
const buttonHTML =
'<div id="extensionsMenuButton" style="display: none;" class="fa-solid fa-magic-wand-sparkles interactable" title="Extras Extensions" /></div>';
const extensionsMenuHTML = '<div id="extensionsMenu" class="options-content" style="display: none;"></div>';
async function addExtensionsButtonAndMenu() {
const buttonHTML = await renderTemplateAsync('wandButton');
const extensionsMenuHTML = await renderTemplateAsync('wandMenu');
$(document.body).append(extensionsMenuHTML);
$('#leftSendForm').append(buttonHTML);
const button = $('#extensionsMenuButton');
@ -961,8 +959,8 @@ export async function writeExtensionField(characterId, key, value) {
}
}
jQuery(function () {
addExtensionsButtonAndMenu();
jQuery(async function () {
await addExtensionsButtonAndMenu();
$('#extensionsMenuButton').css('display', 'flex');
$('#extensions_connect').on('click', connectClickHandler);

View File

@ -0,0 +1,4 @@
<div id="attachFile" class="list-group-item flex-container flexGap5" title="Attach a file or image to a current chat.">
<div class="fa-fw fa-solid fa-paperclip extensionsMenuExtensionButton"></div>
<span data-i18n="Attach a File">Attach a File</span>
</div>

View File

@ -197,8 +197,10 @@ async function enableDataBankAttachment(args, value) {
}
jQuery(async () => {
const buttons = await renderExtensionTemplateAsync('attachments', 'buttons', {});
$('#extensionsMenu').prepend(buttons);
const manageButton = await renderExtensionTemplateAsync('attachments', 'manage-button', {});
const attachButton = await renderExtensionTemplateAsync('attachments', 'attach-button', {});
$('#data_bank_wand_container').append(manageButton);
$('#attach_file_wand_container').append(attachButton);
/** A collection of local enum providers for this context of data bank */
const localEnumProviders = {

View File

@ -1,7 +1,4 @@
<div id="attachFile" class="list-group-item flex-container flexGap5" title="Attach a file or image to a current chat.">
<div class="fa-fw fa-solid fa-paperclip extensionsMenuExtensionButton"></div>
<span data-i18n="Attach a File">Attach a File</span>
</div>
<div id="manageAttachments" class="list-group-item flex-container flexGap5" title="View global, character, or data files.">
<div class="fa-fw fa-solid fa-book-open-reader extensionsMenuExtensionButton"></div>

View File

@ -344,7 +344,7 @@ jQuery(async function () {
Generate Caption
</div>`);
$('#extensionsMenu').prepend(sendButton);
$('#caption_wand_container').append(sendButton);
$(sendButton).on('click', () => {
const hasCaptionModule =
(modules.includes('caption') && extension_settings.caption.source === 'extras') ||

View File

@ -3158,7 +3158,7 @@ async function addSDGenButtons() {
const buttonHtml = await renderExtensionTemplateAsync('stable-diffusion', 'button');
const dropdownHtml = await renderExtensionTemplateAsync('stable-diffusion', 'dropdown');
$('#extensionsMenu').prepend(buttonHtml);
$('#sd_wand_container').append(buttonHtml);
$(document.body).append(dropdownHtml);
const messageButton = $('.sd_message_gen');

View File

@ -132,7 +132,7 @@ jQuery(() => {
<div class="fa-solid fa-1 extensionsMenuExtensionButton" /></div>
Token Counter
</div>`;
$('#extensionsMenu').prepend(buttonHtml);
$('#token_counter_wand_container').append(buttonHtml);
$('#token_counter').on('click', doTokenCounter);
SlashCommandParser.addCommandObject(SlashCommand.fromProps({ name: 'count',
callback: async () => String(await doCount()),

View File

@ -476,6 +476,7 @@ async function onTranslateInputMessageClick() {
const toast = toastr.info('Input Message is translating', 'Please wait...');
const translatedText = await translate(textarea.value, extension_settings.translate.internal_language);
textarea.value = translatedText;
textarea.dispatchEvent(new Event('input', { bubbles: true }));
toastr.clear(toast);
}
@ -569,9 +570,9 @@ window['translate'] = translate;
jQuery(async () => {
const html = await renderExtensionTemplateAsync('translate', 'index');
const buttonHtml = await renderExtensionTemplateAsync('translate', 'buttons');
$('#extensionsMenu').append(buttonHtml);
$('#translate_wand_container').append(buttonHtml);
$('#translation_container').append(html);
$('#translate_chat').on('click', onTranslateChatClick);
$('#translate_input_message').on('click', onTranslateInputMessageClick);

View File

@ -345,7 +345,7 @@ function onAudioControlClicked() {
function addAudioControl() {
$('#extensionsMenu').prepend(`
$('#tts_wand_container').append(`
<div id="ttsExtensionMenuItem" class="list-group-item flex-container flexGap5">
<div id="tts_media_control" class="extensionsMenuExtensionButton "/></div>
TTS Playback

View File

@ -0,0 +1 @@
<div id="extensionsMenuButton" style="display: none;" class="fa-solid fa-magic-wand-sparkles interactable" title="Extensions" /></div>

View File

@ -0,0 +1,16 @@
<div id="extensionsMenu" class="options-content" style="display: none;">
<div id="caption_wand_container" class="extension_container"></div>
<div id="data_bank_wand_container" class="extension_container"></div>
<div id="attach_file_wand_container" class="extension_container"></div>
<div id="sd_wand_container" class="extension_container"></div>
<div id="tts_wand_container" class="extension_container"></div>
<div id="emulatorjs_wand_container" class="extension_container"></div>
<div id="notebook_wand_container" class="extension_container"></div>
<div id="chess_wand_container" class="extension_container"></div>
<div id="screen_share_wand_container" class="extension_container"></div>
<div id="translate_wand_container" class="extension_container"></div>
<div id="dice_wand_container" class="extension_container"></div>
<div id="objective_wand_container" class="extension_container"></div>
<div id="token_counter_wand_container" class="extension_container"></div>
<div id="prompt_inspector_wand_container" class="extension_container"></div>
</div>

View File

@ -885,7 +885,8 @@ body .panelControlBar {
}
.options-content a,
#extensionsMenu>div,
#extensionsMenu>.extension_container>div,
#extensionsMenu>div:not(.extension_container),
.list-group>div,
.list-group .list-group-item,
#sd_dropdown .list-group span {
@ -899,13 +900,15 @@ body .panelControlBar {
align-items: baseline;
}
#extensionsMenu>div,
#extensionsMenu>.extension_container>div,
#extensionsMenu>div:not(.extension_container),
.options-content a,
.list-group-item {
opacity: 0.5;
}
#extensionsMenu>div:hover,
#extensionsMenu>.extension_container>div:hover,
#extensionsMenu>div:not(.extension_container):hover,
.options-content a:hover,
.list-group-item:hover {
opacity: 1;