forked from akai/readest
Huang Xin
742 lines
30 KiB
TypeScript
742 lines
30 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { MdOutlineAutoMode, MdOutlineScreenRotation } from 'react-icons/md';
|
|
import { MdOutlineTextRotationNone, MdTextRotateVertical } from 'react-icons/md';
|
|
import { IoPhoneLandscapeOutline, IoPhonePortraitOutline } from 'react-icons/io5';
|
|
import { TbTextDirectionRtl } from 'react-icons/tb';
|
|
|
|
import { useEnv } from '@/context/EnvContext';
|
|
import { useReaderStore } from '@/store/readerStore';
|
|
import { useBookDataStore } from '@/store/bookDataStore';
|
|
import { useTranslation } from '@/hooks/useTranslation';
|
|
import { useResetViewSettings } from '../../hooks/useResetSettings';
|
|
import { isCJKEnv } from '@/utils/misc';
|
|
import { getStyles } from '@/utils/style';
|
|
import { saveAndReload } from '@/utils/reload';
|
|
import { getMaxInlineSize } from '@/utils/config';
|
|
import { lockScreenOrientation } from '@/utils/bridge';
|
|
import { saveViewSettings } from '../../utils/viewSettingsHelper';
|
|
import { getBookDirFromWritingMode, getBookLangCode } from '@/utils/book';
|
|
import { MIGHT_BE_RTL_LANGS } from '@/services/constants';
|
|
import { SettingsPanelPanelProp } from './SettingsDialog';
|
|
import Select from '@/components/Select';
|
|
import NumberInput from './NumberInput';
|
|
|
|
const LayoutPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterReset }) => {
|
|
const _ = useTranslation();
|
|
const { envConfig, appService } = useEnv();
|
|
const { getView, getViewSettings, getGridInsets, setViewSettings } = useReaderStore();
|
|
const { getBookData } = useBookDataStore();
|
|
const view = getView(bookKey);
|
|
const bookData = getBookData(bookKey)!;
|
|
const viewSettings = getViewSettings(bookKey)!;
|
|
const gridInsets = getGridInsets(bookKey)!;
|
|
|
|
const [paragraphMargin, setParagraphMargin] = useState(viewSettings.paragraphMargin!);
|
|
const [lineHeight, setLineHeight] = useState(viewSettings.lineHeight!);
|
|
const [wordSpacing, setWordSpacing] = useState(viewSettings.wordSpacing!);
|
|
const [letterSpacing, setLetterSpacing] = useState(viewSettings.letterSpacing!);
|
|
const [textIndent, setTextIndent] = useState(viewSettings.textIndent!);
|
|
const [fullJustification, setFullJustification] = useState(viewSettings.fullJustification!);
|
|
const [hyphenation, setHyphenation] = useState(viewSettings.hyphenation!);
|
|
const [marginTopPx, setMarginTopPx] = useState(
|
|
viewSettings.marginPx || viewSettings.marginTopPx!,
|
|
);
|
|
const [marginBottomPx, setMarginBottomPx] = useState(viewSettings.marginBottomPx!);
|
|
const [marginLeftPx, setMarginLeftPx] = useState(viewSettings.marginLeftPx!);
|
|
const [marginRightPx, setMarginRightPx] = useState(viewSettings.marginRightPx!);
|
|
const [compactMarginTopPx, setCompactMarginTopPx] = useState(
|
|
viewSettings.compactMarginPx || viewSettings.compactMarginTopPx!,
|
|
);
|
|
const [compactMarginBottomPx, setCompactMarginBottomPx] = useState(
|
|
viewSettings.compactMarginBottomPx!,
|
|
);
|
|
const [gapPercent, setGapPercent] = useState(viewSettings.gapPercent!);
|
|
const [compactMarginLeftPx, setCompactMarginLeftPx] = useState(viewSettings.compactMarginLeftPx!);
|
|
const [compactMarginRightPx, setCompactMarginRightPx] = useState(
|
|
viewSettings.compactMarginRightPx!,
|
|
);
|
|
const [maxColumnCount, setMaxColumnCount] = useState(viewSettings.maxColumnCount!);
|
|
const [maxInlineSize, setMaxInlineSize] = useState(viewSettings.maxInlineSize!);
|
|
const [maxBlockSize, setMaxBlockSize] = useState(viewSettings.maxBlockSize!);
|
|
const [writingMode, setWritingMode] = useState(viewSettings.writingMode!);
|
|
const [overrideLayout, setOverrideLayout] = useState(viewSettings.overrideLayout!);
|
|
const [doubleBorder, setDoubleBorder] = useState(viewSettings.doubleBorder!);
|
|
const [borderColor, setBorderColor] = useState(viewSettings.borderColor!);
|
|
const [showHeader, setShowHeader] = useState(viewSettings.showHeader!);
|
|
const [showFooter, setShowFooter] = useState(viewSettings.showFooter!);
|
|
const [showBarsOnScroll, setShowBarsOnScroll] = useState(viewSettings.showBarsOnScroll!);
|
|
const [showRemainingTime, setShowRemainingTime] = useState(viewSettings.showRemainingTime!);
|
|
const [showRemainingPages, setShowRemainingPages] = useState(viewSettings.showRemainingPages!);
|
|
const [showProgressInfo, setShowProgressInfo] = useState(viewSettings.showProgressInfo!);
|
|
const [progressStyle, setProgressStyle] = useState(viewSettings.progressStyle);
|
|
const [screenOrientation, setScreenOrientation] = useState(viewSettings.screenOrientation!);
|
|
const resetToDefaults = useResetViewSettings();
|
|
|
|
const handleReset = () => {
|
|
resetToDefaults({
|
|
paragraphMargin: setParagraphMargin,
|
|
lineHeight: setLineHeight,
|
|
wordSpacing: setWordSpacing,
|
|
letterSpacing: setLetterSpacing,
|
|
textIndent: setTextIndent,
|
|
fullJustification: setFullJustification,
|
|
hyphenation: setHyphenation,
|
|
marginTopPx: setMarginTopPx,
|
|
marginBottomPx: setMarginBottomPx,
|
|
marginLeftPx: setMarginLeftPx,
|
|
marginRightPx: setMarginRightPx,
|
|
compactMarginTopPx: setCompactMarginTopPx,
|
|
compactMarginBottomPx: setCompactMarginBottomPx,
|
|
compactMarginLeftPx: setCompactMarginLeftPx,
|
|
compactMarginRightPx: setCompactMarginRightPx,
|
|
gapPercent: setGapPercent,
|
|
maxColumnCount: setMaxColumnCount,
|
|
maxInlineSize: setMaxInlineSize,
|
|
maxBlockSize: setMaxBlockSize,
|
|
overrideLayout: setOverrideLayout,
|
|
doubleBorder: setDoubleBorder,
|
|
borderColor: setBorderColor,
|
|
showHeader: setShowHeader,
|
|
showFooter: setShowFooter,
|
|
showBarsOnScroll: setShowBarsOnScroll,
|
|
showRemainingTime: setShowRemainingTime,
|
|
showRemainingPages: setShowRemainingPages,
|
|
showProgressInfo: setShowProgressInfo,
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
onRegisterReset(handleReset);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
saveViewSettings(envConfig, bookKey, 'paragraphMargin', paragraphMargin);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [paragraphMargin]);
|
|
|
|
useEffect(() => {
|
|
saveViewSettings(envConfig, bookKey, 'lineHeight', lineHeight);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [lineHeight]);
|
|
|
|
useEffect(() => {
|
|
saveViewSettings(envConfig, bookKey, 'wordSpacing', wordSpacing);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [wordSpacing]);
|
|
|
|
useEffect(() => {
|
|
saveViewSettings(envConfig, bookKey, 'letterSpacing', letterSpacing);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [letterSpacing]);
|
|
|
|
useEffect(() => {
|
|
saveViewSettings(envConfig, bookKey, 'textIndent', textIndent);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [textIndent]);
|
|
|
|
useEffect(() => {
|
|
saveViewSettings(envConfig, bookKey, 'fullJustification', fullJustification);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [fullJustification]);
|
|
|
|
useEffect(() => {
|
|
saveViewSettings(envConfig, bookKey, 'hyphenation', hyphenation);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [hyphenation]);
|
|
|
|
useEffect(() => {
|
|
if (marginTopPx === viewSettings.marginTopPx) return;
|
|
if (viewSettings.marginPx !== undefined) {
|
|
saveViewSettings(envConfig, bookKey, 'marginPx', undefined, false, false);
|
|
}
|
|
saveViewSettings(envConfig, bookKey, 'marginTopPx', marginTopPx, false, false);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [marginTopPx]);
|
|
|
|
useEffect(() => {
|
|
if (marginBottomPx === viewSettings.marginBottomPx) return;
|
|
if (viewSettings.marginPx !== undefined) {
|
|
saveViewSettings(envConfig, bookKey, 'marginPx', undefined, false, false);
|
|
}
|
|
saveViewSettings(envConfig, bookKey, 'marginBottomPx', marginBottomPx, false, false);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [marginBottomPx]);
|
|
|
|
useEffect(() => {
|
|
if (marginRightPx === viewSettings.marginRightPx) return;
|
|
if (viewSettings.marginPx !== undefined) {
|
|
saveViewSettings(envConfig, bookKey, 'marginPx', undefined, false, false);
|
|
}
|
|
saveViewSettings(envConfig, bookKey, 'marginRightPx', marginRightPx, false, false);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [marginRightPx]);
|
|
|
|
useEffect(() => {
|
|
if (marginLeftPx === viewSettings.marginLeftPx) return;
|
|
if (viewSettings.marginPx !== undefined) {
|
|
saveViewSettings(envConfig, bookKey, 'marginPx', undefined, false, false);
|
|
}
|
|
saveViewSettings(envConfig, bookKey, 'marginLeftPx', marginLeftPx, false, false);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [marginLeftPx]);
|
|
|
|
useEffect(() => {
|
|
if (compactMarginTopPx === viewSettings.compactMarginTopPx) return;
|
|
if (viewSettings.compactMarginPx !== undefined) {
|
|
saveViewSettings(envConfig, bookKey, 'compactMarginPx', undefined, false, false);
|
|
}
|
|
saveViewSettings(envConfig, bookKey, 'compactMarginTopPx', compactMarginTopPx, false, false);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [compactMarginTopPx]);
|
|
|
|
useEffect(() => {
|
|
if (compactMarginBottomPx === viewSettings.compactMarginBottomPx) return;
|
|
if (viewSettings.compactMarginPx !== undefined) {
|
|
saveViewSettings(envConfig, bookKey, 'compactMarginPx', undefined, false, false);
|
|
}
|
|
saveViewSettings(
|
|
envConfig,
|
|
bookKey,
|
|
'compactMarginBottomPx',
|
|
compactMarginBottomPx,
|
|
false,
|
|
false,
|
|
);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [compactMarginBottomPx]);
|
|
|
|
useEffect(() => {
|
|
if (compactMarginRightPx === viewSettings.compactMarginRightPx) return;
|
|
if (viewSettings.compactMarginPx !== undefined) {
|
|
saveViewSettings(envConfig, bookKey, 'compactMarginPx', undefined, false, false);
|
|
}
|
|
saveViewSettings(
|
|
envConfig,
|
|
bookKey,
|
|
'compactMarginRightPx',
|
|
compactMarginRightPx,
|
|
false,
|
|
false,
|
|
);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [compactMarginRightPx]);
|
|
|
|
useEffect(() => {
|
|
if (compactMarginLeftPx === viewSettings.compactMarginLeftPx) return;
|
|
if (viewSettings.compactMarginPx !== undefined) {
|
|
saveViewSettings(envConfig, bookKey, 'compactMarginPx', undefined, false, false);
|
|
}
|
|
saveViewSettings(envConfig, bookKey, 'compactMarginLeftPx', compactMarginLeftPx, false, false);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [compactMarginLeftPx]);
|
|
|
|
useEffect(() => {
|
|
if (gapPercent === viewSettings.gapPercent) return;
|
|
saveViewSettings(envConfig, bookKey, 'gapPercent', gapPercent, false, false);
|
|
view?.renderer.setAttribute('gap', `${gapPercent}%`);
|
|
if (viewSettings.scrolled) {
|
|
view?.renderer.setAttribute('flow', 'scrolled');
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [gapPercent]);
|
|
|
|
useEffect(() => {
|
|
if (maxColumnCount === viewSettings.maxColumnCount) return;
|
|
saveViewSettings(envConfig, bookKey, 'maxColumnCount', maxColumnCount, false, false);
|
|
view?.renderer.setAttribute('max-column-count', maxColumnCount);
|
|
view?.renderer.setAttribute('max-inline-size', `${getMaxInlineSize(viewSettings)}px`);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [maxColumnCount]);
|
|
|
|
useEffect(() => {
|
|
if (maxInlineSize === viewSettings.maxInlineSize) return;
|
|
saveViewSettings(envConfig, bookKey, 'maxInlineSize', maxInlineSize, false, false);
|
|
view?.renderer.setAttribute('max-inline-size', `${getMaxInlineSize(viewSettings)}px`);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [maxInlineSize]);
|
|
|
|
useEffect(() => {
|
|
if (maxBlockSize === viewSettings.maxBlockSize) return;
|
|
saveViewSettings(envConfig, bookKey, 'maxBlockSize', maxBlockSize, false, false);
|
|
view?.renderer.setAttribute('max-block-size', `${maxBlockSize}px`);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [maxBlockSize]);
|
|
|
|
useEffect(() => {
|
|
if (writingMode === viewSettings.writingMode) return;
|
|
// global settings are not supported for writing mode
|
|
const prevWritingMode = viewSettings.writingMode;
|
|
if (writingMode.includes('vertical')) {
|
|
viewSettings.vertical = true;
|
|
} else {
|
|
viewSettings.vertical = false;
|
|
}
|
|
saveViewSettings(envConfig, bookKey, 'writingMode', writingMode, true);
|
|
if (view) {
|
|
view.renderer.setStyles?.(getStyles(viewSettings));
|
|
view.book.dir = getBookDirFromWritingMode(writingMode);
|
|
}
|
|
if (
|
|
prevWritingMode !== writingMode &&
|
|
(['horizontal-rl', 'vertical-rl'].includes(writingMode) ||
|
|
['horizontal-rl', 'vertical-rl'].includes(prevWritingMode))
|
|
) {
|
|
saveAndReload();
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [writingMode]);
|
|
|
|
useEffect(() => {
|
|
if (overrideLayout === viewSettings.overrideLayout) return;
|
|
saveViewSettings(envConfig, bookKey, 'overrideLayout', overrideLayout);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [overrideLayout]);
|
|
|
|
useEffect(() => {
|
|
if (doubleBorder === viewSettings.doubleBorder) return;
|
|
saveViewSettings(envConfig, bookKey, 'doubleBorder', doubleBorder, false, false);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [doubleBorder]);
|
|
|
|
useEffect(() => {
|
|
saveViewSettings(envConfig, bookKey, 'borderColor', borderColor, false, false);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [borderColor]);
|
|
|
|
useEffect(() => {
|
|
saveViewSettings(envConfig, bookKey, 'showBarsOnScroll', showBarsOnScroll, false, false);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [showBarsOnScroll]);
|
|
|
|
useEffect(() => {
|
|
saveViewSettings(envConfig, bookKey, 'showRemainingTime', showRemainingTime, false, false);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [showRemainingTime]);
|
|
|
|
useEffect(() => {
|
|
saveViewSettings(envConfig, bookKey, 'showRemainingPages', showRemainingPages, false, false);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [showRemainingPages]);
|
|
|
|
useEffect(() => {
|
|
saveViewSettings(envConfig, bookKey, 'showProgressInfo', showProgressInfo, false, false);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [showProgressInfo]);
|
|
|
|
useEffect(() => {
|
|
saveViewSettings(envConfig, bookKey, 'progressStyle', progressStyle, false, false);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [progressStyle]);
|
|
|
|
useEffect(() => {
|
|
if (showHeader === viewSettings.showHeader) return;
|
|
if (showHeader && !viewSettings.vertical) {
|
|
const minMarginTop = Math.max(0, Math.round((44 - gridInsets.top) / 4) * 4);
|
|
viewSettings.marginTopPx = Math.max(viewSettings.marginTopPx, minMarginTop);
|
|
setMarginTopPx(viewSettings.marginTopPx);
|
|
setViewSettings(bookKey, viewSettings);
|
|
}
|
|
saveViewSettings(envConfig, bookKey, 'showHeader', showHeader, false, false);
|
|
// Margin and gap settings will be applied in FoliateViewer
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [showHeader]);
|
|
|
|
useEffect(() => {
|
|
if (showFooter === viewSettings.showFooter) return;
|
|
if (showFooter && !viewSettings.vertical) {
|
|
const minMarginBottom = Math.max(0, Math.round((44 - gridInsets.bottom) / 4) * 4);
|
|
viewSettings.marginBottomPx = Math.max(viewSettings.marginBottomPx, minMarginBottom);
|
|
setMarginBottomPx(viewSettings.marginBottomPx);
|
|
setViewSettings(bookKey, viewSettings);
|
|
}
|
|
saveViewSettings(envConfig, bookKey, 'showFooter', showFooter, false, false);
|
|
// Margin and gap settings will be applied in FoliateViewer
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [showFooter]);
|
|
|
|
useEffect(() => {
|
|
saveViewSettings(envConfig, bookKey, 'screenOrientation', screenOrientation, false, false);
|
|
if (appService?.isMobileApp) {
|
|
lockScreenOrientation({ orientation: screenOrientation });
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [screenOrientation]);
|
|
|
|
const langCode = getBookLangCode(bookData.bookDoc?.metadata?.language);
|
|
const mightBeRTLBook = MIGHT_BE_RTL_LANGS.includes(langCode) || isCJKEnv();
|
|
const isVertical = viewSettings.vertical || writingMode.includes('vertical');
|
|
|
|
return (
|
|
<div className='my-4 w-full space-y-6'>
|
|
<div className='flex items-center justify-between'>
|
|
<h2 className='font-medium'>{_('Override Book Layout')}</h2>
|
|
<input
|
|
type='checkbox'
|
|
className='toggle'
|
|
checked={overrideLayout}
|
|
onChange={() => setOverrideLayout(!overrideLayout)}
|
|
/>
|
|
</div>
|
|
{mightBeRTLBook && (
|
|
<div className='flex items-center justify-between'>
|
|
<h2 className='font-medium'>{_('Writing Mode')}</h2>
|
|
<div className='flex gap-4'>
|
|
<div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Default')}>
|
|
<button
|
|
className={`btn btn-ghost btn-circle btn-sm ${writingMode === 'auto' ? 'btn-active bg-base-300' : ''}`}
|
|
onClick={() => setWritingMode('auto')}
|
|
>
|
|
<MdOutlineAutoMode />
|
|
</button>
|
|
</div>
|
|
|
|
<div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Horizontal Direction')}>
|
|
<button
|
|
className={`btn btn-ghost btn-circle btn-sm ${writingMode === 'horizontal-tb' ? 'btn-active bg-base-300' : ''}`}
|
|
onClick={() => setWritingMode('horizontal-tb')}
|
|
>
|
|
<MdOutlineTextRotationNone />
|
|
</button>
|
|
</div>
|
|
|
|
<div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Vertical Direction')}>
|
|
<button
|
|
className={`btn btn-ghost btn-circle btn-sm ${writingMode === 'vertical-rl' ? 'btn-active bg-base-300' : ''}`}
|
|
onClick={() => setWritingMode('vertical-rl')}
|
|
>
|
|
<MdTextRotateVertical />
|
|
</button>
|
|
</div>
|
|
|
|
<div className='lg:tooltip lg:tooltip-bottom' data-tip={_('RTL Direction')}>
|
|
<button
|
|
className={`btn btn-ghost btn-circle btn-sm ${writingMode === 'horizontal-rl' ? 'btn-active bg-base-300' : ''}`}
|
|
onClick={() => setWritingMode('horizontal-rl')}
|
|
>
|
|
<TbTextDirectionRtl />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{viewSettings.vertical && (
|
|
<div className='w-full'>
|
|
<h2 className='mb-2 font-medium'>{_('Border Frame')}</h2>
|
|
<div className='card bg-base-100 border-base-200 border shadow'>
|
|
<div className='divide-base-200 divide-y'>
|
|
<div className='config-item'>
|
|
<span className=''>{_('Double Border')}</span>
|
|
<input
|
|
type='checkbox'
|
|
className='toggle'
|
|
checked={doubleBorder}
|
|
onChange={() => setDoubleBorder(!doubleBorder)}
|
|
/>
|
|
</div>
|
|
|
|
<div className='config-item'>
|
|
<span className=''>{_('Border Color')}</span>
|
|
<div className='flex gap-4'>
|
|
<button
|
|
className={`btn btn-circle btn-sm bg-red-300 hover:bg-red-500 ${borderColor === 'red' ? 'btn-active !bg-red-500' : ''}`}
|
|
onClick={() => setBorderColor('red')}
|
|
></button>
|
|
|
|
<button
|
|
className={`btn btn-circle btn-sm bg-black/50 hover:bg-black ${borderColor === 'black' ? 'btn-active !bg-black' : ''}`}
|
|
onClick={() => setBorderColor('black')}
|
|
></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className='w-full'>
|
|
<h2 className='mb-2 font-medium'>{_('Paragraph')}</h2>
|
|
<div className='card bg-base-100 border-base-200 border shadow'>
|
|
<div className='divide-base-200 divide-y'>
|
|
<NumberInput
|
|
label={_('Paragraph Margin')}
|
|
value={paragraphMargin}
|
|
onChange={setParagraphMargin}
|
|
min={0}
|
|
max={4}
|
|
step={0.2}
|
|
/>
|
|
<NumberInput
|
|
label={_('Line Spacing')}
|
|
value={lineHeight}
|
|
onChange={setLineHeight}
|
|
min={1.0}
|
|
max={3.0}
|
|
step={0.1}
|
|
/>
|
|
{langCode !== 'zh' && (
|
|
<NumberInput
|
|
label={_('Word Spacing')}
|
|
value={wordSpacing}
|
|
onChange={setWordSpacing}
|
|
min={-4}
|
|
max={8}
|
|
step={0.5}
|
|
/>
|
|
)}
|
|
<NumberInput
|
|
label={_('Letter Spacing')}
|
|
value={letterSpacing}
|
|
onChange={setLetterSpacing}
|
|
min={-2}
|
|
max={4}
|
|
step={0.5}
|
|
/>
|
|
<NumberInput
|
|
label={_('Text Indent')}
|
|
value={textIndent}
|
|
onChange={setTextIndent}
|
|
min={-2}
|
|
max={4}
|
|
step={1}
|
|
/>
|
|
<div className='config-item'>
|
|
<span className=''>{_('Full Justification')}</span>
|
|
<input
|
|
type='checkbox'
|
|
className='toggle'
|
|
checked={fullJustification}
|
|
onChange={() => setFullJustification(!fullJustification)}
|
|
/>
|
|
</div>
|
|
<div className='config-item'>
|
|
<span className=''>{_('Hyphenation')}</span>
|
|
<input
|
|
type='checkbox'
|
|
className='toggle'
|
|
checked={hyphenation}
|
|
onChange={() => setHyphenation(!hyphenation)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className='w-full'>
|
|
<h2 className='mb-2 font-medium'>{_('Page')}</h2>
|
|
<div className='card bg-base-100 border-base-200 border shadow'>
|
|
<div className='divide-base-200 divide-y'>
|
|
<NumberInput
|
|
label={_('Top Margin (px)')}
|
|
value={showHeader && !isVertical ? marginTopPx : compactMarginTopPx}
|
|
onChange={showHeader && !isVertical ? setMarginTopPx : setCompactMarginTopPx}
|
|
min={
|
|
showHeader && !isVertical
|
|
? Math.max(0, Math.round((44 - gridInsets.top) / 4) * 4)
|
|
: 0
|
|
}
|
|
max={88}
|
|
step={4}
|
|
/>
|
|
<NumberInput
|
|
label={_('Bottom Margin (px)')}
|
|
value={showFooter && !isVertical ? marginBottomPx : compactMarginBottomPx}
|
|
onChange={showFooter && !isVertical ? setMarginBottomPx : setCompactMarginBottomPx}
|
|
min={
|
|
showFooter && !isVertical
|
|
? Math.max(0, Math.round((44 - gridInsets.bottom) / 4) * 4)
|
|
: 0
|
|
}
|
|
max={88}
|
|
step={4}
|
|
/>
|
|
<NumberInput
|
|
label={_('Left Margin (px)')}
|
|
value={showFooter && isVertical ? marginLeftPx : compactMarginLeftPx}
|
|
onChange={showFooter && isVertical ? setMarginLeftPx : setCompactMarginLeftPx}
|
|
min={0}
|
|
max={88}
|
|
step={4}
|
|
/>
|
|
<NumberInput
|
|
label={_('Right Margin (px)')}
|
|
value={showHeader && isVertical ? marginRightPx : compactMarginRightPx}
|
|
onChange={showHeader && isVertical ? setMarginRightPx : setCompactMarginRightPx}
|
|
min={0}
|
|
max={88}
|
|
step={4}
|
|
/>
|
|
<NumberInput
|
|
label={_('Column Gap (%)')}
|
|
value={gapPercent}
|
|
onChange={setGapPercent}
|
|
min={0}
|
|
max={30}
|
|
/>
|
|
<NumberInput
|
|
label={_('Maximum Number of Columns')}
|
|
value={maxColumnCount}
|
|
onChange={setMaxColumnCount}
|
|
min={1}
|
|
max={4}
|
|
/>
|
|
<NumberInput
|
|
label={viewSettings.vertical ? _('Maximum Column Height') : _('Maximum Column Width')}
|
|
value={maxInlineSize}
|
|
onChange={setMaxInlineSize}
|
|
disabled={maxColumnCount === 1 || viewSettings.scrolled}
|
|
min={400}
|
|
max={9999}
|
|
step={100}
|
|
/>
|
|
<NumberInput
|
|
label={viewSettings.vertical ? _('Maximum Column Width') : _('Maximum Column Height')}
|
|
value={maxBlockSize}
|
|
onChange={setMaxBlockSize}
|
|
disabled={maxColumnCount === 1 || viewSettings.scrolled}
|
|
min={400}
|
|
max={9999}
|
|
step={100}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className='w-full'>
|
|
<h2 className='mb-2 font-medium'>{_('Header & Footer')}</h2>
|
|
<div className='card bg-base-100 border-base-200 border shadow'>
|
|
<div className='divide-base-200 divide-y'>
|
|
<div className='config-item'>
|
|
<span className=''>{_('Show Header')}</span>
|
|
<input
|
|
type='checkbox'
|
|
className='toggle'
|
|
checked={showHeader}
|
|
onChange={() => setShowHeader(!showHeader)}
|
|
/>
|
|
</div>
|
|
<div className='config-item'>
|
|
<span className=''>{_('Show Footer')}</span>
|
|
<input
|
|
type='checkbox'
|
|
className='toggle'
|
|
checked={showFooter}
|
|
onChange={() => setShowFooter(!showFooter)}
|
|
/>
|
|
</div>
|
|
<div className='config-item'>
|
|
<span className=''>{_('Show Remaining Time')}</span>
|
|
<input
|
|
type='checkbox'
|
|
className='toggle'
|
|
checked={showRemainingTime}
|
|
disabled={!showFooter}
|
|
onChange={() => {
|
|
if (!showRemainingTime) {
|
|
setShowRemainingTime(true);
|
|
setShowRemainingPages(false);
|
|
} else {
|
|
setShowRemainingTime(false);
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className='config-item'>
|
|
<span className=''>{_('Show Remaining Pages')}</span>
|
|
<input
|
|
type='checkbox'
|
|
className='toggle'
|
|
checked={showRemainingPages}
|
|
disabled={!showFooter}
|
|
onChange={() => {
|
|
if (!showRemainingPages) {
|
|
setShowRemainingPages(true);
|
|
setShowRemainingTime(false);
|
|
} else {
|
|
setShowRemainingPages(false);
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className='config-item'>
|
|
<span className=''>{_('Show Reading Progress')}</span>
|
|
<input
|
|
type='checkbox'
|
|
className='toggle'
|
|
checked={showProgressInfo}
|
|
disabled={!showFooter}
|
|
onChange={() => setShowProgressInfo(!showProgressInfo)}
|
|
/>
|
|
</div>
|
|
<div className='config-item'>
|
|
<span className=''>{_('Reading Progress Style')}</span>
|
|
<Select
|
|
value={progressStyle}
|
|
onChange={(e) => setProgressStyle(e.target.value as 'percentage' | 'fraction')}
|
|
options={[
|
|
{ value: 'fraction', label: _('Page Number') },
|
|
{ value: 'percentage', label: _('Percentage') },
|
|
]}
|
|
disabled={!showProgressInfo}
|
|
/>
|
|
</div>
|
|
<div className='config-item'>
|
|
<span className=''>{_('Apply also in Scrolled Mode')}</span>
|
|
<input
|
|
type='checkbox'
|
|
className='toggle'
|
|
checked={showBarsOnScroll}
|
|
onChange={() => setShowBarsOnScroll(!showBarsOnScroll)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{appService?.hasOrientationLock && (
|
|
<div className='w-full'>
|
|
<h2 className='mb-2 font-medium'>{_('Screen')}</h2>
|
|
<div className='card border-base-200 bg-base-100 border shadow'>
|
|
<div className='divide-base-200 divide-y'>
|
|
<div className='config-item'>
|
|
<span className=''>{_('Orientation')}</span>
|
|
<div className='flex gap-4'>
|
|
<div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Auto')}>
|
|
<button
|
|
className={`btn btn-ghost btn-circle btn-sm ${screenOrientation === 'auto' ? 'btn-active bg-base-300' : ''}`}
|
|
onClick={() => setScreenOrientation('auto')}
|
|
>
|
|
<MdOutlineScreenRotation />
|
|
</button>
|
|
</div>
|
|
|
|
<div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Portrait')}>
|
|
<button
|
|
className={`btn btn-ghost btn-circle btn-sm ${screenOrientation === 'portrait' ? 'btn-active bg-base-300' : ''}`}
|
|
onClick={() => setScreenOrientation('portrait')}
|
|
>
|
|
<IoPhonePortraitOutline />
|
|
</button>
|
|
</div>
|
|
|
|
<div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Landscape')}>
|
|
<button
|
|
className={`btn btn-ghost btn-circle btn-sm ${screenOrientation === 'landscape' ? 'btn-active bg-base-300' : ''}`}
|
|
onClick={() => setScreenOrientation('landscape')}
|
|
>
|
|
<IoPhoneLandscapeOutline />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LayoutPanel;
|