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

Added search bar for characters

Browse Source
This commit is contained in:
SillyLossy
2023-02-12 20:13:23 +02:00
parent 7309796847
commit 4e638c65c5
3 changed files with 62 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/img/times-circle.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 455 B

24
public/index.html
View File

@@ -170,6 +170,19 @@
$('#characloud_url').click(function(){
window.open('https://boosty.to/tavernai', '_blank');
});
$('#character_search_bar').on('input', function() {
const searchValue = $(this).val().trim().toLowerCase();
if (!searchValue) {
$("#rm_print_charaters_block .character_select").show();
} else {
$("#rm_print_charaters_block .character_select").each(function () {
$(this).children('.ch_name').text().toLowerCase().includes(searchValue)
? $(this).show()
: $(this).hide();
});
}
});
function checkOnlineStatus(){
//console.log(online_status);
if(online_status == 'no_connection'){
@@ -3022,8 +3035,15 @@
</form>
</div>
<div id="rm_charaters_block" class="right_menu">
<div id="rm_button_create" class="right_menu_button"><h2>+</h2></div>
<div id="character_import_button" class="right_menu_button"><h2>+Import</h2></div>
<div id="rm_characters_topbar">
<div id="rm_button_create" class="right_menu_button"><h2>+</h2></div>
<div id="character_import_button" class="right_menu_button"><h2>+Import</h2></div>
<div id="rm_characters_topbar_expander">&nbsp;</div>
<form id="form_character_search_form" action="javascript:void(null);">
<input id="character_search_bar" class="text_pole" type="search" placeholder="Search here..." />
</form>
</div>
</div>
<div id="rm_print_charaters_block"></div>
</div>
<div id="rm_info_block" class="right_menu">

39
public/style.css
View File

@@ -510,6 +510,45 @@ input[type=button] {
display: block;
/* visibility: hidden; */
}
#rm_characters_topbar {
display: flex;
flex-direction: row;
align-items: center;
}
#rm_characters_topbar_expander {
flex-grow: 1;
}
#character_search_bar {
outline: none;
box-shadow: 0 0px 0px rgba(255, 255, 255, 0.0);
border: none;
background: transparent;
border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
color: rgb(188, 193, 200, 0.5);
font-weight: 300;
}
#character_search_bar::-webkit-search-cancel-button {
-webkit-appearance: none;
height: 1em;
width: 1em;
border-radius: 50em;
background: url('/img/times-circle.svg') no-repeat 50% 50%;
background-size: contain;
opacity: 0;
pointer-events: none;
filter: invert(1);
cursor: pointer;
}
#character_search_bar:focus::-webkit-search-cancel-button {
opacity: .3;
pointer-events: all;
}
.character_select{
padding: 0px;
border-radius: 10px;