smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: update design of ImageExportDialog (#6614)

Browse source 
Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
Are 2023-05-26 16:16:55 +02:00 • committed by GitHub
parent 6459ccda6a
commit 08563e7d7b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 881 additions and 171 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/components/Dialog.tsx
View file

@ -21,9 +21,9 @@ import { jotaiScope } from "../jotai";
export interface DialogProps {
children: React.ReactNode;
className?: string;
small?: boolean;
size?: "small" | "regular" | "wide";
onCloseRequest(): void;
title: React.ReactNode;
title: React.ReactNode | false;
autofocus?: boolean;
theme?: AppState["theme"];
closeOnClickOutside?: boolean;
@ -33,6 +33,7 @@ export const Dialog = (props: DialogProps) => {
const [islandNode, setIslandNode] = useCallbackRefState<HTMLDivElement>();
const [lastActiveElement] = useState(document.activeElement);
const { id } = useExcalidrawContainer();
const device = useDevice();
useEffect(() => {
if (!islandNode) {
@ -86,23 +87,27 @@ export const Dialog = (props: DialogProps) => {
<Modal
className={clsx("Dialog", props.className)}
labelledBy="dialog-title"
maxWidth={props.small ? 550 : 800}
maxWidth={
props.size === "wide" ? 1024 : props.size === "small" ? 550 : 800
}
onCloseRequest={onClose}
theme={props.theme}
closeOnClickOutside={props.closeOnClickOutside}
>
<Island ref={setIslandNode}>
<h2 id={`${id}-dialog-title`} className="Dialog__title">
<span className="Dialog__titleContent">{props.title}</span>
<button
className="Modal__close"
onClick={onClose}
title={t("buttons.close")}
aria-label={t("buttons.close")}
>
{useDevice().isMobile ? back : CloseIcon}
</button>
</h2>
{props.title && (
<h2 id={`${id}-dialog-title`} className="Dialog__title">
<span className="Dialog__titleContent">{props.title}</span>
</h2>
)}
<button
className="Dialog__close"
onClick={onClose}
title={t("buttons.close")}
aria-label={t("buttons.close")}
>
{device.isMobile ? back : CloseIcon}
</button>
<div className="Dialog__content">{props.children}</div>
</Island>
</Modal>