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

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

Browse source
This commit is contained in:
Vanessa 2024-11-17 10:34:26 +08:00
parent 93b687a407
commit c0a104df1b
5 changed files with 28 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6,6 +6,14 @@
.b3-chip {
margin: 4px;
}
&__doctag {
padding: 0;
.b3-chip {
margin: 0 8px 8px 0;
}
}
}
.b3-chip {

7
app/src/assets/scss/protyle/_protyle.scss
View file

@ -284,10 +284,6 @@
&__action {
transition: opacity 150ms linear;
opacity: 0;
.b3-button {
margin-top: 8px;
}
}
&__icon {
@ -301,7 +297,7 @@
font-family: var(--b3-font-family-emoji);
z-index: 1;
position: relative;
margin-top: -40px;
margin-top: -48px;
margin-bottom: 8px;
img, svg {
@ -318,6 +314,7 @@
&__img {
width: 100%;
margin-bottom: 8px;
img {
object-fit: cover;

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

@ -16,6 +16,7 @@ import {Constants} from "../../constants";
import {assetMenu} from "../../menus/protyle";
import {previewImage} from "../preview/image";
import {Menu} from "../../plugin/Menu";
import {escapeHtml} from "../../util/escape";
const bgs = [
"background:radial-gradient(black 3px, transparent 4px),radial-gradient(black 3px, transparent 4px),linear-gradient(#fff 4px, transparent 0),linear-gradient(45deg, transparent 74px, transparent 75px, #a4a4a4 75px, #a4a4a4 76px, transparent 77px, transparent 109px),linear-gradient(-45deg, transparent 75px, transparent 76px, #a4a4a4 76px, #a4a4a4 77px, transparent 78px, transparent 109px),#fff;background-size: 109px 109px, 109px 109px,100% 6px, 109px 109px, 109px 109px;background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;",
@ -124,7 +125,7 @@ export class Background {
</div>
<div class="protyle-background__ia">
<div class="protyle-background__icon" data-menu="true" data-type="open-emoji"></div>
<div class="b3-chips fn__none"></div>
<div class="b3-chips b3-chips__doctag fn__none"></div>
<div class="protyle-background__action">
<button class="b3-button b3-button--cancel" data-menu="true" data-type="tag">
<svg><use xlink:href="#iconTags"></use></svg>
@ -443,11 +444,11 @@ export class Background {
let html = "";
const colors = ["secondary", "primary", "info", "success", "warning", "error", "pink"];
tags.split(",").forEach((item, index) => {
html += `<div class="b3-chip b3-chip--middle b3-chip--pointer b3-chip--${colors[index % 7]}" data-type="open-search">${item}<svg class="b3-chip__close" data-type="remove-tag"><use xlink:href="#iconCloseRound"></use></svg></div>`;
html += `<div class="b3-chip b3-chip--middle b3-chip--pointer b3-chip--${colors[index % 7]}" data-type="open-search">${escapeHtml(item)}<svg class="b3-chip__close" data-type="remove-tag"><use xlink:href="#iconCloseRound"></use></svg></div>`;
});
this.tagsElement.innerHTML = `${html}<span class="fn__space"></span>
this.tagsElement.innerHTML = `${html}
<div class="protyle-background__action fn__flex-center">
<button class="b3-button b3-button--cancel" style="margin-top: 0" data-menu="true" data-type="tag"><svg><use xlink:href="#iconAdd"></use></svg>${window.siyuan.languages.addTag}</button>
<button class="b3-button b3-button--cancel" style="margin-bottom: 8px" data-menu="true" data-type="tag"><svg><use xlink:href="#iconAdd"></use></svg>${window.siyuan.languages.addTag}</button>
</div>`;
this.tagsElement.classList.remove("fn__none");
this.actionElements[0].classList.add("fn__none");
@ -491,6 +492,12 @@ export class Background {
this.actionElements[2].classList.remove("fn__none");
this.iconElement.style.marginTop = "8px";
}
if (img || icon) {
this.iconElement.parentElement.style.marginTop = ""
} else {
this.iconElement.parentElement.style.marginTop = "8px"
}
}
private openTag(protyle: IProtyle, target: HTMLElement) {
@ -513,7 +520,7 @@ export class Background {
}, (response) => {
let html = "";
response.data.tags.forEach((item: string, index: number) => {
html += `<div class="b3-list-item b3-list-item--narrow${index === 0 ? " b3-list-item--focus" : ""}">${item}</div>`;
html += `<div class="b3-list-item b3-list-item--narrow${index === 0 ? " b3-list-item--focus" : ""}">${escapeHtml(item)}</div>`;
});
listElement.innerHTML = html;
});
@ -544,13 +551,13 @@ export class Background {
let searchHTML = "";
let hasKey = false;
response.data.tags.forEach((item: string) => {
searchHTML += `<div class="b3-list-item b3-list-item--narrow">${item}</div>`;
searchHTML += `<div class="b3-list-item b3-list-item--narrow">${escapeHtml(item)}</div>`;
if (item === `<mark>${response.data.k}</mark>`) {
hasKey = true;
}
});
if (!hasKey && response.data.k) {
searchHTML = `<div class="b3-list-item b3-list-item--narrow"><mark>${response.data.k}</mark></div>` + searchHTML;
searchHTML = `<div class="b3-list-item b3-list-item--narrow"><mark>${escapeHtml(response.data.k)}</mark></div>` + searchHTML;
}
listElement.innerHTML = searchHTML;
listElement.firstElementChild.classList.add("b3-list-item--focus");

5
app/src/protyle/ui/initUI.ts
View file

@ -178,11 +178,8 @@ export const setPadding = (protyle: IProtyle) => {
protyle.background.element.querySelector(".protyle-background__ia").setAttribute("style", `margin-left:${left}px;margin-right:${right}px`);
}
if (protyle.options.render.title) {
/// #if MOBILE
// pc 端 文档名 attr 过长和添加标签等按钮重合
protyle.title.element.style.margin = `16px ${right}px 0 ${left}px`;
/// #else
protyle.title.element.style.margin = `5px ${right}px 0 ${left}px`;
/// #endif
}
if (window.siyuan.config.editor.displayBookmarkIcon) {
const editorAttrElement = document.getElementById("editorAttr");

6
app/src/search/util.ts
View file

@ -1392,13 +1392,13 @@ export const inputEvent = (element: Element, config: Config.IUILayoutTabSearchCo
export const getAttr = (block: IBlock) => {
let attrHTML = "";
if (block.name) {
attrHTML += `<span class="b3-list-item__meta fn__flex" style="max-width: 30%"><svg class="b3-list-item__hinticon"><use xlink:href="#iconN"></use></svg><span class="b3-list-item__hinttext">${block.name}</span></span>`;
attrHTML += `<span class="b3-list-item__meta fn__flex" style="max-width: 30%"><svg class="b3-list-item__hinticon"><use xlink:href="#iconN"></use></svg><span class="b3-list-item__hinttext">${escapeHtml(block.name)}</span></span>`;
}
if (block.alias) {
attrHTML += `<span class="b3-list-item__meta fn__flex" style="max-width: 30%"><svg class="b3-list-item__hinticon"><use xlink:href="#iconA"></use></svg><span class="b3-list-item__hinttext">${block.alias}</span></span>`;
attrHTML += `<span class="b3-list-item__meta fn__flex" style="max-width: 30%"><svg class="b3-list-item__hinticon"><use xlink:href="#iconA"></use></svg><span class="b3-list-item__hinttext">${escapeHtml(block.alias)}</span></span>`;
}
if (block.memo) {
attrHTML += `<span class="b3-list-item__meta fn__flex" style="max-width: 30%"><svg class="b3-list-item__hinticon"><use xlink:href="#iconM"></use></svg><span class="b3-list-item__hinttext">${block.memo}</span></span>`;
attrHTML += `<span class="b3-list-item__meta fn__flex" style="max-width: 30%"><svg class="b3-list-item__hinticon"><use xlink:href="#iconM"></use></svg><span class="b3-list-item__hinttext">${escapeHtml(block.memo)}</span></span>`;
}
return attrHTML;
};