Creepso/Wplace-BlueMarble
1
0
Fork 0
mirror of https://github.com/SwingTheVine/Wplace-BlueMarble.git synced 2026-04-20 10:12:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Styled coord inputs

Browse source
This commit is contained in:
SwingTheVine 2025-07-24 23:52:26 -04:00
parent f96e21f41a
commit 2924a5c764
2 changed files with 18 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/overlay.css
View file

@ -92,7 +92,12 @@ div#bm-overlay {
}
/* Pin button */
#button-coords svg {
#bm-button-coords {
vertical-align: middle;
}
/* Pin button image*/
#bm-button-coords svg {
width: 50%;
margin: 0 auto;
fill: #111;
@ -108,6 +113,10 @@ div#bm-overlay {
margin-top: 0.5em;
}
/* Tile (x, y) & Pixel (x, y) input fields */
#bm-contain-coords input[type="text"] {
width: 7ch;
width: 7.5ch;
margin-left: 1ch;
background-color: rgba(0, 0, 0, 0.2);
padding: 0 0.5ch;
}

12
src/overlay.js
View file

@ -124,10 +124,10 @@ export class Overlay {
containerAutomationCoords.appendChild(buttonCoords); // Adds the coordinate button to the automation container
// Tile (x,y) and Pixel (x,y) input fields
containerAutomationCoords.appendChild(this.createInputText('bm-input-tx', 'Tile X'));
containerAutomationCoords.appendChild(this.createInputText('bm-input-ty', 'Tile Y'));
containerAutomationCoords.appendChild(this.createInputText('bm-input-px', 'Pixel X'));
containerAutomationCoords.appendChild(this.createInputText('bm-input-py', 'Pixel Y'));
containerAutomationCoords.appendChild(this.createInputText('bm-input-tx', 'Tile X', '', '4'));
containerAutomationCoords.appendChild(this.createInputText('bm-input-ty', 'Tile Y', '', '4'));
containerAutomationCoords.appendChild(this.createInputText('bm-input-px', 'Pixl X', '', '4'));
containerAutomationCoords.appendChild(this.createInputText('bm-input-py', 'Pixl Y', '', '4'));
containerAutomation.appendChild(containerAutomationCoords); // Adds coord container to automation container
@ -201,17 +201,19 @@ export class Overlay {
* @param {string} inputId - The ID for the text input
* @param {string} [placeholder] - (Optional) The placeholder text of the input
* @param {string} [text] - (Optional) The text content of the input
* @param {string} [maxLength] - (Optional) The maximum character amount of the input
* @param {boolean} [isReadOnly] - (Optional) Should the input be readOnly? False by default
* @returns {HTMLInputElement} HTML Input Element
* @since 0.30.3
*/
createInputText(inputId, placeholder='', text='', isReadOnly=false) {
createInputText(inputId, placeholder='', text='', maxLength='', isReadOnly=false) {
const input = document.createElement('input');
input.id = inputId;
input.type = 'text';
input.placeholder = placeholder;
input.value = text;
input.readOnly = isReadOnly;
input.maxLength = maxLength;
return input;
}