+
{label}
+
{shortcutName
? getShortcutFromShortcutName(shortcutName)
: ""}
diff --git a/src/components/Dialog.scss b/src/components/Dialog.scss
index 5c94a9069..3586c1cd2 100644
--- a/src/components/Dialog.scss
+++ b/src/components/Dialog.scss
@@ -7,6 +7,9 @@
margin-top: 0;
grid-template-columns: 1fr calc(var(--space-factor) * 7);
grid-gap: var(--metric);
+ padding: calc(var(--space-factor) * 2);
+ text-align: center;
+ font-variant: small-caps;
}
.Dialog__titleContent {
@@ -18,7 +21,11 @@
margin: 0;
}
- @media #{$media-query} {
+ .Dialog__content {
+ padding: 0 16px 16px;
+ }
+
+ @media #{$is-mobile-query} {
.Dialog {
--metric: calc(var(--space-factor) * 4);
--inset-left: #{"max(var(--metric), var(--sal))"};
@@ -30,13 +37,8 @@
var(--space-factor) * 7
);
position: sticky;
- top: calc(-1 * var(--metric));
- margin: calc(-1 * var(--inset-right));
- margin-top: calc(-1 * var(--metric));
- margin-bottom: var(--metric);
+ top: 0;
padding: calc(var(--space-factor) * 2);
- padding-left: var(--inset-left);
- padding-right: var(--inset-right);
background: var(--bg-color-island);
font-size: 1.25em;
diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx
index f1b83b4ea..aa2ef7c01 100644
--- a/src/components/Dialog.tsx
+++ b/src/components/Dialog.tsx
@@ -1,13 +1,12 @@
-import React, { useCallback, useEffect, useState } from "react";
import clsx from "clsx";
-import { Modal } from "./Modal";
-import { Island } from "./Island";
+import React, { useCallback, useEffect, useState } from "react";
import { t } from "../i18n";
import useIsMobile from "../is-mobile";
-import { back, close } from "./icons";
import { KEYS } from "../keys";
-
import "./Dialog.scss";
+import { back, close } from "./icons";
+import { Island } from "./Island";
+import { Modal } from "./Modal";
const useRefState =
() => {
const [refValue, setRefValue] = useState(null);
@@ -20,9 +19,10 @@ const useRefState = () => {
export const Dialog = (props: {
children: React.ReactNode;
className?: string;
- maxWidth?: number;
+ small?: boolean;
onCloseRequest(): void;
title: React.ReactNode;
+ autofocus?: boolean;
}) => {
const [islandNode, setIslandNode] = useRefState();
@@ -33,7 +33,7 @@ export const Dialog = (props: {
const focusableElements = queryFocusableElements(islandNode);
- if (focusableElements.length > 0) {
+ if (focusableElements.length > 0 && props.autofocus !== false) {
// If there's an element other than close, focus it.
(focusableElements[1] || focusableElements[0]).focus();
}
@@ -62,7 +62,7 @@ export const Dialog = (props: {
islandNode.addEventListener("keydown", handleKeyDown);
return () => islandNode.removeEventListener("keydown", handleKeyDown);
- }, [islandNode]);
+ }, [islandNode, props.autofocus]);
const queryFocusableElements = (node: HTMLElement) => {
const focusableElements = node.querySelectorAll(
@@ -76,11 +76,11 @@ export const Dialog = (props: {
-
-
+
+
{props.title}
-
- {props.children}
+
+ {props.children}
);
diff --git a/src/components/ErrorDialog.tsx b/src/components/ErrorDialog.tsx
index f10c71897..fbd8e48cf 100644
--- a/src/components/ErrorDialog.tsx
+++ b/src/components/ErrorDialog.tsx
@@ -24,7 +24,7 @@ export const ErrorDialog = ({
<>
{modalIsShown && (
,
);
for (let row = 0; row < numRows; row++) {
@@ -274,7 +251,6 @@ const LibraryMenu = ({
const items = await Library.loadLibrary();
const nextItems = items.filter((_, index) => index !== indexToRemove);
Library.saveLibrary(nextItems);
- trackEvent(EVENT_LIBRARY, "remove");
setLibraryItems(nextItems);
}, []);
@@ -283,7 +259,6 @@ const LibraryMenu = ({
const items = await Library.loadLibrary();
const nextItems = [...items, elements];
onAddToLibrary();
- trackEvent(EVENT_LIBRARY, "add");
Library.saveLibrary(nextItems);
setLibraryItems(nextItems);
},
@@ -318,11 +293,12 @@ const LayerUI = ({
elements,
onCollabButtonClick,
onLockToggle,
- onInsertShape,
+ onInsertElements,
zenModeEnabled,
toggleZenMode,
isCollaborating,
onExportToBackend,
+ renderCustomFooter,
}: LayerUIProps) => {
const isMobile = useIsMobile();
@@ -334,9 +310,6 @@ const LayerUI = ({
href="https://blog.excalidraw.com/end-to-end-encryption/"
target="_blank"
rel="noopener noreferrer"
- onClick={() => {
- trackEvent(EVENT_EXIT, "e2ee shield");
- }}
>
{shield}
@@ -456,7 +429,7 @@ const LayerUI = ({
@@ -558,14 +531,7 @@ const LayerUI = ({
"transition-right disable-pointerEvents": zenModeEnabled,
})}
>
- {
- await setLanguage(lng);
- setAppState({});
- }}
- languages={languages}
- floating
- />
+ {renderCustomFooter?.(false)}
{actionManager.renderAction("toggleShortcuts")}