More modern backgrounds buttons and filename (#4484) * init * move background styles, enlarge and clip image to get rid of antialising bug * move styles from style.css to backgrounds.css * Reformat backgrounds.css * Improve selector specificity, fix type errors, increase font size on thumbnails, decrease mobile toggle size * Fix webp chat backgrounds thumbnails * Respect reduced motion preference * Remove transition delay --------- Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>

0ba317a31887ab5a1d97700596099124b3dd6ba5

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

Signed

Parents: 4d98b48956a74a0fd8cd82e05c5fb4d3b5891304

public/css/backgrounds.css+175 -0 Viewed

+/* Main Page Backgrounds */
+#bg1,
+#bg_custom {
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-size: cover;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    transition: background-image var(--animation-duration-3x) ease-in-out;
+}
+/* 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;
+}
+#bg1 {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');
+    z-index: -3;
+}
+#bg_custom {
+    background-image: none;
+    z-index: -2;
+}
+.bg_example.locked {
+    outline: 2px solid var(--golden);
+}
 /* This is the main flex container for the entire drawer */
 #Backgrounds.drawer-content.openDrawer.bg-drawer-layout {
     display: flex;

 #bg-filter {
     font-size: calc(var(--mainFontSize) * 0.95);
+}
+/* Thumbnail Menu & Buttons */
+.bg_example .mobile-only-menu-toggle {
+    display: none;
+}
+.bg_example.flex-container {
+    width: 30%;
+    max-width: 200px;
+    margin: 5px;
+    aspect-ratio: 16/9;
+    cursor: pointer;
+    box-shadow: 0 0 7px var(--black50a);
+    position: relative;
+    overflow: hidden;
+    border-radius: 10px;
+    border: 1px solid var(--SmartThemeBorderColor);
+}
+.bg_example_img {
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    right: -2px;
+    bottom: -2px;
+    background-image: inherit;
+    background-size: cover;
+    background-position: center;
+}
+.bg_example .jg-menu {
+    display: flex;
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 8px;
+    gap: 2px;
+    padding: 3px;
+    z-index: 3;
+    backdrop-filter: blur(4px);
+    border: 1px solid var(--SmartThemeBorderColor);
+    opacity: 0;
+    visibility: hidden;
+    transform: scale(0.9);
+    transform-origin: center;
+    transition: opacity var(--animation-duration) ease-out, visibility var(--animation-duration) ease-out, transform var(--animation-duration) ease-out;
+}
+.bg_example:hover .jg-menu {
+    opacity: 1;
+    visibility: visible;
+    transform: scale(1);
+}
+.bg_example .jg-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    padding: 5px;
+    font-size: 1.2em;
+    border-radius: 6px;
+    transition: background-color var(--animation-duration) ease;
+}
+.bg_example .jg-button:hover {
+    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 Title */
+.bg_example .BGSampleTitle {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
+    color: var(--SmartThemeBodyColor);
+    font-size: 0.9em;
+    font-weight: 600;
+    padding: 0px 6px 2px;
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    opacity: 0;
+    transition: opacity var(--animation-duration) ease-in-out;
+    pointer-events: none;
+    border-radius: 0 0 8px 8px;
+}
+.bg_example:hover .BGSampleTitle {
+    opacity: 1;
+}

public/css/mobile-styles.css+31 -4 Viewed

         font-size: 15px;
+    }
+    #Backgrounds .bg_example .BGSampleTitle {
+        opacity: 1;
+        bottom: 0px;
+    }
+    .bg_example:hover .jg-menu {
+        display: none;
+    }
+    .bg_example.mobile-menu-open .jg-menu {
+        display: flex;
+        z-index: 4;
+    }
+    .bg_example .mobile-only-menu-toggle {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        top: 5px;
+        right: 5px;
+        width: 28px;
+        height: 28px;
+        background-color: rgba(0, 0, 0, 0.4);
+        color: white;
+        border-radius: 6px;
+        z-index: 3;
+        cursor: pointer;
+        backdrop-filter: blur(2px);
+    }
     #bg-header-controls {
         flex-wrap: wrap;
         row-gap: 10px;

         flex-basis: max(calc(100% / 2 - 10px), 180px);
+    }
-    .BGSampleTitle {
-        display: none;
-    }
     .tag.excluded:after {
         top: unset;
         bottom: unset;

public/index.html+12 -6 Viewed

             </div>
         </div>
         <div id="background_template" class="template_element">
-            <div class="bg_example flex-container" bgfile="" class="bg_example_img" title="">
+            <div class="bg_example flex-container" bgfile="" title="">
+                <div class="bg_example_img"></div>
                 <div title="Copy to system backgrounds" data-i18n="[title]Copy to system backgrounds" class="bg_button bg_example_copy fa-solid fa-file-arrow-up"></div>
-                <div title="Rename background" data-i18n="[title]Rename background" class="bg_button bg_example_edit fa-solid fa-pencil"></div>
+                <div class="jg-menu">
-                <div title="Lock" data-i18n="[title]Lock" class="bg_button bg_example_lock fa-solid fa-lock"></div>
+                    <!-- temporarily moved lock icon here (will be moved to header) -->
-                <div title="Unlock" data-i18n="[title]Unlock" class="bg_button bg_example_unlock fa-solid fa-lock-open"></div>
+                    <div data-action="lock" class="jg-button jg-lock fa-solid fa-lock fa-fw pointer" data-i18n="[title]Lock" title="Lock"></div>
-                <div title="Delete background" data-i18n="[title]Delete background" class="bg_button bg_example_cross fa-solid fa-circle-xmark"></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 class="BGSampleTitle">
+                    <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>
+                <div class="mobile-only-menu-toggle">
+                    <i class="fa-solid fa-ellipsis-vertical"></i>
+                </div>
+                <div class="BGSampleTitle"></div>
             </div>
         </div>
         <!-- templates for JS to reuse when needed -->

public/scripts/backgrounds.js+41 -11 Viewed

  * It caches the thumbnail in local storage and returns a blob URL for the thumbnail.
  * If the thumbnail cannot be fetched, it returns a transparent PNG pixel as a fallback.
  * @param {string} bg Background URL
+ * @param {boolean} isCustom Is the background custom?
  * @returns {Promise<string>} Blob URL of the thumbnail
  */
-async function getThumbnailFromStorage(bg) {
+async function getThumbnailFromStorage(bg, isCustom) {
     const cachedBlobUrl = THUMBNAIL_BLOBS.get(bg);
     if (cachedBlobUrl) {
         return cachedBlobUrl;

@@ -281,7 +282,8 @@ async function getThumbnailFromStorage(bg) {
281	}	282	}
282		283
283	try {	284	try {
284	const response = await fetch(getBackgroundPath(bg), { cache: 'force-cache' });	285	const url = isCustom ? bg : getBackgroundPath(bg);
		286	const response = await fetch(url, { cache: 'force-cache' });
285	if (!response.ok) {	287	if (!response.ok) {
286	throw new Error('Fetch failed with status: ' + response.status);	288	throw new Error('Fetch failed with status: ' + response.status);
287	}	289	}

     const fileExtension = bg.split('.').pop().toLowerCase();
     const isAnimated = ['mp4', 'webp'].includes(fileExtension);
     const thumbnailUrl = isAnimated && !background_settings.animation
-        ? await getThumbnailFromStorage(bg)
+        ? await getThumbnailFromStorage(bg, isCustom)
         : isCustom
             ? bg
             : getThumbnailUrl('bg', bg);

     const formData = new FormData(form);
     const file = formData.get('avatar');
-    if (!file || file.size === 0) {
+    if (!(file instanceof File) || file.size === 0) {
         form.reset();
         return;
+    }

         const sourceBuffer = await file.arrayBuffer();
         const convertedBuffer = await globalThis.convertVideoToAnimatedWebp({ buffer: new Uint8Array(sourceBuffer), name: file.name });
         const convertedFileName = file.name.replace(/\.[^/.]+$/, '.webp');
-        const convertedFile = new File([convertedBuffer], convertedFileName, { type: 'image/webp' });
+        const convertedFile = new File([new Uint8Array(convertedBuffer)], convertedFileName, { type: 'image/webp' });
         formData.set('avatar', convertedFile);
         toastMessage.remove();
     } catch (error) {

 export function initBackgrounds() {
     eventSource.on(event_types.CHAT_CHANGED, onChatChanged);
     eventSource.on(event_types.FORCE_SET_BACKGROUND, forceSetBackground);
-    $(document).on('click', '.bg_example', onSelectBackgroundClick);
-    $(document).on('click', '.bg_example_lock', onLockBackgroundClick);
+    $(document)
-    $(document).on('click', '.bg_example_unlock', onUnlockBackgroundClick);
+        .off('click', '.bg_example').on('click', '.bg_example', onSelectBackgroundClick)
-    $(document).on('click', '.bg_example_edit', onRenameBackgroundClick);
+        .off('click', '.bg_example_copy').on('click', '.bg_example_copy', onCopyToSystemBackgroundClick)
-    $(document).on('click', '.bg_example_cross', onDeleteBackgroundClick);
+        .off('click', '.bg_example .mobile-only-menu-toggle').on('click', '.bg_example .mobile-only-menu-toggle', function (e) {
-    $(document).on('click', '.bg_example_copy', onCopyToSystemBackgroundClick);
+            e.stopPropagation();
+            const $context = $(this).closest('.bg_example');
+            const wasOpen = $context.hasClass('mobile-menu-open');
+            // Close all other open menus before opening a new one.
+            $('.bg_example.mobile-menu-open').removeClass('mobile-menu-open');
+            if (!wasOpen) {
+                $context.addClass('mobile-menu-open');
+            }
+        })
+        .off('click', '.jg-button').on('click', '.jg-button', function (e) {
+            e.stopPropagation();
+            const action = $(this).data('action');
+            switch (action) {
+                case 'lock':
+                    onLockBackgroundClick.call(this, e.originalEvent);
+                    break;
+                case 'unlock':
+                    onUnlockBackgroundClick.call(this, e.originalEvent);
+                    break;
+                case 'edit':
+                    onRenameBackgroundClick.call(this, e.originalEvent);
+                    break;
+                case 'delete':
+                    onDeleteBackgroundClick.call(this, e.originalEvent);
+                    break;
+            }
+        });
     $('#auto_background').on('click', autoBackgroundCommand);
     $('#add_bg_button').on('change', onBackgroundUploadSelected);
     $('#bg-filter').on('input', onBackgroundFilterInput);

public/style.css+0 -97 Viewed

     opacity: 0.2;
+}
-#bg1,
-#bg_custom {
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-    background-size: cover;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    transition: background-image var(--animation-duration-3x) 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;
-}
 #version_display {
     padding: 5px;
     opacity: 0.8;
+}
-#bg1 {
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');
-    z-index: -3;
-}
-#bg_custom {
-    background-image: none;
-    z-index: -2;
-}
 /*TOPPER margin*/
 #top-bar {

     justify-content: space-evenly;
+}
-.bg_example {
-    width: 30%;
-    max-width: 200px;
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center;
-    border-radius: 10px;
-    border: 1px solid var(--SmartThemeBorderColor);
-    box-shadow: 0 0 7px var(--black50a);
-    margin: 5px;
-    cursor: pointer;
-    aspect-ratio: 16/9;
-    justify-content: flex-end;
-    position: relative;
-}
 .bg_example.locked {
     outline: 2px solid var(--golden);
+}

     display: none;
+}
-.BGSampleTitle {
-    display: flex;
-    width: 100%;
-    height: min-content;
-    text-align: center;
-    justify-content: center;
-    align-self: flex-end;
-    bottom: 0;
-    position: relative;
-    word-break: break-word;
-    background-color: var(--SmartThemeBlurTintColor);
-    font-size: calc(var(--fontScale) * 0.9em);
-    max-height: 50%;
-    overflow-y: clip;
-    border-radius: 0 0 7px 7px;
-}
-.bg_example[custom="true"] .BGSampleTitle {
-    display: none;
-}
 .bg_button {
     padding: 4px;
     position: absolute;