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

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

Browse source
This commit is contained in:
Vanessa 2024-04-26 10:22:01 +08:00
parent 37b888f24d
commit 94e2e77d49
9 changed files with 92 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/appearance/langs/en_US.json
View file

@ -666,7 +666,7 @@
"recentEmoji": "Common Emoticons",
"andSubFile": "and its <b>x</b> subdocs",
"changeIcon": "Change icon",
"randomIcon": "Random icon",
"addIcon": "Add icon",
"includeSubFile": "\nInclude x subdocs",
"untitled": "Untitled",
"lockScreen": "Lock Screen",
@ -715,7 +715,7 @@
"attr": "Attribute",
"updatePath": "Change dir",
"default": "Default",
"titleBg": "Random cover",
"titleBg": "Add cover",
"random": "Random",
"cloudBackup": "Cloud backup",
"total": "Total",

4
app/appearance/langs/es_ES.json
View file

@ -666,7 +666,7 @@
"recentEmoji": "Emoticonos comunes",
"andSubFile": "y sus <b>x</b> documentos secundarios",
"changeIcon": "Cambiar el icono",
"randomIcon": "Icono aleatorio",
"addIcon": "Agregar icono",
"includeSubFile": "\nIncluir x documentos secundarios",
"untitled": "Sin título",
"lockScreen": "Pantalla de bloqueo",
@ -715,7 +715,7 @@
"attr": "Atributo",
"updatePath": "Cambiar directorio",
"default": "Por defecto",
"titleBg": "Portada aleatoria",
"titleBg": "Añadir portada",
"random": "Aleatorio",
"cloudBackup": "Copia de seguridad en la nube",
"total": "Total",

4
app/appearance/langs/fr_FR.json
View file

@ -666,7 +666,7 @@
"recentEmoji": "Emoticônes courantes",
"andSubFile": "et son <b>x</b> sous-documents",
"changeIcon": "Changer l'icône",
"randomIcon": "Icône aléatoire",
"addIcon": "Ajouter une icône",
"includeSubFile": "\nInclure x sous-documents",
"untitled": "Sans titre",
"lockScreen": "Verrouiller Écran",
@ -715,7 +715,7 @@
"attr": "Attribut",
"updatePath": "modifier le répertoire",
"default": "Default",
"titleBg": "Couverture aléatoire",
"titleBg": "Ajouter une couverture",
"random": "Random",
"cloudBackup": "Sauvegarde en Cloud",
"total": "Total",

4
app/appearance/langs/zh_CHT.json
View file

@ -666,7 +666,7 @@
"recentEmoji": "常用表情",
"andSubFile": "及其 <b>x</b> 個子文檔",
"changeIcon": "修改圖示",
"randomIcon": "隨機圖標",
"addIcon": "新增圖示",
"includeSubFile": "\n包含 x 個子文檔",
"untitled": "未命名",
"lockScreen": "鎖定畫面",
@ -715,7 +715,7 @@
"attr": "屬性",
"updatePath": "修改目錄",
"default": "預設",
"titleBg": "隨機封面圖",
"titleBg": "新增封面圖",
"random": "隨機",
"cloudBackup": "雲端備份",
"total": "總計",

4
app/appearance/langs/zh_CN.json
View file

@ -666,7 +666,7 @@
"recentEmoji": "常用表情",
"andSubFile": "及其 <b>x</b> 个子文档",
"changeIcon": "修改图标",
"randomIcon": "随机图标",
"addIcon": "添加图标",
"includeSubFile": "\n包含 x 个子文档",
"untitled": "未命名",
"lockScreen": "锁屏",
@ -715,7 +715,7 @@
"attr": "属性",
"updatePath": "修改目录",
"default": "默认",
"titleBg": "随机题头图",
"titleBg": "添加题头图",
"random": "随机",
"cloudBackup": "云端备份",
"total": "总计",

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

@ -121,7 +121,7 @@
margin-left: 8px;
&:disabled {
opacity: .38;
opacity: .38;
}
}
@ -253,19 +253,22 @@
}
}
.protyle-top:hover {
.protyle-background--enable .protyle-background__action {
opacity: .86;
}
}
.protyle-background {
position: relative;
padding-bottom: 40px;
&--enable {
.protyle-background__img:hover .protyle-icons,
&:hover > .protyle-background__iconw > .protyle-icons,
.protyle-background__icon:hover {
opacity: .86;
}
}
&--mobileshow {
.protyle-background__iconw > .protyle-icons,
.protyle-background__img .protyle-icons {
@ -273,6 +276,15 @@
}
}
&__action {
transition: opacity 150ms linear;
opacity: 0;
.b3-button {
margin-top: 8px;
}
}
&__icon {
height: 80px;
width: 80px;
@ -282,7 +294,10 @@
line-height: 80px;
text-align: center;
font-family: var(--b3-font-family-emoji);
margin-right: 16px;
z-index: 1;
position: relative;
margin-top: -40px;
margin-bottom: 8px;
img, svg {
height: 80px;
@ -297,7 +312,6 @@
}
&__img {
position: absolute;
width: 100%;
img {
@ -309,32 +323,19 @@
}
.protyle-icons {
bottom: 8px;
top: auto;
margin-left: -44px;
left: auto;
right: 32px; // 仅 iPone，设置 index 也无效 https://github.com/siyuan-note/siyuan/issues/6926
position: absolute;
top: 8px;
right: 8px;
&:nth-child(3) {
right: auto;
left: 48%;
opacity: .86;
top: 50%;
bottom: auto;
margin-top: -11px;
left: 50%;
opacity: 0.86;
top: 15vh;
margin-top: -12px;
margin-left: -70px;
}
}
}
&__iconw {
bottom: 0;
display: flex;
position: absolute;
.protyle-icons {
position: initial;
}
}
}
.protyle-title {

3
app/src/layout/Tab.ts
View file

@ -182,7 +182,8 @@ export class Tab {
this.headElement.querySelector(".item__text").classList.add("fn__none");
}
} else {
this.headElement.querySelector(".item__icon").remove();
// 添加图标后刷新界面，没有 icon
this.headElement.querySelector(".item__icon")?.remove();
this.headElement.querySelector(".item__text").classList.remove("fn__none");
}
}

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

@ -99,6 +99,7 @@ export class Background {
public ial: IObject;
private imgElement: HTMLImageElement;
private iconElement: HTMLElement;
private actionElements: NodeListOf<Element>;
private tagsElement: HTMLElement;
private transparentData = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
@ -106,7 +107,7 @@ export class Background {
this.element = document.createElement("div");
this.element.className = "protyle-background";
this.element.innerHTML = `<div class="protyle-background__img">
<img class="fn__none">
<img>
<div class="protyle-icons">
<span class="protyle-icon protyle-icon--first b3-tooltips b3-tooltips__sw" style="position: relative" aria-label="${window.siyuan.languages.upload}"><input type="file" style="position: absolute;width: 22px;height: 100%;top: 0;left: 0;opacity: .001;overflow: hidden;cursor: pointer;"><svg><use xlink:href="#iconUpload"></use></svg></span>
<span class="protyle-icon b3-tooltips b3-tooltips__sw" data-type="link" aria-label="${window.siyuan.languages.link}"><svg><use xlink:href="#iconLink"></use></svg></span>
@ -121,18 +122,28 @@ export class Background {
<span class="protyle-icon protyle-icon--last" data-type="confirm">${window.siyuan.languages.confirm}</span>
</div>
</div>
<div class="b3-chips"></div>
<div class="protyle-background__iconw">
<div class="protyle-background__ia">
<div class="protyle-background__icon" data-menu="true" data-type="open-emoji"></div>
<div class="protyle-icons fn__flex-center">
<span class="protyle-icon protyle-icon--first b3-tooltips b3-tooltips__s" data-menu="true" data-type="tag" aria-label="${window.siyuan.languages.addTag}"><svg><use xlink:href="#iconTags"></use></svg></span>
<span class="protyle-icon b3-tooltips b3-tooltips__s" data-type="icon" aria-label="${window.siyuan.languages.randomIcon}"><svg><use xlink:href="#iconEmoji"></use></svg></span>
<span class="protyle-icon protyle-icon--last b3-tooltips b3-tooltips__s" data-type="random" aria-label="${window.siyuan.languages.titleBg}"><svg><use xlink:href="#iconImage"></use></svg></span>
<div class="b3-chips 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>
${window.siyuan.languages.addTag}
</button>
<button class="b3-button b3-button--cancel" data-type="icon">
<svg><use xlink:href="#iconEmoji"></use></svg>
${window.siyuan.languages.addIcon}
</button>
<button class="b3-button b3-button--cancel" data-type="random">
<svg><use xlink:href="#iconImage"></use></svg>
${window.siyuan.languages.titleBg}
</button>
</div>
</div>`;
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 += `<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>`;
});
this.tagsElement.innerHTML = html;
this.tagsElement.innerHTML = `${html}<span class="fn__space"></span>
<button class="b3-button b3-button--cancel fn__flex-center" data-menu="true" data-type="tag"><svg style="margin-right: 0;"><use xlink:href="#iconAdd"></use></svg></button>`
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();
}

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

@ -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 = `<div class="protyle-top"></div>`
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");