Make workspace switcher icons fixed width, add confirm on delete (#1455)

Also makes the confirmation dialogs shorter and fixes the logic for
showing them
This commit is contained in:
Evan Simkowitz 2024-12-10 10:15:33 -08:00 committed by GitHub
parent 09128fe88a
commit c4fce5acc5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 33 additions and 19 deletions

View File

@ -55,6 +55,10 @@ type WindowActionQueueEntry =
workspaceId: string;
};
function showCloseConfirmDialog(workspace: Workspace): boolean {
return !workspace.name && !workspace.icon && (workspace.tabids?.length > 1 || workspace.pinnedtabids?.length > 1);
}
export class WaveBrowserWindow extends BaseWindow {
waveWindowId: string;
workspaceId: string;
@ -232,14 +236,13 @@ export class WaveBrowserWindow extends BaseWindow {
console.log("numWindows > 1", numWindows);
const workspace = await WorkspaceService.GetWorkspace(this.workspaceId);
console.log("workspace", workspace);
if (!workspace.name && !workspace.icon && workspace.tabids.length > 1) {
if (showCloseConfirmDialog(workspace)) {
console.log("workspace has no name, icon, and multiple tabs", workspace);
const choice = dialog.showMessageBoxSync(this, {
type: "question",
buttons: ["Cancel", "Yes"],
buttons: ["Cancel", "Close Window"],
title: "Confirm",
message:
"Are you sure you want to close this window (all tabs and blocks will be deleted)?",
message: "Window has unsaved tabs, closing window will delete existing tabs.\n\nContinue?",
});
if (choice === 0) {
console.log("user cancelled close window", this.waveWindowId);
@ -303,16 +306,12 @@ export class WaveBrowserWindow extends BaseWindow {
const workspaceList = await WorkspaceService.ListWorkspaces();
if (!workspaceList.find((wse) => wse.workspaceid === workspaceId)?.windowid) {
const curWorkspace = await WorkspaceService.GetWorkspace(this.workspaceId);
if (
(curWorkspace.tabids?.length || curWorkspace.pinnedtabids?.length) &&
(!curWorkspace.name || !curWorkspace.icon)
) {
if (showCloseConfirmDialog(curWorkspace)) {
const choice = dialog.showMessageBoxSync(this, {
type: "question",
buttons: ["Cancel", "Open in New Window", "Yes"],
buttons: ["Cancel", "Open in New Window", "Switch Workspace"],
title: "Confirm",
message:
"This window has unsaved tabs, switching workspaces will delete the existing tabs. Would you like to continue?",
message: "Window has unsaved tabs, switching workspaces will delete existing tabs.\n\nContinue?",
});
if (choice === 0) {
console.log("user cancelled switch workspace", this.waveWindowId);
@ -689,6 +688,21 @@ ipcMain.on("delete-workspace", (event, workspaceId) => {
fireAndForget(async () => {
const ww = getWaveWindowByWebContentsId(event.sender.id);
console.log("delete-workspace", workspaceId, ww?.waveWindowId);
const workspaceList = await WorkspaceService.ListWorkspaces();
const workspaceHasWindow = !!workspaceList.find((wse) => wse.workspaceid === workspaceId)?.windowid;
const choice = dialog.showMessageBoxSync(this, {
type: "question",
buttons: ["Cancel", "Delete Workspace"],
title: "Confirm",
message: `Deleting workspace will also delete its contents.${workspaceHasWindow ? "\nWorkspace is open in a window, which will be closed." : ""}\n\nContinue?`,
});
if (choice === 0) {
console.log("user cancelled workspace delete", workspaceId, ww?.waveWindowId);
return;
}
await WorkspaceService.DeleteWorkspace(workspaceId);
console.log("delete-workspace done", workspaceId, ww?.waveWindowId);
if (ww?.workspaceId == workspaceId) {

View File

@ -146,6 +146,10 @@
}
}
&.bold {
font-weight: bold;
}
&:disabled {
cursor: default;
opacity: 0.5;

View File

@ -143,11 +143,6 @@
.expandable-menu-item-group-title {
height: 29px;
padding: 0;
.left-icon {
font-size: 14px;
width: 16px;
}
}
.color-icon-selector {
@ -223,7 +218,7 @@
display: flex;
align-items: center;
justify-content: center;
margin-top: 5px;
margin-top: 10px;
}
}

View File

@ -147,7 +147,7 @@ const ColorAndIconSelector = memo(
<ColorSelector selectedColor={color} colors={colors} onSelect={onColorChange} />
<IconSelector selectedIcon={icon} icons={icons} onSelect={onIconChange} />
<div className="delete-ws-btn-wrapper">
<Button className="ghost red font-size-12" onClick={onDeleteWorkspace}>
<Button className="ghost red font-size-12 bold" onClick={onDeleteWorkspace}>
Delete workspace
</Button>
</div>
@ -221,6 +221,7 @@ const WorkspaceSwitcher = () => {
setTimeout(() => {
fireAndForget(updateWorkspaceList);
}, 10);
setEditingWorkspace(activeWorkspace.oid);
};
return (
@ -339,7 +340,7 @@ const WorkspaceSwitcherItem = ({
>
<ExpandableMenuItemLeftElement>
<i
className={clsx("left-icon", makeIconClass(workspace.icon, false))}
className={clsx("left-icon", makeIconClass(workspace.icon, true))}
style={{ color: workspace.color }}
/>
</ExpandableMenuItemLeftElement>