Update BG header layout (#4519) * init * cleanup * logic changes and some styling * set z index to a reasonable value * remove pointless animation * cleanup * restore animation * checkmark icon on selected background * drop shadow * tweak size slightly * Apply suggestion from @Cohee1207 condense Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com> * more of the above * make lock indicator use a class like the selection indicator * make backgroundHighlight run on page load * cleanup * html restructure and display: contents. only issue left is slightly wonky desktop buttons order * yellow lock icon for consistancy * Update layout * Restore fitting logic * Styles clean-up * Remove duplicate class * Restore button titles * Fix return types of slash commands * Update locked background on select if lock status is on * Force header to 100% width * Clean-up styles * Fix locked highlight on custom backgrounds * Revert global lock button --------- Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>

4127b688c9e54efb41eee87fe3bd108d2a8b4936

L <123923688+Vibecoder9000@users.noreply.github.com>

Signed

Parents: c9419a383e19d9fc70afad4d040374a4d537d00b

public/css/backgrounds.css+60 -50 Viewed

 /* Main Page Backgrounds */
-#bg1,
+#bg1 {
-#bg_custom {
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-size: cover;

     width: 100%;
     height: 100%;
     transition: background-image var(--animation-duration-3x) ease-in-out;
+    z-index: -1;
+}
 /* Fitting options */
 #background_fitting {
-    max-width: 6em;
+    max-width: 8em;
+}
 /* Fill/Cover - scales to fill width while maintaining aspect ratio */
-#bg1.cover,
+#bg1.cover {
-#bg_custom.cover {
     background-size: cover;
     background-position: center;
+}
 /* Fit/Contain - shows entire image maintaining aspect ratio */
-#bg1.contain,
+#bg1.contain {
-#bg_custom.contain {
     background-size: contain;
     background-position: center;
     background-repeat: no-repeat;
+}
 /* Stretch - stretches to fill entire space */
-#bg1.stretch,
+#bg1.stretch {
-#bg_custom.stretch {
     background-size: 100% 100%;
+}
 /* Center - centers without scaling */
-#bg1.center,
+#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;
-}
-#bg1 {
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');
-    z-index: -3;
-}
-#bg_custom {
-    background-image: none;
-    z-index: -2;
-}
-.bg_example.flex-container.locked:not(:focus-visible) {
-    outline-color: var(--golden);
-}
 /* This is the main flex container for the entire drawer */
-#Backgrounds.drawer-content.openDrawer.bg-drawer-layout {
+.drawer-content.openDrawer.bg-drawer-layout {
     display: flex;
+}
+.bg-drawer-layout {
     flex-direction: column;
-    height: auto;
-    height: calc-size(auto, size);
-    overflow: hidden;
-    width: var(--sheldWidth);
-    max-width: var(--sheldWidth);
     padding: 0;
+}

     padding: 5px;
     background-color: var(--SmartThemeBlurTintColor);
     border-bottom: 1px solid var(--SmartThemeBorderColor);
+    width: 100%;
+}
-#bg-header-fixed>.flex-container {
+.bg-header-row-1,
+.bg-header-row-2 {
     display: flex;
-    align-items: center;
     gap: 5px;
+    width: 100%;
+}
 /* Control buttons in header */

 .bg_example:focus-visible {
     outline-offset: inherit;
+    outline-color: var(--interactable-outline-color);
+}
+.bg_example.locked-background {
+    outline: 2px solid var(--golden);
+    outline-offset: 0;
+}
+.bg_example.locked-background::after {
+    content: '\f023';
+    font-family: 'Font Awesome 6 Free';
+    font-weight: 900;
+    position: absolute;
+    bottom: 5px;
+    right: 5px;
+    z-index: 4;
+    color: var(--golden);
+    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
+    font-size: calc(var(--mainFontSize) * 0.8);
+    pointer-events: none;
+}
+.bg_example:not(.locked-background) .jg-unlock,
+.bg_example.locked-background .jg-lock {
+    display: none;
+}
+.bg_example.selected-background {
+    outline: 2px solid white;
+    outline-offset: 0;
+}
+.bg_example.selected-background::before {
+    content: '\f00c';
+    font-family: 'Font Awesome 6 Free';
+    font-weight: 900;
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    z-index: 4;
+    color: var(--white100);
+    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
+    font-size: calc(var(--mainFontSize) * 0.9);
+    pointer-events: none;
+}
 .bg_example .jg-menu {

     background-color: rgba(255, 255, 255, 0.2);
+}
-.bg_example .jg-unlock {
-    display: none;
-}
-.bg_example.locked .jg-lock {
-    display: none;
-}
-.bg_example.locked .jg-unlock {
-    display: flex;
-}
 .thumbnail-clipper {
     position: absolute;
     top: -2px;

public/css/mobile-styles.css+2 -42 Viewed

         height: 30px;
+    }
-    #bg-header-controls {
+    #background_fitting {
-        flex-wrap: wrap;
+        max-width: 6em;
-        row-gap: 10px;
-    }
-    #bg-header-fixed>.flex-container {
-        flex-wrap: wrap;
-        row-gap: 0px;
-    }
-    #Backgrounds:not(.selection-mode-active) #bg-header-fixed>.flex-container::after {
-        content: '';
-        order: 1;
-        flex-basis: 100%;
-        height: 0;
-    }
-    /* --- Row 1 Item --- */
-    #bg-header-fixed #bg-header-title {
-        order: 1;
-        flex-grow: 1;
-    }
-    #bg-header-fixed #background_fitting,
-    #bg-header-fixed #auto_background {
-        order: 1;
-    }
-    /* --- Row 2 Item --- */
-    #bg-header-fixed #bg-filter {
-        order: 2;
-        flex-grow: 1;
-        min-width: 0;
-    }
-    /* --- Row 3 Item --- */
-    #bg-header-fixed #add_background_button_top {
-        order: 3;
-        width: 100%;
-        text-align: center;
-        padding-top: 0.5em;
-        padding-bottom: 0.5em;
+    }
     #Backgrounds.drawer-content.openDrawer.bg-drawer-layout {

public/index.html+10 -10 Viewed

 <body class="no-blur">
     <div id="preloader"></div>
-    <div id="bg_custom"></div>
     <div id="bg1"></div>
     <div id="character_context_menu" class="hidden">
         <ul>

             </div>
             <div id="Backgrounds" class="drawer-content closedDrawer bg-drawer-layout">
                 <div id="bg-header-fixed">
-                    <div class="flex-container alignItemsBaseline wide100p">
+                    <div class="bg-header-row-1">
-                        <h3 id="bg-header-title" class="margin0" data-i18n="Backgrounds">Backgrounds</h3>
+                        <label for="add_bg_button" id="add_background_button_top" class="menu_button menu_button_icon" data-i18n="[title]Add a new background" title="Add a new background">
-                        <input id="bg-filter" class="text_pole flex1" type="search" data-i18n="[placeholder]Search" placeholder="Search" />
+                            <i class="fa-solid fa-plus"></i>
+                            <span data-i18n="Add Background">Add Background</span>
+                        </label>
+                        <span class="expander"></span>
                         <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>

                             <i class="fa-solid fa-wand-magic"></i>
                             <span data-i18n="Auto-select">Auto-select</span>
                         </div>
-                        <label for="add_bg_button" id="add_background_button_top" class="menu_button menu_button_icon interactable" data-i18n="[title]Add a new background" title="Add a new background">
+                    </div>
-                            <i class="fa-solid fa-plus"></i>
+                    <div class="bg-header-row-2">
-                            <span data-i18n="Add Background">Add Background</span>
+                        <input id="bg-filter" class="text_pole" type="search" data-i18n="[placeholder]Search..." placeholder="Search..." />
-                        </label>
                     </div>
                 </div>
                 <div id="bg-scrollable-content">

                     <i class="fa-solid fa-ellipsis-vertical"></i>
                 </div>
                 <div class="jg-menu">
-                    <div data-action="copy" class="jg-button jg-copy fa-solid fa-file-arrow-up" data-i18n="[title]Copy to system backgrounds" title="Copy to system backgrounds"></div>
-                    <!-- temporarily moved lock icon here (will be moved to header) -->
                     <div data-action="lock" class="jg-button jg-lock fa-solid fa-lock fa-fw pointer" data-i18n="[title]Lock" title="Lock"></div>
                     <div data-action="unlock" class="jg-button jg-unlock fa-solid fa-lock-open fa-fw pointer" data-i18n="[title]Unlock" title="Unlock"></div>
+                    <div data-action="copy" class="jg-button jg-copy fa-solid fa-file-arrow-up" data-i18n="[title]Copy to system backgrounds" title="Copy to system backgrounds"></div>
                     <div data-action="edit" class="jg-button jg-edit fa-solid fa-pen-to-square fa-fw pointer" data-i18n="[title]Rename Background" title="Rename Background"></div>
                     <div data-action="delete" class="jg-button jg-delete fa-solid fa-trash-can fa-fw pointer" data-i18n="[title]Delete Background" title="Delete Background"></div>
                 </div>

public/scripts/backgrounds.js+74 -87 Viewed

     setFittingClass(backgroundSettings.fitting);
     $('#background_fitting').val(backgroundSettings.fitting);
     $('#background_thumbnails_animation').prop('checked', background_settings.animation);
+    highlightSelectedBackground();
+}
 /**

  */
 async function forceSetBackground(backgroundInfo) {
     saveBackgroundMetadata(backgroundInfo.url);
-    setCustomBackground();
+    $('#bg1').css('background-image', backgroundInfo.url);
     const list = chat_metadata[LIST_METADATA_KEY] || [];
     const bg = backgroundInfo.path;

+}
 async function onChatChanged() {
-    if (hasCustomBackground()) {
+    const lockedUrl = chat_metadata[BG_METADATA_KEY];
-        setCustomBackground();
-    }
+    $('#bg1').css('background-image', lockedUrl || background_settings.url);
-    else {
-        unsetCustomBackground();
-    }
     renderChatBackgrounds();
     highlightLockedBackground();
+    highlightSelectedBackground();
+}
 function getBackgroundPath(fileUrl) {

+}
 function highlightLockedBackground() {
-    $('.bg_example').removeClass('locked');
+    $('.bg_example.locked-background').removeClass('locked-background');
-    const lockedBackground = chat_metadata[BG_METADATA_KEY];
+    const lockedBackgroundUrl = chat_metadata[BG_METADATA_KEY];
-    if (!lockedBackground) {
-        return;
-    }
-    $('.bg_example').each(function () {
+    if (lockedBackgroundUrl) {
-        const url = $(this).data('url');
+        $('.bg_example').filter(function () {
-        if (url === lockedBackground) {
+            return $(this).data('url') === lockedBackgroundUrl;
-            $(this).addClass('locked');
+        }).addClass('locked-background');
+    }
-    });
+}
 /**
  * Locks the background for the current chat
- * @param {Event} e Click event
+ * @param {Event|null} event
- * @returns {string} Empty string
  */
-function onLockBackgroundClick(e) {
+function onLockBackgroundClick(event = null) {
-    e?.stopPropagation();
+    if (!getCurrentChatId()) {
+        toastr.warning(t`Select a chat to lock the background for it`);
-    const chatName = getCurrentChatId();
+        return;
-    if (!chatName) {
-        toastr.warning('Select a chat to lock the background for it');
-        return '';
+    }
-    const relativeBgImage = getUrlParameter(this) ?? background_settings.url;
+    // Take the global background's URL and save it to the chat's metadata.
+    const urlToLock = event ? $(event.target).closest('.bg_example').data('url') : background_settings.url;
+    saveBackgroundMetadata(urlToLock);
+    $('#bg1').css('background-image', urlToLock);
-    saveBackgroundMetadata(relativeBgImage);
+    // Update UI states to reflect the new lock.
-    setCustomBackground();
     highlightLockedBackground();
-    return '';
+    toastr.success(t`Background locked for this chat.`);
+}
 /**
- * Locks the background for the current chat
+ * Unlocks the background for the current chat
- * @param {Event} e Click event
+ * @param {Event|null} _event
- * @returns {string} Empty string
  */
-function onUnlockBackgroundClick(e) {
+function onUnlockBackgroundClick(_event = null) {
-    e?.stopPropagation();
+    // Delete the lock from the chat's metadata.
     removeBackgroundMetadata();
-    unsetCustomBackground();
+    // Revert the view to the current global background.
+    $('#bg1').css('background-image', background_settings.url);
+    // Update UI states to reflect the removal of the lock.
     highlightLockedBackground();
-    return '';
+    highlightSelectedBackground();
+    toastr.success(t`Background unlocked for this chat.`);
+}
-function hasCustomBackground() {
+function isChatBackgroundLocked() {
     return chat_metadata[BG_METADATA_KEY];
+}

     saveMetadataDebounced();
+}
-function setCustomBackground() {
-    const file = chat_metadata[BG_METADATA_KEY];
-    // bg already set
-    if (document.getElementById('bg_custom').style.backgroundImage == file) {
-        return;
-    }
-    $('#bg_custom').css('background-image', file);
-}
-function unsetCustomBackground() {
-    $('#bg_custom').css('background-image', 'none');
-}
 function onSelectBackgroundClick() {
-    const isCustom = $(this).attr('custom') === 'true';
+    const bgFile = $(this).attr('bgfile');
-    const relativeBgImage = getUrlParameter(this);
+    const backgroundCssUrl = getUrlParameter(this);
-    // if clicked on upload button
-    if (!relativeBgImage) {
-        return;
-    }
-    // Automatically lock the background if it's custom or other background is locked
+    if (isChatBackgroundLocked()) {
-    if (hasCustomBackground() || isCustom) {
+        // If a background is locked, update the locked background directly
-        saveBackgroundMetadata(relativeBgImage);
+        saveBackgroundMetadata(backgroundCssUrl);
-        setCustomBackground();
+        $('#bg1').css('background-image', backgroundCssUrl);
         highlightLockedBackground();
+    } else {
+        // Otherwise, update the global background setting
+        setBackground(bgFile, backgroundCssUrl);
+    }
-    highlightLockedBackground();
-    const customBg = window.getComputedStyle(document.getElementById('bg_custom')).backgroundImage;
-    // Custom background is set. Do not override the layer below
+    // Update UI highlights to reflect the changes.
-    if (customBg !== 'none') {
+    highlightSelectedBackground();
-        return;
-    }
-    const bgFile = $(this).attr('bgfile');
-    const backgroundUrl = getBackgroundPath(bgFile);
-    // Fetching to browser memory to reduce flicker
-    fetch(backgroundUrl).then(() => {
-        setBackground(bgFile, relativeBgImage);
-    }).catch(() => {
-        console.log('Background could not be set: ' + backgroundUrl);
-    });
+}
 async function onCopyToSystemBackgroundClick(e) {

         if (url === chat_metadata[BG_METADATA_KEY]) {
             removeBackgroundMetadata();
-            unsetCustomBackground();
             highlightLockedBackground();
+        }

@@ -544,7 +506,9 @@ export async function getBackgrounds() {
544	if (response.ok) {	506	if (response.ok) {
545	const { images, config } = await response.json();	507	const { images, config } = await response.json();
546	Object.assign(THUMBNAIL_CONFIG, config);	508	Object.assign(THUMBNAIL_CONFIG, config);
		509
547	renderSystemBackgrounds(images);	510	renderSystemBackgrounds(images);
		511	highlightSelectedBackground();
548	}	512	}
549	}	513	}
550		514

+}
 async function setBackground(bg, url) {
+    // Only change the visual background if one is not locked for the current chat.
+    if (!isChatBackgroundLocked()) {
         $('#bg1').css('background-image', url);
+    }
     background_settings.name = bg;
     background_settings.url = url;
     saveSettingsDebounced();

  * @param {string} fitting Fitting type
  */
 function setFittingClass(fitting) {
-    const backgrounds = $('#bg1, #bg_custom');
+    const backgrounds = $('#bg1');
     for (const option of ['cover', 'contain', 'stretch', 'center']) {
         backgrounds.toggleClass(option, option === fitting);
+    }
     background_settings.fitting = fitting;
+}
+function highlightSelectedBackground() {
+    $('.bg_example.selected-background').removeClass('selected-background');
+    // The "selected" highlight should always reflect the global background setting.
+    const activeUrl = background_settings.url;
+    if (activeUrl) {
+        // Find the thumbnail whose data-url attribute matches the active URL
+        $('.bg_example').filter(function () {
+            return $(this).data('url') === activeUrl;
+        }).addClass('selected-background');
+    }
+}
 function onBackgroundFilterInput() {
     const filterValue = String($('#bg-filter').val()).toLowerCase();
     $('#bg_menu_content > .bg_example, #bg_custom_content > .bg_example').each(function () {

     $('#bg-filter').on('input', () => debouncedOnBackgroundFilterInput());
     SlashCommandParser.addCommandObject(SlashCommand.fromProps({
         name: 'lockbg',
-        callback: () => onLockBackgroundClick(new CustomEvent('click')),
+        callback: () => {
+            onLockBackgroundClick();
+            return '';
+        },
         aliases: ['bglock'],
         helpString: 'Locks a background for the currently selected chat',
     }));
     SlashCommandParser.addCommandObject(SlashCommand.fromProps({
         name: 'unlockbg',
-        callback: () => onUnlockBackgroundClick(new CustomEvent('click')),
+        callback: () => {
+            onUnlockBackgroundClick();
+            return '';
+        },
         aliases: ['bgunlock'],
         helpString: 'Unlocks a background for the currently selected chat',
     }));