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 #7907: Fixed height when controls are on a single row (#7912)

Browse Source
This commit is contained in:
Julien 2023-03-14 00:26:56 +08:00 committed by GitHub
parent bd4291462e
commit 7a3e6fde7f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/app-desktop/gui/NoteListControls/NoteListControls.tsx
View File

@ -26,6 +26,7 @@ interface Props {
notesParentType: string;
height: number;
width: number;
onContentHeightChange: (sameRow: boolean)=> void;
}
interface Breakpoints {
@ -179,10 +180,12 @@ function NoteListControls(props: Props) {
if (breakpoint === dynamicBreakpoints.Xl) {
noteControlsRef.current.style.flexDirection = 'row';
searchAndSortRef.current.style.flex = '2 1 auto';
props.onContentHeightChange(true);
} else {
noteControlsRef.current.style.flexDirection = 'column';
props.onContentHeightChange(false);
}
}, [breakpoint, dynamicBreakpoints]);
}, [breakpoint, dynamicBreakpoints, props.onContentHeightChange]);
useEffect(() => {
CommandService.instance().registerRuntime('focusSearch', focusSearchRuntime(searchBarRef));

14
packages/app-desktop/gui/NoteListWrapper/NoteListWrapper.tsx
View File

@ -1,6 +1,6 @@
import { themeStyle } from '@joplin/lib/theme';
import * as React from 'react';
import { useMemo } from 'react';
import { useMemo, useState } from 'react';
import NoteList from '../NoteList/NoteList';
import NoteListControls from '../NoteListControls/NoteListControls';
import { Size } from '../ResizableLayout/utils/types';
@ -22,7 +22,15 @@ const StyledRoot = styled.div`
export default function NoteListWrapper(props: Props) {
const theme = themeStyle(props.themeId);
const controlHeight = theme.topRowHeight;
const [controlHeight, setControlHeight] = useState(theme.topRowHeight);
const onContentHeightChange = (sameRow: boolean) => {
if (sameRow) {
setControlHeight(theme.topRowHeight);
} else {
setControlHeight(theme.topRowHeight * 2);
}
};
const noteListSize = useMemo(() => {
return {
@ -33,7 +41,7 @@ export default function NoteListWrapper(props: Props) {
return (
<StyledRoot>
<NoteListControls height={controlHeight} width={noteListSize.width}/>
<NoteListControls height={controlHeight} width={noteListSize.width} onContentHeightChange={onContentHeightChange}/>
<NoteList resizableLayoutEventEmitter={props.resizableLayoutEventEmitter} size={noteListSize} visible={props.visible}/>
</StyledRoot>
);

2
packages/lib/theme.ts
View File

@ -60,7 +60,7 @@ const globalStyle: any = {
toolbarPadding: 6,
appearance: 'light',
mainPadding: 12,
topRowHeight: 81,
topRowHeight: 50,
editorPaddingLeft: 8,
};