akai-tools/readest
2
0
Fork 0
forked from akai/readest
Code Pull Requests Activity

mobile: responsive sizes for annotation tools (#236)

Browse Source 
* chore: refine assetPrefix in config for easier debug over LAN

* mobile: responsive sizes for annotation tools
This commit is contained in:
Huang Xin
2025-01-23 21:31:41 +01:00
committed by GitHub
parent 58d3e7b221
commit 18dfd73bed
5 changed files with 24 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/readest-app/src/app/reader/components/annotator/AnnotationPopup.tsx
+6 -1
View File
@@ -41,7 +41,12 @@ const AnnotationPopup: React.FC<AnnotationPopupProps> = ({
className='selection-popup bg-gray-600 px-4 text-white'
triangleClassName='text-gray-600'
>
<div className='selection-buttons flex h-11 items-center justify-between'>
<div
className='selection-buttons flex items-center justify-between'
style={{
height: popupHeight,
}}
>
{buttons.map((button, index) => (
<PopupButton
key={index}
apps/readest-app/src/app/reader/components/annotator/Annotator.tsx
+10 -7
View File
@@ -19,6 +19,7 @@ import { useSettingsStore } from '@/store/settingsStore';
import { useReaderStore } from '@/store/readerStore';
import { useNotebookStore } from '@/store/notebookStore';
import { useTranslation } from '@/hooks/useTranslation';
import { useResponsiveSize } from '@/hooks/useResponsiveSize';
import { useFoliateEvents } from '../../hooks/useFoliateEvents';
import { useNotesSync } from '../../hooks/useNotesSync';
import { getPopupPosition, getPosition, Position, TextSelection } from '@/utils/sel';
@@ -65,13 +66,15 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
settings.globalReadSettings.highlightStyles[selectedStyle],
);
const dictPopupWidth = 480;
const dictPopupHeight = 300;
const transPopupWidth = 480;
const transPopupHeight = 360;
const annotPopupWidth = 280;
const annotPopupHeight = 44;
const popupPadding = 10;
const popupPadding = useResponsiveSize(10);
const maxWidth = window.innerWidth - 2 * popupPadding;
const maxHeight = window.innerHeight - 2 * popupPadding;
const dictPopupWidth = Math.min(480, maxWidth);
const dictPopupHeight = Math.min(300, maxHeight);
const transPopupWidth = Math.min(480, maxWidth);
const transPopupHeight = Math.min(360, maxHeight);
const annotPopupWidth = useResponsiveSize(280);
const annotPopupHeight = useResponsiveSize(44);
const onLoad = (event: Event) => {
const detail = (event as CustomEvent).detail;