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
+          <MenuItemText>Delete workbook</MenuItemText>
            onClick={() => {
              props.onDelete();
              setMenuOpen(false);
            }}
          >
            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)`
+const StyledMenuItem = styled(MenuItem)<MenuItemProps>(() => ({
-  display: flex;
+  display: "flex",
-  justify-content: space-between;
+  justifyContent: "space-between",
-  font-size: 12px;
+  fontSize: "12px",
-  width: calc(100% - 8px);
+  width: "calc(100% - 8px)",
-  margin: 0px 4px;
+  margin: "0px 4px",
-  border-radius: 4px;
+  borderRadius: "4px",
-  padding: 8px;
+  padding: "8px",
-  height: 32px;
+  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