|
|
|
|
@ -2487,18 +2487,29 @@ class App extends React.Component<AppProps, AppState> {
@@ -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 }; |
|
|
|
|
|