0ct0pu5/siyuan
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

🎨 https://github.com/siyuan-note/siyuan/issues/7518

Browse source
This commit is contained in:
Vanessa 2023-03-01 18:58:39 +08:00
parent c976b705af
commit 9574085b03
5 changed files with 59 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -222,7 +222,7 @@
border-radius: 4px;
}
#keyboardToolbar {
.keyboard {
position: fixed;
bottom: 0;
width: 100%;
@ -232,7 +232,23 @@
z-index: 212;
display: flex;
border-top: 1px solid var(--b3-theme-surface-lighter);
overflow: auto;
overflow: hidden;
&__dynamic {
overflow: auto;
display: flex;
&::-webkit-scrollbar {
display: none;
}
}
&__split {
width: 1px;
height: 70%;
background: var(--b3-border-color);
align-self: center;
}
button {
background: transparent;
@ -242,8 +258,7 @@
svg {
height: 16px;
width: 16px;
padding: 5px;
margin: 3px;
padding: 12px;
color: var(--b3-theme-on-surface);
}
}

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

@ -55,24 +55,7 @@
<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">
<span class="fn__flex-1"></span>
<button data-type="indent"><svg><use xlink:href="#iconIndent"></use></svg></button>
<button data-type="outdent"><svg><use xlink:href="#iconOutdent"></use></svg></button>
<button data-type="up"><svg><use xlink:href="#iconUp"></use></svg></button>
<button data-type="down"><svg><use xlink:href="#iconDown"></use></svg></button>
<button data-type="before"><svg><use xlink:href="#iconBefore"></use></svg></button>
<button data-type="after"><svg><use xlink:href="#iconAfter"></use></svg></button>
<button data-type="clear"><svg><use xlink:href="#iconClear"></use></svg></button>
<button data-type="undo"><svg><use xlink:href="#iconUndo"></use></svg></button>
<button data-type="redo"><svg><use xlink:href="#iconRedo"></use></svg></button>
<span class="fn__flex-1"></span>
<button data-type="done"><svg><use xlink:href="#iconRedo"></use></svg></button>
</div>
<div id="keyboardToolbar" class="keyboard"></div>
<div id="transactionTip" class="fn__none"></div>
</body>
</html>

14
app/src/dialog/processSystem.ts
View file

@ -193,24 +193,18 @@ export const transactionError = (data: { code: number, data: string }) => {
});
};
let progressStatusTimeoutId: number;
export const progressStatus = (data: IWebSocketData) => {
const statusElement = document.querySelector("#status") as HTMLElement;
if (!statusElement) {
return;
}
if (isMobile()) {
clearTimeout(progressStatusTimeoutId);
if (!document.querySelector("#keyboardToolbar").classList.contains("fn__none")) {
return;
}
statusElement.innerHTML = data.msg;
statusElement.classList.remove("status--hide");
if (document.querySelector("#keyboardToolbar").classList.contains("fn__none")) {
statusElement.style.bottom = "0";
} else {
statusElement.style.bottom = "30px";
}
progressStatusTimeoutId = window.setTimeout(() => {
statusElement.style.bottom = "";
}, 6000);
statusElement.style.bottom = "0";
return;
}
const msgElement = statusElement.querySelector(".status__msg");

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

@ -6,13 +6,12 @@ import {Constants} from "../../constants";
import {focusByRange, getSelectionPosition} from "../../protyle/util/selection";
export const showKeyboardToolbar = (bottom = 0) => {
if (getSelection().rangeCount > 0) {
const range = getSelection().getRangeAt(0);
if (!window.siyuan.mobile.editor ||
!window.siyuan.mobile.editor.protyle.wysiwyg.element.contains(range.startContainer)) {
return;
}
} else {
if (getSelection().rangeCount === 0) {
return;
}
const range = getSelection().getRangeAt(0);
if (!window.siyuan.mobile.editor ||
!window.siyuan.mobile.editor.protyle.wysiwyg.element.contains(range.startContainer)) {
return;
}
const toolbarElement = document.getElementById("keyboardToolbar");
@ -36,6 +35,28 @@ export const showKeyboardToolbar = (bottom = 0) => {
}, Constants.TIMEOUT_TRANSITION);
};
export const renderKeyboardToolbar = (protyle: IProtyle, range: Range) => {
const toolbarElement = document.getElementById("keyboardToolbar");
toolbarElement.innerHTML = `<div class="keyboard__dynamic">
<button data-type="indent"><svg><use xlink:href="#iconIndent"></use></svg></button>
<button data-type="outdent"><svg><use xlink:href="#iconOutdent"></use></svg></button>
<button data-type="up"><svg><use xlink:href="#iconUp"></use></svg></button>
<button data-type="down"><svg><use xlink:href="#iconDown"></use></svg></button>
<button data-type="before"><svg><use xlink:href="#iconBefore"></use></svg></button>
<button data-type="after"><svg><use xlink:href="#iconAfter"></use></svg></button>
<button data-type="clear"><svg><use xlink:href="#iconClear"></use></svg></button>
<button data-type="undo"><svg><use xlink:href="#iconUndo"></use></svg></button>
<button data-type="redo"><svg><use xlink:href="#iconRedo"></use></svg></button>
</div>
<span class="fn__flex-1"></span>
<span class="keyboard__split"></span>
<button data-type="done"><svg style="width: 36px"><use xlink:href="#iconRedo"></use></svg></button>`
}
export const hideKeyboardToolbar = () => {
const toolbarElement = document.getElementById("keyboardToolbar");
toolbarElement.classList.add("fn__none");

7
app/src/protyle/wysiwyg/index.ts
View file

@ -51,6 +51,8 @@ import {getAllModels} from "../../layout/getAll";
import {pushBack} from "../../util/backForward";
import {openAsset, openBy, openFileById} from "../../editor/util";
import {openGlobalSearch} from "../../search/util";
/// #else
import {renderKeyboardToolbar} from "../../mobile/util/showKeyboardToolbar";
/// #endif
import {BlockPanel} from "../../block/Panel";
import {isCtrl, openByMobile} from "../util/compatibility";
@ -1895,11 +1897,16 @@ export class WYSIWYG {
setTimeout(() => {
// 选中后，在选中的文字上点击需等待 range 更新
const newRange = getEditorRange(this.element);
/// #if !MOBILE
if (newRange.toString().replace(Constants.ZWSP, "") !== "") {
protyle.toolbar.render(protyle, newRange);
} else {
hideElements(["toolbar"], protyle);
}
/// #else
renderKeyboardToolbar(protyle, newRange);
/// #endif
if (!protyle.wysiwyg.element.querySelector(".protyle-wysiwyg--select")) {
countSelectWord(newRange, protyle.block.rootID);
}