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

Textshadow color and width are now customizable.

Browse Source
This commit is contained in:
RossAscends
2023-04-27 02:02:25 +09:00
parent c354f8ee30
commit df7f6c0168
6 changed files with 83 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -72,12 +72,14 @@ let power_user = {
sort_rule: null,
font_scale: 1,
blur_strength: 10,
shadow_width: 2,
main_text_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeBodyColor').trim()}`,
italics_text_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeEmColor').trim()}`,
quote_text_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeQuoteColor').trim()}`,
fastui_bg_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeFastUIBGColor').trim()}`,
blur_tint_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeBlurTintColor').trim()}`,
shadow_color: `${getComputedStyle(document.documentElement).getPropertyValue('--SmartThemeShadowColor').trim()}`,
waifuMode: false,
movingUI: false,
@ -99,6 +101,9 @@ const storage_keys = {
fastui_bg_color: "TavernAI_fastui_bg_color",
blur_tint_color: "TavernAI_blur_tint_color",
blur_strength: "TavernAI_blur_strength",
shadow_color: "TavernAI_shadow_color",
shadow_width: "TavernAI_shadow_width",
waifuMode: "TavernAI_waifuMode",
movingUI: "TavernAI_movingUI",
@ -183,6 +188,9 @@ async function applyThemeColor(type) {
if (type === 'blurTint') {
document.documentElement.style.setProperty('--SmartThemeBlurTintColor', power_user.blur_tint_color);
}
if (type === 'shadow') {
document.documentElement.style.setProperty('--SmartThemeShadowColor', power_user.shadow_color);
}
}
async function applyBlurStrength() {
@ -192,6 +200,13 @@ async function applyBlurStrength() {
}
async function applyShadowWidth() {
power_user.shadow_width = Number(localStorage.getItem(storage_keys.shadow_width) ?? 2);
document.documentElement.style.setProperty('--shadowWidth', power_user.shadow_width);
$("#blur_strength_counter").text(power_user.shadow_width);
}
async function applyFontScale() {
power_user.font_scale = Number(localStorage.getItem(storage_keys.font_scale) ?? 1);
@ -212,12 +227,20 @@ async function applyTheme(name) {
{ key: 'quote_text_color', selector: '#quote-color-picker', type: 'quote' },
{ key: 'fastui_bg_color', selector: '#fastui-bg-color-picker', type: 'fastUIBG' },
{ key: 'blur_tint_color', selector: '#blur-tint-color-picker', type: 'blurTint' },
{ key: 'shadow_color', selector: '#shadow-color-picker', type: 'shadow' },
{
key: 'blur_strength',
action: async () => {
localStorage.setItem(storage_keys.blur_strength, power_user.blur_strength);
await applyBlurStrength();
}
},
{
key: 'shadow_width',
action: async () => {
localStorage.setItem(storage_keys.shadow_width, power_user.shadow_width);
await applyShadowWidth();
}
}
];
@ -289,17 +312,22 @@ function loadPowerUserSettings(settings, data) {
$(`input[name="avatar_style"][value="${power_user.avatar_style}"]`).prop("checked", true);
$(`input[name="chat_display"][value="${power_user.chat_display}"]`).prop("checked", true);
$(`input[name="sheld_width"][value="${power_user.sheld_width}"]`).prop("checked", true);
$("#font_scale").val(power_user.font_scale);
$("#font_scale_counter").text(power_user.font_scale);
$("#blur_strength").val(power_user.blur_strength);
$("#blur_strength_counter").text(power_user.blur_strength);
$("#shadow_width").val(power_user.shadow_width);
$("#shadow_width_counter").text(power_user.shadow_width);
$("#main-text-color-picker").attr('color', power_user.main_text_color);
$("#italics-color-picker").attr('color', power_user.italics_text_color);
$("#quote-color-picker").attr('color', power_user.quote_text_color);
$("#fastui-bg-color-picker").attr('color', power_user.fastui_bg_color);
$("#blur-tint-color-picker").attr('color', power_user.blur_tint_color);
$("#shadow-color-picker").attr('color', power_user.shadow_color);
for (const theme of themes) {
const option = document.createElement('option');
@ -318,7 +346,7 @@ function sortCharactersList(selector = '.character_select') {
const compareFunc = (first, second) => {
switch (power_user.sort_rule) {
case 'boolean':
return Number(first[power_user.sort_field] == "true") - Number(second[power_user.sort_field] == "true");
return Number(first[power_user.sort_field] == "true") - Number(second[power_user.sort_field] == "true");
default:
return typeof first[power_user.sort_field] == "string"
? first[power_user.sort_field].localeCompare(second[power_user.sort_field])
@ -474,6 +502,13 @@ $(document).ready(() => {
await applyBlurStrength();
});
$(`input[name="shadow_width"]`).on('input', async function (e) {
power_user.shadow_width = Number(e.target.value);
$("#shadow_width_counter").text(power_user.shadow_width);
localStorage.setItem(storage_keys.shadow_width, power_user.shadow_width);
await applyShadowWidth();
});
$("#main-text-color-picker").on('change', (evt) => {
power_user.main_text_color = evt.detail.rgba;
applyThemeColor('main');
@ -485,7 +520,7 @@ $(document).ready(() => {
applyThemeColor('italics');
saveSettingsDebounced();
});
$("#quote-color-picker").on('change', (evt) => {
power_user.quote_text_color = evt.detail.rgba;
applyThemeColor('quote');
@ -504,6 +539,12 @@ $(document).ready(() => {
saveSettingsDebounced();
});
$("#shadow-color-picker").on('change', (evt) => {
power_user.shadow_color = evt.detail.rgba;
applyThemeColor('shadow');
saveSettingsDebounced();
});
$("#themes").on('change', function () {
const themeSelected = $(this).find(':selected').val();
power_user.theme = themeSelected;
@ -526,6 +567,8 @@ $(document).ready(() => {
quote_text_color: power_user.quote_text_color,
fastui_bg_color: power_user.fastui_bg_color,
blur_tint_color: power_user.blur_tint_color,
shadow_color: power_user.shadow_color,
shadow_width: power_user.shadow_width,
};
const response = await fetch('/savetheme', {
@ -595,7 +638,7 @@ $(document).ready(() => {
const value = $(this).find(':selected').val();
power_user.tokenizer = Number(value);
saveSettingsDebounced();
// Trigger character editor re-tokenize
$("#rm_ch_create_block").trigger('input');
$("#character_popup").trigger('input');