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

Advanced Theme Support complete

Browse Source
This commit is contained in:
ebolam
2022-08-21 19:20:14 -04:00
parent 6f471b880f
commit a8a703c13a
3 changed files with 89 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
static/koboldai.js
View File

@@ -1476,6 +1476,16 @@ function show_error_message(data) {
function save_theme() {
var cssVars = getAllCSSVariableNames();
console.log(cssVars);
for (const [key, value] of Object.entries(cssVars)) {
if (document.getElementById(key)) {
if (document.getElementById(key+"_select").value == "") {
cssVars[key] = document.getElementById(key).value;
} else {
cssVars[key] = "var(--"+document.getElementById(key+"_select").value+")";
}
}
}
for (item of document.getElementsByClassName("Theme_Input")) {
cssVars["--"+item.id] = item.value;
}
@@ -1650,9 +1660,10 @@ function create_theming_elements() {
//console.log("Running theme editor");
var cssVars = getAllCSSVariableNames();
palette_table = document.createElement("table");
advanced_table = document.createElement("table");
advanced_table = document.getElementById("advanced_theme_editor_table");
theme_area = document.getElementById("Palette");
theme_area.append(palette_table);
//console.log(cssVars);
//theme_area.append(advanced_table);
for (const [css_item, css_value] of Object.entries(cssVars)) {
@@ -1669,16 +1680,24 @@ function create_theming_elements() {
title.textContent = css_item.replace("--", "").replace("_palette", "");
tr.append(title);
select = document.createElement("select");
select.style = "width: 100px; color:black;";
select.style = "width: 150px; color:black;";
var option = document.createElement("option");
option.value="";
option.text="Use Color";
option.text="User Value ->";
select.append(option);
select.id = css_item+"_select";
select.onchange = function () {
var r = document.querySelector(':root');
r.style.setProperty(this.id.replace("_select", ""), this.value);
}
for (const [css_item2, css_value2] of Object.entries(cssVars)) {
if (css_item2 != css_item) {
var option = document.createElement("option");
option.value=css_item2;
option.text=css_item2.replace("--", "");
if (css_item2 == css_value.replace("var(", "").replace(")", "")) {
option.selected = true;
}
select.append(option);
}
}
@@ -1703,7 +1722,9 @@ function create_theming_elements() {
input.setAttribute("type", "text");
input.id = css_item;
input.setAttribute("title", css_item.replace("--", "").replace("_palette", ""));
if (select.value != css_value.replace("var(", "").replace(")", "")) {
input.value = css_value;
}
input.onchange = function () {
var r = document.querySelector(':root');
r.style.setProperty(this.id, this.value);
@@ -2343,6 +2364,7 @@ function close_menus() {
document.getElementById('loadmodelcontainer').classList.add("hidden");
document.getElementById('save-confirm').classList.add("hidden");
document.getElementById('error_message').classList.add("hidden");
document.getElementById("advanced_theme_editor").classList.add("hidden");
//unselect sampler items

12
templates/popups.html
View File

@@ -107,3 +107,15 @@
<button type="button" class="btn btn-primary" onclick="document.getElementById('error_message').classList.add('hidden');">Ok</button>
</div>
</div>
<!---------------- Advanced Theme Editor ---------------------->
<div class="popup hidden" id="advanced_theme_editor">
<div class="title">
<div class="popuptitletext">Advanced Theme Editor</div>
</div>
<div id="popup_list_area" class="popup_list_area">
<table border=1 id="advanced_theme_editor_table"></table>
</div>
<div class="popup_load_cancel">
<button type="button" class="btn btn-primary" onclick="document.getElementById('advanced_theme_editor').classList.add('hidden');">Ok</button>
</div>
</div>

6
templates/settings flyout.html
View File

@@ -233,6 +233,7 @@
<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> Palette</h4>
</div>
<div>
<input type="text" id="save_theme_name" autocomplete="off" placeholder="New Theme Name"/>
<span class="material-icons-outlined cursor" title="Save Theme" onclick='save_theme();'>save</span>
<div class="setting_tile_area" id="Palette">
@@ -280,7 +281,10 @@
</table>
</div>
</div>
<div class="collapsable_header" onclick='document.getElementById("advanced_theme_editor").classList.remove("hidden");'>
<h4 style="width:var(--flyout_menu_width);"><span class="material-icons-outlined cursor">navigate_next</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> Formatting</h4>