mirror of
https://github.com/siyuan-note/siyuan.git
synced 2025-12-22 09:30:14 +01:00
为桌面端窗口标题栏添加应用图标 (#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;
|
-webkit-font-smoothing: auto;
|
||||||
|
|
||||||
.toolbar {
|
.toolbar {
|
||||||
padding: 0 0 0 5px;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fullscreen {
|
.fullscreen {
|
||||||
|
|
|
||||||
|
|
@ -182,6 +182,13 @@ progressLoading: 400
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#windowAppIcon {
|
||||||
|
-webkit-app-region: drag;
|
||||||
|
width: 42px;
|
||||||
|
margin-left: 1px;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
#windowControls {
|
#windowControls {
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: 502;
|
z-index: 502;
|
||||||
|
|
|
||||||
|
|
@ -179,7 +179,8 @@ export const onGetConfig = (isStart: boolean) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const initBar = () => {
|
const initBar = () => {
|
||||||
document.querySelector(".toolbar").innerHTML = `
|
const toolbar = document.getElementById("toolbar");
|
||||||
|
toolbar.innerHTML = `
|
||||||
<div id="barWorkspace" class="toolbar__item">
|
<div id="barWorkspace" class="toolbar__item">
|
||||||
<span class="toolbar__text">${getWorkspaceName()}</span>
|
<span class="toolbar__text">${getWorkspaceName()}</span>
|
||||||
<svg class="toolbar__svg"><use xlink:href="#iconDown"></use></svg>
|
<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>
|
<svg><use xlink:href="#icon${window.siyuan.config.appearance.modeOS ? "Mode" : (window.siyuan.config.appearance.mode === 0 ? "Light" : "Dark")}"></use></svg>
|
||||||
</div>
|
</div>
|
||||||
<div class="fn__flex" id="windowControls"></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;
|
let target = event.target as HTMLElement;
|
||||||
while (!target.classList.contains("toolbar")) {
|
while (!target.classList.contains("toolbar")) {
|
||||||
if (target.id === "barBack") {
|
if (target.id === "barBack") {
|
||||||
|
|
@ -463,8 +464,18 @@ const initWindow = () => {
|
||||||
}
|
}
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const controlsElement = document.querySelector("#windowControls");
|
|
||||||
document.body.classList.add("body--win32");
|
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">
|
controlsElement.innerHTML = `<div class="toolbar__item b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.min}" id="minWindow">
|
||||||
<svg>
|
<svg>
|
||||||
<use xlink:href="#iconMin"></use>
|
<use xlink:href="#iconMin"></use>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue