Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-23 01:50:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

✨ fix https://github.com/siyuan-note/siyuan/issues/7578

Browse source
This commit is contained in:
Vanessa 2023-03-06 11:04:39 +08:00
parent fc0e5bdf01
commit b73396a5f9
6 changed files with 91 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/src/assets/scss/base.scss
View file

@ -33,7 +33,7 @@
@import "business/card";
/*
.status: 3
.status: 2
// 需小于 .block__popover
// 需小于 ctrl+p https://github.com/siyuan-note/siyuan/issues/7174

43
app/src/assets/scss/component/_menu.scss
View file

@ -14,6 +14,31 @@
display: none;
}
&--fullscreen {
top: 35px;
left: 0;
width: 100%;
border: 0;
box-shadow: none;
bottom: 0;
right: 0;
max-height: none;
.b3-menu__submenu {
top: 54px;
left: 0;
bottom: 0;
max-height: none;
right: 0;
box-shadow: none;
border: 0;
}
.b3-menu__item--show > .b3-menu__submenu--row {
width: 100%;
}
}
&--list {
overflow: auto;
max-height: 70vh;
@ -27,6 +52,20 @@
}
}
&__title {
padding: 8px;
line-height: 30px;
font-size: 18px;
color: var(--b3-theme-on-surface);
text-align: center;
svg {
height: 30px;
width: 20px;
float: left;
}
}
&__item {
padding: 0 8px;
border-radius: 4px;
@ -56,10 +95,12 @@
&--row {
display: flex;
box-sizing: border-box;
flex-wrap: wrap;
flex-direction: row;
width: 312px;
padding: 4px;
align-content: flex-start;
.b3-menu__icon {
display: none;
@ -97,7 +138,7 @@
&--readonly {
cursor: auto;
color: var(--b3-theme-on-surface);
max-width: 320px;
max-width: 374px;
white-space: normal;
word-break: break-all;
line-height: 16px;

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

@ -352,7 +352,6 @@
width: 100%;
box-sizing: border-box;
background-color: var(--b3-theme-background);
z-index: 221;
@extend .fn__ellipsis;
}

26
app/src/menus/Menu.ts
View file

@ -12,8 +12,21 @@ export class Menu {
this.wheelEvent = "onwheel" in document.createElement("div") ? "wheel" : "mousewheel";
this.element = document.getElementById("commonMenu");
this.element.addEventListener(isMobile() ? getEventName() : "mouseover", (event) => {
this.element.addEventListener(isMobile() ? "click" : "mouseover", (event) => {
const target = event.target as Element;
if (isMobile()) {
const titleElement = hasClosestByClassName(target, "b3-menu__title");
if (titleElement) {
const lastShowElements = this.element.querySelectorAll(".b3-menu__item--show");
if (lastShowElements.length > 0) {
lastShowElements[lastShowElements.length - 1].classList.remove("b3-menu__item--show");
} else {
this.remove();
}
return;
}
}
const itemElement = hasClosestByClassName(target, "b3-menu__item");
if (!itemElement) {
return;
@ -35,7 +48,9 @@ export class Menu {
return;
}
itemElement.classList.add("b3-menu__item--show");
if (!this.element.classList.contains("b3-menu--fullscreen")) {
this.showSubMenu(subMenuElement);
}
});
}
@ -102,6 +117,15 @@ export class Menu {
this.element.classList.remove("fn__none");
setPosition(this.element, options.x - (isLeft ? window.siyuan.menus.menu.element.clientWidth : 0), options.y, options.h, options.w);
}
public fullscreen () {
this.element.classList.add("b3-menu--fullscreen");
this.element.insertAdjacentHTML("afterbegin", `<div class="b3-menu__title">
<svg><use xlink:href="#iconLeft"></use></svg>
${window.siyuan.languages.back}
</div>`);
this.popup({x: 0, y: 0});
}
}
export class MenuItem {

30
app/src/mobile/util/keyboardToolbar.ts
View file

@ -2,13 +2,27 @@ import {listIndent, listOutdent} from "../../protyle/wysiwyg/list";
import {hasClosestBlock, hasClosestByClassName, hasClosestByMatchTag} from "../../protyle/util/hasClosest";
import {moveToDown, moveToUp} from "../../protyle/wysiwyg/move";
import {Constants} from "../../constants";
import {focusByRange, getSelectionPosition} from "../../protyle/util/selection";
import {focusByRange, getEditorRange, getSelectionPosition} from "../../protyle/util/selection";
import {removeBlock} from "../../protyle/wysiwyg/remove";
import {hintSlash} from "../../protyle/hint/extend";
let renderKeyboardToolbarTimeout: number;
let showKeyboardToolbarUtil = false;
const renderSlashMenu = (protyle: IProtyle, toolbarElement: Element) => {
protyle.hint.splitChar = "/";
protyle.hint.lastIndex = -1;
const utilElement = toolbarElement.querySelector(".keyboard__util") as HTMLElement
utilElement.innerHTML = protyle.hint.getHTMLByData(hintSlash("", protyle), false)
protyle.hint.bindUploadEvent(protyle, utilElement);
utilElement.addEventListener("click", (event) => {
const btnElement = hasClosestByClassName(event.target as HTMLElement, "b3-list-item");
if (btnElement) {
protyle.hint.fill(decodeURIComponent(btnElement.getAttribute("data-value")), protyle);
}
})
}
const renderKeyboardToolbarUtil = () => {
const toolbarElement = document.getElementById("keyboardToolbar");
const keyboardHeight = (parseInt(toolbarElement.getAttribute("data-keyboardheight")) + 42) + "px"
@ -233,17 +247,7 @@ export const initKeyboardToolbar = () => {
removeBlock(protyle, nodeElement, range);
return;
} else if (type === "add") {
protyle.hint.splitChar = "/";
protyle.hint.lastIndex = -1;
const utilElement = toolbarElement.querySelector(".keyboard__util") as HTMLElement
utilElement.innerHTML = protyle.hint.getHTMLByData(hintSlash("", protyle), false)
protyle.hint.bindUploadEvent(protyle, utilElement);
utilElement.addEventListener("click", (event) => {
const btnElement = hasClosestByClassName(event.target as HTMLElement, "b3-list-item");
if (btnElement) {
protyle.hint.fill(decodeURIComponent(btnElement.getAttribute("data-value")), protyle);
}
})
renderSlashMenu(protyle, toolbarElement);
renderKeyboardToolbarUtil();
return;
} else if (type === "more") {
@ -251,7 +255,7 @@ export const initKeyboardToolbar = () => {
x: 0,
y: 0
});
focusByRange(range);
hideKeyboardToolbar();
return;
} else if (type === "block") {
protyle.gutter.renderMenu(protyle, nodeElement);

5
app/src/protyle/breadcrumb/index.ts
View file

@ -155,7 +155,6 @@ export class Breadcrumb {
}
fetchPost("/api/block/getTreeStat", {id: id || protyle.block.id}, (response) => {
window.siyuan.menus.menu.remove();
if (!protyle.contentElement.classList.contains("fn__none") && !protyle.disabled) {
let uploadHTML = "";
uploadHTML = '<input class="b3-form__upload" type="file" multiple="multiple"';
@ -378,7 +377,11 @@ export class Breadcrumb {
<div class="fn__flex">${window.siyuan.languages.image}<span class="fn__space fn__flex-1"></span>${response.data.imageCount}</div>
<div class="fn__flex">${window.siyuan.languages.ref}<span class="fn__space fn__flex-1"></span>${response.data.refCount}</div>`,
}).element);
if (isMobile()) {
window.siyuan.menus.menu.fullscreen();
} else {
window.siyuan.menus.menu.popup(position);
}
});
}