shaw/SillyTavern
1
0
Fork 0
Code Issues Pull Requests Actions 7 Packages Projects Releases Wiki Activity

Characters list top panel touchup (#4282)

Browse Source 
* Move search bar under buttons
Closes #4275

* Remove horizontal rules from right menu

* Add toggle for search form

* Add container for extension rm buttons

* Be square or be there

* Adjust font sizes

* Square enlargement program

* Adjust margins

* Remove margin from pagination outlet buttons

* Adjust margin on tag controls

* Collapse 1px margins

* Update public/script.js

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Remove variable assignment

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
Cohee
2025-07-18 20:01:44 +03:00
committed by GitHub
parent c3e3fdb0ca
commit ba12b32a1f
5 changed files with 83 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/st-tailwind.css
-8
View File
@@ -470,14 +470,6 @@
margin-left: 20px;
}
/*used to fix smallness of certain FontAwesome glyph which break button squareness*/
/*currently used on: CharList Import*/
.faSmallFontSquareFix {
font-size: calc(var(--mainFontSize) *1.25);
width: calc(var(--mainFontSize) *1.95);
}
.textarea_compact {
font-size: calc(var(--mainFontSize) * 0.95);
line-height: 1.2;
public/css/tags.css
+1 -1
View File
@@ -157,7 +157,7 @@
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
margin: 5px;
margin: 5px 0;
}
.rm_tag_filter .tag {
public/index.html
+14 -10
View File
@@ -5522,7 +5522,6 @@
<div id="HotSwapWrapper" class="alignitemscenter flex-container margin0auto wide100p">
<div class="hotswap avatars_inline scroll-reset-container expander" data-i18n="[no_favs]Favorite characters to add them to HotSwaps" no_favs="Favorite characters to add them to HotSwaps">
</div>
<hr class="wide100p">
</div>
</div>
@@ -5850,13 +5849,15 @@
</div>
<div name="Character List Panel" id="rm_characters_block" class="right_menu">
<div id="charListFixedTop">
<form id="form_character_search_form" action="javascript:void(null);">
<div id="rm_button_create" title="Create New Character" data-i18n="[title]Create New Character" class="menu_button fa-solid fa-user-plus "></div>
<div id="character_import_button" title="Import Character from File" data-i18n="[title]Import Character from File" class="menu_button fa-solid fa-file-import faSmallFontSquareFix"></div>
<div id="external_import_button" title="Import content from external URL" data-i18n="[title]Import content from external URL" class="menu_button fa-solid fa-cloud-arrow-down faSmallFontSquareFix"></div>
<div id="rm_button_group_chats" title="Create New Chat Group" data-i18n="[title]Create New Chat Group" class="menu_button fa-solid fa-users-gear "></div>
<input id="character_search_bar" class="text_pole width100p" type="search" data-i18n="[placeholder]Search..." placeholder="Search..." />
<select id="character_sort_order" title="Characters sorting order" data-i18n="[title]Characters sorting order">
<div id="rm_button_bar">
<div id="rm_button_create" title="Create New Character" data-i18n="[title]Create New Character" class="menu_button fa-solid fa-user-plus"></div>
<div id="character_import_button" title="Import Character from File" data-i18n="[title]Import Character from File" class="menu_button fa-solid fa-file-import"></div>
<div id="external_import_button" title="Import content from external URL" data-i18n="[title]Import content from external URL" class="menu_button fa-solid fa-cloud-arrow-down"></div>
<div id="rm_button_group_chats" title="Create New Chat Group" data-i18n="[title]Create New Chat Group" class="menu_button fa-solid fa-users-gear"></div>
<div id="rm_buttons_container">
<!-- Container for additional buttons added by extensions -->
</div>
<select id="character_sort_order" class="flex1 text_pole textarea_compact" title="Characters sorting order" data-i18n="[title]Characters sorting order">
<option data-field="search" data-order="desc" data-i18n="Search" hidden>Search</option>
<option data-field="name" data-order="asc" data-i18n="A-Z">A-Z</option>
<option data-field="name" data-order="desc" data-i18n="Z-A">Z-A</option>
@@ -5870,12 +5871,15 @@
<option data-field="data_size" data-order="asc" data-i18n="Least tokens">Least tokens</option>
<option data-field="name" data-order="random" data-i18n="Random">Random</option>
</select>
</form>
<div id="rm_button_search" class="right_menu_button fa-fw fa-solid fa-search" title="Toggle search bar" data-i18n="[title]Toggle search bar"></div>
</div>
<div id="form_character_search_form">
<input id="character_search_bar" class="text_pole textarea_compact width100p" type="search" data-i18n="[placeholder]Search..." placeholder="Search..." />
</div>
<div class="rm_tag_controls">
<div class="tags rm_tag_filter"></div>
<div class="tags rm_tag_bogus_drilldown"></div>
</div>
<hr>
</div>
<div id="rm_print_characters_pagination">
public/script.js
+33 -7
View File
@@ -9367,6 +9367,38 @@ API Settings: ${JSON.stringify(getSettingsContents[getSettingsContents.main_api
});
}
function initCharacterSearch() {
const debouncedCharacterSearch = debounce((searchQuery) => {
entitiesFilter.setFilterData(FILTER_TYPES.SEARCH, searchQuery);
});
const searchForm = $('#form_character_search_form');
const searchInput = $('#character_search_bar');
const searchButton = $('#rm_button_search');
const storageKey = 'characterSearchFormVisible';
searchInput.on('input', function () {
const searchQuery = String($(this).val());
debouncedCharacterSearch(searchQuery);
});
searchButton.on('click', function () {
const newVisibility = !searchForm.is(':visible');
searchForm.toggle(newVisibility);
searchButton.toggleClass('active', newVisibility);
accountStorage.setItem(storageKey, String(newVisibility));
if (newVisibility) {
searchInput.trigger('focus');
}
});
eventSource.on(event_types.APP_READY, () => {
const isVisible = accountStorage.getItem(storageKey) === 'true';
searchForm.toggle(isVisible);
searchButton.toggleClass('active', isVisible);
});
}
// MARK: DOM Handlers Start
jQuery(async function () {
@@ -9417,13 +9449,7 @@ jQuery(async function () {
$(document).on('click', '.last_mes .swipe_right', swipe_right);
$(document).on('click', '.last_mes .swipe_left', swipe_left);
const debouncedCharacterSearch = debounce((searchQuery) => {
entitiesFilter.setFilterData(FILTER_TYPES.SEARCH, searchQuery);
});
$('#character_search_bar').on('input', function () {
const searchQuery = String($(this).val());
debouncedCharacterSearch(searchQuery);
});
initCharacterSearch();
$('#mes_impersonate').on('click', function () {
$('#option_impersonate').trigger('click');
public/style.css
+35 -8
View File
@@ -2643,7 +2643,7 @@ input[type="file"] {
align-items: center;
flex-wrap: wrap;
gap: 10px;
padding: 0px 10px 0px 5px;
padding-right: 5px;
}
#chartokenwarning.menu_button {
@@ -2667,6 +2667,7 @@ input[type="file"] {
transition: all var(--animation-duration-3x) ease-in-out;
}
.right_menu_button.active,
.right_menu_button:hover {
filter: brightness(150%);
}
@@ -2771,6 +2772,11 @@ input[type="file"] {
padding: 1px;
}
#rm_print_characters_pagination .menu_button {
margin: 0;
padding: 4px 5px;
}
.bulk_select_checkbox {
align-self: center;
}
@@ -2822,6 +2828,22 @@ input[type="file"] {
overflow-y: auto;
}
#rm_button_bar {
display: flex;
gap: 5px;
align-items: center;
}
#rm_button_bar .menu_button {
width: calc(var(--mainFontSize) * 1.8);
aspect-ratio: 1;
margin: 0;
}
#rm_buttons_container {
display: contents;
}
#floatingPrompt,
#cfgConfig {
overflow-y: auto;
@@ -3060,15 +3082,17 @@ select option:not(:checked) {
flex-grow: 1;
}
#charListFixedTop {
padding: 1px;
}
#form_character_search_form {
display: flex;
flex-direction: row;
align-items: stretch;
margin: 5px;
column-gap: 5px;
}
#form_character_search_form .menu_button,
#GroupFavDelOkBack .menu_button {
margin: 0;
height: fit-content;
@@ -3078,17 +3102,20 @@ select option:not(:checked) {
}
#character_sort_order {
margin: 0;
flex: 1;
border-radius: 5px;
height: auto;
margin: 0;
padding: 4px 5px;
}
#character_search_bar {
margin: 0;
flex: 1;
/* padding-left: 0.75em; */
height: auto;
}
#rm_button_search {
align-self: center;
font-size: 1.1em;
margin: 0 2px;
}
#persona_search_bar {