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> </h3>
</div> </div>
<div id="wi-holder" class="margin5"> <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 id="WIMultiSelector" class="flex2 flex alignSelfStart range-block">
<div class="range-block-title justifyLeft"> <div class="range-block-title justifyLeft">
<span data-i18n="Active World(s) for all chats"><small>Active World(s) for all chats</small></span> <span data-i18n="Active World(s) for all chats"><small>Active World(s) for all chats</small></span>
@@ -2523,6 +2522,15 @@
</select> </select>
</div> </div>
</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 class="flex2 flex-container flexFlowColumn">
<div data-newbie-hidden class="flex range-block"> <div data-newbie-hidden class="flex range-block">
<div class="range-block-title justifyLeft"> <div class="range-block-title justifyLeft">
@@ -2565,7 +2573,6 @@
</div> </div>
<div class="range-block-counter margin0"> <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"> <input type="number" min="1" max="100" step="1" data-for="world_info_budget" id="world_info_budget_counter">
</div> </div>
</div> </div>
</div> </div>
@@ -2580,7 +2587,6 @@
</div> </div>
<div class="range-block-counter margin0"> <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"> <input type="number" min="0" max="8192" step="1" data-for="world_info_budget_cap" id="world_info_budget_cap_counter">
</div> </div>
</div> </div>
<div class="budget_cap_note"> <div class="budget_cap_note">
@@ -2589,7 +2595,7 @@
</div> </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"> <div class="wide10pMinFit">
<small data-i18n="Min Activations">Min Activations</small> <small data-i18n="Min Activations">Min Activations</small>
</div> </div>
@@ -2599,16 +2605,12 @@
</div> </div>
<div class="range-block-counter margin0"> <div class="range-block-counter margin0">
<input type="number" data-for="world_info_min_activations" id="world_info_min_activations_counter"> <input type="number" data-for="world_info_min_activations" id="world_info_min_activations_counter">
</div> </div>
</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>
<div data-newbie-hidden class="flex1 gap5px range-block"> <div data-newbie-hidden class="flex1 gap5px range-block">
<div class="wide10pMinFit"> <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>
<div class="range-block-range-and-counter"> <div class="range-block-range-and-counter">
<div class="range-block-range paddingLeftRight5"> <div class="range-block-range paddingLeftRight5">
@@ -2620,7 +2622,7 @@
</div> </div>
</div> </div>
<div class="budget_cap_note"> <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>
</div> </div>
@@ -2654,8 +2656,8 @@
</small> </small>
</label> </label>
</div> </div>
<div id="WIInputWidthReference" style="display:none; height:1px;">10000</div> </div>
</div>
</div> </div>
<div id="world_popup"> <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 SORT_ORDER_KEY = 'world_info_sort_order';
const METADATA_KEY = 'world_info'; const METADATA_KEY = 'world_info';
const InputWidthReference = $("#WIInputWidthReference");
const DEFAULT_DEPTH = 4; const DEFAULT_DEPTH = 4;
export function getWorldInfoSettings() { export function getWorldInfoSettings() {
@@ -384,22 +382,21 @@ function displayWorldEntries(name, data, navigation = navigation_option.none) {
<small class="flex1"> <small class="flex1">
Title/Memo Title/Memo
</small> </small>
<small style="width:${InputWidthReference.width() + 5 + 'px'}"> <small style="width: calc(3.5em + 5px)">
Status Status
</small> </small>
<small style="width:${InputWidthReference.width() + 20 + 'px'}"> <small style="width: calc(3.5em + 20px)">
Position Position
</small> </small>
<small style="width:${InputWidthReference.width() + 15 + 'px'}"> <small style="width: calc(3.5em + 15px)">
Depth Depth
</small> </small>
<small style="width:${InputWidthReference.width() + 15 + 'px'}"> <small style="width: calc(3.5em + 15px)">
Order Order
</small> </small>
<small style="width:${InputWidthReference.width() + 15 + 'px'}"> <small style="width: calc(3.5em + 15px)">
Trigger % Trigger %
</small> </small>
</div>` </div>`
const blocks = page.map(entry => getWorldEntry(name, data, entry)); const blocks = page.map(entry => getWorldEntry(name, data, entry));
$("#world_popup_entries_list").append(keywordHeaders); $("#world_popup_entries_list").append(keywordHeaders);
@@ -836,7 +833,7 @@ function getWorldEntry(name, data, entry) {
saveWorldInfo(name, data); saveWorldInfo(name, data);
}); });
orderInput.val(entry.order).trigger("input"); orderInput.val(entry.order).trigger("input");
orderInput.width(InputWidthReference.width() + 15 + 'px') orderInput.css('width', 'calc(3em + 15px)');
// probability // probability
if (entry.probability === undefined) { if (entry.probability === undefined) {
@@ -857,7 +854,7 @@ function getWorldEntry(name, data, entry) {
saveWorldInfo(name, data); saveWorldInfo(name, data);
}); });
depthInput.val(entry.depth ?? DEFAULT_DEPTH).trigger("input"); 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 // Hide by default unless depth is specified
if (entry.position === world_info_position.atDepth) { if (entry.position === world_info_position.atDepth) {
@@ -885,7 +882,7 @@ function getWorldEntry(name, data, entry) {
saveWorldInfo(name, data); saveWorldInfo(name, data);
}); });
probabilityInput.val(entry.probability).trigger("input"); probabilityInput.val(entry.probability).trigger("input");
probabilityInput.width(InputWidthReference.width() + 15 + 'px') probabilityInput.css('width', 'calc(3em + 15px)');
// probability toggle // probability toggle
if (entry.useProbability === undefined) { if (entry.useProbability === undefined) {
@@ -2065,7 +2062,7 @@ jQuery(() => {
$("#world_editor_select").on('change', async () => { $("#world_editor_select").on('change', async () => {
$("#world_info_search").val(''); $("#world_info_search").val('');
worldInfoFilter.setFilterData(FILTER_TYPES.WORLD_INFO_SEARCH, '', true); 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 === "") { if (selectedIndex === "") {
hideWorldEditor(); hideWorldEditor();
@@ -2080,39 +2077,39 @@ jQuery(() => {
eventSource.emit(event_types.WORLDINFO_SETTINGS_UPDATED); 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 = Number($(this).val());
$("#world_info_depth_counter").val($(this).val()); $("#world_info_depth_counter").val($(this).val());
saveSettings(); 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 = Number($(this).val());
$("#world_info_min_activations_counter").val($(this).val()); $("#world_info_min_activations_counter").val($(this).val());
saveSettings(); 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 = Number($(this).val());
$("#world_info_min_activations_depth_max_counter").val($(this).val()); $("#world_info_min_activations_depth_max_counter").val($(this).val());
saveSettings(); saveSettings();
}); });
$(document).on("input", "#world_info_budget", function () { $("#world_info_budget").on('input', function () {
world_info_budget = Number($(this).val()); world_info_budget = Number($(this).val());
$("#world_info_budget_counter").val($(this).val()); $("#world_info_budget_counter").val($(this).val());
saveSettings(); saveSettings();
}); });
$(document).on("input", "#world_info_recursive", function () { $("#world_info_recursive").on('input', function () {
world_info_recursive = !!$(this).prop('checked'); world_info_recursive = !!$(this).prop('checked');
saveSettings(); saveSettings();
}) });
$('#world_info_case_sensitive').on('input', function () { $('#world_info_case_sensitive').on('input', function () {
world_info_case_sensitive = !!$(this).prop('checked'); world_info_case_sensitive = !!$(this).prop('checked');
saveSettings(); saveSettings();
}) });
$('#world_info_match_whole_words').on('input', function () { $('#world_info_match_whole_words').on('input', function () {
world_info_match_whole_words = !!$(this).prop('checked'); world_info_match_whole_words = !!$(this).prop('checked');