This commit is contained in:
Vanessa 2023-05-30 10:36:06 +08:00
parent 9e83c53872
commit 8dc43cb22d
2 changed files with 47 additions and 35 deletions

View file

@ -46,6 +46,11 @@
&__info { &__info {
padding: 16px 16px 4px; padding: 16px 16px 4px;
line-height: 18px; line-height: 18px;
&--left {
padding-bottom: 16px;
padding-right: 8px;
}
} }
&__desc { &__desc {
@ -62,5 +67,15 @@
box-sizing: border-box; box-sizing: border-box;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
&--right {
padding-left: 0;
padding-bottom: 0;
align-items: center;
.block__icon {
margin-left: 8px;
}
}
} }
} }

View file

@ -11,7 +11,7 @@ import * as path from "path";
/// #endif /// #endif
import {getFrontend, isBrowser} from "../util/functions"; import {getFrontend, isBrowser} from "../util/functions";
import {setStorageVal} from "../protyle/util/compatibility"; import {setStorageVal} from "../protyle/util/compatibility";
import {hasClosestByAttribute} from "../protyle/util/hasClosest"; import {hasClosestByAttribute, hasClosestByClassName} from "../protyle/util/hasClosest";
import {Plugin} from "../plugin"; import {Plugin} from "../plugin";
import {App} from "../index"; import {App} from "../index";
import {escapeAttr} from "../util/escape"; import {escapeAttr} from "../util/escape";
@ -73,11 +73,11 @@ export const bazaar = {
return `<div class="fn__flex-column" style="height: 100%"> return `<div class="fn__flex-column" style="height: 100%">
<div class="layout-tab-bar fn__flex"> <div class="layout-tab-bar fn__flex">
<div data-type="downloaded" class="item item--full item--focus"><span class="fn__flex-1"></span><span class="item__text">${window.siyuan.languages.downloaded}</span><span class="fn__flex-1"></span></div> <div data-type="downloaded" class="item item--full item--focus"><span class="fn__flex-1"></span><span class="item__text">${window.siyuan.languages.downloaded}</span><span class="fn__flex-1"></span></div>
<div data-type="plugin" class="item item--full"><span class="fn__flex-1"></span><span class="item__text">${window.siyuan.languages.plugin}</span><span class="fn__flex-1"></span></div>
<div data-type="theme" class="item item--full"><span class="fn__flex-1"></span><span class="item__text">${window.siyuan.languages.theme}</span><span class="fn__flex-1"></span></div> <div data-type="theme" class="item item--full"><span class="fn__flex-1"></span><span class="item__text">${window.siyuan.languages.theme}</span><span class="fn__flex-1"></span></div>
<div data-type="icon" class="item item--full"><span class="fn__flex-1"></span><span class="item__text">${window.siyuan.languages.icon}</span><span class="fn__flex-1"></span></div> <div data-type="icon" class="item item--full"><span class="fn__flex-1"></span><span class="item__text">${window.siyuan.languages.icon}</span><span class="fn__flex-1"></span></div>
<div data-type="template" class="item item--full"><span class="fn__flex-1"></span><span class="item__text">${window.siyuan.languages.template}</span><span class="fn__flex-1"></span></div> <div data-type="template" class="item item--full"><span class="fn__flex-1"></span><span class="item__text">${window.siyuan.languages.template}</span><span class="fn__flex-1"></span></div>
<div data-type="widget" class="item item--full"><span class="fn__flex-1"></span><span class="item__text">${window.siyuan.languages.widget}</span><span class="fn__flex-1"></span></div> <div data-type="widget" class="item item--full"><span class="fn__flex-1"></span><span class="item__text">${window.siyuan.languages.widget}</span><span class="fn__flex-1"></span></div>
<div data-type="plugin" class="item item--full"><span class="fn__flex-1"></span><span class="item__text">${window.siyuan.languages.plugin}</span><span class="fn__flex-1"></span></div>
</div> </div>
<div class="fn__flex-1"> <div class="fn__flex-1">
<div class="bazaarPanel" data-type="downloaded" data-init="true"> <div class="bazaarPanel" data-type="downloaded" data-init="true">
@ -85,15 +85,15 @@ export const bazaar = {
<div class="fn__flex"> <div class="fn__flex">
<div class="fn__space"></div> <div class="fn__space"></div>
<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="myPlugin" class="b3-button">${window.siyuan.languages.plugin}</button>
<div class="fn__space"></div>
<button data-type="myTheme" class="b3-button b3-button--outline">${window.siyuan.languages.theme}</button>
<div class="fn__space"></div> <div class="fn__space"></div>
<button data-type="myIcon" class="b3-button b3-button--outline">${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="myTemplate" class="b3-button b3-button--outline">${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="myWidget" class="b3-button b3-button--outline">${window.siyuan.languages.widget}</button> <button data-type="myWidget" class="b3-button b3-button--outline">${window.siyuan.languages.widget}</button>
<div class="fn__space"></div>
<button data-type="myPlugin" class="b3-button b3-button--outline">${window.siyuan.languages.plugin}</button>
</div> </div>
<div id="configBazaarDownloaded"> <div id="configBazaarDownloaded">
${loadingHTML} ${loadingHTML}
@ -310,30 +310,26 @@ export const bazaar = {
html += `<div data-obj='${JSON.stringify(dataObj)}' class="b3-card${item.current ? " b3-card--current" : ""}"> html += `<div data-obj='${JSON.stringify(dataObj)}' class="b3-card${item.current ? " b3-card--current" : ""}">
<div class="b3-card__img"><img src="${item.iconURL}" onerror="this.src='${item.previewURLThumb}'"/></div> <div class="b3-card__img"><img src="${item.iconURL}" onerror="this.src='${item.previewURLThumb}'"/></div>
<div class="fn__flex-1 fn__flex-column"> <div class="fn__flex-1 fn__flex-column">
<div class="b3-card__info fn__flex-1"> <div class="b3-card__info b3-card__info--left fn__flex-1">
${item.preferredName} <span class="ft__on-surface ft__smaller">${item.name}</span> ${item.preferredName} <span class="ft__on-surface ft__smaller">${item.name}</span>
<div class="b3-card__desc" title="${escapeAttr(item.preferredDesc) || ""}">${item.preferredDesc || ""}</div> <div class="b3-card__desc" title="${escapeAttr(item.preferredDesc) || ""}">${item.preferredDesc || ""}</div>
</div> </div>
<div class="b3-card__actions"> </div>
<div class="b3-card__actions b3-card__actions--right">
${item.incompatible ? `<span class="fn__space"></span><span class="fn__flex-center b3-tooltips b3-tooltips__nw b3-chip b3-chip--error b3-chip--small" aria-label="${window.siyuan.languages.incompatiblePluginTip}">${window.siyuan.languages.incompatible}</span>` : ""}
${item.preferredFunding ? `<a target="_blank" href="${item.preferredFunding}" data-type="a" class="block__icon block__icon--show" aria-label="${window.siyuan.languages.sponsor} ${item.preferredFunding}"><svg class="ft__pink"><use xlink:href="#iconHeart"></use></svg></a>` : ""} ${item.preferredFunding ? `<a target="_blank" href="${item.preferredFunding}" data-type="a" class="block__icon block__icon--show" aria-label="${window.siyuan.languages.sponsor} ${item.preferredFunding}"><svg class="ft__pink"><use xlink:href="#iconHeart"></use></svg></a>` : ""}
<div class="fn__flex-1"></div>
${item.incompatible ? `<span class="b3-tooltips b3-tooltips__nw fn__flex-center" aria-label="${window.siyuan.languages.incompatiblePluginTip}">${window.siyuan.languages.incompatible}</span><span class="fn__space"></span>` : ""}
<span class="b3-tooltips b3-tooltips__nw block__icon block__icon--show${hasSetting ? "" : " fn__none"}" data-type="setting" aria-label="${window.siyuan.languages.config}"> <span class="b3-tooltips b3-tooltips__nw block__icon block__icon--show${hasSetting ? "" : " fn__none"}" data-type="setting" aria-label="${window.siyuan.languages.config}">
<svg><use xlink:href="#iconSettings"></use></svg> <svg><use xlink:href="#iconSettings"></use></svg>
</span> </span>
<span class="fn__space"></span>
<span class="b3-tooltips b3-tooltips__nw block__icon block__icon--show" data-type="uninstall" aria-label="${window.siyuan.languages.uninstall}"> <span class="b3-tooltips b3-tooltips__nw block__icon block__icon--show" data-type="uninstall" aria-label="${window.siyuan.languages.uninstall}">
<svg><use xlink:href="#iconTrashcan"></use></svg> <svg><use xlink:href="#iconTrashcan"></use></svg>
</span> </span>
<span class="fn__space${isBrowser() ? " fn__none" : ""}"></span>
<span class="b3-tooltips b3-tooltips__nw block__icon block__icon--show${isBrowser() ? " fn__none" : ""}" data-type="open" aria-label="${window.siyuan.languages.showInFolder}"> <span class="b3-tooltips b3-tooltips__nw block__icon block__icon--show${isBrowser() ? " fn__none" : ""}" data-type="open" aria-label="${window.siyuan.languages.showInFolder}">
<svg><use xlink:href="#iconFolder"></use></svg> <svg><use xlink:href="#iconFolder"></use></svg>
</span> </span>
<span class="fn__space${!item.current && showSwitch ? "" : " fn__none"}"></span>
<span class="b3-tooltips b3-tooltips__nw block__icon block__icon--show${!item.current && showSwitch ? "" : " fn__none"}" data-type="switch" aria-label="${window.siyuan.languages.use}"> <span class="b3-tooltips b3-tooltips__nw block__icon block__icon--show${!item.current && showSwitch ? "" : " fn__none"}" data-type="switch" aria-label="${window.siyuan.languages.use}">
<svg><use xlink:href="#iconSelect"></use></svg> <svg><use xlink:href="#iconSelect"></use></svg>
</span> </span>
<span class="fn__space${item.outdated ? "" : " fn__none"}"></span>
<span data-type="install-t" aria-label="${window.siyuan.languages.update}" class="b3-tooltips b3-tooltips__nw block__icon block__icon--show${item.outdated ? "" : " fn__none"}"> <span data-type="install-t" aria-label="${window.siyuan.languages.update}" class="b3-tooltips b3-tooltips__nw block__icon block__icon--show${item.outdated ? "" : " fn__none"}">
<svg class="ft__primary"><use xlink:href="#iconRefresh"></use></svg> <svg class="ft__primary"><use xlink:href="#iconRefresh"></use></svg>
</span> </span>
@ -341,7 +337,6 @@ export const bazaar = {
<span class="fn__space${bazaarType === "plugins" ? "" : " fn__none"}"></span> <span class="fn__space${bazaarType === "plugins" ? "" : " fn__none"}"></span>
<input class="b3-switch fn__flex-center${bazaarType === "plugins" ? "" : " fn__none"}" ${item.enabled ? "checked" : ""} data-type="plugin-enable" type="checkbox" ${item.incompatible ? " disabled" : ""}> <input class="b3-switch fn__flex-center${bazaarType === "plugins" ? "" : " fn__none"}" ${item.enabled ? "checked" : ""} data-type="plugin-enable" type="checkbox" ${item.incompatible ? " disabled" : ""}>
</div> </div>
</div>
</div>`; </div>`;
}); });
bazaar._data.downloaded = response.data.packages; bazaar._data.downloaded = response.data.packages;
@ -489,7 +484,7 @@ export const bazaar = {
}); });
return; return;
} }
this._genMyHTML("themes", app); this._genMyHTML("plugins", app);
bazaar.element.firstElementChild.addEventListener("click", (event) => { bazaar.element.firstElementChild.addEventListener("click", (event) => {
let target = event.target as HTMLElement; let target = event.target as HTMLElement;
const dataElement = hasClosestByAttribute(target, "data-obj", null); const dataElement = hasClosestByAttribute(target, "data-obj", null);
@ -739,7 +734,9 @@ export const bazaar = {
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (target.classList.contains("b3-card")) { } else if (target.classList.contains("b3-card")) {
if (!hasClosestByClassName(event.target as HTMLElement, "b3-card__actions--right")) {
bazaar._renderReadme(target, (dataObj.bazaarType) as TBazaarType); bazaar._renderReadme(target, (dataObj.bazaarType) as TBazaarType);
}
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
break; break;