Characters list top panel touchup (#4282) * 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>

ba12b32a1fc9d606e9c155a35ac34d36d14bb6ee

Cohee <18619528+Cohee1207@users.noreply.github.com>

Signed
Parents: c3e3fdb0ca0fe95eb19804f4358e931874fa51bb
5 files changed, +83 -34Ignore whitespace
public/css/st-tailwind.css+0 -8
@@ -470,14 +470,6 @@
470470 margin-left: 20px;
471471}
472472
473-/*used to fix smallness of certain FontAwesome glyph which break button squareness*/
474-/*currently used on: CharList Import*/
475-
476-.faSmallFontSquareFix {
477- font-size: calc(var(--mainFontSize) *1.25);
478- width: calc(var(--mainFontSize) *1.95);
479-}
480-
481473.textarea_compact {
482474 font-size: calc(var(--mainFontSize) * 0.95);
483475 line-height: 1.2;
public/css/tags.css+1 -1
@@ -157,7 +157,7 @@
157157 flex-direction: row;
158158 flex-wrap: wrap;
159159 align-items: flex-start;
160160 margin: 5px 0;
161161}
162162
163163.rm_tag_filter .tag {
public/index.html+14 -10
@@ -5522,7 +5522,6 @@
55225522 <div id="HotSwapWrapper" class="alignitemscenter flex-container margin0auto wide100p">
55235523 <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">
55245524 </div>
5525- <hr class="wide100p">
55265525 </div>
55275526 </div>
55285527
@@ -5850,13 +5849,15 @@
58505849 </div>
58515850 <div name="Character List Panel" id="rm_characters_block" class="right_menu">
58525851 <div id="charListFixedTop">
58535852 <formdiv id="form_character_search_form" action="javascript:void(null);rm_button_bar">
58545853 <div id="rm_button_create" title="Create New Character" data-i18n="[title]Create New Character" class="menu_button fa-solid fa-user-plus "></div>
58555854 <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>
58565855 <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>
58575856 <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>
5858- <input id="character_search_bar" class="text_pole width100p" type="search" data-i18n="[placeholder]Search..." placeholder="Search..." />
5857+ <div id="rm_buttons_container">
5859- <select id="character_sort_order" title="Characters sorting order" data-i18n="[title]Characters sorting order">
5858+ <!-- Container for additional buttons added by extensions -->
5859+ </div>
5860+ <select id="character_sort_order" class="flex1 text_pole textarea_compact" title="Characters sorting order" data-i18n="[title]Characters sorting order">
58605861 <option data-field="search" data-order="desc" data-i18n="Search" hidden>Search</option>
58615862 <option data-field="name" data-order="asc" data-i18n="A-Z">A-Z</option>
58625863 <option data-field="name" data-order="desc" data-i18n="Z-A">Z-A</option>
@@ -5870,12 +5871,15 @@
58705871 <option data-field="data_size" data-order="asc" data-i18n="Least tokens">Least tokens</option>
58715872 <option data-field="name" data-order="random" data-i18n="Random">Random</option>
58725873 </select>
5873- </form>
5874+ <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>
5875+ </div>
5876+ <div id="form_character_search_form">
5877+ <input id="character_search_bar" class="text_pole textarea_compact width100p" type="search" data-i18n="[placeholder]Search..." placeholder="Search..." />
5878+ </div>
58745879 <div class="rm_tag_controls">
58755880 <div class="tags rm_tag_filter"></div>
58765881 <div class="tags rm_tag_bogus_drilldown"></div>
58775882 </div>
5878- <hr>
58795883 </div>
58805884
58815885 <div id="rm_print_characters_pagination">
public/script.js+33 -7
@@ -9367,6 +9367,38 @@ API Settings: ${JSON.stringify(getSettingsContents[getSettingsContents.main_api
93679367 });
93689368}
93699369
9370+function initCharacterSearch() {
9371+ const debouncedCharacterSearch = debounce((searchQuery) => {
9372+ entitiesFilter.setFilterData(FILTER_TYPES.SEARCH, searchQuery);
9373+ });
9374+
9375+ const searchForm = $('#form_character_search_form');
9376+ const searchInput = $('#character_search_bar');
9377+ const searchButton = $('#rm_button_search');
9378+
9379+ const storageKey = 'characterSearchFormVisible';
9380+
9381+ searchInput.on('input', function () {
9382+ const searchQuery = String($(this).val());
9383+ debouncedCharacterSearch(searchQuery);
9384+ });
9385+
9386+ searchButton.on('click', function () {
9387+ const newVisibility = !searchForm.is(':visible');
9388+ searchForm.toggle(newVisibility);
9389+ searchButton.toggleClass('active', newVisibility);
9390+ accountStorage.setItem(storageKey, String(newVisibility));
9391+ if (newVisibility) {
9392+ searchInput.trigger('focus');
9393+ }
9394+ });
9395+
9396+ eventSource.on(event_types.APP_READY, () => {
9397+ const isVisible = accountStorage.getItem(storageKey) === 'true';
9398+ searchForm.toggle(isVisible);
9399+ searchButton.toggleClass('active', isVisible);
9400+ });
9401+}
93709402
93719403// MARK: DOM Handlers Start
93729404jQuery(async function () {
@@ -9417,13 +9449,7 @@ jQuery(async function () {
94179449 $(document).on('click', '.last_mes .swipe_right', swipe_right);
94189450 $(document).on('click', '.last_mes .swipe_left', swipe_left);
94199451
9420- const debouncedCharacterSearch = debounce((searchQuery) => {
9452+ initCharacterSearch();
9421- entitiesFilter.setFilterData(FILTER_TYPES.SEARCH, searchQuery);
9422- });
9423- $('#character_search_bar').on('input', function () {
9424- const searchQuery = String($(this).val());
9425- debouncedCharacterSearch(searchQuery);
9426- });
94279453
94289454 $('#mes_impersonate').on('click', function () {
94299455 $('#option_impersonate').trigger('click');
public/style.css+35 -8
@@ -2643,7 +2643,7 @@ input[type="file"] {
26432643 align-items: center;
26442644 flex-wrap: wrap;
26452645 gap: 10px;
26462646 padding-right: 0px 10px 0px 5px;
26472647}
26482648
26492649#chartokenwarning.menu_button {
@@ -2667,6 +2667,7 @@ input[type="file"] {
26672667 transition: all var(--animation-duration-3x) ease-in-out;
26682668}
26692669
2670+.right_menu_button.active,
26702671.right_menu_button:hover {
26712672 filter: brightness(150%);
26722673}
@@ -2771,6 +2772,11 @@ input[type="file"] {
27712772 padding: 1px;
27722773}
27732774
2775+#rm_print_characters_pagination .menu_button {
2776+ margin: 0;
2777+ padding: 4px 5px;
2778+}
2779+
27742780.bulk_select_checkbox {
27752781 align-self: center;
27762782}
@@ -2822,6 +2828,22 @@ input[type="file"] {
28222828 overflow-y: auto;
28232829}
28242830
2831+#rm_button_bar {
2832+ display: flex;
2833+ gap: 5px;
2834+ align-items: center;
2835+}
2836+
2837+#rm_button_bar .menu_button {
2838+ width: calc(var(--mainFontSize) * 1.8);
2839+ aspect-ratio: 1;
2840+ margin: 0;
2841+}
2842+
2843+#rm_buttons_container {
2844+ display: contents;
2845+}
2846+
28252847#floatingPrompt,
28262848#cfgConfig {
28272849 overflow-y: auto;
@@ -3060,15 +3082,17 @@ select option:not(:checked) {
30603082 flex-grow: 1;
30613083}
30623084
3085+#charListFixedTop {
3086+ padding: 1px;
3087+}
3088+
30633089#form_character_search_form {
30643090 display: flex;
30653091 flex-direction: row;
30663092 align-items: stretch;
3067- margin: 5px;
30683093 column-gap: 5px;
30693094}
30703095
3071-#form_character_search_form .menu_button,
30723096#GroupFavDelOkBack .menu_button {
30733097 margin: 0;
30743098 height: fit-content;
@@ -3078,17 +3102,20 @@ select option:not(:checked) {
30783102}
30793103
30803104#character_sort_order {
3081- margin: 0;
30823105 flex: 1;
30833106 border-radius: 5px;
30843107 heightmargin: auto0;
3108+ padding: 4px 5px;
30853109}
30863110
30873111#character_search_bar {
3088- margin: 0;
30893112 flex: 1;
3090- /* padding-left: 0.75em; */
3113+}
3091- height: auto;
3114+
3115+#rm_button_search {
3116+ align-self: center;
3117+ font-size: 1.1em;
3118+ margin: 0 2px;
30923119}
30933120
30943121#persona_search_bar {