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

Improve styles of extension blocks

Browse Source
This commit is contained in:
Cohee
2024-12-09 22:37:43 +02:00
parent 3c82d961bd
commit f5088b398f
2 changed files with 19 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
public/css/extensions-panel.css
View File

@ -83,12 +83,12 @@ label[for="extensions_autoconnect"] {
.extensions_info .extension_block { .extensions_info .extension_block {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: nowrap;
padding: 5px 10px; padding: 5px;
margin-bottom: 5px; margin-bottom: 5px;
border: 1px solid var(--SmartThemeBorderColor); border: 1px solid var(--SmartThemeBorderColor);
border-radius: 10px; border-radius: 10px;
align-items: center; align-items: baseline;
justify-content: space-between; justify-content: space-between;
gap: 5px; gap: 5px;
} }
@ -101,7 +101,7 @@ label[for="extensions_autoconnect"] {
opacity: 0.8; opacity: 0.8;
font-size: 0.8em; font-size: 0.8em;
font-weight: normal; font-weight: normal;
margin-left: 5px; margin-left: 2px;
} }
.extensions_info .extension_block a { .extensions_info .extension_block a {
@ -136,3 +136,13 @@ input.extension_missing[type="checkbox"] {
#extensionsMenu>div.extension_container:empty { #extensionsMenu>div.extension_container:empty {
display: none; display: none;
} }
.extensions_info .extension_text_block {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.extensions_info .extension_actions {
flex-wrap: nowrap;
}

10
public/scripts/extensions.js
View File

@ -573,13 +573,13 @@ function generateExtensionHtml(name, manifest, isActive, isDisabled, isExternal,
const type = getExtensionType(name); const type = getExtensionType(name);
switch (type) { switch (type) {
case 'global': case 'global':
return '<i class="fa-fw fa-solid fa-server" data-i18n="[title]ext_type_global" title="This is a global extension, available for all users."></i>'; return '<i class="fa-sm fa-fw fa-solid fa-server" data-i18n="[title]ext_type_global" title="This is a global extension, available for all users."></i>';
case 'local': case 'local':
return '<i class="fa-fw fa-solid fa-user" data-i18n="[title]ext_type_local" title="This is a local extension, available only for you."></i>'; return '<i class="fa-sm fa-fw fa-solid fa-user" data-i18n="[title]ext_type_local" title="This is a local extension, available only for you."></i>';
case 'system': case 'system':
return '<i class="fa-fw fa-solid fa-cog" data-i18n="[title]ext_type_system" title="This is a built-in extension. It cannot be deleted and updates with the app."></i>'; return '<i class="fa-sm fa-fw fa-solid fa-cog" data-i18n="[title]ext_type_system" title="This is a built-in extension. It cannot be deleted and updates with the app."></i>';
default: default:
return '<i class="fa-fw fa-solid fa-question" title="Unknown extension type."></i>'; return '<i class="fa-sm fa-fw fa-solid fa-question" title="Unknown extension type."></i>';
} }
} }
@ -627,7 +627,7 @@ function generateExtensionHtml(name, manifest, isActive, isDisabled, isExternal,
<div class="extension_icon"> <div class="extension_icon">
${extensionIcon} ${extensionIcon}
</div> </div>
<div class="flexGrow"> <div class="flexGrow extension_text_block">
${originHtml} ${originHtml}
<span class="${isActive ? 'extension_enabled' : isDisabled ? 'extension_disabled' : 'extension_missing'}"> <span class="${isActive ? 'extension_enabled' : isDisabled ? 'extension_disabled' : 'extension_missing'}">
<span class="extension_name">${DOMPurify.sanitize(displayName)}</span> <span class="extension_name">${DOMPurify.sanitize(displayName)}</span>