tronnet/ProxmoxAAS-Dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve styling in config form

Browse Source 
Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu 2023-04-12 22:47:05 +00:00
parent ac2f5b8a21
commit 85a73b3a63
3 changed files with 14 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
images/actions/delete-active.svg
View File

@ -1 +1 @@
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 11v6M14 11v6M4 7h16M6 7h12v11a3 3 0 01-3 3H9a3 3 0 01-3-3V7zM9 5a2 2 0 012-2h2a2 2 0 012 2v2H9V5z" stroke="red" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 11v6M14 11v6M4 7h16M6 7h12v11a3 3 0 01-3 3H9a3 3 0 01-3-3V7zM9 5a2 2 0 012-2h2a2 2 0 012 2v2H9V5z" stroke="#f00" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 291 B

After

Width:  |  Height:  |  Size: 292 B

2
images/actions/delete-inactive.svg
View File

@ -1 +1 @@
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 11v6M14 11v6M4 7h16M6 7h12v11a3 3 0 01-3 3H9a3 3 0 01-3-3V7zM9 5a2 2 0 012-2h2a2 2 0 012 2v2H9V5z" stroke="#400000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 11v6M14 11v6M4 7h16M6 7h12v11a3 3 0 01-3 3H9a3 3 0 01-3-3V7zM9 5a2 2 0 012-2h2a2 2 0 012 2v2H9V5z" stroke="#ffbfbf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 295 B

After

Width:  |  Height:  |  Size: 295 B

18
scripts/config.js
View File

@ -64,6 +64,8 @@ function addResourceLine (fieldset, iconHref, labelText, inputAttr, unitText=nul
input.id = labelText; input.id = labelText;
input.name = labelText; input.name = labelText;
input.required = true; input.required = true;
input.classList.add("w3-input");
input.classList.add("w3-border");
field.append(input); field.append(input);
if (unitText) { if (unitText) {
@ -147,8 +149,10 @@ function addDiskLine (fieldset, busPrefix, busName, device, diskDetails) {
let active = diskMetaData[type][busPrefix].actions.includes(element) ? "active" : "inactive"; // resize let active = diskMetaData[type][busPrefix].actions.includes(element) ? "active" : "inactive"; // resize
action.src = `images/actions/delete-${active}.svg`; action.src = `images/actions/delete-${active}.svg`;
action.title = "Delete Disk"; action.title = "Delete Disk";
if (active === "active") {
action.addEventListener("click", handleDiskDelete); action.addEventListener("click", handleDiskDelete);
} }
}
else { else {
let active = diskMetaData[type][busPrefix].actions.includes(element) ? "active" : "inactive"; // resize let active = diskMetaData[type][busPrefix].actions.includes(element) ? "active" : "inactive"; // resize
action.src = `images/actions/disk/${element}-${active}.svg`; action.src = `images/actions/disk/${element}-${active}.svg`;
@ -208,7 +212,7 @@ async function handleDiskAttach () {
let diskImage = config.data[this.dataset.disk]; let diskImage = config.data[this.dataset.disk];
dialog.header = `Attach ${diskImage}`; dialog.header = `Attach ${diskImage}`;
dialog.formBody = `<label for="device">${type === "qemu" ? "SATA" : "MP"}</label><input name="device" id="device" type="number" min="0" max="${type === "qemu" ? "5" : "255"}" required></input>`; dialog.formBody = `<label for="device">${type === "qemu" ? "SATA" : "MP"}</label><input class="w3-input w3-border" name="device" id="device" type="number" min="0" max="${type === "qemu" ? "5" : "255"}" required></input>`;
dialog.callback = async (result, form) => { dialog.callback = async (result, form) => {
if (result === "confirm") { if (result === "confirm") {
@ -242,7 +246,7 @@ async function handleDiskResize () {
document.body.append(dialog); document.body.append(dialog);
dialog.header = `Resize ${this.dataset.disk}`; dialog.header = `Resize ${this.dataset.disk}`;
dialog.formBody = `<label for="size-increment">Size Increment (GiB)</label><input name="size-increment" id="size-increment" type="number" min="0" max="131072"></input>`; dialog.formBody = `<label for="size-increment">Size Increment (GiB)</label><input class="w3-input w3-border" name="size-increment" id="size-increment" type="number" min="0" max="131072"></input>`;
dialog.callback = async (result, form) => { dialog.callback = async (result, form) => {
if (result === "confirm") { if (result === "confirm") {
@ -284,11 +288,11 @@ async function handleDiskMove () {
options += `<option value="${element.storage}">${element.storage}</option>"`; options += `<option value="${element.storage}">${element.storage}</option>"`;
} }
}); });
let select = `<label for="storage-select">Storage</label><select name="storage-select" id="storage-select">${options}</select>`; let select = `<label for="storage-select">Storage</label><select class="w3-select w3-border" name="storage-select" id="storage-select">${options}</select>`;
dialog.formBody = ` dialog.formBody = `
${select} ${select}
<label for="delete-check">Delete Source</label><input name="delete-check" id="delete-check" type="checkbox" checked required> <label for="delete-check">Delete Source</label><input class="w3-input w3-border" name="delete-check" id="delete-check" type="checkbox" checked required>
`; `;
dialog.shadowRoot.querySelector("#storage-select").selectedIndex = -1; dialog.shadowRoot.querySelector("#storage-select").selectedIndex = -1;
@ -369,9 +373,9 @@ async function handleDiskAdd () {
let select = `<label for="storage-select">Storage</label><select name="storage-select" id="storage-select" required>${options}</select>`; let select = `<label for="storage-select">Storage</label><select name="storage-select" id="storage-select" required>${options}</select>`;
dialog.formBody = ` dialog.formBody = `
<label for="device">${type === "qemu" ? "SATA" : "MP"}</label><input name="device" id="device" type="number" min="0" max="${type === "qemu" ? "5" : "255"}" value="0" required></input> <label for="device">${type === "qemu" ? "SATA" : "MP"}</label><input class="w3-input w3-border" name="device" id="device" type="number" min="0" max="${type === "qemu" ? "5" : "255"}" value="0" required></input>
${select} ${select}
<label for="size">Size (GiB)</label><input name="size" id="size" type="number" min="0" max="131072" required></input> <label for="size">Size (GiB)</label><input class="w3-input w3-border" name="size" id="size" type="number" min="0" max="131072" required></input>
`; `;
dialog.shadowRoot.querySelector("#storage-select").selectedIndex = -1; dialog.shadowRoot.querySelector("#storage-select").selectedIndex = -1;
@ -419,7 +423,7 @@ async function handleCDAdd () {
let storageSelect = `<label for="storage-select">Storage</label><select name="storage-select" id="storage-select" required>${storageOptions}</select>`; let storageSelect = `<label for="storage-select">Storage</label><select name="storage-select" id="storage-select" required>${storageOptions}</select>`;
dialog.formBody = ` dialog.formBody = `
<label for="device">IDE</label><input name="device" id="device" type="number" min="0" max="3" required></input> <label for="device">IDE</label><input class="w3-input w3-border" name="device" id="device" type="number" min="0" max="3" required></input>
${storageSelect} ${storageSelect}
<label for="iso-select">Image</label><select name="iso-select" id="iso-select" required></select> <label for="iso-select">Image</label><select name="iso-select" id="iso-select" required></select>
`; `;