Creepso/Wplace-BlueMarble
1
0
Fork 0
mirror of https://github.com/SwingTheVine/Wplace-BlueMarble.git synced 2026-03-11 21:26:55 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Code optimization on file upload styling

Browse source
This commit is contained in:
SwingTheVine 2025-07-25 02:01:41 -04:00
parent 94f0fae909
commit a45ccf327f
2 changed files with 8 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/overlay.css
View file

@ -73,12 +73,12 @@ div#bm-overlay {
/* Question Mark button */
.bm-help {
border: white 1px solid;
border-radius: 1em;
height: 1.25em;
width: 1.25em;
margin-top: 2px;
text-align: center;
line-height: 1.25em;
padding: 0 !important; /* Overrides the padding in "#bm-overlay button" */
}
/* Pin button */
@ -113,10 +113,12 @@ div#bm-overlay {
gap: 1ch;
}
/* The template file upload container */
/* The template file upload button */
div:has(> #bm-input-file) > button {
width: 100%;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Output status area */

8
src/overlay.js
View file

@ -132,7 +132,7 @@ export class Overlay {
containerAutomation.appendChild(containerAutomationCoords); // Adds coord container to automation container
containerAutomation.appendChild(this.createInputFile('bm-input-file', 20)); // Adds the file upload element to the automation container
containerAutomation.appendChild(this.createInputFile('bm-input-file')); // Adds the file upload element to the automation container
const containerAutomationButtons = document.createElement('div'); // Button array for bot
containerAutomationButtons.id = 'bm-contain-buttons';
@ -262,11 +262,10 @@ export class Overlay {
/** Creates a custom file upload input.
* Only the button is displayed, but interacting with it will simulate the file input
* @param {string} inputId - The file input element ID
* @param {number} [maxChars] - (Optional) The maximum number of characters in the displayed file name. Zero by default
* @returns {HTMLDivElement} HTML Div Element with Button and Input children
* @since 0.36.1
*/
createInputFile(inputId, maxChars=0) {
createInputFile(inputId) {
const container = document.createElement('div');
const input = document.createElement('input');
@ -283,8 +282,7 @@ export class Overlay {
// Changes the button text content (and trims the file name)
input.addEventListener('change', () => {
if (input.files.length > 0) {
const name = input.files[0].name;
button.textContent = !!maxChars ? `${name.slice(0, maxChars)}${name.length > maxChars ? `…` : ``}` : input.files[0].name;
button.textContent = input.files[0].name;
} else {
button.textContent = 'Upload File';
}