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

added font scale slider to UI

Browse Source
This commit is contained in:
RossAscends
2023-04-12 00:58:14 +09:00
parent 4f4559cb4a
commit 0ef0e9fc57
3 changed files with 72 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
public/index.html
View File

@ -1046,19 +1046,20 @@
<input id="your_name" name="your_name" class="text_pole" maxlength="35" value="" autocomplete="off"><br>
<input id="your_name_button" class="menu_button" type="submit" title="Click to set a new User Name (reloads page)" value="Change Name">
</form>
<hr>
<div class="ui-settings">
<div id="avatars-style" class="range-block">
<div class="range-block-title">
<h4>Avatars Style</h4>
<h4>Avatar Style</h4>
</div>
<div class="range-block-range">
<label>
<input name="avatar_style" type="radio" value="0" />
Round
Circle
</label>
<label>
<input name="avatar_style" type="radio" value="1" />
Rectangular
Rectangle
</label>
</div>
</div>
@ -1092,7 +1093,20 @@
</label>
</div>
</div>
</div>
<div id="font-scale-block" class="range-block wide50p">
<div class="range-block-title">
<h4>Font Scale</h4>
</div>
<div class="range-block-counter">
<span id="font_scale_counter">select</span>
</div>
<div class="range-block-range">
<input type="range" id="font_scale" name="font_scale" min="0.8" max="1.2" step="0.1">
</div>
</div>
<hr>
<div id="power-user-options-block">
<h3>Power User Options</h3>
<div id="power-user-option-checkboxes">

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

@ -23,6 +23,8 @@ const sheld_width = {
w1000px: 1,
}
var font_scale = 1;
let power_user = {
collapse_newlines: false,
force_pygmalion_formatting: false,
@ -41,6 +43,7 @@ let power_user = {
play_sound_unfocused: true,
sort_field: 'name',
sort_order: 'asc',
font_scale: '1'
};
const storage_keys = {
@ -56,7 +59,8 @@ const storage_keys = {
multigen: "TavernAI_multigen",
avatar_style: "TavernAI_avatar_style",
chat_display: "TavernAI_chat_display",
sheld_width: "TavernAI_sheld_width"
sheld_width: "TavernAI_sheld_width",
font_scale: "TavernAI_font_scale"
};
//Updated at the bottom of this script document based on 'focus' and 'blur' events
@ -109,11 +113,39 @@ function applySheldWidth() {
r.style.setProperty('--sheldWidth', '800px');
}
}
function applyFontScale() {
const sliders = [
{
sliderId: "#font_scale",
counterId: "#font_scale_counter",
format: (val) => `${val}`,
setValue: (val) => { font_scale = Number(val); },
}
];
sliders.forEach(slider => {
$(document).on("input", slider.sliderId, function () {
const value = $(this).val();
const formattedValue = slider.format(value);
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);
let r = document.documentElement;
r.style.setProperty('--fontScale', power_user.font_scale);
$("#font_scale_counter").html(power_user.font_scale);
}
applyAvatarStyle();
switchUiMode();
applyChatDisplay();
applySheldWidth();
applyFontScale();
// TODO delete in next release
function loadFromLocalStorage() {
@ -143,6 +175,7 @@ function loadPowerUserSettings(settings) {
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.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);
$("#force-pygmalion-formatting-checkbox").prop("checked", power_user.force_pygmalion_formatting);
$("#collapse-newlines-checkbox").prop("checked", power_user.collapse_newlines);
@ -159,6 +192,8 @@ function loadPowerUserSettings(settings) {
$(`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").html(power_user.font_scale);
$(`#character_sort_order option[data-order="${power_user.sort_order}"][data-field="${power_user.sort_field}"]`).prop("selected", true);
sortCharactersList();
}
@ -253,6 +288,13 @@ $(document).ready(() => {
applySheldWidth();
});
$(`input[name="font_scale"]`).on('input', function (e) {
power_user.font_scale = Number(e.target.value);
localStorage.setItem(storage_keys.font_scale, power_user.font_scale);
/* console.log("font scale: " + power_user.font_scale); */
applyFontScale();
});
$("#play_message_sound").on('input', function () {
power_user.play_message_sound = !!$(this).prop('checked');
saveSettingsDebounced();
@ -270,11 +312,11 @@ $(document).ready(() => {
saveSettingsDebounced();
});
$(window).on('focus', function() {
$(window).on('focus', function () {
browser_has_focus = true;
});
$(window).on('blur', function() {
$(window).on('blur', function () {
browser_has_focus = false;
});
});

13
public/style.css
View File

@ -37,7 +37,8 @@
--sheldWidth: 800px;
/*base variable calculated in rems*/
--mainFontSize: calc(1 * 1rem);
--fontScale: 1;
--mainFontSize: calc(var(--fontScale) * 1rem);
}
@ -427,7 +428,7 @@ code {
.ui-settings {
display: flex;
flex-direction: row;
align-items: flex-end;
/* align-items: flex-end; */
column-gap: 10px;
}
@ -470,7 +471,8 @@ body.big-avatars .avatar {
box-shadow: 0 0 5px var(--black50a);
}
body.big-avatars #user_avatar_block .avatar, body.big-avatars #user_avatar_block .avatar_upload {
body.big-avatars #user_avatar_block .avatar,
body.big-avatars #user_avatar_block .avatar_upload {
height: 90px;
width: 60px;
border-radius: 10px;
@ -3003,6 +3005,11 @@ label[for="extensions_autoconnect"] {
flex: 50%;
}
.wide50p {
width: 50%;
}
.justifyLeft {
text-align: start;
justify-content: left;