Vanessa 2022-10-06 20:39:43 +08:00
parent a314c5a947
commit c47a9f0191
4 changed files with 19 additions and 11 deletions

View file

@ -255,6 +255,7 @@
box-sizing: border-box; box-sizing: border-box;
height: 32px; height: 32px;
background: var(--b3-theme-background-light); background: var(--b3-theme-background-light);
z-index: 221;
svg { svg {
height: 18px; height: 18px;
@ -313,7 +314,7 @@
.status { .status {
position: fixed; position: fixed;
bottom: 0; bottom: -30px;
transition: var(--b3-transition); transition: var(--b3-transition);
font-size: 12px; font-size: 12px;
color: var(--b3-theme-on-surface); color: var(--b3-theme-on-surface);
@ -324,10 +325,6 @@
background-color: var(--b3-theme-background); background-color: var(--b3-theme-background);
z-index: 221; z-index: 221;
@extend .fn__ellipsis; @extend .fn__ellipsis;
&--hide {
bottom: -30px;
}
} }
@media (max-width: 620px) { @media (max-width: 620px) {

View file

@ -56,10 +56,10 @@
<div id="message" class="b3-snackbars"></div> <div id="message" class="b3-snackbars"></div>
<div id="status" class="status status--hide"></div> <div id="status" class="status status--hide"></div>
<div id="keyboardToolbar" class="fn__none"> <div id="keyboardToolbar" class="fn__none">
<svg><use xlink:href="#iconUndo"></use></svg> <svg data-type="undo"><use xlink:href="#iconUndo"></use></svg>
<svg><use xlink:href="#iconRedo"></use></svg> <svg data-type="redo"><use xlink:href="#iconRedo"></use></svg>
<svg><use xlink:href="#iconOutdent"></use></svg> <svg data-type="outdent"><use xlink:href="#iconOutdent"></use></svg>
<svg><use xlink:href="#iconIndent"></use></svg> <svg data-type="indent"><use xlink:href="#iconIndent"></use></svg>
</div> </div>
</body> </body>
</html> </html>

View file

@ -176,11 +176,16 @@ let progressStatusTimeoutId: number;
export const progressStatus = (data: IWebSocketData) => { export const progressStatus = (data: IWebSocketData) => {
if (isMobile()) { if (isMobile()) {
clearTimeout(progressStatusTimeoutId); clearTimeout(progressStatusTimeoutId);
const statusElement = document.querySelector("#status"); const statusElement = document.querySelector("#status") as HTMLElement;
statusElement.innerHTML = data.msg; statusElement.innerHTML = data.msg;
statusElement.classList.remove("status--hide"); 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(() => { progressStatusTimeoutId = window.setTimeout(() => {
statusElement.classList.add("status--hide"); statusElement.style.bottom = ""
}, 6000); }, 6000);
return; return;
} }

View file

@ -11,4 +11,10 @@ export const hideKeyboardToolbar = () => {
export const initKeyboardToolbar = () => { export const initKeyboardToolbar = () => {
const toolbarElement = document.getElementById("keyboardToolbar"); const toolbarElement = document.getElementById("keyboardToolbar");
toolbarElement.addEventListener("click", (event) => {
const target = event.target as HTMLElement
if (target.tagName === "svg") {
}
})
} }