Header change (#4465)

* header changes

* new line, comments

* Simplify styling targets

---------

Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>

public/css/backgrounds.css

@@ -0,0 +1,37 @@
+/* This is the main flex container for the entire drawer */
+#Backgrounds.drawer-content.openDrawer.bg-drawer-layout {
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - var(--topBarBlockSize));
+    max-height: calc(100vh - var(--topBarBlockSize));
+    height: calc(100dvh - var(--topBarBlockSize));
+    max-height: calc(100dvh - var(--topBarBlockSize));
+    overflow: hidden;
+    width: var(--sheldWidth);
+    max-width: var(--sheldWidth);
+    padding: 0;
+}
+
+#bg-header-fixed {
+    flex-shrink: 0;
+    padding: 5px;
+    background-color: var(--SmartThemeBlurTintColor);
+    border-bottom: 1px solid var(--SmartThemeBorderColor);
+}
+
+#bg-header-fixed>.flex-container {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+#bg-scrollable-content {
+    flex-grow: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 0 5px 5px;
+}
+
+#bg-filter {
+    font-size: calc(var(--mainFontSize) * 0.95);
+}

public/css/mobile-styles.css

@@ -25,6 +25,55 @@
         font-size: 15px;
     }
 
+    #bg-header-controls {
+        flex-wrap: wrap;
+        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 {
+        width: 100dvw;
+        max-width: 100dvw;
+    }
+
     #extensions_settings,
     #extensions_settings2 {
         width: 100% !important;

public/index.html

@@ -5284,13 +5284,11 @@
             <div id="site_logo" class="drawer-toggle drawer-header" title="Change Background Image" data-i18n="[title]Change Background Image">
                 <div class="drawer-icon fa-solid fa-panorama fa-fw closedIcon"></div>
             </div>
-            <div id="Backgrounds" class="drawer-content closedDrawer">
-                <div class="flex-container">
+            <div id="Backgrounds" class="drawer-content closedDrawer bg-drawer-layout">
+                <div id="bg-header-fixed">
                     <div class="flex-container alignItemsBaseline wide100p">
-                        <h3 class="margin0 flex2" data-i18n="Background Image">
-                            Background Image
-                        </h3>
-                        <input id="bg-filter" data-i18n="[placeholder]Filter" placeholder="Filter" class="text_pole flex1" type="search" />
+                        <h3 id="bg-header-title" class="margin0" data-i18n="Backgrounds">Backgrounds</h3>
+                        <input id="bg-filter" class="text_pole flex1" type="search" data-i18n="[placeholder]Search" placeholder="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>
@@ -5302,17 +5300,17 @@
                             <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" title="Add a new background">
+                            <i class="fa-solid fa-plus"></i>
+                            <span data-i18n="Add Background">Add Background</span>
+                        </label>
                     </div>
+                </div>
+                <div id="bg-scrollable-content">
                     <h3 data-i18n="System Backgrounds" class="wide100p textAlignCenter">
                         System Backgrounds
                     </h3>
                     <div id="bg_menu_content" class="bg_list">
-                        <form id="form_bg_download" class="bg_example no-border no-shadow" action="javascript:void(null);" method="post" enctype="multipart/form-data">
-                            <label class="input-file">
-                                <input type="file" id="add_bg_button" name="avatar" accept="image/*, video/*">
-                                <div class="bg_example no-border no-shadow add_bg_but" style="background-image: url('/img/addbg3.png');"></div>
-                            </label>
-                        </form>
                     </div>
                     <h3 data-i18n="Chat Backgrounds" class="wide100p textAlignCenter">
                         Chat Backgrounds
@@ -5323,6 +5321,9 @@
                     <div id="bg_custom_content" class="bg_list">
                     </div>
                 </div>
+                <form id="form_bg_upload" style="display: none;">
+                   <input type="file" id="add_bg_button" name="avatar" accept="image/jpeg,image/png,image/gif,image/bmp,image/svg+xml,video/*">
+                </form>
             </div>
         </div>
         <div id="extensions-settings-button" class="drawer">

public/scripts/backgrounds.js

@@ -573,14 +573,21 @@ async function delBackground(bg) {
 }
 
 async function onBackgroundUploadSelected() {
-    const form = $('#form_bg_download').get(0);
+    const form = $('#form_bg_upload').get(0);
 
     if (!(form instanceof HTMLFormElement)) {
-        console.error('form_bg_download is not a form');
+        console.error('form_bg_upload is not a form');
         return;
     }
 
     const formData = new FormData(form);
+
+    const file = formData.get('avatar');
+    if (!file || file.size === 0) {
+        form.reset();
+        return;
+    }
+
     await convertFileIfVideo(formData);
     await uploadBackground(formData);
     form.reset();

public/style.css

@@ -13,6 +13,7 @@
 @import url(css/welcome.css);
 @import url(css/data-maid.css);
 @import url(css/secrets.css);
+@import url(css/backgrounds.css);
 
 :root {
     interpolate-size: allow-keywords;