diff --git a/apps/readest-app/public/locales/zh-CN/translation.json b/apps/readest-app/public/locales/zh-CN/translation.json index 0f234dcb..44825b2d 100644 --- a/apps/readest-app/public/locales/zh-CN/translation.json +++ b/apps/readest-app/public/locales/zh-CN/translation.json @@ -64,7 +64,7 @@ "Match Case": "匹配大小写", "Match Diacritics": "匹配重音符号", "Match Whole Words": "匹配整个单词", - "Maximum Block Size": "内容最大宽度", + "Maximum Block Size": "内容最大高度", "Maximum Inline Size": "每栏最大宽度", "Maximum Number of Columns": "分栏数", "Minimum Font Size": "最小字号", diff --git a/apps/readest-app/public/locales/zh-TW/translation.json b/apps/readest-app/public/locales/zh-TW/translation.json index a075a663..a342acee 100644 --- a/apps/readest-app/public/locales/zh-TW/translation.json +++ b/apps/readest-app/public/locales/zh-TW/translation.json @@ -64,7 +64,7 @@ "Match Case": "匹配大小寫", "Match Diacritics": "匹配重音符號", "Match Whole Words": "匹配整個單詞", - "Maximum Block Size": "內容最大寬度", + "Maximum Block Size": "內容最大高度", "Maximum Inline Size": "每欄最大寬度", "Maximum Number of Columns": "分欄數", "Minimum Font Size": "最小字號", diff --git a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx index 6d324d7e..813fd765 100644 --- a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx +++ b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx @@ -12,7 +12,6 @@ import { useAutoHideScrollbar } from '../hooks/useAutoHideScrollbar'; import { getStyles, mountAdditionalFonts } from '@/utils/style'; import { getBookDirFromWritingMode } from '@/utils/book'; import { useTheme } from '@/hooks/useTheme'; -import { ONE_COLUMN_MAX_INLINE_SIZE } from '@/services/constants'; import { handleKeydown, handleMousedown, @@ -23,6 +22,7 @@ import { handleTouchMove, handleTouchEnd, } from '../utils/iframeEventHandlers'; +import { getMaxInlineSize } from '@/utils/config'; const FoliateViewer: React.FC<{ bookKey: string; @@ -154,10 +154,7 @@ const FoliateViewer: React.FC<{ const gapPercent = viewSettings.gapPercent!; const animated = viewSettings.animated!; const maxColumnCount = viewSettings.maxColumnCount!; - const maxInlineSize = - maxColumnCount === 1 || isScrolled - ? ONE_COLUMN_MAX_INLINE_SIZE - : viewSettings.maxInlineSize!; + const maxInlineSize = getMaxInlineSize(viewSettings); const maxBlockSize = viewSettings.maxBlockSize!; if (animated) { view.renderer.setAttribute('animated', ''); diff --git a/apps/readest-app/src/app/reader/components/ViewMenu.tsx b/apps/readest-app/src/app/reader/components/ViewMenu.tsx index 9e07c3ea..da6cc9f2 100644 --- a/apps/readest-app/src/app/reader/components/ViewMenu.tsx +++ b/apps/readest-app/src/app/reader/components/ViewMenu.tsx @@ -5,17 +5,13 @@ import { BiMoon, BiSun } from 'react-icons/bi'; import { TbSunMoon } from 'react-icons/tb'; import { MdZoomOut, MdZoomIn, MdCheck } from 'react-icons/md'; -import { - MAX_ZOOM_LEVEL, - MIN_ZOOM_LEVEL, - ONE_COLUMN_MAX_INLINE_SIZE, - ZOOM_STEP, -} from '@/services/constants'; +import { MAX_ZOOM_LEVEL, MIN_ZOOM_LEVEL, ZOOM_STEP } from '@/services/constants'; import MenuItem from '@/components/MenuItem'; import { useReaderStore } from '@/store/readerStore'; import { useTranslation } from '@/hooks/useTranslation'; import { useTheme, ThemeMode } from '@/hooks/useTheme'; import { getStyles } from '@/utils/style'; +import { getMaxInlineSize } from '@/utils/config'; interface ViewMenuProps { bookKey: string; @@ -65,7 +61,7 @@ const ViewMenu: React.FC = ({ getView(bookKey)?.renderer.setAttribute('flow', isScrolledMode ? 'scrolled' : 'paginated'); getView(bookKey)?.renderer.setAttribute( 'max-inline-size', - `${viewSettings.maxColumnCount === 1 || isScrolledMode ? ONE_COLUMN_MAX_INLINE_SIZE : viewSettings.maxInlineSize}px`, + `${getMaxInlineSize(viewSettings)}px`, ); getView(bookKey)?.renderer.setStyles?.(getStyles(viewSettings!, themeCode)); viewSettings!.scrolled = isScrolledMode; diff --git a/apps/readest-app/src/app/reader/components/settings/FontPanel.tsx b/apps/readest-app/src/app/reader/components/settings/FontPanel.tsx index eea005df..8422903f 100644 --- a/apps/readest-app/src/app/reader/components/settings/FontPanel.tsx +++ b/apps/readest-app/src/app/reader/components/settings/FontPanel.tsx @@ -17,9 +17,10 @@ import { useReaderStore } from '@/store/readerStore'; import { useSettingsStore } from '@/store/settingsStore'; import { useTranslation } from '@/hooks/useTranslation'; import { useTheme } from '@/hooks/useTheme'; +import { useEnv } from '@/context/EnvContext'; import { getStyles } from '@/utils/style'; import { getOSPlatform } from '@/utils/misc'; -import { FONT_ENUM_SUPPORTED_OS_PLATFORMS, getSysFontsList } from '@/utils/font'; +import { getSysFontsList } from '@/utils/font'; import { isTauriAppPlatform } from '@/services/environment'; interface FontFaceProps { @@ -60,6 +61,7 @@ const FontFace = ({ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { const _ = useTranslation(); + const { appService } = useEnv(); const { settings, isFontLayoutSettingsGlobal, setSettings } = useSettingsStore(); const { getView, getViewSettings, setViewSettings } = useReaderStore(); const view = getView(bookKey); @@ -109,7 +111,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { const [fontWeight, setFontWeight] = useState(viewSettings.fontWeight!); useEffect(() => { - if (isTauriAppPlatform() && FONT_ENUM_SUPPORTED_OS_PLATFORMS.includes(osPlatform)) { + if (isTauriAppPlatform() && appService?.hasSysFontsList) { getSysFontsList().then((fonts) => { setSysFonts(fonts); }); diff --git a/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx b/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx index 44e46bd8..991d252b 100644 --- a/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx +++ b/apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx @@ -2,13 +2,13 @@ import React, { useEffect, useState } from 'react'; import { MdOutlineAutoMode } from 'react-icons/md'; import { MdOutlineTextRotationDown, MdOutlineTextRotationNone } from 'react-icons/md'; -import { ONE_COLUMN_MAX_INLINE_SIZE } from '@/services/constants'; import { useSettingsStore } from '@/store/settingsStore'; import { useReaderStore } from '@/store/readerStore'; import { useBookDataStore } from '@/store/bookDataStore'; import { useTranslation } from '@/hooks/useTranslation'; import { useTheme } from '@/hooks/useTheme'; import { getStyles } from '@/utils/style'; +import { getMaxInlineSize } from '@/utils/config'; import { getBookDirFromWritingMode, getBookLangCode } from '@/utils/book'; import NumberInput from './NumberInput'; @@ -147,10 +147,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { setSettings(settings); } view?.renderer.setAttribute('max-column-count', maxColumnCount); - view?.renderer.setAttribute( - 'max-inline-size', - `${maxColumnCount === 1 || viewSettings.scrolled ? ONE_COLUMN_MAX_INLINE_SIZE : maxInlineSize}px`, - ); + view?.renderer.setAttribute('max-inline-size', `${getMaxInlineSize(viewSettings)}px`); // eslint-disable-next-line react-hooks/exhaustive-deps }, [maxColumnCount]); @@ -161,10 +158,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { settings.globalViewSettings.maxInlineSize = maxInlineSize; setSettings(settings); } - view?.renderer.setAttribute( - 'max-inline-size', - `${maxColumnCount === 1 || viewSettings.scrolled ? ONE_COLUMN_MAX_INLINE_SIZE : maxInlineSize}px`, - ); + view?.renderer.setAttribute('max-inline-size', `${getMaxInlineSize(viewSettings)}px`); // eslint-disable-next-line react-hooks/exhaustive-deps }, [maxInlineSize]); @@ -353,6 +347,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => { label={_('Maximum Inline Size')} value={maxInlineSize} onChange={setMaxInlineSize} + disabled={maxColumnCount === 1 || viewSettings.scrolled} min={500} max={9999} step={100} diff --git a/apps/readest-app/src/app/reader/components/settings/NumberInput.tsx b/apps/readest-app/src/app/reader/components/settings/NumberInput.tsx index a03c3bc1..6f20b0e5 100644 --- a/apps/readest-app/src/app/reader/components/settings/NumberInput.tsx +++ b/apps/readest-app/src/app/reader/components/settings/NumberInput.tsx @@ -9,6 +9,7 @@ interface NumberInputProps { min: number; max: number; step?: number; + disabled?: boolean; onChange: (value: number) => void; } @@ -20,6 +21,7 @@ const NumberInput: React.FC = ({ min, max, step, + disabled, }) => { const [localValue, setLocalValue] = useState(value); const numberStep = step || 1; @@ -74,13 +76,13 @@ const NumberInput: React.FC = ({ /> diff --git a/apps/readest-app/src/app/reader/components/settings/SettingsDialog.tsx b/apps/readest-app/src/app/reader/components/settings/SettingsDialog.tsx index 815d6e93..53cd9d52 100644 --- a/apps/readest-app/src/app/reader/components/settings/SettingsDialog.tsx +++ b/apps/readest-app/src/app/reader/components/settings/SettingsDialog.tsx @@ -64,7 +64,7 @@ const SettingsDialog: React.FC<{ bookKey: string; config: BookConfig }> = ({ boo isOpen={true} onClose={handleClose} className='modal-open' - boxClassName='sm:w-1/2 sm:min-w-[480px] sm:h-[65%]' + boxClassName='sm:min-w-[480px]' header={