rixty/KoboldAI-Client
1
1
Fork 0
mirror of https://github.com/KoboldAI/KoboldAI-Client.git synced 2025-06-05 21:59:24 +02:00
Code Issues Projects Releases Wiki Activity

Tab overhaul

Browse Source 
Makes tabs easy(er) to programatically act upon
This commit is contained in:
somebody
2022-09-02 18:06:25 -05:00
parent b452559105
commit 0e549b2f3f
3 changed files with 27 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
static/koboldai.js
View File

@@ -2963,6 +2963,18 @@ function detect_key_up(e) {
}
}
function selectTab(tab) {
let tabTarget = document.getElementById(tab.getAttribute("tab-target"));
let tabClass = Array.from(tab.classList).filter((c) => c.startsWith("tab-"))[0];
let targetClass = Array.from(tabTarget.classList).filter((c) => c.startsWith("tab-target-"))[0];
$(`.${tabClass}`).removeClass("selected");
tab.classList.add("selected");
$(`.${targetClass}`).addClass("hidden");
tabTarget.classList.remove("hidden");
}
function loadNAILorebook(data, filename) {
let lorebookVersion = data.lorebookVersion;
let wi_data = {folders: {[filename]: []}, entries: {}};
@@ -3353,5 +3365,5 @@ document.addEventListener("keydown", function(event) {
finder_selection_index = -1;
event.preventDefault();
break;
}
}
});

23
templates/settings flyout.html
View File

@@ -1,14 +1,3 @@
<script>
function show_setting_menu(span) {
menu = span.textContent.toLowerCase()
for (item of document.getElementsByClassName("setting_menu_button")) {
document.getElementById("setting_menu_"+item.textContent.toLowerCase()).classList.add("hidden");
item.classList.remove("selected");
}
span.classList.add("selected");
document.getElementById("setting_menu_"+menu).classList.remove("hidden");
}
</script>
<style>
#Model_Info {
width: 100%;
@@ -27,9 +16,9 @@
<!-- top menu bar-->
<div class="menu_pin_area"></div>
<div class="tabrow">
<span class="setting_menu_button selected" onclick="show_setting_menu(this);">Home</span>
<span class="setting_menu_button" onclick="show_setting_menu(this);">Settings</span>
<span class="setting_menu_button" onclick="show_setting_menu(this);">Interface</span>
<span class="setting_menu_button tab-settings selected" tab-target="setting_menu_home" onclick="selectTab(this);">Home</span>
<span class="setting_menu_button tab-settings" tab-target="setting_menu_settings" onclick="selectTab(this);">Settings</span>
<span class="setting_menu_button tab-settings" tab-target="setting_menu_interface" onclick="selectTab(this);">Interface</span>
<span style="float: right;margin-right: 30px;padding: 0px 10px;" onclick="window.open('https://github.com/KoboldAI/KoboldAI-Client/wiki');">
Help
<icon class="material-icons-outlined" style="font-size:14px;position:relative;top:2px;">open_in_new</icon>
@@ -37,7 +26,7 @@
</div>
<div class="flyout_menu_contents">
<div id="setting_menu_home" class="settings_category_area">
<div id="setting_menu_home" class="settings_category_area tab-target-settings">
<div class="Model_Info">
<div id="model_title">
<span>
@@ -99,7 +88,7 @@
</div>
</div>
<div id="setting_menu_settings" class="hidden settings_category_area">
<div id="setting_menu_settings" class="hidden settings_category_area tab-target-settings">
<div class="force_center">
<select class="var_sync_model_selected_preset settings_select presets" onchange='sync_to_server(this)'><option>Preset</option></select>
</div>
@@ -225,7 +214,7 @@
</div>
</div>
</div>
<div id="setting_menu_interface" class="hidden settings_category_area">
<div id="setting_menu_interface" class="hidden settings_category_area tab-target-settings">
<div class="collapsable_header" onclick="toggle_setting_category(this);">
<h4 style="width:var(--flyout_menu_width);"><span class="material-icons-outlined cursor">expand_more</span> UI</h4>
</div>

35
templates/story flyout.html
View File

@@ -1,30 +1,11 @@
<script>
function show_story_menu(menu_button, span) {
for (item of document.getElementsByClassName("story_menu_button")) {
if (item === menu_button) {
item.classList.add("selected");
} else {
item.classList.remove("selected");
}
}
for (item of document.getElementsByClassName("story_category_area")) {
if (item.id == span) {
item.classList.remove("hidden");
} else {
item.classList.add("hidden");
}
}
}
</script>
<div class="tabrow nomenu_icon">
<span class="story_menu_button selected" onclick="show_story_menu(this, 'story_menu_memory');">Memory</span>
<span class="story_menu_button" onclick="show_story_menu(this, 'story_menu_author');">Author's Note</span>
<span class="story_menu_button" onclick="show_story_menu(this, 'story_menu_notes');">Notes</span>
<span class="story_menu_button" onclick="show_story_menu(this, 'story_menu_wi');">World Info</span>
<span class="story_menu_button tab-story selected" tab-target="story_menu_memory" onclick="selectTab(this);">Memory</span>
<span class="story_menu_button tab-story" tab-target="story_menu_author" onclick="selectTab(this);">Author's Note</span>
<span class="story_menu_button tab-story" tab-target="story_menu_notes" onclick="selectTab(this);">Notes</span>
<span class="story_menu_button tab-story" tab-target="story_menu_wi" onclick="selectTab(this);">World Info</span>
</div>
<div class="flyout_menu_contents">
<div id="story_menu_memory" class="story_category_area">
<div id="story_menu_memory" class="story_category_area tab-target-story">
<div id="Memory">
<h4 class="section_header">Memory</h4>
<span class="help_text">
@@ -33,7 +14,7 @@
<textarea rows=20 id="memory" class="var_sync_story_memory var_sync_alt_story_memory_length fullwidth" onchange='sync_to_server(this);' oninput="autoResize(this)" autocomplete="off"></textarea>
</div>
</div>
<div id="story_menu_author" class="story_category_area hidden">
<div id="story_menu_author" class="story_category_area tab-target-story hidden">
<div id="author_notes">
<h4 class="section_header">Author's Note</h4>
<span class="help_text">
@@ -53,7 +34,7 @@
</div>
</div>
</div>
<div id="story_menu_notes" class="story_category_area hidden">
<div id="story_menu_notes" class="story_category_area tab-target-story hidden">
<div id="Notes">
<h4 class="section_header">Notes</h4>
<span class="help_text">
@@ -62,7 +43,7 @@
<textarea autocomplete="off" rows=20 class="var_sync_story_notes fullwidth" onchange='sync_to_server(this);' oninput="autoResize(this)"></textarea>
</div>
</div>
<div id="story_menu_wi" class="story_category_area hidden">
<div id="story_menu_wi" class="story_category_area tab-target-story hidden">
<h4 class="section_header" style="margin-left: 10px;">World Info</h4>
<span class="help_text" style="margin-left: 20px;">
Lore information, which the AI recalls by certain words.