diff --git a/app/src/assets/scss/business/_color.scss b/app/src/assets/scss/business/_color.scss index ef4f45222..7aab028ff 100644 --- a/app/src/assets/scss/business/_color.scss +++ b/app/src/assets/scss/business/_color.scss @@ -10,6 +10,7 @@ flex-direction: column; justify-content: center; background-color: var(--b3-theme-background); + padding: 0; &:last-child { margin-right: 0; diff --git a/app/src/assets/scss/mobile.scss b/app/src/assets/scss/mobile.scss index 0d30750ec..24257207c 100644 --- a/app/src/assets/scss/mobile.scss +++ b/app/src/assets/scss/mobile.scss @@ -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; diff --git a/app/src/assets/scss/protyle/_toolbar.scss b/app/src/assets/scss/protyle/_toolbar.scss index 30a34e82f..75efff08c 100644 --- a/app/src/assets/scss/protyle/_toolbar.scss +++ b/app/src/assets/scss/protyle/_toolbar.scss @@ -68,6 +68,13 @@ padding: 8px; max-height: 80vh; z-index: 4; + box-sizing: border-box; + + &--mobile { + top: 0; + left: 0; + width: 100vw; + } } &-font { diff --git a/app/src/protyle/toolbar/Font.ts b/app/src/protyle/toolbar/Font.ts index 94b38530f..db225fefe 100644 --- a/app/src/protyle/toolbar/Font.ts +++ b/app/src/protyle/toolbar/Font.ts @@ -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 = `
- ${window.siyuan.languages.lastUsed} - ${updateHotkeyTip(window.siyuan.config.keymap.editor.insert.lastUsed.custom)} -
`; + lastColorHTML = `
+ ${window.siyuan.languages.lastUsed} + + ${updateHotkeyTip(window.siyuan.config.keymap.editor.insert.lastUsed.custom)} +
+
+
`; 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}
${window.siyuan.languages.colorFont}
+ element.innerHTML = `${lastColorHTML} +
+
${window.siyuan.languages.colorFont}
+
${colorHTML}
-
${window.siyuan.languages["--b3-theme-background"]}
+
+
${window.siyuan.languages["--b3-theme-background"]}
+
${bgHTML}
-
${window.siyuan.languages.fontStyle}
+
+
${window.siyuan.languages.fontStyle}
+
-
${window.siyuan.languages.fontSize}
+
+
${window.siyuan.languages.fontSize}
+
-`; +`; element.addEventListener("click", function (event: Event) { let target = event.target as HTMLElement; while (target && !target.isEqualNode(element)) { diff --git a/app/src/protyle/toolbar/index.ts b/app/src/protyle/toolbar/index.ts index 545f6d144..1376f0361 100644 --- a/app/src/protyle/toolbar/index.ts +++ b/app/src/protyle/toolbar/index.ts @@ -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 = `
`; 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 = `
-
+
@@ -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(); });