Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-23 01:50:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

🎨 https://github.com/siyuan-note/siyuan/issues/8041

Browse source
This commit is contained in:
Vanessa 2023-05-05 21:39:56 +08:00
parent a6ca9bdd09
commit 0b16f3d948
2 changed files with 51 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

8
app/src/assets/scss/component/_card.scss
View file

@ -10,6 +10,12 @@
border: 1px solid var(--b3-theme-surface-lighter); border: 1px solid var(--b3-theme-surface-lighter);
display: flex; display: flex;
&--wrap {
width: calc(50% - 18px);
margin: 16px 0 0 16px;
min-width: 342px;
}
&:hover { &:hover {
background-color: var(--b3-theme-surface-lighter); background-color: var(--b3-theme-surface-lighter);
transform: translate(0px, -4px); transform: translate(0px, -4px);
@ -19,7 +25,7 @@
&s { &s {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin: 8px; margin: 0 16px 16px 0;
} }
&--current .b3-card__info, &--current .b3-card__info,

80
app/src/config/bazaar.ts
View file

@ -11,7 +11,7 @@ import * as path from "path";
/// #endif /// #endif
import {isBrowser} from "../util/functions"; import {isBrowser} from "../util/functions";
import {setStorageVal} from "../protyle/util/compatibility"; import {setStorageVal} from "../protyle/util/compatibility";
import {hasClosestByClassName} from "../protyle/util/hasClosest"; import {hasClosestByAttribute, hasClosestByClassName} from "../protyle/util/hasClosest";
export const bazaar = { export const bazaar = {
element: undefined as Element, element: undefined as Element,
@ -173,30 +173,39 @@ export const bazaar = {
repoHash: item.repoHash, repoHash: item.repoHash,
downloaded: false, downloaded: false,
}; };
return `<div data-obj='${JSON.stringify(dataObj)}' class="b3-card${hide ? " fn__none" : ""}${item.current ? " b3-card--current" : ""}"> return `<div data-obj='${JSON.stringify(dataObj)}' class="b3-card b3-card--wrap${hide ? " fn__none" : ""}${item.current ? " b3-card--current" : ""}">
<div class="b3-card__img"><img src="${item.iconURL}" onerror="this.src='/stage/images/icon.png'"/></div> <div class="b3-card__img">
<div class="b3-card__info fn__flex"> <img src="${item.iconURL}" onerror="this.src='/stage/images/icon.png'"/>
<span class="fn__flex-center fn__ellipsis">${item.name}</span>
<span class="fn__space"></span>
<span class="fn__flex-1"></span>
<svg class="svg fn__flex-center"><use xlink:href="#iconDownload"></use></svg>
<span class="fn__space"></span>
<span class="fn__flex-center">${item.downloads}</span>
</div> </div>
<div class="b3-card__actions"> <div class="fn__flex-1 fn__flex-column">
${item.preferredFunding ? `<a target="_blank" href="${item.preferredFunding}" class="b3-tooltips b3-tooltips__ne block__icon block__icon--show" aria-label="${item.preferredFunding}"><svg><use xlink:href="#iconHeart"></use></svg></a>` : ""} <div class="b3-card__info fn__flex-1">
<div class="fn__flex-1"></div> ${item.name}
<span class="b3-tooltips b3-tooltips__nw block__icon block__icon--show${item.installed ? "" : " fn__none"}" data-type="uninstall" aria-label="${window.siyuan.languages.uninstall}"> <div class="fn__hr"></div>
<svg><use xlink:href="#iconTrashcan"></use></svg> <div class="ft__smaller ft__on-surface">
</span> ${item.preferredDesc || ""}
<div class="fn__space${!item.current && item.installed && showSwitch ? "" : " fn__none"}"></div> </div>
<span class="b3-tooltips b3-tooltips__nw block__icon block__icon--show${!item.current && item.installed && showSwitch ? "" : " fn__none"}" data-type="switch" aria-label="${window.siyuan.languages.use}"> </div>
<svg><use xlink:href="#iconSelect"></use></svg> <div class="b3-card__actions">
</span> <span class="block__icon block__icon--show ft__primary">
<div class="fn__space${item.outdated ? "" : " fn__none"}"></div> <svg><use xlink:href="#iconDownload"></use></svg>
<span data-type="install-t" class="b3-tooltips b3-tooltips__nw block__icon block__icon--show${item.outdated ? "" : " fn__none"}" aria-label="${window.siyuan.languages.update}"> <span class="fn__space"></span>
<svg class="ft__primary"><use xlink:href="#iconRefresh"></use></svg> ${item.downloads}
</span> </span>
<span class="fn__space"></span>
${item.preferredFunding ? `<a target="_blank" href="${item.preferredFunding}" class="b3-tooltips b3-tooltips__ne block__icon block__icon--show" aria-label="${item.preferredFunding}"><svg><use xlink:href="#iconHeart"></use></svg></a><span class="fn__space"></span>` : ""}
<div class="fn__flex-1"></div>
<span class="b3-tooltips b3-tooltips__nw block__icon block__icon--show${item.installed ? "" : " fn__none"}" data-type="uninstall" aria-label="${window.siyuan.languages.uninstall}">
<svg><use xlink:href="#iconTrashcan"></use></svg>
</span>
<div class="fn__space${!item.current && item.installed && showSwitch ? "" : " fn__none"}"></div>
<span class="b3-tooltips b3-tooltips__nw block__icon block__icon--show${!item.current && item.installed && showSwitch ? "" : " fn__none"}" data-type="switch" aria-label="${window.siyuan.languages.use}">
<svg><use xlink:href="#iconSelect"></use></svg>
</span>
<div class="fn__space${item.outdated ? "" : " fn__none"}"></div>
<span data-type="install-t" class="b3-tooltips b3-tooltips__nw block__icon block__icon--show${item.outdated ? "" : " fn__none"}" aria-label="${window.siyuan.languages.update}">
<svg class="ft__primary"><use xlink:href="#iconRefresh"></use></svg>
</span>
</div>
</div> </div>
</div>`; </div>`;
}, },
@ -379,11 +388,15 @@ export const bazaar = {
this._genMyHTML("themes"); this._genMyHTML("themes");
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);
let dataObj:IObject;
if (dataElement) {
dataObj = JSON.parse(dataElement.getAttribute("data-obj"));
}
while (target && !target.isEqualNode(bazaar.element)) { while (target && !target.isEqualNode(bazaar.element)) {
const type = target.getAttribute("data-type"); const type = target.getAttribute("data-type");
if (type === "open") { if (type === "open" && dataObj) {
/// #if !BROWSER /// #if !BROWSER
const dataObj = JSON.parse(target.parentElement.parentElement.getAttribute("data-obj"));
const dirName = dataObj.bazaarType; const dirName = dataObj.bazaarType;
if (dirName === "icons" || dirName === "themes") { if (dirName === "icons" || dirName === "themes") {
shell.openPath(path.join(window.siyuan.config.system.confDir, "appearance", dirName, dataObj.name)); shell.openPath(path.join(window.siyuan.config.system.confDir, "appearance", dirName, dataObj.name));
@ -414,7 +427,6 @@ export const bazaar = {
break; break;
} else if (type === "install") { } else if (type === "install") {
if (!target.classList.contains("b3-button--progress")) { if (!target.classList.contains("b3-button--progress")) {
const dataObj = JSON.parse(target.parentElement.parentElement.getAttribute("data-obj"));
const bazaarType = dataObj.bazaarType as TBazaarType; const bazaarType = dataObj.bazaarType as TBazaarType;
let url = "/api/bazaar/installBazaarTemplate"; let url = "/api/bazaar/installBazaarTemplate";
if (bazaarType === "themes") { if (bazaarType === "themes") {
@ -446,8 +458,7 @@ export const bazaar = {
} else if (type === "install-t") { } else if (type === "install-t") {
if (!target.classList.contains("b3-button--progress")) { if (!target.classList.contains("b3-button--progress")) {
confirmDialog(window.siyuan.languages.update, window.siyuan.languages.exportTplTip, () => { confirmDialog(window.siyuan.languages.update, window.siyuan.languages.exportTplTip, () => {
const dataObj = JSON.parse(target.parentElement.parentElement.getAttribute("data-obj")); const bazaarType = dataObj.bazaarType as TBazaarType;
const bazaarType: TBazaarType = dataObj.bazaarType;
let url = "/api/bazaar/installBazaarTemplate"; let url = "/api/bazaar/installBazaarTemplate";
if (bazaarType === "themes") { if (bazaarType === "themes") {
url = "/api/bazaar/installBazaarTheme"; url = "/api/bazaar/installBazaarTheme";
@ -490,8 +501,7 @@ export const bazaar = {
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "uninstall") { } else if (type === "uninstall") {
const dataObj = JSON.parse(target.parentElement.parentElement.getAttribute("data-obj")); const bazaarType = dataObj.bazaarType as TBazaarType;
const bazaarType: TBazaarType = dataObj.bazaarType;
let url = "/api/bazaar/uninstallBazaarTemplate"; let url = "/api/bazaar/uninstallBazaarTemplate";
if (bazaarType === "themes") { if (bazaarType === "themes") {
url = "/api/bazaar/uninstallBazaarTheme"; url = "/api/bazaar/uninstallBazaarTheme";
@ -520,8 +530,7 @@ export const bazaar = {
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "switch") { } else if (type === "switch") {
const dataObj = JSON.parse(target.parentElement.parentElement.getAttribute("data-obj")); const bazaarType = dataObj.bazaarType as TBazaarType;
const bazaarType: TBazaarType = dataObj.bazaarType;
const packageName = dataObj.name; const packageName = dataObj.name;
const mode = dataObj.themeMode === "dark" ? 1 : 0; const mode = dataObj.themeMode === "dark" ? 1 : 0;
if (bazaarType === "icons") { if (bazaarType === "icons") {
@ -561,9 +570,8 @@ export const bazaar = {
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "plugin-enable") { } else if (type === "plugin-enable") {
const itemElement = hasClosestByClassName(target, "b3-card") const itemElement = hasClosestByClassName(target, "b3-card");
if (itemElement) { if (itemElement) {
const dataObj = JSON.parse(itemElement.getAttribute("data-obj"));
fetchPost("/api/petal/setPetalEnabled", { fetchPost("/api/petal/setPetalEnabled", {
packageName: dataObj.name, packageName: dataObj.name,
enabled: (target as HTMLInputElement).checked enabled: (target as HTMLInputElement).checked
@ -574,7 +582,7 @@ export const bazaar = {
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (target.classList.contains("b3-card")) { } else if (target.classList.contains("b3-card")) {
bazaar._renderReadme(target, (JSON.parse(target.getAttribute("data-obj")).bazaarType) as TBazaarType); bazaar._renderReadme(target, (dataObj.bazaarType) as TBazaarType);
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
break; break;