Improvement: Add Upload Button to Image Gallery (#4500) * Improvement: Add Upload Button to Image Gallery - Added an Upload Image button to the Image Gallery for a more intuitive experience and easier use on mobile devices (so I can upload some awesome GIFs right from my phone) - Adjusted the `<select class="gallery-sort-select">` menu styling for better consistency with other sections, making it more compact and reducing wasted space * Fix type error --------- Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>

40a46bee9d3aec4c909ff2e8efa114ed693983af

Rivelle <rivelle.days@gmail.com>

Signed

public/scripts/extensions/gallery/index.js+45 -5 Viewed

 });
 const SORT = Object.freeze({
-    NAME_ASC: { value: 'nameAsc', field: 'name', order: 'asc', label: t`Sort By: Name (A-Z)` },
+    NAME_ASC: { value: 'nameAsc', field: 'name', order: 'asc', label: t`Name (A-Z)` },
-    NAME_DESC: { value: 'nameDesc', field: 'name', order: 'desc', label: t`Sort By: Name (Z-A)` },
+    NAME_DESC: { value: 'nameDesc', field: 'name', order: 'desc', label: t`Name (Z-A)` },
-    DATE_ASC: { value: 'dateAsc', field: 'date', order: 'asc', label: t`Sort By: Date (Oldest First)` },
+    DATE_DESC: { value: 'dateDesc', field: 'date', order: 'desc', label: t`Newest` },
-    DATE_DESC: { value: 'dateDesc', field: 'date', order: 'desc', label: t`Sort By: Date (Newest First)` },
+    DATE_ASC: { value: 'dateAsc', field: 'date', order: 'asc', label: t`Oldest` },
 });
 const defaultSettings = Object.freeze({

     const titleText = document.createElement('span');
     titleText.textContent = t`Image Gallery`;
     dragTitle.append(titleText);
+    // Create a container for the controls
+    const controlsContainer = document.createElement('div');
+    controlsContainer.classList.add('flex-container', 'alignItemsCenter');
     const sortSelect = document.createElement('select');
     sortSelect.classList.add('gallery-sort-select');

     });
     sortSelect.value = getSortOrder();
-    dragTitle.append(sortSelect);
+    controlsContainer.appendChild(sortSelect);
+    // Create the "Add Image" button
+    const addImageButton = document.createElement('div');
+    addImageButton.classList.add('menu_button', 'menu_button_icon', 'interactable');
+    addImageButton.title = 'Add Image';
+    addImageButton.innerHTML = '<i class="fa-solid fa-plus fa-fw"></i><div>Add Image</div>';
+    // Create a hidden file input
+    const fileInput = document.createElement('input');
+    fileInput.type = 'file';
+    fileInput.accept = 'image/*';
+    fileInput.multiple = true;
+    fileInput.style.display = 'none';
+    // Trigger file input when the button is clicked
+    addImageButton.addEventListener('click', () => {
+        fileInput.click();
+    });
+    // Handle file selection
+    fileInput.addEventListener('change', async () => {
+        const files = fileInput.files;
+        if (files.length > 0) {
+            for (const file of files) {
+                await uploadFile(file, url);
+            }
+            // Refresh the gallery
+            closeButton.trigger('click');
+            await showCharGallery();
+        }
+    });
+    controlsContainer.appendChild(addImageButton);
+    dragTitle.append(controlsContainer);
+    newElement.append(fileInput); // Append hidden file input to the main element
     // add no-scrollbar class to this element
     newElement.addClass('no-scrollbar');

public/scripts/extensions/gallery/style.css+3 -2 Viewed

     display: flex;
     align-items: center;
     justify-content: center;
+    gap: 4px;
+}
 .gallery-folder-input {

     text-overflow: ellipsis;
     width: 100%;
     opacity: 0.8;
-    background: none;
+    background-color: var(--black30a);
+    border: 1px solid var(--SmartThemeBorderColor);
     background-image: url(/img/down-arrow.svg);
     background-repeat: no-repeat;
     background-position: right 6px center;
     background-size: 8px 5px;
     padding-right: 20px;
-    font-size: calc(var(--mainFontSize)* 0.9);
     margin-bottom: 0;
+}