mirror of
https://github.com/SillyTavern/SillyTavern.git
synced 2025-06-05 21:59:27 +02:00
Split downloadables list into sections
This commit is contained in:
@@ -1,7 +1,7 @@
|
|||||||
<div class="characterAsset">
|
<div class="characterAsset">
|
||||||
<div class="characterAssetName">{{name}}</div>
|
<div class="characterAssetName">{{name}}</div>
|
||||||
<img class="characterAssetImage" alt="{{name}}" src="{{url}}" />
|
<img class="characterAssetImage" alt="{{name}}" src="{{url}}" />
|
||||||
<div class="characterAssetDescription">{{description}}</div>
|
<div class="characterAssetDescription" title="{{description}}">{{description}}</div>
|
||||||
<div class="characterAssetButtons flex-container">
|
<div class="characterAssetButtons flex-container">
|
||||||
<div class="characterAssetDownloadButton right_menu_button fa-fw fa-solid fa-download" title="Download"></div>
|
<div class="characterAssetDownloadButton right_menu_button fa-fw fa-solid fa-download" title="Download"></div>
|
||||||
<div class="characterAssetCheckMark right_menu_button fa-fw fa-solid fa-check" title="Installed"></div>
|
<div class="characterAssetCheckMark right_menu_button fa-fw fa-solid fa-check" title="Installed"></div>
|
||||||
|
@@ -340,10 +340,10 @@ async function openCharacterBrowser(forceDefault) {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const listElement = $(document.createElement('div'));
|
const template = $(await renderExtensionTemplateAsync(MODULE_NAME, 'market', {}));
|
||||||
listElement.addClass('characterAssetList');
|
|
||||||
|
|
||||||
for (const character of characters) {
|
for (const character of characters.sort((a, b) => a.name.localeCompare(b.name))) {
|
||||||
|
const listElement = template.find(character.highlight ? '.contestWinnersList' : '.featuredCharactersList');
|
||||||
const characterElement = $(await renderExtensionTemplateAsync(MODULE_NAME, 'character', character));
|
const characterElement = $(await renderExtensionTemplateAsync(MODULE_NAME, 'character', character));
|
||||||
const downloadButton = characterElement.find('.characterAssetDownloadButton');
|
const downloadButton = characterElement.find('.characterAssetDownloadButton');
|
||||||
const checkMark = characterElement.find('.characterAssetCheckMark');
|
const checkMark = characterElement.find('.characterAssetCheckMark');
|
||||||
@@ -361,7 +361,7 @@ async function openCharacterBrowser(forceDefault) {
|
|||||||
listElement.append(characterElement);
|
listElement.append(characterElement);
|
||||||
}
|
}
|
||||||
|
|
||||||
callGenericPopup(listElement, POPUP_TYPE.TEXT, '', { okButton: 'Close', wide: true, large: true, allowVerticalScrolling: true, allowHorizontalScrolling: false });
|
callGenericPopup(template, POPUP_TYPE.TEXT, '', { okButton: 'Close', wide: true, large: true, allowVerticalScrolling: true, allowHorizontalScrolling: false });
|
||||||
}
|
}
|
||||||
|
|
||||||
//#############################//
|
//#############################//
|
||||||
@@ -397,6 +397,11 @@ jQuery(async () => {
|
|||||||
const assetsJsonUrl = windowHtml.find('#assets-json-url-field');
|
const assetsJsonUrl = windowHtml.find('#assets-json-url-field');
|
||||||
assetsJsonUrl.val(ASSETS_JSON_URL);
|
assetsJsonUrl.val(ASSETS_JSON_URL);
|
||||||
|
|
||||||
|
const charactersButton = windowHtml.find('#assets-characters-button');
|
||||||
|
charactersButton.on('click', async function () {
|
||||||
|
openCharacterBrowser(false);
|
||||||
|
});
|
||||||
|
|
||||||
const connectButton = windowHtml.find('#assets-connect-button');
|
const connectButton = windowHtml.find('#assets-connect-button');
|
||||||
connectButton.on('click', async function () {
|
connectButton.on('click', async function () {
|
||||||
const url = String(assetsJsonUrl.val());
|
const url = String(assetsJsonUrl.val());
|
||||||
|
19
public/scripts/extensions/assets/market.html
Normal file
19
public/scripts/extensions/assets/market.html
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
<div class="flex-container flexFlowColumn padding5">
|
||||||
|
<div class="contestWinners flex-container flexFlowColumn">
|
||||||
|
<h3 class="flex-container alignItemsBaseline justifyCenter" title="These characters are the winners of character design contests and have outstandable quality.">
|
||||||
|
<span data-i18n="Contest Winners">Contest Winners</span>
|
||||||
|
<i class="fa-solid fa-star"></i>
|
||||||
|
</h3>
|
||||||
|
<div class="contestWinnersList characterAssetList">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<div class="featuredCharacters flex-container flexFlowColumn">
|
||||||
|
<h3 class="flex-container alignItemsBaseline justifyCenter" title="These characters are the finalists of character design contests and have remarkable quality.">
|
||||||
|
<span data-i18n="Featured Characters">Featured Characters</span>
|
||||||
|
<i class="fa-solid fa-thumbs-up"></i>
|
||||||
|
</h3>
|
||||||
|
<div class="featuredCharactersList characterAssetList">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
@@ -14,6 +14,10 @@
|
|||||||
<select id="assets_type_select" class="text_pole flex1">
|
<select id="assets_type_select" class="text_pole flex1">
|
||||||
</select>
|
</select>
|
||||||
<input id="assets_search" class="text_pole flex1" placeholder="Search" type="search">
|
<input id="assets_search" class="text_pole flex1" placeholder="Search" type="search">
|
||||||
|
<div id="assets-characters-button" class="menu_button menu_button_icon">
|
||||||
|
<i class="fa-solid fa-image-portrait"></i>
|
||||||
|
Characters
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="inline-drawer-content" id="assets_menu">
|
<div class="inline-drawer-content" id="assets_menu">
|
||||||
</div>
|
</div>
|
||||||
|
Reference in New Issue
Block a user