rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-02-22 06:57:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3222 from SillyTavern/bg-fitting

Browse Source 
Add background image fitting options
This commit is contained in:
Cohee 2024-12-25 22:09:01 +02:00 committed by GitHub
commit 28c7dbbe1b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 65 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
public/index.html
View File

@ -4713,6 +4713,13 @@
Background Image
</h3>
<input id="bg-filter" data-i18n="[placeholder]Filter" placeholder="Filter" class="text_pole flex1" type="search" />
<select id="background_fitting" class="text_pole" data-i18n="[title]Background Fitting" title="Background Fitting">
<option value="classic" data-i18n="Classic">Classic</option>
<option value="cover" data-i18n="Cover">Cover</option>
<option value="contain" data-i18n="Contain">Contain</option>
<option value="stretch" data-i18n="Stretch">Stretch</option>
<option value="center" data-i18n="Center">Center</option>
</select>
<div id="auto_background" class="menu_button menu_button_icon" data-i18n="[title]Automatically select a background based on the chat context" title="Automatically select a background based on the chat context.">
<i class="fa-solid fa-wand-magic"></i>
<span data-i18n="Auto-select">Auto-select</span>

23
public/scripts/backgrounds.js
View File

@ -12,6 +12,7 @@ const LIST_METADATA_KEY = 'chat_backgrounds';
export let background_settings = {
name: '__transparent.png',
url: generateUrlParameter('__transparent.png', false),
fitting: 'classic',
};
export function loadBackgroundSettings(settings) {
@ -19,7 +20,12 @@ export function loadBackgroundSettings(settings) {
if (!backgroundSettings || !backgroundSettings.name || !backgroundSettings.url) {
backgroundSettings = background_settings;
}
if (!backgroundSettings.fitting) {
backgroundSettings.fitting = 'classic';
}
setBackground(backgroundSettings.name, backgroundSettings.url);
setFittingClass(backgroundSettings.fitting);
$('#background_fitting').val(backgroundSettings.fitting);
}
/**
@ -470,6 +476,18 @@ function highlightNewBackground(bg) {
flashHighlight(newBg);
}
/**
* Sets the fitting class for the background element
* @param {string} fitting Fitting type
*/
function setFittingClass(fitting) {
const backgrounds = $('#bg1, #bg_custom');
backgrounds.toggleClass('cover', fitting === 'cover');
backgrounds.toggleClass('contain', fitting === 'contain');
backgrounds.toggleClass('stretch', fitting === 'stretch');
backgrounds.toggleClass('center', fitting === 'center');
}
function onBackgroundFilterInput() {
const filterValue = String($(this).val()).toLowerCase();
$('#bg_menu_content > div').each(function () {
@ -510,4 +528,9 @@ export function initBackgrounds() {
helpString: 'Automatically changes the background based on the chat context using the AI request prompt',
}));
$('#background_fitting').on('input', function () {
background_settings.fitting = String($(this).val());
setFittingClass(background_settings.fitting);
saveSettingsDebounced();
});
}

36
public/style.css
View File

@ -141,7 +141,7 @@ body {
height: 100dvh;
/*defaults as 100%, then reassigned via JS as pixels, will work on PC and Android*/
/*height: calc(var(--doc-height) - 1px);*/
background-color: var(--greyCAIbg);
background-color: var(--SmartThemeBlurTintColor);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
@ -519,6 +519,40 @@ hr {
transition: background-image 0.5s ease-in-out;
}
/* Background fitting options */
#background_fitting {
max-width: 6em;
}
/* Fill/Cover - scales to fill width while maintaining aspect ratio */
#bg1.cover,
#bg_custom.cover {
background-size: cover;
background-position: center;
}
/* Fit/Contain - shows entire image maintaining aspect ratio */
#bg1.contain,
#bg_custom.contain {
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
/* Stretch - stretches to fill entire space */
#bg1.stretch,
#bg_custom.stretch {
background-size: 100% 100%;
}
/* Center - centers without scaling */
#bg1.center,
#bg_custom.center {
background-size: auto;
background-position: center;
background-repeat: no-repeat;
}
body.reduced-motion #bg1,
body.reduced-motion #bg_custom {
transition: none;