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

feat: add option to config reading progress format (#1761)

Browse Source 
* feat: added percentage option and set by default

* feat: added decimal percentaje

* fix: fixed issue that the function of format didn't look for typeof

* fix: Added revision fixes

* fix: Added revision fixes and changes

* fix: solved about styling code

* fix: solved about styling code on book.ts and translation.json

* fix: changed lines useEffect line that is escencial to Layoutpanel.tsx, and ProgressInfo.tsx has correct render like last version (Loc.) nd its separator

* fix: correct SUPPORTED_LANGS key and disable style reapplication in saveViewSettings

* i18n for the progress style config

---------

Co-authored-by: Huang Xin <chrox.huang@gmail.com>
This commit is contained in:
Andres Puello
2025-08-08 23:23:18 -05:00
committed by GitHub
parent f46be89036
commit 09e65211b4
26 changed files with 177 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx
+25 -8
View File
@@ -18,6 +18,7 @@ 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 }) => {
@@ -66,9 +67,9 @@ const LayoutPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterRese
const [showBarsOnScroll, setShowBarsOnScroll] = useState(viewSettings.showBarsOnScroll!);
const [showRemainingTime, setShowRemainingTime] = useState(viewSettings.showRemainingTime!);
const [showRemainingPages, setShowRemainingPages] = useState(viewSettings.showRemainingPages!);
const [showPageNumber, setShowPageNumber] = useState(viewSettings.showPageNumber!);
const [showProgressInfo, setShowProgressInfo] = useState(viewSettings.showProgressInfo!);
const [progressStyle, setProgressStyle] = useState(viewSettings.progressStyle);
const [screenOrientation, setScreenOrientation] = useState(viewSettings.screenOrientation!);
const resetToDefaults = useResetViewSettings();
const handleReset = () => {
@@ -100,7 +101,7 @@ const LayoutPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterRese
showBarsOnScroll: setShowBarsOnScroll,
showRemainingTime: setShowRemainingTime,
showRemainingPages: setShowRemainingPages,
showPageNumber: setShowPageNumber,
showProgressInfo: setShowProgressInfo,
});
};
@@ -319,9 +320,13 @@ const LayoutPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterRese
}, [showRemainingPages]);
useEffect(() => {
saveViewSettings(envConfig, bookKey, 'showPageNumber', showPageNumber, false, false);
saveViewSettings(envConfig, bookKey, 'showProgressInfo', showProgressInfo, false, false);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [showPageNumber]);
}, [showProgressInfo]);
useEffect(() => {
saveViewSettings(envConfig, bookKey, 'progressStyle', progressStyle, false, false);
}, [progressStyle]);
useEffect(() => {
if (showHeader === viewSettings.showHeader) return;
@@ -654,13 +659,25 @@ const LayoutPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterRese
/>
</div>
<div className='config-item'>
<span className=''>{_('Show Page Number')}</span>
<span className=''>{_('Show Reading Progress')}</span>
<input
type='checkbox'
className='toggle'
checked={showPageNumber}
checked={showProgressInfo}
disabled={!showFooter}
onChange={() => setShowPageNumber(!showPageNumber)}
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'>