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

Optimized color pickers

Browse Source
This commit is contained in:
SillyLossy
2023-04-11 23:59:39 +03:00
parent c32690579f
commit 2b9e04a325
1 changed files with 18 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
public/scripts/power-user.js
View File

@ -1,5 +1,5 @@
import { saveSettingsDebounced, characters } from "../script.js";
import { delay } from "./utils.js";
import { delay, debounce } from "./utils.js";
export {
@ -127,38 +127,44 @@ function applySheldWidth() {
}
}
function applyThemeColor(type) {
async function applyThemeColor(type) {
const $MainTextColorPicker = document.getElementById('main-text-color-picker');
const $ItalicsTextColorPicker = document.getElementById('italics-color-picker');
const $FastUIBGColorPicker = document.getElementById('fastui-bg-color-picker');
const $BlurTintColorPicker = document.getElementById('blur-tint-color-picker');
// temporarily unset transition from chat to not make the browser calculate the animation
chat.style.transition = 'unset';
if (type === 'main') {
$MainTextColorPicker.color = `${power_user.main_text_color}`;
document.documentElement.style.setProperty('--SmartThemeBodyColor', power_user.main_text_color);
console.log($MainTextColorPicker.color);
return
}
if (type === 'italics') {
$ItalicsTextColorPicker.color = `${power_user.italics_text_color}`;
document.documentElement.style.setProperty('--SmartThemeEmColor', power_user.italics_text_color);
console.log($ItalicsTextColorPicker.color);
return
}
if (type === 'fastUIBG') {
$FastUIBGColorPicker.color = `${power_user.fastui_bg_color}`;
document.documentElement.style.setProperty('--SmartThemeFastUIBGColor', power_user.fastui_bg_color);
console.log($FastUIBGColorPicker.color);
return
}
if (type === 'blurTint') {
$BlurTintColorPicker.color = `${power_user.blur_tint_color}`;
document.documentElement.style.setProperty('--SmartThemeBlurTintColor', power_user.blur_tint_color);
console.log($BlurTintColorPicker.color);
return
}
// a small delay to let the browser do the layout redraw
await delay(1);
// set transition back to chat
chat.style.transition = chatTransition;
}
async function applyFontScale() {
@ -184,6 +190,8 @@ applySheldWidth();
applyFontScale();
applyThemeColor();
const applyColorDebounced = debounce((type) => applyThemeColor(type), 100);
// TODO delete in next release
function loadFromLocalStorage() {
power_user.collapse_newlines = localStorage.getItem(storage_keys.collapse_newlines) == "true";
@ -340,25 +348,25 @@ $(document).ready(() => {
$("#main-text-color-picker").on('change', (evt) => {
power_user.main_text_color = evt.detail.rgba;
applyThemeColor('main');
applyColorDebounced('main');
saveSettingsDebounced();
});
$("#italics-color-picker").on('change', (evt) => {
power_user.italics_text_color = evt.detail.rgba;
applyThemeColor('italics');
applyColorDebounced('italics');
saveSettingsDebounced();
});
$("#fastui-bg-color-picker").on('change', (evt) => {
power_user.fastui_bg_color = evt.detail.rgba;
applyThemeColor('fastUIBG');
applyColorDebounced('fastUIBG');
saveSettingsDebounced();
});
$("#blur-tint-color-picker").on('change', (evt) => {
power_user.blur_tint_color = evt.detail.rgba;
applyThemeColor('blurTint');
applyColorDebounced('blurTint');
saveSettingsDebounced();
});