FIX[UI]: Use canDelete as a property not a function

FIX: responsiveness
UPDATE: connect FileMenu button to open confirmation modal
2024-12-19 21:21:29 +01:00 · 2024-12-19 17:48:54 +01:00 · 2024-12-19 17:48:54 +01:00 · 2024-12-19 17:48:54 +01:00 · 2024-12-19 17:37:10 +01:00 · 2024-12-19 17:36:27 +01:00
7 changed files with 205 additions and 22 deletions
--- a/webapp/src/AppComponents/DeleteWorkbookDialog.tsx
+++ b/webapp/src/AppComponents/DeleteWorkbookDialog.tsx
@@ -0,0 +1,160 @@
+import styled from "@emotion/styled";
+import { Trash2 } from "lucide-react";
+import { forwardRef, useEffect } from "react";
+import { theme } from "../theme";
+
+export const DeleteWorkbookDialog = forwardRef<
+  HTMLDivElement,
+  {
+    onClose: () => void;
+    onConfirm: () => void;
+    workbookName: string;
+  }
+>((properties, ref) => {
+  useEffect(() => {
+    const root = document.getElementById("root");
+    if (root) {
+      root.style.filter = "blur(2px)";
+    }
+    return () => {
+      const root = document.getElementById("root");
+      if (root) {
+        root.style.filter = "none";
+      }
+    };
+  }, []);
+
+  return (
+    <DialogWrapper
+      ref={ref}
+      tabIndex={-1}
+      role="dialog"
+      aria-labelledby="delete-dialog-title"
+      aria-describedby="delete-dialog-description"
+    >
+      <IconWrapper>
+        <Trash2 />
+      </IconWrapper>
+      <ContentWrapper>
+        <Title>Are you sure?</Title>
+        <Body>
+          The workbook <strong>'{properties.workbookName}'</strong> will be
+          permanently deleted. This action cannot be undone.
+        </Body>
+        <ButtonGroup>
+          <DeleteButton
+            onClick={() => {
+              properties.onConfirm();
+              properties.onClose();
+            }}
+          >
+            Yes, delete workbook
+          </DeleteButton>
+          <CancelButton onClick={properties.onClose}>Cancel</CancelButton>
+        </ButtonGroup>
+      </ContentWrapper>
+    </DialogWrapper>
+  );
+});
+
+DeleteWorkbookDialog.displayName = "DeleteWorkbookDialog";
+
+const DialogWrapper = styled.div`
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: white;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 12px;
+  border-radius: 8px;
+  box-shadow: 0px 1px 3px 0px ${theme.palette.common.black}1A;
+  width: 280px;
+  max-width: calc(100% - 40px);
+  z-index: 50;
+  font-family: "Inter", sans-serif;
+`;
+
+const IconWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 4px;
+  background-color: ${theme.palette.error.main}1A;
+  margin: 12px auto 0 auto;
+  color: ${theme.palette.error.main};
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+`;
+
+const ContentWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  word-break: break-word;
+`;
+
+const Title = styled.h2`
+  margin: 0;
+  font-weight: 600;
+  font-size: inherit;
+  color: ${theme.palette.grey["900"]};
+`;
+
+const Body = styled.p`
+  margin: 0;
+  text-align: center;
+  color: ${theme.palette.grey["900"]};
+  font-size: 12px;
+`;
+
+const ButtonGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 8px;
+  width: 100%;
+`;
+
+const Button = styled.button`
+  cursor: pointer;
+  color: ${theme.palette.common.white};
+  background-color: ${theme.palette.primary.main};
+  padding: 0px 10px;
+  height: 36px;
+  border-radius: 4px;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  text-overflow: ellipsis;
+  transition: background-color 150ms;
+  &:hover {
+    background-color: ${theme.palette.primary.dark};
+  }
+`;
+
+const DeleteButton = styled(Button)`
+  background-color: ${theme.palette.error.main};
+  color: ${theme.palette.common.white};
+  &:hover {
+    background-color: ${theme.palette.error.dark};
+  }
+`;
+
+const CancelButton = styled(Button)`
+  background-color: ${theme.palette.grey["200"]};
+  color: ${theme.palette.grey["700"]};
+  &:hover {
+    background-color: ${theme.palette.grey["300"]};
+  }
+`;
--- a/webapp/src/AppComponents/FileMenu.tsx
+++ b/webapp/src/AppComponents/FileMenu.tsx
@@ -2,6 +2,7 @@ import styled from "@emotion/styled";
 import { Menu, MenuItem, Modal } from "@mui/material";
 import { Check, FileDown, FileUp, Plus, Trash2 } from "lucide-react";
 import { useRef, useState } from "react";
+import { DeleteWorkbookDialog } from "./DeleteWorkbookDialog";
 import { UploadFileDialog } from "./UploadFileDialog";
 import { getModelsMetadata, getSelectedUuid } from "./storage";

@@ -18,6 +19,7 @@ export function FileMenu(props: {
  const models = getModelsMetadata();
  const uuids = Object.keys(models);
  const selectedUuid = getSelectedUuid();
+  const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);

  const elements = [];
  for (const uuid of uuids) {
@@ -88,16 +90,14 @@ export function FileMenu(props: {
            Download (.xlsx)
          </MenuItemText>
        </MenuItemWrapper>
-        <MenuItemWrapper>
+        <MenuItemWrapper
+          onClick={() => {
+            setDeleteDialogOpen(true);
+            setMenuOpen(false);
+          }}
+        >
          <StyledTrash />
-          <MenuItemText
-            onClick={() => {
-              props.onDelete();
-              setMenuOpen(false);
-            }}
-          >
-            Delete workbook
-          </MenuItemText>
+          <MenuItemText>Delete workbook</MenuItemText>
        </MenuItemWrapper>
        <MenuDivider />
        {elements}
@@ -127,6 +127,18 @@ export function FileMenu(props: {
          />
        </>
      </Modal>
+      <Modal
+        open={isDeleteDialogOpen}
+        onClose={() => setDeleteDialogOpen(false)}
+        aria-labelledby="delete-dialog-title"
+        aria-describedby="delete-dialog-description"
+      >
+        <DeleteWorkbookDialog
+          onClose={() => setDeleteDialogOpen(false)}
+          onConfirm={props.onDelete}
+          workbookName={selectedUuid ? models[selectedUuid] : ""}
+        />
+      </Modal>
    </>
  );
 }
--- a/webapp/src/components/SheetTabBar/SheetRenameDialog.tsx
+++ b/webapp/src/components/SheetTabBar/SheetRenameDialog.tsx
@@ -54,6 +54,8 @@ const SheetRenameDialog = (properties: SheetRenameDialogProps) => {
            if (event.key === "Enter") {
              properties.onNameChanged(name);
              properties.onClose();
+            } else if (event.key === "Escape") {
+              properties.onClose();
            }
          }}
          onChange={(event) => {
@@ -61,6 +63,8 @@ const SheetRenameDialog = (properties: SheetRenameDialogProps) => {
          }}
          spellCheck="false"
          onPaste={(event) => event.stopPropagation()}
+          onCopy={(event) => event.stopPropagation()}
+          onCut={(event) => event.stopPropagation()}
        />
      </StyledDialogContent>
      <DialogFooter>
--- a/webapp/src/components/SheetTabBar/SheetTab.tsx
+++ b/webapp/src/components/SheetTabBar/SheetTab.tsx
@@ -1,4 +1,5 @@
 import { Button, Menu, MenuItem, styled } from "@mui/material";
+import type { MenuItemProps } from "@mui/material";
 import { ChevronDown } from "lucide-react";
 import { useRef, useState } from "react";
 import { theme } from "../../theme";
@@ -14,6 +15,7 @@ interface SheetTabProps {
  onSelected: () => void;
  onColorChanged: (hex: string) => void;
  onRenamed: (name: string) => void;
+  canDelete: boolean;
  onDeleted: () => void;
  workbookState: WorkbookState;
 }
@@ -92,6 +94,7 @@ function SheetTab(props: SheetTabProps) {
          Change Color
        </StyledMenuItem>
        <StyledMenuItem
+          disabled={!props.canDelete}
          onClick={() => {
            props.onDeleted();
            handleClose();
@@ -137,16 +140,19 @@ const StyledMenu = styled(Menu)`
  }
 `;

-const StyledMenuItem = styled(MenuItem)`
-  display: flex;
-  justify-content: space-between;
-  font-size: 12px;
-  width: calc(100% - 8px);
-  margin: 0px 4px;
-  border-radius: 4px;
-  padding: 8px;
-  height: 32px;
-`;
+const StyledMenuItem = styled(MenuItem)<MenuItemProps>(() => ({
+  display: "flex",
+  justifyContent: "space-between",
+  fontSize: "12px",
+  width: "calc(100% - 8px)",
+  margin: "0px 4px",
+  borderRadius: "4px",
+  padding: "8px",
+  height: "32px",
+  "&:disabled": {
+    color: "#BDBDBD",
+  },
+}));

 const TabWrapper = styled("div")<{ $color: string; $selected: boolean }>`
  display: flex;
--- a/webapp/src/components/SheetTabBar/SheetTabBar.tsx
+++ b/webapp/src/components/SheetTabBar/SheetTabBar.tsx
@@ -71,6 +71,7 @@ function SheetTabBar(props: SheetTabBarProps) {
                props.onSheetDeleted();
              }}
              workbookState={workbookState}
+              canDelete={sheets.length > 1}
            />
          ))}
        </SheetInner>
--- a/webapp/src/components/WorksheetCanvas/constants.ts
+++ b/webapp/src/components/WorksheetCanvas/constants.ts
@@ -5,10 +5,10 @@ export const headerGlobalSelectorColor = "#EAECF4";
 export const headerSelectedBackground = "#EEEEEE";
 export const headerFullSelectedBackground = "#D3D6E9";
 export const headerSelectedColor = "#333";
-export const headerBorderColor = "#DEE0EF";
+export const headerBorderColor = "#E0E0E0";

 export const gridColor = "#E0E0E0";
-export const gridSeparatorColor = "#D3D6E9";
+export const gridSeparatorColor = "#E0E0E0";
 export const defaultTextColor = "#2E414D";

 export const outlineColor = "#F2994A";
--- a/webapp/src/components/colorPicker.tsx
+++ b/webapp/src/components/colorPicker.tsx
@@ -45,8 +45,8 @@ const ColorPicker = (properties: ColorPickerProps) => {
    "#3BB68A",
    "#8CB354",
    "#F8CD3C",
+    "#F2994A",
    "#EC5753",
-    "#A23C52",
    "#D03627",
    "#523E93",
    "#3358B7",
Author	SHA1	Message	Date
Nicolás Hatcher	a1bd696323	FIX[UI]: Use `canDelete` as a property not a function	2024-12-19 21:21:29 +01:00
Daniel	44f7929f4e	FIX: responsiveness	2024-12-19 17:48:54 +01:00
Daniel	23643f0fae	UPDATE: connect FileMenu button to open confirmation modal	2024-12-19 17:48:54 +01:00
Daniel	ad91d47db0	UPDATE: add confirmation modal for deleting workbooks	2024-12-19 17:48:54 +01:00
Daniel	8f36a1f750	FIX: make grid header colors consistent	2024-12-19 17:37:10 +01:00
Sinan Yumurtaci	8ad407432f	lint	2024-12-19 17:36:27 +01:00
Sinan Yumurtaci	ebc31780ab	FIX[WebApp]: Disable delete for sheet if it is the last one	2024-12-19 17:36:27 +01:00
Daniel	6e8c47d4f6	UPDATE: Replace one preset color from color picker	2024-12-18 20:00:52 +01:00
Daniel González-Albo	ed42667e87	Merge pull request #198 from ironcalc/bugfix/nicolas-modal-fixes FIX[UI]: Rename modal dialog fixes	2024-12-16 22:35:49 +01:00
Nicolás Hatcher	0cd3470a97	FIX[UI]: Rename modal dialog fixes This will be a standard "Prompt" widget * ESC closes the dialog without changes * Can copy/cut paste	2024-12-16 21:24:41 +01:00