Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2026-01-24 17:26:10 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

📱 fix https://github.com/siyuan-note/siyuan/issues/7597

Browse source
This commit is contained in:
Vanessa 2023-04-10 10:08:25 +08:00
parent 7e8aefac0e
commit 3744873734
5 changed files with 69 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -10,6 +10,7 @@
flex-direction: column;
justify-content: center;
background-color: var(--b3-theme-background);
padding: 0;
&:last-child {
margin-right: 0;

13
app/src/assets/scss/mobile.scss
View file

@ -430,6 +430,19 @@
display: block;
}
.protyle{
&-util {
.color__square {
height: 24px;
width: 24px;
}
}
&-font {
font-size: 14px;
}
}
@media (max-width: 620px) {
.protyle-wysiwyg [data-node-id].sb[data-sb-layout="col"] {
flex-direction: column;

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

@ -68,6 +68,13 @@
padding: 8px;
max-height: 80vh;
z-index: 4;
box-sizing: border-box;
&--mobile {
top: 0;
left: 0;
width: 100vw;
}
}
&-font {

34
app/src/protyle/toolbar/Font.ts
View file

@ -22,8 +22,10 @@ export class Font extends ToolbarItem {
protyle.toolbar.subElement.classList.remove("fn__none");
protyle.toolbar.subElementCloseCB = undefined;
focusByRange(protyle.toolbar.range);
/// #if !MOBILE
const position = getSelectionPosition(protyle.wysiwyg.element, protyle.toolbar.range);
setPosition(protyle.toolbar.subElement, position.left, position.top + 18, 26);
/// #endif
});
}
}
@ -49,10 +51,13 @@ const fontMenu = (protyle: IProtyle) => {
let lastColorHTML = "";
const lastFonts = window.siyuan.storage[Constants.LOCAL_FONTSTYLES];
if (lastFonts.length > 0) {
lastColorHTML = `<div style="margin-bottom: 2px" class="fn__flex">
${window.siyuan.languages.lastUsed}<span class="fn__space"></span>
<small class="ft__on-surface fn__flex-center">${updateHotkeyTip(window.siyuan.config.keymap.editor.insert.lastUsed.custom)}</small>
</div><div class="fn__flex" style="align-items: center">`;
lastColorHTML = `<div class="fn__flex">
${window.siyuan.languages.lastUsed}
<span class="fn__space"></span>
<kbd class="ft__on-surface fn__flex-center">${updateHotkeyTip(window.siyuan.config.keymap.editor.insert.lastUsed.custom)}</kbd>
</div>
<div class="fn__hr--small"></div>
<div class="fn__flex" style="align-items: center">`;
lastFonts.forEach((item: string) => {
const lastFontStatus = item.split(Constants.ZWSP);
switch (lastFontStatus[0]) {
@ -83,20 +88,29 @@ const fontMenu = (protyle: IProtyle) => {
if (textElement) {
fontSize = textElement.style.fontSize || "16px";
}
element.innerHTML = `${lastColorHTML}<div style="margin: 4px 0 2px">${window.siyuan.languages.colorFont}</div>
element.innerHTML = `${lastColorHTML}
<div class="fn__hr"></div>
<div>${window.siyuan.languages.colorFont}</div>
<div class="fn__hr--small"></div>
<div class="fn__flex">
${colorHTML}
</div>
<div style="margin: 4px 0 2px">${window.siyuan.languages["--b3-theme-background"]}</div>
<div class="fn__hr"></div>
<div>${window.siyuan.languages["--b3-theme-background"]}</div>
<div class="fn__hr--small"></div>
<div class="fn__flex">
${bgHTML}
</div>
<div style="margin: 4px 0 2px">${window.siyuan.languages.fontStyle}</div>
<div class="fn__hr"></div>
<div>${window.siyuan.languages.fontStyle}</div>
<div class="fn__hr--small"></div>
<div class="fn__flex">
<button data-type="style2" class="protyle-font__style" style="-webkit-text-stroke: 0.2px var(--b3-theme-on-background);-webkit-text-fill-color : transparent;">${window.siyuan.languages.hollow}</button>
<button data-type="style4" class="protyle-font__style" style="text-shadow: 1px 1px var(--b3-theme-surface-lighter), 2px 2px var(--b3-theme-surface-lighter), 3px 3px var(--b3-theme-surface-lighter), 4px 4px var(--b3-theme-surface-lighter)">${window.siyuan.languages.shadow}</button>
</div>
<div style="margin: 4px 0 2px">${window.siyuan.languages.fontSize}</div>
<div class="fn__hr"></div>
<div>${window.siyuan.languages.fontSize}</div>
<div class="fn__hr--small"></div>
<div class="fn__flex">
<select class="b3-select fn__block">
<option ${fontSize === "12px" ? "selected" : ""} value="12px">12px</option>
@ -114,7 +128,9 @@ const fontMenu = (protyle: IProtyle) => {
</select>
</div>
<div class="fn__hr"></div>
<button class="b3-button b3-button--cancel" data-type="clear"><svg><use xlink:href="#iconTrashcan"></use></svg>${window.siyuan.languages.clearFontStyle}</button>`;
<button class="b3-button b3-button--cancel" data-type="clear">
<svg><use xlink:href="#iconTrashcan"></use></svg>${window.siyuan.languages.clearFontStyle}
</button>`;
element.addEventListener("click", function (event: Event) {
let target = event.target as HTMLElement;
while (target && !target.isEqualNode(element)) {

33
app/src/protyle/toolbar/index.ts
View file

@ -57,7 +57,11 @@ export class Toolbar {
element.className = "protyle-toolbar fn__none";
this.element = element;
this.subElement = document.createElement("div");
/// #if MOBILE
this.subElement.className = "protyle-util fn__none protyle-util--mobile";
/// #else
this.subElement.className = "protyle-util fn__none";
/// #endif
this.toolbarHeight = 29;
options.toolbar.forEach((menuItem: IMenuItem) => {
@ -741,7 +745,6 @@ export class Toolbar {
window.siyuan.menus.menu.remove();
const id = nodeElement.getAttribute("data-node-id");
const html = nodeElement.outerHTML;
this.subElement.style.width = isMobile() ? "80vw" : Math.min(480, window.innerWidth) + "px";
this.subElement.style.padding = "";
this.subElement.innerHTML = `<div class="b3-form__space--small">
<label class="fn__flex">
@ -801,8 +804,11 @@ export class Toolbar {
nodeElement.setAttribute("updated", dayjs().format("YYYYMMDDHHmmss"));
updateTransaction(protyle, id, nodeElement.outerHTML, html);
};
/// #if !MOBILE
this.subElement.style.width = Math.min(480, window.innerWidth) + "px";
const nodeRect = refElement.getBoundingClientRect();
setPosition(this.subElement, nodeRect.left, nodeRect.bottom, nodeRect.height + 4);
/// #endif
this.element.classList.add("fn__none");
anchorElement.select();
}
@ -865,7 +871,7 @@ export class Toolbar {
pinData.styleH = textElement.style.height;
pinData.styleW = textElement.style.width;
} else {
this.subElement.style.width = isMobile() ? "100vw" : "";
this.subElement.style.width = "";
this.subElement.style.padding = "0";
}
this.subElement.innerHTML = `<div ${(isPin && this.subElement.firstElementChild.getAttribute("data-drag") === "true") ? 'data-drag="true"' : ""} class="block__popover--move"><div class="block__icons block__icons--border fn__flex">
@ -883,11 +889,10 @@ export class Toolbar {
<span class="fn__space"></span>
<button data-type="close" class="block__icon b3-tooltips b3-tooltips__nw" aria-label="${window.siyuan.languages.close}"><svg style="width: 10px"><use xlink:href="#iconClose"></use></svg></button>
</div>
<textarea spellcheck="false" class="b3-text-field b3-text-field--text fn__block" placeholder="${placeholder}" style="width:${isMobile() ? "100vw" : Math.max(480, renderElement.clientWidth * 0.7) + "px"};max-height:50vh"></textarea></div>`;
<textarea spellcheck="false" class="b3-text-field b3-text-field--text fn__block" placeholder="${placeholder}" style="${isMobile() ? "" : "width:" + Math.max(480, renderElement.clientWidth * 0.7) + "px"};max-height:50vh"></textarea></div>`;
const autoHeight = () => {
textElement.style.height = textElement.scrollHeight + "px";
if (isMobile()) {
setPosition(this.subElement, 0, 0);
return;
}
if (this.subElement.firstElementChild.getAttribute("data-drag") === "true") {
@ -1084,7 +1089,6 @@ export class Toolbar {
return;
}
});
this.subElement.classList.remove("fn__none");
this.subElementCloseCB = () => {
if (!renderElement.parentElement) {
return;
@ -1187,6 +1191,7 @@ export class Toolbar {
}
updateTransaction(protyle, id, newHTML, html);
};
this.subElement.classList.remove("fn__none");
const nodeRect = renderElement.getBoundingClientRect();
this.element.classList.add("fn__none");
if (isPin) {
@ -1323,8 +1328,10 @@ export class Toolbar {
});
this.subElement.classList.remove("fn__none");
this.subElementCloseCB = undefined;
/// #if !MOBILE
const nodeRect = languageElement.getBoundingClientRect();
setPosition(this.subElement, nodeRect.left, nodeRect.bottom, nodeRect.height);
/// #endif
this.element.classList.add("fn__none");
inputElement.select();
}
@ -1355,7 +1362,7 @@ export class Toolbar {
this.subElement.style.width = "";
this.subElement.style.padding = "";
this.subElement.innerHTML = `<div style="max-height:50vh" class="fn__flex">
<div class="fn__flex-column" style="min-width: 260px;${isMobile() ? "" : "max-width:50vw"}">
<div class="fn__flex-column" style="${isMobile() ? "width: 100%" : "min-width: 260px;max-width:50vw"}">
<div class="fn__flex" style="margin: 4px 8px 8px 8px">
<input class="b3-text-field fn__flex-1"/>
<span class="fn__space"></span>
@ -1491,11 +1498,13 @@ export class Toolbar {
event.stopPropagation();
}
});
const rangePosition = getSelectionPosition(nodeElement, range);
this.subElement.classList.remove("fn__none");
this.subElementCloseCB = undefined;
/// #if !MOBILE
const rangePosition = getSelectionPosition(nodeElement, range);
setPosition(this.subElement, rangePosition.left, rangePosition.top + 18, Constants.SIZE_TOOLBAR_HEIGHT);
(this.subElement.firstElementChild as HTMLElement).style.maxHeight = (window.innerHeight - this.subElement.getBoundingClientRect().top - 16) + "px";
(this.subElement.firstElementChild as HTMLElement).style.maxHeight = Math.min(window.innerHeight * 0.8, window.innerHeight - this.subElement.getBoundingClientRect().top) - 16 + "px";
/// #endif
this.element.classList.add("fn__none");
inputElement.select();
});
@ -1554,10 +1563,12 @@ export class Toolbar {
}
hintRenderWidget(listElement.textContent, protyle);
});
const rangePosition = getSelectionPosition(nodeElement, range);
this.subElement.classList.remove("fn__none");
this.subElementCloseCB = undefined;
/// #if !MOBILE
const rangePosition = getSelectionPosition(nodeElement, range);
setPosition(this.subElement, rangePosition.left, rangePosition.top + 18, Constants.SIZE_TOOLBAR_HEIGHT);
/// #endif
this.element.classList.add("fn__none");
inputElement.select();
});
@ -1670,10 +1681,12 @@ export class Toolbar {
hintRenderAssets(listItemElement.getAttribute("data-value"), protyle);
}
});
const rangePosition = getSelectionPosition(nodeElement, range);
this.subElement.classList.remove("fn__none");
this.subElementCloseCB = undefined;
/// #if !MOBILE
const rangePosition = getSelectionPosition(nodeElement, range);
setPosition(this.subElement, rangePosition.left, rangePosition.top + 18, Constants.SIZE_TOOLBAR_HEIGHT);
/// #endif
this.element.classList.add("fn__none");
inputElement.select();
});