From 63b2bebf2ec51a11eed1be69c465de072cb654aa Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Thu, 19 Jan 2023 02:13:07 +0000 Subject: [PATCH] add action button icons Signed-off-by: Arthur Lu --- config.html | 2 +- images/actions/attach.svg | 1 + images/actions/delete-active.svg | 1 + images/actions/delete-inactive.svg | 1 + images/actions/delete.svg | 1 - images/actions/detach.svg | 1 + images/actions/move-active.svg | 1 + images/actions/move-inactive.svg | 1 + images/actions/resize-active.svg | 1 + images/actions/resize-inactive.svg | 1 + scripts/config.js | 45 ++++++++++++++++++++---------- 11 files changed, 40 insertions(+), 16 deletions(-) create mode 100644 images/actions/attach.svg create mode 100644 images/actions/delete-active.svg create mode 100644 images/actions/delete-inactive.svg delete mode 100644 images/actions/delete.svg create mode 100644 images/actions/detach.svg create mode 100644 images/actions/move-active.svg create mode 100644 images/actions/move-inactive.svg create mode 100644 images/actions/resize-active.svg create mode 100644 images/actions/resize-inactive.svg diff --git a/config.html b/config.html index 1c58f34..6da7bba 100644 --- a/config.html +++ b/config.html @@ -20,7 +20,7 @@ Disks
-
Add New Disk
+
Add New Disk
diff --git a/images/actions/attach.svg b/images/actions/attach.svg new file mode 100644 index 0000000..078517e --- /dev/null +++ b/images/actions/attach.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/actions/delete-active.svg b/images/actions/delete-active.svg new file mode 100644 index 0000000..f336ecd --- /dev/null +++ b/images/actions/delete-active.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/actions/delete-inactive.svg b/images/actions/delete-inactive.svg new file mode 100644 index 0000000..831a08c --- /dev/null +++ b/images/actions/delete-inactive.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/actions/delete.svg b/images/actions/delete.svg deleted file mode 100644 index ecc0dae..0000000 --- a/images/actions/delete.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/images/actions/detach.svg b/images/actions/detach.svg new file mode 100644 index 0000000..053247d --- /dev/null +++ b/images/actions/detach.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/actions/move-active.svg b/images/actions/move-active.svg new file mode 100644 index 0000000..8a00792 --- /dev/null +++ b/images/actions/move-active.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/actions/move-inactive.svg b/images/actions/move-inactive.svg new file mode 100644 index 0000000..9ec6bd6 --- /dev/null +++ b/images/actions/move-inactive.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/actions/resize-active.svg b/images/actions/resize-active.svg new file mode 100644 index 0000000..ea72ce2 --- /dev/null +++ b/images/actions/resize-active.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/actions/resize-inactive.svg b/images/actions/resize-inactive.svg new file mode 100644 index 0000000..79a06a4 --- /dev/null +++ b/images/actions/resize-inactive.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/scripts/config.js b/scripts/config.js index 047aa39..3d98cc5 100644 --- a/scripts/config.js +++ b/scripts/config.js @@ -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); }