Vanessa 2022-09-02 00:22:55 +08:00
parent 5d2beabc2c
commit b16abf91a5
2 changed files with 41 additions and 32 deletions

View file

@ -136,6 +136,10 @@
cursor: not-allowed; cursor: not-allowed;
} }
&--show {
opacity: 1;
}
svg { svg {
height: 14px; height: 14px;
width: 14px; width: 14px;

View file

@ -120,11 +120,11 @@ export const bazaar = {
<div class="fn__space"></div> <div class="fn__space"></div>
<button data-type="myTheme" class="b3-button">${window.siyuan.languages.theme}</button> <button data-type="myTheme" class="b3-button">${window.siyuan.languages.theme}</button>
<div class="fn__space"></div> <div class="fn__space"></div>
<button data-type="myTemplate" class="b3-button b3-button--white">${window.siyuan.languages.template}</button> <button data-type="myTemplate" class="b3-button b3-button--outline">${window.siyuan.languages.template}</button>
<div class="fn__space"></div> <div class="fn__space"></div>
<button data-type="myIcon" class="b3-button b3-button--white">${window.siyuan.languages.icon}</button> <button data-type="myIcon" class="b3-button b3-button--outline">${window.siyuan.languages.icon}</button>
<div class="fn__space"></div> <div class="fn__space"></div>
<button data-type="myWidget" class="b3-button b3-button--white">${window.siyuan.languages.widget}</button> <button data-type="myWidget" class="b3-button b3-button--outline">${window.siyuan.languages.widget}</button>
</div> </div>
<div id="configBazaarDownloaded"> <div id="configBazaarDownloaded">
${loadingHTML} ${loadingHTML}
@ -169,8 +169,19 @@ export const bazaar = {
</div> </div>
</div>`; </div>`;
}, },
_genMyHTML(item: IBazaarItem, bazaarType: TBazaarType) { _genMyHTML(bazaarType: TBazaarType) {
return `<div data-bazaar="${bazaarType}" data-type="downloaded" class="b3-card"> let url = "/api/bazaar/getInstalledTheme";
if (bazaarType === "icons") {
url = "/api/bazaar/getInstalledTheme";
} else if (bazaarType === "widgets") {
url = "/api/bazaar/getInstalledWidgets";
}else if (bazaarType === "templates") {
url = "/api/bazaar/getInstalledTemplates";
}
fetchPost(url, {}, response => {
let html = "";
response.data.packages.forEach((item: IBazaarItem) => {
html += `<div data-bazaar="${bazaarType}" data-type="downloaded" class="b3-card">
<div class="b3-card__img"><img src="${item.previewURLThumb}"/></div> <div class="b3-card__img"><img src="${item.previewURLThumb}"/></div>
<div class="b3-card__info fn__flex"> <div class="b3-card__info fn__flex">
<span class="fn__flex-center fn__ellipsis">${item.name}</span> <span class="fn__flex-center fn__ellipsis">${item.name}</span>
@ -180,21 +191,25 @@ export const bazaar = {
<span class="fn__space"></span> <span class="fn__space"></span>
<span class="fn__flex-center">${item.downloads}</span> <span class="fn__flex-center">${item.downloads}</span>
</div> </div>
<div class="b3-card__actions" data-url="${item.repoURL}"> <div class="b3-card__actions" data-url="${item.repoURL}" data-name="${item.name}">
<button class="b3-tooltips b3-tooltips__ne b3-button b3-button--text" data-type="uninstall" aria-label="${window.siyuan.languages.uninstall}">
<svg><use xlink:href="#iconTrashcan"></use></svg>
</button>
<div class="fn__flex-1"></div> <div class="fn__flex-1"></div>
<span class="b3-tooltips b3-tooltips__ne block__icon block__icon--show" data-type="uninstall" aria-label="${window.siyuan.languages.uninstall}">
<svg><use xlink:href="#iconTrashcan"></use></svg>
</span>
<span class="fn__space"></span> <span class="fn__space"></span>
<button data-type="install-t" aria-label="${window.siyuan.languages.update}" class="b3-tooltips b3-tooltips__nw b3-button b3-button--text${item.outdated ? "" : " fn__none"}"> <span class="b3-tooltips b3-tooltips__nw block__icon block__icon--show" data-type="openD" aria-label="${window.siyuan.languages.showInFolder}">
<svg><use xlink:href="#iconRefresh"></use></svg>
</button>
<span class="fn__space"></span>
<button class="b3-tooltips b3-tooltips__nw b3-button b3-button--text" data-type="uninstall" aria-label="${window.siyuan.languages.showInFolder}">
<svg><use xlink:href="#iconFolder"></use></svg> <svg><use xlink:href="#iconFolder"></use></svg>
</button> </span>
<span class="fn__space${item.outdated ? "" : " fn__none"}"></span>
<span data-type="installD" aria-label="${window.siyuan.languages.update}" class="b3-tooltips b3-tooltips__nw block__icon block__icon--show${item.outdated ? "" : " fn__none"}">
<svg><use xlink:href="#iconRefresh"></use></svg>
</span>
</div> </div>
</div>`; </div>`;
});
bazaar.data.downloaded = response.data.packages;
bazaar.element.querySelector("#configBazaarDownloaded").innerHTML = `<div class="b3-cards">${html}</div>`;
});
}, },
data: { data: {
themes: [] as IBazaarItem[], themes: [] as IBazaarItem[],
@ -312,14 +327,7 @@ export const bazaar = {
} }
}) })
target.classList.remove("b3-button--outline"); target.classList.remove("b3-button--outline");
fetchPost(`/api/bazaar/getInstalled${type.replace("my", "")}`, {}, response => { this._genMyHTML(type.replace("my", "").toLowerCase() + "s" as TBazaarType);
let html = "";
response.data.packages.forEach((item: IBazaarItem) => {
html += this._genMyHTML(item, type.replace("my", "").toLowerCase() + "s" as TBazaarType);
});
bazaar.data.downloaded = response.data.packages;
bazaar.element.querySelector("#configBazaarDownloaded").innerHTML = `<div class="b3-cards">${html}</div>`;
});
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
break; break;
@ -423,7 +431,11 @@ export const bazaar = {
fetchPost(url, { fetchPost(url, {
packageName packageName
}, response => { }, response => {
if (cardElement && cardElement.getAttribute("data-type") === "downloaded") {
this._genMyHTML(bazaarType);
} else {
bazaar.onBazaar(response, bazaarType, ["themes", "icons"].includes(bazaarType)); bazaar.onBazaar(response, bazaarType, ["themes", "icons"].includes(bazaarType));
}
}); });
} }
event.preventDefault(); event.preventDefault();
@ -516,14 +528,7 @@ export const bazaar = {
bazaar.data.widgets = response.data.packages; bazaar.data.widgets = response.data.packages;
}); });
} else if (type === "downloaded") { } else if (type === "downloaded") {
fetchPost("/api/bazaar/getInstalledTheme", {}, response => { this._genMyHTML("themes");
let html = "";
response.data.packages.forEach((item: IBazaarItem) => {
html += this._genMyHTML(item, "themes");
});
bazaar.data.downloaded = response.data.packages;
bazaar.element.querySelector("#configBazaarDownloaded").innerHTML = `<div class="b3-cards">${html}</div>`;
});
} }
item.setAttribute("data-init", "true"); item.setAttribute("data-init", "true");
} }