From 13b1157c616c3893a38e810da20f18bc53f0aa6c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Hatcher?= Date: Thu, 19 Dec 2024 20:56:48 +0100 Subject: [PATCH] FIX[WebApp]: Some fixes to the DeleteWorkbook and Import dialogs --- .../AppComponents/DeleteWorkbookDialog.tsx | 77 ++++++++++++------- webapp/src/AppComponents/FileMenu.tsx | 24 +++--- webapp/src/AppComponents/UploadFileDialog.tsx | 40 ++++++++-- 3 files changed, 92 insertions(+), 49 deletions(-) diff --git a/webapp/src/AppComponents/DeleteWorkbookDialog.tsx b/webapp/src/AppComponents/DeleteWorkbookDialog.tsx index d61a685..c61a3a2 100644 --- a/webapp/src/AppComponents/DeleteWorkbookDialog.tsx +++ b/webapp/src/AppComponents/DeleteWorkbookDialog.tsx @@ -1,21 +1,24 @@ import styled from "@emotion/styled"; import { Trash2 } from "lucide-react"; -import { forwardRef, useEffect } from "react"; -import { theme } from "../theme"; +import { useEffect, useRef } from "react"; + +interface DeleteWorkbookDialogProperties { + onClose: () => void; + onConfirm: () => void; + workbookName: string; +} + +function DeleteWorkbookDialog(properties: DeleteWorkbookDialogProperties) { + const deleteButtonRef = useRef(null); -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)"; } + if (deleteButtonRef.current) { + deleteButtonRef.current.focus(); + } return () => { const root = document.getElementById("root"); if (root) { @@ -26,8 +29,12 @@ export const DeleteWorkbookDialog = forwardRef< return ( { + if (event.code === "Escape") { + properties.onClose(); + } + }} role="dialog" aria-labelledby="delete-dialog-title" aria-describedby="delete-dialog-description" @@ -47,6 +54,7 @@ export const DeleteWorkbookDialog = forwardRef< properties.onConfirm(); properties.onClose(); }} + ref={deleteButtonRef} > Yes, delete workbook @@ -55,10 +63,25 @@ export const DeleteWorkbookDialog = forwardRef< ); -}); +} DeleteWorkbookDialog.displayName = "DeleteWorkbookDialog"; +// some colors taken from the IronCalc palette +const COMMON_WHITE = "#FFF"; +const COMMON_BLACK = "#272525"; + +const ERROR_MAIN = "#EB5757"; +const ERROR_DARK = "#CB4C4C"; + +const GREY_200 = "#EEEEEE"; +const GREY_300 = "#E0E0E0"; +const GREY_700 = "#616161"; +const GREY_900 = "#333333"; + +const PRIMARY_MAIN = "#F2994A"; +const PRIMARY_DARK = "#D68742"; + const DialogWrapper = styled.div` position: fixed; top: 50%; @@ -70,7 +93,7 @@ const DialogWrapper = styled.div` gap: 16px; padding: 12px; border-radius: 8px; - box-shadow: 0px 1px 3px 0px ${theme.palette.common.black}1A; + box-shadow: 0px 1px 3px 0px ${COMMON_BLACK}1A; width: 280px; max-width: calc(100% - 40px); z-index: 50; @@ -84,9 +107,9 @@ const IconWrapper = styled.div` width: 36px; height: 36px; border-radius: 4px; - background-color: ${theme.palette.error.main}1A; + background-color: ${ERROR_MAIN}1A; margin: 12px auto 0 auto; - color: ${theme.palette.error.main}; + color: ${ERROR_MAIN}; svg { width: 16px; height: 16px; @@ -106,13 +129,13 @@ const Title = styled.h2` margin: 0; font-weight: 600; font-size: inherit; - color: ${theme.palette.grey["900"]}; + color: ${GREY_900}; `; const Body = styled.p` margin: 0; text-align: center; - color: ${theme.palette.grey["900"]}; + color: ${GREY_900}; font-size: 12px; `; @@ -126,8 +149,8 @@ const ButtonGroup = styled.div` const Button = styled.button` cursor: pointer; - color: ${theme.palette.common.white}; - background-color: ${theme.palette.primary.main}; + color: ${COMMON_WHITE}; + background-color: ${PRIMARY_MAIN}; padding: 0px 10px; height: 36px; border-radius: 4px; @@ -139,22 +162,24 @@ const Button = styled.button` text-overflow: ellipsis; transition: background-color 150ms; &:hover { - background-color: ${theme.palette.primary.dark}; + background-color: ${PRIMARY_DARK}; } `; const DeleteButton = styled(Button)` - background-color: ${theme.palette.error.main}; - color: ${theme.palette.common.white}; + background-color: ${ERROR_MAIN}; + color: ${COMMON_WHITE}; &:hover { - background-color: ${theme.palette.error.dark}; + background-color: ${ERROR_DARK}; } `; const CancelButton = styled(Button)` - background-color: ${theme.palette.grey["200"]}; - color: ${theme.palette.grey["700"]}; + background-color: ${GREY_200}; + color: ${GREY_700}; &:hover { - background-color: ${theme.palette.grey["300"]}; + background-color: ${GREY_300}; } `; + +export default DeleteWorkbookDialog; diff --git a/webapp/src/AppComponents/FileMenu.tsx b/webapp/src/AppComponents/FileMenu.tsx index 600a855..aa9fd0e 100644 --- a/webapp/src/AppComponents/FileMenu.tsx +++ b/webapp/src/AppComponents/FileMenu.tsx @@ -2,8 +2,8 @@ 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 DeleteWorkbookDialog from "./DeleteWorkbookDialog"; +import UploadFileDialog from "./UploadFileDialog"; import { getModelsMetadata, getSelectedUuid } from "./storage"; export function FileMenu(props: { @@ -105,10 +105,6 @@ export function FileMenu(props: { { - const root = document.getElementById("root"); - if (root) { - root.style.filter = ""; - } setImportMenuOpen(false); }} aria-labelledby="modal-modal-title" @@ -117,10 +113,6 @@ export function FileMenu(props: { <> { - const root = document.getElementById("root"); - if (root) { - root.style.filter = ""; - } setImportMenuOpen(false); }} onModelUpload={props.onModelUpload} @@ -133,11 +125,13 @@ export function FileMenu(props: { aria-labelledby="delete-dialog-title" aria-describedby="delete-dialog-description" > - setDeleteDialogOpen(false)} - onConfirm={props.onDelete} - workbookName={selectedUuid ? models[selectedUuid] : ""} - /> + <> + setDeleteDialogOpen(false)} + onConfirm={props.onDelete} + workbookName={selectedUuid ? models[selectedUuid] : ""} + /> + ); diff --git a/webapp/src/AppComponents/UploadFileDialog.tsx b/webapp/src/AppComponents/UploadFileDialog.tsx index 075f2ce..775bfc2 100644 --- a/webapp/src/AppComponents/UploadFileDialog.tsx +++ b/webapp/src/AppComponents/UploadFileDialog.tsx @@ -1,17 +1,34 @@ import styled from "@emotion/styled"; import { BookOpen, FileUp } from "lucide-react"; -import { type DragEvent, useRef, useState } from "react"; +import { type DragEvent, useEffect, useRef, useState } from "react"; -export function UploadFileDialog(properties: { +function UploadFileDialog(properties: { onClose: () => void; onModelUpload: (blob: ArrayBuffer, fileName: string) => Promise; }) { const [hover, setHover] = useState(false); const [message, setMessage] = useState(""); const fileInputRef = useRef(null); + const crossRef = useRef(null); const { onModelUpload } = properties; + useEffect(() => { + const root = document.getElementById("root"); + if (root) { + root.style.filter = "blur(2px)"; + } + if (crossRef.current) { + crossRef.current.focus(); + } + return () => { + const root = document.getElementById("root"); + if (root) { + root.style.filter = "none"; + } + }; + }, []); + const handleClose = () => { properties.onClose(); }; @@ -79,12 +96,16 @@ export function UploadFileDialog(properties: { reader.readAsArrayBuffer(file); }; - const root = document.getElementById("root"); - if (root) { - root.style.filter = "blur(4px)"; - } return ( - + { + if (event.code === "Escape") { + handleClose(); + } + }} + > Import an .xlsx file @@ -92,7 +113,8 @@ export function UploadFileDialog(properties: { {}} + ref={crossRef} + tabIndex={0} >