diff --git a/app/src/assets/scss/_menu.scss b/app/src/assets/scss/_menu.scss
index 0cff922c9..9a038d42a 100644
--- a/app/src/assets/scss/_menu.scss
+++ b/app/src/assets/scss/_menu.scss
@@ -76,6 +76,10 @@
&--current {
background-color: var(--b3-list-hover);
+
+ .b3-menu__action {
+ opacity: 1;
+ }
}
&--readonly {
@@ -95,6 +99,22 @@
}
}
+ &__action {
+ opacity: 0;
+ color: var(--b3-theme-on-surface);
+ width: 8px;
+ height: 8px;
+ align-self: center;
+ margin-left: 8px;
+ padding: 4px;
+ border-radius: 8px;
+
+ &:hover {
+ color: var(--b3-theme-on-background);
+ background: var(--b3-theme-background-light);
+ }
+ }
+
&__label {
flex: 1;
min-width: 84px;
diff --git a/app/src/layout/Wnd.ts b/app/src/layout/Wnd.ts
index 1727e7a51..40d2f7aea 100644
--- a/app/src/layout/Wnd.ts
+++ b/app/src/layout/Wnd.ts
@@ -28,6 +28,7 @@ import {saveScroll} from "../protyle/scroll/saveScroll";
import {Asset} from "../asset";
import {newFile} from "../util/newFile";
import {MenuItem} from "../menus/Menu";
+import {escapeHtml} from "../util/escape";
export class Wnd {
public id: string;
@@ -463,11 +464,26 @@ export class Wnd {
const iconElement = item.querySelector(".item__icon");
const graphicElement = item.querySelector(".item__graphic");
window.siyuan.menus.menu.append(new MenuItem({
- label: item.querySelector(".item__text").textContent,
+ label: escapeHtml(item.querySelector(".item__text").textContent),
+ action: "iconClose",
iconHTML: iconElement ? `` : "",
icon: graphicElement ? graphicElement.firstElementChild.getAttribute("xlink:href").substring(1) : "",
- click: () => {
- this.switchTab(item, true);
+ bind: (element) => {
+ element.addEventListener("click", (event) => {
+ if (hasClosestByTag(event.target as Element, "svg")) {
+ this.removeTab(item.getAttribute("data-id"));
+ if (element.previousElementSibling || element.nextElementSibling) {
+ element.remove();
+ } else {
+ window.siyuan.menus.menu.remove();
+ }
+ } else {
+ this.switchTab(item, true);
+ window.siyuan.menus.menu.remove();
+ }
+ event.preventDefault()
+ event.stopPropagation();
+ });
},
current: item.classList.contains("item--focus")
}).element);
diff --git a/app/src/menus/Menu.ts b/app/src/menus/Menu.ts
index 6711032c8..e7ff930f1 100644
--- a/app/src/menus/Menu.ts
+++ b/app/src/menus/Menu.ts
@@ -136,6 +136,9 @@ export class MenuItem {
if (options.accelerator) {
html += ``;
}
+ if (options.action) {
+ html += ``;
+ }
if (options.id) {
this.element.setAttribute("data-id", options.id);
}
diff --git a/app/src/types/index.d.ts b/app/src/types/index.d.ts
index 778cf1a8b..2dc6372cc 100644
--- a/app/src/types/index.d.ts
+++ b/app/src/types/index.d.ts
@@ -484,6 +484,7 @@ declare interface IMenu {
click?: (element: HTMLElement) => void,
type?: "separator" | "submenu" | "readonly",
accelerator?: string,
+ action?: string,
id?: string,
submenu?: IMenu[]
disabled?: boolean