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

Optimize WI layout

Browse Source
This commit is contained in:
Cohee
2023-11-04 17:44:43 +02:00
parent b897c8db4a
commit 890ae4bba9
3 changed files with 162 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
public/index.html
View File

@@ -2510,7 +2510,6 @@
</h3>
</div>
<div id="wi-holder" class="margin5">
<div class="justifyContentSpaceAround wi-settings flex-container gap10px alignitemscenter">
<div id="WIMultiSelector" class="flex2 flex alignSelfStart range-block">
<div class="range-block-title justifyLeft">
<span data-i18n="Active World(s) for all chats"><small>Active World(s) for all chats</small></span>
@@ -2523,6 +2522,15 @@
</select>
</div>
</div>
<div data-newbie-hidden class="inline-drawer wide100p flexFlowColumn">
<div class="inline-drawer-toggle inline-drawer-header">
<b><span data-i18n="Activation Settings">Activation Settings</span></b>
<div class="fa-solid fa-circle-chevron-down inline-drawer-icon down"></div>
</div>
<div class="inline-drawer-content">
<div class="justifyContentSpaceAround wi-settings flex-container gap10px alignitemscenter">
<div class="flex2 flex-container flexFlowColumn">
<div data-newbie-hidden class="flex range-block">
<div class="range-block-title justifyLeft">
@@ -2565,7 +2573,6 @@
</div>
<div class="range-block-counter margin0">
<input type="number" min="1" max="100" step="1" data-for="world_info_budget" id="world_info_budget_counter">
</div>
</div>
</div>
@@ -2580,7 +2587,6 @@
</div>
<div class="range-block-counter margin0">
<input type="number" min="0" max="8192" step="1" data-for="world_info_budget_cap" id="world_info_budget_cap_counter">
</div>
</div>
<div class="budget_cap_note">
@@ -2589,7 +2595,7 @@
</div>
<div data-newbie-hidden class="flex1 gap5px range-block">
<div data-newbie-hidden class="flex1 gap5px range-block" title="Scan chronologically until reached min entries or token budget." data-i18n="[title]Scan chronologically until reached min entries or token budget.">
<div class="wide10pMinFit">
<small data-i18n="Min Activations">Min Activations</small>
</div>
@@ -2599,16 +2605,12 @@
</div>
<div class="range-block-counter margin0">
<input type="number" data-for="world_info_min_activations" id="world_info_min_activations_counter">
</div>
</div>
<div class="budget_cap_note">
<small data-i18n="scan chronologically until min entries or token budget">scan chronologically until min entries or token budget</small>
</div>
</div>
<div data-newbie-hidden class="flex1 gap5px range-block">
<div class="wide10pMinFit">
<small data-i18n="Min Activations: Max Depth">Min Activations: Max Depth</small>
<small data-i18n="Max Depth">Max Depth</small>
</div>
<div class="range-block-range-and-counter">
<div class="range-block-range paddingLeftRight5">
@@ -2620,7 +2622,7 @@
</div>
</div>
<div class="budget_cap_note">
<small data-i18n="(0 = chronological scan depth unlimited, use token budget)">(0 = chronological scan depth unlimited, use token budget)</small>
<small data-i18n="(0 = unlimited, use budget)">(0 = unlimited, use budget)</small>
</div>
</div>
@@ -2654,8 +2656,8 @@
</small>
</label>
</div>
<div id="WIInputWidthReference" style="display:none; height:1px;">10000</div>
</div>
</div>
</div>
<div id="world_popup">

35
public/scripts/world-info.js
View File

@@ -60,8 +60,6 @@ const worldInfoFilter = new FilterHelper(() => updateEditor());
const SORT_ORDER_KEY = 'world_info_sort_order';
const METADATA_KEY = 'world_info';
const InputWidthReference = $("#WIInputWidthReference");
const DEFAULT_DEPTH = 4;
export function getWorldInfoSettings() {
@@ -384,22 +382,21 @@ function displayWorldEntries(name, data, navigation = navigation_option.none) {
<small class="flex1">
Title/Memo
</small>
<small style="width:${InputWidthReference.width() + 5 + 'px'}">
<small style="width: calc(3.5em + 5px)">
Status
</small>
<small style="width:${InputWidthReference.width() + 20 + 'px'}">
<small style="width: calc(3.5em + 20px)">
Position
</small>
<small style="width:${InputWidthReference.width() + 15 + 'px'}">
<small style="width: calc(3.5em + 15px)">
Depth
</small>
<small style="width:${InputWidthReference.width() + 15 + 'px'}">
<small style="width: calc(3.5em + 15px)">
Order
</small>
<small style="width:${InputWidthReference.width() + 15 + 'px'}">
<small style="width: calc(3.5em + 15px)">
Trigger %
</small>
</div>`
const blocks = page.map(entry => getWorldEntry(name, data, entry));
$("#world_popup_entries_list").append(keywordHeaders);
@@ -836,7 +833,7 @@ function getWorldEntry(name, data, entry) {
saveWorldInfo(name, data);
});
orderInput.val(entry.order).trigger("input");
orderInput.width(InputWidthReference.width() + 15 + 'px')
orderInput.css('width', 'calc(3em + 15px)');
// probability
if (entry.probability === undefined) {
@@ -857,7 +854,7 @@ function getWorldEntry(name, data, entry) {
saveWorldInfo(name, data);
});
depthInput.val(entry.depth ?? DEFAULT_DEPTH).trigger("input");
depthInput.width(InputWidthReference.width() + 15 + 'px');
depthInput.css('width', 'calc(3em + 15px)');
// Hide by default unless depth is specified
if (entry.position === world_info_position.atDepth) {
@@ -885,7 +882,7 @@ function getWorldEntry(name, data, entry) {
saveWorldInfo(name, data);
});
probabilityInput.val(entry.probability).trigger("input");
probabilityInput.width(InputWidthReference.width() + 15 + 'px')
probabilityInput.css('width', 'calc(3em + 15px)');
// probability toggle
if (entry.useProbability === undefined) {
@@ -2065,7 +2062,7 @@ jQuery(() => {
$("#world_editor_select").on('change', async () => {
$("#world_info_search").val('');
worldInfoFilter.setFilterData(FILTER_TYPES.WORLD_INFO_SEARCH, '', true);
const selectedIndex = $("#world_editor_select").find(":selected").val();
const selectedIndex = String($("#world_editor_select").find(":selected").val());
if (selectedIndex === "") {
hideWorldEditor();
@@ -2080,39 +2077,39 @@ jQuery(() => {
eventSource.emit(event_types.WORLDINFO_SETTINGS_UPDATED);
}
$(document).on("input", "#world_info_depth", function () {
$("#world_info_depth").on('input', function () {
world_info_depth = Number($(this).val());
$("#world_info_depth_counter").val($(this).val());
saveSettings();
});
$(document).on("input", "#world_info_min_activations", function () {
$("#world_info_min_activations").on('input', function () {
world_info_min_activations = Number($(this).val());
$("#world_info_min_activations_counter").val($(this).val());
saveSettings();
});
$(document).on("input", "#world_info_min_activations_depth_max", function () {
$("#world_info_min_activations_depth_max").on('input', function () {
world_info_min_activations_depth_max = Number($(this).val());
$("#world_info_min_activations_depth_max_counter").val($(this).val());
saveSettings();
});
$(document).on("input", "#world_info_budget", function () {
$("#world_info_budget").on('input', function () {
world_info_budget = Number($(this).val());
$("#world_info_budget_counter").val($(this).val());
saveSettings();
});
$(document).on("input", "#world_info_recursive", function () {
$("#world_info_recursive").on('input', function () {
world_info_recursive = !!$(this).prop('checked');
saveSettings();
})
});
$('#world_info_case_sensitive').on('input', function () {
world_info_case_sensitive = !!$(this).prop('checked');
saveSettings();
})
});
$('#world_info_match_whole_words').on('input', function () {
world_info_match_whole_words = !!$(this).prop('checked');