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

Fix font scaling

Browse Source
This commit is contained in:
SillyLossy
2023-04-11 19:18:57 +03:00
parent a789dcecad
commit 40829dfada
2 changed files with 19 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -1103,7 +1103,7 @@
<span id="font_scale_counter">select</span> <span id="font_scale_counter">select</span>
</div> </div>
<div class="range-block-range"> <div class="range-block-range">
<input type="range" id="font_scale" name="font_scale" min="0.8" max="1.2" step="0.1"> <input type="range" id="font_scale" name="font_scale" min="0.8" max="1.2" step="0.05">
</div> </div>
</div> </div>
<hr> <hr>

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

@ -23,8 +23,6 @@ const sheld_width = {
w1000px: 1, w1000px: 1,
} }
var font_scale = 1;
let power_user = { let power_user = {
collapse_newlines: false, collapse_newlines: false,
force_pygmalion_formatting: false, force_pygmalion_formatting: false,
@ -43,7 +41,7 @@ let power_user = {
play_sound_unfocused: true, play_sound_unfocused: true,
sort_field: 'name', sort_field: 'name',
sort_order: 'asc', sort_order: 'asc',
font_scale: '1' font_scale: 1,
}; };
const storage_keys = { const storage_keys = {
@ -60,7 +58,7 @@ const storage_keys = {
avatar_style: "TavernAI_avatar_style", avatar_style: "TavernAI_avatar_style",
chat_display: "TavernAI_chat_display", chat_display: "TavernAI_chat_display",
sheld_width: "TavernAI_sheld_width", sheld_width: "TavernAI_sheld_width",
font_scale: "TavernAI_font_scale" font_scale: "TavernAI_font_scale",
}; };
//Updated at the bottom of this script document based on 'focus' and 'blur' events //Updated at the bottom of this script document based on 'focus' and 'blur' events
@ -113,32 +111,23 @@ function applySheldWidth() {
r.style.setProperty('--sheldWidth', '800px'); r.style.setProperty('--sheldWidth', '800px');
} }
} }
function applyFontScale() {
const sliders = [ async function applyFontScale() {
{ power_user.font_scale = Number(localStorage.getItem(storage_keys.font_scale) ?? 1);
sliderId: "#font_scale",
counterId: "#font_scale_counter",
format: (val) => `${val}`,
setValue: (val) => { font_scale = Number(val); },
}
];
sliders.forEach(slider => { // temporarily unset transition from chat to not make the browser calculate the animation
$(document).on("input", slider.sliderId, function () { const chat = document.getElementById('chat');
const value = $(this).val(); const chatTransition = window.getComputedStyle(chat).transition;
const formattedValue = slider.format(value); chat.style.transition = 'unset';
slider.setValue(value);
$(slider.counterId).text(formattedValue);
console.log('saving');
saveSettingsDebounced();
});
});
power_user.font_scale = Number(localStorage.getItem(storage_keys.font_scale) ?? chat_styles.DEFAULT); // now apply the font scale to the document
let r = document.documentElement; document.documentElement.style.setProperty('--fontScale', power_user.font_scale);
r.style.setProperty('--fontScale', power_user.font_scale); $("#font_scale_counter").text(power_user.font_scale);
$("#font_scale_counter").html(power_user.font_scale);
// a small delay to let the browser do the layout redraw
await delay(1);
// set transition back to chat
chat.style.transition = chatTransition;
} }
applyAvatarStyle(); applyAvatarStyle();
@ -175,7 +164,7 @@ function loadPowerUserSettings(settings) {
power_user.avatar_style = Number(localStorage.getItem(storage_keys.avatar_style) ?? avatar_styles.ROUND); power_user.avatar_style = Number(localStorage.getItem(storage_keys.avatar_style) ?? avatar_styles.ROUND);
power_user.chat_display = Number(localStorage.getItem(storage_keys.chat_display) ?? chat_styles.DEFAULT); power_user.chat_display = Number(localStorage.getItem(storage_keys.chat_display) ?? chat_styles.DEFAULT);
power_user.sheld_width = Number(localStorage.getItem(storage_keys.sheld_width) ?? sheld_width.DEFAULT); power_user.sheld_width = Number(localStorage.getItem(storage_keys.sheld_width) ?? sheld_width.DEFAULT);
power_user.font_scale = Number(localStorage.getItem(storage_keys.font_scale) ?? font_scale); power_user.font_scale = Number(localStorage.getItem(storage_keys.font_scale) ?? 1);
$("#force-pygmalion-formatting-checkbox").prop("checked", power_user.force_pygmalion_formatting); $("#force-pygmalion-formatting-checkbox").prop("checked", power_user.force_pygmalion_formatting);
$("#collapse-newlines-checkbox").prop("checked", power_user.collapse_newlines); $("#collapse-newlines-checkbox").prop("checked", power_user.collapse_newlines);
@ -290,8 +279,8 @@ $(document).ready(() => {
$(`input[name="font_scale"]`).on('input', function (e) { $(`input[name="font_scale"]`).on('input', function (e) {
power_user.font_scale = Number(e.target.value); power_user.font_scale = Number(e.target.value);
$("#font_scale_counter").text(power_user.font_scale);
localStorage.setItem(storage_keys.font_scale, power_user.font_scale); localStorage.setItem(storage_keys.font_scale, power_user.font_scale);
/* console.log("font scale: " + power_user.font_scale); */
applyFontScale(); applyFontScale();
}); });