fix: show toast when browser zoom is not 100% (#5304)
* fix: show toast when browser zoom is not 100% * update threshold for detecting zoom * Make toast permanent for browser zoom * check if browser zoomed on mount * retrieve toast params from function getToastParams * Revert "retrieve toast params from function getToastParams" This reverts commit cfca580d74c0261c3706f577db5ba7f2213cdce8.
This commit is contained in:
parent
5deb93a083
commit
7efa081976
@ -553,6 +553,12 @@ class App extends React.Component<AppProps, AppState> {
|
|||||||
<Toast
|
<Toast
|
||||||
message={this.state.toastMessage}
|
message={this.state.toastMessage}
|
||||||
clearToast={this.clearToast}
|
clearToast={this.clearToast}
|
||||||
|
duration={
|
||||||
|
this.state.toastMessage === t("alerts.browserZoom")
|
||||||
|
? Infinity
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
|
closable={this.state.toastMessage === t("alerts.browserZoom")}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
<main>{this.renderCanvas()}</main>
|
<main>{this.renderCanvas()}</main>
|
||||||
@ -766,6 +772,7 @@ class App extends React.Component<AppProps, AppState> {
|
|||||||
? { ...scene.appState.activeTool, type: "selection" }
|
? { ...scene.appState.activeTool, type: "selection" }
|
||||||
: scene.appState.activeTool,
|
: scene.appState.activeTool,
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
|
toastMessage: this.state.toastMessage || null,
|
||||||
};
|
};
|
||||||
if (initialData?.scrollToContent) {
|
if (initialData?.scrollToContent) {
|
||||||
scene.appState = {
|
scene.appState = {
|
||||||
@ -904,6 +911,7 @@ class App extends React.Component<AppProps, AppState> {
|
|||||||
} else {
|
} else {
|
||||||
this.updateDOMRect(this.initializeScene);
|
this.updateDOMRect(this.initializeScene);
|
||||||
}
|
}
|
||||||
|
this.checkIfBrowserZoomed();
|
||||||
}
|
}
|
||||||
|
|
||||||
public componentWillUnmount() {
|
public componentWillUnmount() {
|
||||||
@ -916,8 +924,21 @@ class App extends React.Component<AppProps, AppState> {
|
|||||||
clearTimeout(touchTimeout);
|
clearTimeout(touchTimeout);
|
||||||
touchTimeout = 0;
|
touchTimeout = 0;
|
||||||
}
|
}
|
||||||
|
private checkIfBrowserZoomed = () => {
|
||||||
|
if (!this.device.isMobile) {
|
||||||
|
const scrollBarWidth = 10;
|
||||||
|
const widthRatio =
|
||||||
|
(window.outerWidth - scrollBarWidth) / window.innerWidth;
|
||||||
|
const isBrowserZoomed = widthRatio < 0.75 || widthRatio > 1.1;
|
||||||
|
if (isBrowserZoomed) {
|
||||||
|
this.setToastMessage(t("alerts.browserZoom"));
|
||||||
|
} else {
|
||||||
|
this.clearToast();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
private onResize = withBatchedUpdates(() => {
|
private onResize = withBatchedUpdates(() => {
|
||||||
|
this.checkIfBrowserZoomed();
|
||||||
this.scene
|
this.scene
|
||||||
.getElementsIncludingDeleted()
|
.getElementsIncludingDeleted()
|
||||||
.forEach((element) => invalidateShapeForElement(element));
|
.forEach((element) => invalidateShapeForElement(element));
|
||||||
|
@ -187,7 +187,8 @@
|
|||||||
"invalidSceneUrl": "Couldn't import scene from the supplied URL. It's either malformed, or doesn't contain valid Excalidraw JSON data.",
|
"invalidSceneUrl": "Couldn't import scene from the supplied URL. It's either malformed, or doesn't contain valid Excalidraw JSON data.",
|
||||||
"resetLibrary": "This will clear your library. Are you sure?",
|
"resetLibrary": "This will clear your library. Are you sure?",
|
||||||
"removeItemsFromsLibrary": "Delete {{count}} item(s) from library?",
|
"removeItemsFromsLibrary": "Delete {{count}} item(s) from library?",
|
||||||
"invalidEncryptionKey": "Encryption key must be of 22 characters. Live collaboration is disabled."
|
"invalidEncryptionKey": "Encryption key must be of 22 characters. Live collaboration is disabled.",
|
||||||
|
"browserZoom": "Your browser's zoom level is not set to 100% which may cause the board to display incorrectly"
|
||||||
},
|
},
|
||||||
"errors": {
|
"errors": {
|
||||||
"unsupportedFileType": "Unsupported file type.",
|
"unsupportedFileType": "Unsupported file type.",
|
||||||
|
Loading…
x
Reference in New Issue
Block a user