tab context menu (w/ close tab option) (#583)

* create tab context menu (for close tab)

* small update to ctx menu, also make all tab deletes (including keybinding) not popup confirm modal if less than 10 blocks
This commit is contained in:
Mike Sawka 2024-04-19 18:25:26 -07:00 committed by GitHub
parent 39ee41921f
commit 6336f87cf2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 63 additions and 3 deletions

View File

@ -12,6 +12,7 @@ import * as constants from "@/app/appconst";
import { Reorder } from "framer-motion";
import { MagicLayout } from "@/app/magiclayout";
import { TabIcon } from "@/elements/tabicon";
import * as appconst from "@/app/appconst";
@mobxReact.observer
class ScreenTab extends React.Component<
@ -62,6 +63,59 @@ class ScreenTab extends React.Component<
})();
}
@boundMethod
onContextMenu(e: React.MouseEvent) {
e.preventDefault();
e.stopPropagation();
let { screen, activeScreenId } = this.props;
if (activeScreenId != screen.screenId) {
// only show context menu for active tab
GlobalCommandRunner.switchScreen(screen.screenId);
return;
}
let colorSubMenu: ContextMenuItem[] = [];
for (let color of appconst.TabColors) {
colorSubMenu.push({
label: color,
click: () => {
GlobalCommandRunner.screenSetSettings(screen.screenId, { tabcolor: color }, false);
},
});
}
let menu: ContextMenuItem[] = [
{
label: "New Tab",
click: () => {
GlobalCommandRunner.createNewScreen();
},
},
{
type: "separator",
},
{
label: "Set Tab Color",
submenu: colorSubMenu,
},
{
label: "All Tab Settings",
click: () => {
GlobalModel.tabSettingsOpen.set(true);
},
},
{
type: "separator",
},
{
label: "Close Tab",
click: () => {
GlobalModel.onCloseCurrentTab();
},
},
];
GlobalModel.contextMenuModel.showContextMenu(menu, { x: e.clientX, y: e.clientY });
return;
}
render() {
let { screen, activeScreenId, index, onSwitchScreen } = this.props;
let archived = screen.archived.get() ? (
@ -83,7 +137,7 @@ class ScreenTab extends React.Component<
"color-" + screen.getTabColor()
)}
onPointerDown={() => onSwitchScreen(screen.screenId)}
onContextMenu={(event) => this.openScreenSettings(event, screen)}
onContextMenu={this.onContextMenu}
onDragEnd={this.handleDragEnd}
>
<div className="background"></div>

View File

@ -121,7 +121,8 @@ class TabSettings extends React.Component<{ screen: Screen }, {}> {
if (screen == null) {
return;
}
if (screen.getScreenLines().lines.length == 0) {
let numLines = screen.getScreenLines().lines.length;
if (numLines < 10) {
GlobalCommandRunner.screenDelete(screen.screenId, false);
GlobalModel.modalsModel.popModal();
return;

View File

@ -606,6 +606,11 @@ class Model {
if (activeScreen == null) {
return;
}
let numLines = activeScreen.getScreenLines().lines.length;
if (numLines < 10) {
GlobalCommandRunner.screenDelete(activeScreen.screenId, false);
return;
}
const rtnp = this.showAlert({
message: "Are you sure you want to delete this tab?",
confirm: true,
@ -614,7 +619,7 @@ class Model {
if (!result) {
return;
}
GlobalCommandRunner.screenDelete(activeScreen.screenId, true);
GlobalCommandRunner.screenDelete(activeScreen.screenId, false);
});
}