feat(client): desktop version uses select2 to search, filter, and select (#4359) * Update UpdateAndStart.bat * feat(client): desktop version uses select2 to search, filter, and select world info to edit feat(client): styles for select2 to separate items and highlight * fix(client): more aligned with current select2 fix(client): removed unecessary functions and styles * Update WI editor layout * Add min-width for WI sort and search * Adjust control styling * Update option creation logic --------- Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>

35b1801e6e408b5eae39c058d169446d8a068e16

Anh Tri Pham <117049703+pAnhTri@users.noreply.github.com>

Signed
Parents: b0820c4517682356f2233acb026816d1dfd77095
4 files changed, +48 -18Ignore whitespace
UpdateAndStart.bat+1 -1
@@ -15,7 +15,7 @@ if %errorlevel% neq 0 (
15 if %errorlevel% neq 0 (15 if %errorlevel% neq 0 (
16 REM incase there is still something wrong16 REM incase there is still something wrong
17 echo There were errors while updating.17 echo There were errors while updating.
18 echo See the update FAQ at https://docs.sillytavern.app/usage/update/#common-update-problems18 echo See the update FAQ at https://docs.sillytavern.app/installation/updating/
19 goto end19 goto end
20 )20 )
21)21)
public/css/world-info.css+21 -6
@@ -171,17 +171,32 @@
171#world_editor_select {171#world_editor_select {
172 text-overflow: ellipsis;172 text-overflow: ellipsis;
173 white-space: nowrap;173 white-space: nowrap;
174 width: 10em;
175}174}
176175
176#world_editor_select,
177#world_editor_select~.select2-container,
178#world_info_sort_order,
177#world_info_search {179#world_info_search {
178 width: 10em;180 flex: 1;
179 min-width: 10em;
180 flex-grow: 1;
181}181}
182182
183#world_info_sort_order {183#world_info_sort_order,
184 width: 7em;184#world_info_search {
185 min-width: 6em;
186}
187
188#world_editor_select~.select2-container {
189 overflow: hidden;
190}
191
192#world_editor_select~.select2-container .select2-selection--single .select2-selection__rendered {
193 padding-right: 30px;
194}
195
196#world_editor_select~.select2-container .select2-selection .select2-selection__clear {
197 right: 20px;
198 display: flex;
199 align-items: center;
185}200}
186201
187.world_entry .killSwitch.fa-toggle-on {202.world_entry .killSwitch.fa-toggle-on {
public/index.html+10 -8
@@ -4444,28 +4444,30 @@
4444 </div>4444 </div>
4445 <div id="world_popup">4445 <div id="world_popup">
4446 <hr>4446 <hr>
4447 <div class="flex-container alignitemscenter gap3px">4447 <div class="flex-container alignitemscenter">
4448 <input type="file" id="world_import_file" accept=".json,.lorebook,.png" name="avatar" hidden>4448 <input type="file" id="world_import_file" accept=".json,.lorebook,.png" name="avatar" hidden>
4449 <div id="world_create_button" class="menu_button menu_button_icon">4449 <div id="world_create_button" class="menu_button menu_button_icon">
4450 <i class="fa-solid fa-globe"></i>4450 <i class="fa-solid fa-globe"></i>
4451 <span data-i18n="New">New</span>4451 <span data-i18n="New">New</span>
4452 </div>4452 </div>
4453 <small data-i18n="or">or</small>4453 <small data-i18n="or">or</small>
4454 <select id="world_editor_select" class="margin0">4454 <select id="world_editor_select">
4455 <option value="" data-i18n="--- Pick to Edit ---">--- Pick to Edit ---</option>4455 <option value="" data-i18n="--- Pick to Edit ---">--- Pick to Edit ---</option>
4456 </select>4456 </select>
4457 <div id="world_import_button" class="menu_button fa-solid fa-file-import" title="Import World Info" data-i18n="[title]Import World Info"></div>
4458 <div id="world_popup_export" class="menu_button fa-solid fa-file-export" title="Export World Info" data-i18n="[title]Export World Info"></div>
4457 <div id="world_popup_name_button" class="menu_button fa-pencil fa-solid" title="Rename World Info" data-i18n="[title]Rename World Info"></div>4459 <div id="world_popup_name_button" class="menu_button fa-pencil fa-solid" title="Rename World Info" data-i18n="[title]Rename World Info"></div>
4460 <div id="world_duplicate" class="menu_button fa-solid fa-paste" title="Duplicate World Info" data-i18n="[title]Duplicate World Info"></div>
4461 <div id="world_popup_delete" class="menu_button fa-solid fa-trash-can redWarningBG" title="Delete World Info" data-i18n="[title]Delete World Info"></div>
4462 </div>
4463 <div class="flex-container alignitemscenter">
4464 <div id="world_popup_new" class="menu_button fa-solid fa-plus" title="New Entry" data-i18n="[title]New Entry"></div>
4458 <div id="OpenAllWIEntries" class="menu_button fa-solid fa-expand" title="Open all Entries" data-i18n="[title]Open all Entries"></div>4465 <div id="OpenAllWIEntries" class="menu_button fa-solid fa-expand" title="Open all Entries" data-i18n="[title]Open all Entries"></div>
4459 <div id="CloseAllWIEntries" class="menu_button fa-solid fa-compress" title="Close all Entries" data-i18n="[title]Close all Entries"></div>4466 <div id="CloseAllWIEntries" class="menu_button fa-solid fa-compress" title="Close all Entries" data-i18n="[title]Close all Entries"></div>
4460 <div id="world_popup_new" class="menu_button fa-solid fa-plus" title="New Entry" data-i18n="[title]New Entry"></div>
4461 <div id="world_backfill_memos" class="menu_button fa-solid fa-notes-medical" title="Fill empty Memo/Titles with Keywords" data-i18n="[title]Fill empty Memo/Titles with Keywords"></div>4467 <div id="world_backfill_memos" class="menu_button fa-solid fa-notes-medical" title="Fill empty Memo/Titles with Keywords" data-i18n="[title]Fill empty Memo/Titles with Keywords"></div>
4462 <div id="world_apply_current_sorting" class="menu_button fa-solid fa-solid fa-arrow-down-9-1" title="Apply current sorting as Order" data-i18n="[title]Apply current sorting as Order"></div>4468 <div id="world_apply_current_sorting" class="menu_button fa-solid fa-solid fa-arrow-down-9-1" title="Apply current sorting as Order" data-i18n="[title]Apply current sorting as Order"></div>
4463 <div id="world_import_button" class="menu_button fa-solid fa-file-import" title="Import World Info" data-i18n="[title]Import World Info"></div>
4464 <div id="world_popup_export" class="menu_button fa-solid fa-file-export" title="Export World Info" data-i18n="[title]Export World Info"></div>
4465 <div id="world_duplicate" class="menu_button fa-solid fa-paste" title="Duplicate World Info" data-i18n="[title]Duplicate World Info"></div>
4466 <div id="world_popup_delete" class="menu_button fa-solid fa-trash-can redWarningBG" title="Delete World Info" data-i18n="[title]Delete World Info"></div>
4467 <input type="search" class="text_pole textarea_compact" data-i18n="[placeholder]Search..." id="world_info_search" placeholder="Search...">4469 <input type="search" class="text_pole textarea_compact" data-i18n="[placeholder]Search..." id="world_info_search" placeholder="Search...">
4468 <select id="world_info_sort_order" class="margin0">4470 <select id="world_info_sort_order" class="text_pole textarea_compact">
4469 <option data-rule="search" value="14" data-i18n="Search" hidden>Search</option>4471 <option data-rule="search" value="14" data-i18n="Search" hidden>Search</option>
4470 <option data-rule="priority" value="0" data-i18n="Priority">Priority</option>4472 <option data-rule="priority" value="0" data-i18n="Priority">Priority</option>
4471 <option data-rule="custom" value="13" data-i18n="Custom">Custom</option>4473 <option data-rule="custom" value="13" data-i18n="Custom">Custom</option>
public/scripts/world-info.js+16 -3
@@ -1916,14 +1916,19 @@ export async function updateWorldInfoList() {
1916 });1916 });
19171917
1918 if (result.ok) {1918 if (result.ok) {
1919 var data = await result.json();1919 const data = await result.json();
1920 const editorSelected = String($('#world_editor_select').find(':selected').text());
1920 world_names = data.world_names?.length ? data.world_names : [];1921 world_names = data.world_names?.length ? data.world_names : [];
1921 $('#world_info').find('option[value!=""]').remove();1922 $('#world_info').find('option[value!=""]').remove();
1922 $('#world_editor_select').find('option[value!=""]').remove();1923 $('#world_editor_select').find('option[value!=""]').remove();
19231924
1924 world_names.forEach((item, i) => {1925 world_names.forEach((item, i) => {
1925 $('#world_info').append(`<option value='${i}'${selected_world_info.includes(item) ? ' selected' : ''}>${item}</option>`);1926 const globalListOption = new Option(item, i.toString());
1926 $('#world_editor_select').append(`<option value='${i}'>${item}</option>`);1927 globalListOption.selected = selected_world_info.includes(item);
1928 const editorListOption = new Option(item, i.toString());
1929 editorListOption.selected = editorSelected === item;
1930 $('#world_info').append(globalListOption);
1931 $('#world_editor_select').append(editorListOption);
1927 });1932 });
1928 }1933 }
1929}1934}
@@ -5738,6 +5743,14 @@ export function initWorldInfo() {
57385743
5739 // Not needed on mobile5744 // Not needed on mobile
5740 if (!isMobile()) {5745 if (!isMobile()) {
5746 $('#world_editor_select').select2({
5747 placeholder: t`--- Pick to Edit ---`,
5748 searchInputPlaceholder: t`Search...`,
5749 allowClear: true,
5750 closeOnSelect: true,
5751 multiple: false,
5752 });
5753
5741 $('#world_info').select2({5754 $('#world_info').select2({
5742 width: '100%',5755 width: '100%',
5743 placeholder: t`No Worlds active. Click here to select.`,5756 placeholder: t`No Worlds active. Click here to select.`,