diff --git a/src/components/Sidebar/SidebarHeader.tsx b/src/components/Sidebar/SidebarHeader.tsx
index 3c8ccc12..bb107216 100644
--- a/src/components/Sidebar/SidebarHeader.tsx
+++ b/src/components/Sidebar/SidebarHeader.tsx
@@ -3,16 +3,10 @@ import { useContext } from "react";
import { t } from "../../i18n";
import { useDevice } from "../App";
import { SidebarPropsContext } from "./common";
-import { close } from "../icons";
+import { CloseIcon, PinIcon } from "../icons";
import { withUpstreamOverride } from "../hoc/withUpstreamOverride";
import { Tooltip } from "../Tooltip";
-const SIDE_LIBRARY_TOGGLE_ICON = (
-
-);
-
export const SidebarDockButton = (props: {
checked: boolean;
onChange?(): void;
@@ -33,8 +27,13 @@ export const SidebarDockButton = (props: {
checked={props.checked}
aria-label={t("labels.sidebarLock")}
/>{" "}
-
- {SIDE_LIBRARY_TOGGLE_ICON}
+
+ {PinIcon}
{" "}
{" "}
@@ -64,24 +63,19 @@ const _SidebarHeader: React.FC<{
{
- document
- .querySelector(".layer-ui__wrapper")
- ?.classList.add("animate");
-
props.onDock?.(!props.docked);
}}
/>
)}
{renderCloseButton && (
-
-
-
+
)}
= {
/** if not supplied, sidebar won't be dockable */
onDock?: (docked: boolean) => void;
docked?: boolean;
+ initialDockedState?: boolean;
dockable?: boolean;
className?: string;
} & P;
diff --git a/src/components/SingleLibraryItem.tsx b/src/components/SingleLibraryItem.tsx
index 2dc81295..45959199 100644
--- a/src/components/SingleLibraryItem.tsx
+++ b/src/components/SingleLibraryItem.tsx
@@ -3,7 +3,7 @@ import { useEffect, useRef } from "react";
import { t } from "../i18n";
import { exportToSvg } from "../packages/utils";
import { AppState, LibraryItem } from "../types";
-import { close } from "./icons";
+import { CloseIcon } from "./icons";
import "./SingleLibraryItem.scss";
import { ToolButton } from "./ToolButton";
@@ -54,7 +54,7 @@ const SingleLibraryItem = ({
- {close}
+ {CloseIcon}
{t("stats.title")}
diff --git a/src/components/Toast.tsx b/src/components/Toast.tsx
index 56eb94db..be0c4666 100644
--- a/src/components/Toast.tsx
+++ b/src/components/Toast.tsx
@@ -1,5 +1,5 @@
import { useCallback, useEffect, useRef } from "react";
-import { close } from "./icons";
+import { CloseIcon } from "./icons";
import "./Toast.scss";
import { ToolButton } from "./ToolButton";
@@ -47,7 +47,7 @@ export const Toast = ({
{message}
{closable && (
* {
pointer-events: all;
- margin: 0 0 var(--space-factor) var(--space-factor);
}
.UserList_mobile {
padding: 0;
justify-content: normal;
- }
-
- .UserList_mobile > * {
- margin: 0 var(--space-factor) var(--space-factor) 0;
+ margin: 0.5rem 0;
}
}
diff --git a/src/components/UserList.tsx b/src/components/UserList.tsx
index b9f7a36a..468f1deb 100644
--- a/src/components/UserList.tsx
+++ b/src/components/UserList.tsx
@@ -44,6 +44,26 @@ export const UserList: React.FC<{
);
});
+ // TODO barnabasmolnar/editor-redesign
+ // probably remove before shipping :)
+ // 20 fake collaborators; for easy, convenient debug purposes ˇˇ
+ // const avatars = Array.from({ length: 20 }).map((_, index) => {
+ // const avatarJSX = actionManager.renderAction("goToCollaborator", [
+ // index.toString(),
+ // {
+ // username: `User ${index}`,
+ // },
+ // ]);
+
+ // return mobile ? (
+ //
+ // {avatarJSX}
+ //
+ // ) : (
+ // {avatarJSX}
+ // );
+ // });
+
return (
{avatars}
diff --git a/src/components/WelcomeScreen.scss b/src/components/WelcomeScreen.scss
new file mode 100644
index 00000000..0ccb6380
--- /dev/null
+++ b/src/components/WelcomeScreen.scss
@@ -0,0 +1,273 @@
+.excalidraw {
+ .virgil {
+ font-family: "Virgil";
+ }
+
+ .WelcomeScreen-logo {
+ display: flex;
+ align-items: center;
+ column-gap: 0.75rem;
+ font-size: 2.25rem;
+
+ svg {
+ width: 1.625rem;
+ height: auto;
+ }
+ }
+
+ .WelcomeScreen-decor {
+ pointer-events: none;
+
+ color: var(--color-gray-40);
+
+ &--subheading {
+ font-size: 1.125rem;
+ text-align: center;
+ }
+
+ &--help-pointer {
+ display: flex;
+ position: absolute;
+ right: 0;
+ bottom: 100%;
+
+ :root[dir="rtl"] & {
+ left: 0;
+ right: auto;
+ }
+
+ svg {
+ margin-top: 0.5rem;
+ width: 85px;
+ height: 71px;
+
+ transform: scaleX(-1) rotate(80deg);
+
+ :root[dir="rtl"] & {
+ transform: rotate(80deg);
+ }
+ }
+ }
+
+ &--top-toolbar-pointer {
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ transform: translateX(-50%);
+ margin-top: 2.5rem;
+ display: flex;
+ align-items: baseline;
+
+ &__label {
+ width: 120px;
+ position: relative;
+ top: -0.5rem;
+ }
+
+ svg {
+ width: 38px;
+ height: 78px;
+
+ :root[dir="rtl"] & {
+ transform: scaleX(-1);
+ }
+ }
+ }
+
+ &--menu-pointer {
+ position: absolute;
+ width: 320px;
+ font-size: 1rem;
+
+ top: 100%;
+ margin-top: 0.25rem;
+ margin-inline-start: 0.6rem;
+
+ display: flex;
+ align-items: flex-end;
+ gap: 0.5rem;
+
+ svg {
+ width: 41px;
+ height: 94px;
+
+ :root[dir="rtl"] & {
+ transform: scaleX(-1);
+ }
+ }
+ }
+ }
+
+ .WelcomeScreen-container {
+ display: flex;
+ flex-direction: column;
+ gap: 2rem;
+ justify-content: center;
+ align-items: center;
+ position: absolute;
+ pointer-events: none;
+ left: 1rem;
+ top: 1rem;
+ right: 1rem;
+ bottom: 1rem;
+ }
+
+ .WelcomeScreen-items {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .WelcomeScreen-item {
+ box-sizing: border-box;
+
+ pointer-events: all;
+
+ color: var(--color-gray-50);
+ font-size: 0.875rem;
+
+ min-width: 300px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ background: none;
+ border: none;
+
+ padding: 0.75rem;
+
+ border-radius: var(--border-radius-md);
+
+ &__label {
+ display: flex;
+ align-items: center;
+ column-gap: 0.5rem;
+
+ svg {
+ width: var(--default-icon-size);
+ height: var(--default-icon-size);
+ }
+ }
+
+ &__shortcut {
+ color: var(--color-gray-40);
+ font-size: 0.75rem;
+ }
+ }
+
+ &:not(:active) .WelcomeScreen-item:hover {
+ text-decoration: none;
+ background: var(--color-gray-10);
+
+ .WelcomeScreen-item__shortcut {
+ color: var(--color-gray-50);
+ }
+
+ .WelcomeScreen-item__label {
+ color: var(--color-gray-100);
+ }
+ }
+
+ .WelcomeScreen-item:active {
+ background: var(--color-gray-20);
+
+ .WelcomeScreen-item__shortcut {
+ color: var(--color-gray-50);
+ }
+
+ .WelcomeScreen-item__label {
+ color: var(--color-gray-100);
+ }
+
+ &--promo {
+ color: var(--color-promo) !important;
+
+ &:hover {
+ .WelcomeScreen-item__label {
+ color: var(--color-promo) !important;
+ }
+ }
+ }
+ }
+
+ &.theme--dark {
+ .WelcomeScreen-decor {
+ color: var(--color-gray-60);
+ }
+
+ .WelcomeScreen-item {
+ color: var(--color-gray-60);
+
+ &__shortcut {
+ color: var(--color-gray-60);
+ }
+ }
+
+ &:not(:active) .WelcomeScreen-item:hover {
+ background: var(--color-gray-85);
+
+ .WelcomeScreen-item__shortcut {
+ color: var(--color-gray-50);
+ }
+
+ .WelcomeScreen-item__label {
+ color: var(--color-gray-10);
+ }
+ }
+
+ .WelcomeScreen-item:active {
+ background-color: var(--color-gray-90);
+ .WelcomeScreen-item__label {
+ color: var(--color-gray-10);
+ }
+ }
+ }
+
+ // Can tweak these values but for an initial effort, it looks OK to me
+ @media (max-width: 1024px) {
+ .WelcomeScreen-decor {
+ &--help-pointer,
+ &--menu-pointer {
+ display: none;
+ }
+ }
+ }
+
+ // @media (max-height: 400px) {
+ // .WelcomeScreen-container {
+ // margin-top: 0;
+ // }
+ // }
+ @media (max-height: 599px) {
+ .WelcomeScreen-container {
+ margin-top: 4rem;
+ }
+ }
+ @media (min-height: 600px) and (max-height: 900px) {
+ .WelcomeScreen-container {
+ margin-top: 8rem;
+ }
+ }
+ @media (max-height: 630px) {
+ .WelcomeScreen-decor--top-toolbar-pointer {
+ display: none;
+ }
+ }
+ @media (max-height: 500px) {
+ .WelcomeScreen-container {
+ display: none;
+ }
+ }
+
+ // @media (max-height: 740px) {
+ // .WelcomeScreen-decor {
+ // &--help-pointer,
+ // &--top-toolbar-pointer,
+ // &--menu-pointer {
+ // display: none;
+ // }
+ // }
+ // }
+}
diff --git a/src/components/WelcomeScreen.tsx b/src/components/WelcomeScreen.tsx
new file mode 100644
index 00000000..03eb0585
--- /dev/null
+++ b/src/components/WelcomeScreen.tsx
@@ -0,0 +1,131 @@
+import { useAtom } from "jotai";
+import { actionLoadScene, actionShortcuts } from "../actions";
+import { ActionManager } from "../actions/manager";
+import { getShortcutFromShortcutName } from "../actions/shortcuts";
+import { COOKIES } from "../constants";
+import { collabDialogShownAtom } from "../excalidraw-app/collab/Collab";
+import { t } from "../i18n";
+import {
+ ExcalLogo,
+ HelpIcon,
+ LoadIcon,
+ PlusPromoIcon,
+ UsersIcon,
+} from "./icons";
+import "./WelcomeScreen.scss";
+
+const isExcalidrawPlusSignedUser = document.cookie.includes(
+ COOKIES.AUTH_STATE_COOKIE,
+);
+
+const WelcomeScreenItem = ({
+ label,
+ shortcut,
+ onClick,
+ icon,
+ link,
+}: {
+ label: string;
+ shortcut: string | null;
+ onClick?: () => void;
+ icon: JSX.Element;
+ link?: string;
+}) => {
+ if (link) {
+ return (
+
+
+ {icon}
+ {label}
+
+
+ );
+ }
+
+ return (
+
+ );
+};
+
+const WelcomeScreen = ({ actionManager }: { actionManager: ActionManager }) => {
+ const [, setCollabDialogShown] = useAtom(collabDialogShownAtom);
+
+ let subheadingJSX;
+
+ if (isExcalidrawPlusSignedUser) {
+ subheadingJSX = t("welcomeScreen.switchToPlusApp")
+ .split(/(Excalidraw\+)/)
+ .map((bit) => {
+ if (bit === "Excalidraw+") {
+ return (
+
+ Excalidraw+
+
+ );
+ }
+ return bit;
+ });
+ } else {
+ subheadingJSX = t("welcomeScreen.data");
+ }
+
+ return (
+
+
+ {ExcalLogo} Excalidraw
+
+
+ {subheadingJSX}
+
+
+ actionManager.executeAction(actionLoadScene)}
+ shortcut={getShortcutFromShortcutName("loadScene")}
+ icon={LoadIcon}
+ />
+ setCollabDialogShown(true)}
+ icon={UsersIcon}
+ />
+ actionManager.executeAction(actionShortcuts)}
+ label={t("helpDialog.title")}
+ shortcut="?"
+ icon={HelpIcon}
+ />
+ {!isExcalidrawPlusSignedUser && (
+
+ )}
+
+
+ );
+};
+
+export default WelcomeScreen;
diff --git a/src/components/WelcomeScreenDecor.tsx b/src/components/WelcomeScreenDecor.tsx
new file mode 100644
index 00000000..1c7d6cc8
--- /dev/null
+++ b/src/components/WelcomeScreenDecor.tsx
@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+
+const WelcomeScreenDecor = ({
+ children,
+ shouldRender,
+}: {
+ children: ReactNode;
+ shouldRender: boolean;
+}) => (shouldRender ? <>{children} : null);
+
+export default WelcomeScreenDecor;
diff --git a/src/components/icons.tsx b/src/components/icons.tsx
index 9e0ce7e8..fb438eff 100644
--- a/src/components/icons.tsx
+++ b/src/components/icons.tsx
@@ -13,9 +13,6 @@ import clsx from "clsx";
import { Theme } from "../element/types";
import { THEME } from "../constants";
-const activeElementColor = (theme: Theme) =>
- theme === THEME.LIGHT ? oc.orange[4] : oc.orange[9];
-
const iconFillColor = (theme: Theme) => "var(--icon-fill-color)";
const handlerColor = (theme: Theme) =>
@@ -36,6 +33,7 @@ export const createIcon = (
height = width,
mirror,
style,
+ ...rest
} = typeof opts === "number" ? ({ width: opts } as Opts) : opts;
return (
);
};
+const tablerIconProps: Opts = {
+ width: 24,
+ height: 24,
+ fill: "none",
+ strokeWidth: 2,
+ stroke: "currentColor",
+ strokeLinecap: "round",
+ strokeLinejoin: "round",
+} as const;
+
+const modifiedTablerIconProps: Opts = {
+ width: 20,
+ height: 20,
+ fill: "none",
+ stroke: "currentColor",
+ strokeLinecap: "round",
+ strokeLinejoin: "round",
+} as const;
+
+// -----------------------------------------------------------------------------
+
+// tabler-icons: present
+export const PlusPromoIcon = createIcon(
+
+
+
+
+
+
+ ,
+ tablerIconProps,
+);
+
+// tabler-icons: book
+export const LibraryIcon = createIcon(
+
+
+
+
+
+
+
+ ,
+ tablerIconProps,
+);
+
+// tabler-icons: plus
+export const PlusIcon = createIcon(
+
,
+ tablerIconProps,
+);
+
+// tabler-icons: dots-vertical
+export const DotsIcon = createIcon(
+
+
+
+
+
+ ,
+ tablerIconProps,
+);
+
+// tabler-icons: pinned
+export const PinIcon = createIcon(
+
,
+ tablerIconProps,
+);
+
+// tabler-icons: lock-open (via Figma)
+export const UnlockedIcon = createIcon(
+
+
+
+
+
+
+
+
+
+ ,
+ modifiedTablerIconProps,
+);
+
+// tabler-icons: lock (via Figma)
+export const LockedIcon = createIcon(
+
+
+
+
+ ,
+ modifiedTablerIconProps,
+);
+
+// custom
+export const WelcomeScreenMenuArrow = createIcon(
+ <>
+
+
+
+ ,
+ { width: 41, height: 94, fill: "none" },
+);
+
+// custom
+export const WelcomeScreenHelpArrow = createIcon(
+ <>
+
+
+
+ ,
+ { width: 85, height: 71, fill: "none" },
+);
+
+// custom
+export const WelcomeScreenTopToolbarArrow = createIcon(
+ <>
+
+
+
+ ,
+ { width: 38, height: 78, fill: "none" },
+);
+
+// custom
+export const ExcalLogo = createIcon(
+
+
+
+ ,
+ { width: 26, height: 62, fill: "none" },
+);
+
+// custom
+export const SelectionIcon = createIcon(
+
+
+
+
+ ,
+ { fill: "none", width: 22, height: 22, strokeWidth: 1.25 },
+);
+
+// tabler-icons: square
+export const RectangleIcon = createIcon(
+
+
+
+ ,
+ tablerIconProps,
+);
+
+// tabler-icons: square-rotated
+export const DiamondIcon = createIcon(
+
+
+
+ ,
+
+ tablerIconProps,
+);
+
+// tabler-icons: circle
+export const EllipseIcon = createIcon(
+
+
+
+ ,
+
+ tablerIconProps,
+);
+
+// tabler-icons: arrow-narrow-right
+export const ArrowIcon = createIcon(
+
+
+
+
+
+ ,
+ tablerIconProps,
+);
+
+// custom?
+export const LineIcon = createIcon(
+
,
+ modifiedTablerIconProps,
+);
+
+export const PenModeIcon = createIcon(
+
+
+
+
+
+ ,
+ tablerIconProps,
+);
+
+// modified tabler-icons: pencil
+export const FreedrawIcon = createIcon(
+
+
+
+ ,
+
+ modifiedTablerIconProps,
+);
+
+// tabler-icons: typography
+export const TextIcon = createIcon(
+
+
+
+
+
+
+
+ ,
+ tablerIconProps,
+);
+
+// modified tabler-icons: photo
+export const ImageIcon = createIcon(
+
+
+
+
+
+ ,
+ modifiedTablerIconProps,
+);
+
+// tabler-icons: eraser
+export const EraserIcon = createIcon(
+
+
+
+
+ ,
+ tablerIconProps,
+);
+
+export const ZoomInIcon = createIcon(
+
,
+ modifiedTablerIconProps,
+);
+
+export const ZoomOutIcon = createIcon(
+
,
+ modifiedTablerIconProps,
+);
+
+export const TrashIcon = createIcon(
+
,
+ modifiedTablerIconProps,
+);
+
+export const DuplicateIcon = createIcon(
+
+
+
+ ,
+ modifiedTablerIconProps,
+);
+
+export const MoonIcon = createIcon(
+
,
+ modifiedTablerIconProps,
+);
+
+export const SunIcon = createIcon(
+
+
+ ,
+ modifiedTablerIconProps,
+);
+
+export const HamburgerMenuIcon = createIcon(
+
+
+
+
+
+ ,
+ tablerIconProps,
+);
+
+export const ExportIcon = createIcon(
+
,
+ modifiedTablerIconProps,
+);
+
+export const HelpIcon = createIcon(
+
+
+
+
+
+ ,
+ tablerIconProps,
+);
+
+export const ExternalLinkIcon = createIcon(
+
,
+ modifiedTablerIconProps,
+);
+
+export const GithubIcon = createIcon(
+
,
+ modifiedTablerIconProps,
+);
+
+export const DiscordIcon = createIcon(
+
+
+
+ ,
+ modifiedTablerIconProps,
+);
+
+export const TwitterIcon = createIcon(
+
+
+
+ ,
+ tablerIconProps,
+);
+
export const checkIcon = createIcon(
,
{
@@ -59,9 +496,12 @@ export const checkIcon = createIcon(
},
);
-export const link = createIcon(
- "M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z",
- { mirror: true },
+export const LinkIcon = createIcon(
+
+
+
+ ,
+ modifiedTablerIconProps,
);
export const save = createIcon(
@@ -74,9 +514,13 @@ export const saveAs = createIcon(
{ width: 448, height: 512 },
);
-export const load = createIcon(
- "M572.694 292.093L500.27 416.248A63.997 63.997 0 0 1 444.989 448H45.025c-18.523 0-30.064-20.093-20.731-36.093l72.424-124.155A64 64 0 0 1 152 256h399.964c18.523 0 30.064 20.093 20.73 36.093zM152 224h328v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v278.046l69.077-118.418C86.214 242.25 117.989 224 152 224z",
- { width: 576, height: 512, mirror: true },
+// tabler-icon: folder
+export const LoadIcon = createIcon(
+
,
+ modifiedTablerIconProps,
);
export const clipboard = createIcon(
@@ -84,27 +528,21 @@ export const clipboard = createIcon(
{ width: 384, height: 512 },
);
-export const trash = createIcon(
- "M32 464a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128H32zm272-256a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zM432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z",
-
- { width: 448, height: 512 },
-);
-
export const palette = createIcon(
"M204.3 5C104.9 24.4 24.8 104.3 5.2 203.4c-37 187 131.7 326.4 258.8 306.7 41.2-6.4 61.4-54.6 42.5-91.7-23.1-45.4 9.9-98.4 60.9-98.4h79.7c35.8 0 64.8-29.6 64.9-65.3C511.5 97.1 368.1-26.9 204.3 5zM96 320c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm32-128c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128-64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z",
);
-export const exportFile = createIcon(
- "M384 121.9c0-6.3-2.5-12.4-7-16.9L279.1 7c-4.5-4.5-10.6-7-17-7H256v128h128zM571 308l-95.7-96.4c-10.1-10.1-27.4-3-27.4 11.3V288h-64v64h64v65.2c0 14.3 17.3 21.4 27.4 11.3L571 332c6.6-6.6 6.6-17.4 0-24zm-379 28v-32c0-8.8 7.2-16 16-16h176V160H248c-13.2 0-24-10.8-24-24V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V352H208c-8.8 0-16-7.2-16-16z",
- { width: 576, height: 512, mirror: true },
-);
-
-export const exportImage = createIcon(
- <>
-
-
- ,
- { width: 576, height: 512, mirror: true },
+export const ExportImageIcon = createIcon(
+
+
+
+
+
+
+
+
+ ,
+ tablerIconProps,
);
export const exportToFileIcon = createIcon(
@@ -130,14 +568,20 @@ export const menu = createIcon(
"M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z",
);
-export const undo = createIcon(
- "M255.545 8c-66.269.119-126.438 26.233-170.86 68.685L48.971 40.971C33.851 25.851 8 36.559 8 57.941V192c0 13.255 10.745 24 24 24h134.059c21.382 0 32.09-25.851 16.971-40.971l-41.75-41.75c30.864-28.899 70.801-44.907 113.23-45.273 92.398-.798 170.283 73.977 169.484 169.442C423.236 348.009 349.816 424 256 424c-41.127 0-79.997-14.678-110.63-41.556-4.743-4.161-11.906-3.908-16.368.553L89.34 422.659c-4.872 4.872-4.631 12.815.482 17.433C133.798 479.813 192.074 504 256 504c136.966 0 247.999-111.033 248-247.998C504.001 119.193 392.354 7.755 255.545 8z",
- { mirror: true },
+export const UndoIcon = createIcon(
+
,
+ modifiedTablerIconProps,
);
-export const redo = createIcon(
- "M256.455 8c66.269.119 126.437 26.233 170.859 68.685l35.715-35.715C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.75c-30.864-28.899-70.801-44.907-113.23-45.273-92.398-.798-170.283 73.977-169.484 169.442C88.764 348.009 162.184 424 256 424c41.127 0 79.997-14.678 110.629-41.556 4.743-4.161 11.906-3.908 16.368.553l39.662 39.662c4.872 4.872 4.631 12.815-.482 17.433C378.202 479.813 319.926 504 256 504 119.034 504 8.001 392.967 8 256.002 7.999 119.193 119.646 7.755 256.455 8z",
- { mirror: true },
+export const RedoIcon = createIcon(
+
,
+ modifiedTablerIconProps,
);
export const questionCircle = createIcon(
@@ -146,8 +590,11 @@ export const questionCircle = createIcon(
);
export const share = createIcon(
- "M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z",
- { width: 24, height: 24 },
+
,
+ modifiedTablerIconProps,
);
export const shareIOS = createIcon(
@@ -158,7 +605,6 @@ export const shareIOS = createIcon(
export const shareWindows = createIcon(
<>
@@ -183,84 +629,118 @@ export const resetZoom = createIcon(
{ width: 1024 },
);
-export const BringForwardIcon = React.memo(({ theme }: { theme: Theme }) =>
- createIcon(
- <>
+export const BringForwardIcon = createIcon(
+ <>
+
-
- ,
- { width: 24, mirror: true },
- ),
+
+
+
+
+
+
+
+ ,
+ modifiedTablerIconProps,
);
-export const SendBackwardIcon = React.memo(({ theme }: { theme: Theme }) =>
- createIcon(
- <>
+export const SendBackwardIcon = createIcon(
+ <>
+
-
- ,
- { width: 24, mirror: true },
- ),
+
+
+
+
+
+
+
+ ,
+ modifiedTablerIconProps,
);
-export const BringToFrontIcon = React.memo(({ theme }: { theme: Theme }) =>
- createIcon(
- <>
+export const BringToFrontIcon = createIcon(
+ <>
+
-
- ,
- { width: 24, mirror: true },
- ),
+
+
+
+
+
+
+
+ ,
+ modifiedTablerIconProps,
);
-export const SendToBackIcon = React.memo(({ theme }: { theme: Theme }) =>
- createIcon(
- <>
+export const SendToBackIcon = createIcon(
+ <>
+
- ,
- { width: 24, mirror: true },
- ),
+
+
+
+
+
+
+
+
+
+
+
+
+ ,
+ modifiedTablerIconProps,
);
//
@@ -269,181 +749,167 @@ export const SendToBackIcon = React.memo(({ theme }: { theme: Theme }) =>
// first one the user sees. Horizontal align icons should not be flipped since
// that would make them lie about their function.
//
-export const AlignTopIcon = React.memo(({ theme }: { theme: Theme }) =>
- createIcon(
- <>
+export const AlignTopIcon = createIcon(
+ <>
+
-
- ,
- { width: 24, mirror: true },
- ),
+
+
+
+
+
+
+
+ ,
+ modifiedTablerIconProps,
);
-export const AlignBottomIcon = React.memo(({ theme }: { theme: Theme }) =>
- createIcon(
- <>
+export const AlignBottomIcon = createIcon(
+ <>
+
-
- ,
- { width: 24, mirror: true },
- ),
+
+
+
+
+
+
+
+ ,
+ modifiedTablerIconProps,
);
-export const AlignLeftIcon = React.memo(({ theme }: { theme: Theme }) =>
- createIcon(
- <>
+export const AlignLeftIcon = createIcon(
+ <>
+
-
- ,
- { width: 24 },
- ),
+
+
+
+
+
+
+
+ ,
+ modifiedTablerIconProps,
);
-export const AlignRightIcon = React.memo(({ theme }: { theme: Theme }) =>
- createIcon(
- <>
+export const AlignRightIcon = createIcon(
+ <>
+
-
- ,
- { width: 24 },
- ),
+
+
+
+
+
+
+
+ ,
+ modifiedTablerIconProps,
);
-export const DistributeHorizontallyIcon = React.memo(
- ({ theme }: { theme: Theme }) =>
- createIcon(
- <>
-
-
- ,
- { width: 24 },
- ),
-);
-
-export const DistributeVerticallyIcon = React.memo(
- ({ theme }: { theme: Theme }) =>
- createIcon(
- <>
-
-
- ,
- { width: 24 },
- ),
-);
-
-export const CenterVerticallyIcon = React.memo(({ theme }: { theme: Theme }) =>
- createIcon(
- <>
+export const DistributeHorizontallyIcon = createIcon(
+ <>
+
-
- ,
- { width: 24, mirror: true },
- ),
+
+
+
+
+
+
+
+ ,
+ modifiedTablerIconProps,
);
-export const CenterHorizontallyIcon = React.memo(
- ({ theme }: { theme: Theme }) =>
- createIcon(
- <>
-
-
- ,
- { width: 24 },
- ),
+export const DistributeVerticallyIcon = createIcon(
+ <>
+
+
+
+
+
+
+
+
+
+ ,
+ modifiedTablerIconProps,
);
-export const users = createIcon(
- "M192 256c61.9 0 112-50.1 112-112S253.9 32 192 32 80 82.1 80 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C51.6 288 0 339.6 0 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zM480 256c53 0 96-43 96-96s-43-96-96-96-96 43-96 96 43 96 96 96zm48 32h-3.8c-13.9 4.8-28.6 8-44.2 8s-30.3-3.2-44.2-8H432c-20.4 0-39.2 5.9-55.7 15.4 24.4 26.3 39.7 61.2 39.7 99.8v38.4c0 2.2-.5 4.3-.6 6.4H592c26.5 0 48-21.5 48-48 0-61.9-50.1-112-112-112z",
- { width: 640, height: 512, mirror: true },
+export const CenterVerticallyIcon = createIcon(
+ <>
+
+
+
+
+
+
+
+
+
+
+
+ ,
+ modifiedTablerIconProps,
+);
+
+export const CenterHorizontallyIcon = createIcon(
+ <>
+
+
+
+
+
+
+
+
+
+
+
+ ,
+ modifiedTablerIconProps,
+);
+
+export const UsersIcon = createIcon(
+
+
+
+
+
+
+ ,
+ tablerIconProps,
);
// not mirrored because it's inspired by a playback control, which is always RTL
@@ -455,9 +921,24 @@ export const stop = createIcon(
"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm96 328c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V176c0-8.8 7.2-16 16-16h160c8.8 0 16 7.2 16 16v160z",
);
-export const close = createIcon(
- "M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z",
- { width: 352, height: 512 },
+export const CloseIcon = createIcon(
+ <>
+
+
+
+
+
+
+
+
+ ,
+ modifiedTablerIconProps,
);
export const back = createIcon(
@@ -481,6 +962,8 @@ export const file = createIcon(
{ width: 384, height: 512 },
);
+// TODO barnabasmolnar/editor-redesign
+// couldn't find a new icon for this
export const GroupIcon = React.memo(({ theme }: { theme: Theme }) =>
createIcon(
<>
@@ -543,47 +1026,134 @@ export const UngroupIcon = React.memo(({ theme }: { theme: Theme }) =>
),
);
-export const FillHachureIcon = React.memo(({ theme }: { theme: Theme }) =>
- createIcon(
+export const FillHachureIcon = createIcon(
+ <>
,
- { width: 40, height: 20 },
- ),
-);
-
-export const FillCrossHatchIcon = React.memo(({ theme }: { theme: Theme }) =>
- createIcon(
-
-
-
- ,
- { width: 40, height: 20 },
- ),
-);
-
-export const FillSolidIcon = React.memo(({ theme }: { theme: Theme }) =>
- createIcon(
, {
- width: 40,
- height: 20,
- }),
-);
-
-export const StrokeWidthIcon = React.memo(
- ({ theme, strokeWidth }: { theme: Theme; strokeWidth: number }) =>
- createIcon(
+ d="M5.879 2.625h8.242a3.254 3.254 0 0 1 3.254 3.254v8.242a3.254 3.254 0 0 1-3.254 3.254H5.88a3.254 3.254 0 0 1-3.254-3.254V5.88a3.254 3.254 0 0 1 3.254-3.254Z"
+ stroke="currentColor"
+ strokeWidth="1.25"
+ />
+
+
+
+ ,
- { width: 40, height: 20 },
- ),
+ strokeLinejoin="round"
+ />
+
+ ,
+ modifiedTablerIconProps,
+);
+
+export const FillCrossHatchIcon = createIcon(
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ,
+ modifiedTablerIconProps,
+);
+
+export const FillSolidIcon = createIcon(
+ <>
+
+
+
+
+
+
+
+
+ ,
+ { ...modifiedTablerIconProps, fill: "currentColor" },
+);
+
+export const StrokeWidthBaseIcon = createIcon(
+ <>
+
+ ,
+ modifiedTablerIconProps,
+);
+
+export const StrokeWidthBoldIcon = createIcon(
+
,
+ modifiedTablerIconProps,
+);
+
+export const StrokeWidthExtraBoldIcon = createIcon(
+
,
+ modifiedTablerIconProps,
);
export const StrokeStyleSolidIcon = React.memo(({ theme }: { theme: Theme }) =>
@@ -602,122 +1172,110 @@ export const StrokeStyleSolidIcon = React.memo(({ theme }: { theme: Theme }) =>
),
);
-export const StrokeStyleDashedIcon = React.memo(({ theme }: { theme: Theme }) =>
- createIcon(
-
,
- { width: 40, height: 20 },
- ),
+export const StrokeStyleDashedIcon = createIcon(
+
+
+
+
+
+ ,
+ tablerIconProps,
);
-export const StrokeStyleDottedIcon = React.memo(({ theme }: { theme: Theme }) =>
- createIcon(
-
,
- { width: 40, height: 20 },
- ),
+// tabler-icons: line-dotted
+export const StrokeStyleDottedIcon = createIcon(
+
+
+
+
+
+
+
+ ,
+ tablerIconProps,
);
-export const SloppinessArchitectIcon = React.memo(
- ({ theme }: { theme: Theme }) =>
- createIcon(
-
,
- { width: 40, height: 20, mirror: true },
- ),
+export const SloppinessArchitectIcon = createIcon(
+
,
+ modifiedTablerIconProps,
);
-export const SloppinessArtistIcon = React.memo(({ theme }: { theme: Theme }) =>
- createIcon(
-
,
- { width: 40, height: 20, mirror: true },
- ),
+export const SloppinessArtistIcon = createIcon(
+
,
+ modifiedTablerIconProps,
);
-export const SloppinessCartoonistIcon = React.memo(
- ({ theme }: { theme: Theme }) =>
- createIcon(
-
,
- { width: 40, height: 20, mirror: true },
- ),
+export const SloppinessCartoonistIcon = createIcon(
+
,
+ modifiedTablerIconProps,
);
-export const EdgeSharpIcon = React.memo(({ theme }: { theme: Theme }) =>
- createIcon(
-
,
- { width: 40, height: 20, mirror: true },
- ),
+export const EdgeSharpIcon = createIcon(
+
,
+ modifiedTablerIconProps,
);
-export const EdgeRoundIcon = React.memo(({ theme }: { theme: Theme }) =>
- createIcon(
-
,
- { width: 40, height: 20, mirror: true },
- ),
+// tabler-icons: border-radius
+export const EdgeRoundIcon = createIcon(
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ,
+ tablerIconProps,
);
-export const ArrowheadNoneIcon = React.memo(({ theme }: { theme: Theme }) =>
- createIcon(
-
,
- {
- width: 40,
- height: 20,
- },
- ),
+export const ArrowheadNoneIcon = createIcon(
+
,
+ {
+ width: 40,
+ height: 20,
+ },
);
export const ArrowheadArrowIcon = React.memo(
- ({ theme, flip = false }: { theme: Theme; flip?: boolean }) =>
+ ({ flip = false }: { flip?: boolean }) =>
createIcon(
@@ -729,11 +1287,11 @@ export const ArrowheadArrowIcon = React.memo(
);
export const ArrowheadDotIcon = React.memo(
- ({ theme, flip = false }: { theme: Theme; flip?: boolean }) =>
+ ({ flip = false }: { flip?: boolean }) =>
createIcon(
@@ -744,12 +1302,12 @@ export const ArrowheadDotIcon = React.memo(
);
export const ArrowheadBarIcon = React.memo(
- ({ theme, flip = false }: { theme: Theme; flip?: boolean }) =>
+ ({ flip = false }: { flip?: boolean }) =>
createIcon(
@@ -759,11 +1317,11 @@ export const ArrowheadBarIcon = React.memo(
);
export const ArrowheadTriangleIcon = React.memo(
- ({ theme, flip = false }: { theme: Theme; flip?: boolean }) =>
+ ({ flip = false }: { flip?: boolean }) =>
createIcon(
@@ -773,149 +1331,211 @@ export const ArrowheadTriangleIcon = React.memo(
),
);
-export const FontSizeSmallIcon = React.memo(({ theme }: { theme: Theme }) =>
- createIcon(
- ,
- { width: 47, height: 77 },
- ),
-);
-
-export const FontSizeMediumIcon = React.memo(({ theme }: { theme: Theme }) =>
- createIcon(
- ,
- { width: 77, height: 75 },
- ),
-);
-
-export const FontSizeLargeIcon = React.memo(({ theme }: { theme: Theme }) =>
- createIcon(
- ,
- { width: 45, height: 75 },
- ),
-);
-
-export const FontSizeExtraLargeIcon = React.memo(
- ({ theme }: { theme: Theme }) =>
- createIcon(
+export const FontSizeSmallIcon = createIcon(
+ <>
+
,
- { width: 120, height: 75 },
- ),
-);
-
-export const FontFamilyHandDrawnIcon = React.memo(
- ({ theme }: { theme: Theme }) =>
- createIcon(
- ,
- { width: 448, height: 512 },
- ),
-);
-
-export const FontFamilyNormalIcon = React.memo(({ theme }: { theme: Theme }) =>
- createIcon(
- <>
-
-
- ,
- { width: 70, height: 78 },
- ),
+
+
+
+
+
+
+ ,
+ modifiedTablerIconProps,
);
-export const FontFamilyCodeIcon = React.memo(({ theme }: { theme: Theme }) =>
- createIcon(
- <>
+export const FontSizeMediumIcon = createIcon(
+ <>
+
- ,
- { width: 640, height: 512 },
- ),
+
+
+
+
+
+
+ ,
+ modifiedTablerIconProps,
);
-export const TextAlignLeftIcon = React.memo(({ theme }: { theme: Theme }) =>
- createIcon(
+export const FontSizeLargeIcon = createIcon(
+ <>
+
+
+
+
+
+
+
+
+ ,
+ modifiedTablerIconProps,
+);
+
+export const FontSizeExtraLargeIcon = createIcon(
+ <>
,
- { width: 448, height: 512 },
- ),
+ strokeLinejoin="round"
+ />
+ ,
+ modifiedTablerIconProps,
);
-export const TextAlignCenterIcon = React.memo(({ theme }: { theme: Theme }) =>
- createIcon(
- ,
- { width: 448, height: 512 },
- ),
-);
-
-export const TextAlignRightIcon = React.memo(({ theme }: { theme: Theme }) =>
- createIcon(
-
+ ,
- { width: 448, height: 512 },
- ),
+ strokeLinejoin="round"
+ >
+
+
+ ,
+ modifiedTablerIconProps,
);
+export const FontFamilyCodeIcon = createIcon(
+ <>
+
+
+
+
+
+
+
+
+ ,
+ modifiedTablerIconProps,
+);
+
+export const TextAlignLeftIcon = createIcon(
+
+
+
+
+
+ ,
+ tablerIconProps,
+);
+
+export const TextAlignCenterIcon = createIcon(
+
+
+
+
+
+ ,
+ tablerIconProps,
+);
+
+export const TextAlignRightIcon = createIcon(
+
+
+
+
+
+ ,
+ tablerIconProps,
+);
+
+// tabler-icons: layout-align-top
export const TextAlignTopIcon = React.memo(({ theme }: { theme: Theme }) =>
createIcon(
- ,
- { width: 448, height: 512 },
+
+
+
+
+ ,
+ tablerIconProps,
),
);
+// tabler-icons: layout-align-bottom
export const TextAlignBottomIcon = React.memo(({ theme }: { theme: Theme }) =>
createIcon(
- ,
- { width: 448, height: 512 },
+
+
+
+
+ ,
+ tablerIconProps,
),
);
+// tabler-icons: layout-align-middle
export const TextAlignMiddleIcon = React.memo(({ theme }: { theme: Theme }) =>
createIcon(
- ,
- { width: 448, height: 512 },
+
+
+
+
+
+ ,
+ tablerIconProps,
),
);
@@ -927,14 +1547,6 @@ export const publishIcon = createIcon(
{ width: 640, height: 512 },
);
-export const editIcon = createIcon(
- ,
- { width: 640, height: 512 },
-);
-
export const eraser = createIcon(
,
);
diff --git a/src/css/styles.scss b/src/css/styles.scss
index 920f7e7a..7bceb1ce 100644
--- a/src/css/styles.scss
+++ b/src/css/styles.scss
@@ -19,6 +19,10 @@
height: 100%;
width: 100%;
+ button {
+ cursor: pointer;
+ }
+
&:focus {
outline: none;
}
@@ -85,15 +89,16 @@
.panelColumn {
display: flex;
flex-direction: column;
+ row-gap: 0.75rem;
h3,
legend,
.control-label {
- margin-top: 0.333rem;
- margin-bottom: 0.333rem;
+ margin: 0;
+ margin-bottom: 0.25rem;
font-size: 0.75rem;
color: var(--text-primary-color);
- font-weight: bold;
+ font-weight: normal;
display: block;
}
@@ -102,12 +107,6 @@
width: 100%;
}
- h3:first-child,
- legend:first-child,
- .control-label:first-child {
- margin-top: 0;
- }
-
legend {
padding: 0;
}
@@ -119,11 +118,12 @@
.buttonList {
flex-wrap: wrap;
+ display: flex;
+ column-gap: 0.5rem;
+ row-gap: 0.5rem;
label {
- margin-right: 0.25rem;
font-size: 0.75rem;
- display: inline-block;
}
input[type="radio"],
@@ -136,38 +136,10 @@
.iconRow {
margin-top: 8px;
}
-
- .ToolIcon {
- margin: 0;
- margin-inline-end: 8px;
-
- &:focus {
- outline: transparent;
- box-shadow: 0 0 0 2px var(--focus-highlight-color);
- }
-
- &:hover {
- background-color: var(--button-gray-2);
- }
-
- &:active {
- background-color: var(--button-gray-3);
- }
-
- &:disabled {
- cursor: not-allowed;
- }
- }
-
- .ToolIcon__icon {
- width: 28px;
- height: 28px;
- }
}
fieldset {
margin: 0;
- margin-top: 0.333rem;
padding: 0;
border: none;
}
@@ -185,64 +157,26 @@
box-shadow: 0 0 0 2px var(--focus-highlight-color);
}
- button,
- .buttonList label {
- user-select: none;
- background-color: var(--button-gray-1);
- border: 0;
- border-radius: var(--border-radius-md);
- margin: 0.125rem 0;
- padding: 0.25rem;
- white-space: nowrap;
-
- cursor: pointer;
-
- &:focus-visible {
- outline: transparent;
- box-shadow: 0 0 0 2px var(--focus-highlight-color);
+ .buttonList {
+ .ToolIcon__icon {
+ all: unset !important;
+ display: flex !important;
}
- &:hover {
- background-color: var(--button-gray-2);
+ button {
+ background-color: transparent;
}
- &:active {
- background-color: var(--button-gray-3);
- }
+ label,
+ button,
+ .zIndexButton {
+ @include outlineButtonStyles;
- &:disabled {
- cursor: not-allowed;
- }
- }
+ padding: 0;
- .active,
- .buttonList label.active {
- background-color: var(--color-primary);
-
- --icon-fill-color: #{$oc-white};
-
- &:hover {
- background-color: var(--color-primary-darker);
- }
-
- &:active {
- background-color: var(--color-primary-darkest);
- }
- }
-
- .buttonList.buttonListIcon {
- label {
- display: inline-flex;
- justify-content: center;
- align-items: center;
svg {
- width: 35px;
- height: 14px;
- padding: 2px;
- opacity: 0.6;
- }
- &.active svg {
- opacity: 1;
+ width: var(--default-icon-size);
+ height: var(--default-icon-size);
}
}
}
@@ -289,8 +223,6 @@
.App-toolbar {
width: 100%;
- box-sizing: border-box;
-
.eraser {
&.ToolIcon:hover {
--icon-fill-color: #fff;
@@ -322,12 +254,27 @@
color: var(--icon-fill-color);
}
+ .shapes-section {
+ display: flex;
+ justify-content: center;
+ pointer-events: none !important;
+
+ & > * {
+ pointer-events: all;
+ }
+ }
+
.App-menu_top {
- grid-template-columns: auto max-content auto;
- grid-gap: 4px;
+ grid-template-columns: 1fr 2fr 1fr;
+ grid-gap: 2rem;
align-items: flex-start;
cursor: default;
pointer-events: none !important;
+
+ @media (min-width: 1536px) {
+ grid-template-columns: 1fr 1fr 1fr;
+ grid-gap: 3rem;
+ }
}
.layer-ui__wrapper:not(.disable-pointerEvents) .App-menu_top > * {
@@ -344,20 +291,14 @@
.App-menu_bottom {
position: absolute;
- bottom: 0;
- grid-template-columns: min-content auto min-content;
- grid-gap: 15px;
+ bottom: 1rem;
+ display: flex;
+ justify-content: space-between;
align-items: flex-start;
cursor: default;
pointer-events: none !important;
-
- :root[dir="ltr"] & {
- left: 0.25rem;
- }
-
- :root[dir="rtl"] & {
- right: 0.25rem;
- }
+ box-sizing: border-box;
+ padding: 0 1rem;
&--transition-left {
section {
@@ -390,7 +331,10 @@
.App-menu__left {
overflow-y: auto;
- box-shadow: var(--shadow-island);
+ padding: 0.75rem;
+ width: 202px;
+ box-sizing: border-box;
+ position: absolute;
}
.dropdown-select {
@@ -426,55 +370,65 @@
&:active {
background-color: var(--button-gray-2);
}
+
+ &__language {
+ height: 2rem;
+ background-color: var(--island-bg-color);
+ border-color: var(--default-border-color) !important;
+ cursor: pointer;
+
+ &:hover {
+ background-color: var(--island-bg-color);
+ }
+ }
}
- .zIndexButton {
- margin: 0;
- margin-inline-end: 8px;
- padding: 5px;
- display: inline-flex;
- align-items: center;
- justify-content: center;
+ .disable-zen-mode {
+ border-radius: var(--border-radius-lg);
+ background-color: var(--color-gray-20);
+ border: 1px solid var(--color-gray-30);
+ padding: 10px 20px;
- svg {
- width: 18px;
- height: 18px;
+ &:hover {
+ background-color: var(--color-gray-30);
}
}
.scroll-back-to-content {
- color: var(--popup-text-color);
+ border-radius: var(--border-radius-lg);
+ background-color: var(--island-bg-color);
+ color: var(--icon-fill-color);
+
+ border: 1px solid var(--default-border-color);
+ padding: 10px 20px;
position: absolute;
left: 50%;
bottom: 30px;
transform: translateX(-50%);
- padding: 10px 20px;
pointer-events: all;
+
+ &:hover {
+ background-color: var(--button-hover);
+ }
+
+ &:active {
+ border: 1px solid var(--color-primary-darkest);
+ }
}
.help-icon {
- display: flex;
- cursor: pointer;
- fill: $oc-gray-6;
- padding: 0;
- margin: 0;
- background: none;
- color: var(--icon-fill-color);
+ @include outlineButtonStyles;
+ background-color: var(--island-bg-color);
+ width: var(--lg-button-size);
+ height: var(--lg-button-size);
svg {
- width: 1.5rem;
- height: 1.5rem;
- }
-
- &:hover {
- background: none;
+ width: var(--lg-icon-size);
+ height: var(--lg-icon-size);
}
}
.reset-zoom-button {
- padding: 0.2em;
- background: transparent;
- color: var(--text-primary-color);
font-family: var(--ui-font);
}
@@ -491,7 +445,6 @@
.eraser-buttons {
display: grid;
grid-auto-flow: column;
- gap: 0.4em;
margin-top: auto;
margin-bottom: auto;
margin-inline-start: 0.6em;
@@ -572,17 +525,49 @@
// use custom, minimalistic scrollbar
// (doesn't work in Firefox)
::-webkit-scrollbar {
- width: 5px;
+ width: 3px;
}
+
::-webkit-scrollbar-thumb {
- background: var(--button-gray-2);
+ background: var(--scrollbar-thumb);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
- background: var(--button-gray-3);
+ background: var(--scrollbar-thumb-hover);
}
::-webkit-scrollbar-thumb:active {
- background: var(--button-gray-2);
+ background: var(--scrollbar-thumb);
+ }
+
+ .mobile-misc-tools-container {
+ position: fixed;
+ top: 5rem;
+ right: 0;
+ display: flex;
+ flex-direction: column;
+ border: 1px solid var(--sidebar-border-color);
+ border-top-left-radius: var(--border-radius-lg);
+ border-bottom-left-radius: var(--border-radius-lg);
+ border-right: 0;
+
+ background-color: var(--island-bg-color);
+
+ .ToolIcon__icon {
+ border-radius: 0;
+ }
+
+ .library-button {
+ border: 0;
+ }
+ }
+
+ .App-toolbar--mobile {
+ overflow-x: hidden;
+ max-width: 100vw;
+
+ .ToolIcon__keybinding {
+ display: none;
+ }
}
}
diff --git a/src/css/theme.scss b/src/css/theme.scss
index 1827a74b..aaa8da5b 100644
--- a/src/css/theme.scss
+++ b/src/css/theme.scss
@@ -9,10 +9,10 @@
--button-gray-2: #{$oc-gray-4};
--button-gray-3: #{$oc-gray-5};
--button-special-active-bg-color: #{$oc-green-0};
- --dialog-border-color: #{$oc-gray-6};
+ --dialog-border-color: var(--color-gray-20);
--dropdown-icon: url('data:image/svg+xml,');
--focus-highlight-color: #{$oc-blue-2};
- --icon-fill-color: #{$oc-gray-9};
+ --icon-fill-color: var(--color-gray-80);
--icon-green-fill-color: #{$oc-green-9};
--default-bg-color: #{$oc-white};
--input-bg-color: #{$oc-white};
@@ -20,7 +20,7 @@
--input-hover-bg-color: #{$oc-gray-1};
--input-label-color: #{$oc-gray-7};
--island-bg-color: rgba(255, 255, 255, 0.96);
- --keybinding-color: #{$oc-gray-5};
+ --keybinding-color: var(--color-gray-40);
--link-color: #{$oc-blue-7};
--overlay-bg-color: #{transparentize($oc-white, 0.12)};
--popup-bg-color: #{$oc-white};
@@ -32,22 +32,75 @@
--sar: env(safe-area-inset-right);
--sat: env(safe-area-inset-top);
--select-highlight-color: #{$oc-blue-5};
- --shadow-island: 0 0 0 1px rgba(0, 0, 0, 0.01), 1px 1px 5px rgb(0 0 0 / 12%);
+ --shadow-island: 0px 7px 14px rgba(0, 0, 0, 0.05),
+ 0px 0px 3.12708px rgba(0, 0, 0, 0.0798),
+ 0px 0px 0.931014px rgba(0, 0, 0, 0.1702);
+ --button-hover: var(--color-gray-10);
+ --default-border-color: var(--color-gray-30);
+
+ --default-button-size: 2rem;
+ --default-icon-size: 1rem;
+ --lg-button-size: 2.25rem;
+ --lg-icon-size: 1rem;
+
+ @media screen and (min-device-width: 1921px) {
+ --lg-button-size: 2.5rem;
+ --lg-icon-size: 1.25rem;
+ --default-button-size: 2.25rem;
+ --default-icon-size: 1.25rem;
+ }
+
+ --scrollbar-thumb: var(--button-gray-2);
+ --scrollbar-thumb-hover: var(--button-gray-3);
+
+ --modal-shadow: 0px 100px 80px rgba(0, 0, 0, 0.07),
+ 0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198),
+ 0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275),
+ 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035),
+ 0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725),
+ 0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802);
+ --avatar-border-color: var(--color-gray-20);
+ --sidebar-shadow: 0px 100px 80px rgba(0, 0, 0, 0.07),
+ 0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198),
+ 0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275),
+ 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035),
+ 0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725),
+ 0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802);
+ --sidebar-border-color: var(--color-gray-20);
+ --sidebar-bg-color: #fff;
+ --library-dropdown-shadow: 0px 15px 6px rgba(0, 0, 0, 0.01),
+ 0px 8px 5px rgba(0, 0, 0, 0.05), 0px 4px 4px rgba(0, 0, 0, 0.09),
+ 0px 1px 2px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
--space-factor: 0.25rem;
- --text-primary-color: #{$oc-gray-8};
+ --text-primary-color: var(--color-gray-80);
+
+ --color-selection: #6965db;
--color-primary: #6965db;
--color-primary-darker: #5b57d1;
--color-primary-darkest: #4a47b1;
- --color-primary-light: #e2e1fc;
+ --color-primary-light: #e3e2fe;
+
+ --color-gray-10: #f5f5f5;
+ --color-gray-20: #ebebeb;
+ --color-gray-30: #d6d6d6;
+ --color-gray-40: #b8b8b8;
+ --color-gray-50: #999999;
+ --color-gray-60: #7a7a7a;
+ --color-gray-70: #5c5c5c;
+ --color-gray-80: #3d3d3d;
+ --color-gray-85: #242424;
+ --color-gray-90: #1e1e1e;
+ --color-gray-100: #121212;
+
+ --color-danger: #db6965;
+ --color-promo: #e70078;
--border-radius-md: 0.375rem;
--border-radius-lg: 0.5rem;
&.theme--dark {
- background: $oc-black;
-
&.theme--dark-background-none {
background: none;
}
@@ -57,22 +110,23 @@
--theme-filter: #{$theme-filter};
--button-destructive-bg-color: #5a0000;
--button-destructive-color: #{$oc-red-3};
+
--button-gray-1: #363636;
--button-gray-2: #272727;
--button-gray-3: #222;
--button-special-active-bg-color: #204624;
- --dialog-border-color: #{$oc-gray-9};
+ --dialog-border-color: var(--color-gray-80);
--dropdown-icon: url('data:image/svg+xml,');
--focus-highlight-color: #{$oc-blue-6};
- --icon-fill-color: #{$oc-gray-4};
+ --icon-fill-color: var(--color-gray-40);
--icon-green-fill-color: #{$oc-green-4};
--default-bg-color: #121212;
--input-bg-color: #121212;
--input-border-color: #2e2e2e;
--input-hover-bg-color: #181818;
--input-label-color: #{$oc-gray-2};
- --island-bg-color: rgba(30, 30, 30, 0.98);
- --keybinding-color: #{$oc-gray-6};
+ --island-bg-color: #262627;
+ --keybinding-color: var(--color-gray-60);
--link-color: #{$oc-blue-4};
--overlay-bg-color: #{transparentize($oc-gray-8, 0.88)};
--popup-bg-color: #2c2c2c;
@@ -80,12 +134,35 @@
--popup-text-color: #{$oc-gray-4};
--popup-text-inverted-color: #2c2c2c;
--select-highlight-color: #{$oc-blue-4};
- --shadow-island: 1px 1px 5px #{transparentize($oc-black, 0.7)};
- --text-primary-color: #{$oc-gray-4};
+ --text-primary-color: var(--color-gray-40);
+ --button-hover: var(--color-gray-80);
+ --default-border-color: var(--color-gray-80);
+ --shadow-island: 0px 13px 33px rgba(0, 0, 0, 0.07),
+ 0px 4.13px 9.94853px rgba(0, 0, 0, 0.0456112),
+ 0px 1.13px 4.13211px rgba(0, 0, 0, 0.035),
+ 0px 0.769896px 1.4945px rgba(0, 0, 0, 0.0243888);
+ --modal-shadow: 0px 100px 80px rgba(0, 0, 0, 0.07),
+ 0px 41.7776px 33.4221px rgba(0, 0, 0, 0.0503198),
+ 0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275),
+ 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035),
+ 0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725),
+ 0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802);
+ --avatar-border-color: var(--color-gray-85);
+ --sidebar-border-color: var(--color-gray-85);
+ --sidebar-bg-color: #191919;
- --color-primary: #5650f0;
- --color-primary-darker: #4b46d8;
- --color-primary-darkest: #3e39be;
- --color-primary-light: #3f3d64;
+ --scrollbar-thumb: #{$oc-gray-8};
+ --scrollbar-thumb-hover: #{$oc-gray-7};
+
+ // will be inverted to a lighter color.
+ --color-selection: #3530c4;
+
+ --color-primary: #a8a5ff;
+ --color-primary-darker: #b2aeff;
+ --color-primary-darkest: #beb9ff;
+ --color-primary-light: #4f4d6f;
+
+ --color-danger: #ffa8a5;
+ --color-promo: #d297ff;
}
}
diff --git a/src/css/variables.module.scss b/src/css/variables.module.scss
index 4c90fd13..5a367ffe 100644
--- a/src/css/variables.module.scss
+++ b/src/css/variables.module.scss
@@ -7,18 +7,28 @@
}
@mixin toolbarButtonColorStates {
+ &.fillable {
+ .ToolIcon_type_radio,
+ .ToolIcon_type_checkbox {
+ &:checked + .ToolIcon__icon {
+ --icon-fill-color: var(--color-primary-darker);
+
+ svg {
+ fill: var(--icon-fill-color);
+ }
+ }
+ }
+ }
+
.ToolIcon_type_radio,
.ToolIcon_type_checkbox {
- & + .ToolIcon__icon:active {
- background: var(--color-primary-light);
- }
&:checked + .ToolIcon__icon {
- background: var(--color-primary);
- --icon-fill-color: #{$oc-white};
- --keybinding-color: #{$oc-white};
- }
- &:checked + .ToolIcon__icon:active {
- background: var(--color-primary-darker);
+ background: var(--color-primary-light);
+ --keybinding-color: var(--color-gray-60);
+
+ svg {
+ color: var(--color-primary-darker);
+ }
}
}
@@ -26,6 +36,56 @@
bottom: 4px;
right: 4px;
}
+
+ .ToolIcon__icon {
+ &:hover {
+ background: var(--button-hover);
+ }
+
+ &:active {
+ background: var(--button-hover);
+ border: 1px solid var(--color-primary-darkest);
+ }
+ }
+}
+
+@mixin outlineButtonStyles {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 0.625rem;
+ width: var(--default-button-size);
+ height: var(--default-button-size);
+ box-sizing: border-box;
+ border-width: 1px;
+ border-style: solid;
+ border-color: var(--default-border-color);
+ border-radius: var(--border-radius-lg);
+ cursor: pointer;
+ background-color: transparent;
+ color: var(--text-primary-color);
+
+ &:hover {
+ background-color: var(--button-hover);
+ }
+
+ &:active {
+ background-color: var(--button-hover);
+ border-color: var(--color-primary-darkest);
+ }
+
+ &.active {
+ background-color: var(--color-primary-light);
+ border-color: var(--color-primary-light);
+
+ &:hover {
+ background-color: var(--color-primary-light);
+ }
+
+ svg {
+ color: var(--color-primary-darker);
+ }
+ }
}
$theme-filter: "invert(93%) hue-rotate(180deg)";
diff --git a/src/element/Hyperlink.tsx b/src/element/Hyperlink.tsx
index 37ed2b09..a2540383 100644
--- a/src/element/Hyperlink.tsx
+++ b/src/element/Hyperlink.tsx
@@ -10,7 +10,7 @@ import { NonDeletedExcalidrawElement } from "./types";
import { register } from "../actions/register";
import { ToolButton } from "../components/ToolButton";
-import { editIcon, link, trash } from "../components/icons";
+import { FreedrawIcon, LinkIcon, TrashIcon } from "../components/icons";
import { t } from "../i18n";
import {
useCallback,
@@ -197,7 +197,7 @@ export const Hyperlink = ({
label={t("buttons.edit")}
onClick={onEdit}
className="excalidraw-hyperlinkContainer--edit"
- icon={editIcon}
+ icon={FreedrawIcon}
/>
)}
@@ -209,7 +209,7 @@ export const Hyperlink = ({
label={t("buttons.remove")}
onClick={handleRemove}
className="excalidraw-hyperlinkContainer--remove"
- icon={trash}
+ icon={TrashIcon}
/>
)}
{t("roomDialog.desc_intro")}
{`🔒 ${t("roomDialog.desc_privacy")}`}
- {
trackEvent("share", "room creation", `ui (${getFrame()})`);
onRoomCreate();
}}
- />
+ >
+ {start}
+
)}
@@ -113,6 +111,7 @@ const RoomDialog = ({
{"share" in navigator ? (
) : null}
{t("roomDialog.desc_exitSession")}
- {
trackEvent("share", "room closed");
onRoomDestroy();
}}
- />
+ >
+ {stop}
+
)}
diff --git a/src/excalidraw-app/components/LanguageList.tsx b/src/excalidraw-app/components/LanguageList.tsx
index 84498ea3..375bde62 100644
--- a/src/excalidraw-app/components/LanguageList.tsx
+++ b/src/excalidraw-app/components/LanguageList.tsx
@@ -1,30 +1,30 @@
+import { useAtom } from "jotai";
import React from "react";
+import { langCodeAtom } from "..";
import * as i18n from "../../i18n";
+import { languages } from "../../i18n";
-export const LanguageList = ({
- onChange,
- languages = i18n.languages,
- currentLangCode = i18n.getLanguage().code,
-}: {
- languages?: { code: string; label: string }[];
- onChange: (langCode: i18n.Language["code"]) => void;
- currentLangCode?: i18n.Language["code"];
-}) => (
-
-
+
+ );
+};
diff --git a/src/excalidraw-app/index.scss b/src/excalidraw-app/index.scss
index 3bd16dbc..1ea39c1b 100644
--- a/src/excalidraw-app/index.scss
+++ b/src/excalidraw-app/index.scss
@@ -28,8 +28,7 @@
}
.excalidraw-app.is-collaborating {
[data-testid="clear-canvas-button"] {
- visibility: hidden;
- pointer-events: none;
+ display: none;
}
}
@@ -39,12 +38,15 @@
cursor: pointer;
align-items: center;
border: 1px solid var(--color-primary);
- padding: 0.6em 0.7em;
+ padding: 0.5rem 0.75rem;
border-radius: var(--space-factor);
color: var(--color-primary) !important;
- margin: 8px;
text-decoration: none !important;
+ font-size: 0.75rem;
+ box-sizing: border-box;
+ height: var(--default-button-size);
+
&:hover {
background-color: var(--color-primary);
color: white !important;
@@ -54,3 +56,11 @@
background-color: var(--color-primary-darker);
}
}
+
+.theme--dark {
+ .plus-button {
+ &:hover {
+ color: black !important;
+ }
+ }
+}
diff --git a/src/excalidraw-app/index.tsx b/src/excalidraw-app/index.tsx
index fbc78421..3f78e26b 100644
--- a/src/excalidraw-app/index.tsx
+++ b/src/excalidraw-app/index.tsx
@@ -1,6 +1,6 @@
import polyfill from "../polyfill";
import LanguageDetector from "i18next-browser-languagedetector";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
import { trackEvent } from "../analytics";
import { getDefaultAppState } from "../appState";
import { ErrorDialog } from "../components/ErrorDialog";
@@ -22,11 +22,7 @@ import {
} from "../element/types";
import { useCallbackRefState } from "../hooks/useCallbackRefState";
import { t } from "../i18n";
-import {
- Excalidraw,
- defaultLang,
- languages,
-} from "../packages/excalidraw/index";
+import { Excalidraw, defaultLang } from "../packages/excalidraw/index";
import {
AppState,
LibraryItems,
@@ -68,8 +64,6 @@ import {
} from "./data/localStorage";
import CustomStats from "./CustomStats";
import { restore, restoreAppState, RestoredDataState } from "../data/restore";
-import { Tooltip } from "../components/Tooltip";
-import { shield } from "../components/icons";
import "./index.scss";
import { ExportToExcalidrawPlus } from "./components/ExportToExcalidrawPlus";
@@ -81,10 +75,11 @@ import { loadFilesFromFirebase } from "./data/firebase";
import { LocalData } from "./data/LocalData";
import { isBrowserStorageStateNewer } from "./data/tabSync";
import clsx from "clsx";
-import { Provider, useAtom } from "jotai";
+import { atom, Provider, useAtom } from "jotai";
import { jotaiStore, useAtomWithInitialValue } from "../jotai";
import { reconcileElements } from "./collab/reconciliation";
import { parseLibraryTokensFromUrl, useHandleLibrary } from "../data/library";
+import EncryptedIcon from "../components/EncryptedIcon";
polyfill();
window.EXCALIDRAW_THROTTLE_RENDER = true;
@@ -230,38 +225,16 @@ const initializeScene = async (opts: {
return { scene: null, isExternalScene: false };
};
-const PlusLPLinkJSX = (
-
- Introducing Excalidraw+
-
-
- Try out now!
-
-
-);
+const currentLangCode = languageDetector.detect() || defaultLang.code;
-const PlusAppLinkJSX = (
-
- Go to Excalidraw+
-
+export const langCodeAtom = atom(
+ Array.isArray(currentLangCode) ? currentLangCode[0] : currentLangCode,
);
const ExcalidrawWrapper = () => {
const [errorMessage, setErrorMessage] = useState("");
- let currentLangCode = languageDetector.detect() || defaultLang.code;
- if (Array.isArray(currentLangCode)) {
- currentLangCode = currentLangCode[0];
- }
- const [langCode, setLangCode] = useState(currentLangCode);
+ const [langCode, setLangCode] = useAtom(langCodeAtom);
+
// initial state
// ---------------------------------------------------------------------------
@@ -489,7 +462,7 @@ const ExcalidrawWrapper = () => {
);
clearTimeout(titleTimeout);
};
- }, [collabAPI, excalidrawAPI]);
+ }, [collabAPI, excalidrawAPI, setLangCode]);
useEffect(() => {
const unloadHandler = (event: BeforeUnloadEvent) => {
@@ -603,93 +576,40 @@ const ExcalidrawWrapper = () => {
}
};
- const renderTopRightUI = useCallback(
- (isMobile: boolean, appState: AppState) => {
- if (isMobile) {
- return null;
- }
-
+ const renderFooter = (isMobile: boolean) => {
+ const renderLanguageList = () => ;
+ if (isMobile) {
return (
- {isExcalidrawPlusSignedUser ? PlusAppLinkJSX : PlusLPLinkJSX}
+
+ {t("labels.language")}
+
+
{renderLanguageList()}
+ {isExcalidrawPlusSignedUser && (
+
-
- {/* FIXME remove after 2021-05-20 */}
-
- {isExcalidrawPlusSignedUser ? PlusAppLinkJSX : PlusLPLinkJSX}
-
-
+
+
+
+
+
+
+
@@ -202,7 +171,6 @@ exports[` Test UIOptions prop Test canvasActions should not hide an
exports[` Test UIOptions prop should not hide any UI element when the UIOptions prop is "undefined" 1`] = `
Test UIOptions prop should not hide any UI element when t
Canvas actions
+
+
+
+
+
+
+
diff --git a/src/tests/packages/__snapshots__/utils.test.ts.snap b/src/tests/packages/__snapshots__/utils.test.ts.snap
index 4f1b380e..75397290 100644
--- a/src/tests/packages/__snapshots__/utils.test.ts.snap
+++ b/src/tests/packages/__snapshots__/utils.test.ts.snap
@@ -45,6 +45,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "name",
+ "openDialog": null,
"openMenu": null,
"openPopup": null,
"openSidebar": null,
@@ -65,9 +66,9 @@ Object {
"selectedLinearElement": null,
"selectionElement": null,
"shouldCacheIgnoreZoom": false,
- "showHelpDialog": false,
"showHyperlinkPopup": false,
"showStats": false,
+ "showWelcomeScreen": false,
"startBoundElement": null,
"suggestedBindings": Array [],
"theme": "light",
diff --git a/src/types.ts b/src/types.ts
index c3f89382..52a84ef3 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -78,7 +78,9 @@ export type LastActiveToolBeforeEraser =
customType: string;
}
| null;
+
export type AppState = {
+ showWelcomeScreen: boolean;
isLoading: boolean;
errorMessage: string | null;
draggingElement: NonDeletedExcalidrawElement | null;
@@ -141,13 +143,13 @@ export type AppState = {
| "strokeColorPicker"
| null;
openSidebar: "library" | "customSidebar" | null;
+ openDialog: "imageExport" | "help" | null;
isSidebarDocked: boolean;
lastPointerDownWith: PointerType;
selectedElementIds: { [id: string]: boolean };
previousSelectedElementIds: { [id: string]: boolean };
shouldCacheIgnoreZoom: boolean;
- showHelpDialog: boolean;
toast: { message: string; closable?: boolean; duration?: number } | null;
zenModeEnabled: boolean;
theme: Theme;