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

Merge pull request #65 from one-some/ui2-tweaks

Browse Source 
Add tweaks and 1 example tweak
This commit is contained in:
ebolam
2022-08-26 16:56:16 -04:00
committed by GitHub
parent 78e51bf761 ec01557f4f
commit e9d1574a72
4 changed files with 75 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
static/koboldai.css
View File

@@ -656,6 +656,25 @@ input[type="range"]::-ms-fill-upper {
filter: brightness(85%);
}
/* Tweaks */
.tweak-container {
display: flex;
align-items: center;
justify-content: space-between;
color: var(--setting_text);
background-color: var(--setting_background);
border-radius: var(--radius_settings_background);
padding: 10px 8px;
margin-bottom: 5px;
width: 100%;
}
#Tweaks {
/* Don't add space under last tweak-container. Also, CSS, why no last-of-class!?!? */
margin-bottom: 0px;
}
/*----------------RIGHT FLYOUT MENU------------------*/
.right_menu_icon {
position: fixed;

42
static/koboldai.js
View File

@@ -2812,4 +2812,46 @@ $(document).ready(function(){
}
preserve_game_space(!(getCookie("preserve_game_space") == "false"));
options_on_right(!(getCookie("options_on_right") == "false"));
// Tweak registering
let enabledTweaks = JSON.parse(getCookie("enabledTweaks", "[]"));
function saveTweaks() {
let out = [];
// TODO: Better saving
for (const tweakContainer of document.getElementsByClassName("tweak-container")) {
let toggle = tweakContainer.querySelector("input");
let path = tweakContainer.getAttribute("tweak-path");
if (toggle.checked) out.push(path);
}
setCookie("enabledTweaks", JSON.stringify(out));
}
for (const tweakContainer of document.getElementsByClassName("tweak-container")) {
let toggle = tweakContainer.querySelector("input");
let path = tweakContainer.getAttribute("tweak-path");
$(toggle).change(function(e) {
let path = $(this).closest(".tweak-container")[0].getAttribute("tweak-path");
let id = `tweak-${path}`;
if (this.checked) {
let style = document.createElement("link");
style.rel = "stylesheet";
style.href = `/themes/tweaks/${path}.css`;
style.id = id;
document.head.appendChild(style);
} else {
document.getElementById(id).remove();
}
saveTweaks();
});
if (enabledTweaks.includes(path)) toggle.click();
}
});

12
templates/settings flyout.html
View File

@@ -296,8 +296,18 @@
<span>Advanced Theme</h4>
</div>
</div>
<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> Tweaks</h4>
</div>
<div class="setting_tile_area" id="Tweaks">
<span class="help_text">Small UI changes that can be mixed and matched.</span>
<div class="tweak-container" tweak-path="hide-timing">
<span>Hide timing information</span>
<input type=checkbox class="setting_item_input" data-size="mini" data-onstyle="success" data-toggle="toggle">
</div>
</div>
</div>
<span class=>
<span class="material-icons-outlined cursor show_footer_icon" onclick='if (document.getElementById("settings_footer").classList.contains("hidden")){
document.getElementById("settings_footer").classList.remove("hidden");
} else {

2
themes/tweaks/hide-timing.css Normal file
View File

@@ -0,0 +1,2 @@
.show_footer_icon { display: none; }
#settings_footer { display: none; }