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

Palette System Functional

Browse Source
This commit is contained in:
ebolam
2022-08-21 17:36:32 -04:00
parent 9625496ff8
commit 4c490bea16
3 changed files with 27 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
static/koboldai.js
View File

@@ -1584,7 +1584,9 @@ function Change_Theme(theme) {
//console.log(theme); //console.log(theme);
var css = document.getElementById("CSSTheme"); var css = document.getElementById("CSSTheme");
css.setAttribute("href", "/themes/"+theme+".css"); css.setAttribute("href", "/themes/"+theme+".css");
setTimeout(() => {
create_theming_elements(); create_theming_elements();
}, "1000")
} }
function palette_color(item) { function palette_color(item) {
@@ -1598,8 +1600,6 @@ function getAllCSSVariableNames(styleSheets = document.styleSheets){
// loop each stylesheet // loop each stylesheet
//console.log(styleSheets); //console.log(styleSheets);
for(var i = 0; i < styleSheets.length; i++){ for(var i = 0; i < styleSheets.length; i++){
//console.log(styleSheets[i]);
//console.log(styleSheets[i].ownerNode.attributes.id);
// loop stylesheet's cssRules // loop stylesheet's cssRules
try{ // try/catch used because 'hasOwnProperty' doesn't work try{ // try/catch used because 'hasOwnProperty' doesn't work
for( var j = 0; j < styleSheets[i].cssRules.length; j++){ for( var j = 0; j < styleSheets[i].cssRules.length; j++){
@@ -1629,7 +1629,7 @@ function create_theming_elements() {
advanced_table = document.createElement("table"); advanced_table = document.createElement("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 (css_item of cssVars) { for (css_item of cssVars) {
if (css_item[0].includes("_palette")) { if (css_item[0].includes("_palette")) {
@@ -1637,6 +1637,9 @@ function create_theming_elements() {
input = document.getElementById(css_item[0].replace("--", "")); input = document.getElementById(css_item[0].replace("--", ""));
input.setAttribute("title", css_item[0].replace("--", "").replace("_palette", "")); input.setAttribute("title", css_item[0].replace("--", "").replace("_palette", ""));
input.value = css_item[1]; input.value = css_item[1];
console.log("Set "+css_item[0].replace("--", "")+" to "+css_item[1]);
console.log(input);
} }
} else { } else {
tr = document.createElement("tr"); tr = document.createElement("tr");

36
templates/settings flyout.html
View File

@@ -169,7 +169,7 @@
<!---Bottom Row----> <!---Bottom Row---->
<span class="setting_item"> <span class="setting_item">
<!---<span class="material-icons-outlined cursor" onclick="socket.emit('load_softprompt_list', '');">folder_open</span> <span class="var_sync_system_spname"></span>---> <!---<span class="material-icons-outlined cursor" onclick="socket.emit('load_softprompt_list', '');">folder_open</span> <span class="var_sync_system_spname"></span>--->
<select id="sp" class="var_sync_system_splist var_sync_system_spfilename" style="width: 150px;color:black;" onclick="socket.emit('load_softprompt', this.value);"> <select autocomplete="off" id="sp" class="var_sync_system_splist var_sync_system_spfilename" style="width: 150px;color:black;" onclick="socket.emit('load_softprompt', this.value);">
</select> </select>
</span> </span>
<!---Slider Labels---> <!---Slider Labels--->
@@ -227,7 +227,7 @@
<h4 style="width:var(--flyout_menu_width);"><span class="material-icons-outlined cursor">expand_more</span> Theme</h4> <h4 style="width:var(--flyout_menu_width);"><span class="material-icons-outlined cursor">expand_more</span> Theme</h4>
</div> </div>
<div class="setting_tile_area" id="Theme"> <div class="setting_tile_area" id="Theme">
<select style="color: black;" onchange="Change_Theme(this.value);"> <select autocomplete="off" style="color: black;" onchange="Change_Theme(this.value);">
<option selected>Monochrome</option> <option selected>Monochrome</option>
<option>Material You</option> <option>Material You</option>
<option>Darkness</option> <option>Darkness</option>
@@ -252,31 +252,31 @@
</tr> </tr>
<tr> <tr>
<td>Primary</td> <td>Primary</td>
<td><input type=color id="primary_palette" onchange="palette_color(this)"></td> <td><input autocomplete="off" type=color id="primary_palette" onchange="palette_color(this)"></td>
<td><input type=color id="on_primary_palette" onchange="palette_color(this)"></td> <td><input autocomplete="off" type=color id="on_primary_palette" onchange="palette_color(this)"></td>
<td><input type=color id="primary_containter_palette" onchange="palette_color(this)"></td> <td><input autocomplete="off" type=color id="primary_containter_palette" onchange="palette_color(this)"></td>
<td><input type=color id="on_primary_containter_palette" onchange="palette_color(this)"></td> <td><input autocomplete="off" type=color id="on_primary_containter_palette" onchange="palette_color(this)"></td>
</tr> </tr>
<tr> <tr>
<td>Secondary</td> <td>Secondary</td>
<td><input type=color id="secondary_palette" onchange="palette_color(this)"></td> <td><input autocomplete="off" type=color id="secondary_palette" onchange="palette_color(this)"></td>
<td><input type=color id="on_secondary_palette" onchange="palette_color(this)"></td> <td><input autocomplete="off" type=color id="on_secondary_palette" onchange="palette_color(this)"></td>
<td><input type=color id="secondary_containter_palette" onchange="palette_color(this)"></td> <td><input autocomplete="off" type=color id="secondary_containter_palette" onchange="palette_color(this)"></td>
<td><input type=color id="on_secondary_containter_palette" onchange="palette_color(this)"></td> <td><input autocomplete="off" type=color id="on_secondary_containter_palette" onchange="palette_color(this)"></td>
</tr> </tr>
<tr> <tr>
<td>Tertiary</td> <td>Tertiary</td>
<td><input type=color id="tertiary_palette" onchange="palette_color(this)"></td> <td><input autocomplete="off" type=color id="tertiary_palette" onchange="palette_color(this)"></td>
<td><input type=color id="on_tertiary_palette" onchange="palette_color(this)"></td> <td><input autocomplete="off" type=color id="on_tertiary_palette" onchange="palette_color(this)"></td>
<td><input type=color id="tertiary_containter_palette" onchange="palette_color(this)"></td> <td><input autocomplete="off" type=color id="tertiary_containter_palette" onchange="palette_color(this)"></td>
<td><input type=color id="on_tertiary_containter_palette" onchange="palette_color(this)"></td> <td><input autocomplete="off" type=color id="on_tertiary_containter_palette" onchange="palette_color(this)"></td>
</tr> </tr>
<tr> <tr>
<td>Error</td> <td>Error</td>
<td><input type=color id="error_palette" onchange="palette_color(this)"></td> <td><input autocomplete="off" type=color id="error_palette" onchange="palette_color(this)"></td>
<td><input type=color id="on_error_palette" onchange="palette_color(this)"></td> <td><input autocomplete="off" type=color id="on_error_palette" onchange="palette_color(this)"></td>
<td><input type=color id="error_containter_palette" onchange="palette_color(this)"></td> <td><input autocomplete="off" type=color id="error_containter_palette" onchange="palette_color(this)"></td>
<td><input type=color id="on_error_containter_palette" onchange="palette_color(this)"></td> <td><input autocomplete="off" type=color id="on_error_containter_palette" onchange="palette_color(this)"></td>
</tr> </tr>
</table> </table>

3
themes/Monochrome.css
View File

@@ -1,5 +1,6 @@
:root { :root {
/*----------------Palette Theme--------------------*/--primary_palette: #afc6ff; /*----------------Palette Theme--------------------*/
--primary_palette: #afc6ff;
--on_primary_palette: #002d6c; --on_primary_palette: #002d6c;
--primary_containter_palette: #004397; --primary_containter_palette: #004397;
--on_primary_containter_palette: #d9e2ff; --on_primary_containter_palette: #d9e2ff;