为桌面端窗口标题栏添加应用图标 (#7032)
* 🎨 为桌面端窗口标题栏添加应用图标 * 🎨 为桌面端窗口标题栏添加应用图标 * 🎨 使用 `getElementById` 替代 `querySelector`
This commit is contained in:
parent
db523f5b7e
commit
88fd082df4
3 changed files with 22 additions and 4 deletions
|
@ -55,7 +55,7 @@ body {
|
|||
-webkit-font-smoothing: auto;
|
||||
|
||||
.toolbar {
|
||||
padding: 0 0 0 5px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.fullscreen {
|
||||
|
|
|
@ -182,6 +182,13 @@ progressLoading: 400
|
|||
padding-left: 0;
|
||||
}
|
||||
|
||||
#windowAppIcon {
|
||||
-webkit-app-region: drag;
|
||||
width: 42px;
|
||||
margin-left: 1px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#windowControls {
|
||||
top: 0;
|
||||
z-index: 502;
|
||||
|
|
|
@ -179,7 +179,8 @@ export const onGetConfig = (isStart: boolean) => {
|
|||
};
|
||||
|
||||
const initBar = () => {
|
||||
document.querySelector(".toolbar").innerHTML = `
|
||||
const toolbar = document.getElementById("toolbar");
|
||||
toolbar.innerHTML = `
|
||||
<div id="barWorkspace" class="toolbar__item">
|
||||
<span class="toolbar__text">${getWorkspaceName()}</span>
|
||||
<svg class="toolbar__svg"><use xlink:href="#iconDown"></use></svg>
|
||||
|
@ -208,7 +209,7 @@ const initBar = () => {
|
|||
<svg><use xlink:href="#icon${window.siyuan.config.appearance.modeOS ? "Mode" : (window.siyuan.config.appearance.mode === 0 ? "Light" : "Dark")}"></use></svg>
|
||||
</div>
|
||||
<div class="fn__flex" id="windowControls"></div>`;
|
||||
document.querySelector(".toolbar").addEventListener("click", (event: MouseEvent) => {
|
||||
toolbar.addEventListener("click", (event: MouseEvent) => {
|
||||
let target = event.target as HTMLElement;
|
||||
while (!target.classList.contains("toolbar")) {
|
||||
if (target.id === "barBack") {
|
||||
|
@ -463,8 +464,18 @@ const initWindow = () => {
|
|||
}
|
||||
return;
|
||||
}
|
||||
const controlsElement = document.querySelector("#windowControls");
|
||||
document.body.classList.add("body--win32");
|
||||
|
||||
//添加应用图标
|
||||
const toolbar = document.getElementById("toolbar");
|
||||
toolbar.insertAdjacentHTML("afterbegin", `<div class="toolbar__item" id="windowAppIcon">
|
||||
<svg>
|
||||
<use xlink:href="#iconSiYuan"></use>
|
||||
</svg>
|
||||
</div>`);
|
||||
|
||||
//添加窗口控件
|
||||
const controlsElement = document.getElementById("windowControls");
|
||||
controlsElement.innerHTML = `<div class="toolbar__item b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.min}" id="minWindow">
|
||||
<svg>
|
||||
<use xlink:href="#iconMin"></use>
|
||||
|
|
Loading…
Add table
Reference in a new issue