diff --git a/app/src/assets/scss/base.scss b/app/src/assets/scss/base.scss index 9e5e5af4f..d79fbc725 100644 --- a/app/src/assets/scss/base.scss +++ b/app/src/assets/scss/base.scss @@ -33,7 +33,7 @@ @import "business/card"; /* -.status: 3 +.status: 2 // 需小于 .block__popover // 需小于 ctrl+p https://github.com/siyuan-note/siyuan/issues/7174 diff --git a/app/src/assets/scss/component/_menu.scss b/app/src/assets/scss/component/_menu.scss index 10bb24fd6..01c263b8c 100644 --- a/app/src/assets/scss/component/_menu.scss +++ b/app/src/assets/scss/component/_menu.scss @@ -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; diff --git a/app/src/assets/scss/mobile.scss b/app/src/assets/scss/mobile.scss index e33f1bd92..89f432ca3 100644 --- a/app/src/assets/scss/mobile.scss +++ b/app/src/assets/scss/mobile.scss @@ -352,7 +352,6 @@ width: 100%; box-sizing: border-box; background-color: var(--b3-theme-background); - z-index: 221; @extend .fn__ellipsis; } diff --git a/app/src/menus/Menu.ts b/app/src/menus/Menu.ts index 79cccfd64..14a9a09cb 100644 --- a/app/src/menus/Menu.ts +++ b/app/src/menus/Menu.ts @@ -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"); - this.showSubMenu(subMenuElement); + 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", `
`); + this.popup({x: 0, y: 0}); + } } export class MenuItem { diff --git a/app/src/mobile/util/keyboardToolbar.ts b/app/src/mobile/util/keyboardToolbar.ts index f22a2b840..a639989e4 100644 --- a/app/src/mobile/util/keyboardToolbar.ts +++ b/app/src/mobile/util/keyboardToolbar.ts @@ -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); diff --git a/app/src/protyle/breadcrumb/index.ts b/app/src/protyle/breadcrumb/index.ts index ffdd391ed..475ab754e 100644 --- a/app/src/protyle/breadcrumb/index.ts +++ b/app/src/protyle/breadcrumb/index.ts @@ -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 = '${window.siyuan.languages.image}${response.data.imageCount}