0ct0pu5/siyuan
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

🎨 fix https://github.com/siyuan-note/siyuan/issues/10297

Browse source
This commit is contained in:
Vanessa 2024-02-04 10:56:22 +08:00
parent a655a02ce4
commit 6af623167c
4 changed files with 120 additions and 130 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -239,81 +239,100 @@
} }
} }
&-bazaar__readme { &-bazaar {
position: absolute; &__panel {
transition: transform .2s cubic-bezier(0, 0, .2, 1) 0ms, opacity .3s cubic-bezier(0, 0, .2, 1) 0ms; height: 100%;
right: -100%; overflow: auto;
top: 0;
width: 100%;
height: 100%;
background-color: var(--b3-theme-background);
display: flex;
padding: 16px 16px 16px 0;
box-sizing: border-box;
opacity: 0;
z-index: 1;
border-radius: var(--b3-border-radius-b);
&--show {
opacity: 1;
transform: translateX(-100%);
} }
.item { &__title {
&__side { padding: 16px;
text-align: center; backdrop-filter: blur(8px);
width: 260px; position: sticky;
display: flex; top: 0;
flex-direction: column; z-index: 1;
height: 100%; }
overflow: auto;
padding: 0 16px; &__content {
margin-top: -15px;
}
&__readme {
position: absolute;
transition: transform .2s cubic-bezier(0, 0, .2, 1) 0ms, opacity .3s cubic-bezier(0, 0, .2, 1) 0ms;
right: -100%;
top: 0;
width: 100%;
height: 100%;
background-color: var(--b3-theme-background);
display: flex;
padding: 16px 16px 16px 0;
box-sizing: border-box;
opacity: 0;
z-index: 1;
border-radius: var(--b3-border-radius-b);
&--show {
opacity: 1;
transform: translateX(-100%);
} }
&__readme { .item {
margin-top: 24px; &__side {
position: relative; text-align: center;
} width: 260px;
display: flex;
&__main { flex-direction: column;
flex: 1;
margin-left: 16px;
overflow: auto;
}
&__title {
font-size: 24px;
word-break: break-all;
color: var(--b3-theme-on-background);
}
&__img {
height: 96px;
width: 96px;
margin: 32px auto 32px;
border-radius: var(--b3-border-radius);
flex-shrink: 0;
}
&__preview {
width: 100%;
height: 50%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
border-radius: var(--b3-border-radius);
margin-bottom: 32px;
cursor: pointer;
left: 0;
top: 0;
transition: var(--b3-transition);
&--fullscreen {
position: absolute;
z-index: 1;
height: 100%; height: 100%;
background-size: contain; overflow: auto;
background-color: var(--b3-mask-background); padding: 0 16px;
}
&__readme {
margin-top: 24px;
position: relative;
}
&__main {
flex: 1;
margin-left: 16px;
overflow: auto;
}
&__title {
font-size: 24px;
word-break: break-all;
color: var(--b3-theme-on-background);
}
&__img {
height: 96px;
width: 96px;
margin: 32px auto 32px;
border-radius: var(--b3-border-radius);
flex-shrink: 0;
}
&__preview {
width: 100%;
height: 50%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
border-radius: var(--b3-border-radius);
margin-bottom: 32px;
cursor: pointer;
left: 0;
top: 0;
transition: var(--b3-transition);
&--fullscreen {
position: absolute;
z-index: 1;
height: 100%;
background-size: contain;
background-color: var(--b3-mask-background);
}
} }
} }
} }

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

@ -16,9 +16,9 @@
} }
&:hover { &:hover {
background-color: var(--b3-theme-surface-lighter); background-color: var(--b3-list-hover);
transform: translate(0px, -4px); transform: translate(0px, -2px);
box-shadow: var(--b3-dialog-shadow); box-shadow: var(--b3-button-shadow);
} }
&s { &s {

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

@ -82,11 +82,8 @@ export const bazaar = {
<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> </div>
<div class="fn__flex-1"> <div class="fn__flex-1">
<div class="bazaarPanel" data-type="downloaded" data-init="true"> <div class="config-bazaar__panel" data-type="downloaded" data-init="true">
<div class="fn__hr--b"></div> <div class="fn__flex config-bazaar__title">
<div class="fn__flex">
<div class="fn__space"></div>
<div class="fn__space"></div>
<button data-type="myPlugin" class="b3-button">${window.siyuan.languages.plugin}</button> <button data-type="myPlugin" class="b3-button">${window.siyuan.languages.plugin}</button>
<div class="fn__space"></div> <div class="fn__space"></div>
<button data-type="myTheme" class="b3-button b3-button--outline">${window.siyuan.languages.theme}</button> <button data-type="myTheme" class="b3-button b3-button--outline">${window.siyuan.languages.theme}</button>
@ -103,19 +100,15 @@ export const bazaar = {
</div> </div>
<div class="fn__space"></div> <div class="fn__space"></div>
<div class="fn__flex-1"></div> <div class="fn__flex-1"></div>
<input ${window.siyuan.config.bazaar.petalDisabled ? "" : " checked"} data-type="plugins-enable" type="checkbox" class="b3-switch" style="margin: 8px 16px">
<div class="counter fn__none fn__flex-center b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.total}" style="background: var(--b3-theme-surface)"></div> <div class="counter fn__none fn__flex-center b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.total}" style="background: var(--b3-theme-surface)"></div>
<div class="fn__space"></div>
<div class="fn__space"></div>
</div> </div>
<div id="configBazaarDownloaded"> <div id="configBazaarDownloaded" class="config-bazaar__content">
${loadingHTML} ${loadingHTML}
</div> </div>
</div> </div>
<div data-type="theme" class="bazaarPanel fn__none"> <div data-type="theme" class="config-bazaar__panel fn__none">
<div class="fn__hr--b"></div> <div class="fn__flex config-bazaar__title">
<div class="fn__flex">
<div class="fn__space"></div>
<div class="fn__space"></div>
<svg class="svg ft__on-surface fn__flex-center"><use xlink:href="#iconSort"></use></svg> <svg class="svg ft__on-surface fn__flex-center"><use xlink:href="#iconSort"></use></svg>
<div class="fn__space"></div> <div class="fn__space"></div>
<select class="b3-select"> <select class="b3-select">
@ -138,18 +131,13 @@ export const bazaar = {
<div class="fn__space"></div> <div class="fn__space"></div>
<div class="fn__flex-1"></div> <div class="fn__flex-1"></div>
<div class="counter fn__flex-center b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.total}" style="background: var(--b3-theme-surface)"></div> <div class="counter fn__flex-center b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.total}" style="background: var(--b3-theme-surface)"></div>
<div class="fn__space"></div>
<div class="fn__space"></div>
</div> </div>
<div id="configBazaarTheme"> <div id="configBazaarTheme" class="config-bazaar__content">
${loadingHTML} ${loadingHTML}
</div> </div>
</div> </div>
<div class="fn__none bazaarPanel" data-type="template"> <div class="fn__none config-bazaar__panel" data-type="template">
<div class="fn__hr--b"></div> <div class="fn__flex config-bazaar__title">
<div class="fn__flex">
<div class="fn__space"></div>
<div class="fn__space"></div>
<svg class="svg ft__on-surface fn__flex-center"><use xlink:href="#iconSort"></use></svg> <svg class="svg ft__on-surface fn__flex-center"><use xlink:href="#iconSort"></use></svg>
<div class="fn__space"></div> <div class="fn__space"></div>
<select class="b3-select"> <select class="b3-select">
@ -166,18 +154,13 @@ export const bazaar = {
<div class="fn__space"></div> <div class="fn__space"></div>
<div class="fn__flex-1"></div> <div class="fn__flex-1"></div>
<div class="counter fn__flex-center b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.total}" style="background: var(--b3-theme-surface)"></div> <div class="counter fn__flex-center b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.total}" style="background: var(--b3-theme-surface)"></div>
<div class="fn__space"></div>
<div class="fn__space"></div>
</div> </div>
<div id="configBazaarTemplate"> <div id="configBazaarTemplate" class="config-bazaar__content">
${loadingHTML} ${loadingHTML}
</div> </div>
</div> </div>
<div class="fn__none bazaarPanel" data-type="plugin"> <div class="fn__none config-bazaar__panel" data-type="plugin">
<div class="fn__hr--b"></div> <div class="fn__flex config-bazaar__title">
<div class="fn__flex">
<div class="fn__space"></div>
<div class="fn__space"></div>
<svg class="svg ft__on-surface fn__flex-center"><use xlink:href="#iconSort"></use></svg> <svg class="svg ft__on-surface fn__flex-center"><use xlink:href="#iconSort"></use></svg>
<div class="fn__space"></div> <div class="fn__space"></div>
<select class="b3-select"> <select class="b3-select">
@ -194,18 +177,13 @@ export const bazaar = {
<div class="fn__space"></div> <div class="fn__space"></div>
<div class="fn__flex-1"></div> <div class="fn__flex-1"></div>
<div class="counter fn__flex-center b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.total}" style="background: var(--b3-theme-surface)"></div> <div class="counter fn__flex-center b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.total}" style="background: var(--b3-theme-surface)"></div>
<div class="fn__space"></div>
<div class="fn__space"></div>
</div> </div>
<div id="configBazaarPlugin"> <div id="configBazaarPlugin" class="config-bazaar__content">
${loadingHTML} ${loadingHTML}
</div> </div>
</div> </div>
<div class="fn__none bazaarPanel" data-type="icon"> <div class="fn__none config-bazaar__panel" data-type="icon">
<div class="fn__hr--b"></div> <div class="fn__flex config-bazaar__title">
<div class="fn__flex">
<div class="fn__space"></div>
<div class="fn__space"></div>
<svg class="svg ft__on-surface fn__flex-center"><use xlink:href="#iconSort"></use></svg> <svg class="svg ft__on-surface fn__flex-center"><use xlink:href="#iconSort"></use></svg>
<div class="fn__space"></div> <div class="fn__space"></div>
<select class="b3-select"> <select class="b3-select">
@ -222,18 +200,13 @@ export const bazaar = {
<div class="fn__space"></div> <div class="fn__space"></div>
<div class="fn__flex-1"></div> <div class="fn__flex-1"></div>
<div class="counter fn__flex-center b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.total}" style="background: var(--b3-theme-surface)"></div> <div class="counter fn__flex-center b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.total}" style="background: var(--b3-theme-surface)"></div>
<div class="fn__space"></div>
<div class="fn__space"></div>
</div> </div>
<div id="configBazaarIcon"> <div id="configBazaarIcon" class="config-bazaar__content">
${loadingHTML} ${loadingHTML}
</div> </div>
</div> </div>
<div class="fn__none bazaarPanel" data-type="widget"> <div class="fn__none config-bazaar__panel" data-type="widget">
<div class="fn__hr--b"></div> <div class="fn__flex config-bazaar__title">
<div class="fn__flex">
<div class="fn__space"></div>
<div class="fn__space"></div>
<svg class="svg ft__on-surface fn__flex-center"><use xlink:href="#iconSort"></use></svg> <svg class="svg ft__on-surface fn__flex-center"><use xlink:href="#iconSort"></use></svg>
<div class="fn__space"></div> <div class="fn__space"></div>
<select class="b3-select"> <select class="b3-select">
@ -250,10 +223,8 @@ export const bazaar = {
<div class="fn__space"></div> <div class="fn__space"></div>
<div class="fn__flex-1"></div> <div class="fn__flex-1"></div>
<div class="counter fn__flex-center b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.total}" style="background: var(--b3-theme-surface)"></div> <div class="counter fn__flex-center b3-tooltips b3-tooltips__w" aria-label="${window.siyuan.languages.total}" style="background: var(--b3-theme-surface)"></div>
<div class="fn__space"></div>
<div class="fn__space"></div>
</div> </div>
<div id="configBazaarWidget"> <div id="configBazaarWidget" class="config-bazaar__content">
${loadingHTML} ${loadingHTML}
</div> </div>
</div> </div>
@ -408,11 +379,11 @@ export const bazaar = {
}); });
} }
bazaar._data.downloaded = response.data.packages; bazaar._data.downloaded = response.data.packages;
const checkElement = contentElement.parentElement.querySelector(".b3-switch")
if (bazaarType === "plugins") { if (bazaarType === "plugins") {
html = `<div class="fn__flex"> checkElement.classList.remove("fn__none");
<div class="fn__flex-1"></div> } else {
<input ${window.siyuan.config.bazaar.petalDisabled ? "" : " checked"} data-type="plugins-enable" type="checkbox" class="b3-switch" style="margin: 8px 32px"> checkElement.classList.add("fn__none");
</div>${html}`;
} }
contentElement.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>`; contentElement.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>`;
}); });
@ -897,7 +868,7 @@ export const bazaar = {
// switch tab // switch tab
bazaar.element.querySelector(".layout-tab-bar .item--focus").classList.remove("item--focus"); bazaar.element.querySelector(".layout-tab-bar .item--focus").classList.remove("item--focus");
target.classList.add("item--focus"); target.classList.add("item--focus");
bazaar.element.querySelectorAll(".bazaarPanel").forEach(item => { bazaar.element.querySelectorAll(".config-bazaar__panel").forEach(item => {
if (type === item.getAttribute("data-type")) { if (type === item.getAttribute("data-type")) {
item.classList.remove("fn__none"); item.classList.remove("fn__none");
if (!item.getAttribute("data-init")) { if (!item.getAttribute("data-init")) {
@ -948,14 +919,14 @@ export const bazaar = {
} }
}); });
bazaar.element.querySelectorAll(".bazaarPanel .b3-form__icon > .b3-text-field").forEach((inputElement: HTMLInputElement) => { bazaar.element.querySelectorAll(".config-bazaar__panel .b3-form__icon > .b3-text-field").forEach((inputElement: HTMLInputElement) => {
inputElement.addEventListener("keydown", (event) => { inputElement.addEventListener("keydown", (event) => {
if (event.isComposing) { if (event.isComposing) {
return; return;
} }
if (event.key === "Enter") { if (event.key === "Enter") {
const keyword = inputElement.value.trim(); const keyword = inputElement.value.trim();
const type = (hasClosestByClassName(inputElement, "bazaarPanel") as HTMLElement).getAttribute("data-type"); const type = (hasClosestByClassName(inputElement, "config-bazaar__panel") as HTMLElement).getAttribute("data-type");
if (type === "template") { if (type === "template") {
fetchPost("/api/bazaar/getBazaarTemplate", {keyword}, response => { fetchPost("/api/bazaar/getBazaarTemplate", {keyword}, response => {
bazaar._onBazaar(response, "templates", false); bazaar._onBazaar(response, "templates", false);

4
app/src/protyle/header/Background.ts
View file

@ -253,11 +253,11 @@ export class Background {
} else if (type === "show-random") { } else if (type === "show-random") {
let html = ""; let html = "";
bgs.forEach((item: string, index: number) => { bgs.forEach((item: string, index: number) => {
html += `<div data-index="${index}" style="height: 148px;width: 148px;${item}" class="b3-card"></div>`; html += `<div data-index="${index}" style="${item}" class="b3-card b3-card--wrap"></div>`;
}); });
const dialog = new Dialog({ const dialog = new Dialog({
title: window.siyuan.languages.random, title: window.siyuan.languages.random,
content: `<div class="b3-cards" style="margin-right: 0">${html}</div>`, content: `<div class="b3-cards">${html}</div>`,
width: isMobile() ? "92vw" : "912px", width: isMobile() ? "92vw" : "912px",
height: isMobile() ? "80vh" : "70vh", height: isMobile() ? "80vh" : "70vh",
}); });