wangbo/ComfyUI-Manager
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI-Manager.git synced 2026-07-03 13:19:20 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

apply loading animation for install button

Browse Source
This commit is contained in:
cenfun 2024-06-22 08:52:13 +08:00
parent e625496d44
commit 44ed919218
1 changed files with 40 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
js/model-manager.js
View File

@ -144,6 +144,39 @@ const pageCss = `
color: white; color: white;
} }
@keyframes cmm-btn-loading-bg {
0% {
left: 0;
}
100% {
left: -100px;
}
}
.cmm-manager button.cmm-btn-loading {
position: relative;
overflow: hidden;
border-color: rgb(0 119 207 / 80%);
background-color: var(--comfy-input-bg);
}
.cmm-manager button.cmm-btn-loading::after {
position: absolute;
top: 0;
left: 0;
content: "";
width: 500px;
height: 100%;
background-image: repeating-linear-gradient(
-45deg,
rgb(0 119 207 / 30%),
rgb(0 119 207 / 30%) 10px,
transparent 10px,
transparent 15px
);
animation: cmm-btn-loading-bg 3s linear infinite;
}
.cmm-manager-light .cmm-node-name a { .cmm-manager-light .cmm-node-name a {
color: blue; color: blue;
} }
@ -332,12 +365,9 @@ export class ModelManager {
const target = d.e.target; const target = d.e.target;
const mode = target.getAttribute("mode"); const mode = target.getAttribute("mode");
if (mode === "install") { if (mode === "install") {
this.installModel(rowItem); this.installModel(rowItem, target);
} }
this.grid.selectAll(false);
this.grid.setRowSelected(rowItem);
}); });
grid.setOption({ grid.setOption({
@ -476,15 +506,13 @@ export class ModelManager {
// =========================================================================================== // ===========================================================================================
async installModel(item) { async installModel(item, btn) {
this.showLoading(); this.showLoading();
this.showError(""); this.showError("");
this.showStatus(`Install ${item.name} ...`); this.showStatus(`Install ${item.name} ...`);
btn.classList.add("cmm-btn-loading");
this.grid.selectAll(false);
this.grid.setRowSelected(item);
const data = item.originalData; const data = item.originalData;
const res = await fetchData('/model/install', { const res = await fetchData('/model/install', {
@ -644,6 +672,10 @@ export class ModelManager {
} }
}); });
Array.from(this.element.querySelectorAll(".cmm-btn-loading")).forEach($elem => {
$elem.classList.remove("cmm-btn-loading");
});
} }
setKeywords(keywords = "") { setKeywords(keywords = "") {