- ![]()
+ ![]()
-
-
+
- `;
this.tagsElement = this.element.querySelector(".b3-chips") as HTMLElement;
this.iconElement = this.element.querySelector(".protyle-background__icon") as HTMLElement;
- this.imgElement = this.element.firstElementChild.firstElementChild as HTMLImageElement;
+ this.imgElement = this.element.querySelector(".protyle-background__img img") as HTMLImageElement;
+ this.actionElements = this.element.querySelectorAll(".protyle-background__action .b3-button");
this.element.addEventListener("dragover", async (event) => {
event.preventDefault();
@@ -330,12 +341,20 @@ export class Background {
if (protyle.model) {
protyle.model.parent.setDocIcon(emoji);
}
+ this.iconElement.classList.remove("fn__none");
+ const rect = this.iconElement.getBoundingClientRect();
+ openEmojiPanel(protyle.block.rootID, "doc", {
+ x: rect.left,
+ y: rect.bottom,
+ h: rect.height,
+ w: rect.width
+ });
}
event.preventDefault();
event.stopPropagation();
break;
} else if (type === "tag") {
- this.openTag(protyle);
+ this.openTag(protyle, target);
event.preventDefault();
event.stopPropagation();
break;
@@ -432,20 +451,25 @@ export class Background {
tags.split(",").forEach((item, index) => {
html += `
${item}
`;
});
- this.tagsElement.innerHTML = html;
+ this.tagsElement.innerHTML = `${html}
+`
+ this.tagsElement.classList.remove("fn__none")
+ this.actionElements[0].classList.add("fn__none")
} else {
- this.tagsElement.innerHTML = "";
+ this.tagsElement.classList.add("fn__none")
+ this.actionElements[0].classList.remove("fn__none")
}
if (icon) {
this.iconElement.classList.remove("fn__none");
this.iconElement.innerHTML = unicode2Emoji(icon);
+ this.actionElements[1].classList.add("fn__none")
} else {
+ this.actionElements[1].classList.remove("fn__none")
this.iconElement.classList.add("fn__none");
}
if (img) {
- this.imgElement.classList.remove("fn__none");
// 历史数据解析：background-image: url(\"assets/沙发背景墙11-20220418171700-w6vilzt.jpeg\"); background-position: center -254px; background-size: cover; background-repeat: no-repeat; min-height: 30vh
this.imgElement.setAttribute("style", Lute.UnEscapeHTMLStr(img));
if (img.indexOf("url(") > -1) {
@@ -459,23 +483,21 @@ export class Background {
this.imgElement.setAttribute("src", this.transparentData);
this.element.querySelector('[data-type="position"]').classList.add("fn__none");
}
- } else {
- this.imgElement.classList.add("fn__none");
- }
-
- if (img) {
+ this.actionElements[2].classList.add("fn__none")
+ this.imgElement.parentElement.classList.remove("fn__none");
+ this.iconElement.style.marginTop = "";
+ /// #if MOBILE
// 移动端键盘弹起和点击加号需保持滚动高度一致
- this.element.style.minHeight = isMobile() ? "200px" : "30vh";
- } else if (icon) {
- this.element.style.minHeight = (this.tagsElement.clientHeight + 56) + "px";
- } else if (tags) {
- this.element.style.minHeight = this.tagsElement.clientHeight + "px";
+ this.imgElement.style.height = "200px"
+ /// #endif
} else {
- this.element.style.minHeight = "0";
+ this.imgElement.parentElement.classList.add("fn__none");
+ this.actionElements[2].classList.remove("fn__none")
+ this.iconElement.style.marginTop = "8px";
}
}
- private openTag(protyle: IProtyle) {
+ private openTag(protyle: IProtyle, target: HTMLElement) {
window.siyuan.menus.menu.remove();
const menu = new Menu();
menu.addItem({
@@ -549,7 +571,7 @@ export class Background {
}
});
menu.element.querySelector(".b3-menu__items").setAttribute("style", "overflow: initial");
- const rect = this.iconElement.nextElementSibling.getBoundingClientRect();
+ const rect = target.getBoundingClientRect();
menu.open({x: rect.left, y: rect.top + rect.height});
menu.element.querySelector("input").focus();
}
diff --git a/app/src/protyle/ui/initUI.ts b/app/src/protyle/ui/initUI.ts
index 67d3668a8..5509df0ae 100644
--- a/app/src/protyle/ui/initUI.ts
+++ b/app/src/protyle/ui/initUI.ts
@@ -10,11 +10,12 @@ import {lineNumberRender} from "../render/highlightRender";
export const initUI = (protyle: IProtyle) => {
protyle.contentElement = document.createElement("div");
protyle.contentElement.className = "protyle-content";
+ protyle.contentElement.innerHTML = ``
if (protyle.options.render.background) {
- protyle.contentElement.appendChild(protyle.background.element);
+ protyle.contentElement.firstElementChild.appendChild(protyle.background.element);
}
if (protyle.options.render.title) {
- protyle.contentElement.appendChild(protyle.title.element);
+ protyle.contentElement.firstElementChild.appendChild(protyle.title.element);
}
protyle.contentElement.appendChild(protyle.wysiwyg.element);
if (!protyle.options.action.includes(Constants.CB_GET_HISTORY)) {
@@ -142,11 +143,10 @@ export const setPadding = (protyle: IProtyle) => {
protyle.wysiwyg.element.style.padding = `16px ${left}px ${bottomHeight} ${right}px`;
}
if (protyle.options.render.background) {
- protyle.background.element.lastElementChild.setAttribute("style", `left:${left}px`);
- protyle.background.element.querySelector(".protyle-background__img .protyle-icons").setAttribute("style", `right:${left}px`);
+ protyle.background.element.querySelector(".protyle-background__ia").setAttribute("style", `margin-left:${left}px`);
}
if (protyle.options.render.title) {
- protyle.title.element.style.margin = `16px ${left}px 0 ${right}px`;
+ protyle.title.element.style.margin = `5px ${left}px 0 ${right}px`;
}
if (window.siyuan.config.editor.displayBookmarkIcon) {
const editorAttrElement = document.getElementById("editorAttr");