self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-01-11 18:24:43 +02:00
Code Issues Releases Activity

Desktop: Fixes #10060: Fix "New note" button rendering when startup with Trash can selected. (#10076)

Browse Source
This commit is contained in:
Khương Duy 2024-03-15 16:29:24 +07:00 committed by GitHub
parent b3ec92a57e
commit 310a90744a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,7 +24,7 @@ interface Props {
width: number;
newNoteButtonEnabled: boolean;
newTodoButtonEnabled: boolean;
newNoteButtonRef: React.MutableRefObject<any>;
setNewNoteButtonElement: React.Dispatch<React.SetStateAction<Element>>;
lineCount: number;
breakpoint: number;
dynamicBreakpoints: Breakpoints;
@ -208,7 +208,10 @@ function NoteListControls(props: Props) {
return (
<TopRow className="new-note-todo-buttons">
<StyledButton ref={props.newNoteButtonRef}
<StyledButton
ref={(el: Element) => {
props.setNewNoteButtonElement(el);
}}
className="new-note-button"
tooltip={ showTooltip ? CommandService.instance().label('newNote') : '' }
iconName={noteIcon}

27
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, useState, useEffect, useRef, useCallback } from 'react';
import { useMemo, useState, useEffect, useCallback } from 'react';
import NoteList2 from '../NoteList/NoteList2';
import NoteListControls from '../NoteListControls/NoteListControls';
import { Size } from '../ResizableLayout/utils/types';
@ -40,21 +40,21 @@ const StyledRoot = styled.div`
width: 100%;
`;
const getTextWidth = (newNoteRef: React.MutableRefObject<any>, text: string): number => {
const getTextWidth = (newNoteButtonElement: Element, text: string): number => {
const canvas = document.createElement('canvas');
if (!canvas) throw new Error('Failed to create canvas element');
const ctx = canvas.getContext('2d');
if (!ctx) throw new Error('Failed to get context');
const fontWeight = getComputedStyle(newNoteRef.current).getPropertyValue('font-weight');
const fontSize = getComputedStyle(newNoteRef.current).getPropertyValue('font-size');
const fontFamily = getComputedStyle(newNoteRef.current).getPropertyValue('font-family');
const fontWeight = getComputedStyle(newNoteButtonElement).getPropertyValue('font-weight');
const fontSize = getComputedStyle(newNoteButtonElement).getPropertyValue('font-size');
const fontFamily = getComputedStyle(newNoteButtonElement).getPropertyValue('font-family');
ctx.font = `${fontWeight} ${fontSize} ${fontFamily}`;
return ctx.measureText(text).width;
};
// Even though these calculations mostly concern the NoteListControls component, we do them here
// because we need to know the height of that control to calculate the note list height.
const useNoteListControlsBreakpoints = (width: number, newNoteRef: React.MutableRefObject<any>, selectedFolderId: string) => {
const useNoteListControlsBreakpoints = (width: number, newNoteButtonElement: Element, selectedFolderId: string) => {
const [dynamicBreakpoints, setDynamicBreakpoints] = useState<Breakpoints>({ Sm: BaseBreakpoint.Sm, Md: BaseBreakpoint.Md, Lg: BaseBreakpoint.Lg, Xl: BaseBreakpoint.Xl });
const previousWidth = usePrevious(width);
const widthHasChanged = width !== previousWidth;
@ -62,13 +62,12 @@ const useNoteListControlsBreakpoints = (width: number, newNoteRef: React.Mutable
// Initialize language-specific breakpoints
useEffect(() => {
if (!widthHasChanged) return;
if (!newNoteRef.current) return;
if (!newNoteButtonElement) return;
if (!showNewNoteButton) return;
// Use the longest string to calculate the amount of extra width needed
const smAdditional = getTextWidth(newNoteRef, _('note')) > getTextWidth(newNoteRef, _('to-do')) ? getTextWidth(newNoteRef, _('note')) : getTextWidth(newNoteRef, _('to-do'));
const mdAdditional = getTextWidth(newNoteRef, _('New note')) > getTextWidth(newNoteRef, _('New to-do')) ? getTextWidth(newNoteRef, _('New note')) : getTextWidth(newNoteRef, _('New to-do'));
const smAdditional = getTextWidth(newNoteButtonElement, _('note')) > getTextWidth(newNoteButtonElement, _('to-do')) ? getTextWidth(newNoteButtonElement, _('note')) : getTextWidth(newNoteButtonElement, _('to-do'));
const mdAdditional = getTextWidth(newNoteButtonElement, _('New note')) > getTextWidth(newNoteButtonElement, _('New to-do')) ? getTextWidth(newNoteButtonElement, _('New note')) : getTextWidth(newNoteButtonElement, _('New to-do'));
const Sm = BaseBreakpoint.Sm + smAdditional * 2;
const Md = BaseBreakpoint.Md + mdAdditional * 2;
@ -76,7 +75,7 @@ const useNoteListControlsBreakpoints = (width: number, newNoteRef: React.Mutable
const Xl = BaseBreakpoint.Xl;
setDynamicBreakpoints({ Sm, Md, Lg, Xl });
}, [newNoteRef, showNewNoteButton, widthHasChanged]);
}, [newNoteButtonElement, showNewNoteButton, widthHasChanged]);
const breakpoint: number = useMemo(() => {
// Find largest breakpoint that width is less than
@ -108,11 +107,11 @@ export default function NoteListWrapper(props: Props) {
const theme = themeStyle(props.themeId);
const [controlHeight] = useState(theme.topRowHeight);
const listRenderer = useListRenderer(props.listRendererId, props.startupPluginsLoaded);
const newNoteButtonRef = useRef(null);
const [newNoteButtonElement, setNewNoteButtonElement] = useState<Element>(null);
const isMultiColumns = listRenderer ? listRenderer.multiColumns : false;
const columns = isMultiColumns ? props.columns : null;
const { breakpoint, dynamicBreakpoints, lineCount } = useNoteListControlsBreakpoints(props.size.width, newNoteButtonRef, props.selectedFolderId);
const { breakpoint, dynamicBreakpoints, lineCount } = useNoteListControlsBreakpoints(props.size.width, newNoteButtonElement, props.selectedFolderId);
const noteListControlsButtonSize = ButtonSize.Small;
const noteListControlsPadding = theme.mainPadding;
@ -178,7 +177,7 @@ export default function NoteListWrapper(props: Props) {
<NoteListControls
height={controlHeight}
width={noteListSize.width}
newNoteButtonRef={newNoteButtonRef}
setNewNoteButtonElement={setNewNoteButtonElement}
breakpoint={breakpoint}
dynamicBreakpoints={dynamicBreakpoints}
lineCount={lineCount}