Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-18 15:40: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 20:42:07 +08:00
parent 109462a22f
commit c941703e18
6 changed files with 55 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

1
app/src/assets/scss/business/_config.scss
View file

@ -205,6 +205,7 @@
padding: 16px; padding: 16px;
box-sizing: border-box; box-sizing: border-box;
opacity: 0; opacity: 0;
z-index: 1;
&--show { &--show {
opacity: 1; opacity: 1;

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

@ -1,15 +1,14 @@
.b3-card { .b3-card {
box-shadow: var(--b3-point-shadow); box-shadow: var(--b3-point-shadow);
background-color: var(--b3-theme-surface); background-color: var(--b3-theme-surface);
width: calc(25% - 18px);
min-width: 200px;
border-radius: 4px; border-radius: 4px;
margin: 8px; margin: 16px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
transition: var(--b3-transition); transition: var(--b3-transition);
cursor: pointer; cursor: pointer;
border: 1px solid var(--b3-theme-surface-lighter); border: 1px solid var(--b3-theme-surface-lighter);
display: flex;
&:hover { &:hover {
background-color: var(--b3-theme-surface-lighter); background-color: var(--b3-theme-surface-lighter);
@ -29,8 +28,8 @@
} }
&__img { &__img {
height: 116px; width: 96px;
width: 100%; height: 96px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;

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

@ -11,6 +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";
export const bazaar = { export const bazaar = {
element: undefined as Element, element: undefined as Element,
@ -172,15 +173,8 @@ export const bazaar = {
repoHash: item.repoHash, repoHash: item.repoHash,
downloaded: false, downloaded: false,
}; };
let fundingUrl = "";
if (item.fundingUrl) {
fundingUrl = item.fundingUrl.openCollective || item.fundingUrl.patreon || item.fundingUrl.github
if (!fundingUrl && item.fundingUrl.custom && item.fundingUrl.custom.length > 0) {
fundingUrl = item.fundingUrl.custom[0];
}
}
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${hide ? " fn__none" : ""}${item.current ? " b3-card--current" : ""}">
<div class="b3-card__img"><img src="${item.previewURLThumb}"/></div> <div class="b3-card__img"><img src="${item.iconURL}" onerror="this.src='/stage/images/icon.png'"/></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>
<span class="fn__space"></span> <span class="fn__space"></span>
@ -190,7 +184,7 @@ export const bazaar = {
<span class="fn__flex-center">${item.downloads}</span> <span class="fn__flex-center">${item.downloads}</span>
</div> </div>
<div class="b3-card__actions"> <div class="b3-card__actions">
${fundingUrl ? `<a target="_blank" href="${fundingUrl}" class="b3-tooltips b3-tooltips__ne block__icon block__icon--show" aria-label="${fundingUrl}"><svg><use xlink:href="#iconHeart"></use></svg></a>` : ""} ${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="fn__flex-1"></div> <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}"> <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> <svg><use xlink:href="#iconTrashcan"></use></svg>
@ -234,32 +228,40 @@ export const bazaar = {
downloaded: true downloaded: true
}; };
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.previewURLThumb}"/></div> <div class="b3-card__img"><img src="${item.iconURL}" onerror="this.src='/stage/images/icon.png'"/></div>
<div class="b3-card__info"> <div class="fn__flex-1 fn__flex-column">
${item.name} <div class="b3-card__info fn__flex-1">
</div> ${item.name}
<div class="b3-card__actions"> <div class="fn__hr"></div>
<div class="fn__flex-1"></div> <div class="ft__smaller ft__on-surface">${item.preferredDesc || ""}</div>
<span class="b3-tooltips b3-tooltips__nw block__icon block__icon--show" data-type="uninstall" aria-label="${window.siyuan.languages.uninstall}"> </div>
<svg><use xlink:href="#iconTrashcan"></use></svg> <div class="b3-card__actions">
</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${isBrowser() ? " fn__none" : ""}"></span> <div class="fn__flex-1"></div>
<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" data-type="uninstall" aria-label="${window.siyuan.languages.uninstall}">
<svg><use xlink:href="#iconFolder"></use></svg> <svg><use xlink:href="#iconTrashcan"></use></svg>
</span> </span>
<span class="fn__space${!item.current && showSwitch ? "" : " fn__none"}"></span> <span class="fn__space${isBrowser() ? " 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${isBrowser() ? " fn__none" : ""}" data-type="open" aria-label="${window.siyuan.languages.showInFolder}">
<svg><use xlink:href="#iconSelect"></use></svg> <svg><use xlink:href="#iconFolder"></use></svg>
</span> </span>
<span class="fn__space${item.outdated ? "" : " fn__none"}"></span> <span class="fn__space${!item.current && showSwitch ? "" : " 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 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 class="ft__primary"><use xlink:href="#iconRefresh"></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"}">
<svg class="ft__primary"><use xlink:href="#iconRefresh"></use></svg>
</span>
<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">
</div>
</div> </div>
</div>`; </div>`;
}); });
bazaar._data.downloaded = response.data.packages; bazaar._data.downloaded = response.data.packages;
bazaar.element.querySelector("#configBazaarDownloaded").innerHTML = html ? `<div class="b3-cards">${html}</div>` : `<div class="fn__hr"></div><ul class="b3-list b3-list--background"><li class="b3-list--empty">${window.siyuan.languages.emptyContent}</li></ul>`; bazaar.element.querySelector("#configBazaarDownloaded").innerHTML = html ? html : `<div class="fn__hr"></div><ul class="b3-list b3-list--background"><li class="b3-list--empty">${window.siyuan.languages.emptyContent}</li></ul>`;
}); });
}, },
_data: { _data: {
@ -558,6 +560,19 @@ export const bazaar = {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "plugin-enable") {
const itemElement = hasClosestByClassName(target, "b3-card")
if (itemElement) {
const dataObj = JSON.parse(itemElement.getAttribute("data-obj"));
fetchPost("/api/petal/setPetalEnabled", {
packageName: dataObj.name,
enabled: (target as HTMLInputElement).checked
}, () => {
exportLayout(true);
});
}
event.stopPropagation();
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, (JSON.parse(target.getAttribute("data-obj")).bazaarType) as TBazaarType);
event.preventDefault(); event.preventDefault();

5
app/src/types/index.d.ts vendored
View file

@ -680,6 +680,9 @@ declare interface IMenu {
} }
declare interface IBazaarItem { declare interface IBazaarItem {
enabled: boolean
preferredDesc: string
iconURL: string
readme: string readme: string
stars: string stars: string
author: string author: string
@ -701,5 +704,5 @@ declare interface IBazaarItem {
hInstallSize: string hInstallSize: string
hInstallDate: string hInstallDate: string
hUpdated: string hUpdated: string
fundingUrl: IObject preferredFunding: string
} }

BIN
app/stage/images/icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
app/stage/images/preview.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 12 KiB