self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-21 09:38:01 +02:00
Code Issues Releases Activity

Desktop: Fix size of notebook emojis on Windows

Browse Source
This commit is contained in:
Laurent Cozic 2022-10-23 15:49:28 +01:00
parent 150f0485c0
commit 0c30198e8c
4 changed files with 58 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.eslintignore
View File

@ -252,6 +252,9 @@ packages/app-desktop/gui/EditFolderDialog/Dialog.js.map
packages/app-desktop/gui/EditFolderDialog/IconSelector.d.ts
packages/app-desktop/gui/EditFolderDialog/IconSelector.js
packages/app-desktop/gui/EditFolderDialog/IconSelector.js.map
packages/app-desktop/gui/EmojiBox.d.ts
packages/app-desktop/gui/EmojiBox.js
packages/app-desktop/gui/EmojiBox.js.map
packages/app-desktop/gui/EncryptionConfigScreen/EncryptionConfigScreen.d.ts
packages/app-desktop/gui/EncryptionConfigScreen/EncryptionConfigScreen.js
packages/app-desktop/gui/EncryptionConfigScreen/EncryptionConfigScreen.js.map

3
.gitignore vendored
View File

@ -240,6 +240,9 @@ packages/app-desktop/gui/EditFolderDialog/Dialog.js.map
packages/app-desktop/gui/EditFolderDialog/IconSelector.d.ts
packages/app-desktop/gui/EditFolderDialog/IconSelector.js
packages/app-desktop/gui/EditFolderDialog/IconSelector.js.map
packages/app-desktop/gui/EmojiBox.d.ts
packages/app-desktop/gui/EmojiBox.js
packages/app-desktop/gui/EmojiBox.js.map
packages/app-desktop/gui/EncryptionConfigScreen/EncryptionConfigScreen.d.ts
packages/app-desktop/gui/EncryptionConfigScreen/EncryptionConfigScreen.js
packages/app-desktop/gui/EncryptionConfigScreen/EncryptionConfigScreen.js.map

46
packages/app-desktop/gui/EmojiBox.tsx Normal file
View File

@ -0,0 +1,46 @@
import { useMemo, useRef } from 'react';
interface Props {
width: number;
height: number;
emoji: string;
}
const fontSizeCache_: Record<string, number> = {};
export default (props: Props) => {
const containerRef = useRef(null);
const fontSize = useMemo(() => {
if (!containerRef.current) return props.height;
const cacheKey = [props.width, props.height, props.emoji].join('-');
if (fontSizeCache_[cacheKey]) {
return fontSizeCache_[cacheKey];
}
// Set the emoji font size so that it fits within the specified width
// and height. In fact, currently it only looks at the height.
let spanFontSize = props.height;
const span = document.createElement('span');
span.innerText = props.emoji;
span.style.fontSize = `${spanFontSize}px`;
containerRef.current.appendChild(span);
let rect = span.getBoundingClientRect();
while (rect.height > props.height) {
spanFontSize -= .5;
span.style.fontSize = `${spanFontSize}px`;
rect = span.getBoundingClientRect();
}
span.remove();
fontSizeCache_[cacheKey] = spanFontSize;
return spanFontSize;
}, [props.width, props.height, props.emoji, containerRef]);
return <div className="emoji-box" ref={containerRef} style={{ width: props.width, height: props.height, fontSize }}>{props.emoji}</div>;
};

9
packages/app-desktop/gui/FolderIconBox.tsx
View File

@ -1,4 +1,5 @@
import { FolderIcon, FolderIconType } from '@joplin/lib/services/database/types';
import EmojiBox from './EmojiBox';
interface Props {
folderIcon: FolderIcon;
@ -8,13 +9,15 @@ interface Props {
export default function(props: Props) {
const folderIcon = props.folderIcon;
const opacity = 'opacity' in props ? props.opacity : 1;
const width = 20;
const height = 20;
if (folderIcon.type === FolderIconType.Emoji) {
return <span style={{ fontSize: 20, opacity }}>{folderIcon.emoji}</span>;
return <EmojiBox width={width} height={height} emoji={folderIcon.emoji}/>;
} else if (folderIcon.type === FolderIconType.DataUrl) {
return <img style={{ width: 20, height: 20, opacity }} src={folderIcon.dataUrl} />;
return <img style={{ width, height, opacity }} src={folderIcon.dataUrl} />;
} else if (folderIcon.type === FolderIconType.FontAwesome) {
return <i style={{ fontSize: 18, width: 20, opacity }} className={folderIcon.name}></i>;
return <i style={{ fontSize: 18, width, opacity }} className={folderIcon.name}></i>;
} else {
throw new Error(`Unsupported folder icon type: ${folderIcon.type}`);
}