rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-06-05 21:59:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #661 from 50h100a/color-coded-extension-states

Browse Source 
Extension Manager visual update
This commit is contained in:
Cohee
2023-07-07 22:34:33 +03:00
committed by GitHub
parent 30ccb72017 fe0d315bcb
commit 078947b73e
3 changed files with 37 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
public/scripts/extensions.js
View File

@@ -373,15 +373,28 @@ function addExtensionScript(name, manifest) {
function showExtensionsDetails() { function showExtensionsDetails() {
let html = '<h3>Modules provided by your Extensions API:</h3>'; let html = '<h3>Modules provided by your Extensions API:</h3>';
html += modules.length ? DOMPurify.sanitize(modules.join(', ')) : '<p class="failure">Not connected to the API!</p>'; html += modules.length ? `<p>${DOMPurify.sanitize(modules.join(', '))}</p>` : '<p class="failure">Not connected to the API!</p>';
html += '<h3>Available extensions:</h3>'; html += '<h3>Available extensions:</h3>';
Object.entries(manifests).sort((a, b) => a[1].loading_order - b[1].loading_order).forEach(extension => { Object.entries(manifests).sort((a, b) => a[1].loading_order - b[1].loading_order).forEach(extension => {
const name = extension[0]; const name = extension[0];
const manifest = extension[1]; const manifest = extension[1];
html += `<h4>${DOMPurify.sanitize(manifest.display_name)}</h4>`; const isActive = activeExtensions.has(name);
if (activeExtensions.has(name)) { const isDisabled = extension_settings.disabledExtensions.includes(name);
html += `<p class="success">Extension is active. <a href="javascript:void" data-name="${name}" class="disable_extension">Click to Disable</a></p>`;
const titleClass = isActive ? "extension_enabled" : isDisabled ? "extension_disabled" : "extension_missing";
const iconString = isActive ? "\u2705" : isDisabled ? "\u274C" : "";
let toggleElement = `<span title="Cannot enable extension" data-name="${name}" class="extension_missing">Unavailable</span>`;
if (isActive) {
toggleElement = `<a href="javascript:void" title="Click to disable" data-name="${name}" class="toggle_disable">Disable</a>`;
}
else if (isDisabled) {
toggleElement = `<a href="javascript:void" title="Click to enable" data-name="${name}" class="toggle_enable">Enable</a>`;
}
html += `<hr><h4>${iconString} <span class="${titleClass}">${DOMPurify.sanitize(manifest.display_name)}</span> <span style="float:right;">${toggleElement}<span></h4>`;
if (isActive) {
if (Array.isArray(manifest.optional)) { if (Array.isArray(manifest.optional)) {
const optional = new Set(manifest.optional); const optional = new Set(manifest.optional);
modules.forEach(x => optional.delete(x)); modules.forEach(x => optional.delete(x));
@@ -391,10 +404,7 @@ function showExtensionsDetails() {
} }
} }
} }
else if (extension_settings.disabledExtensions.includes(name)) { else if (!isDisabled) { // Neither active nor disabled
html += `<p class="disabled">Extension is disabled. <a href="javascript:void" data-name=${name} class="enable_extension">Click to Enable</a></p>`;
}
else {
const requirements = new Set(manifest.requires); const requirements = new Set(manifest.requires);
modules.forEach(x => requirements.delete(x)); modules.forEach(x => requirements.delete(x));
const requirementsString = DOMPurify.sanitize([...requirements].join(', ')); const requirementsString = DOMPurify.sanitize([...requirements].join(', '));

2
public/scripts/extensions/floating-prompt/manifest.json
View File

@@ -1,5 +1,5 @@
{ {
"display_name": "Author's Note (Located in Lower Left Options Menu)", "display_name": "Author's Note",
"loading_order": 1, "loading_order": 1,
"requires": [], "requires": [],
"optional": [], "optional": [],

18
public/style.css
View File

@@ -3773,12 +3773,30 @@ label[for="extensions_autoconnect"] {
.extensions_info p { .extensions_info p {
margin-bottom: 0.5em; margin-bottom: 0.5em;
margin-left: 1em;
} }
.extensions_info .disabled { .extensions_info .disabled {
color: lightgray; color: lightgray;
} }
.extensions_info .toggle_enable {
color: lightgreen;
}
.extensions_info .toggle_disable {
color: rgb(238, 144, 144);
}
.extensions_info .extension_enabled {
color: green;
}
.extensions_info .extension_disabled {
color: lightgray;
}
.extensions_info .extension_missing {
color: gray;
}
#extensions_list .disabled { #extensions_list .disabled {
text-decoration: line-through; text-decoration: line-through;
color: lightgray; color: lightgray;