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

Assets extensions visual touch-up

Browse Source
This commit is contained in:
Cohee
2023-10-09 17:21:12 +03:00
parent c9f9bcfc86
commit b84e6e07d1
4 changed files with 29 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -103,39 +103,39 @@ input.extension_missing[type="checkbox"] {
} }
/** LEFT COLUMN **/ /** LEFT COLUMN **/
#extensions_settings>.expression_settings { #extensions_settings>#assets_ui {
order: 1; order: 1;
} }
#extensions_settings>.background_settings { #extensions_settings>.expression_settings {
order: 2; order: 2;
} }
#extensions_settings>.sd_settings { #extensions_settings>.background_settings {
order: 3; order: 3;
} }
#extensions_settings>#tts_settings { #extensions_settings>.sd_settings {
order: 4; order: 4;
} }
#extensions_settings>#rvc_settings { #extensions_settings>#tts_settings {
order: 5; order: 5;
} }
#extensions_settings>.objective-settings { #extensions_settings>#rvc_settings {
order: 6; order: 6;
} }
#extensions_settings>#speech_recognition_settings { #extensions_settings>.objective-settings {
order: 7; order: 7;
} }
#extensions_settings>#audio_settings { #extensions_settings>#speech_recognition_settings {
order: 8; order: 8;
} }
#extensions_settings>#assets_ui { #extensions_settings>#audio_settings {
order: 9; order: 9;
} }

4
public/scripts/extensions/assets/index.js
View File

@ -48,8 +48,10 @@ function downloadAssetsList(url) {
} }
console.debug(DEBUG_PREFIX, "Updated available assets to", availableAssets); console.debug(DEBUG_PREFIX, "Updated available assets to", availableAssets);
// First extensions, then everything else
const assetTypes = Object.keys(availableAssets).sort((a, b) => (a === 'extension') ? -1 : (b === 'extension') ? 1 : 0);
for (const assetType in availableAssets) { for (const assetType of assetTypes) {
let assetTypeMenu = $('<div />', { id: "assets_audio_ambient_div", class: "assets-list-div" }); let assetTypeMenu = $('<div />', { id: "assets_audio_ambient_div", class: "assets-list-div" });
assetTypeMenu.append(`<h3>${assetType}</h3>`) assetTypeMenu.append(`<h3>${assetType}</h3>`)
for (const i in availableAssets[assetType]) { for (const i in availableAssets[assetType]) {

20
public/scripts/extensions/assets/style.css
View File

@ -13,6 +13,10 @@
padding: 5px; padding: 5px;
} }
.assets-list-div h3 {
text-transform: capitalize;
}
.assets-list-div i { .assets-list-div i {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -22,10 +26,14 @@
font-style: normal; font-style: normal;
} }
.assets-list-div i span{ .assets-list-div i span {
margin-left: 10px; margin-left: 10px;
} }
.assets-list-div i span:first-of-type {
font-weight: bold;
}
.asset-download-button { .asset-download-button {
position: relative; position: relative;
width: 50px; width: 50px;
@ -34,7 +42,7 @@
outline: none; outline: none;
border-radius: 2px; border-radius: 2px;
cursor: pointer; cursor: pointer;
} }
.asset-download-button:active { .asset-download-button:active {
background: #007a63; background: #007a63;
@ -68,11 +76,11 @@
} }
@keyframes asset-download-button-loading-spinner { @keyframes asset-download-button-loading-spinner {
from { from {
transform: rotate(0turn); transform: rotate(0turn);
} }
to { to {
transform: rotate(1turn); transform: rotate(1turn);
} }
} }

2
public/scripts/extensions/assets/window.html
View File

@ -1,7 +1,7 @@
<div id="assets_ui"> <div id="assets_ui">
<div class="inline-drawer"> <div class="inline-drawer">
<div class="inline-drawer-toggle inline-drawer-header"> <div class="inline-drawer-toggle inline-drawer-header">
<b>Assets</b> <b>Download Extensions & Assets</b>
<div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div> <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
</div> </div>
<div class="inline-drawer-content"> <div class="inline-drawer-content">