Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2026-01-07 09:18:49 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

📱 https://github.com/siyuan-note/siyuan/issues/2621

Browse source
This commit is contained in:
Vanessa 2022-10-06 21:07:47 +08:00
parent 017fe0287c
commit ae960beb47
3 changed files with 58 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -254,15 +254,22 @@
width: 100%;
box-sizing: border-box;
height: 32px;
background: var(--b3-theme-background-light);
background: var(--b3-theme-background);
z-index: 221;
display: flex;
svg {
height: 18px;
width: 18px;
padding: 4px;
margin: 4px;
color: var(--b3-theme-on-surface);
button {
background: transparent;
padding: 0;
border: 0;
svg {
height: 18px;
width: 18px;
padding: 4px;
margin: 4px;
color: var(--b3-theme-on-surface);
}
}
}

12
app/src/assets/template/mobile/index.tpl
View file

@ -55,11 +55,13 @@
<div id="commonMenu" class="b3-menu fn__none"></div>
<div id="message" class="b3-snackbars"></div>
<div id="status" class="status status--hide"></div>
<div id="keyboardToolbar" class="fn__none">
<svg data-type="undo"><use xlink:href="#iconUndo"></use></svg>
<svg data-type="redo"><use xlink:href="#iconRedo"></use></svg>
<svg data-type="outdent"><use xlink:href="#iconOutdent"></use></svg>
<svg data-type="indent"><use xlink:href="#iconIndent"></use></svg>
<div id="keyboardToolbar" class="">
<span class="fn__flex-1"></span>
<button data-type="undo"><svg><use xlink:href="#iconUndo"></use></svg></button>
<button data-type="redo"><svg><use xlink:href="#iconRedo"></use></svg></button>
<button data-type="indent"><svg><use xlink:href="#iconIndent"></use></svg></button>
<button data-type="outdent"><svg><use xlink:href="#iconOutdent"></use></svg></button>
<span class="fn__flex-1"></span>
</div>
</body>
</html>

40
app/src/mobile/util/showKeyboardToolbar.ts
View file

@ -1,3 +1,7 @@
import {getEventName} from "../../protyle/util/compatibility";
import {listIndent, listOutdent} from "../../protyle/wysiwyg/list";
import {hasClosestBlock, hasClosestByMatchTag} from "../../protyle/util/hasClosest";
export const showKeyboardToolbar = (bottom = 0) => {
const toolbarElement = document.getElementById("keyboardToolbar");
toolbarElement.classList.remove("fn__none");
@ -11,10 +15,40 @@ export const hideKeyboardToolbar = () => {
export const initKeyboardToolbar = () => {
const toolbarElement = document.getElementById("keyboardToolbar");
toolbarElement.addEventListener("click", (event) => {
toolbarElement.addEventListener(getEventName(), (event) => {
const target = event.target as HTMLElement
if (target.tagName === "svg") {
const buttonElement = hasClosestByMatchTag(target, "BUTTON")
if (!buttonElement || !window.siyuan.mobileEditor) {
return;
}
const type = buttonElement.getAttribute("data-type");
const protyle = window.siyuan.mobileEditor.protyle
if (type === "undo") {
protyle.undo.undo(protyle)
return;
}
if (type === "redo") {
protyle.undo.redo(protyle)
return;
}
let range: Range
if (getSelection().rangeCount > 0) {
range = getSelection().getRangeAt(0)
}
if (!range) {
return;
}
const nodeElement = hasClosestBlock(range.startContainer);
if (!nodeElement) {
return;
}
if (!nodeElement.parentElement.classList.contains("li") || nodeElement.getAttribute("data-type") === "NodeCodeBlock") {
return;
}
if (type === "outdent") {
listOutdent(protyle, [nodeElement.parentElement], range);
} else if (type === "indent") {
listIndent(protyle, [nodeElement.parentElement], range);
}
})
}