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

30
static/koboldai.js
View File

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

12
templates/popups.html
View File

@@ -106,4 +106,16 @@
<div class="popup_load_cancel"> <div class="popup_load_cancel">
<button type="button" class="btn btn-primary" onclick="document.getElementById('error_message').classList.add('hidden');">Ok</button> <button type="button" class="btn btn-primary" onclick="document.getElementById('error_message').classList.add('hidden');">Ok</button>
</div> </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> </div>

98
templates/settings flyout.html
View File

@@ -233,54 +233,58 @@
<div class="collapsable_header" onclick="toggle_setting_category(this);"> <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> <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"/> <div>
<span class="material-icons-outlined cursor" title="Save Theme" onclick='save_theme();'>save</span> <input type="text" id="save_theme_name" autocomplete="off" placeholder="New Theme Name"/>
<div class="setting_tile_area" id="Palette"> <span class="material-icons-outlined cursor" title="Save Theme" onclick='save_theme();'>save</span>
<table border=1> <div class="setting_tile_area" id="Palette">
<tr> <table border=1>
<th></th> <tr>
<th colspan=2>Main</th> <th></th>
<th colspan=2>Alternative</th> <th colspan=2>Main</th>
</tr> <th colspan=2>Alternative</th>
<tr> </tr>
<th></th> <tr>
<th>Background</th> <th></th>
<th>Text</th> <th>Background</th>
<th>Background</th> <th>Text</th>
<th>Text</th> <th>Background</th>
</tr> <th>Text</th>
<tr> </tr>
<td>Primary</td> <tr>
<td><input class="Theme_Input" autocomplete="off" type=color id="primary_palette" onchange="palette_color(this)"></td> <td>Primary</td>
<td><input class="Theme_Input" autocomplete="off" type=color id="on_primary_palette" onchange="palette_color(this)"></td> <td><input class="Theme_Input" autocomplete="off" type=color id="primary_palette" onchange="palette_color(this)"></td>
<td><input class="Theme_Input" autocomplete="off" type=color id="primary_containter_palette" onchange="palette_color(this)"></td> <td><input class="Theme_Input" autocomplete="off" type=color id="on_primary_palette" onchange="palette_color(this)"></td>
<td><input class="Theme_Input" autocomplete="off" type=color id="on_primary_containter_palette" onchange="palette_color(this)"></td> <td><input class="Theme_Input" autocomplete="off" type=color id="primary_containter_palette" onchange="palette_color(this)"></td>
</tr> <td><input class="Theme_Input" autocomplete="off" type=color id="on_primary_containter_palette" onchange="palette_color(this)"></td>
<tr> </tr>
<td>Secondary</td> <tr>
<td><input class="Theme_Input" autocomplete="off" type=color id="secondary_palette" onchange="palette_color(this)"></td> <td>Secondary</td>
<td><input class="Theme_Input" autocomplete="off" type=color id="on_secondary_palette" onchange="palette_color(this)"></td> <td><input class="Theme_Input" autocomplete="off" type=color id="secondary_palette" onchange="palette_color(this)"></td>
<td><input class="Theme_Input" autocomplete="off" type=color id="secondary_containter_palette" onchange="palette_color(this)"></td> <td><input class="Theme_Input" autocomplete="off" type=color id="on_secondary_palette" onchange="palette_color(this)"></td>
<td><input class="Theme_Input" autocomplete="off" type=color id="on_secondary_containter_palette" onchange="palette_color(this)"></td> <td><input class="Theme_Input" autocomplete="off" type=color id="secondary_containter_palette" onchange="palette_color(this)"></td>
</tr> <td><input class="Theme_Input" autocomplete="off" type=color id="on_secondary_containter_palette" onchange="palette_color(this)"></td>
<tr> </tr>
<td>Tertiary</td> <tr>
<td><input class="Theme_Input" autocomplete="off" type=color id="tertiary_palette" onchange="palette_color(this)"></td> <td>Tertiary</td>
<td><input class="Theme_Input" autocomplete="off" type=color id="on_tertiary_palette" onchange="palette_color(this)"></td> <td><input class="Theme_Input" autocomplete="off" type=color id="tertiary_palette" onchange="palette_color(this)"></td>
<td><input class="Theme_Input" autocomplete="off" type=color id="tertiary_containter_palette" onchange="palette_color(this)"></td> <td><input class="Theme_Input" autocomplete="off" type=color id="on_tertiary_palette" onchange="palette_color(this)"></td>
<td><input class="Theme_Input" autocomplete="off" type=color id="on_tertiary_containter_palette" onchange="palette_color(this)"></td> <td><input class="Theme_Input" autocomplete="off" type=color id="tertiary_containter_palette" onchange="palette_color(this)"></td>
</tr> <td><input class="Theme_Input" autocomplete="off" type=color id="on_tertiary_containter_palette" onchange="palette_color(this)"></td>
<tr> </tr>
<td>Error</td> <tr>
<td><input class="Theme_Input" autocomplete="off" type=color id="error_palette" onchange="palette_color(this)"></td> <td>Error</td>
<td><input class="Theme_Input" autocomplete="off" type=color id="on_error_palette" onchange="palette_color(this)"></td> <td><input class="Theme_Input" autocomplete="off" type=color id="error_palette" onchange="palette_color(this)"></td>
<td><input class="Theme_Input" autocomplete="off" type=color id="error_containter_palette" onchange="palette_color(this)"></td> <td><input class="Theme_Input" autocomplete="off" type=color id="on_error_palette" onchange="palette_color(this)"></td>
<td><input class="Theme_Input" autocomplete="off" type=color id="on_error_containter_palette" onchange="palette_color(this)"></td> <td><input class="Theme_Input" autocomplete="off" type=color id="error_containter_palette" onchange="palette_color(this)"></td>
</tr> <td><input class="Theme_Input" autocomplete="off" type=color id="on_error_containter_palette" onchange="palette_color(this)"></td>
</table> </tr>
</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> </div>
<div class="collapsable_header" onclick="toggle_setting_category(this);"> <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> <h4 style="width:var(--flyout_menu_width);"><span class="material-icons-outlined cursor">expand_more</span> Formatting</h4>