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 -18Showing whitespace changes
UpdateAndStart.bat+1 -1
@@ -15,7 +15,7 @@ if %errorlevel% neq 0 (
1515 if %errorlevel% neq 0 (
1616 REM incase there is still something wrong
1717 echo There were errors while updating.
1818 echo See the update FAQ at https://docs.sillytavern.app/usageinstallation/updateupdating/#common-update-problems
1919 goto end
2020 )
2121)
public/css/world-info.css+21 -6
@@ -171,17 +171,32 @@
171171#world_editor_select {
172172 text-overflow: ellipsis;
173173 white-space: nowrap;
174- width: 10em;
175174}
176175
176+#world_editor_select,
177+#world_editor_select~.select2-container,
178+#world_info_sort_order,
177179#world_info_search {
178180 widthflex: 10em1;
179- min-width: 10em;
180- flex-grow: 1;
181181}
182182
183183#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;
185200}
186201
187202.world_entry .killSwitch.fa-toggle-on {
public/index.html+10 -8
@@ -4444,28 +4444,30 @@
44444444 </div>
44454445 <div id="world_popup">
44464446 <hr>
44474447 <div class="flex-container alignitemscenter gap3px">
44484448 <input type="file" id="world_import_file" accept=".json,.lorebook,.png" name="avatar" hidden>
44494449 <div id="world_create_button" class="menu_button menu_button_icon">
44504450 <i class="fa-solid fa-globe"></i>
44514451 <span data-i18n="New">New</span>
44524452 </div>
44534453 <small data-i18n="or">or</small>
44544454 <select id="world_editor_select" class="margin0">
44554455 <option value="" data-i18n="--- Pick to Edit ---">--- Pick to Edit ---</option>
44564456 </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>
44574459 <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>
44584465 <div id="OpenAllWIEntries" class="menu_button fa-solid fa-expand" title="Open all Entries" data-i18n="[title]Open all Entries"></div>
44594466 <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>
44614467 <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>
44624468 <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>
44674469 <input type="search" class="text_pole textarea_compact" data-i18n="[placeholder]Search..." id="world_info_search" placeholder="Search...">
44684470 <select id="world_info_sort_order" class="margin0text_pole textarea_compact">
44694471 <option data-rule="search" value="14" data-i18n="Search" hidden>Search</option>
44704472 <option data-rule="priority" value="0" data-i18n="Priority">Priority</option>
44714473 <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() {
19161916 });
19171917
19181918 if (result.ok) {
19191919 varconst data = await result.json();
1920+ const editorSelected = String($('#world_editor_select').find(':selected').text());
19201921 world_names = data.world_names?.length ? data.world_names : [];
19211922 $('#world_info').find('option[value!=""]').remove();
19221923 $('#world_editor_select').find('option[value!=""]').remove();
19231924
19241925 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);
19271932 });
19281933 }
19291934}
@@ -5738,6 +5743,14 @@ export function initWorldInfo() {
57385743
57395744 // Not needed on mobile
57405745 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+
57415754 $('#world_info').select2({
57425755 width: '100%',
57435756 placeholder: t`No Worlds active. Click here to select.`,