self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-24 10:27:10 +02:00
Code Issues Releases Activity

Desktop: Fixes #4529: Plugin ghost panel and resizing issues (#4865)

Browse Source
This commit is contained in:
mbalint 2021-04-30 18:54:55 +02:00 committed by GitHub
parent 92b4b967d9
commit 4be5182913
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 71 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
packages/app-desktop/gui/ResizableLayout/utils/useLayoutItemSizes.test.ts
View File

@ -20,6 +20,58 @@ describe('useLayoutItemSizes', () => {
expect(layout.isRoot).toBe(true);
});
test('should stretch the last visible child item if all siblings have fixed size and the last child is not visible', () => {
const layout: LayoutItem = validateLayout({
key: 'root',
width: 200,
height: 100,
direction: LayoutItemDirection.Row,
children: [
{ key: 'col1', width: 50 },
{ key: 'col2', width: 50 },
{ key: 'col3', width: 70, visible: false },
],
});
const col1 = layout.children.find(c => c.key === 'col1');
expect(col1.width).toBe(50);
expect(col1.visible).toBe(true);
const col2 = layout.children.find(c => c.key === 'col2');
expect(col2).not.toHaveProperty('width');
expect(col2.visible).toBe(true);
const col3 = layout.children.find(c => c.key === 'col3');
expect(col3.width).toBe(70);
expect(col3.visible).toBe(false);
});
test('should stretch the last child item if all siblings have fixed size', () => {
const layout: LayoutItem = validateLayout({
key: 'root',
width: 200,
height: 100,
direction: LayoutItemDirection.Row,
children: [
{ key: 'col1', width: 50 },
{ key: 'col2', width: 50 },
{ key: 'col3', width: 70 },
],
});
const col1 = layout.children.find(c => c.key === 'col1');
expect(col1.width).toBe(50);
expect(col1.visible).toBe(true);
const col2 = layout.children.find(c => c.key === 'col2');
expect(col2.width).toBe(50);
expect(col2.visible).toBe(true);
const col3 = layout.children.find(c => c.key === 'col3');
expect(col3).not.toHaveProperty('width');
expect(col3.visible).toBe(true);
});
test('should give item sizes', () => {
const layout: LayoutItem = validateLayout({
key: 'root',

25
packages/app-desktop/gui/ResizableLayout/utils/validateLayout.ts
View File

@ -2,6 +2,17 @@ import produce from 'immer';
import iterateItems from './iterateItems';
import { LayoutItem, LayoutItemDirection } from './types';
function isLastVisible(itemIndex: number, item: LayoutItem, parent: LayoutItem) {
if (item.visible === false) return false;
for (let i = parent.children.length - 1; i >= 0; i--) {
const child = parent.children[i];
if (child && child.visible !== false) return i === itemIndex;
}
return false;
}
function updateItemSize(itemIndex: number, itemDraft: LayoutItem, parent: LayoutItem) {
if (!parent) return;
@ -13,11 +24,13 @@ function updateItemSize(itemIndex: number, itemDraft: LayoutItem, parent: Layout
}
// If all children of a container have a fixed width, the
// latest child should have a flexible width (i.e. no "width"
// latest visible child should have a flexible width (i.e. no "width"
// property), so that it fills up the remaining space
if (itemIndex === parent.children.length - 1) {
if (isLastVisible(itemIndex, itemDraft, parent)) {
let allChildrenAreSized = true;
for (const child of parent.children) {
if (child.visible === false) continue;
if (parent.direction === LayoutItemDirection.Row) {
if (!child.width) {
allChildrenAreSized = false;
@ -41,13 +54,13 @@ function updateItemSize(itemIndex: number, itemDraft: LayoutItem, parent: Layout
}
}
// All items should be resizable, except for the root and the latest child
// All items should be resizable, except for the root and the latest visible child
// of a container.
function updateResizeRules(itemIndex: number, itemDraft: LayoutItem, parent: LayoutItem) {
if (!parent) return;
const isLastChild = itemIndex === parent.children.length - 1;
itemDraft.resizableRight = parent.direction === LayoutItemDirection.Row && !isLastChild;
itemDraft.resizableBottom = parent.direction === LayoutItemDirection.Column && !isLastChild;
const isLastVisibleChild = isLastVisible(itemIndex, itemDraft, parent);
itemDraft.resizableRight = parent.direction === LayoutItemDirection.Row && !isLastVisibleChild;
itemDraft.resizableBottom = parent.direction === LayoutItemDirection.Column && !isLastVisibleChild;
}
// Container direction should alternate between row (for the root) and