|
@@ -2487,18 +2487,29 @@ class App extends React.Component<AppProps, AppState> {
|
|
|
canFitSidebar: editorWidth > sidebarBreakpoint,
|
|
|
});
|
|
|
|
|
|
+ const stylesPanelMode =
|
|
|
+ // NOTE: we could also remove the isMobileOrTablet check here and
|
|
|
+ // always switch to compact mode when the editor is narrow (e.g. < MQ_MIN_WIDTH_DESKTOP)
|
|
|
+ // but not too narrow (> MQ_MAX_WIDTH_MOBILE)
|
|
|
+ this.isTabletBreakpoint(editorWidth, editorHeight) && isMobileOrTablet()
|
|
|
+ ? "compact"
|
|
|
+ : this.isMobileBreakpoint(editorWidth, editorHeight)
|
|
|
+ ? "mobile"
|
|
|
+ : "full";
|
|
|
+
|
|
|
// also check if we need to update the app state
|
|
|
- this.setState({
|
|
|
- stylesPanelMode:
|
|
|
- // NOTE: we could also remove the isMobileOrTablet check here and
|
|
|
- // always switch to compact mode when the editor is narrow (e.g. < MQ_MIN_WIDTH_DESKTOP)
|
|
|
- // but not too narrow (> MQ_MAX_WIDTH_MOBILE)
|
|
|
- this.isTabletBreakpoint(editorWidth, editorHeight) && isMobileOrTablet()
|
|
|
- ? "compact"
|
|
|
- : this.isMobileBreakpoint(editorWidth, editorHeight)
|
|
|
- ? "mobile"
|
|
|
- : "full",
|
|
|
- });
|
|
|
+ this.setState((prevState) => ({
|
|
|
+ stylesPanelMode,
|
|
|
+ // reset to box selection mode if the UI changes to full
|
|
|
+ // where you'd not be able to change the mode yourself currently
|
|
|
+ preferredSelectionTool:
|
|
|
+ stylesPanelMode === "full"
|
|
|
+ ? {
|
|
|
+ type: "selection",
|
|
|
+ initialized: true,
|
|
|
+ }
|
|
|
+ : prevState.preferredSelectionTool,
|
|
|
+ }));
|
|
|
|
|
|
if (prevEditorState !== nextEditorState) {
|
|
|
this.device = { ...this.device, editor: nextEditorState };
|