feat: Use dialog component for clear canvas instead of window confirm (#4075)
* feat: Use dialog component for clear canvas instead of window confirm * reduce font weight * fix specs * update button name and use action * export clearCanvas from actionspull/2934/merge
parent
6eecadce60
commit
0f0244224d
@ -0,0 +1,42 @@
|
||||
@import "../css/variables.module";
|
||||
|
||||
.excalidraw {
|
||||
.clear-canvas {
|
||||
&-buttons {
|
||||
display: flex;
|
||||
padding: 0.2rem 0;
|
||||
justify-content: flex-end;
|
||||
|
||||
.ToolIcon__icon {
|
||||
min-width: 2.5rem;
|
||||
width: auto;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.ToolIcon_type_button {
|
||||
margin-left: 1.5rem;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&--confirm.ToolIcon_type_button {
|
||||
background-color: $oc-red-6;
|
||||
|
||||
&:hover {
|
||||
background-color: $oc-red-8;
|
||||
}
|
||||
|
||||
.ToolIcon__icon {
|
||||
color: $oc-white;
|
||||
}
|
||||
}
|
||||
|
||||
&--cancel.ToolIcon_type_button {
|
||||
background-color: $oc-gray-2;
|
||||
}
|
||||
}
|
||||
}
|
@ -0,0 +1,67 @@
|
||||
import { useState } from "react";
|
||||
import { t } from "../i18n";
|
||||
import { useIsMobile } from "./App";
|
||||
import { Dialog } from "./Dialog";
|
||||
import { trash } from "./icons";
|
||||
import { ToolButton } from "./ToolButton";
|
||||
|
||||
import "./ClearCanvas.scss";
|
||||
|
||||
const ClearCanvas = ({ onConfirm }: { onConfirm: () => void }) => {
|
||||
const [showDialog, setShowDialog] = useState(false);
|
||||
const toggleDialog = () => {
|
||||
setShowDialog(!showDialog);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ToolButton
|
||||
type="button"
|
||||
icon={trash}
|
||||
title={t("buttons.clearReset")}
|
||||
aria-label={t("buttons.clearReset")}
|
||||
showAriaLabel={useIsMobile()}
|
||||
onClick={toggleDialog}
|
||||
data-testid="clear-canvas-button"
|
||||
/>
|
||||
|
||||
{showDialog && (
|
||||
<Dialog
|
||||
onCloseRequest={toggleDialog}
|
||||
title={t("clearCanvasDialog.title")}
|
||||
className="clear-canvas"
|
||||
small={true}
|
||||
>
|
||||
<>
|
||||
<p className="clear-canvas__content"> {t("alerts.clearReset")}</p>
|
||||
<div className="clear-canvas-buttons">
|
||||
<ToolButton
|
||||
type="button"
|
||||
title={t("buttons.clear")}
|
||||
aria-label={t("buttons.clear")}
|
||||
label={t("buttons.clear")}
|
||||
onClick={() => {
|
||||
onConfirm();
|
||||
toggleDialog();
|
||||
}}
|
||||
data-testid="confirm-clear-canvas-button"
|
||||
className="clear-canvas--confirm"
|
||||
/>
|
||||
<ToolButton
|
||||
type="button"
|
||||
title={t("buttons.cancel")}
|
||||
aria-label={t("buttons.cancel")}
|
||||
label={t("buttons.cancel")}
|
||||
onClick={toggleDialog}
|
||||
data-testid="cancel-clear-canvas-button"
|
||||
className="clear-canvas--cancel"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
</Dialog>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ClearCanvas;
|
Loading…
Reference in New Issue