1
0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-21 09:38:01 +02:00
joplin/packages/app-desktop/gui/MainScreen/commands/toggleNoteList.ts
Caleb John 7a9ec627ee
Desktop: Resolves #5233: Fire resize event whenever the layout changes (#5344)
* Fire resize event whenever the layout changes

This solves an issue where the markdown editor was changing size
physically, but the refresh function wasn't being called so the
editor would lose track of it's size and place the cursor wrongly.
The editor was able to correctly resize when the window resize event
was fired, but this didn't happen when the sidebars were toggled.
The solution implemented here is to hook in to the function where
layout props are changed, and emit a resize event there.
This means that anytime the layout changes (whether or not it affects
sizing), the resize event will be fired.
2021-09-19 11:36:23 +01:00

34 lines
1.1 KiB
TypeScript

import { CommandContext, CommandDeclaration, CommandRuntime } from '@joplin/lib/services/CommandService';
import { _ } from '@joplin/lib/locale';
import setLayoutItemProps from '../../ResizableLayout/utils/setLayoutItemProps';
import layoutItemProp from '../../ResizableLayout/utils/layoutItemProp';
import { AppState } from '../../../app.reducer';
export const declaration: CommandDeclaration = {
name: 'toggleNoteList',
label: () => _('Toggle note list'),
iconName: 'fas fa-align-justify',
};
export const runtime = (): CommandRuntime => {
return {
execute: async (context: CommandContext) => {
const layout = (context.state as AppState).mainLayout;
const newLayout = setLayoutItemProps(layout, 'noteList', {
visible: !layoutItemProp(layout, 'noteList', 'visible'),
});
// Toggling the sidebar will affect the size of most other on-screen components.
// Dispatching a window resize event is a bit of a hack, but it ensures that any
// component that watches for resizes will be accurately notified
window.dispatchEvent(new Event('resize'));
context.dispatch({
type: 'MAIN_LAYOUT_SET',
value: newLayout,
});
},
};
};