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

add action button icons

Browse Source 
Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu 2023-01-19 02:13:07 +00:00
parent 62b4fa40e8
commit 63b2bebf2e
11 changed files with 40 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
config.html
View File

@ -20,7 +20,7 @@
<legend>Disks</legend>
<div class="input-grid" id="disks" style="grid-template-columns: auto auto auto 1fr;"></div>
<hr>
<div class="center-div"><img id="disk-add" src="images/actions/create.svg" class="clickable" alt="Add New Disk"></div>
<div class="center-div"><img id="disk-add" src="images/actions/create.svg" class="clickable" alt="Add New Disk" title="Add New Disk"></div>
</fieldset>
<fieldset class="fieldset-no-border">
<div class="btn-group" id="form-actions">

1
images/actions/attach.svg Normal file
View File

@ -0,0 +1 @@
<svg width="800" height="800" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M175.541 451.418c-34.837 0-67.605-13.568-92.245-38.208-50.859-50.86-50.859-133.632 0-184.491L257.269 54.746l27.158 27.178-173.974 173.952c-35.882 35.904-35.882 94.294 0 130.176 17.387 17.387 40.512 26.966 65.088 26.966 24.576 0 47.702-9.58 65.088-26.966l172.118-172.117c21.397-21.397 21.397-56.192 0-77.59-20.736-20.757-56.896-20.693-77.59-.02L166.603 304.75c-3.542 3.541-5.483 8.256-5.483 13.27 0 5.013 1.941 9.727 5.504 13.269 7.083 7.146 19.477 7.104 26.56 0l141.504-141.483 27.157 27.179-141.482 141.482c-22.336 22.294-58.603 22.25-80.896 0-22.294-22.293-22.294-58.602 0-80.874L308.02 109.188c17.579-17.6 41.024-27.306 65.942-27.306 24.896 0 48.32 9.685 65.962 27.306 36.352 36.374 36.352 95.552 0 131.926L267.787 413.21c-24.64 24.64-57.387 38.208-92.246 38.208" fill="#fff"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 882 B

1
images/actions/delete-active.svg Normal file
View File

@ -0,0 +1 @@
<svg fill="#ff0000" width="800" height="800" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M512.481 421.906L850.682 84.621c25.023-24.964 65.545-24.917 90.51.105s24.917 65.545-.105 90.51L603.03 512.377 940.94 850c25.003 24.984 25.017 65.507.033 90.51s-65.507 25.017-90.51.033L512.397 602.764 174.215 940.03c-25.023 24.964-65.545 24.917-90.51-.105s-24.917-65.545.105-90.51l338.038-337.122L84.14 174.872c-25.003-24.984-25.017-65.507-.033-90.51s65.507-25.017 90.51-.033L512.48 421.906z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 512 B

1
images/actions/delete-inactive.svg Normal file
View File

@ -0,0 +1 @@
<svg fill="#400000" width="800" height="800" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M512.481 421.906L850.682 84.621c25.023-24.964 65.545-24.917 90.51.105s24.917 65.545-.105 90.51L603.03 512.377 940.94 850c25.003 24.984 25.017 65.507.033 90.51s-65.507 25.017-90.51.033L512.397 602.764 174.215 940.03c-25.023 24.964-65.545 24.917-90.51-.105s-24.917-65.545.105-90.51l338.038-337.122L84.14 174.872c-25.003-24.984-25.017-65.507-.033-90.51s65.507-25.017 90.51-.033L512.48 421.906z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 512 B

1
images/actions/delete.svg
View File

@ -1 +0,0 @@
<svg fill="red" width="800" height="800" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M512.481 421.906L850.682 84.621c25.023-24.964 65.545-24.917 90.51.105s24.917 65.545-.105 90.51L603.03 512.377 940.94 850c25.003 24.984 25.017 65.507.033 90.51s-65.507 25.017-90.51.033L512.397 602.764 174.215 940.03c-25.023 24.964-65.545 24.917-90.51-.105s-24.917-65.545.105-90.51l338.038-337.122L84.14 174.872c-25.003-24.984-25.017-65.507-.033-90.51s65.507-25.017 90.51-.033L512.48 421.906z"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 508 B

1
images/actions/detach.svg Normal file
View File

@ -0,0 +1 @@
<svg fill="#fff" height="800" width="800" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8 24c-1.9 0-3.6-.7-4.9-2C1.7 20.7 1 18.9 1 17.1s.7-3.6 2-4.9l2.5-2.5 1.4 1.4-2.5 2.5c-.9.9-1.4 2.2-1.4 3.5s.5 2.6 1.4 3.5c1 1 2.2 1.5 3.5 1.5s2.6-.5 3.5-1.4l2.6-2.6 1.4 1.4-2.5 2.5c-1.3 1.3-3.1 2-4.9 2zm11.2-3.2L3.3 4.9l1.4-1.4L8.2 7l5.5-5.5C14.5.6 15.8 0 17.1 0c1.3 0 2.6.5 3.5 1.5 1 1 1.5 2.2 1.5 3.6 0 1.3-.5 2.6-1.5 3.5L15.1 14l1.4 1.4 4.4-4.3 1.4 1.4-4.3 4.3 2.6 2.6-1.4 1.4zm-6.8-9.6l1.4 1.4 5.5-5.5c.6-.6.9-1.3.9-2.1s-.3-1.5-.9-2.1c-.7-.6-1.5-.9-2.2-.9-.8 0-1.5.3-2.1.9L9.6 8.4 11 9.8l4.3-4.3 1.4 1.4-4.3 4.3zM8 20c-.8 0-1.5-.3-2.1-.9-.6-.6-.9-1.3-.9-2.1s.3-1.5.9-2.1l2.5-2.5 1.4 1.4-2.5 2.5c-.2.2-.3.4-.3.7 0 .3.1.5.3.7.4.4 1 .4 1.4 0l2.5-2.5 1.4 1.4-2.5 2.5c-.6.6-1.4.9-2.1.9z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 801 B

1
images/actions/move-active.svg Normal file
View File

@ -0,0 +1 @@
<svg width="800" height="800" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16 7l5 5m0 0l-5 5m5-5H3" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 208 B

1
images/actions/move-inactive.svg Normal file
View File

@ -0,0 +1 @@
<svg width="800" height="800" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16 7l5 5m0 0l-5 5m5-5H3" stroke="#404040" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 208 B

1
images/actions/resize-active.svg Normal file
View File

@ -0,0 +1 @@
<svg width="800" height="800" viewBox="0 0 24 24" data-name="Flat Color" xmlns="http://www.w3.org/2000/svg" class="prefix__icon prefix__flat-color"><path d="M12 20a1 1 0 01-1-1v-6H5a1 1 0 010-2h6V5a1 1 0 012 0v6h6a1 1 0 010 2h-6v6a1 1 0 01-1 1z" fill="#fff"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 265 B

1
images/actions/resize-inactive.svg Normal file
View File

@ -0,0 +1 @@
<svg width="800" height="800" viewBox="0 0 24 24" data-name="Flat Color" xmlns="http://www.w3.org/2000/svg" class="prefix__icon prefix__flat-color"><path d="M12 20a1 1 0 01-1-1v-6H5a1 1 0 010-2h6V5a1 1 0 012 0v6h6a1 1 0 010 2h-6v6a1 1 0 01-1 1z" fill="#404040"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 268 B

45
scripts/config.js
View File

@ -3,17 +3,19 @@ import {request, goToPage, getURIData} from "./utils.js";
window.addEventListener("DOMContentLoaded", init);
let diskConfig = {
//actionBarOrder: ["config", "move", "reassign", "resize", "delete_detach_attach"],
actionBarOrder: ["config", "move", "resize", "delete_detach_attach"], // handle reassign later
lxc: {
prefixOrder: ["rootfs", "mp", "unused"],
rootfs: {name: "ROOTFS", icon: "images/resources/drive.svg"},
mp: {name: "MP", icon: "images/resources/drive.svg"},
unused: {name: "UNUSED", icon: "images/resources/drive.svg"}
rootfs: {name: "ROOTFS", icon: "images/resources/drive.svg", actions: ["move", "resize"]},
mp: {name: "MP", icon: "images/resources/drive.svg", actions: ["config", "detach", "move", "reassign", "resize"]},
unused: {name: "UNUSED", icon: "images/resources/drive.svg", actions: ["attach", "delete", "reassign"]}
},
qemu: {
prefixOrder: ["ide", "sata", "unused"],
ide: {name: "IDE", icon: "images/resources/disk.svg"},
sata: {name: "SATA", icon: "images/resources/drive.svg"},
unused: {name: "UNUSED", icon: "images/resources/drive.svg"}
ide: {name: "IDE", icon: "images/resources/disk.svg", actions: ["config", "delete"]},
sata: {name: "SATA", icon: "images/resources/drive.svg", actions: ["detach", "move", "reassign", "resize"]},
unused: {name: "UNUSED", icon: "images/resources/drive.svg", actions: ["attach", "delete", "reassign"]}
}
}
@ -52,9 +54,6 @@ async function populateResources () {
if (type === "lxc") {
addResourceLine("resources", "images/resources/swap.svg", "Swap", {type: "number", value: config.data.swap, min: 0, step: 1}, "MiB"); // TODO add max from quota API
/*
let rootfs = config.data.rootfs;
addDiskLine("disks", "mp", "Root FS", null, rootfs);*/
}
for(let i = 0; i < diskConfig[type].prefixOrder.length; i++){
@ -122,11 +121,29 @@ async function addDiskLine (fieldset, busPrefix, busName, device, disk) {
let actionDiv = document.createElement("div");
actionDiv.classList.add("last-item");
let deleteBtn = document.createElement("img");
deleteBtn.src = "images/actions/delete.svg";
deleteBtn.alt = `Delete disk ${busName} ${device}`;
deleteBtn.classList.add("clickable");
actionDiv.append(deleteBtn);
diskConfig.actionBarOrder.forEach((element) => {
let action = document.createElement("img");
action.classList.add("clickable");
if (element === "delete_detach_attach" && diskConfig[type][busPrefix].actions.includes("attach")){
action.src = "images/actions/attach.svg";
action.title = "Attach Disk";
}
else if (element === "delete_detach_attach" && diskConfig[type][busPrefix].actions.includes("detach")){
action.src = "images/actions/detach.svg";
action.title = "Detach Disk";
}
else if (element === "delete_detach_attach"){
let active = diskConfig[type][busPrefix].actions.includes("delete") ? "active" : "inactive";
action.src = `images/actions/delete-${active}.svg`;
action.title = `Delete Disk`;
}
else {
let active = diskConfig[type][busPrefix].actions.includes(element) ? "active" : "inactive";
action.src = `images/actions/${element}-${active}.svg`;
action.title = `${element.charAt(0).toUpperCase()}${element.slice(1)} Disk`;
}
actionDiv.append(action);
});
field.append(actionDiv);
}