Vanessa 2023-03-02 15:18:37 +08:00
parent 35081c1e9b
commit e2a18447bd
11 changed files with 88 additions and 24 deletions

View file

@ -245,9 +245,10 @@
&__split {
width: 1px;
height: 70%;
height: 28px;
background: var(--b3-border-color);
align-self: center;
flex-shrink: 0;
}
button {
@ -258,8 +259,15 @@
svg {
height: 16px;
width: 16px;
float: left;
padding: 12px;
color: var(--b3-theme-on-surface);
&.keyboard__svg--big {
width: 30px;
padding: 4px;
height: 32px;
}
}
}
}

View file

@ -15,7 +15,7 @@ import {promiseTransactions} from "../protyle/wysiwyg/transaction";
import {bootSync} from "../dialog/processSystem";
import {initMessage} from "../dialog/message";
import {goBack} from "./util/MobileBackFoward";
import {hideKeyboardToolbar, showKeyboardToolbar} from "./util/showKeyboardToolbar";
import {hideKeyboardToolbar, showKeyboardToolbar} from "./util/keyboardToolbar";
import {getLocalStorage} from "../protyle/util/compatibility";
import {openMobileFileById} from "./editor";
import {getSearch} from "../util/functions";

View file

@ -17,7 +17,7 @@ import {hasTopClosestByTag} from "../../protyle/util/hasClosest";
import {MobileBacklinks} from "./MobileBacklinks";
import {MobileBookmarks} from "./MobileBookmarks";
import {MobileTags} from "./MobileTags";
import {hideKeyboard, hideKeyboardToolbar, initKeyboardToolbar} from "./showKeyboardToolbar";
import {hideKeyboard, hideKeyboardToolbar, initKeyboardToolbar} from "./keyboardToolbar";
import {getSearch} from "../../util/functions";
import {syncGuide} from "../../sync/syncGuide";

View file

@ -37,24 +37,45 @@ export const showKeyboardToolbar = (bottom = 0) => {
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>
const inlineHTML = `<button data-type="indent"><svg><use xlink:href="#iconBack"></use></svg></button>
<button data-type="indent"><svg><use xlink:href="#iconRef"></use></svg></button>
<button data-type="block-ref"<use xlink:href="#iconRef"></use></svg></button>
<button data-type="a"><svg><use xlink:href="#iconLink"></use></svg></button>
<button data-type="text"><svg><use xlink:href="#iconFont"></use></svg></button>
<button data-type="strong"><svg><use xlink:href="#iconBold"></use></svg></button>
<button data-type="em"><svg><use xlink:href="#iconItalic"></use></svg></button>
<button data-type="u"><svg><use xlink:href="#iconUnderline"></use></svg></button>
<button data-type="s"><svg><use xlink:href="#iconStrike"></use></svg></button>
<button data-type="mark"><svg><use xlink:href="#iconMark"></use></svg></button>
<button data-type="sup"><svg><use xlink:href="#iconSup"></use></svg></button>
<button data-type="sub"><svg><use xlink:href="#iconSub"></use></svg></button>
<button data-type="clear"><svg><use xlink:href="#iconClear"></use></svg></button>
<button data-type="code"><svg><use xlink:href="#iconInlineCode"></use></svg></button>
<button data-type="kbd"<use xlink:href="#iconKeymap"></use></svg></button>
<button data-type="tag"><svg><use xlink:href="#iconTags"></use></svg></button>
<button data-type="inline-math"><svg><use xlink:href="#iconMath"></use></svg></button>
<button data-type="inline-memo"><svg><use xlink:href="#iconM"></use></svg></button>
<button data-type="indent"><svg><use xlink:href="#iconClose"></use></svg></button>`
const html = `<button data-type="add"><svg><use xlink:href="#iconAdd"></use></svg></button>
<button data-type="indent"><svg class="keyboard__svg--big"><use xlink:href="#iconBIU"></use></svg></button>
<button data-type="indent"><svg><use xlink:href="#iconTrashcan"></use></svg></button>
<span class="keyboard__split"></span>
<button data-type="done"><svg style="width: 36px"><use xlink:href="#iconRedo"></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>
<button data-type="redo"><svg><use xlink:href="#iconFont"></use></svg></button>
<button data-type="redo"><svg><use xlink:href="#iconMore"></use></svg></button>
<span class="keyboard__split"></span>
<button data-type="undo"><svg><use xlink:href="#iconIndent"></use></svg></button>
<button data-type="redo"><svg><use xlink:href="#iconOutdent"></use></svg></button>
<button data-type="redo"><svg><use xlink:href="#iconUp"></use></svg></button>
<button data-type="redo"><svg><use xlink:href="#iconDown"></use></svg></button>
`
toolbarElement.innerHTML = `<div class="fn__flex-1">
<div class="keyboard__dynamic">${html}</div>
<div class="fn__none keyboard__dynamic">${inlineHTML}</div>
</div>
<span class="keyboard__split"></span>
<button data-type="done"><svg style="width: 36px"><use xlink:href="#iconKeyboardHide"></use></svg></button>`
}
export const hideKeyboardToolbar = () => {

View file

@ -16,7 +16,7 @@ import {Dialog} from "../../dialog";
import {syncGuide} from "../../sync/syncGuide";
import {openCard} from "../../card/openCard";
import {pathPosix} from "../../util/pathName";
import {hideKeyboard, hideKeyboardToolbar} from "./showKeyboardToolbar";
import {hideKeyboard, hideKeyboardToolbar} from "./keyboardToolbar";
const showAccountInfo = (modelElement: HTMLElement, modelMainElement: Element) => {
closePanel();

View file

@ -39,7 +39,7 @@ export const hintSlash = (key: string, protyle: IProtyle) => {
}, {
filter: ["属性试图", "shuxingshitu", "sxst", "attribute view"],
value: '<div data-type="NodeAttributeView" data-av-type="table"></div>',
html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"></svg><span class="b3-list-item__text">TODO</span></div>`,
html: `<div class="b3-list-item__first"><svg class="b3-list-item__graphic"><use xlink:href="#iconDatabase"></use></svg><span class="b3-list-item__text">TODO</span></div>`,
}, {
filter: ["文档", "子文档", "wendang", "wd", "ziwendang", "zwd", "xjwd"],
value: Constants.ZWSP + 4,

View file

@ -25,7 +25,6 @@ import {Background} from "./header/Background";
import {disabledProtyle, enableProtyle, onGet} from "./util/onGet";
import {reloadProtyle} from "./util/reload";
import {renderBacklink} from "./wysiwyg/renderBacklink";
import {showKeyboardToolbar} from "../mobile/util/showKeyboardToolbar";
export class Protyle {

View file

@ -52,7 +52,7 @@ import {pushBack} from "../../util/backForward";
import {openAsset, openBy, openFileById} from "../../editor/util";
import {openGlobalSearch} from "../../search/util";
/// #else
import {renderKeyboardToolbar} from "../../mobile/util/showKeyboardToolbar";
import {renderKeyboardToolbar} from "../../mobile/util/keyboardToolbar";
/// #endif
import {BlockPanel} from "../../block/Panel";
import {isCtrl, openByMobile} from "../util/compatibility";