diff --git a/app/src/assets/scss/main/_main.scss b/app/src/assets/scss/main/_main.scss index d6533e489..9f63b94e6 100644 --- a/app/src/assets/scss/main/_main.scss +++ b/app/src/assets/scss/main/_main.scss @@ -222,26 +222,6 @@ html { display: flex; color: var(--b3-theme-on-surface); font-size: 12px; - - & > div { - height: 4px; - border-radius: var(--b3-border-radius); - overflow: hidden; - background-color: #fff; - width: 64px; - align-self: center; - margin: 0 8px 0 4px; - cursor: pointer; - flex-shrink: 0; - - & > div { - background-color: var(--b3-theme-primary-light); - height: 4px; - background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); - animation: stripMove 450ms linear infinite; - background-size: 50px 50px; - } - } } .fn__space:last-child { diff --git a/app/src/assets/scss/util/_function.scss b/app/src/assets/scss/util/_function.scss index 2e98067e9..be152ba2d 100644 --- a/app/src/assets/scss/util/_function.scss +++ b/app/src/assets/scss/util/_function.scss @@ -163,6 +163,26 @@ &__list { padding-left: 2em; } + + &__progress { + height: 4px; + border-radius: var(--b3-border-radius); + overflow: hidden; + background-color: #fff; + width: 64px; + align-self: center; + margin: 0 8px 0 4px; + cursor: pointer; + flex-shrink: 0; + + & > div { + background-color: var(--b3-theme-primary-light); + height: 4px; + background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); + animation: stripMove 450ms linear infinite; + background-size: 50px 50px; + } + } } .ft { diff --git a/app/src/config/appearance.ts b/app/src/config/appearance.ts index 81f6a7de7..1913cc888 100644 --- a/app/src/config/appearance.ts +++ b/app/src/config/appearance.ts @@ -11,7 +11,7 @@ import {loadAssets} from "../util/assets"; import {resetFloatDockSize} from "../layout/dock/util"; import {confirmDialog} from "../dialog/confirmDialog"; import {useShell} from "../util/pathName"; -import {Dialog} from "../dialog"; +import {setStatusBar} from "./util/setStatusBar"; export const appearance = { element: undefined as Element, @@ -181,7 +181,7 @@ export const appearance = { `; }, - _send: (statusBar?: Config.IAppearanceStatusBar) => { + _send: () => { const themeLight = (appearance.element.querySelector("#themeLight") as HTMLSelectElement).value; const themeDark = (appearance.element.querySelector("#themeDark") as HTMLSelectElement).value; const modeElementValue = parseInt((appearance.element.querySelector("#mode") as HTMLSelectElement).value); @@ -201,69 +201,17 @@ export const appearance = { closeButtonBehavior: (appearance.element.querySelector("#closeButtonBehavior") as HTMLInputElement).checked ? 1 : 0, hideStatusBar: (appearance.element.querySelector("#hideStatusBar") as HTMLInputElement).checked, statusBar: { - msgTaskDatabaseIndexCommitDisabled: statusBar ? statusBar.msgTaskDatabaseIndexCommitDisabled : window.siyuan.config.appearance.statusBar.msgTaskDatabaseIndexCommitDisabled, - msgTaskHistoryDatabaseIndexCommitDisabled: statusBar ? statusBar.msgTaskHistoryDatabaseIndexCommitDisabled : window.siyuan.config.appearance.statusBar.msgTaskHistoryDatabaseIndexCommitDisabled, - msgTaskAssetDatabaseIndexCommitDisabled: statusBar ? statusBar.msgTaskAssetDatabaseIndexCommitDisabled : window.siyuan.config.appearance.statusBar.msgTaskAssetDatabaseIndexCommitDisabled, - msgTaskHistoryGenerateFileDisabled: statusBar ? statusBar.msgTaskHistoryGenerateFileDisabled : window.siyuan.config.appearance.statusBar.msgTaskHistoryGenerateFileDisabled, + msgTaskDatabaseIndexCommitDisabled: window.siyuan.config.appearance.statusBar.msgTaskDatabaseIndexCommitDisabled, + msgTaskHistoryDatabaseIndexCommitDisabled: window.siyuan.config.appearance.statusBar.msgTaskHistoryDatabaseIndexCommitDisabled, + msgTaskAssetDatabaseIndexCommitDisabled: window.siyuan.config.appearance.statusBar.msgTaskAssetDatabaseIndexCommitDisabled, + msgTaskHistoryGenerateFileDisabled: window.siyuan.config.appearance.statusBar.msgTaskHistoryGenerateFileDisabled, } }, () => { resetFloatDockSize(); }); }, bindEvent: () => { - appearance.element.querySelector("#statusBarSetting").addEventListener("click", () => { - const dialog = new Dialog({ - width: "360px", - height: "80vh", - title: "\uD83D\uDD07 " + window.siyuan.languages.appearance18, - content: `
-
- ${window.siyuan.languages.statusBarMsgPushTip} -
-
- - - - -
-
` - }); - - dialog.element.querySelectorAll(".b3-switch").forEach((item) => { - item.addEventListener("change", () => { - appearance._send({ - msgTaskDatabaseIndexCommitDisabled: !(dialog.element.querySelector("#msgTaskDatabaseIndexCommitDisabled") as HTMLInputElement).checked, - msgTaskAssetDatabaseIndexCommitDisabled: !(dialog.element.querySelector("#msgTaskAssetDatabaseIndexCommitDisabled") as HTMLInputElement).checked, - msgTaskHistoryDatabaseIndexCommitDisabled: !(dialog.element.querySelector("#msgTaskHistoryDatabaseIndexCommitDisabled") as HTMLInputElement).checked, - msgTaskHistoryGenerateFileDisabled: !(dialog.element.querySelector("#msgTaskHistoryGenerateFileDisabled") as HTMLInputElement).checked, - }); - }); - }); - }); + setStatusBar(appearance.element.querySelector("#statusBarSetting")); appearance.element.querySelector("#codeSnippet").addEventListener("click", () => { openSnippets(); }); diff --git a/app/src/config/util/setStatusBar.ts b/app/src/config/util/setStatusBar.ts new file mode 100644 index 000000000..93b558dba --- /dev/null +++ b/app/src/config/util/setStatusBar.ts @@ -0,0 +1,61 @@ +import {Dialog} from "../../dialog"; +import {isMobile, objEquals} from "../../util/functions"; +import {fetchPost} from "../../util/fetch"; + +export const setStatusBar = (element: HTMLElement) => { + element.addEventListener("click", () => { + const dialog = new Dialog({ + height: "80vh", + width: isMobile() ? "92vw" : "360px", + title: "\uD83D\uDD07 " + window.siyuan.languages.appearance18, + content: `
+
+ ${window.siyuan.languages.statusBarMsgPushTip} +
+
+ + + + +
+
`, destroyCallback() { + const statusBar = { + msgTaskDatabaseIndexCommitDisabled: !(dialog.element.querySelector("#msgTaskDatabaseIndexCommitDisabled") as HTMLInputElement).checked, + msgTaskAssetDatabaseIndexCommitDisabled: !(dialog.element.querySelector("#msgTaskAssetDatabaseIndexCommitDisabled") as HTMLInputElement).checked, + msgTaskHistoryDatabaseIndexCommitDisabled: !(dialog.element.querySelector("#msgTaskHistoryDatabaseIndexCommitDisabled") as HTMLInputElement).checked, + msgTaskHistoryGenerateFileDisabled: !(dialog.element.querySelector("#msgTaskHistoryGenerateFileDisabled") as HTMLInputElement).checked, + }; + if (objEquals(statusBar, window.siyuan.config.appearance.statusBar)) { + return; + } + fetchPost("/api/setting/setAppearance", Object.assign({}, window.siyuan.config.appearance, { + statusBar + })); + } + }); + }); +}; diff --git a/app/src/dialog/processSystem.ts b/app/src/dialog/processSystem.ts index 9a5d4ff71..4b48ce90b 100644 --- a/app/src/dialog/processSystem.ts +++ b/app/src/dialog/processSystem.ts @@ -417,30 +417,13 @@ export const refreshFileTree = (cb?: () => void) => { let statusTimeout: number; export const progressStatus = (data: IWebSocketData) => { - const statusElement = document.querySelector("#status") as HTMLElement; - if (!statusElement) { - return; - } - - if (isMobile()) { - if (!document.querySelector("#keyboardToolbar").classList.contains("fn__none")) { - return; - } + const msgElement = document.querySelector("#status .status__msg"); + if (msgElement) { clearTimeout(statusTimeout); - statusElement.innerHTML = data.msg; - statusElement.style.bottom = "0"; + msgElement.innerHTML = data.msg; statusTimeout = window.setTimeout(() => { - statusElement.style.bottom = ""; + msgElement.innerHTML = ""; }, 12000); - } else { - const msgElement = statusElement.querySelector(".status__msg"); - if (msgElement) { - clearTimeout(statusTimeout); - msgElement.innerHTML = data.msg; - statusTimeout = window.setTimeout(() => { - msgElement.innerHTML = ""; - }, 12000); - } } }; @@ -489,7 +472,7 @@ export const progressBackgroundTask = (tasks: { action: string }[]) => { } else { backgroundTaskElement.classList.remove("fn__none"); backgroundTaskElement.setAttribute("data-tasks", JSON.stringify(tasks)); - backgroundTaskElement.innerHTML = tasks[0].action + "
"; + backgroundTaskElement.innerHTML = tasks[0].action + '
'; } }; diff --git a/app/src/mobile/settings/about.ts b/app/src/mobile/settings/about.ts index 608cc0e1d..727a56b98 100644 --- a/app/src/mobile/settings/about.ts +++ b/app/src/mobile/settings/about.ts @@ -75,7 +75,7 @@ export const initAbout = () => {
diff --git a/app/src/mobile/settings/appearance.ts b/app/src/mobile/settings/appearance.ts index 482eee9f4..5b28adbdb 100644 --- a/app/src/mobile/settings/appearance.ts +++ b/app/src/mobile/settings/appearance.ts @@ -1,11 +1,12 @@ import {fetchPost} from "../../util/fetch"; import {genLangOptions, genOptions} from "../../util/genOptions"; import {openModel} from "../menu/model"; +import {setStatusBar} from "../../config/util/setStatusBar"; export const initAppearance = () => { openModel({ title: window.siyuan.languages.appearance, - icon:"iconTheme", + icon: "iconTheme", html: `
${window.siyuan.languages.appearance4}
@@ -42,9 +43,25 @@ export const initAppearance = () => {
${window.siyuan.languages.language1}
+
+
+ +
+ +
${window.siyuan.languages.appearance18}
`, bindEvent(modelMainElement: HTMLElement) { - modelMainElement.querySelectorAll("select").forEach(item => { + setStatusBar(modelMainElement.querySelector('[data-action="hideStatusBarSetting"]')); + modelMainElement.querySelectorAll("select, .b3-switch").forEach(item => { item.addEventListener("change", () => { const modeElementValue = parseInt((modelMainElement.querySelector("#mode") as HTMLSelectElement).value); fetchPost("/api/setting/setAppearance", Object.assign({}, window.siyuan.config.appearance, { @@ -54,6 +71,7 @@ export const initAppearance = () => { themeDark: (modelMainElement.querySelector("#themeDark") as HTMLSelectElement).value, themeLight: (modelMainElement.querySelector("#themeLight") as HTMLSelectElement).value, lang: (modelMainElement.querySelector("#lang") as HTMLSelectElement).value, + hideStatusBar: (modelMainElement.querySelector("#hideStatusBar") as HTMLInputElement).checked, })); }); }); diff --git a/app/src/mobile/util/onMessage.ts b/app/src/mobile/util/onMessage.ts index c023be70d..02f6dd3f3 100644 --- a/app/src/mobile/util/onMessage.ts +++ b/app/src/mobile/util/onMessage.ts @@ -2,7 +2,6 @@ import {openMobileFileById} from "../editor"; import { processSync, progressLoading, - progressStatus, reloadSync, setDefRefCount, setRefDynamicText, transactionError } from "../../dialog/processSystem"; @@ -13,9 +12,24 @@ import {setLocalShorthandCount} from "../../util/noRelyPCFunction"; import {updateControlAlt} from "../../protyle/util/hotKey"; import {renderSnippet} from "../../config/util/snippets"; +let statusTimeout: number; +const statusElement = document.querySelector("#status") as HTMLElement; + export const onMessage = (app: App, data: IWebSocketData) => { if (data) { switch (data.cmd) { + case "backgroundtask": + if (!document.querySelector("#keyboardToolbar").classList.contains("fn__none")) { + return; + } + if (data.data.tasks.length === 0) { + statusElement.style.bottom = ""; + } else { + clearTimeout(statusTimeout); + statusElement.innerHTML = `
${data.data.tasks[0].action}
`; + statusElement.style.bottom = "0"; + } + break; case "setAppearance": window.location.reload(); break; @@ -70,7 +84,15 @@ export const onMessage = (app: App, data: IWebSocketData) => { transactionError(); break; case"statusbar": - progressStatus(data); + if (!document.querySelector("#keyboardToolbar").classList.contains("fn__none")) { + return; + } + clearTimeout(statusTimeout); + statusElement.innerHTML = data.msg; + statusElement.style.bottom = "0"; + statusTimeout = window.setTimeout(() => { + statusElement.style.bottom = ""; + }, 12000); break; } }