diff --git a/.env.development b/.env.development index bd864628e0..7777f7fd81 100644 --- a/.env.development +++ b/.env.development @@ -48,3 +48,6 @@ UNWEjuqNMi/lwAErS9fFa2oJlWyT8U7zzv/5kQREkxZI6y9v0AF3qcbsy2731FnD s9ChJvOUW9toIab2gsIdrKW8ZNpu084ZFVKb6LNjvIXI1Se4oMTHeszXzNptzlot kdxxjOoaQMAyfljFSot1F1FlU6MQlag7UnFGvFjRHN1JI5q4K+n3a67DX+TMyRqS HQIDAQAB' + +# set to true in .env.development.local to disable the prevent unload dialog +VITE_APP_DISABLE_PREVENT_UNLOAD= diff --git a/excalidraw-app/App.tsx b/excalidraw-app/App.tsx index 60e9b30083..bb62a0e96c 100644 --- a/excalidraw-app/App.tsx +++ b/excalidraw-app/App.tsx @@ -608,7 +608,13 @@ const ExcalidrawWrapper = () => { excalidrawAPI.getSceneElements(), ) ) { - preventUnload(event); + if (import.meta.env.VITE_APP_DISABLE_PREVENT_UNLOAD !== "true") { + preventUnload(event); + } else { + console.warn( + "preventing unload disabled (VITE_APP_DISABLE_PREVENT_UNLOAD)", + ); + } } }; window.addEventListener(EVENT.BEFORE_UNLOAD, unloadHandler); diff --git a/excalidraw-app/collab/Collab.tsx b/excalidraw-app/collab/Collab.tsx index f6f7630412..98c66e4257 100644 --- a/excalidraw-app/collab/Collab.tsx +++ b/excalidraw-app/collab/Collab.tsx @@ -301,7 +301,13 @@ class Collab extends PureComponent { // the purpose is to run in immediately after user decides to stay this.saveCollabRoomToFirebase(syncableElements); - preventUnload(event); + if (import.meta.env.VITE_APP_DISABLE_PREVENT_UNLOAD !== "true") { + preventUnload(event); + } else { + console.warn( + "preventing unload disabled (VITE_APP_DISABLE_PREVENT_UNLOAD)", + ); + } } }); diff --git a/packages/excalidraw/components/ColorPicker/ColorPicker.scss b/packages/excalidraw/components/ColorPicker/ColorPicker.scss index 39e1845c3f..bcb39281d1 100644 --- a/packages/excalidraw/components/ColorPicker/ColorPicker.scss +++ b/packages/excalidraw/components/ColorPicker/ColorPicker.scss @@ -15,7 +15,7 @@ .color-picker-container { display: grid; - grid-template-columns: 1fr 20px 1.625rem; + grid-template-columns: 1fr 8px 1.625rem; padding: 0.25rem 0px; align-items: center; @@ -30,13 +30,14 @@ } .color-picker__button { - --radius: 0.25rem; + --radius: 6px; + --size: 1.375rem; padding: 0; - margin: 0; - width: 1.35rem; - height: 1.35rem; - border: 1px solid var(--color-gray-30); + margin: 1px; + width: var(--size); + height: var(--size); + border: 0; border-radius: var(--radius); filter: var(--theme-filter); background-color: var(--swatch-color); @@ -45,16 +46,16 @@ font-family: inherit; box-sizing: border-box; - &:hover { + &:hover:not(.active) { &::after { content: ""; position: absolute; - top: -2px; - left: -2px; - right: -2px; - bottom: -2px; - box-shadow: 0 0 0 1px var(--color-gray-30); - border-radius: calc(var(--radius) + 1px); + top: 0; + left: 0; + right: 0; + bottom: 0; + box-shadow: 0 0 0 1px var(--swatch-color); + border-radius: var(--radius); filter: var(--theme-filter); } } @@ -62,10 +63,11 @@ &.active { .color-picker__button-outline { position: absolute; - top: -2px; - left: -2px; - right: -2px; - bottom: -2px; + --offset: -1px; + top: var(--offset); + left: var(--offset); + right: var(--offset); + bottom: var(--offset); box-shadow: 0 0 0 1px var(--color-primary-darkest); z-index: 1; // due hover state so this has preference border-radius: calc(var(--radius) + 1px); diff --git a/packages/excalidraw/components/Range.scss b/packages/excalidraw/components/Range.scss index 01cb916897..8dcc705fea 100644 --- a/packages/excalidraw/components/Range.scss +++ b/packages/excalidraw/components/Range.scss @@ -6,7 +6,7 @@ .range-wrapper { position: relative; padding-top: 10px; - padding-bottom: 30px; + padding-bottom: 25px; } .range-input { diff --git a/packages/excalidraw/components/Stats/DragInput.scss b/packages/excalidraw/components/Stats/DragInput.scss index 76b9d147b1..f31616d949 100644 --- a/packages/excalidraw/components/Stats/DragInput.scss +++ b/packages/excalidraw/components/Stats/DragInput.scss @@ -2,10 +2,12 @@ .drag-input-container { display: flex; width: 100%; + border-radius: var(--border-radius-lg); &:focus-within { box-shadow: 0 0 0 1px var(--color-primary-darkest); border-radius: var(--border-radius-md); + background: transparent; } } @@ -16,24 +18,14 @@ .drag-input-label { flex-shrink: 0; - border: 1px solid var(--default-border-color); - border-right: 0; - padding: 0 0.5rem 0 0.75rem; + border: 0; + padding: 0 0.5rem 0 0.25rem; min-width: 1rem; + width: 1.5rem; height: 2rem; - box-sizing: border-box; + box-sizing: content-box; color: var(--popup-text-color); - :root[dir="ltr"] & { - border-radius: var(--border-radius-md) 0 0 var(--border-radius-md); - } - - :root[dir="rtl"] & { - border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0; - border-right: 1px solid var(--default-border-color); - border-left: 0; - } - display: flex; align-items: center; justify-content: center; @@ -51,20 +43,8 @@ border: 0; outline: none; height: 2rem; - border: 1px solid var(--default-border-color); - border-left: 0; letter-spacing: 0.4px; - :root[dir="ltr"] & { - border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0; - } - - :root[dir="rtl"] & { - border-radius: var(--border-radius-md) 0 0 var(--border-radius-md); - border-left: 1px solid var(--default-border-color); - border-right: 0; - } - padding: 0.5rem; padding-left: 0.25rem; appearance: none; diff --git a/packages/excalidraw/components/Stats/Stats.scss b/packages/excalidraw/components/Stats/Stats.scss index 106ecf303f..384e0fd3c5 100644 --- a/packages/excalidraw/components/Stats/Stats.scss +++ b/packages/excalidraw/components/Stats/Stats.scss @@ -41,6 +41,10 @@ div + div { text-align: right; } + + &:empty { + display: none; + } } &__row--heading { diff --git a/packages/excalidraw/components/Stats/index.tsx b/packages/excalidraw/components/Stats/index.tsx index 889f789717..11a5d6b5d3 100644 --- a/packages/excalidraw/components/Stats/index.tsx +++ b/packages/excalidraw/components/Stats/index.tsx @@ -289,7 +289,11 @@ export const StatsInner = memo( )} - + {appState.croppingElementId ? t("labels.imageCropping") : t(`element.${singleElement.type}`)} diff --git a/packages/excalidraw/css/styles.scss b/packages/excalidraw/css/styles.scss index 6f1d9cd48c..33f9b4df04 100644 --- a/packages/excalidraw/css/styles.scss +++ b/packages/excalidraw/css/styles.scss @@ -173,7 +173,7 @@ body.excalidraw-cursor-resize * { .buttonList { flex-wrap: wrap; display: flex; - column-gap: 0.5rem; + column-gap: 0.375rem; row-gap: 0.5rem; label { @@ -386,10 +386,16 @@ body.excalidraw-cursor-resize * { .App-menu__left { overflow-y: auto; - padding: 0.75rem; - width: 12.5rem; + padding: 0.75rem 0.75rem 0.25rem 0.75rem; + width: 11.875rem; box-sizing: border-box; position: absolute; + + .buttonList label, + .buttonList button, + .buttonList .zIndexButton { + --button-bg: transparent; + } } .dropdown-select { diff --git a/packages/excalidraw/data/restore.ts b/packages/excalidraw/data/restore.ts index d1002e61f3..30702f130e 100644 --- a/packages/excalidraw/data/restore.ts +++ b/packages/excalidraw/data/restore.ts @@ -221,7 +221,7 @@ const restoreElementWithProperties = < "customData" in extra ? extra.customData : element.customData; } - return { + const ret = { // spread the original element properties to not lose unknown ones // for forward-compatibility ...element, @@ -230,6 +230,12 @@ const restoreElementWithProperties = < ...getNormalizedDimensions(base), ...extra, } as unknown as T; + + // strip legacy props (migrated in previous steps) + delete ret.strokeSharpness; + delete ret.boundElementIds; + + return ret; }; const restoreElement = (